@rijkshuisstijl-community/design-tokens 1.0.0-alpha.3 → 1.0.0-alpha.8

package/dist/variables.less

@@ -1,10 +1,306 @@
 
 // Do not edit directly
-// Generated on Tue, 07 Mar 2023 16:47:47 GMT
+// Generated on Tue, 27 Jun 2023 07:55:57 GMT
 
-@rhc-focus-outline-offset: 2px;
-@rhc-color-grey-100: white;
-@rhc-color-grey-0: black;
-@rhc-color-blue-50: cornflowerblue;
-@rhc-button-color: @rhc-color-grey-100;
-@rhc-button-background-color: @rhc-color-blue-50;
+@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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.8",
   "author": "Community for NL Design System",
   "description": "Example design tokens",
   "license": "EUPL-1.2",
@@ -9,7 +9,8 @@
   ],
   "private": false,
   "publishConfig": {
-    "access": "restricted"
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org/"
   },
   "repository": {
     "type": "git+ssh",
@@ -26,8 +27,8 @@
   "devDependencies": {
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "4.1.2",
-    "style-dictionary": "3.7.2"
+    "rimraf": "4.4.1",
+    "style-dictionary": "3.8.0"
   },
-  "gitHead": "98621c245e0e4092717661d0b4b550f70849c23f"
+  "gitHead": "9b428801d2a503048bfe61d1e2ec0272a8fa1a4d"
 }

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

@@ -1,12 +1,102 @@
 {
-  "rhc": {
+  "basiselementen": {
     "color": {
-      "blue": {
-        "50": { "value": "cornflowerblue" }
+      "logoblauw": {
+        "value": "#154273"
       },
-      "grey": {
-        "100": { "value": "white" },
-        "0": { "value": "black" }
+      "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

@@ -0,0 +1,34 @@
+{
+  "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/common/utrecht/action.tokens.json

@@ -0,0 +1,10 @@
+{
+  "utrecht": {
+    "action": {
+      "activate": { "cursor": { "value": "pointer" } },
+      "busy": { "cursor": { "value": "wait" } },
+      "disabled": { "cursor": { "value": "not-allowed" } },
+      "submit": { "cursor": { "value": "pointer" } }
+    }
+  }
+}

package/src/common/utrecht/focus.tokens.json

@@ -0,0 +1,17 @@
+{
+  "utrecht": {
+    "focus": {
+      "background-color": {},
+      "outline-color": { "value": "{basiselementen.color.zwart}" },
+      "outline-offset": {
+        "value": "3px",
+        "comment": "This is only for buttons. Form fields (input, select and textarea) and links do not have an offset"
+      },
+      "outline-style": { "value": "dashed" },
+      "outline-width": { "value": "2px" },
+      "inverse": {
+        "outline-color": { "value": "{basiselementen.color.wit}" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+{
+  "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

@@ -0,0 +1,33 @@
+{
+  "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

@@ -0,0 +1,32 @@
+{
+  "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

@@ -0,0 +1,24 @@
+{
+  "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

@@ -0,0 +1,24 @@
+{
+  "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

@@ -0,0 +1,13 @@
+{
+  "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}" }
+      }
+    }
+  }
+}