refactor: emit token ref values for system values (#1808)

- instead of looking up, then emitting, the literal token value, use a variable reference instead across the board
- do this for all possible variables (e.g., ones that look up values in different tiers and not the same file, don't cause bad outputs, etc.)
- for now, skip any hard-coded references to other variables as style-dictionary has some bugs
- verify that the builds produce an identical outcome (no snapshot changes)

.storybook/data/tokens.json

@@ -513,10 +513,10 @@
   "eds-theme-typography-tab-sm-active": "var(--eds-typography-preset-009)",
   "eds-theme-typography-tag": "var(--eds-typography-preset-009)",
   "eds-theme-box-button-border-radius": "4px",
-  "eds-theme-box-focus-ring-outline-width": "var(--eds-outline-width-sm)",
-  "eds-theme-box-focus-ring-outline-offset": "var(--eds-outline-width-md)",
+  "eds-theme-box-focus-ring-outline-width": "1px",
+  "eds-theme-box-focus-ring-outline-offset": "2px",
   "eds-theme-form-border-width": "1px",
   "eds-theme-form-border-radius": "4px",
-  "eds-theme-size-slider-track-height": "var(--eds-size-1)",
-  "eds-theme-size-slider-thumb": "var(--eds-size-3)"
+  "eds-theme-size-slider-track-height": "var(--eds-size-base-unit)",
+  "eds-theme-size-slider-thumb": "calc(var(--eds-size-base-unit) * 3)"
 }

.stylelintignore

@@ -0,0 +1,2 @@
+# Ignore this file, as it uses token references instead of hard-coded values
+src/tokens-dist/css/variables.css

bin/eds-apply-theme.js

@@ -47,6 +47,7 @@
             destination: 'app-theme.css',
             options: {
               fileHeader: 'cssOverrideHeader',
+              outputReferences: true,
             },
             filter: function (token) {
               // don't allow theming on legacy tokens

package.json

@@ -51,7 +51,7 @@
     "create-component": "plop",
     "lint": "yarn run lint:styles && yarn run lint:scripts",
     "lint:fix": "yarn run lint:styles:fix && yarn run lint:scripts:fix",
-    "lint:styles": "stylelint --ignore-path .gitignore src/**/*.css .storybook/**/*.css",
+    "lint:styles": "stylelint src/**/*.css .storybook/**/*.css",
     "lint:styles:fix": "yarn run lint:styles --fix",
     "lint:scripts": "eslint --ignore-path .gitignore --ext=js,jsx,ts,tsx .",
     "lint:scripts:fix": "yarn run lint:scripts --fix",
@@ -186,8 +186,8 @@
       "eslint --fix"
     ],
     "*.css": [
-      "stylelint --fix"
+      "stylelint --fix --allow-empty-input"
     ]
   },
   "packageManager": "[email protected]"
-}
+}

src/design-tokens/tier-1-definitions/layout.json

@@ -3,15 +3,15 @@
     "l": {
       "max-width": {
         "value": "71.25rem",
-        "comment": "Layout tokens are deprecated and will be removed in a future release"
+        "comment": "@deprecated Layout tokens are deprecated and will be removed in a future release"
       },
       "sidebar-width": {
         "value": "13.5rem",
-        "comment": "Layout tokens are deprecated and will be removed in a future release"
+        "comment": "@deprecated Layout tokens are deprecated and will be removed in a future release"
       },
       "linelength-width": {
         "value": "36rem",
-        "comment": "Layout tokens are deprecated and will be removed in a future release"
+        "comment": "@deprecated Layout tokens are deprecated and will be removed in a future release"
       }
     }
   }

src/design-tokens/tier-1-definitions/typography.json

@@ -77,7 +77,7 @@
           },
           "mobile": {
             "value": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)",
-            "comment": "This is deprecated and missing from figma"
+            "comment": "@deprecated This is deprecated and missing from figma"
           }
         },
         "002": {
@@ -92,7 +92,7 @@
           },
           "mobile": {
             "value": "var(--eds-font-weight-bold) var(--eds-font-size-28)/1.2857 var(--eds-font-family-primary)",
-            "comment": "This is deprecated and missing from figma"
+            "comment": "@deprecated This is deprecated and missing from figma"
           }
         },
         "003": {
@@ -107,7 +107,7 @@
           },
           "mobile": {
             "value": "var(--eds-font-weight-bold) var(--eds-font-size-20)/1.4 var(--eds-font-family-primary)",
-            "comment": "This is deprecated and missing from figma"
+            "comment": "@deprecated This is deprecated and missing from figma"
           }
         },
         "004": {

src/design-tokens/tier-2-usage/typography.json

@@ -181,7 +181,7 @@
         "overline": {
           "@": {
             "value": "var(--eds-typography-preset-011)",
-            "comment": "This is deprecated and missing from figma."
+            "comment": "@deprecated This is deprecated and missing from figma."
           },
           "md": {
             "value": "var(--eds-typography-preset-011)"

src/design-tokens/tier-3-component/buttons.json

@@ -12,11 +12,11 @@
           "label": {
             "@": {
               "value": "var(--eds-typography-preset-006)",
-              "comment": "This is deprecated and missing from figma"
+              "comment": "@deprecated This is deprecated and missing from figma"
             },
             "sm": {
               "value": "var(--eds-typography-preset-008-bold)",
-              "comment": "This is deprecated and missing from figma"
+              "comment": "@deprecated This is deprecated and missing from figma"
             }
           }
         }

src/design-tokens/tier-3-component/focus-ring.json

@@ -15,10 +15,10 @@
         "focus-ring": {
           "outline": {
             "width": {
-              "value": "var(--eds-outline-width-sm)"
+              "value": "{eds.outline.width.sm}"
             },
             "offset": {
-              "value": "var(--eds-outline-width-md)"
+              "value": "{eds.outline.width.md}"
             }
           }
         }

src/design-tokens/tier-3-component/slider.json

@@ -5,11 +5,11 @@
         "slider": {
           "track": {
             "height": {
-              "value": "var(--eds-size-1)"
+              "value": "{eds.size.1}"
             }
           },
           "thumb": {
-            "value": "var(--eds-size-3)"
+            "value": "{eds.size.3}"
           }
         }
       }