@utrecht/design-tokens 5.0.3 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @utrecht/design-tokens
 
+## 5.1.1
+
+### Patch Changes
+
+- 7e89444: Switch from `hsla()` and `rgba()` to modern syntax to include alpha in `hsl()` and `rgb()`.
+
+## 5.1.0
+
+### Minor Changes
+
+- cd0d8e6: Add design tokens for Root component, copied from Body component.
+
 ## 5.0.3
 
 ### Patch Changes

package/dist/_mixin-theme.scss

@@ -4,7 +4,7 @@
 
 @mixin utrecht-theme {
   --signalen-progress-bar-border-radius: 4px;
-  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
+  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 20%);
   --nl-number-badge-padding-inline: 1ex;
   --nl-number-badge-padding-block: 1ex;
   --nl-data-badge-border-radius: 0;
@@ -135,6 +135,7 @@
   --utrecht-search-bar-input-background-position-x: .5em;
   --utrecht-search-bar-button-hover-scale: 1;
   --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
+  --utrecht-root-line-height: 1.4;
   --utrecht-root-font-size-adjust: 0.54;
   --utrecht-rich-text-confidant-margin-block-end: 0;
   --utrecht-radio-button-border-radius: 0;
@@ -289,7 +290,7 @@
   --utrecht-form-toggle-border-radius: 10em;
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-color: transparent;
-  --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
+  --utrecht-form-toggle-accent-color: hsl(0 0% 48% / 100%);
   --utrecht-form-label-font-size: 1em;
   --utrecht-form-field-invalid-border-inline-start-width: 3px;
   --utrecht-form-control-block-size: 42px;
@@ -609,8 +610,10 @@
   --utrecht-search-bar-button-color: var(--utrecht-color-white);
   --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
-  --utrecht-root-color: var(--utrecht-color-grey-10);
-  --utrecht-root-background-color: var(--utrecht-color-grey-95);
+  --utrecht-root-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-root-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --utrecht-root-color: var(--utrecht-color-black);
+  --utrecht-root-background-color: var(--utrecht-color-white);
   --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
   --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);

package/dist/_mixin.scss

@@ -4,7 +4,7 @@
 
 @mixin utrecht-theme {
   --signalen-progress-bar-border-radius: 4px;
-  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
+  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 20%);
   --nl-number-badge-padding-inline: 1ex;
   --nl-number-badge-padding-block: 1ex;
   --nl-data-badge-border-radius: 0;
@@ -135,6 +135,7 @@
   --utrecht-search-bar-input-background-position-x: .5em;
   --utrecht-search-bar-button-hover-scale: 1;
   --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
+  --utrecht-root-line-height: 1.4;
   --utrecht-root-font-size-adjust: 0.54;
   --utrecht-rich-text-confidant-margin-block-end: 0;
   --utrecht-radio-button-border-radius: 0;
@@ -289,7 +290,7 @@
   --utrecht-form-toggle-border-radius: 10em;
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-color: transparent;
-  --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
+  --utrecht-form-toggle-accent-color: hsl(0 0% 48% / 100%);
   --utrecht-form-label-font-size: 1em;
   --utrecht-form-field-invalid-border-inline-start-width: 3px;
   --utrecht-form-control-block-size: 42px;
@@ -609,8 +610,10 @@
   --utrecht-search-bar-button-color: var(--utrecht-color-white);
   --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
-  --utrecht-root-color: var(--utrecht-color-grey-10);
-  --utrecht-root-background-color: var(--utrecht-color-grey-95);
+  --utrecht-root-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-root-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --utrecht-root-color: var(--utrecht-color-black);
+  --utrecht-root-background-color: var(--utrecht-color-white);
   --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
   --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);

package/dist/_variables.scss

@@ -2,7 +2,7 @@
 // Do not edit directly, this file was auto-generated.
 
 $signalen-progress-bar-border-radius: 4px;
-$of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
+$of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 20%);
 $nl-number-badge-padding-inline: 1ex;
 $nl-number-badge-padding-block: 1ex;
 $nl-data-badge-border-radius: 0;
