@utrecht/design-tokens 5.0.2 → 5.1.0

package/dist/dark/tokens.cjs

@@ -3582,7 +3582,9 @@ module.exports = {
             "syntax": "*",
             "inherits": true
           },
+          "nl.nldesignsystem.deprecated": true,
           "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.redirect": "utrecht.root.font-family",
           "studio.tokens": {
             "originalType": "fontFamilies"
           }
@@ -3597,7 +3599,9 @@ module.exports = {
               "syntax": "*",
               "inherits": true
             },
+            "nl.nldesignsystem.deprecated": true,
             "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.redirect": "utrecht.root.font-family",
             "studio.tokens": {
               "originalType": "fontFamilies"
             }
@@ -3619,7 +3623,9 @@ module.exports = {
             "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"
           }
@@ -3634,7 +3640,9 @@ module.exports = {
               "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"
             }
@@ -3656,7 +3664,9 @@ module.exports = {
             "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"
       },
@@ -3669,7 +3679,9 @@ module.exports = {
             ],
             "inherits": true
           },
+          "nl.nldesignsystem.deprecated": true,
           "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.redirect": "utrecht.root.font-family",
           "studio.tokens": {
             "originalType": "lineHeights"
           }
@@ -3687,7 +3699,9 @@ module.exports = {
               ],
               "inherits": true
             },
+            "nl.nldesignsystem.deprecated": true,
             "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.redirect": "utrecht.root.font-family",
             "studio.tokens": {
               "originalType": "lineHeights"
             }
@@ -33822,7 +33836,7 @@ module.exports = {
           "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": {
@@ -33834,7 +33848,7 @@ module.exports = {
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "color",
-          "value": "{utrecht.color.grey.95}"
+          "value": "{utrecht.color.white}"
         },
         "name": "background-color",
         "attributes": {},
@@ -33853,7 +33867,7 @@ module.exports = {
           "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": {
@@ -33865,7 +33879,7 @@ module.exports = {
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "color",
-          "value": "{utrecht.color.grey.10}"
+          "value": "{utrecht.color.black}"
         },
         "name": "color",
         "attributes": {},
@@ -33881,9 +33895,157 @@ module.exports = {
             "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": "font-family",
+        "attributes": {},
+        "path": [
+          "utrecht",
+          "root",
+          "font-family"
+        ]
+      },
+      "font-size-adjust": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
           "nl.nldesignsystem.figma.supports-token": false
         },
-        "type": "fontFamilies"
+        "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": "font-size-adjust",
+        "attributes": {},
+        "path": [
+          "utrecht",
+          "root",
+          "font-size-adjust"
+        ]
+      },
+      "font-size": {
+        "$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": "font-size",
+        "attributes": {},
+        "path": [
+          "utrecht",
+          "root",
+          "font-size"
+        ]
+      },
+      "font-weight": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "$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": "line-height",
+        "attributes": {},
+        "path": [
+          "utrecht",
+          "root",
+          "line-height"
+        ]
       }
     },
     "search-bar": {

package/dist/dark/tokens.d.ts

@@ -4081,11 +4081,15 @@ declare const tokens: {
     "root": {
       "background-color": DesignToken,
       "color": DesignToken,
-      "font-family": {
+      "font-family": DesignToken,
+      "font-size-adjust": DesignToken,
+      "font-size": DesignToken,
+      "font-weight": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {}
         }
-      }
+      },
+      "line-height": DesignToken
     },
     "search-bar": {
       "button": {

package/dist/dark/tokens.json

@@ -3578,7 +3578,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"
           }
@@ -3593,7 +3595,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"
             }
@@ -3615,7 +3619,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"
           }
@@ -3630,7 +3636,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"
             }
@@ -3652,7 +3660,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"
       },
@@ -3665,7 +3675,9 @@
             ],
             "inherits": true
           },
+          "nl.nldesignsystem.deprecated": true,
           "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.redirect": "utrecht.root.font-family",
           "studio.tokens": {
             "originalType": "lineHeights"
           }
@@ -3683,7 +3695,9 @@
               ],
               "inherits": true
             },
+            "nl.nldesignsystem.deprecated": true,
             "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.redirect": "utrecht.root.font-family",
             "studio.tokens": {
               "originalType": "lineHeights"
             }
@@ -33818,7 +33832,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": {
@@ -33830,7 +33844,7 @@
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "color",
-          "value": "{utrecht.color.grey.95}"
+          "value": "{utrecht.color.white}"
         },
         "name": "utrechtRootBackgroundColor",
         "attributes": {},
@@ -33849,7 +33863,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": {
@@ -33861,7 +33875,7 @@
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "color",
-          "value": "{utrecht.color.grey.10}"
+          "value": "{utrecht.color.black}"
         },
         "name": "utrechtRootColor",
         "attributes": {},
@@ -33877,9 +33891,157 @@
             "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"
+        ]
+      },
+      "font-size-adjust": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
           "nl.nldesignsystem.figma.supports-token": false
         },
-        "type": "fontFamilies"
+        "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"
+        ]
+      },
+      "font-size": {
+        "$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"
+        ]
+      },
+      "font-weight": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "$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"
+        ]
       }
     },
     "search-bar": {

package/dist/dark/variables.cjs

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

package/dist/dark/variables.css

@@ -117,6 +117,8 @@
   --utrecht-search-bar-dropdown-border-width: 1px;
   --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-size: 24px;
   --utrecht-radio-button-margin-inline-end: 12px;
@@ -541,8 +543,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-stranger-margin-block-end: var(--utrecht-space-block-2xl);
   --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-md);
   --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-xs);

package/dist/dark/variables.d.ts

@@ -971,6 +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/variables.json

@@ -1004,8 +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/variables.less

@@ -133,6 +133,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;
@@ -610,8 +612,10 @@
 @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/variables.mjs

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

package/dist/index.cjs

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