feat: color contrast checker

packages/radix-design-tokens/README.md

@@ -0,0 +1,3 @@
+# NL Design System thema voor met Radix Colors
+
+Gebaseerd op de [`@radix-ui/colors`](https://www.npmjs.com/package/@radix-ui/colors) npm package voor de [Radix UI Colors](https://www.radix-ui.com/colors).

packages/radix-design-tokens/documentation/basis-tokens.mdx

@@ -0,0 +1,21 @@
+import { Meta } from "@storybook/blocks";
+import tokens from "../dist/tokens.json";
+// import colorSchemeDark from "../dist/color-scheme-dark/tokens.json";
+// import tokens from "../src/radix-tokens.mjs";
+// import tokens from "../src/radix-tokens.mjs";
+import {
+  StorybookIsolation,
+  ColorSamplePage,
+} from "../../../proprietary/purmerend-design-tokens/documentation/ColorSampleList";
+
+<Meta title="Radix/Basis Tokens" />
+
+# Radix Color Tokens
+
+<ColorSamplePage
+  scales={Object.keys(tokens["radix"]).map((name) => ({
+    id: name,
+    label: name,
+    tokens: tokens["radix"][name],
+  }))}
+/>

packages/radix-design-tokens/documentation/color.mdx

@@ -0,0 +1,17 @@
+import { Meta } from "@storybook/blocks";
+import tokens from "../dist/tokens.json";
+import { ColorSearch } from "@nl-design-system-unstable/theme-toolkit/src/ColorSearch";
+import { ColorTable } from "@nl-design-system-unstable/theme-toolkit/src/ColorTable";
+import config from "../src/config.json";
+
+<Meta title="Radix/Color" />
+
+# Color xxx
+
+## Find a color
+
+<ColorSearch tokens={tokens[config.prefix]["color"]} />
+
+## Color palette
+
+<ColorTable tokens={tokens[config.prefix]["color"]} />

packages/radix-design-tokens/documentation/components.stories.ts

@@ -0,0 +1,20 @@
+import { ComponentStories } from '@nl-design-system-unstable/theme-toolkit/src/ComponentStories';
+import type { Meta, StoryObj } from '@storybook/react';
+import config from '../src/config.json';
+import tokens from '../dist/list.json';
+
+const meta = {
+  title: 'Radix',
+  component: ComponentStories,
+  parameters: { controls: { include: 'showAll' }, chromatic: { disableSnapshot: false } },
+  args: { config, showAll: false, tokens },
+} satisfies Meta<typeof ComponentStories>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+export const Components: Story = {
+  args: {
+    theme: 'radix-theme',
+  },
+};

packages/radix-design-tokens/documentation/design-tokens.mdx

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/blocks";
+import { DesignTokensTable } from "@nl-design-system-unstable/design-tokens-table-react/css";
+import tokens from "../dist/list.json";
+import config from "../src/config.json";
+
+<Meta title="Radix/Design Tokens" />
+
+## Proprietary Design Tokens
+
+<DesignTokensTable tokens={tokens.filter((token) => token.path[0] === config.prefix)}></DesignTokensTable>
+
+# Design Tokens
+
+<DesignTokensTable tokens={tokens.filter((token) => token.path[0] !== config.prefix)}></DesignTokensTable>

packages/radix-design-tokens/documentation/readme.mdx

@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import markdown from "../README.md?raw";
+
+<Meta title="Radix/README" />
+
+<Markdown>{markdown}</Markdown>

packages/radix-design-tokens/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@nl-design-system-community/radix-design-tokens",
+  "version": "0.0.0",
+  "author": "Community for NL Design System",
+  "description": "NL Design System design tokens voor Radix Colors",
+  "website": "https://www.nldesignsystem.nl/",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "license": "SEE LICENSE IN LICENSE.md",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "[email protected]:nl-design-system/themes.git",
+    "directory": "packages/radix-design-tokens"
+  },
+  "scripts": {
+    "clean": "rimraf -rf dist/ src/generated/",
+    "watch": "npm-run-all watch:**",
+    "watch:style-dictionary": "chokidar --follow-symlinks --command 'pnpm run --ignore-scripts build' 'src/**/*.tokens.json'",
+    "build": "npm-run-all clean build:style-dictionary build:scss",
+    "build:scss": "sass --no-source-map src/:dist/",
+    "build:style-dictionary": "node ./style-dictionary.mjs"
+  },
+  "devDependencies": {
+    "@fontsource/fira-sans": "5.1.0",
+    "@nl-design-system-unstable/basis-design-tokens": "workspace:*",
+    "@nl-design-system-unstable/design-tokens-table-react": "workspace:*",
+    "@nl-design-system-unstable/theme-toolkit": "workspace:*",
+    "@nl-design-system-unstable/tokens-lib": "workspace:*",
+    "@radix-ui/colors": "3.0.0",
+    "@storybook/react": "8.2.7",
+    "@tokens-studio/sd-transforms": "1.2.3",
+    "@types/react": "18.3.3",
+    "@utrecht/component-library-react": "7.1.0",
+    "@utrecht/components": "6.2.0",
+    "chokidar-cli": "3.0.0",
+    "html-react-parser": "5.1.12",
+    "lodash-es": "4.17.21",
+    "npm-run-all": "4.1.5",
+    "react": "18.3.1",
+    "rimraf": "6.0.1",
+    "style-dictionary": "4.0.1"
+  }
+}