@@ -133,6 +133,7 @@ $utrecht-search-bar-input-background-position-y: 50%;
 $utrecht-search-bar-input-background-position-x: .5em;
 $utrecht-search-bar-button-hover-scale: 1;
 $utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
+$utrecht-root-line-height: 1.4;
 $utrecht-root-font-size-adjust: 0.54;
 $utrecht-rich-text-confidant-margin-block-end: 0;
 $utrecht-radio-button-border-radius: 0;
@@ -287,7 +288,7 @@ $utrecht-form-toggle-border-width: 2px;
 $utrecht-form-toggle-border-radius: 10em;
 $utrecht-form-toggle-border-style: solid;
 $utrecht-form-toggle-border-color: transparent;
-$utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
+$utrecht-form-toggle-accent-color: hsl(0 0% 48% / 100%);
 $utrecht-form-label-font-size: 1em;
 $utrecht-form-field-invalid-border-inline-start-width: 3px;
 $utrecht-form-control-block-size: 42px;
@@ -607,8 +608,10 @@ $utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
 $utrecht-search-bar-button-color: $utrecht-color-white;
 $utrecht-search-bar-button-border-color: $utrecht-color-red-40;
 $utrecht-search-bar-button-background-color: $utrecht-color-red-40;
-$utrecht-root-color: $utrecht-color-grey-10;
-$utrecht-root-background-color: $utrecht-color-grey-95;
+$utrecht-root-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-root-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-root-color: $utrecht-color-black;
+$utrecht-root-background-color: $utrecht-color-white;
 $utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-xs;
 $utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-md;
 $utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-xl;

package/dist/dark/_mixin-theme.scss

@@ -4,7 +4,7 @@
 
 @mixin utrecht-theme--dark {
   --signalen-progress-bar-border-radius: 4px;
-  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
+  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 20%);
   --nl-number-badge-padding-inline: 1ex;
   --nl-number-badge-padding-block: 1ex;
   --nl-data-badge-border-radius: 0;
@@ -135,6 +135,7 @@
   --utrecht-search-bar-input-background-position-x: .5em;
   --utrecht-search-bar-button-hover-scale: 1;
   --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
+  --utrecht-root-line-height: 1.4;
   --utrecht-root-font-size-adjust: 0.54;
   --utrecht-rich-text-confidant-margin-block-end: 0;
   --utrecht-radio-button-border-radius: 0;
@@ -290,7 +291,7 @@
   --utrecht-form-toggle-border-radius: 10em;
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-color: transparent;
-  --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
+  --utrecht-form-toggle-accent-color: hsl(0 0% 48% / 100%);
   --utrecht-form-label-font-size: 1em;
   --utrecht-form-field-invalid-border-inline-start-width: 3px;
   --utrecht-form-control-block-size: 42px;
@@ -613,8 +614,10 @@
   --utrecht-search-bar-button-color: var(--utrecht-color-white);
   --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
-  --utrecht-root-color: var(--utrecht-color-grey-10);
-  --utrecht-root-background-color: var(--utrecht-color-grey-95);
+  --utrecht-root-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-root-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --utrecht-root-color: var(--utrecht-color-black);
+  --utrecht-root-background-color: var(--utrecht-color-white);
   --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
   --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);

package/dist/dark/_mixin.scss

@@ -4,7 +4,7 @@
 
 @mixin utrecht-theme--dark {
   --signalen-progress-bar-border-radius: 4px;
-  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
+  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 20%);
   --nl-number-badge-padding-inline: 1ex;
   --nl-number-badge-padding-block: 1ex;
   --nl-data-badge-border-radius: 0;
@@ -135,6 +135,7 @@
   --utrecht-search-bar-input-background-position-x: .5em;
   --utrecht-search-bar-button-hover-scale: 1;
   --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
+  --utrecht-root-line-height: 1.4;
   --utrecht-root-font-size-adjust: 0.54;
   --utrecht-rich-text-confidant-margin-block-end: 0;
   --utrecht-radio-button-border-radius: 0;
