@rijkshuisstijl-community/design-tokens 1.0.0-alpha.14 → 1.0.0-alpha.141

package/token-transformer.mjs

@@ -0,0 +1,85 @@
+import { existsSync, mkdirSync } from 'fs';
+import { readFile, writeFile } from 'node:fs/promises';
+
+import { transformTokens } from 'token-transformer';
+
+// the commented options and their values are default values from the token-transformer package
+const transformerOptions = {
+  // expandTypography: true,
+  // expandShadow: true,
+  // expandComposition: true,
+  // expandBorder: true,
+  // preserveRawValue: false,
+  // throwErrorWhenNotResolved: true,
+  // Tried to set this to false, it worked in principle but there were breaking in the styles especially with spacing. I think it's better to keep it true
+  // resolveReferences: true,
+};
+
+const excludes = [
+  'components/avatar',
+  'components/backdrop',
+  'components/drawer',
+  'components/form-field-option-label',
+  'components/modal-dialog',
+  'components/pagination',
+  'components/status-badge',
+  'components/summary-list',
+  'components/task-list',
+  'components/toolbar-button',
+];
+
+// Split tokens into separate files
+async function transformAndSplitTokens() {
+  // Read the raw JSON file directly
+  const json = await readFile('./figma/figma.tokens.json', 'utf-8');
+  const tokens = JSON.parse(json);
+
+  // Extract base tokens (excluding $themes and overwrites/)
+  // Not sure if other designers might not be able to modify the themes created by paid plugin so getting the base tokens is a good fallback
+  const baseTokens = {};
+  Object.entries(tokens).forEach(([key, value]) => {
+    if (!key.startsWith('$') && !key.startsWith('overwrites/')) {
+      baseTokens[key] = value;
+    }
+  });
+
+  // Transform base tokens
+  let resolved = transformTokens(baseTokens, [], excludes, transformerOptions);
+  delete resolved['tokenSetOrder'];
+
+  // Process themes to add the enabled components
+  const themes = tokens.$themes || [];
+  const processedThemes = {};
+
+  themes.forEach((theme) => {
+    const themeTokens = {};
+
+    Object.entries(theme.selectedTokenSets).forEach(([tokenSet, status]) => {
+      if (status === 'enabled') {
+        if (tokens[tokenSet]) {
+          themeTokens[tokenSet] = tokens[tokenSet];
+        }
+      }
+    });
+
+    // Transform the theme tokens
+    const transformedThemeTokens = transformTokens(themeTokens, [], excludes, transformerOptions);
+
+    processedThemes[theme.name] = {
+      id: theme.id,
+      tokens: transformedThemeTokens,
+      group: theme.group,
+    };
+  });
+
+  // Ensure directories exist
+  if (!existsSync('./src/generated')) {
+    mkdirSync('./src/generated', { recursive: true });
+  }
+
+  // Write files
+  await writeFile('./src/generated/base.tokens.json', JSON.stringify(resolved, null, 2));
+  await writeFile('./src/generated/themes.json', JSON.stringify(processedThemes, null, 2));
+}
+
+transformAndSplitTokens();

package/dist/variables.less

