@utrecht/design-tokens 2.2.0 → 2.4.0

package/src/component/utrecht/heading-1.tokens.json

@@ -2,10 +2,10 @@
   "utrecht": {
     "heading-1": {
       "color": {},
-      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{utrecht.typography.scale.4xl.font-size}" },
-      "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
-      "line-height": { "value": "{utrecht.typography.line-height.sm}" },
+      "font-family": { "value": "{nl.heading.level-1.font-family}" },
+      "font-size": { "value": "{nl.heading.level-1.font-size}" },
+      "font-weight": { "value": "{nl.heading.level-1.font-weight}" },
+      "line-height": { "value": "{nl.heading.level-1.line-height}" },
       "margin-block-end": { "value": "0.67rem" },
       "margin-block-start": { "value": "0.67rem" },
       "text-transform": {}

package/src/component/utrecht/heading-2.tokens.json

@@ -2,10 +2,10 @@
   "utrecht": {
     "heading-2": {
       "color": {},
-      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
-      "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
-      "line-height": { "value": "{utrecht.typography.line-height.sm}" },
+      "font-family": { "value": "{nl.heading.level-2.font-family}" },
+      "font-size": { "value": "{nl.heading.level-2.font-size}" },
+      "font-weight": { "value": "{nl.heading.level-2.font-weight}" },
+      "line-height": { "value": "{nl.heading.level-2.line-height}" },
       "margin-block-end": { "value": "0.3rem" },
       "margin-block-start": { "value": "1.5rem" },
       "text-transform": {}

package/src/component/utrecht/heading-3.tokens.json

@@ -2,10 +2,10 @@
   "utrecht": {
     "heading-3": {
       "color": {},
-      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
-      "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
-      "line-height": { "value": "{utrecht.typography.line-height.sm}" },
+      "font-family": { "value": "{nl.heading.level-3.font-family}" },
+      "font-size": { "value": "{nl.heading.level-3.font-size}" },
+      "font-weight": { "value": "{nl.heading.level-3.font-weight}" },
+      "line-height": { "value": "{nl.heading.level-3.line-height}" },
       "margin-block-end": { "value": "0.2rem" },
       "margin-block-start": { "value": "1rem" },
       "text-transform": {}

package/src/component/utrecht/heading-4.tokens.json

@@ -2,10 +2,10 @@
   "utrecht": {
     "heading-4": {
       "color": {},
-      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{utrecht.typography.scale.lg.font-size}" },
-      "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
-      "line-height": { "value": "{utrecht.typography.line-height.md}" },
+      "font-family": { "value": "{nl.heading.level-4.font-family}" },
+      "font-size": { "value": "{nl.heading.level-4.font-size}" },
+      "font-weight": { "value": "{nl.heading.level-4.font-weight}" },
+      "line-height": { "value": "{nl.heading.level-4.line-height}" },
       "margin-block-end": { "value": "0.3rem" },
       "margin-block-start": { "value": "1.2rem" },
       "text-transform": {}

package/src/component/utrecht/heading-5.tokens.json

@@ -2,10 +2,10 @@
   "utrecht": {
     "heading-5": {
       "color": {},
-      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
-      "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
-      "line-height": { "value": "{utrecht.typography.line-height.md}" },
+      "font-family": { "value": "{nl.heading.level-5.font-family}" },
+      "font-size": { "value": "{nl.heading.level-5.font-size}" },
+      "font-weight": { "value": "{nl.heading.level-5.font-weight}" },
+      "line-height": { "value": "{nl.heading.level-5.line-height}" },
       "margin-block-end": { "value": "0.2rem" },
       "margin-block-start": { "value": "1rem" }
     }

package/src/component/utrecht/heading-6.tokens.json

@@ -2,10 +2,10 @@
   "utrecht": {
     "heading-6": {
       "color": {},
-      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
-      "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
-      "line-height": { "value": "{utrecht.typography.line-height.md}" },
+      "font-family": { "value": "{nl.heading.level-6.font-family}" },
+      "font-size": { "value": "{nl.heading.level-6.font-size}" },
+      "font-weight": { "value": "{nl.heading.level-6.font-weight}" },
+      "line-height": { "value": "{nl.heading.level-6.line-height}" },
       "margin-block-end": {},
       "margin-block-start": {}
     }

package/src/component/utrecht/mark.tokens.json

@@ -1,8 +1,8 @@
 {
   "utrecht": {
     "mark": {
-      "background-color": { "value": "{utrecht.color.yellow.60}" },
-      "color": { "value": "{utrecht.color.black}" }
+      "background-color": { "value": "{nl.mark.background-color}" },
+      "color": { "value": "{nl.mark.color}" }
     }
   }
 }

package/src/component/utrecht/number-badge.tokens.json

@@ -2,21 +2,21 @@
   "utrecht": {
     "number-badge": {
       "background-color": {
-        "value": "{utrecht.color.red.40}"
+        "value": "{nl.number-badge.background-color}"
       },
       "border-radius": {
-        "value": "{utrecht.number-badge.font-size}"
+        "value": "{nl.number-badge.border-radius}"
       },
       "color": {
-        "value": "{utrecht.color.white}"
+        "value": "{nl.number-badge.color}"
       },
-      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
+      "font-size": { "value": "{nl.number-badge.font-size}" },
       "font-weight": {},
       "padding-block": {
-        "value": "1ex"
+        "value": "{nl.number-badge.padding-block}"
       },
       "padding-inline": {
-        "value": "1ex"
+        "value": "{nl.number-badge.padding-inline}"
       }
     }
   }

package/src/component/utrecht/paragraph.tokens.json

@@ -2,17 +2,17 @@
   "utrecht": {
     "paragraph": {
       "color": {},
-      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
-      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
-      "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
-      "line-height": { "value": "{utrecht.typography.line-height.md}" },
+      "font-family": { "value": "{nl.paragraph.font-family}" },
+      "font-size": { "value": "{nl.paragraph.font-size}" },
+      "font-weight": { "value": "{nl.paragraph.font-weight}" },
+      "line-height": { "value": "{nl.paragraph.line-height}" },
       "margin-block-start": { "value": "{utrecht.space.block.md}" },
       "margin-block-end": { "value": "0" },
       "lead": {
-        "color": { "value": "{utrecht.document.color}" },
-        "font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
-        "font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
-        "line-height": { "value": "{utrecht.typography.line-height.md}" }
+        "color": {},
+        "font-size": { "value": "{nl.paragraph.lead.font-size}" },
+        "font-weight": { "value": "{nl.paragraph.lead.font-weight}" },
+        "line-height": { "value": "{nl.paragraph.lead.line-height}" }
       },
       "small": {
         "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" }

package/src/component/utrecht/skip-link.tokens.json

@@ -1,19 +1,19 @@
 {
   "utrecht": {
     "skip-link": {
-      "background-color": { "value": "{utrecht.topnav.list.background-color}" },
-      "color": { "value": "{utrecht.topnav.link.color}" },
-      "padding-block-end": { "value": "{utrecht.button.padding-block-end}" },
-      "padding-block-start": { "value": "{utrecht.button.padding-block-start}" },
-      "padding-inline-end": { "value": "{utrecht.button.padding-inline-end}" },
-      "padding-inline-start": { "value": "{utrecht.button.padding-inline-start}" },
-      "text-decoration": { "value": "{utrecht.link.text-decoration}" },
+      "background-color": { "value": "{nl.skip-link.background-color}" },
+      "color": { "value": "{nl.skip-link.color}" },
+      "padding-block-end": { "value": "{nl.skip-link.padding-block}" },
+      "padding-block-start": { "value": "{nl.skip-link.padding-block}" },
+      "padding-inline-end": { "value": "{nl.skip-link.padding-inline}" },
+      "padding-inline-start": { "value": "{nl.skip-link.padding-inline}" },
+      "text-decoration": { "value": "{nl.skip-link.text-decoration}" },
       "focus": {
-        "color": { "value": "{utrecht.topnav.link.focus.color}" },
-        "background-color": { "value": "{utrecht.topnav.link.focus.background-color}" }
+        "color": { "value": "{nl.skip-link.focus-visible.color}" },
+        "background-color": { "value": "{nl.skip-link.focus-visible.background-color}" }
       },
       "focus-visible": {
-        "text-decoration": { "value": "{utrecht.link.focus-visible.text-decoration}" }
+        "text-decoration": { "value": "{nl.skip-link.focus-visible.text-decoration}" }
       }
     }
   }

package/src/css-property-formatter.mjs

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 const stringSort = (a, b) => (a === b ? 0 : a > b ? 1 : -1);

package/src/json-list-formatter.js

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
 const stringSort = (a, b) => (a === b ? 0 : a > b ? 1 : -1);

package/style-dictionary-build.mjs

@@ -20,7 +20,9 @@ const build = async () => {
     ...createStyleDictionaryConfig({
       themeName: `${themeConfig.prefix}-theme`,
     }),
-    log: 'warn',
+    log: {
+      verbosity: 'verbose',
+    },
     preprocessors: ['tokens-studio', 'dtcg-delegate'],
     source: [
       '../../components/**/tokens.json',

package/style-dictionary-config.mjs

@@ -10,6 +10,25 @@ export const createStyleDictionaryConfig = ({ themeName, source = ['src/**/*.tok
       'json/list': function ({ dictionary }) {
         return JSON.stringify(dictionary.allTokens.sort(sortByName), null, '  ');
       },
+      'javascript/es6-list': function ({ dictionary }) {
+        return `export default ${JSON.stringify(dictionary.allTokens.sort(sortByName), null, '  ')};\n`;
+      },
+      'typescript/list-declarations': function ({ dictionary }) {
+        return `
+declare interface DesignToken {
+  value?: any;
+  type?: string;
+  comment?: string;
+  name?: string;
+  themeable?: boolean;
+  attributes?: Record<string, unknown>;
+  [key: string]: any;
+}
+
+export default tokens;
+
+declare const tokens: DesignToken[];`;
+      },
     },
     transforms: {
       'fontSize/pxToRem': {
@@ -75,6 +94,10 @@ export const createStyleDictionaryConfig = ({ themeName, source = ['src/**/*.tok
           destination: 'list.json',
           format: 'json/list',
         },
+        {
+          destination: 'list.mjs',
+          format: 'javascript/es6-list',
+        },
         {
           destination: 'variables.json',
           format: 'json/flat',
@@ -177,6 +200,10 @@ export const createStyleDictionaryConfig = ({ themeName, source = ['src/**/*.tok
           format: 'typescript/module-declarations',
           destination: 'tokens.d.ts',
         },
+        {
+          format: 'typescript/list-declarations',
+          destination: 'list.d.ts',
+        },
       ],
     },
     'deprecated-js': {

package/src/component/utrecht/badge-data.tokens.json

@@ -1,8 +0,0 @@
-{
-  "utrecht": {
-    "badge-data": {
-      "letter-spacing": {},
-      "text-transform": {}
-    }
-  }
-}