@utrecht/design-tokens 2.3.0 → 2.4.0

package/dist/index.mjs

@@ -275,6 +275,7 @@ export const utrechtCheckboxInvalidBorderColor = "#990000";
 export const utrechtCheckboxMarginBlockStart = 0;
 export const utrechtCodeBlockBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtCodeBlockColor = "hsl(0 0% 0%)";
+export const utrechtCodeBlockFontFamily = "\"Monaco\"";
 export const utrechtCodeBlockFontSize = "1rem";
 export const utrechtCodeBlockLineHeight = "1.5";
 export const utrechtCodeBlockMarginBlockStart = "20px";
@@ -728,7 +729,6 @@ export const utrechtParagraphFontWeight = "400";
 export const utrechtParagraphLineHeight = "1.5";
 export const utrechtParagraphMarginBlockStart = "16px";
 export const utrechtParagraphMarginBlockEnd = "0";
-export const utrechtParagraphLeadColor = "hsl(0 0% 0%)";
 export const utrechtParagraphLeadFontSize = "1.25rem";
 export const utrechtParagraphLeadFontWeight = "400";
 export const utrechtParagraphLeadLineHeight = "1.5";
@@ -999,6 +999,67 @@ export const denhaagProcessStepsSubStepHeadingColor = "hsl(0 0% 15%)";
 export const denhaagProcessStepsSubStepHeadingFontSize = "0.875rem";
 export const denhaagProcessStepsSubStepHeadingFontWeight = "400";
 export const denhaagProcessStepsSubStepLineColor = "hsl(90 30% 30%)";
+export const nlCodeBlockBackgroundColor = "hsl(0 0% 95%)";
+export const nlCodeBlockColor = "hsl(0 0% 0%)";
+export const nlCodeBlockFontFamily = "\"Monaco\"";
+export const nlCodeBlockFontSize = "1rem";
+export const nlCodeBlockLineHeight = "1.5";
+export const nlCodeBlockPaddingBlock = "20px";
+export const nlCodeBlockPaddingInline = "20px";
+export const nlDataBadgeBackgroundColor = "hsl(0 0% 30%)";
+export const nlDataBadgeBorderRadius = "0";
+export const nlDataBadgeColor = "hsl(0 0% 100%)";
+export const nlDataBadgePaddingBlock = "8px";
+export const nlDataBadgePaddingInline = "12px";
+export const nlHeadingLevel1FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
+export const nlHeadingLevel1FontSize = "2rem";
+export const nlHeadingLevel1FontWeight = "700";
+export const nlHeadingLevel1LineHeight = "1.25";
+export const nlHeadingLevel2FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
+export const nlHeadingLevel2FontSize = "1.25rem";
+export const nlHeadingLevel2FontWeight = "700";
+export const nlHeadingLevel2LineHeight = "1.25";
+export const nlHeadingLevel3FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
+export const nlHeadingLevel3FontSize = "1.25rem";
+export const nlHeadingLevel3FontWeight = "400";
+export const nlHeadingLevel3LineHeight = "1.25";
+export const nlHeadingLevel4FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
+export const nlHeadingLevel4FontSize = "1.125rem";
+export const nlHeadingLevel4FontWeight = "400";
+export const nlHeadingLevel4LineHeight = "1.5";
+export const nlHeadingLevel5FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
+export const nlHeadingLevel5FontSize = "0.875rem";
+export const nlHeadingLevel5FontWeight = "400";
+export const nlHeadingLevel5LineHeight = "1.5";
+export const nlHeadingLevel6FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
+export const nlHeadingLevel6FontSize = "0.875rem";
+export const nlHeadingLevel6FontWeight = "400";
+export const nlHeadingLevel6LineHeight = "1.5";
+export const nlMarkBackgroundColor = "hsl(48 100% 60%)";
+export const nlMarkColor = "hsl(0 0% 0%)";
+export const nlNumberBadgeBackgroundColor = "hsl(0 100% 40%)";
+export const nlNumberBadgeBorderRadius = "1rem";
+export const nlNumberBadgeColor = "hsl(0 0% 100%)";
+export const nlNumberBadgeFontSize = "1rem";
+export const nlNumberBadgePaddingBlock = "1ex";
+export const nlNumberBadgePaddingInline = "1ex";
+export const nlParagraphFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
+export const nlParagraphFontSize = "1rem";
+export const nlParagraphFontWeight = "400";
+export const nlParagraphLineHeight = "1.5";
+export const nlParagraphLeadColor = "hsl(0 0% 0%)";
+export const nlParagraphLeadFontSize = "1.25rem";
+export const nlParagraphLeadFontWeight = "400";
+export const nlParagraphLeadLineHeight = "1.5";
+export const nlParagraphSmallFontSize = "0.875rem";
+export const nlSkipLinkBackgroundColor = "hsl(0 0% 15%)";
+export const nlSkipLinkColor = "hsl(0 0% 100%)";
+export const nlSkipLinkPaddingBlock = "8px";
+export const nlSkipLinkPaddingInline = "16px";
+export const nlSkipLinkTextDecoration = "underline";
+export const nlSkipLinkFocusVisibleColor = "hsl(0 0% 0%)";
+export const nlSkipLinkFocusVisibleBackgroundColor = "hsl(48 100% 80%)";
+export const nlSkipLinkFocusVisibleTextDecoration = "none";
 export const ofLayoutBackground = "hsl(0 0% 100%)";
 export const ofLayoutBg = "hsl(0 0% 100%)";
 export const ofPageFooterBg = "hsl(0 100% 40%)";