@@ -290,7 +291,7 @@
   --utrecht-form-toggle-border-radius: 10em;
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-color: transparent;
-  --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
+  --utrecht-form-toggle-accent-color: hsl(0 0% 48% / 100%);
   --utrecht-form-label-font-size: 1em;
   --utrecht-form-field-invalid-border-inline-start-width: 3px;
   --utrecht-form-control-block-size: 42px;
@@ -613,8 +614,10 @@
   --utrecht-search-bar-button-color: var(--utrecht-color-white);
   --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
-  --utrecht-root-color: var(--utrecht-color-grey-10);
-  --utrecht-root-background-color: var(--utrecht-color-grey-95);
+  --utrecht-root-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-root-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --utrecht-root-color: var(--utrecht-color-black);
+  --utrecht-root-background-color: var(--utrecht-color-white);
   --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
   --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);

package/dist/dark/_variables.scss

@@ -2,7 +2,7 @@
 // Do not edit directly, this file was auto-generated.
 
 $signalen-progress-bar-border-radius: 4px;
-$of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
+$of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 20%);
 $nl-number-badge-padding-inline: 1ex;
 $nl-number-badge-padding-block: 1ex;
 $nl-data-badge-border-radius: 0;
@@ -133,6 +133,7 @@ $utrecht-search-bar-input-background-position-y: 50%;
 $utrecht-search-bar-input-background-position-x: .5em;
 $utrecht-search-bar-button-hover-scale: 1;
 $utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
+$utrecht-root-line-height: 1.4;
 $utrecht-root-font-size-adjust: 0.54;
 $utrecht-rich-text-confidant-margin-block-end: 0;
 $utrecht-radio-button-border-radius: 0;
@@ -288,7 +289,7 @@ $utrecht-form-toggle-border-width: 2px;
 $utrecht-form-toggle-border-radius: 10em;
 $utrecht-form-toggle-border-style: solid;
 $utrecht-form-toggle-border-color: transparent;
-$utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
+$utrecht-form-toggle-accent-color: hsl(0 0% 48% / 100%);
 $utrecht-form-label-font-size: 1em;
 $utrecht-form-field-invalid-border-inline-start-width: 3px;
 $utrecht-form-control-block-size: 42px;
@@ -611,8 +612,10 @@ $utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
 $utrecht-search-bar-button-color: $utrecht-color-white;
 $utrecht-search-bar-button-border-color: $utrecht-color-red-40;
 $utrecht-search-bar-button-background-color: $utrecht-color-red-40;
-$utrecht-root-color: $utrecht-color-grey-10;
-$utrecht-root-background-color: $utrecht-color-grey-95;
+$utrecht-root-font-size: $utrecht-typography-scale-md-font-size;
+$utrecht-root-font-family: $utrecht-typography-sans-serif-font-family;
+$utrecht-root-color: $utrecht-color-black;
+$utrecht-root-background-color: $utrecht-color-white;
 $utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-xs;
 $utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-md;
 $utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-xl;

package/dist/dark/index.cjs