@@ -1,306 +0,0 @@
-
-// Do not edit directly
-// Generated on Wed, 30 Aug 2023 10:55:39 GMT
-
-@rvo-select-padding-inline-start: 18px;
-@rvo-select-padding-inline-end: 50px;
-@rvo-select-padding-block-start: 10px;
-@rvo-select-padding-block-end: 9px;
-@rvo-select-outline-offset: 0;
-@rvo-logo-emblem-background-color: #154273;
-@rvo-logo-font-size: 16px;
-@rvo-heading-1-line-height: 125%;
-@rvo-checkbox-border-width: 1px;
-@rvo-checkbox-icon-size: 16px;
-@rvo-checkbox-size: 24px;
-@utrecht-unordered-list-list-style-type: square;
-@utrecht-unordered-list-padding-inline-start: 20px;
-@utrecht-unordered-list-item-marker: initial;
-@utrecht-unordered-list-item-padding-inline-start: 0;
-@utrecht-unordered-list-item-margin-block-end: 0.5ex;
-@utrecht-unordered-list-item-margin-block-start: 0.5ex;
-@utrecht-unordered-list-margin-block-end: 16px;
-@utrecht-unordered-list-margin-block-start: 0;
-@utrecht-paragraph-small-line-height: 150%;
-@utrecht-paragraph-small-font-size: 16px;
-@utrecht-paragraph-lead-line-height: 150%;
-@utrecht-paragraph-lead-font-size: 20px;
-@utrecht-paragraph-margin-block-end: 16px;
-@utrecht-paragraph-line-height: 150%;
-@utrecht-paragraph-font-size: 18px;
-@utrecht-ordered-list-padding-inline-start: 0;
-@utrecht-ordered-list-item-padding-inline-start: 0;
-@utrecht-ordered-list-item-margin-block-end: 0.5ex;
-@utrecht-ordered-list-item-margin-block-start: 0.5ex;
-@utrecht-ordered-list-margin-block-end: 0;
-@utrecht-link-focus-text-decoration-thickness: 1px;
-@utrecht-link-focus-outline-offset: 0;
-@utrecht-link-active-text-decoration-thickness: 1px;
-@utrecht-link-hover-text-decoration: none;
-@utrecht-link-hover-text-decoration-thickness: 1px;
-@utrecht-link-text-underline-offset: 2px;
-@utrecht-link-text-decoration-thickness: 1px;
-@utrecht-link-text-decoration: underline;
-@utrecht-heading-6-margin-block-end: 4px;
-@utrecht-heading-6-font-size: 0.875rem;
-@utrecht-heading-5-margin-block-end: 4px;
-@utrecht-heading-5-font-size: 1rem;
-@utrecht-heading-4-margin-block-end: 4px;
-@utrecht-heading-4-font-size: 1.125rem;
-@utrecht-heading-3-margin-block-end: 4px;
-@utrecht-heading-3-line-height: 125%;
-@utrecht-heading-3-font-size: 1.25rem;
-@utrecht-heading-2-margin-block-end: 4px;
-@utrecht-heading-2-line-height: 150%;
-@utrecht-heading-2-font-size: 1.5rem;
-@utrecht-heading-1-margin-block-start: 16px;
-@utrecht-heading-1-margin-block-end: 16px;
-@utrecht-heading-1-line-height: 125%;
-@utrecht-heading-1-font-size: 2rem;
-@utrecht-form-label-font-size: 18px;
-@utrecht-form-input-invalid-border-width: 1px;
-@utrecht-form-input-disabled-border-width: 0;
-@utrecht-form-input-padding-inline-start: 12px;
-@utrecht-form-input-padding-inline-end: 12px;
-@utrecht-form-input-padding-block-start: 12px;
-@utrecht-form-input-padding-block-end: 8px;
-@utrecht-form-input-font-size: 18px;
-@utrecht-form-input-border-width: 1px;
-@utrecht-form-input-border-radius: 0;
-@utrecht-form-fieldset-legend-margin-block-start: 0;
-@utrecht-form-fieldset-legend-margin-block-end: 1ex;
-@utrecht-form-fieldset-legend-line-height: 150%;
-@utrecht-form-fieldset-padding-inline-start: 36px;
-@utrecht-form-fieldset-padding-inline-end: 36px;
-@utrecht-form-fieldset-padding-block-start: 36px;
-@utrecht-form-fieldset-padding-block-end: 36px;
-@utrecht-form-fieldset-margin-block-start: 1ex;
-@utrecht-form-fieldset-margin-block-end: 1ex;
-@utrecht-form-field-min-width: 100%;
-@utrecht-form-field-margin-block-start: 1ex;
-@utrecht-form-field-margin-block-end: 1ex;
-@utrecht-form-field-description-margin-block-end: 1ex;
-@utrecht-form-field-description-margin-block-start: 0;
-@utrecht-data-list-rows-column-min-inline-size: 25ch;
-@utrecht-data-list-rows-column-inline-size: 50%;
-@utrecht-data-list-rows-item-value-margin-block-start: 0;
-@utrecht-data-list-rows-item-padding-inline-start: 14px;
-@utrecht-data-list-rows-item-margin-block-start: 0;
-@utrecht-data-list-rows-border-bottom-width: 1px;
-@utrecht-data-list-item-value-padding-inline-start: 18px;
-@utrecht-data-list-item-value-padding-inline-end: 18px;
-@utrecht-data-list-item-value-padding-block-start: 9px;
-@utrecht-data-list-item-value-padding-block-end: 9px;
-@utrecht-data-list-item-key-padding-inline-start: 18px;
-@utrecht-data-list-item-key-padding-inline-end: 18px;
-@utrecht-data-list-item-key-padding-block-start: 9px;
-@utrecht-data-list-item-key-padding-block-end: 9px;
-@utrecht-data-list-item-key-border-inline-end-width: 1px;
-@utrecht-data-list-margin-block-start: 0;
-@utrecht-data-list-margin-block-end: 0;
-@utrecht-data-list-border-width: 1px;
-@utrecht-custom-radio-button-checked-border-width: 3px;
-@utrecht-custom-radio-button-icon-size: 18px;
-@utrecht-custom-radio-button-border-radius: 0;
-@utrecht-custom-radio-button-border-width: 1px;
-@utrecht-custom-radio-button-size: 24px;
-@utrecht-breadcrumb-link-text-decoration: none;
-@utrecht-breadcrumb-link-hover-text-decoration-thickness: 1px !important;
-@utrecht-breadcrumb-link-hover-text-decoration: underline;
-@utrecht-breadcrumb-link-focus-text-decoration-thickness: 1px;
-@utrecht-breadcrumb-link-focus-text-decoration: none;
-@utrecht-breadcrumb-item-padding-inline-start: 0;
-@utrecht-breadcrumb-item-padding-inline-end: 0;
-@utrecht-breadcrumb-item-padding-block-end: 0;
-@utrecht-breadcrumb-item-padding-block-start: 0;
-@utrecht-breadcrumb-item-gap: 8px;
-@utrecht-breadcrumb-font-size: 0.875rem;
-@utrecht-button-subtle-text-decoration: underline;
-@utrecht-button-subtle-disabled-background-color: transparent;
-@utrecht-button-subtle-hover-text-decoration: underline;
-@utrecht-button-subtle-font-size: 15px;
-@utrecht-button-subtle-background-color: transparent;
-@utrecht-button-secondary-action-border-width: 1px;
-@utrecht-button-padding-inline-end: 16px;
-@utrecht-button-padding-inline-start: 16px;
-@utrecht-button-padding-block-end: 8px;
-@utrecht-button-padding-block-start: 8px;
-@utrecht-button-font-size: 18px;
-@utrecht-button-border-width: 0;
-@utrecht-button-rvo-tertiary-action-text-decoration: none;
-@utrecht-button-rvo-md-padding-inline-end: 16px;
-@utrecht-button-rvo-md-padding-inline-start: 16px;
-@utrecht-button-rvo-md-padding-block-end: 8px;
-@utrecht-button-rvo-md-padding-block-start: 8px;
-@utrecht-button-rvo-md-font-size: 18px;
-@utrecht-button-rvo-sm-min-block-size: 30px;
-@utrecht-button-rvo-sm-padding-inline-end: 12px;
-@utrecht-button-rvo-sm-padding-inline-start: 12px;
-@utrecht-button-rvo-sm-padding-block-end: 4px;
-@utrecht-button-rvo-sm-padding-block-start: 4px;
-@utrecht-button-rvo-sm-font-size: 1rem;
-@utrecht-button-rvo-xs-min-block-size: auto;
-@utrecht-button-rvo-xs-padding-inline-end: calc(8px + 4px);
-@utrecht-button-rvo-xs-padding-inline-start: calc(8px + 4px);
-@utrecht-button-rvo-xs-padding-block-end: 4px;
-@utrecht-button-rvo-xs-padding-block-start: 4px;
-@utrecht-button-rvo-xs-font-size: 0.875rem;
-@utrecht-focus-outline-width: 2px;
-@utrecht-focus-outline-style: dashed;
-@utrecht-focus-outline-offset: 3px; // This is only for buttons. Form fields (input, select and textarea) and links do not have an offset
-@utrecht-action-submit-cursor: pointer;
-@utrecht-action-disabled-cursor: not-allowed;
-@utrecht-action-busy-cursor: wait;
-@utrecht-action-activate-cursor: pointer;
-@basiselementen-document-line-height: 150%;
-@basiselementen-document-font-size: 18px;
-@basiselementen-root-font-size: 100%;
-@basiselementen-font-weight-bold: 700;
-@basiselementen-font-weight-normal: 400;
-@basiselementen-font-serif-fallback-font-family: 'Times New Roman', serif;
-@basiselementen-font-serif-font-family: 'RijksoverheidSerifWeb';
-@basiselementen-font-sans-serif-fallback-font-family: 'Calibri', 'Verdana', 'Arial', sans-serif;
-@basiselementen-font-sans-serif-font-family: 'RijksoverheidSansWebText';
-@basiselementen-color-wit: #ffffff;
-@basiselementen-color-zwart: #000000;
-@basiselementen-color-grijs7: #535353;
-@basiselementen-color-grijs6: #696969;
-@basiselementen-color-grijs5: #999999;
-@basiselementen-color-grijs4: #b4b4b4;
-@basiselementen-color-grijs3: #cccccc;
-@basiselementen-color-grijs2: #e6e6e6;
-@basiselementen-color-grijs1: #f3f3f3;
-@basiselementen-color-rood-tint2: #f9dfdd;
-@basiselementen-color-rood-shade1: #4d0a0b;
-@basiselementen-color-rood-tint1: #f2bfbb;
-@basiselementen-color-rood: #d51b1e;
-@basiselementen-color-donkergeel-tint2: #fff4dc;
-@basiselementen-color-donkergeel-tint1: #ffe9b7;
-@basiselementen-color-donkergeel: #ffb612;
-@basiselementen-color-donkergroen: #275e08;
-@basiselementen-color-groen-tint2: #e1eddb;
-@basiselementen-color-groen-tint1: #c3dbb6;
-@basiselementen-color-groen: #39870c;
-@basiselementen-color-oranje-tint2: #fbead9;
-@basiselementen-color-oranje-tint1: #f6d4b2;
-@basiselementen-color-oranje: #e17000;
-@basiselementen-color-donkerblauw-shade1: #01496D; // 30% black (shade) of 'donkerblauw'
-@basiselementen-color-donkerblauw: #01689b;
-@basiselementen-color-lichtblauw-tint2: #eef7fb;
-@basiselementen-color-lichtblauw-tint1: #ddeff8;
-@basiselementen-color-lichtblauw: #8fcae7;
-@basiselementen-color-hemelblauw-tint2: #d9ebf7;
-@basiselementen-color-hemelblauw-tint1: #b2d7ee;
-@basiselementen-color-hemelblauw: #007bc7;
-@basiselementen-color-logoblauw: #154273;
-@rvo-select-icon-color: @basiselementen-color-wit;
-@rvo-select-icon-background-color: @basiselementen-color-hemelblauw;
-@rvo-logo-emblem-color: @basiselementen-color-wit;
-@rvo-logo-color: @basiselementen-color-zwart;
-@rvo-logo-font-family: @basiselementen-font-serif-font-family;
-@rvo-custom-radio-button-checked-background: radial-gradient(circle, @basiselementen-color-wit 30%, @basiselementen-color-hemelblauw 30%);
-@rvo-custom-radio-button-checked-border-color: @basiselementen-color-hemelblauw;
-@rvo-custom-radio-button-hover-border-color: @basiselementen-color-hemelblauw;
-@rvo-custom-radio-button-label-disabled-color: @basiselementen-color-grijs3;
-@rvo-checkbox-disabled-color: @basiselementen-color-grijs3;
-@rvo-checkbox-disabled-background-color: @basiselementen-color-wit;
-@rvo-checkbox-disabled-border-color: @basiselementen-color-grijs3;
-@rvo-checkbox-hover-border-color: @basiselementen-color-hemelblauw;
-@rvo-checkbox-hover-background-color: @basiselementen-color-donkerblauw;
-@rvo-checkbox-checked-background-color: @basiselementen-color-hemelblauw;
-@rvo-checkbox-border-color: @basiselementen-color-zwart;
-@rvo-checkbox-background-color: @basiselementen-color-wit;
-@rvo-checkbox-icon-color: @basiselementen-color-wit;
-@utrecht-link-active-font-weight: @basiselementen-font-weight-bold;
-@utrecht-link-active-color: @basiselementen-color-donkerblauw;
-@utrecht-link-hover-font-weight: @basiselementen-font-weight-bold;
-@utrecht-link-hover-color: @basiselementen-color-donkerblauw;
-@utrecht-link-font-weight: @basiselementen-font-weight-normal;
-@utrecht-link-color: @basiselementen-color-hemelblauw;
-@utrecht-heading-6-font-weight: @basiselementen-font-weight-bold;
-@utrecht-heading-5-font-weight: @basiselementen-font-weight-bold;
-@utrecht-heading-4-font-weight: @basiselementen-font-weight-bold;
-@utrecht-heading-3-font-weight: @basiselementen-font-weight-bold;
-@utrecht-heading-2-font-weight: @basiselementen-font-weight-bold;
-@utrecht-heading-1-font-weight: @basiselementen-font-weight-bold;
-@utrecht-form-label-font-weight: @basiselementen-font-weight-bold;
-@utrecht-form-input-read-only-color: @basiselementen-color-grijs7;
-@utrecht-form-input-read-only-border-color: @basiselementen-color-grijs7;
-@utrecht-form-input-invalid-border-color: @basiselementen-color-rood;
-@utrecht-form-input-invalid-background-color: @basiselementen-color-wit;
-@utrecht-form-input-focus-border-color: @basiselementen-color-grijs6;
-@utrecht-form-input-focus-background-color: @basiselementen-color-wit;
-@utrecht-form-input-disabled-color: @basiselementen-color-grijs7;
-@utrecht-form-input-disabled-border-color: @basiselementen-color-grijs7;
-@utrecht-form-input-disabled-background-color: @basiselementen-color-grijs3 !important;
-@utrecht-form-input-color: @basiselementen-color-zwart;
-@utrecht-form-input-border-color: @basiselementen-color-grijs6;
-@utrecht-form-input-background-color: @basiselementen-color-wit;
-@utrecht-form-fieldset-legend-font-weight: @basiselementen-font-weight-bold;
-@utrecht-form-fieldset-section-background-color: @basiselementen-color-wit;
-@utrecht-document-line-height: @basiselementen-document-line-height;
-@utrecht-document-font-size: @basiselementen-document-font-size;
-@utrecht-document-font-family: @basiselementen-font-sans-serif-font-family;
-@utrecht-document-color: @basiselementen-color-zwart;
-@utrecht-document-background-color: @basiselementen-color-wit;
-@utrecht-data-list-rows-border-bottom-color: @basiselementen-color-grijs4;
-@utrecht-data-list-item-key-font-weight: @basiselementen-font-weight-bold;
-@utrecht-data-list-item-key-border-inline-end-color: @basiselementen-color-grijs4;
-@utrecht-data-list-border-color: @basiselementen-color-grijs4;
-@utrecht-custom-radio-button-invalid-border-color: @basiselementen-color-grijs3;
-@utrecht-custom-radio-button-checked-active-background-color: @basiselementen-color-hemelblauw;
-@utrecht-custom-radio-button-checked-color: @basiselementen-color-hemelblauw;
-@utrecht-custom-radio-button-checked-background-color: @basiselementen-color-hemelblauw;
-@utrecht-custom-radio-button-checked-border-color: @basiselementen-color-hemelblauw;
-@utrecht-custom-radio-button-disabled-background-color: @basiselementen-color-wit;
-@utrecht-custom-radio-button-disabled-border-color: @basiselementen-color-grijs3;
-@utrecht-custom-radio-button-active-background-color: @basiselementen-color-hemelblauw;
-@utrecht-custom-radio-button-background-color: @basiselementen-color-wit;
-@utrecht-custom-radio-button-color: @basiselementen-color-zwart;
-@utrecht-custom-radio-button-border-color: @basiselementen-color-zwart;
-@utrecht-breadcrumb-link-hover-color: @basiselementen-color-donkerblauw;
-@utrecht-breadcrumb-link-focus-color: @basiselementen-color-zwart;
-@utrecht-breadcrumb-link-focus-background-color: @basiselementen-color-hemelblauw-tint2;
-@utrecht-breadcrumb-link-color: @basiselementen-color-hemelblauw;
-@utrecht-button-subtle-warning-hover-color: @basiselementen-color-rood-shade1;
-@utrecht-button-subtle-disabled-color: @basiselementen-color-grijs3;
-@utrecht-button-subtle-font-weight: @basiselementen-font-weight-bold;
-@utrecht-button-subtle-color: @basiselementen-color-rood;
-@utrecht-button-secondary-action-hover-border-color: @basiselementen-color-donkerblauw-shade1;
-@utrecht-button-secondary-action-hover-background-color: @basiselementen-color-wit;
-@utrecht-button-secondary-action-hover-color: @basiselementen-color-donkerblauw-shade1;
-@utrecht-button-secondary-action-disabled-color: @basiselementen-color-grijs3;
-@utrecht-button-secondary-action-disabled-border-color: @basiselementen-color-grijs3;
-@utrecht-button-secondary-action-disabled-background-color: @basiselementen-color-wit;
-@utrecht-button-secondary-action-focus-color: @basiselementen-color-donkerblauw;
-@utrecht-button-secondary-action-active-color: @basiselementen-color-wit;
-@utrecht-button-secondary-action-active-border-color: @basiselementen-color-donkerblauw-shade1;
-@utrecht-button-secondary-action-active-background-color: @basiselementen-color-donkerblauw-shade1;
-@utrecht-button-secondary-action-color: @basiselementen-color-donkerblauw;
-@utrecht-button-secondary-action-border-color: @basiselementen-color-donkerblauw;
-@utrecht-button-secondary-action-background-color: @basiselementen-color-wit;
-@utrecht-button-primary-action-warning-disabled-color: @basiselementen-color-grijs3;
-@utrecht-button-primary-action-warning-disabled-background-color: @basiselementen-color-grijs2;
-@utrecht-button-primary-action-warning-disabled-border-color: @basiselementen-color-grijs2;
-@utrecht-button-primary-action-warning-hover-background-color: @basiselementen-color-rood-shade1;
-@utrecht-button-primary-action-warning-focus-background-color: @basiselementen-color-rood;
-@utrecht-button-primary-action-warning-active-background-color: @basiselementen-color-rood;
-@utrecht-button-primary-action-warning-color: @basiselementen-color-wit;
-@utrecht-button-primary-action-warning-background-color: @basiselementen-color-rood;
-@utrecht-button-primary-action-disabled-color: @basiselementen-color-grijs3;
-@utrecht-button-primary-action-disabled-background-color: @basiselementen-color-grijs2;
-@utrecht-button-primary-action-disabled-border-color: @basiselementen-color-grijs2;
-@utrecht-button-primary-action-hover-background-color: @basiselementen-color-donkerblauw-shade1;
-@utrecht-button-primary-action-focus-background-color: @basiselementen-color-donkerblauw;
-@utrecht-button-primary-action-active-background-color: @basiselementen-color-donkerblauw-shade1;
-@utrecht-button-disabled-color: @basiselementen-color-grijs3;
-@utrecht-button-disabled-background-color: @basiselementen-color-grijs2;
-@utrecht-button-disabled-border-color: @basiselementen-color-grijs2;
-@utrecht-button-color: @basiselementen-color-wit;
-@utrecht-button-background-color: @basiselementen-color-donkerblauw;
-@utrecht-button-rvo-xs-font-weight: @basiselementen-font-weight-normal;
-@utrecht-focus-inverse-outline-color: @basiselementen-color-wit;
-@utrecht-focus-outline-color: @basiselementen-color-zwart;
-@basiselementen-document-font-family: @basiselementen-font-sans-serif-font-family;
-@basiselementen-document-color: @basiselementen-color-zwart;
-@basiselementen-document-background-color: @basiselementen-color-wit;

