@utrecht/design-tokens 2.1.1 → 2.3.0

package/dist/index.tokens.json

@@ -405,6 +405,7 @@
         }
       }
     },
+    "alternate-lang-nav": {},
     "article": {
       "max-inline-size": "780px"
     },
@@ -837,7 +838,7 @@
           },
           "type": "color"
         },
-        "font-size": "0.75rem"
+        "font-size": "0.875rem"
       },
       "quote": {
         "color": {
@@ -864,6 +865,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": {
@@ -2454,6 +2500,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"
@@ -3888,6 +3948,7 @@
       },
       "font-weight": "700"
     },
+    "html-content": {},
     "iban-data": {},
     "icon": {
       "color": {
@@ -4316,9 +4377,67 @@
           "color": "hsl(0 0% 0%)",
           "font-weight": "700"
         },
+        "disabled": {
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              }
+            }
+          },
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              }
+            }
+          }
+        },
+        "hover": {
+          "background-color": "hsl(211 60% 90%)",
+          "color": "hsl(0 0% 0%)"
+        },
         "selected": {
           "background-color": "hsl(0 0% 95%)",
-          "color": "hsl(0 0% 0%)"
+          "color": "hsl(0 0% 0%)",
+          "disabled": {
+            "background-color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            },
+            "color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            }
+          },
+          "hover": {
+            "background-color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            },
+            "color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              }
+            }
+          }
         },
         "icon": {
           "size": {
@@ -4329,10 +4448,6 @@
               }
             }
           }
-        },
-        "hover": {
-          "color": "hsl(0 0% 0%)",
-          "background-color": "hsl(211 60% 90%)"
         }
       },
       "z-index": {},
@@ -4479,6 +4594,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": {
@@ -4678,6 +4813,90 @@
         "padding-inline-start": "0"
       }
     },
+    "page-body": {
+      "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": {
+            "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",
@@ -4709,7 +4928,69 @@
       "padding-inline-end": "28px",
       "padding-inline-start": "28px",
       "padding-block-end": "48px",
-      "padding-block-start": "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": {
@@ -4722,6 +5003,16 @@
         },
         "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": {
@@ -4735,8 +5026,71 @@
       "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%)",
@@ -5327,6 +5681,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%)",
@@ -5760,6 +6146,53 @@
           "type": "color"
         }
       },
+      "hover": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.form-control.hover.background-color",
+              "utrecht.select.background-color",
+              "utrecht.form-control.background-color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "border-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.form-control.hover.border-color",
+              "utrecht.select.border-color",
+              "utrecht.form-control.border-color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": [
+              "utrecht.form-control.hover.color",
+              "utrecht.select.color",
+              "utrecht.form-control.color"
+            ],
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        }
+      },
       "focus": {
         "background-color": {
           "$extensions": {
@@ -7538,12 +7971,6 @@
         "font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif"
       },
       "scale": {
-        "2xs": {
-          "font-size": "0.5rem"
-        },
-        "xs": {
-          "font-size": "0.75rem"
-        },
         "sm": {
           "font-size": "0.875rem"
         },

package/dist/list.d.ts

@@ -0,0 +1,14 @@
+
+declare interface DesignToken {
+  value?: any;
+  type?: string;
+  comment?: string;
+  name?: string;
+  themeable?: boolean;
+  attributes?: Record<string, unknown>;
+  [key: string]: any;
+}
+
+export default tokens;
+
+declare const tokens: DesignToken[];

package/dist/list.json

@@ -4255,7 +4255,7 @@
       }
     },
     "type": "fontSize",
-    "value": "0.75rem",
+    "value": "0.875rem",
     "filePath": "src/component/utrecht/blockquote.tokens.json",
     "isSource": true,
     "original": {
@@ -4270,7 +4270,7 @@
         }
       },
       "type": "fontSize",
-      "value": "{utrecht.typography.scale.xs.font-size}"
+      "value": "{utrecht.typography.scale.sm.font-size}"
     },
     "name": "utrechtBlockquoteCaptionFontSize",
     "attributes": {},
@@ -19898,10 +19898,22 @@
     ]
   },
   {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      }
+    },
     "value": "hsl(211 60% 90%)",
     "filePath": "src/component/utrecht/listbox.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
       "value": "{utrecht.color.blue.90}"
     },
     "name": "utrechtListboxOptionHoverBackgroundColor",
@@ -19915,10 +19927,22 @@
     ]
   },
   {
+    "$extensions": {
+      "nl.nldesignsystem.css.property": {
+        "syntax": "<color>",
+        "inherits": true
+      }
+    },
     "value": "hsl(0 0% 0%)",
     "filePath": "src/component/utrecht/listbox.tokens.json",
     "isSource": true,
     "original": {
+      "$extensions": {
+        "nl.nldesignsystem.css.property": {
+          "syntax": "<color>",
+          "inherits": true
+        }
+      },
       "value": "{utrecht.color.black}"
     },
     "name": "utrechtListboxOptionHoverColor",
@@ -31454,25 +31478,6 @@
       "font-size"
     ]
   },
-  {
-    "value": "0.5rem",
-    "comment": "8px",
-    "filePath": "src/brand/utrecht/typography.tokens.json",
-    "isSource": true,
-    "original": {
-      "value": "8px",
-      "comment": "8px"
-    },
-    "name": "utrechtTypographyScale2xsFontSize",
-    "attributes": {},
-    "path": [
-      "utrecht",
-      "typography",
-      "scale",
-      "2xs",
-      "font-size"
-    ]
-  },
   {
     "value": "1.5rem",
     "comment": "24px",
@@ -31587,25 +31592,6 @@
       "font-size"
     ]
   },
-  {
-    "value": "0.75rem",
-    "comment": "12px",
-    "filePath": "src/brand/utrecht/typography.tokens.json",
-    "isSource": true,
-    "original": {
-      "value": "12px",
-      "comment": "12px"
-    },
-    "name": "utrechtTypographyScaleXsFontSize",
-    "attributes": {},
-    "path": [
-      "utrecht",
-      "typography",
-      "scale",
-      "xs",
-      "font-size"
-    ]
-  },
   {
     "value": "700",
     "filePath": "src/brand/utrecht/typography.tokens.json",