@utrecht/design-tokens 5.1.0 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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;
@@ -290,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;

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;
@@ -290,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;

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;
@@ -288,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;

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;
@@ -291,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;

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;
@@ -291,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;

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;
@@ -289,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;

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",
@@ -1259,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;
@@ -296,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;

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",

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": {},
@@ -17980,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": {},
@@ -26289,7 +26289,7 @@
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<url> | *",
+        "syntax": "*",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -26301,7 +26301,7 @@
     "original": {
       "$extensions": {
         "nl.nldesignsystem.css.property": {
-          "syntax": "<url> | *",
+          "syntax": "*",
           "inherits": true
         },
         "nl.nldesignsystem.figma.supports-token": false
@@ -30624,7 +30624,7 @@
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<>",
+        "syntax": "<color>",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -30636,7 +30636,7 @@
     "original": {
       "$extensions": {
         "nl.nldesignsystem.css.property": {
-          "syntax": "<>",
+          "syntax": "<color>",
           "inherits": true
         },
         "nl.nldesignsystem.figma.supports-token": false

package/dist/dark/index.mjs

@@ -531,7 +531,7 @@ export const utrechtFormLabelFontWeight = "700";
 export const utrechtFormLabelFontSize = "1em";
 export const utrechtFormLabelCheckboxFontWeight = "400";
 export const utrechtFormLabelRadioFontWeight = "400";
-export const utrechtFormToggleAccentColor = "hsla(0 0% 48% / 100%)";
+export const utrechtFormToggleAccentColor = "hsl(0 0% 48% / 100%)";
 export const utrechtFormToggleBackgroundColor = "hsl(0 0% 100%)";
 export const utrechtFormToggleBorderColor = "transparent";
 export const utrechtFormToggleBorderStyle = "solid";
@@ -1258,7 +1258,7 @@ export const ofLayoutBg = "hsl(0 0% 15%)";
 export const ofPageFooterBg = "hsl(0 100% 40%)";
 export const ofPageFooterFg = "hsl(0 0% 100%)";
 export const ofProgressIndicatorBackgroundColor = "hsl(0 0% 15%)";
-export const ofProgressIndicatorMobileBoxShadow = "0px 0px 2px 0px rgba(0 0 0 / 20%)";
+export const ofProgressIndicatorMobileBoxShadow = "0px 0px 2px 0px rgb(0 0 0 / 20%)";
 export const signalenModalDialogBackgroundColor = "hsl(0 0% 100%)";
 export const signalenModalDialogColor = "hsl(0 0% 0%)";
 export const signalenProgressBarBorderRadius = "4px";

package/dist/dark/index.tokens.json

@@ -3922,7 +3922,7 @@
       }
     },
     "form-toggle": {
-      "accent-color": "hsla(0 0% 48% / 100%)",
+      "accent-color": "hsl(0 0% 48% / 100%)",
       "background-color": "hsl(0 0% 100%)",
       "border-color": "transparent",
       "border-style": "solid",
@@ -9308,7 +9308,7 @@
     "progress-indicator": {
       "background-color": "hsl(0 0% 15%)",
       "mobile": {
-        "box-shadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)"
+        "box-shadow": "0px 0px 2px 0px rgb(0 0 0 / 20%)"
       }
     }
   },

package/dist/dark/list.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": {},
@@ -17980,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": {},
@@ -26289,7 +26289,7 @@
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<url> | *",
+        "syntax": "*",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -26301,7 +26301,7 @@
     "original": {
       "$extensions": {
         "nl.nldesignsystem.css.property": {
-          "syntax": "<url> | *",
+          "syntax": "*",
           "inherits": true
         },
         "nl.nldesignsystem.figma.supports-token": false
@@ -30624,7 +30624,7 @@
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<>",
+        "syntax": "<color>",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -30636,7 +30636,7 @@
     "original": {
       "$extensions": {
         "nl.nldesignsystem.css.property": {
-          "syntax": "<>",
+          "syntax": "<color>",
           "inherits": true
         },
         "nl.nldesignsystem.figma.supports-token": false

package/dist/dark/list.mjs

@@ -2419,11 +2419,11 @@ export default [
     ]
   },
   {
-    "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": {},
@@ -17980,11 +17980,11 @@ export default [
     ]
   },
   {
-    "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": {},
@@ -26289,7 +26289,7 @@ export default [
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<url> | *",
+        "syntax": "*",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -26301,7 +26301,7 @@ export default [
     "original": {
       "$extensions": {
         "nl.nldesignsystem.css.property": {
-          "syntax": "<url> | *",
+          "syntax": "*",
           "inherits": true
         },
         "nl.nldesignsystem.figma.supports-token": false
@@ -30624,7 +30624,7 @@ export default [
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<>",
+        "syntax": "<color>",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -30636,7 +30636,7 @@ export default [
     "original": {
       "$extensions": {
         "nl.nldesignsystem.css.property": {
-          "syntax": "<>",
+          "syntax": "<color>",
           "inherits": true
         },
         "nl.nldesignsystem.figma.supports-token": false

package/dist/dark/property.css

@@ -563,7 +563,6 @@
 @property --utrecht-page-content-padding-block-end { syntax: '<length>'; inherits: true; }
 @property --utrecht-page-content-padding-block-start { syntax: '<length>'; inherits: true; }
 @property --utrecht-page-footer-background-color { syntax: '<color>'; inherits: true; }
-@property --utrecht-page-footer-background-image { syntax: '<url> | *'; inherits: true; }
 @property --utrecht-page-footer-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-page-footer-content-padding-block-end { syntax: '<length>'; inherits: true; }
 @property --utrecht-page-footer-content-padding-block-start { syntax: '<length>'; inherits: true; }
@@ -675,7 +674,7 @@
 @property --utrecht-search-bar-input-background-position-x { syntax: '<length>'; inherits: true; }
 @property --utrecht-search-bar-input-background-position-y { syntax: '<length>'; inherits: true; }
 @property --utrecht-search-bar-input-background-size { syntax: '<length>'; inherits: true; }
-@property --utrecht-search-bar-input-border-color { syntax: '<>'; inherits: true; }
+@property --utrecht-search-bar-input-border-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-search-bar-input-padding-inline-start { syntax: '<length>'; inherits: true; }
 @property --utrecht-search-bar-list-item-is-active-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-search-bar-list-item-is-active-color { syntax: '<color>'; inherits: true; }

package/dist/dark/root.css

@@ -282,7 +282,7 @@
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-radius: 10em;
   --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-read-only-border-color: transparent;
@@ -442,7 +442,7 @@
   --utrecht-accordion-button-border-color: transparent;
   --utrecht-accordion-button-active-border-color: transparent;
   --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;

package/dist/dark/theme-prince-xml.css

@@ -4,7 +4,7 @@
 
 .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;
@@ -291,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;

package/dist/dark/theme.css

@@ -282,7 +282,7 @@
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-radius: 10em;
   --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-read-only-border-color: transparent;
@@ -442,7 +442,7 @@
   --utrecht-accordion-button-border-color: transparent;
   --utrecht-accordion-button-active-border-color: transparent;
   --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;

package/dist/dark/tokens.cjs

@@ -19605,11 +19605,11 @@ module.exports = {
     },
     "form-toggle": {
       "accent-color": {
-        "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": "accent-color",
         "attributes": {},
@@ -29539,7 +29539,7 @@ module.exports = {
       "background-image": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
-            "syntax": "<url> | *",
+            "syntax": "*",
             "inherits": true
           },
           "nl.nldesignsystem.figma.supports-token": false
@@ -29551,7 +29551,7 @@ module.exports = {
         "original": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<url> | *",
+              "syntax": "*",
               "inherits": true
             },
             "nl.nldesignsystem.figma.supports-token": false
@@ -34305,7 +34305,7 @@ module.exports = {
         "border-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<>",
+              "syntax": "<color>",
               "inherits": true
             },
             "nl.nldesignsystem.figma.supports-token": false
@@ -34317,7 +34317,7 @@ module.exports = {
           "original": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<>",
+                "syntax": "<color>",
                 "inherits": true
               },
               "nl.nldesignsystem.figma.supports-token": false
@@ -45059,11 +45059,11 @@ module.exports = {
       },
       "mobile": {
         "box-shadow": {
-          "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": "box-shadow",
           "attributes": {},

package/dist/dark/tokens.json

@@ -19601,11 +19601,11 @@
     },
     "form-toggle": {
       "accent-color": {
-        "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": {},
@@ -29535,7 +29535,7 @@
       "background-image": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
-            "syntax": "<url> | *",
+            "syntax": "*",
             "inherits": true
           },
           "nl.nldesignsystem.figma.supports-token": false
@@ -29547,7 +29547,7 @@
         "original": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<url> | *",
+              "syntax": "*",
               "inherits": true
             },
             "nl.nldesignsystem.figma.supports-token": false
@@ -34301,7 +34301,7 @@
         "border-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<>",
+              "syntax": "<color>",
               "inherits": true
             },
             "nl.nldesignsystem.figma.supports-token": false
@@ -34313,7 +34313,7 @@
           "original": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<>",
+                "syntax": "<color>",
                 "inherits": true
               },
               "nl.nldesignsystem.figma.supports-token": false
@@ -45055,11 +45055,11 @@
       },
       "mobile": {
         "box-shadow": {
-          "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": {},

package/dist/dark/variables.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",
@@ -1259,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/variables.css

@@ -282,7 +282,7 @@
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-radius: 10em;
   --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-read-only-border-color: transparent;
@@ -442,7 +442,7 @@
   --utrecht-accordion-button-border-color: transparent;
   --utrecht-accordion-button-active-border-color: transparent;
   --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;