Basic theme setup approach

Amsterdam · Feb 3, 2024 · 3468176 · 3468176
1 parent 2bba111
commit 3468176
Show file tree

Hide file tree

Showing 29 changed files with 277 additions and 215 deletions.
diff --git a/proprietary/tokens/build.js b/proprietary/tokens/build.js
@@ -0,0 +1,59 @@
+// TODO: build all currently built files using this setup
+
+const StyleDictionary = require('style-dictionary')
+
+const modes = ['compact']
+
+console.log(`Building default mode...`)
+StyleDictionary.extend({
+  source: [
+    // exclude non-default modes from source
+    `./src/**/!(*.${modes.join(`|*.`)}).tokens.json`,
+  ],
+
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `root.css`,
+          format: `css/variables`,
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+
+    json: {
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: 'index.tokens.json',
+          format: 'json/nested',
+        },
+      ],
+    },
+  },
+}).buildAllPlatforms()
+
+console.log(`\n\n Building compact mode...`)
+StyleDictionary.extend({
+  source: [`./src/**/*.compact.tokens.json`],
+  platforms: {
+    css: {
+      transformGroup: `css`,
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `compact.css`,
+          format: `css/variables`,
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+  },
+}).buildAllPlatforms()
diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json
@@ -19,7 +19,7 @@
   "scripts": {
     "clean": "rimraf dist/",
     "build": "npm-run-all build:**",
-    "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.json",
+    "build:style-dictionary": "node build.js",
     "watch": "npm-run-all watch:**",
     "watch:style-dictionary": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
   },

diff --git a/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json
@@ -0,0 +1,36 @@
+{
+  "amsterdam": {
+    "typography": {
+      "text-level": {
+        "0": {
+          "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
+          "line-height": { "value": "1.15" }
+        },
+        "1": {
+          "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" },
+          "line-height": { "value": "1.2" }
+        },
+        "2": {
+          "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" },
+          "line-height": { "value": "1.25" }
+        },
+        "3": {
+          "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" },
+          "line-height": { "value": "1.3" }
+        },
+        "4": {
+          "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
+          "line-height": { "value": "1.5" }
+        },
+        "5": {
+          "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" },
+          "line-height": { "value": "1.6" }
+        },
+        "6": {
+          "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" },
+          "line-height": { "value": "1.6" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
@@ -6,68 +6,34 @@
         "normal": { "value": 400 },
         "bold": { "value": 800 }
       },
-      "spacious": {
-        "text-level": {
-          "0": {
-            "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
-            "line-height": { "value": "1.15" }
-          },
-          "1": {
-            "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
-            "line-height": { "value": "1.2" }
-          },
-          "2": {
-            "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
-            "line-height": { "value": "1.25" }
-          },
-          "3": {
-            "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
-            "line-height": { "value": "1.3" }
-          },
-          "4": {
-            "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
-            "line-height": { "value": "1.5" }
-          },
-          "5": {
-            "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
-            "line-height": { "value": "1.6" }
-          },
-          "6": {
-            "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
-            "line-height": { "value": "1.6" }
-          }
-        }
-      },
-      "compact": {
-        "text-level": {
-          "0": {
-            "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
-            "line-height": { "value": "1.15" }
-          },
-          "1": {
-            "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" },
-            "line-height": { "value": "1.2" }
-          },
-          "2": {
-            "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" },
-            "line-height": { "value": "1.25" }
-          },
-          "3": {
-            "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" },
-            "line-height": { "value": "1.3" }
-          },
-          "4": {
-            "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
-            "line-height": { "value": "1.5" }
-          },
-          "5": {
-            "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" },
-            "line-height": { "value": "1.6" }
-          },
-          "6": {
-            "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" },
-            "line-height": { "value": "1.6" }
-          }
+      "text-level": {
+        "0": {
+          "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
+          "line-height": { "value": "1.15" }
+        },
+        "1": {
+          "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
+          "line-height": { "value": "1.2" }
+        },
+        "2": {
+          "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
+          "line-height": { "value": "1.25" }
+        },
+        "3": {
+          "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
+          "line-height": { "value": "1.3" }
+        },
+        "4": {
+          "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
+          "line-height": { "value": "1.5" }
+        },
+        "5": {
+          "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
+          "line-height": { "value": "1.6" }
+        },
+        "6": {
+          "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
+          "line-height": { "value": "1.6" }
         }
       }
     }

diff --git a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
@@ -12,12 +12,12 @@
           "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}" }
         },
         "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
         },
         "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
         }
       }
     }

diff --git a/proprietary/tokens/src/components/amsterdam/alert.tokens.json b/proprietary/tokens/src/components/amsterdam/alert.tokens.json
@@ -13,12 +13,12 @@
         "font-family": { "value": "{amsterdam.typography.font-family}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
         "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
         },
         "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
         }
       },
       "error": {

diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json
@@ -5,12 +5,12 @@
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "padding-inline": { "value": "0.5rem" },
       "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
       },
       "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
       },
       "blue": {
         "background-color": { "value": "{amsterdam.color.blue}" },

diff --git a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
@@ -6,12 +6,12 @@
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
       "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }
       },
       "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }
       }
     }
   }

diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
@@ -20,12 +20,12 @@
         }
       },
       "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
       },
       "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
       }
     }
   }

diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
@@ -2,12 +2,12 @@
   "amsterdam": {
     "button": {
       "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
       },
       "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
       },
       "secondary": {
         "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },

diff --git a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
@@ -63,12 +63,12 @@
       },
       "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
       "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
       },
       "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
       }
     }
   }

diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
@@ -9,12 +9,12 @@
         "font-family": { "value": "{amsterdam.typography.font-family}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
         "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
         },
         "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
         }
       },
       "backdrop": {

diff --git a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
@@ -5,12 +5,12 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
       },
       "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
       }
     }
   }