Added utrecht document tokens

packages/storybook/config/preview.ts → packages/storybook/config/preview.tsx

@@ -1,3 +1,4 @@
+import { Controls, Description, Primary, Stories } from '@storybook/addon-docs';
 import type { Preview } from '@storybook/react';
 import '@tilburg/design-tokens/dist/index.css';
 import '@tilburg/font/src/index.scss';
@@ -10,6 +11,19 @@ const preview: Preview = {
   parameters: {
     controls: { expanded: false },
     options: { panelPosition: 'right' },
+    docs: {
+      page: () => {
+        // Exclude `<Title>` because the title comes from the Markdown file
+        return (
+          <>
+            <Description />
+            <Primary />
+            <Controls />
+            <Stories />
+          </>
+        );
+      },
+    },
   },
   decorators: [ParametersArgsDecorator],
 };

proprietary/design-tokens/src/common/utrecht/document.tokens.json

@@ -0,0 +1,52 @@
+{
+  "utrecht": {
+    "document": {
+      "background-color": {
+        "value": "{tilburg.color.white}",
+        "type": "color"
+      },
+      "color": {
+        "value": "{tilburg.color.black-txt}",
+        "type": "color"
+      },
+      "inverse": {
+        "background-color": {
+          "value": "{tilburg.color.gray.950}",
+          "type": "color"
+        },
+        "color": {
+          "value": "{tilburg.color.white}",
+          "type": "color"
+        }
+      },
+      "subtle": {
+        "color": {
+          "value": "{tilburg.color.gray.600}",
+          "type": "color"
+        }
+      },
+      "font-family": {
+        "value": "{tilburg.typography.font-family.secondary}",
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "value": "{tilburg.typography.font-size.md}",
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "value": "{tilburg.typography.font-weight.normal}",
+        "type": "fontWeights"
+      },
+      "strong": {
+        "font-weight": {
+          "value": "{tilburg.typography.font-weight.bold}",
+          "type": "fontWeights"
+        }
+      },
+      "line-height": {
+        "value": "{tilburg.typography.line-height.md}",
+        "type": "lineHeights"
+      }
+    }
+  }
+}