package/src/brand/rhc/color.tokens.json

@@ -1,103 +0,0 @@
-{
-  "basiselementen": {
-    "color": {
-      "logoblauw": {
-        "value": "#154273"
-      },
-      "hemelblauw": {
-        "value": "#007bc7"
-      },
-      "hemelblauw-tint1": {
-        "value": "#b2d7ee"
-      },
-      "hemelblauw-tint2": {
-        "value": "#d9ebf7"
-      },
-      "lichtblauw": {
-        "value": "#8fcae7"
-      },
-      "lichtblauw-tint1": {
-        "value": "#ddeff8"
-      },
-      "lichtblauw-tint2": {
-        "value": "#eef7fb"
-      },
-      "donkerblauw": {
-        "value": "#01689b"
-      },
-      "donkerblauw-shade1": {
-        "value": "#01496D",
-        "comment": "30% black (shade) of 'donkerblauw'"
-      },
-      "oranje": {
-        "value": "#e17000"
-      },
-      "oranje-tint1": {
-        "value": "#f6d4b2"
-      },
-      "oranje-tint2": {
-        "value": "#fbead9"
-      },
-      "groen": {
-        "value": "#39870c"
-      },
-      "groen-tint1": {
-        "value": "#c3dbb6"
-      },
-      "groen-tint2": {
-        "value": "#e1eddb"
-      },
-      "donkergroen": {
-        "value": "#275e08"
-      },
-      "donkergeel": {
-        "value": "#ffb612"
-      },
-      "donkergeel-tint1": {
-        "value": "#ffe9b7"
-      },
-      "donkergeel-tint2": {
-        "value": "#fff4dc"
-      },
-      "rood": {
-        "value": "#d51b1e"
-      },
-      "rood-tint1": {
-        "value": "#f2bfbb"
-      },
-      "rood-shade1": {
-        "value": "#4d0a0b"
-      },
-      "rood-tint2": {
-        "value": "#f9dfdd"
-      },
-      "grijs1": {
-        "value": "#f3f3f3"
-      },
-      "grijs2": {
-        "value": "#e6e6e6"
-      },
-      "grijs3": {
-        "value": "#cccccc"
-      },
-      "grijs4": {
-        "value": "#b4b4b4"
-      },
-      "grijs5": {
-        "value": "#999999"
-      },
-      "grijs6": {
-        "value": "#696969"
-      },
-      "grijs7": {
-        "value": "#535353"
-      },
-      "zwart": {
-        "value": "#000000"
-      },
-      "wit": {
-        "value": "#ffffff"
-      }
-    }
-  }
-}

