diff --git a/ui/package.json b/ui/package.json index 2d9bb57b..baa79dba 100644 --- a/ui/package.json +++ b/ui/package.json @@ -13,15 +13,19 @@ }, "dependencies": { "classnames": "^2.2.5", + "color": "^0.11.3", "invariant": "^2.2.1", "lodash.find": "^4.6.0", "lodash.first": "^3.0.0", "lodash.flatten": "^4.4.0", "lodash.get": "^4.4.2", + "lodash.isfunction": "^3.0.8", "lodash.isundefined": "^3.0.1", "param-case": "^2.1.0", "react": "^15.3.2", - "react-a11y": "^0.3.3" + "react-a11y": "^0.3.3", + "reduce-css-calc": "^1.3.0", + "traverse": "^0.6.6" }, "devDependencies": { "ava": "^0.16.0", @@ -52,6 +56,7 @@ "nyc": "^8.3.1", "param-case": "^2.1.0", "postcss-at-rules-variables": "0.0.25", + "postcss-constants": "^0.2.0", "postcss-cssnext": "^2.8.0", "postcss-for": "^2.1.1", "postcss-functions": "^2.1.1", diff --git a/ui/src/components/avatar/style.css b/ui/src/components/avatar/style.css index 7683e0d5..f388909b 100644 --- a/ui/src/components/avatar/style.css +++ b/ui/src/components/avatar/style.css @@ -14,5 +14,5 @@ .picture { max-width: 60%; - composes: verticle_align_center from '../../util/composers.css'; + composes: verticle_align_center from '../../shared/composers.css'; } diff --git a/ui/src/components/base/style.css b/ui/src/components/base/style.css index 883ba034..d925a21f 100644 --- a/ui/src/components/base/style.css +++ b/ui/src/components/base/style.css @@ -9,22 +9,22 @@ * github.com/necolas/normalize.css */ -@value cursor-disabled from "../../constants/forms.css"; -@value link-color, link-decoration, link-hover-color, link-hover-decoration from "../../constants/links.css"; -@value table-bg, table-cell-padding from "../../constants/tables.css"; -@value dt-font-weight, text-muted, abbr-border-color from "../../constants/typography.css"; +~forms: "../../shared/constants.js"; +~links: "../../shared/constants.js"; +~tables: "../../shared/constants.js"; +~typography: "../../shared/constants.js"; :root { - --cursor-disabled: cursor-disabled; - --link-color: link-color; - --link-decoration: link-decoration; - --link-hover-color: link-hover-color; - --link-hover-decoration: link-hover-decoration; - --table-bg: table-bg; - --table-cell-padding: table-cell-padding; - --dt-font-weight: dt-font-weight; - --text-muted: text-muted; - --abbr-border-color: abbr-border-color; + --cursor-disabled: ~forms.cursorDisabled; + --link-color: ~links.linkColor; + --link-decoration: ~links.linkDecoration; + --link-hover-color: ~links.linkHoverColor; + --link-hover-decoration: ~links.linkHoverDecoration; + --table-bg: ~tables.tableBg; + --table-cell-padding: ~tables.tableCellPadding; + --dt-font-weight: ~typography.dtFontWeight; + --text-muted: ~typography.textMuted; + --abbr-border-color: ~typography.abbrBorderColor; } .base { diff --git a/ui/src/components/column/style.css b/ui/src/components/column/style.css index eb2aeb3f..4145b4f7 100644 --- a/ui/src/components/column/style.css +++ b/ui/src/components/column/style.css @@ -3,14 +3,18 @@ * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css */ -@value half-gutter-width from "../../constants/sizes.css"; -@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css"; +~sizes: "../../shared/constants.js"; +~breakpoints: "../../shared/constants.js"; :root { - --half-gutter-width: half-gutter-width; + --half-gutter-width: ~sizes.halfGutterWidth; --grid-columns: 12; /* Cannot import values and use them within the loop */ } +@custom-media --sm-viewport ~breakpoints.sm; +@custom-media --md-viewport ~breakpoints.md; +@custom-media --lg-viewport ~breakpoints.lg; + @define-mixin viewport $size { &.$(size) { flex-grow: 1; @@ -44,15 +48,15 @@ @mixin viewport xs; - @media sm-viewport { + @media (--sm-viewport) { @mixin viewport sm; } - @media md-viewport { + @media (--md-viewport) { @mixin viewport md; } - @media lg-viewport { + @media (--lg-viewport) { @mixin viewport lg; } } diff --git a/ui/src/components/container/style.css b/ui/src/components/container/style.css index 7c9a26b1..93166434 100644 --- a/ui/src/components/container/style.css +++ b/ui/src/components/container/style.css @@ -3,14 +3,20 @@ * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css */ -@value outer-margin, container-sm, container-md, container-lg from "../../constants/sizes.css"; -@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css"; +~sizes: "../../shared/constants.js"; +~breakpoints: "../../shared/constants.js"; :root { - --outer-margin: outer-margin; - --container-sm: container-sm; + --outer-margin: ~sizes.outerMargin; + --container-sm: ~sizes.containerSm; } + +@custom-media --sm-viewport ~breakpoints.sm; +@custom-media --md-viewport ~breakpoints.md; +@custom-media --lg-viewport ~breakpoints.lg; + + .container-fluid, .container { margin-right: auto; margin-left: auto; @@ -22,15 +28,15 @@ } .container { - @media sm-viewport { + @media (--sm-viewport) { width: var(--container-sm, 46rem); } - @media md-viewport { + @media (--md-viewport) { width: var(--container-md, 61rem); } - @media lg-viewport { + @media (--lg-viewport) { width: var(--container-lg, 71rem); } } diff --git a/ui/src/components/radio/style.css b/ui/src/components/radio/style.css index c1ab6faa..f40a6cd6 100644 --- a/ui/src/components/radio/style.css +++ b/ui/src/components/radio/style.css @@ -1,4 +1,4 @@ -@import '../../util/mixins.css'; +@import '../../shared/mixins.css'; :root { --radio-radius: 20px; diff --git a/ui/src/components/row/style.css b/ui/src/components/row/style.css index 35e7cdbd..79f30998 100644 --- a/ui/src/components/row/style.css +++ b/ui/src/components/row/style.css @@ -3,14 +3,17 @@ * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css */ -@value gutter-compensation from "../../constants/sizes.css"; -@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css"; +~sizes: "../../shared/constants.js"; +~breakpoints: "../../shared/constants.js"; :root { - --outer-margin: outer-margin; - --gutter-compensation: gutter-compensation; + --gutter-compensation: ~sizes.gutterCompensation; } +@custom-media --sm-viewport ~breakpoints.sm; +@custom-media --md-viewport ~breakpoints.md; +@custom-media --lg-viewport ~breakpoints.lg; + @define-mixin viewport $size { &.start-$(size) { justify-content: flex-start; @@ -71,15 +74,15 @@ @mixin viewport xs; - @media sm-viewport { + @media (--sm-viewport) { @mixin viewport sm; } - @media md-viewport { + @media (--md-viewport) { @mixin viewport md; } - @media lg-viewport { + @media (--lg-viewport) { @mixin viewport lg; } } diff --git a/ui/src/components/tab/style.css b/ui/src/components/tab/style.css index a699a6b7..5789c151 100644 --- a/ui/src/components/tab/style.css +++ b/ui/src/components/tab/style.css @@ -1,4 +1,4 @@ -@import '../../util/mixins.css'; +@import '../../shared/mixins.css'; .tab { display: inline; diff --git a/ui/src/constants/breakpoints.css b/ui/src/constants/breakpoints.css deleted file mode 100644 index 46649d0e..00000000 --- a/ui/src/constants/breakpoints.css +++ /dev/null @@ -1,8 +0,0 @@ -/* - * based on - * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css - */ - -@value sm-viewport: only screen and (min-width: 48em); /* 768px */ -@value md-viewport: only screen and (min-width: 64em); /* 1024px */ -@value lg-viewport: only screen and (min-width: 75em); /* 1200px */ diff --git a/ui/src/constants/colors.css b/ui/src/constants/colors.css deleted file mode 100644 index dc26dd50..00000000 --- a/ui/src/constants/colors.css +++ /dev/null @@ -1,13 +0,0 @@ -@value brand-primary from "./colors.css"; - -:root { - --brand-primary: #0275d8; - --brand-secondary: #160D42; - --gray-light: #818a91; - --confirmation: #38C647; -} - -@value brand-primary: var(--brand-primary); -@value brand-secondary: var(--brand-secondary); -@value gray-light: var(--gray-light); -@value confirmation: var(--confirmation); diff --git a/ui/src/constants/forms.css b/ui/src/constants/forms.css deleted file mode 100644 index 6e05ef58..00000000 --- a/ui/src/constants/forms.css +++ /dev/null @@ -1,5 +0,0 @@ -:root { - --cursor-disabled: not-allowed; -} - -@value cursor-disabled: var(--cursor-disabled); diff --git a/ui/src/constants/links.css b/ui/src/constants/links.css deleted file mode 100644 index feb603ec..00000000 --- a/ui/src/constants/links.css +++ /dev/null @@ -1,13 +0,0 @@ -@value brand-primary from "./colors.css"; - -:root { - --link-color: brand-primary; - --link-decoration: none; - --link-hover-color: darken(var(--link-color), 15%); - --link-hover-decoration: underline; -} - -@value link-color: var(--link-color); -@value link-decoration: var(--link-decoration); -@value link-hover-color: var(--link-hover-color); -@value link-hover-decoration: var(--link-hover-decoration); diff --git a/ui/src/constants/sizes.css b/ui/src/constants/sizes.css deleted file mode 100644 index 69d08deb..00000000 --- a/ui/src/constants/sizes.css +++ /dev/null @@ -1,38 +0,0 @@ -/* - * based on - * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css - */ - -:root { - --gutter-width: 1rem; - --outer-margin: 2rem; - --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1); - --half-gutter-width: calc((var(--gutter-width) * 0.5)); - --xs-min: 30; - --sm-min: 48; - --md-min: 64; - --lg-min: 75; - --screen-xs-min: var(--xs-min)em; - --screen-sm-min: var(--sm-min)em; - --screen-md-min: var(--md-min)em; - --screen-lg-min: var(--lg-min)em; - --container-sm: calc(var(--sm-min) + var(--gutter-width)); - --container-md: calc(var(--md-min) + var(--gutter-width)); - --container-lg: calc(var(--lg-min) + var(--gutter-width)); -} - -@value gutter-width: var(--gutter-width); -@value outer-margin: var(--outer-margin); -@value gutter-compensation: var(--gutter-compensation); -@value half-gutter-width: var(--half-gutter-width); -@value xs-min: var(--xs-min); -@value sm-min: var(--sm-min); -@value md-min: var(--md-min); -@value lg-min: var(--lg-min); -@value screen-xs-min: var(--screen-xs-min); -@value screen-sm-min: var(--screen-sm-min); -@value screen-md-min: var(--screen-md-min); -@value screen-lg-min: var(--screen-lg-min); -@value container-sm: var(--container-sm); -@value container-md: var(--container-md); -@value container-lg: var(--container-lg); diff --git a/ui/src/constants/tables.css b/ui/src/constants/tables.css deleted file mode 100644 index ad0bd842..00000000 --- a/ui/src/constants/tables.css +++ /dev/null @@ -1,7 +0,0 @@ -:root { - --table-bg: transparent; - --table-cell-padding: .75rem; -} - -@value table-bg: var(--table-bg); -@value table-cell-padding: var(--table-cell-padding); diff --git a/ui/src/constants/typography.css b/ui/src/constants/typography.css deleted file mode 100644 index 976d0f63..00000000 --- a/ui/src/constants/typography.css +++ /dev/null @@ -1,11 +0,0 @@ -@value gray-light from "./colors.css"; - -:root { - --dt-font-weight: bold; - --text-muted: gray-light; - --abbr-border-color: gray-light; -} - -@value dt-font-weight: var(--dt-font-weight); -@value text-muted: var(--text-muted); -@value abbr-border-color: var(--abbr-border-color); diff --git a/ui/src/util/composers.css b/ui/src/shared/composers.css similarity index 100% rename from ui/src/util/composers.css rename to ui/src/shared/composers.css diff --git a/ui/src/shared/constants.js b/ui/src/shared/constants.js new file mode 100644 index 00000000..870827d4 --- /dev/null +++ b/ui/src/shared/constants.js @@ -0,0 +1,117 @@ +const calc = require('reduce-css-calc'); +const traverse = require('traverse'); +const isFunction = require('lodash.isfunction'); +const Color = require('color'); + +const tables = { + tableBg: 'transparent', + tableCellPadding: '.75rem' +}; + +// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css +const sizes = { + 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 colors = { + brandPrimary: '#0275d8', + brandSecondary: '#160D42', + grayLight: '#818a91', + confirmation: '#38C647' +}; + +const typography = { + dtFontWeight: 'bold', + abbrBorderColor: colors.grayLight, + textMuted: colors.grayLight +}; + +const links = { + linkColor: colors.brandPrimary, + linkDecoration: 'none', + linkHoverColor: ({ + linkColor + }) => { + return Color(linkColor).darken('0.15').hexString(); + }, + linkHoverDecoration: 'underline' +}; + +// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css +const breakpoints = { + // >= 768px + sm: 'only screen and (min-width: 48em)', + // >= 1024px + md: 'only screen and (min-width: 64em)', + // >= 1200px + lg: 'only screen and (min-width: 75em)' +}; + +module.exports = traverse({ + breakpoints, + colors, + forms, + links, + sizes, + tables, + typography +}).map(function(x) { + return isFunction(x) ? x(this.parent.node) : x; +}); diff --git a/ui/src/shared/functions.js b/ui/src/shared/functions.js new file mode 100644 index 00000000..9b6b5ecd --- /dev/null +++ b/ui/src/shared/functions.js @@ -0,0 +1,16 @@ +module.exports = { + remCalc: function(values) { + values = values.replace('px', ''); + values = values.split(' '); + + let outputRems = ''; + const base = 16; + + values.forEach( (value, i) => { + const remValue = value / base; + outputRems += i === 0 ? `${remValue}rem` : ` ${remValue}rem`; + }); + + return outputRems; + } +}; diff --git a/ui/src/util/mixins.css b/ui/src/shared/mixins.css similarity index 100% rename from ui/src/util/mixins.css rename to ui/src/shared/mixins.css diff --git a/ui/test/index.js b/ui/test/index.js index c5415ec3..7895e316 100644 --- a/ui/test/index.js +++ b/ui/test/index.js @@ -6,8 +6,8 @@ const { shallow } = enzyme; -test('renders