fix: Use boxShadow instead of border to maintain rhythm (#131)

seek-oss · Mar 8, 2019 · d134f14 · d134f14
1 parent 7ebfcd3
commit d134f14
Show file tree

Hide file tree

Showing 30 changed files with 129 additions and 154 deletions.
diff --git 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
@@ -11,6 +11,7 @@ componentDocs.json
 .eslintrc
 .prettierrc
 coverage/
+dist-storybook/
 docs/dist/
 report/
 tsconfig.json

diff --git 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
diff --git a/lib/atoms/border/makeBorderWidths.ts b/lib/atoms/border/makeBorderWidths.ts
diff --git 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 → lib/atoms/makeBorderRadius.ts b/lib/atoms/border/makeBorderRadius.ts → lib/atoms/makeBorderRadius.ts
diff --git 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<BoxShadow, string>;
+
+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
@@ -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
@@ -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<HorizontalSpacing>;
   marginRight?: ResponsiveProp<HorizontalSpacing>;
   display?: ResponsiveProp<Display>;
-  borderWidth?: BorderWidth;
   borderRadius?: BorderRadius;
   backgroundColor?: BackgroundColor;
-  borderColor?: BorderColor;
   boxShadow?: BoxShadow;
   transform?: Transform;
   transition?: Transition;
@@ -68,10 +64,8 @@ export default class Box extends Component<BoxProps> {
       marginLeft,
       marginRight,
       display,
-      borderWidth,
       borderRadius,
       backgroundColor,
-      borderColor,
       boxShadow,
       transition,
       transform,
@@ -89,8 +83,7 @@ export default class Box extends Component<BoxProps> {
                 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
@@ -98,6 +98,8 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                   onMouseOut={this.handleMouseOut}
                 >
                   <Box
+                    backgroundColor="input"
+                    borderRadius="standard"
                     marginRight="small"
                     className={styles.checkboxContainer}
                     style={{
@@ -111,25 +113,20 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                     }}
                   >
                     <Box
-                      backgroundColor="input"
-                      borderWidth="standard"
-                      borderColor="standard"
+                      boxShadow="borderStandard"
                       borderRadius="standard"
                       className={styles.checkbox}
                     />
                     <Box
-                      backgroundColor="input"
-                      borderColor="formAccent"
-                      borderWidth="standard"
+                      boxShadow="borderFormAccent"
                       borderRadius="standard"
                       className={classnames(
                         styles.checkbox,
                         styles.checkboxHover,
                       )}
                     />
                     <Box
-                      backgroundColor="input"
-                      boxShadow="focus"
+                      boxShadow="outlineFocus"
                       borderRadius="standard"
                       transition="fast"
                       className={classnames(
@@ -148,8 +145,7 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                     />
                     <Box
                       backgroundColor="inputDisabled"
-                      borderWidth="standard"
-                      borderColor="standard"
+                      boxShadow="borderStandard"
                       borderRadius="standard"
                       transition="fast"
                       className={classnames(
@@ -158,8 +154,7 @@ export default class Checkbox extends Component<CheckboxProps, State> {
                       )}
                     />
                     <Box
-                      borderColor="critical"
-                      borderWidth="standard"
+                      boxShadow="borderCritical"
                       borderRadius="standard"
                       transition="fast"
                       style={{

diff --git a/lib/components/Divider/Divider.css.js b/lib/components/Divider/Divider.css.js
@@ -4,8 +4,6 @@ export default {
   },
   '.divider': {
     position: 'absolute',
-    borderBottomWidth: 0,
-    borderLeftWidth: 0,
-    borderRightWidth: 0,
+    height: '1px',
   },
 };
diff --git a/lib/components/Divider/Divider.tsx b/lib/components/Divider/Divider.tsx
@@ -9,8 +9,7 @@ export default class Divider extends Component<{}> {
     return (
       <Box className={styles.root}>
         <Box
-          borderWidth="standard"
-          borderColor="standard"
+          boxShadow="borderStandard"
           width="full"
           className={styles.divider}
         />

diff --git 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
@@ -97,6 +97,7 @@ export default class Radio extends Component<RadioProps, State> {
                   onMouseOut={this.handleMouseOut}
                 >
                   <Box
+                    backgroundColor="input"
                     style={{
                       width: px(radioSize),
                       height: px(radioSize),
@@ -110,34 +111,27 @@ export default class Radio extends Component<RadioProps, State> {
                     marginRight="medium"
                   >
                     <Box
-                      backgroundColor="input"
-                      borderColor="standard"
-                      borderWidth="standard"
+                      boxShadow="borderStandard"
                       style={{ opacity: hovered ? 0 : 1 }}
                       className={styles.radio}
                     />
                     <Box
-                      backgroundColor="input"
-                      borderColor="formAccent"
-                      borderWidth="standard"
+                      boxShadow="borderFormAccent"
                       className={classnames(styles.radio, styles.radioHover)}
                     />
                     <Box
-                      backgroundColor="input"
-                      boxShadow="focus"
+                      boxShadow="outlineFocus"
                       transition="fast"
                       className={classnames(styles.radio, styles.radioFocus)}
                     />
                     <Box
                       backgroundColor="inputDisabled"
-                      borderWidth="standard"
-                      borderColor="standard"
+                      boxShadow="borderStandard"
                       transition="fast"
                       className={classnames(styles.radio, styles.radioDisabled)}
                     />
                     <Box
-                      borderColor="critical"
-                      borderWidth="standard"
+                      boxShadow="borderCritical"
                       transition="fast"
                       style={{ opacity: tone === 'critical' ? 1 : 0 }}
                       className={classnames(styles.radio, styles.radioCritical)}

diff --git a/lib/themes/jobStreet/atoms.css.js b/lib/themes/jobStreet/atoms.css.js
@@ -1,5 +1,9 @@
 import tokens from './tokens';
 import makeAtoms from '../../atoms/makeAtoms';
+import { rgba } from 'polished';
+
+const focusColor = rgba('#428bca', 0.7);
+const formAccent = '#142d69';
 
 const colors = {
   link: '#1c3f94',
@@ -9,37 +13,34 @@ const colors = {
   critical: 'red',
   positive: 'green',
   secondary: '#333333b3',
-  formAccent: '#142d69',
+  formAccent,
   neutral: '#333',
 };
 
 const fills = {
-  formAccent: '#142d69',
+  formAccent,
   formAccentDisabled: '#ccc',
   critical: 'red',
   positive: 'green',
   secondary: '#333333b3',
   white: 'white',
 };
 
-const borderColor = {
-  standard: '#ccc',
-  formAccent: '#142d69',
-  critical: 'red',
-};
-
 const borderRadius = {
   standard: '3px',
 };
 
 const boxShadows = {
-  focusColor: '#142d69',
+  outlineFocus: focusColor,
+  borderStandard: '#ccc',
+  borderCritical: 'red',
+  borderFormAccent: formAccent,
 };
 
 const backgroundColor = {
   input: 'white',
   inputDisabled: '#eee',
-  formAccent: '#142d69',
+  formAccent,
   formAccentDisabled: '#ccc',
   selection: '#E8EBF4',
   info: '#142d69',
@@ -62,7 +63,6 @@ export default makeAtoms(
   colors,
   fills,
   fontFamily,
-  borderColor,
   borderRadius,
   boxShadows,
   fontWeights,