feat: Refactor static styles (#201)

* Add values module

* Fix some stylelint rules

* Add postcss-dir-pseudo-class

* Replace spaces variables

* Use inset logical properties

* Replace more physical properties with logical ones

* Replace border-width, border-radius, and sizes variables

* Rename values module as lengths

* Add module for colors

* Enable Storybook in IE11

* Rearrange foreground/text colors

* Rearrange some placeholder selectors

* Remove text-colors module

* Add typography module

* Remove text-styles module

packages/fuselage-ui-kit/src/Section.js

@@ -38,7 +38,7 @@ const Fields = ({ fields, parser }) => (
 export const Section = ({ blockId, appId, text, fields, accessory, parser }) => <Block>
   <Grid>
     <Grid.Item>
-      {text && <Box is='span' textStyle='paragraph' textColor='default'>{parser.text(text)}</Box>}
+      {text && <Box is='span' textStyle='p1' textColor='default'>{parser.text(text)}</Box>}
       {fields && <Fields fields={fields} parser={parser} />}
     </Grid.Item>
     { accessory && < Flex.Item grow={0}>

packages/fuselage/.storybook/helpers.js

@@ -8,13 +8,13 @@ export function PropsVariationSection({ component: Component, common = {}, xAxis
       <Box is='tr'>
         <Box is='th' />
         {Object.keys(xAxis).map((xVariation, key) =>
-          <Box key={key} is='th' textColor='hint' textStyle='caption'>{xVariation}</Box>)}
+          <Box key={key} is='th' textColor='hint' textStyle='c1'>{xVariation}</Box>)}
       </Box>
     </Box>
     <Box is='tbody'>
       {Object.entries(yAxis).map(([yVariation, yProps], y) => (
         <Box key={y} is='tr'>
-          <Box is='th' textColor='hint' textStyle='caption'>{yVariation}</Box>
+          <Box is='th' textColor='hint' textStyle='c1'>{yVariation}</Box>
           {Object.values(xAxis).map((xProps, x) => <Box key={x} is='td' style={{ margin: 0, padding: '0.5rem 1rem' }}>
             <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
               <Component {...common} {...xProps} {...yProps} />

packages/fuselage/.storybook/webpack.config.js

@@ -8,7 +8,8 @@ module.exports = async ({ config, mode }) => {
   const jsRule = config.module.rules.find(({ test }) => test.test('index.js'));
   jsRule.include = [
     ...jsRule.include,
-    /node_modules\/loki/,
+    /node_modules\/@loki/,
+    /node_modules\/acorn-jsx/,
   ];
   delete jsRule.exclude;
 
@@ -34,6 +35,7 @@ module.exports = async ({ config, mode }) => {
           plugins: () => [
             require('postcss-custom-properties')(),
             require('postcss-logical')({ preserve: true }),
+            require('postcss-dir-pseudo-class')({ dir: 'ltr' }),
             require('autoprefixer')(),
           ],
         },

packages/fuselage/.stylelintrc

@@ -97,6 +97,10 @@
         ]
       }
     ],
+    "scss/at-mixin-pattern": "^-?([a-z][a-z0-9]+-)*[a-z][a-z0-9]+$",
+    "scss/at-mixin-parentheses-space-before": "never",
+    "scss/dollar-variable-pattern": "^-?([a-z][a-z0-9]+-)*[a-z][a-z0-9]+$",
+    "scss/no-duplicate-mixins": true,
     "selector-attribute-brackets-space-inside": "never",
     "selector-attribute-operator-space-after": "never",
     "selector-attribute-operator-space-before": "never",
@@ -137,10 +141,17 @@
           "properties": [
             "position",
             "z-index",
+            "inset",
+            "inset-block",
             "top",
-            "right",
+            "inset-block-start",
             "bottom",
-            "left"
+            "inset-block-end",
+            "inset-inline",
+            "left",
+            "inset-inline-start",
+            "right",
+            "inset-inline-end"
           ]
         },
         {
@@ -156,11 +167,18 @@
             "overflow-y",
             "clip",
             "zoom",
+            "flex-flow",
             "flex-direction",
-            "flex-order",
-            "flex-pack",
-            "flex-align",
-            "flex"
+            "flex-wrap",
+            "justify-content",
+            "align-items",
+            "align-content",
+            "order",
+            "flex",
+            "flex-grow",
+            "flex-shrink",
+            "flex-basis",
+            "align-self"
           ]
         },
         {
@@ -175,26 +193,26 @@
             "min-height",
             "max-height",
             "margin",
-            "margin-top",
-            "margin-right",
-            "margin-bottom",
-            "margin-left",
             "margin-block",
-            "margin-inline",
+            "margin-top",
             "margin-block-start",
+            "margin-bottom",
             "margin-block-end",
+            "margin-inline",
+            "margin-right",
             "margin-inline-start",
+            "margin-left",
             "margin-inline-end",
             "padding",
-            "padding-top",
-            "padding-right",
-            "padding-bottom",
-            "padding-left",
             "padding-block",
-            "padding-inline",
+            "padding-top",
             "padding-block-start",
+            "padding-bottom",
             "padding-block-end",
+            "padding-inline",
+            "padding-right",
             "padding-inline-start",
+            "padding-left",
             "padding-inline-end"
           ]
         },
@@ -343,6 +361,12 @@
             "font-weight",
             "font-style",
             "font-variant",
+            "font-variant-ligatures",
+            "font-variant-numeric",
+            "font-variant-caps",
+            "font-variant-east-asian",
+            "font-variant-alternates",
+            "font-variant-position",
             "font-size-adjust",
             "font-stretch",
             "font-effect",

packages/fuselage/package.json

@@ -84,6 +84,7 @@
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "postcss-custom-properties": "^9.1.1",
+    "postcss-dir-pseudo-class": "^5.0.0",
     "postcss-loader": "^3.0.0",
     "postcss-logical": "^4.0.2",
     "prop-types": "^15.7.2",
@@ -94,7 +95,7 @@
     "style-loader": "^1.1.3",
     "stylelint": "^13.2.1",
     "stylelint-order": "^4.0.0",
-    "stylelint-scss": "^3.16.0",
+    "stylelint-scss": "^3.17.0",
     "webpack": "^4.42.0",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-cli": "^3.3.11"

packages/fuselage/src/components/Accordion/styles.scss

@@ -1,9 +1,13 @@
+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
+
 .rcx-accordion {
   display: flex;
-
-  border-bottom-width: $borders-width-x2;
-  border-bottom-color: $colors-n300;
   flex-flow: column nowrap;
+  border-block-end-color: colors.neutral(300);
+
+  border-block-end-width: lengths.border-width(2);
 }
 
 .rcx-accordion-item {
@@ -13,82 +17,78 @@
 
 .rcx-accordion-item__bar {
   display: flex;
+  flex-flow: row nowrap;
 
-  min-height: calc(2 * #{ $spaces-x32 } + #{ $sizes-x24 });
+  min-height: lengths.size(2 * 32 + 24);
   padding:
-    calc(#{ $spaces-x32 } - #{ $borders-width-x2 })
-    calc(#{ $spaces-x8 } - #{ $borders-width-x2 });
-  padding-block: calc(#{ $spaces-x32 } - #{ $borders-width-x2 });
-  padding-inline: calc(#{ $spaces-x8 } - #{ $borders-width-x2 });
+    (lengths.padding(32) - lengths.border-width(2))
+    (lengths.padding(8) - lengths.border-width(2));
 
-  text-align: left;
   text-align: start;
 
-  color: #{ $text-colors-default };
+  color: colors.foreground(default);
 
-  border-width: #{ $borders-width-x2 };
-  border-color: #{ $colors-n300 } transparent transparent;
-  flex-flow: row nowrap;
+  border-width: lengths.border-width(2);
+  border-color: colors.neutral(300) transparent transparent;
 
   &[tabindex] {
     @include clickable;
 
     &.hover,
     &:hover {
-      background-color: #{ $colors-n100 };
+      background-color: colors.neutral(100);
     }
 
     &.focus,
     &:focus {
-      border-color: #{ $colors-b500 };
-      @include use-focus-shadow($outer-color: $colors-b100);
+      border-color: colors.primary(500);
+      @include use-focus-shadow($outer-color: colors.primary(100));
     }
   }
 
   &--disabled {
     cursor: not-allowed;
 
-    color: #{ $text-colors-disabled };
-    background-color: #{ $colors-n100 };
+    color: colors.foreground(disabled);
+    background-color: colors.neutral(100);
   }
 }
 
 .rcx-accordion-item__title {
-  flex: 1 1 0;
+  flex: 1 1 lengths.size(none);
 
-  @include use-text-style(s2);
-  @include use-text-ellipsis;
+  @include typography.use-text-ellipsis;
   white-space: nowrap;
+
+  @include typography.use-font-scale(s2);
 }
 
 .rcx-accordion-item__toggle-switch {
   display: flex;
+  align-items: center;
   flex: 0 0 auto;
 
-  margin: 0 #{ $sizes-x24 };
-  margin-block: 0;
-  margin-inline: #{ $sizes-x24 };
-  align-items: center;
+  margin:
+    lengths.margin(none)
+    lengths.margin(24);
 }
 
 .rcx-accordion-item__panel {
   visibility: hidden;
 
   overflow: hidden;
 
-  height: 0;
-  padding: 0 #{ $spaces-x8 };
-  padding-block: 0;
-  padding-inline: #{ $spaces-x8 };
+  height: lengths.size(none);
+  padding:
+    lengths.padding(none)
+    lengths.padding(8);
 
   &--expanded {
     visibility: visible;
 
     height: auto;
     padding:
-      #{ $spaces-x32 }
-      #{ $spaces-x8 };
-    padding-block: #{ $spaces-x32 };
-    padding-inline: #{ $spaces-x8 };
+      lengths.padding(32)
+      lengths.padding(8);
   }
 }

packages/fuselage/src/components/Avatar/styles.scss

@@ -1,4 +1,7 @@
-$avatar-stack-background-color: theme('avatar-background-color', $colors-white);
+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+
+$avatar-stack-background-color: theme('avatar-background-color', colors.surface());
 
 .rcx-avatar {
   display: inline-flex;
@@ -8,7 +11,7 @@ $avatar-stack-background-color: theme('avatar-background-color', $colors-white);
 
     flex: 1 1 auto;
 
-    border-radius: #{ $borders-width-x2 };
+    border-radius: lengths.border-width(2);
 
     &--rounded {
       border-radius: 100%;
@@ -18,15 +21,17 @@ $avatar-stack-background-color: theme('avatar-background-color', $colors-white);
   &-stack {
     display: flex;
     flex-direction: row-reverse;
+    justify-content: center;
 
     color: #{ $avatar-stack-background-color };
-    justify-content: center;
 
     & > .rcx-avatar {
-      margin: auto calc(#{ $borders-width-x2 } * -1);
+      margin:
+        auto
+        lengths.margin(-2);
 
       & > .rcx-avatar__element {
-        border: #{ $borders-width-x2 } solid currentColor;
+        border: lengths.border-width(2) solid currentColor;
       }
     }
   }

packages/fuselage/src/components/Box/PlainText.stories.mdx

@@ -10,10 +10,6 @@ import { Box } from '../..';
 <Preview>
   <Story name='Text styles'>
     <>
-      <Box textStyle='headline'>Headline</Box>
-      <Box textStyle='subtitle'>Subtitle</Box>
-      <Box textStyle='paragraph'>Paragraph</Box>
-      <Box textStyle='caption'>Caption</Box>
       <Box textStyle='h1'>H1</Box>
       <Box textStyle='s1'>S1</Box>
       <Box textStyle='s2'>S2</Box>
@@ -22,7 +18,6 @@ import { Box } from '../..';
       <Box textStyle='c1'>C1</Box>
       <Box textStyle='c2'>C2</Box>
       <Box textStyle='micro'>Micro</Box>
-      <Box textStyle='mono'>Mono</Box>
     </>
   </Story>
 </Preview>
@@ -35,7 +30,6 @@ import { Box } from '../..';
       <Box textStyle='p1' textColor='default'>Default</Box>
       <Box textStyle='p1' textColor='info'>Info</Box>
       <Box textStyle='p1' textColor='hint'>Hint</Box>
-      <Box textStyle='p1' textColor='disabled-label'>Disabled label</Box>
       <Box textStyle='p1' textColor='disabled'>Disabled</Box>
       <Box textStyle='p1' textColor='alternative'>Alternative</Box>
       <Box textStyle='p1' textColor='primary'>Primary</Box>

packages/fuselage/src/components/Box/index.js

@@ -41,12 +41,11 @@ Box.propTypes = {
   richText: PropTypes.oneOf(['inline', 'block']),
   style: PropTypes.object,
   textColor: PropTypes.oneOf([
-    'default', 'info', 'hint', 'disabled-label', 'disabled', 'alternative',
+    'default', 'info', 'hint', 'disabled', 'alternative',
     'primary', 'success', 'danger', 'warning',
   ]),
   textStyle: PropTypes.oneOf([
-    'h1', 's1', 's2', 'p1', 'p2', 'c1', 'c2', 'micro', 'mono',
-    'headline', 'subtitle', 'paragraph', 'caption',
+    'h1', 's1', 's2', 'p1', 'p2', 'c1', 'c2', 'micro',
   ]),
 
   // Spaces