packages/radix-design-tokens/src/_responsive.scss

@@ -0,0 +1,9 @@
+/**
+ * @license SEE LICENSE.md
+ * Copyright (c) 2021 NL Design System Community
+ * All rights reserved
+ */
+
+/* stylelint-disable no-duplicate-selectors,block-no-empty */
+.radix-theme {
+}

packages/radix-design-tokens/src/config.json

@@ -0,0 +1,7 @@
+{
+  "fullName": "NL Design System Radix Thema",
+  "name": "Radix",
+  "prefix": "radix",
+  "npm": "@nl-design-system-community/radix-design-tokens",
+  "stories": []
+}

packages/radix-design-tokens/src/custom.scss

@@ -0,0 +1,7 @@
+/**
+ * @license SEE LICENSE.md
+ * Copyright (c) 2021 NL Design System Community
+ * All rights reserved
+ */
+
+@import "./responsive";

packages/radix-design-tokens/src/font.js

@@ -0,0 +1 @@
+/* Untitled Sans is not an open source font */

packages/radix-design-tokens/src/font.scss

@@ -0,0 +1 @@
+/* Untitled Sans is not an open source font */

packages/radix-design-tokens/src/index.scss

@@ -0,0 +1,19 @@
+/**
+ * @license SEE LICENSE.md
+ * Copyright (c) 2021 NL Design System Community
+ * All rights reserved
+ */
+
+@import "../dist/mixin";
+@import "../dist/color-scheme-dark/mixin";
+
+.radix-theme {
+  @include radix-theme;
+}
+
+@media (prefers-color-scheme: dark) {
+  .radix-theme--media-query,
+  .radix-theme--media-query-color-scheme {
+    @include radix-theme--color-scheme-dark;
+  }
+}

packages/radix-design-tokens/src/radix-tokens.mjs

@@ -0,0 +1,31 @@
+import * as scales from '@radix-ui/colors';
+
+// Convert a color name / color string pair to a token object
+const entryToToken = ([name, $value]) => ({
+  name,
+  $value,
+});
+
+const tokens = Object.entries(scales)
+  .filter(([name]) => name !== 'default')
+  .filter(([name]) =>
+    // Exclude scales that have the suffix "A", "P3" or "P3A".
+    // Filter out those scales by only passing through completely lowercase names
+    /^[a-z]+$/.test(name),
+  )
+  .map(([name, colors]) => [name, Object.entries(colors).map(entryToToken)])
+
+  .reduce(
+    (obj, [name, tokens]) => ({
+      ...obj,
+      [name]: tokens.reduce(
+        (obj, token) => ({
+          ...obj,
+          [token.name]: token,
+        }),
+        {},
+      ),
+    }),
+    {},
+  );
+export default tokens;

packages/radix-design-tokens/style-dictionary.mjs