@@ -532,7 +532,7 @@ module.exports = {
   "utrechtFormLabelFontSize": "1em",
   "utrechtFormLabelCheckboxFontWeight": "400",
   "utrechtFormLabelRadioFontWeight": "400",
-  "utrechtFormToggleAccentColor": "hsla(0 0% 48% / 100%)",
+  "utrechtFormToggleAccentColor": "hsl(0 0% 48% / 100%)",
   "utrechtFormToggleBackgroundColor": "hsl(0 0% 100%)",
   "utrechtFormToggleBorderColor": "transparent",
   "utrechtFormToggleBorderStyle": "solid",
@@ -903,9 +903,12 @@ module.exports = {
   "utrechtRichTextFriendMarginBlockEnd": "16px",
   "utrechtRichTextBestFriendMarginBlockEnd": "8px",
   "utrechtRichTextConfidantMarginBlockEnd": 0,
-  "utrechtRootBackgroundColor": "hsl(0 0% 95%)",
-  "utrechtRootColor": "hsl(0 0% 10%)",
+  "utrechtRootBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtRootColor": "hsl(0 0% 0%)",
+  "utrechtRootFontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
   "utrechtRootFontSizeAdjust": "0.54",
+  "utrechtRootFontSize": "1rem",
+  "utrechtRootLineHeight": "1.4",
   "utrechtSearchBarButtonBackgroundColor": "hsl(0 100% 40%)",
   "utrechtSearchBarButtonBorderColor": "hsl(0 100% 40%)",
   "utrechtSearchBarButtonColor": "hsl(0 0% 100%)",
@@ -1256,7 +1259,7 @@ module.exports = {
   "ofPageFooterBg": "hsl(0 100% 40%)",
   "ofPageFooterFg": "hsl(0 0% 100%)",
   "ofProgressIndicatorBackgroundColor": "hsl(0 0% 15%)",
-  "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)",
+  "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgb(0 0 0 / 20%)",
   "signalenModalDialogBackgroundColor": "hsl(0 0% 100%)",
   "signalenModalDialogColor": "hsl(0 0% 0%)",
   "signalenProgressBarBorderRadius": "4px"

package/dist/dark/index.css

@@ -9,7 +9,7 @@
 .utrecht-theme--color-scheme-dark,
 .utrecht-theme--color-scheme-dark ::backdrop {
   --signalen-progress-bar-border-radius: 4px;
-  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
+  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 20%);
   --nl-number-badge-padding-inline: 1ex;
   --nl-number-badge-padding-block: 1ex;
   --nl-data-badge-border-radius: 0;
@@ -140,6 +140,7 @@
   --utrecht-search-bar-input-background-position-x: .5em;
   --utrecht-search-bar-button-hover-scale: 1;
   --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
+  --utrecht-root-line-height: 1.4;
   --utrecht-root-font-size-adjust: 0.54;
   --utrecht-rich-text-confidant-margin-block-end: 0;
   --utrecht-radio-button-border-radius: 0;
@@ -295,7 +296,7 @@
   --utrecht-form-toggle-border-radius: 10em;
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-color: transparent;
-  --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
+  --utrecht-form-toggle-accent-color: hsl(0 0% 48% / 100%);
   --utrecht-form-label-font-size: 1em;
   --utrecht-form-field-invalid-border-inline-start-width: 3px;
   --utrecht-form-control-block-size: 42px;
@@ -618,8 +619,10 @@
   --utrecht-search-bar-button-color: var(--utrecht-color-white);
   --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
   --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
-  --utrecht-root-color: var(--utrecht-color-grey-10);
-  --utrecht-root-background-color: var(--utrecht-color-grey-95);
+  --utrecht-root-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-root-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --utrecht-root-color: var(--utrecht-color-black);
+  --utrecht-root-background-color: var(--utrecht-color-white);
   --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);
   --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-xl);

package/dist/dark/index.d.ts

@@ -971,7 +971,10 @@ export const utrechtRichTextBestFriendMarginBlockEnd : string;
 export const utrechtRichTextConfidantMarginBlockEnd : string;
 export const utrechtRootBackgroundColor : string;
 export const utrechtRootColor : string;
+export const utrechtRootFontFamily : string;
 export const utrechtRootFontSizeAdjust : string;
+export const utrechtRootFontSize : string;
+export const utrechtRootLineHeight : string;
 export const utrechtSearchBarButtonBackgroundColor : string;
 export const utrechtSearchBarButtonBorderColor : string;
 export const utrechtSearchBarButtonColor : string;

package/dist/dark/index.flat.json

@@ -108,7 +108,7 @@
   "ofPageFooterBg": "hsl(0 100% 40%)",
   "ofPageFooterFg": "hsl(0 0% 100%)",
   "ofProgressIndicatorBackgroundColor": "hsl(0 0% 15%)",
-  "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)",
+  "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgb(0 0 0 / 20%)",
   "signalenModalDialogBackgroundColor": "hsl(0 0% 100%)",
   "signalenModalDialogColor": "hsl(0 0% 0%)",
   "signalenProgressBarBorderRadius": "4px",
@@ -640,7 +640,7 @@
   "utrechtFormLabelFontSize": "1em",
   "utrechtFormLabelFontWeight": "700",
   "utrechtFormLabelRadioFontWeight": "400",
-  "utrechtFormToggleAccentColor": "hsla(0 0% 48% / 100%)",
+  "utrechtFormToggleAccentColor": "hsl(0 0% 48% / 100%)",
   "utrechtFormToggleBackgroundColor": "hsl(0 0% 100%)",
   "utrechtFormToggleBorderColor": "transparent",
   "utrechtFormToggleBorderRadius": "10em",
@@ -1004,9 +1004,12 @@
   "utrechtRichTextConfidantMarginBlockEnd": 0,
   "utrechtRichTextFriendMarginBlockEnd": "16px",
   "utrechtRichTextStrangerMarginBlockEnd": "32px",
-  "utrechtRootBackgroundColor": "hsl(0 0% 95%)",
-  "utrechtRootColor": "hsl(0 0% 10%)",
+  "utrechtRootBackgroundColor": "hsl(0 0% 100%)",
+  "utrechtRootColor": "hsl(0 0% 0%)",
+  "utrechtRootFontFamily": "\"Noto Sans Variable\", \"Arial\", sans-serif",
+  "utrechtRootFontSize": "1rem",
   "utrechtRootFontSizeAdjust": "0.54",
+  "utrechtRootLineHeight": "1.4",
   "utrechtSearchBarButtonBackgroundColor": "hsl(0 100% 40%)",
   "utrechtSearchBarButtonBorderColor": "hsl(0 100% 40%)",
   "utrechtSearchBarButtonColor": "hsl(0 0% 100%)",

package/dist/dark/index.json

@@ -2419,11 +2419,11 @@
     ]
   },
   {
-    "value": "0px 0px 2px 0px rgba(0 0 0 / 20%)",
+    "value": "0px 0px 2px 0px rgb(0 0 0 / 20%)",
     "filePath": "src/component/of/progress-indicator.tokens.json",
     "isSource": true,
     "original": {
-      "value": "0px 0px 2px 0px rgba(0 0 0 / 20%)"
+      "value": "0px 0px 2px 0px rgb(0 0 0 / 20%)"
     },
     "name": "ofProgressIndicatorMobileBoxShadow",
     "attributes": {},
@@ -5439,7 +5439,9 @@
         "syntax": "*",
         "inherits": true
       },
