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

Merge branch 'namespacing-colors'

* namespacing-colors:
  refactoring and updating list item
  updating more names in small components
  updating metric component - removed !importants and used new constants
  fixing seconary button colors
  restructuring colors and updating button component
This commit is contained in:
Alex Windett 2017-02-02 19:09:05 +00:00
commit 8940df8ef3
29 changed files with 151 additions and 211 deletions

View File

@ -12,7 +12,7 @@ const {
const StyledDescription = styled.p`
margin: 0;
color: ${colors.regular};
color: ${colors.base.secondary};
`;
const Description = (props) => (

View File

@ -6,7 +6,7 @@ const {
} = Styled;
const StyledLink = styled.a`
text-decoration: underline !important;
text-decoration: underline;
`;
const Link = ({

View File

@ -28,8 +28,8 @@ const StyledTile = styled.div`
width: ${remcalc(300)};
height: ${remcalc(247)};
box-shadow: ${boxes.bottomShaddow};
border: ${remcalc(1)} solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary};
border: ${remcalc(1)} solid ${colors.base.greyLight};
background-color: ${colors.base.white};
${breakpoints.small`
width: ${remcalc(300)};

View File

@ -12,7 +12,7 @@ const {
const StyledTitle = styled.h4`
margin: 0;
color: ${colors.semibold};
color: ${colors.fonts.semibold};
`;
const Title = ({

View File

@ -3,16 +3,16 @@ const React = require('react');
const Styled = require('styled-components');
const {
colors
} = constants;
base,
} = constants.colors;
const {
default: styled
} = Styled;
const color = (props) => props.secondary
? colors.brandSecondaryLink
: colors.brandPrimaryLink;
? base.secondary
: base.primary;
const Anchor = styled.a`
color: ${color} !important;

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.white,
disabled: inactive.default
}, base.primary);
const backgroundHover = match({
secondary: colors.brandSecondaryDark,
disabled: colors.brandInactive
}, colors.brandPrimaryDark);
secondary: base.grey,
disabled: inactive.default
}, base.primaryLight);
const backgroundActive = match({
secondary: colors.brandSecondaryDarkest,
disabled: colors.brandInactive
}, colors.brandPrimaryDarkest);
secondary: base.greyDark,
disabled: inactive.default
}, base.primaryDark);
const border = match({
secondary: colors.borderSecondary,
disabled: colors.borderInactive
}, colors.borderPrimary);
secondary: base.greyLight,
disabled: inactive.greyLight
}, base.primary);
const borderHover = match({
secondary: colors.borderSecondaryDark,
disabled: colors.borderInactive
}, colors.borderPrimaryDark);
secondary: base.grey,
disabled: inactive.default
}, base.primaryDark);
const borderActive = match({
secondary: colors.borderSecondaryDarkest,
disabled: colors.borderInactive
}, colors.borderPrimaryDarkest);
secondary: base.greyDark,
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

@ -20,5 +20,5 @@ module.exports = styled.label`
font-weight: 600;
font-style: normal;
font-stretch: normal;
color: ${colors.brandSecondaryColor};
color: ${colors.base.secondary};
`;

View File

@ -16,11 +16,11 @@ const {
} = Styled;
const colorWithDisabled = (props) => props.disabled
? colors.brandInactiveColor
? colors.inactive.default
: colors.fonts.regular;
const colorWithDefaultValue = (props) => props.value === props.defaultValue
? colors.brandInactiveColor
? colors.inactive.default
: colorWithDisabled(props);
const color = (props) => props.defaultValue
@ -46,7 +46,7 @@ module.exports = css`
padding: ${paddingTop} ${remcalc(18)};
border-radius: ${boxes.borderRadius};
background-color: ${colors.brandPrimaryColor};
background-color: ${colors.base.primary};
box-shadow: ${boxes.insetShaddow};
border: ${boxes.border.unchecked};
@ -61,7 +61,7 @@ module.exports = css`
outline: 0;
&:focus {
border-color: ${colors.brandPrimary};
border-color: ${colors.base.primary};
outline: 0;
}
`;

View File

@ -21,14 +21,14 @@ module.exports = styled.li`
padding-bottom: ${remcalc(10)};
& a {
color: ${colors.fonts.regular};
color: ${colors.base.primary};
text-decoration: none;
}
& a.active {
cursor: default;
color: ${colors.brandPrimaryLink};
border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline};
color: ${colors.base.primary};
border-bottom: 2px solid ${colors.base.primary};
padding-bottom: ${remcalc(6)};
}
`;

View File

@ -1,34 +0,0 @@
const React = require('react');
const Styled = require('styled-components');
const {
default: styled,
css
} = Styled;
const styles = css`
font-size: inherit;
`;
const Icon = ({
name = 'beer',
className,
iconSet = 'fa',
style
}) => {
const Icon = require(`react-icons/lib/${iconSet}/${name}`);
const Component = styled(Icon)(styles);
return (
<Component className={className} style={style} />
);
};
Icon.propTypes = {
className: React.PropTypes.string,
iconSet: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
style: React.PropTypes.object
};
module.exports = Icon;

View File

@ -1,37 +0,0 @@
# `<Icon>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Icon = require('./index.js');
const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Icon iconSet='fa' name='beer' />
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Icon = require('ui/icon');
module.exports = () => {
return (
<Icon iconSet='fa' name='beer' />
);
}
```

View File

@ -1,3 +0,0 @@
.icon {
font-size: inherit;
}

View File

@ -21,5 +21,5 @@ module.exports = styled(View)`
padding-left: ${remcalc(23)};
padding-right: ${remcalc(23)};
padding-bottom: ${remcalc(5)};
background-color: ${colors.brandInactive};
background-color: ${colors.inactive.default};
`;

View File

@ -1,4 +1,5 @@
const fns = require('../../shared/functions');
const constants = require('../../shared/constants');
const Item = require('./item');
const React = require('react');
const Styled = require('styled-components');
@ -7,6 +8,10 @@ const {
remcalc
} = fns;
const {
colors
} = constants;
const {
default: styled
} = Styled;
@ -25,6 +30,11 @@ const StyledItem = styled(Item)`
top: ${remcalc(-1)};
left: ${remcalc(-1)};
right: ${remcalc(-1)};
& [name="list-item-subtitle"],
& [name="list-item-title"] {
color: ${colors.base.white};
}
`;
const addFromHeader = (children) => React.Children.map(children, (c) => {

View File

@ -19,10 +19,10 @@ const {
} = Styled;
const paper = `
0 ${remcalc(8)} 0 ${remcalc(-5)} #fafafa,
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.borderSecondary},
0 ${remcalc(16)} 0 ${remcalc(-10)} #fafafa,
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.borderSecondary};
0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.grey},
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.greyDark},
0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.grey},
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.greyDark};
`;
const height = (props) => props.collapsed
@ -52,8 +52,8 @@ const Item = styled(Row)`
height: ${height};
min-height: ${minHeight};
box-shadow: ${shadow};
border: ${remcalc(1)} solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary};
border: ${remcalc(1)} solid ${colors.base.grey};
background-color: ${colors.base.white};
margin-bottom: ${marginBottom};
`;

View File

@ -22,8 +22,8 @@ const height = (props) => props.collapsed
: remcalc(124);
const borderLeftColor = (props) => !props.fromHeader
? colors.borderSecondary
: colors.borderPrimary;
? colors.base.greyLight
: colors.base.primary;
const Nav = styled.nav`
flex: 0 0 ${remcalc(47)};

