From 26d3b8270301143c0812210a836d835728dd79c5 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 3 Jan 2017 15:46:43 +0000 Subject: [PATCH] sperating constants into relevant files and exporting from index --- ui/src/shared/constants.js | 176 ------------------------- ui/src/shared/constants/boxes.js | 19 +++ ui/src/shared/constants/breakpoints.js | 24 ++++ ui/src/shared/constants/colors.js | 31 +++++ ui/src/shared/constants/index.js | 35 +++++ ui/src/shared/constants/links.js | 14 ++ ui/src/shared/constants/sizes.js | 62 +++++++++ ui/src/shared/constants/typography.js | 10 ++ 8 files changed, 195 insertions(+), 176 deletions(-) delete mode 100644 ui/src/shared/constants.js create mode 100644 ui/src/shared/constants/boxes.js create mode 100644 ui/src/shared/constants/breakpoints.js create mode 100644 ui/src/shared/constants/colors.js create mode 100644 ui/src/shared/constants/index.js create mode 100644 ui/src/shared/constants/links.js create mode 100644 ui/src/shared/constants/sizes.js create mode 100644 ui/src/shared/constants/typography.js diff --git a/ui/src/shared/constants.js b/ui/src/shared/constants.js deleted file mode 100644 index f110d111..00000000 --- a/ui/src/shared/constants.js +++ /dev/null @@ -1,176 +0,0 @@ -const styled = require('styled-components'); - -const calc = require('reduce-css-calc'); -const traverse = require('traverse'); -const isFunction = require('lodash.isfunction'); -const Color = require('color'); - -const tables = { - bg: 'transparent', - cellPadding: '.75rem' -}; - -// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css -const sizes = { - gridColumns: 12, - gutterWidth: '1rem', - outerMargin: '2rem', - gutterCompensation: ({ - gutterWidth - }) => { - return calc(`calc((${gutterWidth} * 0.5) * -1)`); - }, - halfGutterWidth: ({ - gutterWidth - }) => { - return calc(`calc(${gutterWidth} * 0.5)`); - }, - xsMin: 30, - smMin: 48, - mdMin: 64, - lgMin: 75, - screenXsMin: ({ - xsMin - }) => { - return `${xsMin}em`; - }, - screenSmMin: ({ - smMin - }) => { - return `${smMin}em`; - }, - screenMdMin: ({ - mdMin - }) => { - return `${mdMin}em`; - }, - screenLgMin: ({ - lgMin - }) => { - return `${lgMin}em`; - }, - containerSm: ({ - gutterWidth, - smMin - }) => { - return calc(`calc(${smMin} + ${gutterWidth})`); - }, - containerMd: ({ - gutterWidth, - mdMin - }) => { - return calc(`calc(${mdMin} + ${gutterWidth})`); - }, - containerLg: ({ - gutterWidth, - lgMin - }) => { - return calc(`calc(${lgMin} + ${gutterWidth})`); - } -}; - -const forms = { - cursorDisabled: 'not-allowed' -}; - -const brandPrimary = { - brandPrimary: '#3B46CC', - brandPrimaryDark: '#1838C0', - brandPrimaryDarkest: '#12279F', -}; - -const brandSecondary = { - brandSecondary: '#646464', - brandSecondaryDark: '#464646', - brandSecondaryDarkest: '#160D42', -}; - -const notifications = { - alert: '#DA4B42', - alertLight: '#FFC7C7', - confirmation: '#00AF66', - warning: '#E4A800', - warningLight: '#FFFAED', -}; - -const colors = { - - white: '#FFFFFF', - backgroundInactive: '#F9F9F9', - - ...brandPrimary, - ...brandSecondary, - ...notifications -}; - -const boxes = { - borderRadius: '4px', - bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)', - insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)', - border: { - checked: `1px solid ${colors.brandPrimary}`, - unchecked: `1px solid ${colors.border}`, - confirmed: `1px solid ${colors.confirmation}` - }, - background: { - primary: colors.brandPrimary, - secondary: colors.brandSecondary, - disabled: '#FAFAFA', - } -}; - -const typography = { - fontPrimary: 'sans serif', - dtFontWeight: 'bold', - abbrBorderColor: colors.brandSecondary, - textMuted: colors.brandSecondary -}; - -const links = { - color: '#364ACD', - decoration: 'none', - hoverColor: ({ - color - }) => { - return Color(color).darken(0.15).hex(); - }, - hoverDecoration: 'underline' -}; - -// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css -const screens = { - // >= 768px - small: 'only screen and (min-width: 48rem)', - // >= 1024px - medium: 'only screen and (min-width: 64rem)', - // >= 1200px - large: 'only screen and (min-width: 75rem)' -}; - -const breakpoints = Object.keys(screens).reduce((acc, label) => { - return { - ...acc, - [label]: (...args) => styled.css` - @media ${screens[label]} { - ${styled.css(...args)} - } - ` - }; -}, {}); - -const constants = traverse({ - colors, - boxes, - forms, - links, - sizes, - tables, - typography -}).map(function(x) { - return isFunction(x) ? x(this.parent.node) : x; -}); - -module.exports = { - ...constants, - breakpoints -}; diff --git a/ui/src/shared/constants/boxes.js b/ui/src/shared/constants/boxes.js new file mode 100644 index 00000000..5890e87c --- /dev/null +++ b/ui/src/shared/constants/boxes.js @@ -0,0 +1,19 @@ +const colors = require('./colors'); + +const boxes = { + borderRadius: '4px', + bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)', + insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)', + border: { + checked: `1px solid ${colors.brandPrimary}`, + unchecked: `1px solid ${colors.border}`, + confirmed: `1px solid ${colors.confirmation}` + }, + background: { + primary: colors.brandPrimary, + secondary: colors.brandSecondary, + disabled: '#FAFAFA', + } +}; + +module.exports = boxes; diff --git a/ui/src/shared/constants/breakpoints.js b/ui/src/shared/constants/breakpoints.js new file mode 100644 index 00000000..6218ca49 --- /dev/null +++ b/ui/src/shared/constants/breakpoints.js @@ -0,0 +1,24 @@ +const styled = require('styled-components'); + +// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css +const screens = { + // >= 768px + small: 'only screen and (min-width: 48rem)', + // >= 1024px + medium: 'only screen and (min-width: 64rem)', + // >= 1200px + large: 'only screen and (min-width: 75rem)' +}; + +const breakpoints = Object.keys(screens).reduce((acc, label) => { + return { + ...acc, + [label]: (...args) => styled.css` + @media ${screens[label]} { + ${styled.css(...args)} + } + ` + }; +}, {}); + +module.exports = breakpoints; diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js new file mode 100644 index 00000000..6039ceba --- /dev/null +++ b/ui/src/shared/constants/colors.js @@ -0,0 +1,31 @@ +const brandPrimary = { + brandPrimary: '#3B46CC', + brandPrimaryDark: '#1838C0', + brandPrimaryDarkest: '#12279F', +}; + +const brandSecondary = { + brandSecondary: '#646464', + brandSecondaryDark: '#464646', + brandSecondaryDarkest: '#160D42', +}; + +const notifications = { + alert: '#DA4B42', + alertLight: '#FFC7C7', + confirmation: '#00AF66', + warning: '#E4A800', + warningLight: '#FFFAED', +}; + +const colors = { + + white: '#FFFFFF', + backgroundInactive: '#F9F9F9', + + ...brandPrimary, + ...brandSecondary, + ...notifications +}; + +module.exports = colors; diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js new file mode 100644 index 00000000..b6115eaa --- /dev/null +++ b/ui/src/shared/constants/index.js @@ -0,0 +1,35 @@ +const traverse = require('traverse'); +const isFunction = require('lodash.isfunction'); + +const colors = require('./colors'); +const boxes = require('./boxes'); +const typography = require('./typography'); +const sizes = require('./sizes'); +const breakpoints = require('./breakpoints'); +const links = require('./links'); + +const tables = { + bg: 'transparent', + cellPadding: '.75rem' +}; + +const forms = { + cursorDisabled: 'not-allowed' +}; + +const constants = traverse({ + colors, + boxes, + forms, + links, + sizes, + tables, + typography +}).map(function(x) { + return isFunction(x) ? x(this.parent.node) : x; +}); + +module.exports = { + ...constants, + breakpoints +}; diff --git a/ui/src/shared/constants/links.js b/ui/src/shared/constants/links.js new file mode 100644 index 00000000..c964a488 --- /dev/null +++ b/ui/src/shared/constants/links.js @@ -0,0 +1,14 @@ +const Color = require('color'); + +const links = { + color: '#364ACD', + decoration: 'none', + hoverColor: ({ + color + }) => { + return Color(color).darken(0.15).hex(); + }, + hoverDecoration: 'underline' +}; + +module.exports = links; diff --git a/ui/src/shared/constants/sizes.js b/ui/src/shared/constants/sizes.js new file mode 100644 index 00000000..e7d7aa74 --- /dev/null +++ b/ui/src/shared/constants/sizes.js @@ -0,0 +1,62 @@ +const calc = require('reduce-css-calc'); + +// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css +const sizes = { + gridColumns: 12, + gutterWidth: '1rem', + outerMargin: '2rem', + gutterCompensation: ({ + gutterWidth + }) => { + return calc(`calc((${gutterWidth} * 0.5) * -1)`); + }, + halfGutterWidth: ({ + gutterWidth + }) => { + return calc(`calc(${gutterWidth} * 0.5)`); + }, + xsMin: 30, + smMin: 48, + mdMin: 64, + lgMin: 75, + screenXsMin: ({ + xsMin + }) => { + return `${xsMin}em`; + }, + screenSmMin: ({ + smMin + }) => { + return `${smMin}em`; + }, + screenMdMin: ({ + mdMin + }) => { + return `${mdMin}em`; + }, + screenLgMin: ({ + lgMin + }) => { + return `${lgMin}em`; + }, + containerSm: ({ + gutterWidth, + smMin + }) => { + return calc(`calc(${smMin} + ${gutterWidth})`); + }, + containerMd: ({ + gutterWidth, + mdMin + }) => { + return calc(`calc(${mdMin} + ${gutterWidth})`); + }, + containerLg: ({ + gutterWidth, + lgMin + }) => { + return calc(`calc(${lgMin} + ${gutterWidth})`); + } +}; + +module.exports = sizes; diff --git a/ui/src/shared/constants/typography.js b/ui/src/shared/constants/typography.js new file mode 100644 index 00000000..f6ac5a6e --- /dev/null +++ b/ui/src/shared/constants/typography.js @@ -0,0 +1,10 @@ +const colors = require('./colors'); + +const typography = { + fontPrimary: 'sans serif', + dtFontWeight: 'bold', + abbrBorderColor: colors.brandSecondary, + textMuted: colors.brandSecondary +}; + +module.exports = typography;