diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js
index 80e3b68a..5b5f7ca2 100644
--- a/frontend/src/components/article/index.js
+++ b/frontend/src/components/article/index.js
@@ -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`
diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js
index 04605b4e..d0493bd4 100644
--- a/frontend/src/components/breadcrumb/index.js
+++ b/frontend/src/components/breadcrumb/index.js
@@ -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 = ({
-
+
{getNameLink(name)}
-
+
diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js
index 5e0c169b..30ea213f 100644
--- a/frontend/src/components/navigation/org.js
+++ b/frontend/src/components/navigation/org.js
@@ -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};
}
`;
diff --git a/ui/src/components/add-metric/description.js b/ui/src/components/add-metric/description.js
index 214d8db9..226c7c09 100644
--- a/ui/src/components/add-metric/description.js
+++ b/ui/src/components/add-metric/description.js
@@ -17,7 +17,7 @@ const {
const StyledDescription = styled.p`
margin: 0;
- color: ${colors.base.secondary};
+ color: ${colors.base.text};
`;
const Description = (props) => (
diff --git a/ui/src/components/add-metric/tile.js b/ui/src/components/add-metric/tile.js
index 9fe1afaa..45e0c5c3 100644
--- a/ui/src/components/add-metric/tile.js
+++ b/ui/src/components/add-metric/tile.js
@@ -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`
diff --git a/ui/src/components/base-elements/story.js b/ui/src/components/base-elements/story.js
index e483a915..3316265a 100644
--- a/ui/src/components/base-elements/story.js
+++ b/ui/src/components/base-elements/story.js
@@ -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)
This is a Small
))
+ .add('Style Guide', () => (
+
+
+
+
+ Special Heading - H1
+
+ - Size - 36px
+ - Line Height - 42px
+ - Color -
{colors.base.secondary}
+
+
+
+
+
+ Standard Heading - H2
+
+ - Size - 24px
+ - Line Height - 36px
+ - Color -
{colors.base.secondary}
+
+
+
+
+
+ Sub Heading - H3
+
+ - Size - 16px
+ - Line Height - 24px
+ - Color -
{colors.base.secondary}
+
+
+
+
+
+ Body Copy
+
+ - Size - 16px
+ - Line Height - 24px
+ - Color -
{colors.base.text}
+
+
+
+
+
+ Small Body Copy
+
+ - Size - 14px
+ - Line Height - 18px
+ - Color -
{colors.base.text}
+
+
+
+
+
+ ))
;
\ No newline at end of file
diff --git a/ui/src/components/base/global.js b/ui/src/components/base/global.js
index 8c4ae6e1..b8923b5b 100644
--- a/ui/src/components/base/global.js
+++ b/ui/src/components/base/global.js
@@ -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'
diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js
index 102a11df..bc0408a6 100644
--- a/ui/src/components/base/index.js
+++ b/ui/src/components/base/index.js
@@ -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');
diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js
index da16134a..542ebdc4 100644
--- a/ui/src/components/button/index.js
+++ b/ui/src/components/button/index.js
@@ -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,
diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js
new file mode 100644
index 00000000..bd7cd9d3
--- /dev/null
+++ b/ui/src/components/colors/story.js
@@ -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 (
+
+
+
+
+ Name:
+
{convertCase(color)}
+
+
+
+ Const:
+
{color}
+
+
+
+ Hex: {colors.base[color].toUpperCase()}
+
+
+
+ );
+ });
+
+ return (
+
+ {renderColors}
+
+ );
+ });
\ No newline at end of file
diff --git a/ui/src/components/form/outlet.js b/ui/src/components/form/outlet.js
index 17ecad7d..0c44ce7d 100644
--- a/ui/src/components/form/outlet.js
+++ b/ui/src/components/form/outlet.js
@@ -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;
diff --git a/ui/src/components/horizontal-list/li.js b/ui/src/components/horizontal-list/li.js
index 14a502d9..8739fbb4 100644
--- a/ui/src/components/horizontal-list/li.js
+++ b/ui/src/components/horizontal-list/li.js
@@ -27,7 +27,7 @@ const Li = styled.li`
}
& a {
- color: ${colors.base.secondaryDark};
+ color: ${colors.base.text};
text-decoration: none;
padding-bottom: ${remcalc(6)};
diff --git a/ui/src/components/list/description.js b/ui/src/components/list/description.js
index 6a7cc303..9b608f1b 100644
--- a/ui/src/components/list/description.js
+++ b/ui/src/components/list/description.js
@@ -41,7 +41,7 @@ const StyledTitle = styled(Title)`
padding-top: 0;
`}
- font-weight: normal !important;
+ font-weight: normal;
flex-grow: 2;
`;
diff --git a/ui/src/components/list/item.js b/ui/src/components/list/item.js
index f320fe59..93ef90c1 100644
--- a/ui/src/components/list/item.js
+++ b/ui/src/components/list/item.js
@@ -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};
`;
diff --git a/ui/src/components/list/options.js b/ui/src/components/list/options.js
index 6743a1f5..bf721169 100644
--- a/ui/src/components/list/options.js
+++ b/ui/src/components/list/options.js
@@ -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`
diff --git a/ui/src/components/metric/close-button.js b/ui/src/components/metric/close-button.js
index 6ab33445..bc377ce5 100644
--- a/ui/src/components/metric/close-button.js
+++ b/ui/src/components/metric/close-button.js
@@ -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;
`;
diff --git a/ui/src/components/metric/header.js b/ui/src/components/metric/header.js
index d3ab088d..605a5267 100644
--- a/ui/src/components/metric/header.js
+++ b/ui/src/components/metric/header.js
@@ -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) => (
diff --git a/ui/src/components/metric/select.js b/ui/src/components/metric/select.js
index 04abdc02..aa4a34b1 100644
--- a/ui/src/components/metric/select.js
+++ b/ui/src/components/metric/select.js
@@ -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;
`;
diff --git a/ui/src/components/metric/settings-button.js b/ui/src/components/metric/settings-button.js
index 78d038ea..c1555144 100644
--- a/ui/src/components/metric/settings-button.js
+++ b/ui/src/components/metric/settings-button.js
@@ -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};
}
`;
diff --git a/ui/src/components/metric/view.js b/ui/src/components/metric/view.js
index 881b291d..80ecdbb0 100644
--- a/ui/src/components/metric/view.js
+++ b/ui/src/components/metric/view.js
@@ -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) => (
diff --git a/ui/src/components/modal/index.js b/ui/src/components/modal/index.js
index 78483b27..591cee75 100644
--- a/ui/src/components/modal/index.js
+++ b/ui/src/components/modal/index.js
@@ -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`
diff --git a/ui/src/components/payment-card/payment-card.js b/ui/src/components/payment-card/payment-card.js
index d1cdf253..1e6ee1d6 100644
--- a/ui/src/components/payment-card/payment-card.js
+++ b/ui/src/components/payment-card/payment-card.js
@@ -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)`
diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js
index 494496a4..85f79b0e 100644
--- a/ui/src/components/radio/index.js
+++ b/ui/src/components/radio/index.js
@@ -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%;
diff --git a/ui/src/components/range-slider/index.js b/ui/src/components/range-slider/index.js
index 7646b4b5..a009e7fc 100644
--- a/ui/src/components/range-slider/index.js
+++ b/ui/src/components/range-slider/index.js
@@ -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 {
diff --git a/ui/src/components/table-data-table/table-head.js b/ui/src/components/table-data-table/table-head.js
index ee228c7b..d74cb6d0 100644
--- a/ui/src/components/table-data-table/table-head.js
+++ b/ui/src/components/table-data-table/table-head.js
@@ -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;
diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js
index ef572904..6ffac062 100644
--- a/ui/src/components/table-data-table/table-row.js
+++ b/ui/src/components/table-data-table/table-row.js
@@ -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;
diff --git a/ui/src/components/table-simple-table/index.js b/ui/src/components/table-simple-table/index.js
index 0a5e1d71..48a3aa9b 100644
--- a/ui/src/components/table-simple-table/index.js
+++ b/ui/src/components/table-simple-table/index.js
@@ -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'),
};
diff --git a/ui/src/components/table-simple-table/table-cell.js b/ui/src/components/table-simple-table/table-cell.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/ui/src/components/table-simple-table/table-row.js b/ui/src/components/table-simple-table/table-row.js
index f14c009f..dd8f1436 100644
--- a/ui/src/components/table-simple-table/table-row.js
+++ b/ui/src/components/table-simple-table/table-row.js
@@ -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;
diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js
index ed5a5faf..3e51adcc 100644
--- a/ui/src/components/table-simple-table/table.js
+++ b/ui/src/components/table-simple-table/table.js
@@ -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;
`;
diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js
index 30191a6e..50fb1a19 100644
--- a/ui/src/components/tabs/tab/index.js
+++ b/ui/src/components/tabs/tab/index.js
@@ -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);
diff --git a/ui/src/components/textarea/index.js b/ui/src/components/textarea/index.js
index f8c7d0cd..f3485e36 100644
--- a/ui/src/components/textarea/index.js
+++ b/ui/src/components/textarea/index.js
@@ -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};
diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js
index 21ea2a0e..b41e7634 100644
--- a/ui/src/components/tooltip/index.js
+++ b/ui/src/components/tooltip/index.js
@@ -49,7 +49,7 @@ const StyledList = styled.ul`
padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};
&:hover {
- background: ${colors.borderSecondaryDarkest};
+ background: ${colors.base.grey};
}
}
diff --git a/ui/src/components/widget/index.js b/ui/src/components/widget/index.js
index da8d6c41..25a3b213 100644
--- a/ui/src/components/widget/index.js
+++ b/ui/src/components/widget/index.js
@@ -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%;
diff --git a/ui/src/shared/composers.js b/ui/src/shared/composers/index.js
similarity index 95%
rename from ui/src/shared/composers.js
rename to ui/src/shared/composers/index.js
index de5389cd..19ff83b1 100644
--- a/ui/src/shared/composers.js
+++ b/ui/src/shared/composers/index.js
@@ -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
diff --git a/ui/src/shared/composers/typography.js b/ui/src/shared/composers/typography.js
new file mode 100644
index 00000000..47f910ae
--- /dev/null
+++ b/ui/src/shared/composers/typography.js
@@ -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};
+ `
+};
diff --git a/ui/src/shared/constants/boxes.js b/ui/src/shared/constants/boxes.js
index 30a7efd1..b6ef48fe 100644
--- a/ui/src/shared/constants/boxes.js
+++ b/ui/src/shared/constants/boxes.js
@@ -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}`,
}
};
diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js
index 06a89c72..6d0a07f0 100644
--- a/ui/src/shared/constants/colors.js
+++ b/ui/src/shared/constants/colors.js
@@ -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 = {