feat: Design tokens (#55)

* Add typography tokens

* Add spacing tokens

* Add text color tokens

* Add borders and transitions tokens

* Revert text color tokens

* Unify theme module

* Drop tokens- and theme-related stories

Author: tassoevan

packages/fuselage/.loki/reference/chrome_iphone7_Styles_Theming_tests_Color_Palette.png

@@ -1,12 +1,11 @@
 import { createTheme } from '../../helpers/createTheme';
-import dimensions from '../../theme/dimensions';
-import typography from '../../theme/typography';
+import theme from '../../styles/theme';
 import colors from '../../tokens/colors';
 
 export default createTheme('rcx-button', {
-  borderWidth: dimensions.borderWidth,
-  borderRadius: dimensions.borderRadius,
-  fontFamily: typography.baseFont,
+  borderWidth: theme.borders.default.width,
+  borderRadius: theme.borders.default.radius,
+  fontFamily: theme.typography.p1.fontFamily,
   fontWeight: 500,
   height: '2.5rem',
   paddingVertical: '0.5rem',

packages/fuselage/.loki/reference/chrome_iphone7_Styles_Theming_tests_Theme_overrides.png

@@ -1,17 +1,16 @@
 import { createTheme } from '../../helpers/createTheme';
-import dimensions from '../../theme/dimensions';
+import theme from '../../styles/theme';
 import colors from '../../tokens/colors';
-import typography from '../../theme/typography';
 
 export default createTheme('rcx-check-box', {
-  size: dimensions.inputLineHeight,
-  borderWidth: dimensions.borderWidth,
-  borderRadius: dimensions.borderRadius,
+  size: theme.typography.p1.lineHeight,
+  borderWidth: theme.borders.default.width,
+  borderRadius: theme.borders.default.radius,
   labelColor: colors.dark800,
-  labelFontFamily: typography.baseFont,
+  labelFontFamily: theme.typography.p1.fontFamily,
   labelFontSize: '0.875rem',
   labelFontWeight: '400',
-  labelLineHeight: dimensions.inputLineHeight,
+  labelLineHeight: theme.typography.p1.lineHeight,
   color: colors.white,
   borderColor: colors.dark400,
   hoverBorderColor: colors.dark500,

packages/fuselage/.loki/reference/chrome_laptop_Styles_Theming_tests_Color_Palette.png

@@ -1,12 +1,12 @@
 import { createTheme } from '../../helpers/createTheme';
 import colors from '../../tokens/colors';
-import typography from '../../theme/typography';
+import theme from '../../styles/theme';
 
 
 export default createTheme('rcx-field', {
   labelMargin: '0 0 0.5rem 0',
   labelColor: colors.dark800,
-  labelFontFamily: typography.baseFont,
+  labelFontFamily: theme.typography.p1.fontFamily,
   labelFontSize: '0.875rem',
   labelFontWeight: 'normal',
   labelLineHeight: '1.25rem',
@@ -15,7 +15,7 @@ export default createTheme('rcx-field', {
   helpMargin: '0.25rem 0 0 0',
   helpColor: colors.dark600,
   helpFontSize: '0.875rem',
-  helpFontFamily: typography.baseFont,
+  helpFontFamily: theme.typography.p1.fontFamily,
   helpFontWeight: 'normal',
   helpLineHeight: '1.25rem',
 });

packages/fuselage/.loki/reference/chrome_laptop_Styles_Theming_tests_Theme_overrides.png

@@ -1,13 +1,12 @@
 import { createTheme } from '../../helpers/createTheme';
 import colors from '../../tokens/colors';
-import dimensions from '../../theme/dimensions';
-import typography from '../../theme/typography';
+import theme from '../../styles/theme';
 
 
 export default createTheme('rcx-input', {
   padding: '0.625rem 0.875rem',
-  borderWidth: dimensions.borderWidth,
-  borderRadius: dimensions.borderRadius,
+  borderWidth: theme.borders.default.width,
+  borderRadius: theme.borders.default.radius,
   color: colors.dark800,
   iconColor: colors.dark800,
   placeholderColor: colors.dark600,
@@ -25,7 +24,7 @@ export default createTheme('rcx-input', {
   disabledBorderColor: colors.dark500,
   disabledColor: colors.dark800,
   disabledIconColor: colors.dark500,
-  fontFamily: typography.baseFont,
+  fontFamily: theme.typography.p1.fontFamily,
   fontSize: '0.875rem',
   fontWeight: '500',
   lineHeight: '1.25rem',
@@ -38,7 +37,7 @@ export default createTheme('rcx-input', {
   iconMarginVertical: '0.75rem',
   labelMargin: '0 0 0.5rem 0',
   labelColor: colors.dark800,
-  labelFontFamily: typography.baseFont,
+  labelFontFamily: theme.typography.p1.fontFamily,
   labelFontSize: '0.875rem',
   labelFontWeight: 'normal',
   labelLineHeight: '1.25rem',
@@ -47,7 +46,7 @@ export default createTheme('rcx-input', {
   helpMargin: '0.25rem 0 0 0',
   helpColor: colors.dark600,
   helpFontSize: '0.875rem',
-  helpFontFamily: typography.baseFont,
+  helpFontFamily: theme.typography.p1.fontFamily,
   helpFontWeight: 'normal',
   helpLineHeight: '1.25rem',
 });

packages/fuselage/.storybook/jest-results.json

@@ -1,17 +1,16 @@
 import { createTheme } from '../../helpers/createTheme';
 import colors from '../../tokens/colors';
-import dimensions from '../../theme/dimensions';
-import typography from '../../theme/typography';
+import theme from '../../styles/theme';
 
 export default createTheme('rcx-radio-button', {
-  size: dimensions.inputLineHeight,
-  borderWidth: dimensions.borderWidth,
+  size: theme.typography.p1.lineHeight,
+  borderWidth: theme.borders.default.width,
   borderRadius: '50%',
   labelColor: colors.dark800,
-  labelFontFamily: typography.baseFont,
+  labelFontFamily: theme.typography.p1.fontFamily,
   labelFontSize: '0.875rem',
   labelFontWeight: '400',
-  labelLineHeight: dimensions.inputLineHeight,
+  labelLineHeight: theme.typography.p1.lineHeight,
   color: colors.white,
   borderColor: colors.dark400,
   hoverBorderColor: colors.dark500,

packages/fuselage/src/components/Button/theme.js

@@ -1,13 +1,13 @@
 import { createTheme } from '../../helpers/createTheme';
-import dimensions from '../../theme/dimensions';
+import theme from '../../styles/theme';
 import colors from '../../tokens/colors';
 
 
 export default createTheme('rcx-toggle-switch', {
   trackWidth: '2.5rem',
-  trackHeight: dimensions.inputLineHeight,
-  thumbSize: `calc(${ dimensions.inputLineHeight } - 2 * ${ dimensions.borderWidth })`,
-  borderWidth: dimensions.borderWidth,
+  trackHeight: theme.typography.p1.lineHeight,
+  thumbSize: `calc(${ theme.typography.p1.lineHeight } - 2 * ${ theme.borders.default.width })`,
+  borderWidth: theme.borders.default.width,
   borderRadius: '9999px',
   color: colors.white,
   backgroundColor: colors.dark400,

packages/fuselage/src/components/CheckBox/theme.js

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-import dimensions from '../theme/dimensions';
+import dimensions from '../styles/theme';
 
 
 export const reset = css`
@@ -11,7 +11,7 @@ export const reset = css`
   font-weight: normal;
   appearance: none;
   list-style: none;
-  transition: all ${ dimensions.shortTransitionDuration };
+  transition: all ${ dimensions.transitions.shortDuration };
   outline: none;
 
   &[hidden] {

packages/fuselage/src/components/Field/theme.js

@@ -1,9 +1,9 @@
 import { css } from 'styled-components';
 
-import typography from '../theme/typography';
+import theme from '../styles/theme';
 
 export const withText = css`
-  font-family: ${ ({ fontName = 'base' }) => typography[`${ fontName }Font`] };
+  font-family: ${ theme.typography.p1.fontFamily };
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   text-decoration: none;