1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

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

View File

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

View File

@ -5,14 +5,18 @@ const {
remcalc
} = fns;
const {
base
} = colors;
module.exports = {
borderRadius: remcalc(4),
bottomShaddow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`,
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)`,
border: {
checked: `${remcalc(1)} solid ${colors.brandPrimary}`,
unchecked: `${remcalc(1)} solid ${colors.borderSecondary}`,
confirmed: `${remcalc(1)} solid ${colors.confirmation}`
checked: `${remcalc(1)} solid ${base.primary}`,
unchecked: `${remcalc(1)} solid ${base.borderSecondary}`,
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 = {
semibold: '#464646',
regular: '#646464'
semibold: base.secondary,
regular: base.secondaryDark
};
const brandPrimary = {
brandPrimary: '#3B46CC',
brandPrimaryDark: '#1838C0',
brandPrimaryDarkest: '#12279F',
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 inactive = {
default: '#FAFAFA',
border: '#D8D8D8',
text: base.greyLight
};
const notifications = {
alert: '#DA4B42',
alertLight: '#FFC7C7',
confirmation: '#00AF66',
success: '#00AF66',
warning: '#E4A800',
warningLight: '#FFFAED',
alert: base.red,
confirmation: base.green,
warning: base.yellow,
};
const forms = {
inputError: '#DA4B42',
inputWarning: '#E4A700'
inputError: base.red,
inputWarning: base.yellow
};
const metrics = {
@ -57,13 +53,12 @@ const topology = {
};
const colors = {
...brandPrimary,
...brandSecondary,
...brandInactive,
...notifications,
...metrics,
...topology,
...forms,
inactive,
notifications,
base,
fonts
};

View File

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