From d134f1427f969889987a52386918a9b94de8e447 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Fri, 8 Mar 2019 15:15:58 +1100 Subject: [PATCH] fix: Use boxShadow instead of border to maintain rhythm (#131) --- .eslintignore | 1 + .gitignore | 1 + .prettierignore | 1 + lib/atoms/border/makeBorderColor.ts | 11 -------- lib/atoms/border/makeBorderWidths.ts | 13 --------- lib/atoms/makeAtoms.ts | 11 ++------ lib/atoms/{border => }/makeBorderRadius.ts | 0 lib/atoms/makeBoxShadows.ts | 31 ++++++++++++++++++---- lib/atoms/normalizeAtoms.ts | 13 +++------ lib/components/Box/Box.tsx | 9 +------ lib/components/Checkbox/Checkbox.tsx | 19 +++++-------- lib/components/Divider/Divider.css.js | 4 +-- lib/components/Divider/Divider.tsx | 3 +-- lib/components/Radio/Radio.css.js | 1 + lib/components/Radio/Radio.tsx | 18 +++++-------- lib/themes/jobStreet/atoms.css.js | 22 +++++++-------- lib/themes/jobStreet/atoms.css.js.d.ts | 9 +++---- lib/themes/jobStreet/tokens.ts | 1 + lib/themes/seekAnz/atoms.css.js | 24 ++++++++--------- lib/themes/seekAnz/atoms.css.js.d.ts | 9 +++---- lib/themes/seekAnz/tokens.ts | 1 + lib/themes/seekAsia/atoms.css.js | 21 +++++++-------- lib/themes/seekAsia/atoms.css.js.d.ts | 9 +++---- lib/themes/seekAsia/tokens.ts | 1 + lib/themes/theme.d.ts | 11 ++++---- lib/themes/wireframe/atoms.css.js | 21 +++++++-------- lib/themes/wireframe/atoms.css.js.d.ts | 9 +++---- lib/themes/wireframe/tokens.ts | 1 + package.json | 1 + yarn.lock | 7 +++++ 30 files changed, 129 insertions(+), 154 deletions(-) delete mode 100644 lib/atoms/border/makeBorderColor.ts delete mode 100644 lib/atoms/border/makeBorderWidths.ts rename lib/atoms/{border => }/makeBorderRadius.ts (100%) diff --git a/.eslintignore b/.eslintignore index 71d8e2956b..ccaf4680dc 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,6 @@ # managed by sku coverage/ +dist-storybook/ docs/dist/ report/ # end managed by sku diff --git a/.gitignore b/.gitignore index 0f29bf81e9..f4305c1288 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,7 @@ componentDocs.json .eslintrc .prettierrc coverage/ +dist-storybook/ docs/dist/ report/ tsconfig.json diff --git a/.prettierignore b/.prettierignore index 71d8e2956b..ccaf4680dc 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,5 +1,6 @@ # managed by sku coverage/ +dist-storybook/ docs/dist/ report/ # end managed by sku diff --git a/lib/atoms/border/makeBorderColor.ts b/lib/atoms/border/makeBorderColor.ts deleted file mode 100644 index cdf69c87f3..0000000000 --- a/lib/atoms/border/makeBorderColor.ts +++ /dev/null @@ -1,11 +0,0 @@ -export interface BorderColorParams { - standard: string; - formAccent: string; - critical: string; -} - -export default ({ standard, formAccent, critical }: BorderColorParams) => ({ - '.borderColor_standard': { borderColor: standard }, - '.borderColor_formAccent': { borderColor: formAccent }, - '.borderColor_critical': { borderColor: critical }, -}); diff --git a/lib/atoms/border/makeBorderWidths.ts b/lib/atoms/border/makeBorderWidths.ts deleted file mode 100644 index fce49aae22..0000000000 --- a/lib/atoms/border/makeBorderWidths.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Tokens } from '../../themes/theme'; - -import mapObject from '../utils/mapObject'; -import { px } from '../utils/toUnit'; - -export default (tokens: Tokens) => - mapObject(tokens.borderWidth, (key, value) => [ - `.borderWidth_${key}`, - { - borderStyle: 'solid', - borderWidth: px(value), - }, - ]); diff --git a/lib/atoms/makeAtoms.ts b/lib/atoms/makeAtoms.ts index fff6f63d90..dfea4ba0e3 100644 --- a/lib/atoms/makeAtoms.ts +++ b/lib/atoms/makeAtoms.ts @@ -10,10 +10,7 @@ import makeDisplayRules from './makeDisplayRules'; import makeTransitions from './makeTransitions'; import makeFontWeight, { FontWeightParams } from './font/makeFontWeights'; import makeFontFamily, { FontFamilyParams } from './font/makeFontFamily'; -import makeBorderColor, { BorderColorParams } from './border/makeBorderColor'; -import makeBorderRadius, { - BorderRadiusParams, -} from './border/makeBorderRadius'; +import makeBorderRadius, { BorderRadiusParams } from './makeBorderRadius'; import makeBackgroundColors, { BackgroundColorParams, } from './color/makeBackgroundColors'; @@ -24,14 +21,12 @@ import makeTransforms from './makeTransforms'; import makeSizes from './makeSizes'; import makeFontSizes from './font/makeFontSizes'; import makeFills, { FillParams } from './color/makeFills'; -import makeBorderWidths from './border/makeBorderWidths'; const makeAtoms = ( tokens: Tokens, colors: ColorParams, fills: FillParams, fontFamily: FontFamilyParams, - borderColor: BorderColorParams, borderRadius: BorderRadiusParams, boxShadows: BoxShadowParams, fontWeights: FontWeightParams, @@ -40,10 +35,8 @@ const makeAtoms = ( const rules = merge( makeFontSizes(tokens), makeBackgroundColors(backgroundColor), - makeBorderColor(borderColor), makeBorderRadius(borderRadius), - makeBorderWidths(tokens), - makeBoxShadows(boxShadows), + makeBoxShadows(tokens, boxShadows), makeColors(colors), makeFills(fills), makeFontFamily(fontFamily), diff --git a/lib/atoms/border/makeBorderRadius.ts b/lib/atoms/makeBorderRadius.ts similarity index 100% rename from lib/atoms/border/makeBorderRadius.ts rename to lib/atoms/makeBorderRadius.ts diff --git a/lib/atoms/makeBoxShadows.ts b/lib/atoms/makeBoxShadows.ts index e0ebe5f05d..4c22d6fc29 100644 --- a/lib/atoms/makeBoxShadows.ts +++ b/lib/atoms/makeBoxShadows.ts @@ -1,7 +1,28 @@ -export interface BoxShadowParams { - focusColor: string; -} +import { BoxShadow } from './../themes/theme'; +import { Tokens } from 'lib/themes/theme'; +import { px } from './utils/toUnit'; -export default ({ focusColor }: BoxShadowParams) => ({ - '.boxShadow_focus': { boxShadow: `0 0 0 1px ${focusColor}` }, +export type BoxShadowParams = Record; + +export default ( + { borderWidth }: Tokens, + { + outlineFocus, + borderStandard, + borderFormAccent, + borderCritical, + }: BoxShadowParams, +) => ({ + '.boxShadow_outlineFocus': { + boxShadow: `0 0 0 ${px(borderWidth.large)} ${outlineFocus}`, + }, + '.boxShadow_borderStandard': { + boxShadow: `inset 0 0 0 ${px(borderWidth.standard)} ${borderStandard}`, + }, + '.boxShadow_borderCritical': { + boxShadow: `inset 0 0 0 ${px(borderWidth.standard)} ${borderCritical}`, + }, + '.boxShadow_borderFormAccent': { + boxShadow: `inset 0 0 0 ${px(borderWidth.standard)} ${borderFormAccent}`, + }, }); diff --git a/lib/atoms/normalizeAtoms.ts b/lib/atoms/normalizeAtoms.ts index 4d3bd2ed8d..51602f6340 100644 --- a/lib/atoms/normalizeAtoms.ts +++ b/lib/atoms/normalizeAtoms.ts @@ -16,19 +16,14 @@ export default ( inputDisabled: atoms.backgroundColor_inputDisabled, selection: atoms.backgroundColor_selection, }, - borderColor: { - critical: atoms.borderColor_critical, - formAccent: atoms.borderColor_formAccent, - standard: atoms.borderColor_standard, - }, borderRadius: { standard: atoms.borderRadius_standard, }, - borderWidth: { - standard: atoms.borderWidth_standard, - }, boxShadow: { - focus: atoms.boxShadow_focus, + outlineFocus: atoms.boxShadow_outlineFocus, + borderStandard: atoms.boxShadow_borderStandard, + borderCritical: atoms.boxShadow_borderCritical, + borderFormAccent: atoms.boxShadow_borderFormAccent, }, color: { link: atoms.color_link, diff --git a/lib/components/Box/Box.tsx b/lib/components/Box/Box.tsx index bcbef016fb..bf74ecf037 100644 --- a/lib/components/Box/Box.tsx +++ b/lib/components/Box/Box.tsx @@ -7,10 +7,8 @@ import { HorizontalSpacing, VerticalPadding, Spacing, - BorderWidth, BorderRadius, BackgroundColor, - BorderColor, Display, BoxShadow, Transition, @@ -44,10 +42,8 @@ export interface BoxProps extends ResetProps { marginLeft?: ResponsiveProp; marginRight?: ResponsiveProp; display?: ResponsiveProp; - borderWidth?: BorderWidth; borderRadius?: BorderRadius; backgroundColor?: BackgroundColor; - borderColor?: BorderColor; boxShadow?: BoxShadow; transform?: Transform; transition?: Transition; @@ -68,10 +64,8 @@ export default class Box extends Component { marginLeft, marginRight, display, - borderWidth, borderRadius, backgroundColor, - borderColor, boxShadow, transition, transform, @@ -89,8 +83,7 @@ export default class Box extends Component { className, styles.root, atoms.backgroundColor[backgroundColor!], - atoms.borderColor[borderColor!], - atoms.borderWidth[borderWidth!], + atoms.boxShadow[boxShadow!], atoms.borderRadius[borderRadius!], atoms.boxShadow[boxShadow!], atoms.transition[transition!], diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx index 65e2e7a2d1..a3781d0d8a 100644 --- a/lib/components/Checkbox/Checkbox.tsx +++ b/lib/components/Checkbox/Checkbox.tsx @@ -98,6 +98,8 @@ export default class Checkbox extends Component { onMouseOut={this.handleMouseOut} > { }} > { )} /> { /> { )} /> { return ( diff --git a/lib/components/Radio/Radio.css.js b/lib/components/Radio/Radio.css.js index 97ffeb38dd..83b8985c44 100644 --- a/lib/components/Radio/Radio.css.js +++ b/lib/components/Radio/Radio.css.js @@ -15,6 +15,7 @@ export default { flexShrink: 0, position: 'relative', padding: '5px', + borderRadius: '100%', }, '.radio': { borderRadius: '100%', diff --git a/lib/components/Radio/Radio.tsx b/lib/components/Radio/Radio.tsx index 1879ba2cdb..04fb559856 100644 --- a/lib/components/Radio/Radio.tsx +++ b/lib/components/Radio/Radio.tsx @@ -97,6 +97,7 @@ export default class Radio extends Component { onMouseOut={this.handleMouseOut} > { marginRight="medium" > ; backgroundColor: Record; - borderColor: Record; borderRadius: Record; - borderWidth: Record; boxShadow: Record; color: Record; fill: Record; diff --git a/lib/themes/wireframe/atoms.css.js b/lib/themes/wireframe/atoms.css.js index 83d2ce71d7..4f57b740b7 100644 --- a/lib/themes/wireframe/atoms.css.js +++ b/lib/themes/wireframe/atoms.css.js @@ -1,6 +1,9 @@ import tokens from './tokens'; import makeAtoms from '../../atoms/makeAtoms'; +const focusColor = 'DeepSkyBlue'; +const formAccent = 'blue'; + const colors = { link: '#4c77bb', black: '#2b2b2b', @@ -8,12 +11,12 @@ const colors = { critical: 'red', positive: 'green', secondary: '#777', - formAccent: 'navy', + formAccent, neutral: '#2b2b2b', }; const fills = { - formAccent: 'blue', + formAccent, formAccentDisabled: '#ccc', critical: 'red', positive: 'green', @@ -21,24 +24,21 @@ const fills = { white: 'white', }; -const borderColor = { - standard: '#777', - formAccent: 'blue', - critical: 'red', -}; - const borderRadius = { standard: '4px', }; const boxShadows = { - focusColor: 'blue', + outlineFocus: focusColor, + borderStandard: '#777', + borderCritical: 'red', + borderFormAccent: formAccent, }; const backgroundColor = { input: 'white', inputDisabled: '#eee', - formAccent: 'blue', + formAccent, formAccentDisabled: '#ccc', selection: '#eee', info: 'navy', @@ -61,7 +61,6 @@ export default makeAtoms( colors, fills, fontFamily, - borderColor, borderRadius, boxShadows, fontWeights, diff --git a/lib/themes/wireframe/atoms.css.js.d.ts b/lib/themes/wireframe/atoms.css.js.d.ts index 8e9c2bf6a8..d7634b8fb0 100644 --- a/lib/themes/wireframe/atoms.css.js.d.ts +++ b/lib/themes/wireframe/atoms.css.js.d.ts @@ -8,12 +8,11 @@ export const backgroundColor_info: string; export const backgroundColor_input: string; export const backgroundColor_inputDisabled: string; export const backgroundColor_selection: string; -export const borderColor_critical: string; -export const borderColor_formAccent: string; -export const borderColor_standard: string; export const borderRadius_standard: string; -export const borderWidth_standard: string; -export const boxShadow_focus: string; +export const boxShadow_borderCritical: string; +export const boxShadow_borderFormAccent: string; +export const boxShadow_borderStandard: string; +export const boxShadow_outlineFocus: string; export const color_black: string; export const color_critical: string; export const color_formAccent: string; diff --git a/lib/themes/wireframe/tokens.ts b/lib/themes/wireframe/tokens.ts index 5b988dd931..11f340373a 100644 --- a/lib/themes/wireframe/tokens.ts +++ b/lib/themes/wireframe/tokens.ts @@ -87,6 +87,7 @@ const tokens: Tokens = { }, borderWidth: { standard: 1, + large: 2, }, }; diff --git a/package.json b/package.json index 92334091a2..dd25d8b0fe 100644 --- a/package.json +++ b/package.json @@ -106,6 +106,7 @@ "lint-staged": "^8.0.4", "lodash": "^4.17.11", "playroom": "0.7.2", + "polished": "^3.0.3", "postcss-js": "^2.0.0", "postcss-loader": "^3.0.0", "react": "^16.5.2", diff --git a/yarn.lock b/yarn.lock index eb0d64d874..0407459fe3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11191,6 +11191,13 @@ pn@^1.1.0: resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb" integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA== +polished@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/polished/-/polished-3.0.3.tgz#b7d9604936f6dc40031306f3a1136585fc3471b5" + integrity sha512-WFgVHAWJubobUzk5B5dcqS2jGw8hB/I/H5hXitR4jd/bvEZBQV4vlw5UGDhLxkLQ1incf9NMFztI4XAryHvJDA== + dependencies: + "@babel/runtime" "^7.3.1" + portfinder@^1.0.9: version "1.0.20" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"