package/dist/index.tokens.json

@@ -500,31 +500,6 @@
       "padding-block": "1ex",
       "padding-inline": "1ex"
     },
-    "badge-data": {
-      "letter-spacing": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "letterSpacing"
-      },
-      "text-transform": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": [
-              "inherit",
-              "uppercase"
-            ],
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "textCase"
-      }
-    },
     "badge-list": {
       "row-gap": {
         "$extensions": {
@@ -2292,16 +2267,7 @@
     "code-block": {
       "background-color": "hsl(0 0% 95%)",
       "color": "hsl(0 0% 0%)",
-      "font-family": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "*",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "fontFamilies"
-      },
+      "font-family": "\"Monaco\"",
       "font-size": "1rem",
       "line-height": "1.5",
       "margin-block-start": "20px",
@@ -2697,6 +2663,126 @@
       }
     },
     "currency-data": {},
+    "data-badge": {
+      "background-color": {
+        "comment": "Default background color for badge components",
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
+      "border-radius": {
+        "comment": "Default corner radius for badge components",
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length-percentage>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "borderRadius"
+      },
+      "border-width": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "borderWidth"
+      },
+      "color": {
+        "comment": "Default text color for badge components",
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
+      "font-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "fontSizes"
+      },
+      "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
+        },
+        "type": "lineHeights"
+      },
+      "min-block-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "sizing"
+      },
+      "min-inline-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "sizing"
+      },
+      "padding-block": {
+        "comment": "Default block padding for badge components",
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "padding-inline": {
+        "comment": "Default inline padding color for badge components",
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      }
+    },
     "data-list": {
       "margin-block-end": "16px",
       "margin-block-start": "16px",
@@ -5236,7 +5322,20 @@
       "margin-block-start": "16px",
       "margin-block-end": "0",
       "lead": {
-        "color": "hsl(0 0% 0%)",
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.paragraph.color",
+              "utrecht.document.color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
         "font-size": "1.25rem",
         "font-weight": "400",
         "line-height": "1.5"
@@ -8212,6 +8311,117 @@
       }
     }
   },
+  "nl": {
+    "code-block": {
+      "background-color": "hsl(0 0% 95%)",
+      "color": "hsl(0 0% 0%)",
+      "font-family": "\"Monaco\"",
+      "font-size": "1rem",
+      "line-height": "1.5",
+      "padding-block": "20px",
+      "padding-inline": "20px"
+    },
+    "code": {
+      "background-color": {},
+      "color": {},
+      "font-family": {},
+      "font-size": {},
+      "line-height": {}
+    },
+    "data-badge": {
+      "background-color": "hsl(0 0% 30%)",
+      "border-radius": "0",
+      "color": "hsl(0 0% 100%)",
+      "font-weight": {},
+      "padding-block": "8px",
+      "padding-inline": "12px"
+    },
+    "heading": {
+      "level-1": {
+        "color": {},
+        "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+        "font-size": "2rem",
+        "font-weight": "700",
+        "line-height": "1.25"
+      },
+      "level-2": {
+        "color": {},
+        "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+        "font-size": "1.25rem",
+        "font-weight": "700",
+        "line-height": "1.25"
+      },
+      "level-3": {
+        "color": {},
+        "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+        "font-size": "1.25rem",
+        "font-weight": "400",
+        "line-height": "1.25"
+      },
+      "level-4": {
+        "color": {},
+        "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+        "font-size": "1.125rem",
+        "font-weight": "400",
+        "line-height": "1.5"
+      },
+      "level-5": {
+        "color": {},
+        "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+        "font-size": "0.875rem",
+        "font-weight": "400",
+        "line-height": "1.5"
+      },
+      "level-6": {
+        "color": {},
+        "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+        "font-size": "0.875rem",
+        "font-weight": "400",
+        "line-height": "1.5"
+      }
+    },
+    "mark": {
+      "background-color": "hsl(48 100% 60%)",
+      "color": "hsl(0 0% 0%)"
+    },
+    "number-badge": {
+      "background-color": "hsl(0 100% 40%)",
+      "border-radius": "1rem",
+      "color": "hsl(0 0% 100%)",
+      "font-size": "1rem",
+      "font-weight": {},
+      "padding-block": "1ex",
+      "padding-inline": "1ex"
+    },
+    "paragraph": {
+      "color": {},
+      "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+      "font-size": "1rem",
+      "font-weight": "400",
+      "line-height": "1.5",
+      "lead": {
+        "color": "hsl(0 0% 0%)",
+        "font-size": "1.25rem",
+        "font-weight": "400",
+        "line-height": "1.5"
+      },
+      "small": {
+        "font-size": "0.875rem"
+      }
+    },
+    "skip-link": {
+      "background-color": "hsl(0 0% 15%)",
+      "color": "hsl(0 0% 100%)",
+      "padding-block": "8px",
+      "padding-inline": "16px",
+      "text-decoration": "underline",
+      "focus-visible": {
+        "color": "hsl(0 0% 0%)",
+        "background-color": "hsl(48 100% 80%)",
+        "text-decoration": "none"
+      }
+    }
+  },
   "of": {
     "layout": {
       "background": "hsl(0 0% 100%)",