View File

@ -1,13 +1,8 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const Title = require('./title');
const React = require('react');
const Styled = require('styled-components');
const {
colors
} = constants;
const {
remcalc
} = fns;
@ -20,10 +15,6 @@ const padding = (props) => !props.collapsed
? `0 ${remcalc(18)}`
: 0;
const color = (props) => props.fromHeader
? colors.brandPrimaryColor
: '#646464';
const display = (props) => !props.collapsed
? 'inline-block'
: 'flex';
@ -36,7 +27,6 @@ const Span = styled.span`
font-style: normal;
font-stretch: normal;
font-size: ${remcalc(14)};
color: ${color};
justify-content: flex-end;
`;

View File

@ -17,8 +17,8 @@ const {
} = Styled;
const color = (props) => !props.fromHeader
? colors.brandSecondaryColor
: colors.brandPrimaryColor;
? colors.base.secondary
: colors.base.primary;
const padding = (props) => !props.collapsed
? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}`

View File

@ -24,17 +24,17 @@ const StyledButton = styled.button`
display: flex;
margin: 0;
padding: ${remcalc(18)} ${remcalc(24)};
color: ${colors.brandPrimaryColor};
color: ${colors.base.primary};
float: right;
background-color: ${colors.brandPrimaryDark};
background-color: ${colors.base.primaryLight};
line-height: 1.5;
border: none;
border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
cursor: pointer;
`;
const StyledIcon = styled(CloseIcon)`
fill: ${colors.brandPrimaryColor};
fill: ${colors.base.primary};
`;
const AddMetricButton = ({

View File

@ -19,7 +19,7 @@ const Container = styled.div`
position: relative;
height: 100%;
width: 100%;
background-color: ${colors.brandPrimaryColor};
background-color: ${colors.base.primary};
`;
const Canvas = styled.canvas`

