restructuring colors and updating button component

This commit is contained in:
Alex Windett 2017-02-02 12:35:38 +00:00
parent 4b684d077c
commit 589d5b28b4
5 changed files with 94 additions and 80 deletions

View File

@ -6,7 +6,11 @@ const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const { const {
colors, base,
inactive,
} = constants.colors;
const {
boxes boxes
} = constants; } = constants;
@ -20,39 +24,39 @@ const {
} = Styled; } = Styled;
const background = match({ const background = match({
secondary: colors.brandSecondary, secondary: base.grey,
disabled: colors.brandInactive disabled: inactive.default
}, colors.brandPrimary); }, base.primary);
const backgroundHover = match({ const backgroundHover = match({
secondary: colors.brandSecondaryDark, secondary: base.greyDark,
disabled: colors.brandInactive disabled: inactive.default
}, colors.brandPrimaryDark); }, base.primaryLight);
const backgroundActive = match({ const backgroundActive = match({
secondary: colors.brandSecondaryDarkest, secondary: base.secondaryDark,
disabled: colors.brandInactive disabled: inactive.default
}, colors.brandPrimaryDarkest); }, base.primaryDark);
const border = match({ const border = match({
secondary: colors.borderSecondary, secondary: base.grey,
disabled: colors.borderInactive disabled: inactive.default
}, colors.borderPrimary); }, base.primary);
const borderHover = match({ const borderHover = match({
secondary: colors.borderSecondaryDark, secondary: base.greyDark,
disabled: colors.borderInactive disabled: base.greyDark
}, colors.borderPrimaryDark); }, base.primaryDark);
const borderActive = match({ const borderActive = match({
secondary: colors.borderSecondaryDarkest, secondary: base.secondaryDark,
disabled: colors.borderInactive disabled: inactive.default
}, colors.borderPrimaryDarkest); }, base.primaryDark);
const color = match({ const color = match({
secondary: colors.brandSecondaryColor, secondary: base.secondary,
disabled: colors.brandInactiveColor disabled: inactive.text
}, colors.brandPrimaryColor); }, base.white);
const borderRadius = match({ const borderRadius = match({
rect: 0 rect: 0

View File

@ -4,24 +4,31 @@ const {
} = require('@kadira/storybook'); } = require('@kadira/storybook');
const Button = require('./'); const Button = require('./');
const Base = require('../base');
storiesOf('Button', module) storiesOf('Button', module)
.add('With text', () => ( .add('With text', () => (
<Button> <Base>
Inspire the lazy <Button>
</Button> Inspire the lazy
</Button>
</Base>
)).add('Secondary', () => ( )).add('Secondary', () => (
<Button secondary> <Base>
Inspire the brave <Button secondary>
</Button> Inspire the brave
</Button>
</Base>
)).add('Disabled', () => ( )).add('Disabled', () => (
<Button disabled> <Base>
Inspire the liars <Button disabled>
</Button> Inspire the liars
</Button>
</Base>
)).add('Anchor', () => ( )).add('Anchor', () => (
<div> <Base>
<Button href='#'> <Button href='#'>
Inspire the anchor Inspire the anchor
</Button> </Button>
</div> </Base>
)); ));

View File

@ -5,14 +5,18 @@ const {
remcalc remcalc
} = fns; } = fns;
const {
base
} = colors;
module.exports = { module.exports = {
borderRadius: remcalc(4), borderRadius: remcalc(4),
bottomShaddow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`, bottomShaddow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`,
bottomShaddowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`, bottomShaddowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`,
insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`, insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
border: { border: {
checked: `${remcalc(1)} solid ${colors.brandPrimary}`, checked: `${remcalc(1)} solid ${base.primary}`,
unchecked: `${remcalc(1)} solid ${colors.borderSecondary}`, unchecked: `${remcalc(1)} solid ${base.borderSecondary}`,
confirmed: `${remcalc(1)} solid ${colors.confirmation}` confirmed: `${remcalc(1)} solid ${base.secondaryLight}`
} }
}; };

View File

@ -1,50 +1,46 @@
/*
* There should be no string value to keys outside the `base` object.
* If a new colors needs to be used, check it doesn't already exist, or
* anything that is similar, and if it doesn't, add a key-value and reference from
* there. Lets try and keep different color variations down ot a minimum.
* */
const base = {
primary: '#1838c0',
primaryLight: '#3b46cc',
primaryDark: '#12279f',
secondary: '#464646',
secondaryDark: '#646464',
secondaryLight: '#919191',
white: '#FFFFFF',
grey: '#f8f8f8',
greyDark: '#e9e9e9',
greyLight: '#919191',
red: '#DA4B42',
yellow: '#E4A800',
green: '#00AF66',
};
const fonts = { const fonts = {
semibold: '#464646', semibold: base.secondary,
regular: '#646464' regular: base.secondaryDark
}; };
const brandPrimary = { const inactive = {
brandPrimary: '#3B46CC', default: '#FAFAFA',
brandPrimaryDark: '#1838C0', border: '#D8D8D8',
brandPrimaryDarkest: '#12279F', text: base.greyLight
borderPrimary: '#2531BC',
borderPrimaryDark: '#2531BC',
borderPrimaryDarkest: '#062BA0',
brandPrimaryColor: '#FFFFFF',
brandPrimaryLink: '#364ACD',
brandPrimaryLinkUnderline: '#3B47CC'
};
const brandSecondary = {
brandSecondary: '#FFFFFF',
brandSecondaryDark: '#F8F8F8',
brandSecondaryDarkest: '#E9E9E9',
borderSecondary: '#D8D8D8',
borderSecondaryDark: '#D8D8D8',
borderSecondaryDarkest: '#D8D8D8',
brandSecondaryColor: '#464646',
brandSecondaryLink: '#FFFFFF',
brandSecondaryLinkUnderline: '#FFFFFF'
};
const brandInactive = {
brandInactive: '#FAFAFA',
borderInactive: '#D8D8D8',
brandInactiveColor: '#919191'
}; };
const notifications = { const notifications = {
alert: '#DA4B42', alert: base.red,
alertLight: '#FFC7C7', confirmation: base.green,
confirmation: '#00AF66', warning: base.yellow,
success: '#00AF66',
warning: '#E4A800',
warningLight: '#FFFAED',
}; };
const forms = { const forms = {
inputError: '#DA4B42', inputError: base.red,
inputWarning: '#E4A700' inputWarning: base.yellow
}; };
const metrics = { const metrics = {
@ -57,13 +53,12 @@ const topology = {
}; };
const colors = { const colors = {
...brandPrimary,
...brandSecondary,
...brandInactive,
...notifications,
...metrics, ...metrics,
...topology, ...topology,
...forms, ...forms,
inactive,
notifications,
base,
fonts fonts
}; };

View File

@ -1,8 +1,12 @@
const colors = require('./colors'); const colors = require('./colors');
const {
base
} = colors;
const typography = { const typography = {
abbrBorderColor: colors.brandSecondary, abbrBorderColor: base.secondary,
textMuted: colors.brandSecondary textMuted: base.secondary
}; };
module.exports = typography; module.exports = typography;