@utrecht/design-tokens 5.0.2 → 5.1.0

package/dist/tokens.json

@@ -3784,7 +3784,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"
           }
@@ -3799,7 +3801,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"
             }
@@ -3821,7 +3825,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"
           }
@@ -3836,7 +3842,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"
             }
@@ -3858,7 +3866,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"
       },
@@ -3871,7 +3881,9 @@
             ],
             "inherits": true
           },
+          "nl.nldesignsystem.deprecated": true,
           "nl.nldesignsystem.figma.supports-token": true,
+          "nl.nldesignsystem.redirect": "utrecht.root.font-family",
           "studio.tokens": {
             "originalType": "lineHeights"
           }
@@ -3889,7 +3901,9 @@
               ],
               "inherits": true
             },
+            "nl.nldesignsystem.deprecated": true,
             "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.redirect": "utrecht.root.font-family",
             "studio.tokens": {
               "originalType": "lineHeights"
             }
@@ -34908,7 +34922,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": {
@@ -34920,7 +34934,7 @@
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "color",
-          "value": "{utrecht.color.grey.95}"
+          "value": "{utrecht.color.white}"
         },
         "name": "utrechtRootBackgroundColor",
         "attributes": {},
@@ -34939,7 +34953,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": {
@@ -34951,7 +34965,7 @@
             "nl.nldesignsystem.figma.supports-token": false
           },
           "type": "color",
-          "value": "{utrecht.color.grey.10}"
+          "value": "{utrecht.color.black}"
         },
         "name": "utrechtRootColor",
         "attributes": {},
@@ -34967,9 +34981,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/variables.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%)",

package/dist/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;
@@ -537,8 +539,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/variables.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/variables.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/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;
@@ -606,8 +608,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/variables.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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.2",
+  "version": "5.1.0",
   "author": "Community for NL Design System",
   "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "SEE LICENSE IN ./LICENSE.md",

package/src/component/utrecht/root.tokens.json

@@ -1,8 +1,12 @@
 {
   "utrecht": {
     "root": {
-      "background-color": { "value": "{utrecht.color.grey.95}" },
-      "color": { "value": "{utrecht.color.grey.10}" }
+      "background-color": { "value": "{utrecht.color.white}" },
+      "color": { "value": "{utrecht.color.black}" },
+      "font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
+      "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
+      "font-size-adjust": { "value": "0.54" },
+      "line-height": { "value": "1.4" }
     }
   }
 }