@utrecht/design-tokens 2.0.0 → 2.1.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.1.1",
   "author": "Community for NL Design System",
   "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "SEE LICENSE IN ./LICENSE.md",
@@ -17,7 +17,7 @@
     "directory": "proprietary/design-tokens"
   },
   "devDependencies": {
-    "@divriots/style-dictionary-to-figma": "0.4.0",
+    "@tokens-studio/sd-transforms": "1.2.3",
     "chokidar-cli": "3.0.0",
     "glob": "10.4.2",
     "lodash.isplainobject": "4.0.6",
@@ -26,15 +26,16 @@
     "regex-trie": "1.0.4",
     "rimraf": "5.0.7",
     "sass": "1.69.5",
-    "style-dictionary": "4.0.0-prerelease.8"
+    "style-dictionary": "4.0.1"
   },
   "scripts": {
     "build": "pnpm run build:style-dictionary && pnpm run build:scss",
     "build:scss": "sass --no-source-map src/:dist/",
     "build:style-dictionary": "pnpm run '/^build:style-dictionary:.*/'",
-    "build:style-dictionary:default": "style-dictionary build --config src/style-dictionary-config.js",
-    "build:style-dictionary:dark": "style-dictionary build --config src/style-dictionary-config-dark.js",
+    "build:style-dictionary:default": "node ./style-dictionary-build.mjs",
+    "build:style-dictionary:dark": "node ./style-dictionary-build-dark.mjs",
     "build:stylelint": "node ./build-stylelint.mjs",
+    "lint-build": "stylelint dist/*.css",
     "clean": "rimraf dist/",
     "watch": "pnpm run --parallel '/^watch:.*/'",
     "watch:style-dictionary": "chokidar --follow-symlinks --initial --command 'pnpm run build' 'src/**/*.tokens.json'"

package/src/background-image-icon.scss

@@ -7,7 +7,6 @@
 .utrecht-theme,
 .utrecht-theme ::backdrop {
   --utrecht-menulijst-item-background-image: url("./pijltje.svg");
-  --utrecht-link-icon-left-background-image: url("./pijltje.svg");
   --utrecht-search-bar-input-background-image: url("./icoon-zoek-rood.svg");
   --utrecht-select-background-image: url("./arrow-dropdown.svg");
   --utrecht-link-list-marker-background-image: url("./pijltje-zwart.svg");

package/src/brand/utrecht/typography.tokens.json

@@ -5,15 +5,15 @@
         "font-family": { "value": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif" }
       },
       "scale": {
-        "2xs": { "font-size": { "value": "0.5rem", "comment": "8px" } },
-        "xs": { "font-size": { "value": "0.75rem", "comment": "12px" } },
-        "sm": { "font-size": { "value": "0.875rem", "comment": "14px" } },
-        "md": { "font-size": { "value": "1rem", "comment": "16px" } },
-        "lg": { "font-size": { "value": "1.125rem", "comment": "18px" } },
-        "xl": { "font-size": { "value": "1.25rem", "comment": "20px" } },
-        "2xl": { "font-size": { "value": "1.375rem", "comment": "22px" } },
-        "3xl": { "font-size": { "value": "1.5rem", "comment": "24px" } },
-        "4xl": { "font-size": { "value": "2rem", "comment": "32px" } }
+        "2xs": { "font-size": { "value": "8px", "comment": "8px" } },
+        "xs": { "font-size": { "value": "12px", "comment": "12px" } },
+        "sm": { "font-size": { "value": "14px", "comment": "14px" } },
+        "md": { "font-size": { "value": "16px", "comment": "16px" } },
+        "lg": { "font-size": { "value": "18px", "comment": "18px" } },
+        "xl": { "font-size": { "value": "20px", "comment": "20px" } },
+        "2xl": { "font-size": { "value": "22px", "comment": "22px" } },
+        "3xl": { "font-size": { "value": "24px", "comment": "24px" } },
+        "4xl": { "font-size": { "value": "32px", "comment": "32px" } }
       },
       "weight-scale": {
         "bold": { "font-weight": { "value": "700" } },

package/src/component/of/progress-indicator.tokens.json

@@ -3,7 +3,7 @@
     "progress-indicator": {
       "background-color": { "value": "{utrecht.document.background-color}" },
       "mobile": {
-        "box-shadow": { "value": "0px 0px 2px 0px rgba(0, 0, 0, 0.2)" }
+        "box-shadow": { "value": "0px 0px 2px 0px rgba(0 0 0 / 20%)" }
       }
     }
   }

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

@@ -1,6 +1,7 @@
 {
   "utrecht": {
     "accordion": {
+      "row-gap": { "value": "{utrecht.space.block.xs}" },
       "section": {
         "margin-block-start": { "value": "{utrecht.space.block.2xs}" },
         "margin-block-end": {}

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

@@ -12,7 +12,7 @@
       },
       "fade-in": {
         "animation-duration": {
-          "value": "0.4s"
+          "value": "400ms"
         }
       },
       "reduced-transparency": {

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

@@ -12,13 +12,13 @@
       "margin-block-start": { "value": "1.6em" },
       "margin-block-end": { "value": "1.6em" },
       "font-size": {},
-      "attribution": {
+      "caption": {
         "color": {},
-        "font-size": { "value": "0.75rem" }
+        "font-size": { "value": "{utrecht.typography.scale.xs.font-size}" }
       },
       "content": {
         "color": { "value": "{utrecht.color.red.40}" },
-        "font-size": { "value": "1.125rem" }
+        "font-size": { "value": "{utrecht.typography.scale.lg.font-size}" }
       }
     }
   }

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

@@ -6,6 +6,7 @@
       "border-radius": { "value": "0" },
       "border-width": { "value": "1px" },
       "color": { "value": "{utrecht.color.grey.40}" },
+      "column-gap": { "value": "{utrecht.space.text.xs}" },
       "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
       "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
       "padding-inline-start": { "value": "{utrecht.space.inline.md}" },
@@ -16,9 +17,6 @@
       "margin-inline-end": { "value": "0" },
       "margin-block-start": { "value": "{utrecht.space.row.xs}" },
       "margin-block-end": { "value": "{utrecht.space.row.xs}" },
-      "icon": {
-        "gap": { "value": "{utrecht.space.text.xs}" }
-      },
       "active": {
         "background-color": { "value": "{utrecht.color.grey.40}" },
         "color": { "value": "{utrecht.color.white}" }

package/src/component/utrecht/code-block.tokens.json

@@ -4,8 +4,8 @@
       "background-color": { "value": "{utrecht.color.grey.95}" },
       "color": { "value": "{utrecht.color.black}" },
       "font-family": {},
-      "font-size": { "value": "16px" },
-      "line-height": { "value": "24px" },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
+      "line-height": { "value": "{utrecht.typography.line-height.md}" },
       "margin-block-end": { "value": "{utrecht.space.block.lg}" },
       "margin-block-start": { "value": "{utrecht.space.block.lg}" },
       "margin-inline-end": {},

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

@@ -5,8 +5,8 @@
       "margin-block-start": {},
       "caption": {
         "color": { "value": "#727272" },
-        "font-size": { "value": "14px" },
-        "line-height": { "value": "20px" }
+        "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
+        "line-height": { "value": "{utrecht.typography.line-height.md}" }
       }
     }
   }

package/src/component/utrecht/form-fieldset.tokens.json

@@ -10,9 +10,9 @@
       "legend": {
         "color": {},
         "font-family": {},
-        "font-size": { "value": "1rem" },
+        "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
         "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
-        "line-height": { "value": "1.4" },
+        "line-height": { "value": "{utrecht.typography.line-height.md}" },
         "margin-block-end": { "value": "{utrecht.space.block.sm}" },
         "margin-block-start": { "value": "{utrecht.space.block.xl}" },
         "disabled": {

package/src/component/utrecht/form-toggle.tokens.json

@@ -1,7 +1,7 @@
 {
   "utrecht": {
     "form-toggle": {
-      "accent-color": { "value": "hsla(0, 0%, 48%, 1)" },
+      "accent-color": { "value": "hsla(0 0% 48% / 100%)" },
       "background-color": { "value": "{utrecht.color.white}" },
       "border-color": { "value": "transparent" },
       "border-radius": { "value": "10em" },

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

@@ -12,7 +12,9 @@
         "color": { "value": "{utrecht.link.color}" }
       },
       "focus": {
-        "color": { "value": "{utrecht.color.blue.40}" },
+        "color": { "value": "{utrecht.color.blue.40}" }
+      },
+      "focus-visible": {
         "text-decoration": { "value": "none" }
       },
       "hover": {

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

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

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

@@ -1,7 +1,7 @@
 {
   "utrecht": {
     "pagination": {
-      "font-size": { "value": "14px" },
+      "font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
       "font-family": {},
       "margin-block-start": { "value": "0" },
       "margin-block-end": { "value": "1em" },

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

@@ -10,8 +10,10 @@
       "text-decoration": { "value": "{utrecht.link.text-decoration}" },
       "focus": {
         "color": { "value": "{utrecht.topnav.link.focus.color}" },
-        "background-color": { "value": "{utrecht.topnav.link.focus.background-color}" },
-        "text-decoration": { "value": "{utrecht.link.focus.text-decoration}" }
+        "background-color": { "value": "{utrecht.topnav.link.focus.background-color}" }
+      },
+      "focus-visible": {
+        "text-decoration": { "value": "{utrecht.link.focus-visible.text-decoration}" }
       }
     }
   }

package/src/component/utrecht/spotlight-section.tokens.json

@@ -18,6 +18,14 @@
       "warning": {
         "background-color": { "value": "{utrecht.color.yellow.80}" },
         "color": {}
+      },
+      "error": {
+        "background-color": { "value": "{utrecht.color.red.95}" },
+        "color": {}
+      },
+      "ok": {
+        "background-color": { "value": "{utrecht.color.green.90}" },
+        "color": {}
       }
     }
   }

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

@@ -4,7 +4,7 @@
       "margin-block-start": { "value": "{utrecht.space.block.md}" },
       "margin-block-end": { "value": "0" },
       "caption": {
-        "font-size": { "value": "1.125em" },
+        "font-size": { "value": "{utrecht.typography.scale.lg.font-size}" },
         "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
         "font-family": {},
         "color": {},

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

@@ -2,6 +2,7 @@
   "utrecht": {
     "textarea": {
       "border-bottom-width": { "value": "3px" },
+      "border-block-end-width": { "value": "3px" },
       "line-height": { "value": "{utrecht.typography.line-height.md}" },
       "disabled": {
         "border-color": {},

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

@@ -3,7 +3,7 @@
     "toptask-link": {
       "background-color": { "value": "{utrecht.button.primary-action.background-color}" },
       "color": { "value": "{utrecht.button.primary-action.color}" },
-      "font-size": { "value": "1rem" },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
       "line-height": { "value": "1.2" },
       "min-block-size": { "value": "8.25rem" },
       "min-inline-size": { "value": "15rem" },

package/src/css-property-formatter.mjs

@@ -0,0 +1,46 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+const stringSort = (a, b) => (a === b ? 0 : a > b ? 1 : -1);
+
+export const propertyFormatter = function ({ dictionary }) {
+  let { allTokens } = dictionary;
+
+  // https://drafts.css-houdini.org/css-properties-values-api/#the-css-property-rule-interface
+  const css = allTokens
+    .sort((tokenA, tokenB) => stringSort(tokenA.name, tokenB.name))
+    .filter(
+      (token) =>
+        token['$extensions'] &&
+        token['$extensions']['nl.nldesignsystem.css.property'] &&
+        token['$extensions']['nl.nldesignsystem.css.property'].syntax !== '*' &&
+        typeof token['$extensions']['nl.nldesignsystem.css.property'].inherits === 'boolean',
+    )
+    .map((token) => {
+      let str = `@property --${token.name} { `;
+      const cssProperty = token['$extensions']['nl.nldesignsystem.css.property'];
+
+      const syntax = Array.isArray(cssProperty.syntax) ? cssProperty.syntax.join(' | ') : cssProperty.syntax;
+
+      str += `syntax: '${syntax}'; `;
+
+      str += `inherits: ${cssProperty.inherits}; `;
+
+      if (cssProperty.initialValue) {
+        str += `initial-value: ${cssProperty.initialValue}; `;
+      }
+
+      str += `}`;
+
+      return str;
+    })
+    .join('\n');
+
+  return css;
+};
+
+export const propertyFormatterHooksConfig = {
+  'css/property': propertyFormatter,
+};

package/src/dark/component/tokens.json

@@ -215,7 +215,7 @@
       }
     },
     "form-toggle": {
-      "accent-color": { "value": "hsla(0, 0%, 48%, 1)" },
+      "accent-color": { "value": "hsla(0 0% 48% / 100%)" },
       "background-color": { "value": "{utrecht.color.white}" },
       "border-color": { "value": "transparent" },
       "color": { "value": "{utrecht.color.black}" },

package/src/index.scss

@@ -11,8 +11,7 @@
 
 @import "./responsive";
 
-.utrecht-theme,
-.utrecht-theme ::backdrop {
+.utrecht-theme {
   @include utrecht-theme;
 
   utrecht-page-footer,
@@ -27,9 +26,7 @@
 
 @media (prefers-color-scheme: dark) {
   .utrecht-theme--media-query,
-  .utrecht-theme--media-query ::backdrop,
-  .utrecht-theme--media-query-color-scheme,
-  .utrecht-theme--media-query-color-scheme ::backdrop {
+  .utrecht-theme--media-query-color-scheme {
     @include utrecht-theme--dark;
   }
 }

package/style-dictionary-build-dark.mjs

@@ -0,0 +1,64 @@
+import { register } from '@tokens-studio/sd-transforms';
+import StyleDictionary from 'style-dictionary';
+import { typeDtcgDelegate } from 'style-dictionary/utils';
+import { readFile } from 'node:fs/promises';
+import { createStyleDictionaryConfig } from './style-dictionary-config.mjs';
+
+const build = async () => {
+  const themeConfig = JSON.parse(await readFile('./config.json', 'utf-8'));
+  StyleDictionary.registerPreprocessor({
+    name: 'dtcg-delegate',
+    preprocessor: typeDtcgDelegate,
+  });
+
+  register(StyleDictionary, {
+    // TODO: Enable `excludeParentKeys` when Figma is the source of design tokens
+    // excludeParentKeys: true,
+  });
+
+  const config = {
+    ...createStyleDictionaryConfig({
+      themeName: `${themeConfig.prefix}-theme--dark`,
+    }),
+    log: 'warn',
+    preprocessors: ['tokens-studio', 'dtcg-delegate'],
+    source: [
+      '../../components/**/tokens.json',
+      '../../components/**/*.tokens.json',
+      './src/brand/tokens.json',
+      './src/brand/**/*.tokens.json',
+      './src/common/tokens.json',
+      './src/common/**/*.tokens.json',
+      './src/component/tokens.json',
+      './src/component/**/*.tokens.json',
+
+      // Additional dark theme tokens
+      './src/dark/tokens.json',
+      './src/dark/*.tokens.json',
+      './src/dark/**/tokens.json',
+      './src/dark/**.tokens.json',
+    ],
+  };
+
+  Object.values(config.platforms).forEach((platform) => {
+    platform.buildPath = 'dist/dark/';
+
+    if (Array.isArray(platform.files)) {
+      platform.files.forEach((file) => {
+        if (file.destination === 'variables.css') {
+          file.options.selector = '.utrecht-theme--dark, .utrecht-theme--dark ::backdrop';
+        }
+        if (file.destination === '_mixin.scss') {
+          file.options.selector = '@mixin utrecht-theme--dark';
+        }
+      });
+    }
+  });
+
+  const sd = new StyleDictionary(config);
+
+  await sd.cleanAllPlatforms();
+  await sd.buildAllPlatforms();
+};
+
+build();

package/style-dictionary-build.mjs

@@ -0,0 +1,41 @@
+import { register } from '@tokens-studio/sd-transforms';
+import StyleDictionary from 'style-dictionary';
+import { typeDtcgDelegate } from 'style-dictionary/utils';
+import { readFile } from 'node:fs/promises';
+import { createStyleDictionaryConfig } from './style-dictionary-config.mjs';
+
+const build = async () => {
+  const themeConfig = JSON.parse(await readFile('./config.json', 'utf-8'));
+  StyleDictionary.registerPreprocessor({
+    name: 'dtcg-delegate',
+    preprocessor: typeDtcgDelegate,
+  });
+
+  register(StyleDictionary, {
+    // TODO: Enable `excludeParentKeys` when Figma is the source of design tokens
+    // excludeParentKeys: true,
+  });
+
+  const sd = new StyleDictionary({
+    ...createStyleDictionaryConfig({
+      themeName: `${themeConfig.prefix}-theme`,
+    }),
+    log: 'warn',
+    preprocessors: ['tokens-studio', 'dtcg-delegate'],
+    source: [
+      '../../components/**/tokens.json',
+      '../../components/**/*.tokens.json',
+      './src/brand/tokens.json',
+      './src/brand/**/*.tokens.json',
+      './src/common/tokens.json',
+      './src/common/**/*.tokens.json',
+      './src/component/tokens.json',
+      './src/component/**/*.tokens.json',
+    ],
+  });
+
+  await sd.cleanAllPlatforms();
+  await sd.buildAllPlatforms();
+};
+
+build();