package/src/brand/rhc/font.tokens.json

@@ -1,34 +0,0 @@
-{
-  "basiselementen": {
-    "font": {
-      "sans-serif": {
-        "font-family": {
-          "value": "'RijksoverheidSansWebText'"
-        }
-      },
-      "sans-serif-fallback": {
-        "font-family": {
-          "value": "'Calibri', 'Verdana', 'Arial', sans-serif"
-        }
-      },
-      "serif": {
-        "font-family": {
-          "value": "'RijksoverheidSerifWeb'"
-        }
-      },
-      "serif-fallback": {
-        "font-family": {
-          "value": "'Times New Roman', serif"
-        }
-      }
-    },
-    "font-weight": {
-      "normal": {
-        "value": "400"
-      },
-      "bold": {
-        "value": "700"
-      }
-    }
-  }
-}

package/src/components/basiselementen/document.tokens.json

@@ -1,15 +0,0 @@
-{
-  "basiselementen": {
-    "root": {
-      "font-size": { "value": "100%" }
-    },
-    "document": {
-      "background-color": { "value": "{basiselementen.color.wit}" },
-      "color": { "value": "{basiselementen.color.zwart}" },
-      "font-family": { "value": "{basiselementen.font.sans-serif.font-family}" },
-      "font-size": { "value": "18px" },
-      "font-weight": {},
-      "line-height": { "value": "150%" }
-    }
-  }
-}

