feat: fix resolveReferences not working and make the build work

nl-design-system · Oct 14, 2024 · 313af22 · 313af22
1 parent a5bf83a
commit 313af22
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 89 deletions.
diff --git a/apps/rhc-templates/src/app/layout.tsx b/apps/rhc-templates/src/app/layout.tsx
@@ -2,7 +2,7 @@
 import { Document } from '@utrecht/component-library-react';
 import { PropsWithChildren } from 'react';
 import '@nl-rvo/assets/fonts/index.css';
-import '@rijkshuisstijl-community/design-tokens/dist/index.css';
+import '@rijkshuisstijl-community/design-tokens/dist/wetgevend/index.css';
 import '@rijkshuisstijl-community/components-css/index.scss';
 import { Logo, Icon, NavBar, PageHeader } from '@rijkshuisstijl-community/components-react';
 import '@rijkshuisstijl-community/font/src/index.mjs';

diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
@@ -1,5 +1,8 @@
 import '@nl-rvo/assets/fonts/index.css';
-import '@rijkshuisstijl-community/design-tokens/dist/index.css';
+import '@rijkshuisstijl-community/design-tokens/dist/wetgevend/index.css';
+import '@rijkshuisstijl-community/design-tokens/dist/uitvoerend-violet/theme.css';
+import '@rijkshuisstijl-community/design-tokens/dist/uitvoerend-mintgroen-anderfontweight-focus/theme.css';
+import '@rijkshuisstijl-community/design-tokens/dist/uitvoerend-violet-oud/theme.css';
 import '@rijkshuisstijl-community/digid-design-tokens/dist/theme.css';
 import '@rijkshuisstijl-community/font/src/index.mjs';
 import '@rijkshuisstijl-community/logius-design-tokens/dist/theme.css';
@@ -16,11 +19,14 @@ const preview: Preview = {
   decorators: [
     withThemeByClassName({
       themes: {
-        RijkshuisstijlCommunity: 'rhc-theme',
+        RijkshuisstijlCommunity: 'wetgevend-theme',
         DigiD: 'digid-theme',
         MijnOverheid: 'mijnoverheid-theme',
         Logius: 'logius-theme',
         RIVM: 'rivm-theme',
+        'Uitvoerend - violet': 'uitvoerend-violet-theme',
+        'Uitvoerend - mintgroen -  ander fontweight - focus': 'uitvoerend-mintgroen-anderfontweight-focus-theme',
+        'Uitvoerend - violet - oud': 'uitvoerend-violet-oud-theme',
       },
       defaultTheme: 'RijkshuisstijlCommunity',
     }),

diff --git a/packages/storybook/src/community/logo.stories.tsx b/packages/storybook/src/community/logo.stories.tsx
@@ -1,5 +1,9 @@
 import { Icon, Logo, LogoProps } from '@rijkshuisstijl-community/components-react';
-import { rhcLogoColor, rhcLogoImgBackgroundColor, rhcLogoImgColor } from '@rijkshuisstijl-community/design-tokens/dist';
+import {
+  rhcLogoColor,
+  rhcLogoImgBackgroundColor,
+  rhcLogoImgColor,
+} from '@rijkshuisstijl-community/design-tokens/dist/wetgevend';
 import { Meta, StoryObj } from '@storybook/react';
 import { CSSProperties } from 'react';
 

diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
@@ -3176,7 +3176,7 @@
           "type": "lineHeights"
         },
         "margin-block-start": {
-          "value": "-{rhc.space.100}",
+          "value": "{rhc.space.100}",
           "type": "spacing"
         },
         "margin-block-end": {
@@ -7365,88 +7365,6 @@
       }
     }
   },
-  "overwrites/oude rijkshuisstijl/blockquote": {
-    "utrecht": {
-      "blockquote": {
-        "attribution": {
-          "font-size": {
-            "value": "{rhc.font-size.body.default}",
-            "type": "fontSizes"
-          },
-          "font-family": {
-            "value": "{rhc.font-family.primary}",
-            "type": "fontFamilies"
-          },
-          "line-height": {
-            "value": "{rhc.line-height.body}",
-            "type": "lineHeights"
-          },
-          "font-weight": {
-            "value": "{rhc.font-weight.body.normal}",
-            "type": "fontWeights"
-          },
-          "padding-block-start": {
-            "value": "{rhc.space.150}",
-            "type": "spacing"
-          },
-          "color": {
-            "value": "{rhc.color.foreground.subdued}",
-            "type": "color"
-          }
-        },
-        "content": {
-          "font-family": {
-            "value": "{rhc.font-family.secondary}",
-            "type": "fontFamilies"
-          },
-          "line-height": {
-            "value": "{rhc.line-height.body}",
-            "type": "lineHeights"
-          },
-          "font-weight": {
-            "value": "{rhc.font-weight.body.normal}",
-            "type": "fontWeights"
-          },
-          "font-size": {
-            "value": "{rhc.font-size.body.intro}",
-            "type": "fontSizes"
-          },
-          "color": {
-            "value": "{rhc.color.foreground.default}",
-            "type": "color"
-          }
-        },
-        "padding-block-end": {
-          "value": "{rhc.space.150}",
-          "type": "spacing"
-        },
-        "padding-block-start": {
-          "value": "{rhc.space.150}",
-          "type": "spacing"
-        },
-        "padding-inline-end": {
-          "value": "{rhc.space.500}",
-          "type": "spacing"
-        },
-        "padding-inline-start": {
-          "value": "{rhc.space.500}",
-          "type": "spacing"
-        },
-        "row-gap": {
-          "value": "{rhc.space.150}",
-          "type": "spacing"
-        },
-        "background-color": {
-          "value": "{rhc.color.none}",
-          "type": "color"
-        },
-        "border-left": {
-          "value": "{rhc.color.accent.500}",
-          "type": "color"
-        }
-      }
-    }
-  },
   "overwrites/tekst/foreground-zwart": {
     "rhc": {
       "color": {

diff --git a/proprietary/design-tokens/run-build.mjs b/proprietary/design-tokens/run-build.mjs
@@ -56,7 +56,7 @@ const getStyleDictionaryConfig = (product) => {
             destination: `theme.css`,
             format: 'css/variables',
             options: {
-              selector: `.rhc-theme`,
+              selector: `.${normalizeFileName(product)}-theme`,
               outputReferences: true,
             },
           },

diff --git a/proprietary/design-tokens/token-transformer.mjs b/proprietary/design-tokens/token-transformer.mjs
@@ -30,7 +30,7 @@ const init = async ({ input, output }) => {
     expandComposition: false,
     // expandBorder: true,
     preserveRawValue: true,
-    // throwErrorWhenNotResolved: true,
+    // throwErrorWhenNotResolved: false,
     resolveReferences: 'math',
   };
   const start = Date.now();