Merge pull request #263 from yldio/feature/color-typography-styleguide

Feature/color typography styleguide
This commit is contained in:
Alex Windett 2017-02-20 14:36:23 +00:00 committed by GitHub
commit a18d97acff
38 changed files with 323 additions and 94 deletions

View File

@ -2,7 +2,7 @@ const Styled = require('styled-components');
const constants = require('@ui/shared/constants'); const constants = require('@ui/shared/constants');
const { const {
colors, // colors,
breakpoints breakpoints
} = constants; } = constants;
@ -12,7 +12,6 @@ const {
// Main Contonent Wrapper Styles // Main Contonent Wrapper Styles
module.exports = styled.article` module.exports = styled.article`
background-color: ${colors.base.grey};
padding: 2rem; padding: 2rem;
${breakpoints.large` ${breakpoints.large`

View File

@ -20,7 +20,7 @@ const {
} = constants; } = constants;
const { const {
H1, H2,
} = BaseElements; } = BaseElements;
const { const {
@ -29,7 +29,7 @@ const {
// Main Contonent Wrapper Styles // Main Contonent Wrapper Styles
const StyledDiv = styled.div` const StyledDiv = styled.div`
border-bottom: solid ${remcalc(1)} ${colors.base.greyDark}; border-bottom: solid ${remcalc(1)} ${colors.base.grey};
padding: ${remcalc(30)} 0; padding: ${remcalc(30)} 0;
margin-bottom: ${remcalc(21)}; margin-bottom: ${remcalc(21)};
`; `;
@ -66,6 +66,10 @@ function getNameLink(name) {
})); }));
} }
const StyledH2 = styled(H2)`
color: ${colors.base.primary};
`;
const Breadcrumb = ({ const Breadcrumb = ({
children, children,
links = [], links = [],
@ -76,9 +80,9 @@ const Breadcrumb = ({
<Row> <Row>
<Column xs={12}> <Column xs={12}>
<StyledDiv> <StyledDiv>
<H1> <StyledH2>
{getNameLink(name)} {getNameLink(name)}
</H1> </StyledH2>
</StyledDiv> </StyledDiv>
</Column> </Column>
</Row> </Row>

View File

@ -33,7 +33,7 @@ const {
const StyledNav = styled.div` const StyledNav = styled.div`
background-color: #f2f2f2; background-color: #f2f2f2;
border-bottom: ${remcalc(1)} solid ${colors.base.greyDark}; border-bottom: ${remcalc(1)} solid ${colors.base.grey};
& ul { & ul {
height: ${remcalc(60)}; height: ${remcalc(60)};
@ -46,12 +46,12 @@ const NavigationLinkContainer = styled.div`
position: relative; position: relative;
padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)}; padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
color: ${colors.base.secondaryDark}; color: ${colors.base.secondaryDark};
border: ${remcalc(1)} solid ${colors.base.greyDark}; border: ${remcalc(1)} solid ${colors.base.grey};
height: ${remcalc(24)}; height: ${remcalc(24)};
background-color: #f2f2f2; background-color: #f2f2f2;
&.active { &.active {
background-color: ${colors.base.grey}; background-color: ${colors.base.background};
border-bottom: solid ${remcalc(1)} ${colors.base.grey}; border-bottom: solid ${remcalc(1)} ${colors.base.grey};
} }
`; `;

View File

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

View File

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

View File

@ -4,9 +4,17 @@ const {
storiesOf storiesOf
} = require('@kadira/storybook'); } = require('@kadira/storybook');
const constants = require('../../shared/constants');
const Column = require('../column');
const Row = require('../row');
const Base = require('../base'); const Base = require('../base');
const BaseElements = require('./'); const BaseElements = require('./');
const {
colors
} = constants;
const { const {
H1, H1,
H2, H2,
@ -41,4 +49,60 @@ storiesOf('Base Elements', module)
<Small>This is a Small</Small> <Small>This is a Small</Small>
</Base> </Base>
)) ))
.add('Style Guide', () => (
<Base>
<div>
<Row>
<Column>
<H1>Special Heading - H1</H1>
<ul>
<li>Size - 36px</li>
<li>Line Height - 42px</li>
<li>Color - <code>{colors.base.secondary}</code></li>
</ul>
</Column>
</Row>
<Row>
<Column>
<H2>Standard Heading - H2</H2>
<ul>
<li>Size - 24px</li>
<li>Line Height - 36px</li>
<li>Color - <code>{colors.base.secondary}</code></li>
</ul>
</Column>
</Row>
<Row>
<Column>
<H3>Sub Heading - H3</H3>
<ul>
<li>Size - 16px</li>
<li>Line Height - 24px</li>
<li>Color - <code>{colors.base.secondary}</code></li>
</ul>
</Column>
</Row>
<Row>
<Column>
<P>Body Copy</P>
<ul>
<li>Size - 16px</li>
<li>Line Height - 24px</li>
<li>Color - <code>{colors.base.text}</code></li>
</ul>
</Column>
</Row>
<Row>
<Column>
<Small>Small Body Copy</Small>
<ul>
<li>Size - 14px</li>
<li>Line Height - 18px</li>
<li>Color - <code>{colors.base.text}</code></li>
</ul>
</Column>
</Row>
</div>
</Base>
))
; ;

View File

@ -17,13 +17,13 @@ const fonts = [
style: 'normal' style: 'normal'
}, },
{ {
family: 'LibreFranklin', family: 'LibreFranklin-Semi-Bold',
filename: 'librefranklin-semibold-webfont', filename: 'librefranklin-semibold-webfont',
weight: '600', weight: '600',
style: 'normal' style: 'normal'
}, },
{ {
family: 'LibreFranklin', family: 'LibreFranklin-Bold',
filename: 'librefranklin-bold-webfont', filename: 'librefranklin-bold-webfont',
weight: '700', weight: '700',
style: 'normal' style: 'normal'

View File

@ -1,4 +1,5 @@
const constants = require('../../shared/constants'); const constants = require('../../shared/constants');
const typography = require('../../shared/composers/typography');
const Styled = require('styled-components'); const Styled = require('styled-components');
@ -11,11 +12,14 @@ const {
} = Styled; } = Styled;
module.exports = styled.div` module.exports = styled.div`
font-family: 'LibreFranklin', sans-serif;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
color: ${colors.fonts.regular}; background-color: ${colors.base.background};
background-color: #FFFFFF;
${typography.libreFranklin}
${typography.bodyColor}
${typography.regular}
`; `;
module.exports.global = require('./global'); module.exports.global = require('./global');

View File

@ -39,19 +39,19 @@ const background = match({
}, base.primary); }, base.primary);
const backgroundHover = match({ const backgroundHover = match({
secondary: base.grey, secondary: base.whiteHover,
disabled: inactive.default disabled: inactive.default
}, base.primaryLight); }, base.primaryHover);
const backgroundActive = match({ const backgroundActive = match({
secondary: base.greyDarker, secondary: base.whiteActive,
disabled: inactive.default disabled: inactive.default
}, base.primaryDark); }, base.primaryHover);
const border = match({ const border = match({
secondary: base.greyLight, secondary: base.grey,
disabled: inactive.greyLight disabled: inactive.grey
}, base.primary); }, base.primaryDesaturated);
const borderHover = match({ const borderHover = match({
secondary: base.grey, secondary: base.grey,
@ -59,9 +59,9 @@ const borderHover = match({
}, base.primaryDark); }, base.primaryDark);
const borderActive = match({ const borderActive = match({
secondary: base.greyDarker, secondary: base.grey,
disabled: inactive.default disabled: inactive.default
}, base.primaryDark); }, base.primaryDesaturatedHover);
const color = match({ const color = match({
secondary: base.secondary, secondary: base.secondary,

View File

@ -0,0 +1,85 @@
const React = require('react');
const Styled = require('styled-components');
const constants = require('../../shared/constants');
const Column = require('../column');
const Row = require('../row');
const {
default: styled
} = Styled;
const {
storiesOf
} = require('@kadira/storybook');
const {
colors
} = constants;
const StyledWrapper = styled.div`
margin-left: 20px;
margin-bottom: 20px;
border: solid 1px ${colors.base.grey};
padding: 18px;
`;
const Square = styled.div`
display: inline-block;
border: solid 1px ${colors.base.grey};
width: 100%;
height: 100px
`;
const StyledP = styled.p`
margin: 0;
`;
const convertCase = (val) => {
const result = val.replace( /([A-Z])/g, ' $1' );
return result.charAt(0).toUpperCase() + result.slice(1);
};
storiesOf('Colors', module)
.add('default', () => {
const renderColors = Object.keys(colors.base)
.sort()
.map( (color, index) => {
const StyledSquare = styled(Square)`
background: ${colors.base[color]}
`;
return (
<Column
key={index}
md={3}
xs={6}
>
<StyledWrapper>
<StyledSquare />
<StyledP>
<strong>Name</strong>:
<br />{convertCase(color)}
</StyledP>
<StyledP>
<strong>Const</strong>:
<br />{color}
</StyledP>
<StyledP>
<strong>Hex</strong>: {colors.base[color].toUpperCase()}
</StyledP>
</StyledWrapper>
</Column>
);
});
return (
<Row>
{renderColors}
</Row>
);
});

View File

@ -27,6 +27,10 @@ const color = (props) => props.defaultValue
? colorWithDefaultValue(props) ? colorWithDefaultValue(props)
: colorWithDisabled(props); : colorWithDisabled(props);
const border = (props) => props.error
? boxes.border.error
: boxes.border.unchecked;
const height = (props) => !props.multiple const height = (props) => !props.multiple
? remcalc(48) ? remcalc(48)
: 'auto'; : 'auto';
@ -48,10 +52,10 @@ const Outlet = css`
border-radius: ${boxes.borderRadius}; border-radius: ${boxes.borderRadius};
background-color: ${colors.base.white}; background-color: ${colors.base.white};
box-shadow: ${boxes.insetShaddow}; box-shadow: ${boxes.insetShaddow};
border: ${boxes.border.unchecked}; border: ${border};
font-size: ${remcalc(16)}; font-size: ${remcalc(16)};
line-height: normal !important; line-height: normal;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;

View File

@ -27,7 +27,7 @@ const Li = styled.li`
} }
& a { & a {
color: ${colors.base.secondaryDark}; color: ${colors.base.text};
text-decoration: none; text-decoration: none;
padding-bottom: ${remcalc(6)}; padding-bottom: ${remcalc(6)};

View File

@ -41,7 +41,7 @@ const StyledTitle = styled(Title)`
padding-top: 0; padding-top: 0;
`} `}
font-weight: normal !important; font-weight: normal;
flex-grow: 2; flex-grow: 2;
`; `;

View File

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

View File

@ -27,7 +27,7 @@ const height = (props) => props.collapsed
: remcalc(124); : remcalc(124);
const borderLeftColor = (props) => !props.fromHeader const borderLeftColor = (props) => !props.fromHeader
? colors.base.greyLight ? colors.base.grey
: colors.base.primary; : colors.base.primary;
const Nav = styled.nav` const Nav = styled.nav`

View File

@ -30,10 +30,10 @@ const StyledButton = styled.button`
margin: 0; margin: 0;
padding: ${remcalc(18)} ${remcalc(24)}; padding: ${remcalc(18)} ${remcalc(24)};
float: right; float: right;
background-color: ${colors.base.primaryDark}; background-color: ${colors.base.primaryDesaturated};
line-height: 1.5; line-height: 1.5;
border: none; border: none;
border-left: solid ${remcalc(1)} ${colors.base.primaryDark}; border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
cursor: pointer; cursor: pointer;
`; `;

View File

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

View File

@ -46,9 +46,9 @@ const StyledSelect = styled.select`
text-align: right !important; text-align: right !important;
border-radius: 0; border-radius: 0;
color: ${colors.base.white}; color: ${colors.base.white};
background-color: ${colors.base.primaryDark}; background-color: ${colors.base.primaryDesaturated};
border: none; border: none;
border-left: solid ${remcalc(1)} ${colors.base.primaryDark}; border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
-webkit-appearance: none; -webkit-appearance: none;
cursor: pointer; cursor: pointer;
`; `;

View File

@ -32,10 +32,10 @@ const StyledButton = styled(Button)`
padding: ${remcalc(18)} ${remcalc(24)}; padding: ${remcalc(18)} ${remcalc(24)};
color: ${colors.base.white}; color: ${colors.base.white};
float: right; float: right;
background-color: ${colors.base.primaryDark}; background-color: ${colors.base.primaryDesaturated};
line-height: 1.5; line-height: 1.5;
border: none; border: none;
border-left: solid ${remcalc(1)} ${colors.base.primaryDark}; border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated};
&:hover, &:hover,
&:focus, &:focus,
@ -44,7 +44,7 @@ const StyledButton = styled(Button)`
&:active:focus { &:active:focus {
background-color: ${colors.base.primaryLight}; background-color: ${colors.base.primaryLight};
border: none; border: none;
border-left: solid ${remcalc(1)} ${colors.base.primaryDark}; border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturatedHover};
} }
`; `;

View File

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

View File

@ -32,8 +32,8 @@ const StyledModal = styled.div`
padding: ${remcalc(20)}; padding: ${remcalc(20)};
z-index: 1; z-index: 1;
background: ${colors.brandSecondary}; background: ${colors.secondary};
border: ${remcalc(1)} solid ${colors.borderSecondary}; border: ${remcalc(1)} solid ${colors.secondaryHover};
`; `;
const StyledOverlay = styled.div` const StyledOverlay = styled.div`

View File

@ -45,9 +45,9 @@ const sizes = {
const Card = styled.div` const Card = styled.div`
box-sizing: border-box; box-sizing: border-box;
box-shadow: ${boxes.bottomShaddow}; box-shadow: ${boxes.bottomShaddow};
border: ${remcalc(1)} solid ${colors.borderSecondary}; border: ${remcalc(1)} solid ${colors.base.grey};
border-radius: ${boxes.borderRadius}; border-radius: ${boxes.borderRadius};
background-color: ${colors.brandSecondary}; background-color: ${colors.base.white};
`; `;
const SmallCard = styled(Card)` const SmallCard = styled(Card)`

View File

@ -26,10 +26,10 @@ const StyledInput = styled.input`
&:disabled + span::before, &:disabled + span::before,
&:checked + span::before { &:checked + span::before {
background-color: #646464; background-color: ${colors.base.secondary};
} }
&:disabled + span { &:disabled + span {
background-color: ${colors.backgroundInactive}; background-color: ${colors.inactive.default};
} }
&:disabled + span::before { &:disabled + span::before {
opacity: 0.3; opacity: 0.3;
@ -52,8 +52,8 @@ const StyledSpan = styled.span`
position: absolute; position: absolute;
width: ${remcalc(10)}; width: ${remcalc(10)};
height: ${remcalc(10)}; height: ${remcalc(10)};
box-shadow: 0 0 0 ${remcalc(1)} #646464; box-shadow: 0 0 0 ${remcalc(1)} ${colors.base.secondary};
border: ${remcalc(8)} solid ${colors.brandInactive}; border: ${remcalc(8)} solid ${colors.inactive.default};
top: ${remcalc(5)}; top: ${remcalc(5)};
left: ${remcalc(5)}; left: ${remcalc(5)};
border-radius: 100%; border-radius: 100%;

View File

@ -23,7 +23,7 @@ const {
} = Styled; } = Styled;
const rangeTrack = css` const rangeTrack = css`
background: ${colors.brandPrimary}; background: ${colors.base.primary};
cursor: pointer; cursor: pointer;
height: ${remcalc(6)}; height: ${remcalc(6)};
width: 100%; width: 100%;
@ -35,7 +35,7 @@ const rangeTrack = css`
const rangeThumb = css` const rangeThumb = css`
-webkit-appearance: none; -webkit-appearance: none;
background: #FFFFFF; background: ${colors.base.white};
cursor: pointer; cursor: pointer;
height: ${remcalc(24)}; height: ${remcalc(24)};
position: relative; position: relative;
@ -46,7 +46,7 @@ const rangeThumb = css`
`; `;
const rangeLower = css` const rangeLower = css`
background: ${colors.brandPrimary}; background: ${colors.base.primary};
height: ${remcalc(6)}; height: ${remcalc(6)};
${baseBox({ ${baseBox({
@ -118,7 +118,7 @@ const StyledRange = styled.input`
} }
&:focus::-webkit-slider-runnable-track { &:focus::-webkit-slider-runnable-track {
background: ${colors.brandPrimary}; background: ${colors.primary};
} }
&:focus::-ms-fill-lower { &:focus::-ms-fill-lower {

View File

@ -35,7 +35,7 @@ const StyledTableHeadItem = styled.td`
const StyledTableHead = styled.thead` const StyledTableHead = styled.thead`
background: #fafafa; background: #fafafa;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
border: solid ${remcalc(1)} ${colors.base.greyDark}; border: solid ${remcalc(1)} ${colors.base.grey};
${breakpoints.smallOnly` ${breakpoints.smallOnly`
display: none; display: none;

View File

@ -23,7 +23,8 @@ const {
} = composers; } = composers;
const StyledRow = styled.tr` const StyledRow = styled.tr`
border: solid ${remcalc(1)} ${colors.base.greyDark}; border: solid ${remcalc(1)} ${colors.base.grey};
};
${breakpoints.smallOnly` ${breakpoints.smallOnly`
display: block; display: block;

View File

@ -2,7 +2,6 @@ module.exports = {
Table: require('./table'), Table: require('./table'),
TableHead: require('./table-head'), TableHead: require('./table-head'),
TableBody: require('./table-body'), TableBody: require('./table-body'),
TableCell: require('./table-cell'),
TableRow: require('./table-row'), TableRow: require('./table-row'),
TableItem: require('./table-item'), TableItem: require('./table-item'),
}; };

View File

@ -27,7 +27,7 @@ const StyledTableRow = styled.div`
${clearfix} ${clearfix}
padding: ${remcalc(24)} 0; padding: ${remcalc(24)} 0;
border-bottom: solid 1px ${colors.base.greyDark}; border-bottom: solid 1px ${colors.base.grey};
& > .table-item { & > .table-item {
text-align: center; text-align: center;

View File

@ -17,7 +17,7 @@ const {
} = composers; } = composers;
const StyledTableWrapper = styled.section` const StyledTableWrapper = styled.section`
border: solid 1px ${colors.base.greyDark} border: solid 1px ${colors.base.grey}
font-family: 'LibreFranklin', sans-serif; font-family: 'LibreFranklin', sans-serif;
font-style: normal; font-style: normal;
`; `;

View File

@ -46,7 +46,7 @@ const StyledRadio = styled.input`
&:checked { &:checked {
& + .${classNames.label} { & + .${classNames.label} {
background: ${colors.brandInactive}; background: ${colors.inactive.default};
border-bottom-width: 0; border-bottom-width: 0;
${moveZ({ ${moveZ({
@ -62,7 +62,7 @@ const StyledRadio = styled.input`
const StyledLabel = styled.label` const StyledLabel = styled.label`
background: transparent; background: transparent;
border: ${remcalc(1)} solid ${colors.greyDark}; border: ${remcalc(1)} solid ${colors.base.grey};
display: inline-block; display: inline-block;
font-size: ${remcalc(20)}; font-size: ${remcalc(20)};
padding: ${remcalc('12 25')}; padding: ${remcalc('12 25')};
@ -79,7 +79,7 @@ const StyledPanel = styled.div`
`; `;
const StyledContent = styled.div` const StyledContent = styled.div`
background: ${colors.brandInactive}; background: ${colors.inactive.default};
border: ${boxes.border.unchecked}; border: ${boxes.border.unchecked};
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2); box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2);

View File

@ -24,12 +24,12 @@ const {
} = Styled; } = Styled;
const Label = styled.label` const Label = styled.label`
color: ${props => props.error ? colors.alert : colors.fonts.regular} color: ${props => props.error ? colors.base.red : colors.fonts.regular}
`; `;
const InputField = styled.textarea` const InputField = styled.textarea`
background: ${colors.brandSecondary}; background: ${colors.secondary};
color: ${props => props.error ? colors.alert : colors.fonts.semibold} color: ${props => props.error ? colors.base.red : colors.fonts.semibold}
display: block; display: block;
font-size: ${remcalc(16)}; font-size: ${remcalc(16)};
padding: ${remcalc('15 18')}; padding: ${remcalc('15 18')};
@ -37,7 +37,7 @@ const InputField = styled.textarea`
width: 100%; width: 100%;
min-height: ${remcalc(96)}; min-height: ${remcalc(96)};
${baseBox()}; ${baseBox()};
border-color: ${props => props.error ? colors.alert : ''}; border-color: ${props => props.error ? colors.base.red : ''};
&:focus { &:focus {
border-color: ${boxes.border.checked}; border-color: ${boxes.border.checked};

View File

@ -49,7 +49,7 @@ const StyledList = styled.ul`
padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)}; padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};
&:hover { &:hover {
background: ${colors.borderSecondaryDarkest}; background: ${colors.base.grey};
} }
} }

View File

@ -48,7 +48,7 @@ const StyledContent = styled.div`
border: ${boxes.border.unchecked}; border: ${boxes.border.unchecked};
border-radius: ${remcalc(4)}; border-radius: ${remcalc(4)};
cursor: pointer; cursor: pointer;
padding: remcalc(36); padding: ${remcalc(36)};
& img { & img {
max-width: 100%; max-width: 100%;

View File

@ -1,8 +1,8 @@
const Styled = require('styled-components'); const Styled = require('styled-components');
const camelCase = require('camel-case'); const camelCase = require('camel-case');
const constants = require('./constants'); const constants = require('../constants');
const fns = require('./functions'); const fns = require('../functions');
const { const {
boxes boxes

View File

@ -0,0 +1,34 @@
const Styled = require('styled-components');
const constants = require('../../shared/constants');
const {
colors
} = constants;
const {
css
} = Styled;
module.exports = {
libreFranklin: `
font-family: 'LibreFranklin', Helvetica, sans-serif;
`,
libreFranklinSemiBold: `
font-family: 'LibreFranklin-Semi-Bold', Helvetica, sans-serif;
`,
libreFranklinBold: `
font-family: 'LibreFranklin-Bold', Helvetica, sans-serif;
`,
bold: css`
font-weight: 600;
`,
regular: css`
font-weight: normal;
`,
titleColor: css`
color: ${colors.base.secondary};
`,
bodyColor: css`
color: ${colors.base.text};
`
};

View File

@ -16,7 +16,8 @@ module.exports = {
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 ${base.primary}`, checked: `${remcalc(1)} solid ${base.primary}`,
unchecked: `${remcalc(1)} solid ${base.greyLight}`, unchecked: `${remcalc(1)} solid ${base.grey}`,
confirmed: `${remcalc(1)} solid ${base.greyLight}` confirmed: `${remcalc(1)} solid ${base.grey}`,
error: `${remcalc(1)} solid ${base.red}`,
} }
}; };

View File

@ -3,45 +3,79 @@
* If a new colors needs to be used, check it doesn't already exist, or * 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 * 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. * there. Lets try and keep different color variations down ot a minimum.
* */ *
---
Color Object example
const color_name = {
color_name: '#FFFFFF',
color_name_style1: '#FFF000',
color_name_style2: '#FFF333',
};
*/
const primary = {
primary: '#3B47CC',
primaryHover: '#1838C0',
primaryActive: '#12279F',
primaryDesaturated: '#3B4AAF',
primaryDesaturatedHover: '#34429D',
primaryDesaturatedActive: '#2D3884',
primaryDark: '#2D3884',
primaryDarkHover: '#34429D',
primaryDarkActive: '#2D3884'
};
const secondary = {
secondary: '#464646',
secondaryHover: '#3F3F3F',
secondaryActive: '#343434'
};
const white = {
white: '#FFFFFF',
whiteHover: '#F8F8F8',
whiteActive: '#E9E9E9'
};
const base = { const base = {
primary: '#1838c0', ...primary,
primaryLight: '#3b46cc', ...secondary,
primaryDark: '#12279f', ...white,
secondary: '#464646', text: '#646464',
secondaryDark: '#646464', grey: '#D8D8D8',
secondaryLight: '#919191', disabled: '#FAFAFA',
white: '#FFFFFF', background: '#FAFAFA',
grey: '#f8f8f8',
greyLight: '#e9e9e9',
greyDark: '#d8d8d8',
greyDarker: '#919191',
red: '#DA4B42',
yellow: '#E4A800',
green: '#00AF66', green: '#00AF66',
greenDark: '#009858',
orange: '#E38200',
orangeDark: '#CB7400',
red: '#DA4B42',
redDark: '#CD251B'
}; };
const fonts = { const fonts = {
semibold: base.secondary, semibold: base.secondary,
regular: base.secondaryDark regular: base.text
}; };
const inactive = { const inactive = {
default: '#FAFAFA', default: base.disabled,
border: base.greyLight, border: base.grey,
text: base.greyLight text: base.grey
}; };
const notifications = { const notifications = {
alert: base.red, alert: base.red,
confirmation: base.green, confirmation: base.green,
warning: base.yellow, warning: base.orange
}; };
const forms = { const forms = {
inputError: base.red, inputError: base.red,
inputWarning: base.yellow inputWarning: base.orange
}; };
const metrics = { const metrics = {
@ -50,7 +84,7 @@ const metrics = {
}; };
const topology = { const topology = {
topologyBackground: '#343434', topologyBackground: base.secondaryActive
}; };
const colors = { const colors = {