package/src/components/rvo/button.tokens.json

@@ -1,33 +0,0 @@
-{
-  "utrecht": {
-    "button": {
-      "rvo-xs": {
-        "font-size": { "value": "0.875rem" },
-        "font-weight": { "value": "{basiselementen.font-weight.normal}" },
-        "padding-block-start": { "value": "4px" },
-        "padding-block-end": { "value": "4px" },
-        "padding-inline-start": { "value": "calc(8px + 4px)" },
-        "padding-inline-end": { "value": "calc(8px + 4px)" },
-        "min-block-size": { "value": "auto" }
-      },
-      "rvo-sm": {
-        "font-size": { "value": "1rem" },
-        "padding-block-start": { "value": "4px" },
-        "padding-block-end": { "value": "4px" },
-        "padding-inline-start": { "value": "12px" },
-        "padding-inline-end": { "value": "12px" },
-        "min-block-size": { "value": "30px" }
-      },
-      "rvo-md": {
-        "font-size": { "value": "18px" },
-        "padding-block-start": { "value": "8px" },
-        "padding-block-end": { "value": "8px" },
-        "padding-inline-start": { "value": "16px" },
-        "padding-inline-end": { "value": "16px" }
-      },
-      "rvo-tertiary-action": {
-        "text-decoration": { "value": "none" }
-      }
-    }
-  }
-}