+      "nl.nldesignsystem.deprecated": true,
       "nl.nldesignsystem.figma.supports-token": true,
+      "nl.nldesignsystem.redirect": "utrecht.root.font-family",
       "studio.tokens": {
         "originalType": "fontFamilies"
       }
@@ -5454,7 +5456,9 @@
           "syntax": "*",
           "inherits": true
         },
+        "nl.nldesignsystem.deprecated": true,
         "nl.nldesignsystem.figma.supports-token": true,
+        "nl.nldesignsystem.redirect": "utrecht.root.font-family",
         "studio.tokens": {
           "originalType": "fontFamilies"
         }
@@ -5476,7 +5480,9 @@
         "syntax": "<length>",
         "inherits": true
       },
+      "nl.nldesignsystem.deprecated": true,
       "nl.nldesignsystem.figma.supports-token": true,
+      "nl.nldesignsystem.redirect": "utrecht.root.font-size",
       "studio.tokens": {
         "originalType": "fontSizes"
       }
@@ -5491,7 +5497,9 @@
           "syntax": "<length>",
           "inherits": true
         },
+        "nl.nldesignsystem.deprecated": true,
         "nl.nldesignsystem.figma.supports-token": true,
+        "nl.nldesignsystem.redirect": "utrecht.root.font-size",
         "studio.tokens": {
           "originalType": "fontSizes"
         }
@@ -5516,7 +5524,9 @@
         ],
         "inherits": true
       },
+      "nl.nldesignsystem.deprecated": true,
       "nl.nldesignsystem.figma.supports-token": true,
+      "nl.nldesignsystem.redirect": "utrecht.root.font-family",
       "studio.tokens": {
         "originalType": "lineHeights"
       }
@@ -5534,7 +5544,9 @@
           ],
           "inherits": true
         },
+        "nl.nldesignsystem.deprecated": true,
         "nl.nldesignsystem.figma.supports-token": true,
+        "nl.nldesignsystem.redirect": "utrecht.root.font-family",
         "studio.tokens": {
           "originalType": "lineHeights"
         }