@@ -0,0 +1,60 @@
+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 { createConfig } from '../../style-dictionary-config.js';
+import tokens from './src/radix-tokens.mjs';
+import merge from 'lodash-es/merge.js';
+
+const build = async () => {
+  const themeConfig = JSON.parse(await readFile('./src/config.json', 'utf-8'));
+  StyleDictionary.registerPreprocessor({
+    name: 'dtcg-delegate',
+    preprocessor: typeDtcgDelegate,
+  });
+
+  register(StyleDictionary, {
+    excludeParentKeys: true,
+  });
+
+  const defaultTokens = merge(
+    ...(await Promise.all(
+      ['../../proprietary/basis-design-tokens/figma/basis.tokens.json'].map(async (path) =>
+        JSON.parse(await readFile(path, 'utf-8')),
+      ),
+    )),
+    {
+      brand: {
+        radix: tokens,
+      },
+    },
+  );
+
+  let sd = new StyleDictionary({
+    ...createConfig({
+      className: `${themeConfig.prefix}-theme`,
+    }),
+    preprocessors: ['tokens-studio', 'dtcg-delegate'],
+    // source: ['../basis-design-tokens/figma/**/*.tokens.json', 'figma/figma.tokens.json'],
+    tokens: defaultTokens,
+  });
+
+  await sd.cleanAllPlatforms();
+  await sd.buildAllPlatforms();
+
+  const colorSchemeDarkTokens = defaultTokens;
+  console.log(colorSchemeDarkTokens);
+  sd = new StyleDictionary({
+    ...createConfig({
+      className: `${themeConfig.prefix}-theme--color-scheme-dark`,
+      buildPath: 'dist/color-scheme-dark/',
+    }),
+    preprocessors: ['tokens-studio', 'dtcg-delegate'],
+    tokens: colorSchemeDarkTokens,
+  });
+
+  await sd.cleanAllPlatforms();
+  await sd.buildAllPlatforms();
+};
+
+build();

packages/radix-design-tokens/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "esModuleInterop": true
+  }
+}

packages/storybook/config/main.ts

@@ -2,9 +2,9 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: [
-    '../../voorbeeld-design-tokens/documentation/{readme,dashboard,color,design-tokens,typography}.mdx',
-    '../../voorbeeld-design-tokens/documentation/**/*.stories.{ts,tsx}',
-    '../../../proprietary/*/documentation/{readme,color,dashboard,design-tokens,typography}.mdx',
+    '../../*-design-tokens/documentation/*.mdx',
+    '../../*-design-tokens/documentation/**/*.stories.{ts,tsx}',
+    '../../../proprietary/*/documentation/*.mdx',
     '../../../proprietary/*/documentation/*.stories.ts',
     '../src/**/*.stories.{ts,tsx}',
   ],

packages/storybook/config/preview.ts

@@ -7,6 +7,7 @@ import '@nl-design-system-community/nora-design-tokens/dist/theme.css';
 import '@nl-design-system-community/nora-design-tokens/src/font.js';
 import '@nl-design-system-community/purmerend-design-tokens/dist/index.css';
 import '@nl-design-system-community/purmerend-design-tokens/src/font.js';
+import '@nl-design-system-community/radix-design-tokens/dist/theme.css';
 import '@nl-design-system-unstable/basis-design-tokens/dist/theme.css';
 import '@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens/dist/index.css';
 import '@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens/src/font';

packages/storybook/package.json

@@ -33,6 +33,7 @@
     "@gemeente-rotterdam/design-tokens": "1.0.0-alpha.34",
     "@nl-design-system-community/nora-design-tokens": "workspace:*",
     "@nl-design-system-community/purmerend-design-tokens": "workspace:*",
+    "@nl-design-system-community/radix-design-tokens": "workspace:*",
     "@nl-design-system-unstable/amsterdam-design-tokens": "workspace:*",
     "@nl-design-system-unstable/basis-design-tokens": "workspace:*",
     "@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens": "workspace:*",
@@ -60,8 +61,8 @@
     "@nl-design-system-unstable/stedebroec-design-tokens": "workspace:*",
     "@nl-design-system-unstable/theme-switcher": "workspace:*",
     "@nl-design-system-unstable/theme-toolkit": "workspace:*",
-    "@nl-design-system-unstable/tokens-lib": "workspace:*",
     "@nl-design-system-unstable/tilburg-design-tokens": "workspace:*",
+    "@nl-design-system-unstable/tokens-lib": "workspace:*",
     "@nl-design-system-unstable/tubbergen-design-tokens": "workspace:*",
     "@nl-design-system-unstable/venray-design-tokens": "workspace:*",
     "@nl-design-system-unstable/voorbeeld-design-tokens": "workspace:*",
@@ -86,6 +87,7 @@
     "@storybook/react-vite": "8.2.7",
     "@types/lodash": "4.17.9",
     "@types/react": "18.3.3",
+    "@utrecht/color-sample-css": "1.4.0",
     "@utrecht/component-library-react": "7.1.0",
     "@utrecht/components": "6.2.0",
     "@utrecht/design-tokens": "1.1.0",