Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
parent 5e9d3b4041 a54221011f
commit a18d97acff
38 changed files with 323 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/article/index.js
View File

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

12
frontend/src/components/breadcrumb/index.js
View File

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

6
frontend/src/components/navigation/org.js
View File

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

2
ui/src/components/add-metric/description.js
View File

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

2
ui/src/components/add-metric/tile.js
View File

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

64
ui/src/components/base-elements/story.js
View File

@ -4,9 +4,17 @@ const {
storiesOf
} = require('@kadira/storybook');
const constants = require('../../shared/constants');
const Column = require('../column');
const Row = require('../row');
const Base = require('../base');
const BaseElements = require('./');
const {
colors
} = constants;
const {
H1,
H2,
@ -41,4 +49,60 @@ storiesOf('Base Elements', module)
<Small>This is a Small</Small>
</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>
))
;

4
ui/src/components/base/global.js
View File

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

10
ui/src/components/base/index.js
View File

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

18
ui/src/components/button/index.js
View File

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

85
ui/src/components/colors/story.js Normal file
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>
);
});

8
ui/src/components/form/outlet.js
View File

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

2
ui/src/components/horizontal-list/li.js
View File

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

2
ui/src/components/list/description.js
View File

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

6
ui/src/components/list/item.js
View File

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

2
ui/src/components/list/options.js
View File

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

4
ui/src/components/metric/close-button.js
View File

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

4
ui/src/components/metric/header.js
View File

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

4
ui/src/components/metric/select.js
View File

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

6
ui/src/components/metric/settings-button.js
View File

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

2
ui/src/components/metric/view.js
View File

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

4
ui/src/components/modal/index.js
View File

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

4
ui/src/components/payment-card/payment-card.js
View File

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

8
ui/src/components/radio/index.js
View File

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

8
ui/src/components/range-slider/index.js
View File

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

2
ui/src/components/table-data-table/table-head.js
View File

@ -35,7 +35,7 @@ const StyledTableHeadItem = styled.td`
const StyledTableHead = styled.thead`
background: #fafafa;
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`
display: none;

3
ui/src/components/table-data-table/table-row.js
View File

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

1
ui/src/components/table-simple-table/index.js
View File

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

0
ui/src/components/table-simple-table/table-cell.js
View File

2
ui/src/components/table-simple-table/table-row.js
View File

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

2
ui/src/components/table-simple-table/table.js
View File

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

6
ui/src/components/tabs/tab/index.js
View File

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

8
ui/src/components/textarea/index.js
View File

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

2
ui/src/components/tooltip/index.js
View File

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

2
ui/src/components/widget/index.js
View File

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

4
ui/src/shared/composers.js → ui/src/shared/composers/index.js
View File

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

34
ui/src/shared/composers/typography.js Normal file
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};
`
};

5
ui/src/shared/constants/boxes.js
View File

@ -16,7 +16,8 @@ module.exports = {
insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
border: {
checked: `${remcalc(1)} solid ${base.primary}`,
unchecked: `${remcalc(1)} solid ${base.greyLight}`,
confirmed: `${remcalc(1)} solid ${base.greyLight}`
unchecked: `${remcalc(1)} solid ${base.grey}`,
confirmed: `${remcalc(1)} solid ${base.grey}`,
error: `${remcalc(1)} solid ${base.red}`,
}
};

76
ui/src/shared/constants/colors.js
View File

@ -3,45 +3,79 @@
* 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.
* */
*
---
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 = {
primary: '#1838c0',
primaryLight: '#3b46cc',
primaryDark: '#12279f',
secondary: '#464646',
secondaryDark: '#646464',
secondaryLight: '#919191',
white: '#FFFFFF',
grey: '#f8f8f8',
greyLight: '#e9e9e9',
greyDark: '#d8d8d8',
greyDarker: '#919191',
red: '#DA4B42',
yellow: '#E4A800',
...primary,
...secondary,
...white,
text: '#646464',
grey: '#D8D8D8',
disabled: '#FAFAFA',
background: '#FAFAFA',
green: '#00AF66',
greenDark: '#009858',
orange: '#E38200',
orangeDark: '#CB7400',
red: '#DA4B42',
redDark: '#CD251B'
};
const fonts = {
semibold: base.secondary,
regular: base.secondaryDark
regular: base.text
};
const inactive = {
default: '#FAFAFA',
border: base.greyLight,
text: base.greyLight
default: base.disabled,
border: base.grey,
text: base.grey
};
const notifications = {
alert: base.red,
confirmation: base.green,
warning: base.yellow,
warning: base.orange
};
const forms = {
inputError: base.red,
inputWarning: base.yellow
inputWarning: base.orange
};
const metrics = {
@ -50,7 +84,7 @@ const metrics = {
};
const topology = {
topologyBackground: '#343434',
topologyBackground: base.secondaryActive
};
const colors = {