build: upgrade to Style Dictionary v4 and experimental design token p…

…ackage layout

.changeset/famous-knives-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/design-tokens": patch
+---
+
+Fix `propery.css` output. (The file was empty.)

.changeset/popular-mugs-drop.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/design-tokens": patch
+---
+
+No longer include `::backdrop` selectors, those are no longer needed in evergreen browsers.'

proprietary/design-tokens/config.json

@@ -0,0 +1,8 @@
+{
+  "fullName": "Gemeente Utrecht",
+  "name": "Utrecht",
+  "prefix": "utrecht",
+  "npm": "@utrecht/design-tokens",
+  "cdn": "https://unpkg.com/@utrecht/design-tokens/dist/index.css",
+  "stories": []
+}

proprietary/design-tokens/package.json

@@ -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,14 +26,14 @@
     "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",
     "clean": "rimraf dist/",
     "watch": "pnpm run --parallel '/^watch:.*/'",

proprietary/design-tokens/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,
+};

proprietary/design-tokens/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;
   }
 }

proprietary/design-tokens/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();

proprietary/design-tokens/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();