View File

@ -22,8 +22,8 @@ const StyledHeader = styled.div`
box-sizing: border-box;
padding: 0;
width: 100%;
background-color: ${colors.brandPrimaryDark};
border: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
background-color: ${colors.base.primaryDark};
border: solid ${remcalc(1)} ${colors.base.primaryDark};
`;
const Header = (props) => (

View File

@ -29,7 +29,7 @@ const SelectWrapper = styled.div`
&:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid ${colors.brandPrimaryColor};
border-top: 5px solid ${colors.base.primary};
${pseudoEl({
top: '28px',
@ -44,10 +44,10 @@ const StyledSelect = styled.select`
font-size:16px;
text-align: right !important;
border-radius: 0;
color: ${colors.brandPrimaryColor};
background-color: ${colors.brandPrimaryDark};
color: ${colors.base.primary};
background-color: ${colors.base.primaryLight};
border: none;
border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
-webkit-appearance: none;
cursor: pointer;
`;

View File

@ -25,26 +25,26 @@ const StyledButton = styled(Button)`
display: flex;
margin: 0;
padding: ${remcalc(18)} ${remcalc(24)};
color: ${colors.brandPrimaryColor};
color: ${colors.base.primary};
float: right;
background-color: ${colors.brandPrimaryDark};
background-color: ${colors.base.primaryLight};
line-height: 1.5;
border: none;
border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
&:hover,
&:focus,
&:active,
&:active:hover,
&:active:focus {
background-color: ${colors.brandPrimaryDark};
background-color: ${colors.base.primaryLight};
border: none;
border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest};
border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
}
`;
const StyledIcon = styled(SettingsIcon)`
fill: ${colors.brandPrimaryColor};
fill: ${colors.base.primary};
margin-right: ${remcalc(12)};
`;

View File

@ -23,5 +23,5 @@ module.exports = styled.h3`
font-weight: normal;
font-style: normal;
line-height: 1.5;
color: ${colors.brandPrimaryColor};
color: ${colors.base.primary};
`;

View File

@ -23,7 +23,7 @@ const Container = styled.div`
width: 100%;
max-width: ${remcalc(940)};
box-shadow: ${boxes.bottomShaddow};
border: 1px solid ${colors.borderSecondary};
border: 1px solid ${colors.base.greyLight};
`;
const View = (props) => (

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.greyLight}`,
confirmed: `${remcalc(1)} solid ${base.greyLight}`
}
};

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',
greyLight: '#e9e9e9',
greyDark: '#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: base.greyLight,
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;