package/src/components/rvo/checkbox.tokens.json

@@ -1,32 +0,0 @@
-{
-  "rvo": {
-    "checkbox": {
-      "size": { "value": "24px" },
-      "icon": {
-        "size": { "value": "16px" },
-        "color": { "value": "{basiselementen.color.wit}" }
-      },
-      "background-color": { "value": "{basiselementen.color.wit}" },
-      "border-width": { "value": "1px" },
-      "border-color": { "value": "{basiselementen.color.zwart}" },
-      "focus": {
-        "border-color": {},
-        "border-width": {},
-        "background-color": {}
-      },
-      "checked": {
-        "background-color": { "value": "{basiselementen.color.hemelblauw}" }
-      },
-      "hover": {
-        "background-color": { "value": "{basiselementen.color.donkerblauw}" },
-        "border-color": { "value": "{basiselementen.color.hemelblauw}" }
-      },
-      "disabled": {
-        "border-color": { "value": "{basiselementen.color.grijs3}" },
-        "border-width": {},
-        "background-color": { "value": "{basiselementen.color.wit}" },
-        "color": { "value": "{basiselementen.color.grijs3}" }
-      }
-    }
-  }
-}

package/src/components/rvo/custom-radio-button.tokens.json

@@ -1,24 +0,0 @@
-{
-  "rvo": {
-    "custom-radio-button": {
-      "label": {
-        "disabled": {
-          "color": { "value": "{basiselementen.color.grijs3}" }
-        }
-      },
-      "hover": {
-        "border-color": {
-          "value": "{basiselementen.color.hemelblauw}"
-        }
-      },
-      "checked": {
-        "border-color": {
-          "value": "{basiselementen.color.hemelblauw}"
-        },
-        "background": {
-          "value": "radial-gradient(circle, {basiselementen.color.wit} 30%, {basiselementen.color.hemelblauw} 30%)"
-        }
-      }
-    }
-  }
-}

package/src/components/rvo/heading.tokens.json

@@ -1,24 +0,0 @@
-{
-  "rvo": {
-    "heading": {
-      "1": {
-        "line-height": { "value": "125%" }
-      },
-      "2": {
-        "line-height": {}
-      },
-      "3": {
-        "line-height": {}
-      },
-      "4": {
-        "line-height": {}
-      },
-      "5": {
-        "line-height": {}
-      },
-      "6": {
-        "line-height": {}
-      }
-    }
-  }
-}

package/src/components/rvo/logo.tokens.json

@@ -1,13 +0,0 @@
-{
-  "rvo": {
-    "logo": {
-      "font-family": { "value": "{basiselementen.font.serif.font-family}" },
-      "font-size": { "value": "16px" },
-      "color": { "value": "{basiselementen.color.zwart}" },
-      "emblem": {
-        "background-color": { "value": "#154273" },
-        "color": { "value": "{basiselementen.color.wit}" }
-      }
-    }
-  }
-}