@utrecht/design-tokens 2.3.0 → 2.5.0

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": {
@@ -866,26 +841,8 @@
       "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-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
+      "font-size": "1rem",
       "font-weight": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -896,19 +853,9 @@
         },
         "type": "fontWeights"
       },
-      "line-height": {
-        "$extensions": {
-          "nl.nldesignsystem.css.property": {
-            "syntax": [
-              "<length>",
-              "<number>"
-            ],
-            "inherits": true
-          },
-          "nl.nldesignsystem.figma.supports-token": true
-        },
-        "type": "lineHeights"
-      }
+      "line-height": "1.4",
+      "background-color": "hsl(0 0% 100%)",
+      "color": "hsl(0 0% 0%)"
     },
     "breadcrumb-nav": {
       "min-block-size": "34px",
@@ -2292,16 +2239,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 +2635,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",
@@ -4017,16 +4075,7 @@
       },
       "icon": {
         "size": "14px",
-        "inset-block-start": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
-            },
-            "nl.nldesignsystem.figma.supports-token": true
-          },
-          "type": "spacing"
-        }
+        "inset-block-start": "0.15em"
       }
     },
     "link-social": {
@@ -4591,8 +4640,26 @@
     },
     "multiline-data": {},
     "nav-bar": {
-      "background-color": "hsl(0 0% 100%)",
-      "color": "hsl(0 0% 0%)",
+      "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"
+      },
       "content": {
         "background-color": {
           "$extensions": {
@@ -4835,37 +4902,12 @@
         "type": "color"
       },
       "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": {
+        "background-color": "hsl(0 0% 100%)",
+        "color": "hsl(0 0% 0%)",
+        "padding-block-start": "0",
+        "padding-block-end": "1em",
+        "padding-inline-start": "2em",
+        "padding-inine-end": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<length>",
@@ -4875,27 +4917,13 @@
           },
           "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"
-        }
-      }
+        "max-inline-size": "1184px",
+        "padding-inline-end": "2.4em"
+      },
+      "padding-inline-end": "0",
+      "padding-inline-start": "0",
+      "padding-block-end": "0",
+      "padding-block-start": "0"
     },
     "page-content": {
       "padding-block-start": "2em",
@@ -4925,10 +4953,46 @@
       "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",
+      "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"
+      },
       "content": {
         "color": {
           "$extensions": {
@@ -4970,26 +5034,10 @@
           },
           "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"
-        }
+        "padding-block-end": "48px",
+        "padding-block-start": "48px",
+        "max-inline-size": "1184px",
+        "padding-inline": "28px"
       }
     },
     "page-header": {
@@ -5023,71 +5071,19 @@
         },
         "type": "color"
       },
-      "padding-block-start": "1.8em",
-      "padding-block-end": "1em",
-      "padding-inline-start": "2em",
-      "padding-inline-end": "2.4em",
+      "padding-block-start": "0",
+      "padding-block-end": "0",
+      "padding-inline-start": "0",
+      "padding-inline-end": "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"
-        },
-        "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"
-        }
+        "background-color": "hsl(0 0% 100%)",
+        "color": "hsl(0 0% 0%)",
+        "padding-block-start": "1.8em",
+        "padding-block-end": "1em",
+        "padding-inline-start": "2em",
+        "padding-inline-end": "2.4em",
+        "max-inline-size": "1184px",
+        "padding-inline": "2em"
       }
     },
     "page-layout": {},
@@ -5098,9 +5094,9 @@
       "margin-inline-end": "2em",
       "max-inline-size": "1184px",
       "padding-block-start": "1.8em",
-      "padding-inline-end": "2em",
+      "padding-inline-end": "0",
       "padding-block-end": "1em",
-      "padding-inline-start": "2em"
+      "padding-inline-start": "0"
     },
     "pagination": {
       "font-size": "0.875rem",
@@ -5236,7 +5232,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"
@@ -5355,6 +5364,7 @@
       "background-color": "hsl(0 0% 100%)",
       "border-color": "hsl(0 0% 30%)",
       "border-width": "2px",
+      "color": "hsl(0 0% 100%)",
       "size": "24px",
       "margin-block-start": {
         "$extensions": {
@@ -5655,13 +5665,12 @@
             },
             "nl.nldesignsystem.fallback": [
               "utrecht.radio-button.color"
-            ]
+            ],
+            "nl.nldesignsystem.figma.supports-token": false
           },
-          "nl.nldesignsystem.figma.supports-token": false
-        },
-        "type": "color"
+          "type": "color"
+        }
       },
-      "color": "hsl(0 0% 100%)",
       "border-radius": "0"
     },
     "rich-text": {
@@ -5682,26 +5691,8 @@
       }
     },
     "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"
-      },
+      "background-color": "hsl(0 0% 95%)",
+      "color": "hsl(0 0% 10%)",
       "font-family": {
         "$extensions": {
           "nl.nldesignsystem.css.property": {
@@ -6408,6 +6399,16 @@
         },
         "type": "color"
       },
+      "border-radius": {
+        "$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": {
@@ -8212,6 +8213,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%)",
@@ -8227,5 +8339,14 @@
         "box-shadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)"
       }
     }
+  },
+  "signalen": {
+    "modal-dialog": {
+      "background-color": "hsl(0 0% 100%)",
+      "color": "hsl(0 0% 0%)"
+    },
+    "progress-bar": {
+      "border-radius": "4px"
+    }
   }
 }