mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Merge pull request #263 from yldio/feature/color-typography-styleguide
Feature/color typography styleguide
This commit is contained in:
commit
a18d97acff
@ -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`
|
||||||
|
@ -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>
|
||||||
|
@ -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};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -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) => (
|
||||||
|
@ -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`
|
||||||
|
@ -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>
|
||||||
|
))
|
||||||
;
|
;
|
@ -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'
|
||||||
|
@ -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');
|
||||||
|
@ -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,
|
||||||
|
85
ui/src/components/colors/story.js
Normal file
85
ui/src/components/colors/story.js
Normal 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>
|
||||||
|
);
|
||||||
|
});
|
@ -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;
|
||||||
|
@ -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)};
|
||||||
|
|
||||||
|
@ -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;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -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};
|
||||||
`;
|
`;
|
||||||
|
@ -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`
|
||||||
|
@ -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;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -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) => (
|
||||||
|
@ -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;
|
||||||
`;
|
`;
|
||||||
|
@ -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};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -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) => (
|
||||||
|
@ -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`
|
||||||
|
@ -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)`
|
||||||
|
@ -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%;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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'),
|
||||||
};
|
};
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
`;
|
`;
|
||||||
|
@ -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);
|
||||||
|
@ -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};
|
||||||
|
@ -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};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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%;
|
||||||
|
@ -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
|
34
ui/src/shared/composers/typography.js
Normal file
34
ui/src/shared/composers/typography.js
Normal 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};
|
||||||
|
`
|
||||||
|
};
|
@ -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}`,
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -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 = {
|
||||||
|
Loading…
Reference in New Issue
Block a user