From 96d4dd3bd485737d29c9bf6c71b46262c719285c Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 13 Feb 2017 15:24:07 +0000 Subject: [PATCH 1/9] adding in color pallette --- ui/src/components/colors/story.js | 56 +++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 ui/src/components/colors/story.js diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js new file mode 100644 index 00000000..8eeca76c --- /dev/null +++ b/ui/src/components/colors/story.js @@ -0,0 +1,56 @@ +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` + display: inline-block; + float: left; + margin-left: 20px; +`; + +const Square = styled.div` + display: inline-block; + width: 100px; + height: 100px +`; + +storiesOf('Colors', module) + .add('default', () => { + const renderColors = Object.keys(colors.base).map( (color, index) => { + + const StyledSquare = styled(Square)` + background: ${colors.base[color]} + `; + + return ( + + + +

Alias: {color}

+

Hex: {colors.base[color]}

+ + + ); + }); + + return ( + + {renderColors} + + ); + }); \ No newline at end of file From 448208af1b91c024e6d583ada028af5d596a7c53 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 14 Feb 2017 14:40:31 +0000 Subject: [PATCH 2/9] adding in colors from finalised style guide --- ui/src/components/colors/story.js | 36 ++++++++++++--- ui/src/components/typography/story.js | 54 +++++++++++++++++++++++ ui/src/shared/constants/colors.js | 63 +++++++++++++++++++++++++-- 3 files changed, 144 insertions(+), 9 deletions(-) create mode 100644 ui/src/components/typography/story.js diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js index 8eeca76c..988e7787 100644 --- a/ui/src/components/colors/story.js +++ b/ui/src/components/colors/story.js @@ -18,17 +18,30 @@ const { } = constants; const StyledWrapper = styled.div` - display: inline-block; - float: left; margin-left: 20px; + margin-bottom: 20px; + border: solid 1px ${colors.base.grey}; + padding: 18px; + `; const Square = styled.div` display: inline-block; - width: 100px; + 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 val.charAt(0).toUpperCase() + result.slice(1); // capitalize the first + // letter - as an example. +} + storiesOf('Colors', module) .add('default', () => { const renderColors = Object.keys(colors.base).map( (color, index) => { @@ -38,11 +51,22 @@ storiesOf('Colors', module) `; return ( - + -

Alias: {color}

-

Hex: {colors.base[color]}

+ + Name: +
{convertCase(color)} + + + + Const: +
{color} + + + + Hex: {colors.base[color].toUpperCase()} + ); diff --git a/ui/src/components/typography/story.js b/ui/src/components/typography/story.js new file mode 100644 index 00000000..fe74a933 --- /dev/null +++ b/ui/src/components/typography/story.js @@ -0,0 +1,54 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const constants = require('../../shared/constants'); +const Column = require('../column'); +const Row = require('../row'); +const BaseElements = require('../base-elements'); + +const { + default: styled +} = Styled; + +const { + storiesOf +} = require('@kadira/storybook'); + +const { + colors +} = constants; + +const { + H1, + H2, + H3, + P, +} = BaseElements; + +const StyledWrapper = styled.div` + display: inline-block; + float: left; + margin-left: 20px; +`; + +const Square = styled.div` + display: inline-block; + width: 100px; + height: 100px +`; + +storiesOf('Typography', module) + .add('default', () => { + return ( + + +

Special Heading - H1

+
    +
  • Size - 36px
    • +
  • Line Height - 42px
    • +
  • Color- 
    Some Hex
    • +
+ + + ); + }); \ No newline at end of file diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js index 06a89c72..42a33500 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -5,7 +5,7 @@ * there. Lets try and keep different color variations down ot a minimum. * */ -const base = { +let base = { primary: '#1838c0', primaryLight: '#3b46cc', primaryDark: '#12279f', @@ -17,9 +17,66 @@ const base = { greyLight: '#e9e9e9', greyDark: '#d8d8d8', greyDarker: '#919191', - red: '#DA4B42', - yellow: '#E4A800', green: '#00AF66', + greenDark: '#009858', + orange: '#E38200', + orangeDark: '#CB7400', + yellow: '#E4A800', + red: '#DA4B42', + redDark: '#CD251B', +}; + +/* +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', + primaryDestaurated: '#3B4AAF', + primaryDesaturatedHover: '#34429D', + primaryDestauratedActive: '#2D3884', + primaryDark: '#2D3884', + primaryDarkHover: '#34429D', + primaryDarkActive: '#2D3884', +}; + +const secondary = { + secondary: '#464646', + secondaryHover: '#3F3F3F', + secondaryActive: '#343434', +}; + +const white = { + white: '#FFFFFF', + whiteHover: '#F8F8F8', + whiteActive: '#E9E9E9', +}; + +const grey = { + grey: '#D8D8D8', +} + +base = { + ...primary, + ...secondary, + ...white, + ...grey, + disabled: "#FAFAFA", + background: "#FAFAFA", + green: '#00AF66', + greenDark: '#009858', + orange: '#E38200', + orangeDark: '#CB7400', + red: '#DA4B42', + redDark: '#CD251B', }; const fonts = { From cb796c7886d50ac1394a53b8c5e5a27e6060edbb Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 14 Feb 2017 14:40:38 +0000 Subject: [PATCH 3/9] adding in colors from finalised style guide --- ui/src/components/colors/story.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js index 988e7787..5997b1c1 100644 --- a/ui/src/components/colors/story.js +++ b/ui/src/components/colors/story.js @@ -37,10 +37,9 @@ const StyledP = styled.p` `; const convertCase = (val) => { - const result = val.replace( /([A-Z])/g, " $1" ); - return val.charAt(0).toUpperCase() + result.slice(1); // capitalize the first - // letter - as an example. -} + const result = val.replace( /([A-Z])/g, ' $1' ); + return result.charAt(0).toUpperCase() + result.slice(1); +}; storiesOf('Colors', module) .add('default', () => { @@ -51,7 +50,11 @@ storiesOf('Colors', module) `; return ( - + From f88808fc262ba4b1d4e9528cc156335f33c2ccbe Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 14 Feb 2017 15:03:21 +0000 Subject: [PATCH 4/9] finalising colors --- ui/src/components/colors/story.js | 4 +-- ui/src/shared/constants/colors.js | 47 ++++++++----------------------- 2 files changed, 14 insertions(+), 37 deletions(-) diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js index 5997b1c1..25abeab6 100644 --- a/ui/src/components/colors/story.js +++ b/ui/src/components/colors/story.js @@ -36,14 +36,14 @@ const StyledP = styled.p` margin: 0; `; -const convertCase = (val) => { +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).map( (color, index) => { + const renderColors = Object.keys(colors.base).sort().map( (color, index) => { const StyledSquare = styled(Square)` background: ${colors.base[color]} diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js index 42a33500..cf45f38b 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -3,30 +3,10 @@ * 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. -* */ +* -let base = { - primary: '#1838c0', - primaryLight: '#3b46cc', - primaryDark: '#12279f', - secondary: '#464646', - secondaryDark: '#646464', - secondaryLight: '#919191', - white: '#FFFFFF', - grey: '#f8f8f8', - greyLight: '#e9e9e9', - greyDark: '#d8d8d8', - greyDarker: '#919191', - green: '#00AF66', - greenDark: '#009858', - orange: '#E38200', - orangeDark: '#CB7400', - yellow: '#E4A800', - red: '#DA4B42', - redDark: '#CD251B', -}; +--- -/* Color Object example const color_name = { @@ -60,15 +40,12 @@ const white = { whiteActive: '#E9E9E9', }; -const grey = { - grey: '#D8D8D8', -} - -base = { +const base = { ...primary, ...secondary, ...white, - ...grey, + text: '#646464', + grey: '#D8D8D8', disabled: "#FAFAFA", background: "#FAFAFA", green: '#00AF66', @@ -81,24 +58,24 @@ base = { 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 = { @@ -107,7 +84,7 @@ const metrics = { }; const topology = { - topologyBackground: '#343434', + topologyBackground: base.secondaryActive, }; const colors = { From 12717c26cfa3f02906bdc7fecf9593f145760d0b Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Wed, 15 Feb 2017 13:59:49 +0000 Subject: [PATCH 5/9] continuing to update color object names in ui kit --- ui/src/components/add-metric/description.js | 2 +- ui/src/components/add-metric/tile.js | 2 +- ui/src/components/button/index.js | 18 +++++++++--------- ui/src/components/form/outlet.js | 8 ++++++-- ui/src/components/horizontal-list/li.js | 2 +- ui/src/components/list/description.js | 2 +- ui/src/components/list/item.js | 6 +++--- ui/src/components/list/options.js | 2 +- ui/src/components/metric/close-button.js | 4 ++-- ui/src/components/metric/header.js | 4 ++-- ui/src/components/metric/select.js | 4 ++-- ui/src/components/metric/settings-button.js | 6 +++--- ui/src/components/metric/view.js | 2 +- ui/src/components/modal/index.js | 4 ++-- ui/src/components/payment-card/payment-card.js | 4 ++-- ui/src/components/radio/index.js | 8 ++++---- ui/src/components/range-slider/index.js | 8 ++++---- .../components/table-data-table/table-head.js | 2 +- .../components/table-data-table/table-row.js | 3 ++- ui/src/components/table-simple-table/index.js | 1 - .../table-simple-table/table-cell.js | 0 .../components/table-simple-table/table-row.js | 2 +- ui/src/components/table-simple-table/table.js | 2 +- ui/src/components/tabs/tab/index.js | 6 +++--- ui/src/components/textarea/index.js | 8 ++++---- ui/src/components/tooltip/index.js | 2 +- ui/src/components/widget/index.js | 2 +- ui/src/shared/constants/boxes.js | 5 +++-- ui/src/shared/constants/colors.js | 4 ++-- 29 files changed, 64 insertions(+), 59 deletions(-) delete mode 100644 ui/src/components/table-simple-table/table-cell.js 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/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/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/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 cf45f38b..61815a27 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -20,9 +20,9 @@ const primary = { primary: '#3B47CC', primaryHover: '#1838C0', primaryActive: '#12279F', - primaryDestaurated: '#3B4AAF', + primaryDesaturated: '#3B4AAF', primaryDesaturatedHover: '#34429D', - primaryDestauratedActive: '#2D3884', + primaryDesaturatedActive: '#2D3884', primaryDark: '#2D3884', primaryDarkHover: '#34429D', primaryDarkActive: '#2D3884', From dc066f9cad9c8b42961506c363af4a1bff29965c Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Wed, 15 Feb 2017 16:57:27 +0000 Subject: [PATCH 6/9] adding in new typography styles and creating composers where appropriate --- frontend/src/components/breadcrumb/index.js | 10 ++- ui/src/components/base-elements/story.js | 64 +++++++++++++++++++ ui/src/components/colors/story.js | 56 ++++++++-------- ui/src/components/typography/story.js | 54 ---------------- .../{composers.js => composers/index.js} | 0 ui/src/shared/composers/typography.js | 28 ++++++++ ui/src/shared/constants/colors.js | 4 +- 7 files changed, 130 insertions(+), 86 deletions(-) delete mode 100644 ui/src/components/typography/story.js rename ui/src/shared/{composers.js => composers/index.js} (100%) create mode 100644 ui/src/shared/composers/typography.js diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js index 04605b4e..06e1315b 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 { @@ -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/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/colors/story.js b/ui/src/components/colors/story.js index 25abeab6..bd7cd9d3 100644 --- a/ui/src/components/colors/story.js +++ b/ui/src/components/colors/story.js @@ -43,37 +43,39 @@ const convertCase = (val) => { storiesOf('Colors', module) .add('default', () => { - const renderColors = Object.keys(colors.base).sort().map( (color, index) => { + const renderColors = Object.keys(colors.base) + .sort() + .map( (color, index) => { - const StyledSquare = styled(Square)` - background: ${colors.base[color]} - `; + const StyledSquare = styled(Square)` + background: ${colors.base[color]} + `; - return ( - - - - - Name: -
{convertCase(color)} - + return ( + + + + + Name: +
{convertCase(color)} + - - Const: -
{color} - + + Const: +
{color} + - - Hex: {colors.base[color].toUpperCase()} - - - - ); - }); + + Hex: {colors.base[color].toUpperCase()} + + + + ); + }); return ( diff --git a/ui/src/components/typography/story.js b/ui/src/components/typography/story.js deleted file mode 100644 index fe74a933..00000000 --- a/ui/src/components/typography/story.js +++ /dev/null @@ -1,54 +0,0 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const constants = require('../../shared/constants'); -const Column = require('../column'); -const Row = require('../row'); -const BaseElements = require('../base-elements'); - -const { - default: styled -} = Styled; - -const { - storiesOf -} = require('@kadira/storybook'); - -const { - colors -} = constants; - -const { - H1, - H2, - H3, - P, -} = BaseElements; - -const StyledWrapper = styled.div` - display: inline-block; - float: left; - margin-left: 20px; -`; - -const Square = styled.div` - display: inline-block; - width: 100px; - height: 100px -`; - -storiesOf('Typography', module) - .add('default', () => { - return ( - - -

Special Heading - H1

-
    -
  • Size - 36px
    • -
  • Line Height - 42px
    • -
  • Color- 
    Some Hex
    • -
- - - ); - }); \ No newline at end of file diff --git a/ui/src/shared/composers.js b/ui/src/shared/composers/index.js similarity index 100% rename from ui/src/shared/composers.js rename to ui/src/shared/composers/index.js diff --git a/ui/src/shared/composers/typography.js b/ui/src/shared/composers/typography.js new file mode 100644 index 00000000..e732e33d --- /dev/null +++ b/ui/src/shared/composers/typography.js @@ -0,0 +1,28 @@ +const Styled = require('styled-components'); +const constants = require('../../shared/constants'); + +const { + colors +} = constants; + +const { + css +} = Styled; + +module.export = { + libreFranklin: css` + font-family: 'LibreFranklin', 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/colors.js b/ui/src/shared/constants/colors.js index 61815a27..46af4bae 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -46,8 +46,8 @@ const base = { ...white, text: '#646464', grey: '#D8D8D8', - disabled: "#FAFAFA", - background: "#FAFAFA", + disabled: '#FAFAFA', + background: '#FAFAFA', green: '#00AF66', greenDark: '#009858', orange: '#E38200', From bc200789a8bd77fefd26efdf5cd6c59d8f082b43 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 20 Feb 2017 12:55:01 +0000 Subject: [PATCH 7/9] correcting relative path --- ui/src/shared/composers/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/shared/composers/index.js b/ui/src/shared/composers/index.js index de5389cd..19ff83b1 100644 --- a/ui/src/shared/composers/index.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 From 211c4e25974454c76fed27d271ee7d9906c88dcd Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 20 Feb 2017 13:14:44 +0000 Subject: [PATCH 8/9] fixing style errors from updated constant names --- frontend/src/components/article/index.js | 3 +-- frontend/src/components/breadcrumb/index.js | 2 +- frontend/src/components/navigation/org.js | 6 +++--- ui/src/components/base/global.js | 4 ++-- ui/src/components/base/index.js | 10 +++++++--- ui/src/shared/composers/typography.js | 10 ++++++++-- 6 files changed, 22 insertions(+), 13 deletions(-) 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 06e1315b..d0493bd4 100644 --- a/frontend/src/components/breadcrumb/index.js +++ b/frontend/src/components/breadcrumb/index.js @@ -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)}; `; 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/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/shared/composers/typography.js b/ui/src/shared/composers/typography.js index e732e33d..aecba6cd 100644 --- a/ui/src/shared/composers/typography.js +++ b/ui/src/shared/composers/typography.js @@ -9,10 +9,16 @@ const { css } = Styled; -module.export = { - libreFranklin: css` +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; `, From a54221011f8d5178c00a023a639a5b52aed15817 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 20 Feb 2017 14:18:19 +0000 Subject: [PATCH 9/9] removing trailing commars --- ui/src/shared/composers/typography.js | 2 +- ui/src/shared/constants/colors.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/ui/src/shared/composers/typography.js b/ui/src/shared/composers/typography.js index aecba6cd..47f910ae 100644 --- a/ui/src/shared/composers/typography.js +++ b/ui/src/shared/composers/typography.js @@ -30,5 +30,5 @@ module.exports = { `, bodyColor: css` color: ${colors.base.text}; - `, + ` }; diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js index 46af4bae..6d0a07f0 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -25,19 +25,19 @@ const primary = { primaryDesaturatedActive: '#2D3884', primaryDark: '#2D3884', primaryDarkHover: '#34429D', - primaryDarkActive: '#2D3884', + primaryDarkActive: '#2D3884' }; const secondary = { secondary: '#464646', secondaryHover: '#3F3F3F', - secondaryActive: '#343434', + secondaryActive: '#343434' }; const white = { white: '#FFFFFF', whiteHover: '#F8F8F8', - whiteActive: '#E9E9E9', + whiteActive: '#E9E9E9' }; const base = { @@ -53,24 +53,24 @@ const base = { orange: '#E38200', orangeDark: '#CB7400', red: '#DA4B42', - redDark: '#CD251B', + redDark: '#CD251B' }; const fonts = { semibold: base.secondary, - regular: base.text, + regular: base.text }; const inactive = { default: base.disabled, border: base.grey, - text: base.grey, + text: base.grey }; const notifications = { alert: base.red, confirmation: base.green, - warning: base.orange, + warning: base.orange }; const forms = { @@ -84,7 +84,7 @@ const metrics = { }; const topology = { - topologyBackground: base.secondaryActive, + topologyBackground: base.secondaryActive }; const colors = {