@utrecht/design-tokens 2.2.0 → 2.4.0

package/dist/index.tokens.json

@@ -405,6 +405,7 @@
         }
       }
     },
+    "alternate-lang-nav": {},
     "article": {
       "max-inline-size": "780px"
     },
@@ -499,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": {
@@ -864,6 +840,51 @@
       "margin-block-start": "1.6em",
       "margin-block-end": "1.6em"
     },
+    "body": {
+      "font-family": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "*",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<number>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": [
+              "<length>",
+              "<number>"
+            ],
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "lineHeights"
+      }
+    },
     "breadcrumb-nav": {
       "min-block-size": "34px",
       "font-family": {
@@ -2246,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",
@@ -2454,6 +2466,20 @@
         }
       }
     },
+    "combobox": {
+      "popover": {
+        "z-index": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<number>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "other"
+        }
+      }
+    },
     "action": {
       "activate": {
         "cursor": "pointer"
@@ -2637,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",
@@ -3888,6 +4034,7 @@
       },
       "font-weight": "700"
     },
+    "html-content": {},
     "iban-data": {},
     "icon": {
       "color": {
@@ -4533,6 +4680,26 @@
       "background-color": "hsl(0 0% 100%)",
       "color": "hsl(0 0% 0%)",
       "content": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
         "max-inline-size": "1184px"
       },
       "link": {
@@ -4732,40 +4899,7 @@
         "padding-inline-start": "0"
       }
     },
-    "page-content": {
-      "padding-block-start": "2em",
-      "padding-block-end": "2em",
-      "padding-inline-start": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "spacing"
-      },
-      "padding-inine-end": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": "<length>",
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "spacing"
-      }
-    },
-    "page-footer": {
-      "color": "hsl(0 0% 100%)",
-      "background-color": "hsl(0 100% 40%)",
-      "background-image": "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);",
-      "padding-inline-end": "28px",
-      "padding-inline-start": "28px",
-      "padding-block-end": "48px",
-      "padding-block-start": "48px"
-    },
-    "page-header": {
+    "page-body": {
       "background-color": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -4786,11 +4920,263 @@
         },
         "type": "color"
       },
-      "padding-block-start": "1.8em",
+      "content": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "padding-block-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-block-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inine-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        }
+      }
+    },
+    "page-content": {
+      "padding-block-start": "2em",
+      "padding-block-end": "2em",
+      "padding-inline-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      },
+      "padding-inine-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "spacing"
+      }
+    },
+    "page-footer": {
+      "color": "hsl(0 0% 100%)",
+      "background-color": "hsl(0 100% 40%)",
+      "background-image": "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);",
+      "padding-inline-end": "28px",
+      "padding-inline-start": "28px",
+      "padding-block-end": "48px",
+      "padding-block-start": "48px",
+      "content": {
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "padding-inline-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-block-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        }
+      }
+    },
+    "page-header": {
+      "background-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
+      "border-block-end-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
+      "color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
+      "padding-block-start": "1.8em",
       "padding-block-end": "1em",
       "padding-inline-start": "2em",
-      "padding-inline-end": "2.4em"
+      "padding-inline-end": "2.4em",
+      "content": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "color"
+        },
+        "padding-block-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-block-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": false
+          },
+          "type": "spacing"
+        }
+      }
     },
+    "page-layout": {},
     "page": {
       "background-color": "hsl(0 0% 100%)",
       "color": "hsl(0 0% 0%)",
@@ -4936,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"
@@ -5381,6 +5780,38 @@
         "margin-block-end": 0
       }
     },
+    "root": {
+      "background-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
+      "color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "color"
+      },
+      "font-family": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "*",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": false
+        },
+        "type": "fontFamilies"
+      }
+    },
     "search-bar": {
       "button": {
         "background-color": "hsl(0 100% 40%)",
@@ -7880,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%)",