@utrecht/design-tokens 5.0.2 → 5.1.0

package/dist/index.css

@@ -162,6 +162,8 @@
   --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;
   --utrecht-radio-button-invalid-border-width: 2px;
@@ -635,8 +637,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);
@@ -1420,6 +1424,8 @@
     --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;
     --utrecht-radio-button-invalid-border-width: 2px;
@@ -1897,8 +1903,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/index.d.ts

@@ -962,6 +962,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/index.flat.json

@@ -995,8 +995,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/index.json

@@ -5647,7 +5647,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"
       }
@@ -5662,7 +5664,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"
         }
@@ -5684,7 +5688,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"
       }
@@ -5699,7 +5705,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"
         }
@@ -5724,7 +5732,9 @@
         ],
         "inherits": true
       },
+      "nl.nldesignsystem.deprecated": true,
       "nl.nldesignsystem.figma.supports-token": true,
+      "nl.nldesignsystem.redirect": "utrecht.root.font-family",
       "studio.tokens": {
         "originalType": "lineHeights"
       }
@@ -5742,7 +5752,9 @@
           ],
           "inherits": true
         },
+        "nl.nldesignsystem.deprecated": true,
         "nl.nldesignsystem.figma.supports-token": true,
+        "nl.nldesignsystem.redirect": "utrecht.root.font-family",
         "studio.tokens": {
           "originalType": "lineHeights"
         }
@@ -30975,7 +30987,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": {
@@ -30987,7 +30999,7 @@
         "nl.nldesignsystem.figma.supports-token": false
       },
       "type": "color",
-      "value": "{utrecht.color.grey.95}"
+      "value": "{utrecht.color.white}"
     },
     "name": "utrechtRootBackgroundColor",
     "attributes": {},
@@ -31006,7 +31018,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": {
@@ -31018,7 +31030,7 @@
         "nl.nldesignsystem.figma.supports-token": false
       },
       "type": "color",
-      "value": "{utrecht.color.grey.10}"
+      "value": "{utrecht.color.black}"
     },
     "name": "utrechtRootColor",
     "attributes": {},
@@ -31028,6 +31040,154 @@
       "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": {
+        "syntax": "<number>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "other",
+    "value": "0.54",
+    "filePath": "src/component/utrecht/root.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<number>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "other",
+      "value": "0.54"
+    },
+    "name": "utrechtRootFontSizeAdjust",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "root",
+      "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": {

package/dist/index.mjs

@@ -893,8 +893,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%)";

package/dist/index.tokens.json

@@ -907,7 +907,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"
       },
@@ -6496,18 +6498,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"
+      },
+      "line-height": "1.4"
     },
     "search-bar": {
       "button": {

package/dist/list.json

@@ -5647,7 +5647,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"
       }
@@ -5662,7 +5664,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"
         }
@@ -5684,7 +5688,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"
       }
@@ -5699,7 +5705,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"
         }
@@ -5724,7 +5732,9 @@
         ],
         "inherits": true
       },
+      "nl.nldesignsystem.deprecated": true,
       "nl.nldesignsystem.figma.supports-token": true,
+      "nl.nldesignsystem.redirect": "utrecht.root.font-family",
       "studio.tokens": {
         "originalType": "lineHeights"
       }
@@ -5742,7 +5752,9 @@
           ],
           "inherits": true
         },
+        "nl.nldesignsystem.deprecated": true,
         "nl.nldesignsystem.figma.supports-token": true,
+        "nl.nldesignsystem.redirect": "utrecht.root.font-family",
         "studio.tokens": {
           "originalType": "lineHeights"
         }
@@ -30975,7 +30987,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": {
@@ -30987,7 +30999,7 @@
         "nl.nldesignsystem.figma.supports-token": false
       },
       "type": "color",
-      "value": "{utrecht.color.grey.95}"
+      "value": "{utrecht.color.white}"
     },
     "name": "utrechtRootBackgroundColor",
     "attributes": {},
@@ -31006,7 +31018,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": {
@@ -31018,7 +31030,7 @@
         "nl.nldesignsystem.figma.supports-token": false
       },
       "type": "color",
-      "value": "{utrecht.color.grey.10}"
+      "value": "{utrecht.color.black}"
     },
     "name": "utrechtRootColor",
     "attributes": {},
@@ -31028,6 +31040,154 @@
       "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": {
+        "syntax": "<number>",
+        "inherits": true
+      },
+      "nl.nldesignsystem.figma.supports-token": false
+    },
+    "type": "other",
+    "value": "0.54",
+    "filePath": "src/component/utrecht/root.tokens.json",
+    "isSource": true,
+    "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<number>",
+          "inherits": true
+        },
+        "nl.nldesignsystem.figma.supports-token": false
+      },
+      "type": "other",
+      "value": "0.54"
+    },
+    "name": "utrechtRootFontSizeAdjust",
+    "attributes": {},
+    "path": [
+      "utrecht",
+      "root",
+      "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": {