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:
commit
8940df8ef3
@ -12,7 +12,7 @@ const {
|
||||
|
||||
const StyledDescription = styled.p`
|
||||
margin: 0;
|
||||
color: ${colors.regular};
|
||||
color: ${colors.base.secondary};
|
||||
`;
|
||||
|
||||
const Description = (props) => (
|
||||
|
@ -6,7 +6,7 @@ const {
|
||||
} = Styled;
|
||||
|
||||
const StyledLink = styled.a`
|
||||
text-decoration: underline !important;
|
||||
text-decoration: underline;
|
||||
`;
|
||||
|
||||
const Link = ({
|
||||
|
@ -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)};
|
||||
|
@ -12,7 +12,7 @@ const {
|
||||
|
||||
const StyledTitle = styled.h4`
|
||||
margin: 0;
|
||||
color: ${colors.semibold};
|
||||
color: ${colors.fonts.semibold};
|
||||
`;
|
||||
|
||||
const Title = ({
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
));
|
@ -20,5 +20,5 @@ module.exports = styled.label`
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
color: ${colors.brandSecondaryColor};
|
||||
color: ${colors.base.secondary};
|
||||
`;
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
@ -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)};
|
||||
}
|
||||
`;
|
||||
|
@ -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;
|
@ -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' />
|
||||
);
|
||||
}
|
||||
```
|
@ -1,3 +0,0 @@
|
||||
.icon {
|
||||
font-size: inherit;
|
||||
}
|
@ -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};
|
||||
`;
|
||||
|
@ -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) => {
|
||||
|
@ -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};
|
||||
`;
|
||||
|
||||
|
@ -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)};
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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)}`
|
||||
|
@ -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 = ({
|
||||
|
@ -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`
|
||||
|
@ -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) => (
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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)};
|
||||
`;
|
||||
|
||||
|
@ -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};
|
||||
`;
|
||||
|
@ -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) => (
|
||||
|
@ -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}`
|
||||
}
|
||||
};
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user