@@ -17968,11 +17980,11 @@
     ]
   },
   {
-    "value": "hsla(0 0% 48% / 100%)",
+    "value": "hsl(0 0% 48% / 100%)",
     "filePath": "src/dark/component/tokens.json",
     "isSource": true,
     "original": {
-      "value": "hsla(0 0% 48% / 100%)"
+      "value": "hsl(0 0% 48% / 100%)"
     },
     "name": "utrechtFormToggleAccentColor",
     "attributes": {},
@@ -26277,7 +26289,7 @@
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<url> | *",
+        "syntax": "*",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -26289,7 +26301,7 @@
     "original": {
       "$extensions": {
         "nl.nldesignsystem.css.property": {
-          "syntax": "<url> | *",
+          "syntax": "*",
           "inherits": true
         },
         "nl.nldesignsystem.figma.supports-token": false
@@ -29890,7 +29902,7 @@
       "nl.nldesignsystem.figma.supports-token": false
     },
     "type": "color",
-    "value": "hsl(0 0% 95%)",
+    "value": "hsl(0 0% 100%)",
     "filePath": "src/component/utrecht/root.tokens.json",
     "isSource": true,
     "original": {
@@ -29902,7 +29914,7 @@
         "nl.nldesignsystem.figma.supports-token": false
       },
       "type": "color",
-      "value": "{utrecht.color.grey.95}"
+      "value": "{utrecht.color.white}"
     },
     "name": "utrechtRootBackgroundColor",
     "attributes": {},
@@ -29921,7 +29933,7 @@
       "nl.nldesignsystem.figma.supports-token": false
     },
     "type": "color",
-    "value": "hsl(0 0% 10%)",
+    "value": "hsl(0 0% 0%)",
     "filePath": "src/component/utrecht/root.tokens.json",
     "isSource": true,
     "original": {
@@ -29933,7 +29945,7 @@
         "nl.nldesignsystem.figma.supports-token": false
       },
       "type": "color",
-      "value": "{utrecht.color.grey.10}"
+      "value": "{utrecht.color.black}"
     },
     "name": "utrechtRootColor",
     "attributes": {},
@@ -29943,6 +29955,80 @@
       "color"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "*",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "fontFamilies"
+      }
+    },
+    "type": "fontFamily",
+    "value": "\"Noto Sans Variable\", \"Arial\", sans-serif",
+    "filePath": "src/component/utrecht/root.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "*",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "fontFamilies"
+        }
+      },
+      "type": "fontFamily",
+      "value": "{utrecht.typography.sans-serif.font-family}"
+    },
+    "name": "utrechtRootFontFamily",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "root",
+      "font-family"
+    ]
+  },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<length>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "fontSizes"
+      }
+    },
+    "type": "fontSize",
+    "value": "1rem",
+    "filePath": "src/component/utrecht/root.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<length>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "fontSizes"
+        }
+      },
+      "type": "fontSize",
+      "value": "{utrecht.typography.scale.md.font-size}"
+    },
+    "name": "utrechtRootFontSize",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "root",
+      "font-size"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
@@ -29974,6 +30060,49 @@
       "font-size-adjust"
     ]
   },
+  {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": [
+          "<length>",
+          "<number>"
+        ],
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false,
+      "studio.tokens": {
+        "originalType": "lineHeights"
+      }
+    },
+    "type": "lineHeight",
+    "value": "1.4",
+    "filePath": "src/component/utrecht/root.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": [
+            "<length>",
+            "<number>"
+          ],
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false,
+        "studio.tokens": {
+          "originalType": "lineHeights"
+        }
+      },
+      "type": "lineHeight",
+      "value": "1.4"
+    },
+    "name": "utrechtRootLineHeight",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "root",
+      "line-height"
+    ]
+  },
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
@@ -30495,7 +30624,7 @@
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<>",
+        "syntax": "<color>",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -30507,7 +30636,7 @@
     "original": {
       "$extensions": {
         "nl.nldesignsystem.css.property": {
-          "syntax": "<>",
+          "syntax": "<color>",
           "inherits": true
         },
         "nl.nldesignsystem.figma.supports-token": false