@utrecht/design-tokens 5.0.3 → 5.1.1

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";
@@ -902,9 +902,12 @@ export const utrechtRichTextAcquaintanceMarginBlockEnd = "24px";
 export const utrechtRichTextFriendMarginBlockEnd = "16px";
 export const utrechtRichTextBestFriendMarginBlockEnd = "8px";
 export const utrechtRichTextConfidantMarginBlockEnd = 0;
-export const utrechtRootBackgroundColor = "hsl(0 0% 95%)";
-export const utrechtRootColor = "hsl(0 0% 10%)";
+export const utrechtRootBackgroundColor = "hsl(0 0% 100%)";
+export const utrechtRootColor = "hsl(0 0% 0%)";
+export const utrechtRootFontFamily = "\"Noto Sans Variable\", \"Arial\", sans-serif";
 export const utrechtRootFontSizeAdjust = "0.54";
+export const utrechtRootFontSize = "1rem";
+export const utrechtRootLineHeight = "1.4";
 export const utrechtSearchBarButtonBackgroundColor = "hsl(0 100% 40%)";
 export const utrechtSearchBarButtonBorderColor = "hsl(0 100% 40%)";
 export const utrechtSearchBarButtonColor = "hsl(0 0% 100%)";
@@ -1255,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

@@ -911,7 +911,9 @@
             "syntax": "<number>",
             "inherits": true
           },
-          "nl.nldesignsystem.figma.supports-token": true
+          "nl.nldesignsystem.deprecated": true,
+          "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.redirect": "utrecht.root.font-weight"
         },
         "type": "fontWeights"
       },
@@ -3920,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",
@@ -6500,19 +6502,22 @@
       }
     },
     "root": {
-      "background-color": "hsl(0 0% 95%)",
-      "color": "hsl(0 0% 10%)",
-      "font-family": {
+      "background-color": "hsl(0 0% 100%)",
+      "color": "hsl(0 0% 0%)",
+      "font-family": "\"Noto Sans Variable\", \"Arial\", sans-serif",
+      "font-size-adjust": "0.54",
+      "font-size": "1rem",
+      "font-weight": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
-            "syntax": "*",
+            "syntax": "<number>",
             "inherits": true
           },
           "nl.nldesignsystem.figma.supports-token": false
         },
-        "type": "fontFamilies"
+        "type": "fontWeights"
       },
-      "font-size-adjust": "0.54"
+      "line-height": "1.4"
     },
     "search-bar": {
       "button": {
@@ -9303,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": {},
@@ -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

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": {},
@@ -5439,7 +5439,9 @@ export default [
         "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 @@ export default [
           "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 @@ export default [
         "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 @@ export default [
           "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 @@ export default [
         ],
         "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 @@ export default [
           ],
           "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 @@ 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": {},
@@ -26277,7 +26289,7 @@ export default [
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<url> | *",
+        "syntax": "*",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -26289,7 +26301,7 @@ export default [
     "original": {
       "$extensions": {
         "nl.nldesignsystem.css.property": {
-          "syntax": "<url> | *",
+          "syntax": "*",
           "inherits": true
         },
         "nl.nldesignsystem.figma.supports-token": false
@@ -29890,7 +29902,7 @@ export default [
       "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 @@ export default [
         "nl.nldesignsystem.figma.supports-token": false
       },
       "type": "color",
-      "value": "{utrecht.color.grey.95}"
+      "value": "{utrecht.color.white}"
     },
     "name": "utrechtRootBackgroundColor",
     "attributes": {},
@@ -29921,7 +29933,7 @@ export default [
       "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 @@ export default [
         "nl.nldesignsystem.figma.supports-token": false
       },
       "type": "color",
-      "value": "{utrecht.color.grey.10}"
+      "value": "{utrecht.color.black}"
     },
     "name": "utrechtRootColor",
     "attributes": {},
@@ -29943,6 +29955,80 @@ export default [
       "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 @@ export default [
       "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 @@ export default [
   {
     "$extensions": {
       "nl.nldesignsystem.css.property": {
-        "syntax": "<>",
+        "syntax": "<color>",
         "inherits": true
       },
       "nl.nldesignsystem.figma.supports-token": false
@@ -30507,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; }
@@ -657,7 +656,9 @@
 @property --utrecht-rich-text-stranger-margin-block-end { syntax: '<length>'; inherits: true; }
 @property --utrecht-root-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-root-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-root-font-size { syntax: '<length>'; inherits: true; }
 @property --utrecht-root-font-size-adjust { syntax: '<number>'; inherits: true; }
+@property --utrecht-root-line-height { syntax: '<length> | <number>'; inherits: true; }
 @property --utrecht-search-bar-button-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-search-bar-button-border-color { syntax: '<length>'; inherits: true; }
 @property --utrecht-search-bar-button-color { syntax: '<color>'; inherits: true; }
@@ -673,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; }