@utrecht/design-tokens 2.1.1 → 2.2.0

package/dist/index.d.ts

@@ -640,10 +640,10 @@ export const utrechtListboxOptionPaddingInlineStart : string;
 export const utrechtListboxOptionActiveBackgroundColor : string;
 export const utrechtListboxOptionActiveColor : string;
 export const utrechtListboxOptionActiveFontWeight : string;
+export const utrechtListboxOptionHoverBackgroundColor : string;
+export const utrechtListboxOptionHoverColor : string;
 export const utrechtListboxOptionSelectedBackgroundColor : string;
 export const utrechtListboxOptionSelectedColor : string;
-export const utrechtListboxOptionHoverColor : string;
-export const utrechtListboxOptionHoverBackgroundColor : string;
 export const utrechtListboxOptionGroupMarginBlockEnd : string;
 export const utrechtListboxOptionGroupTitleFontSize : string;
 export const utrechtListboxOptionGroupTitleFontWeight : string;
@@ -1041,10 +1041,6 @@ export const utrechtIconScale2xl : string;
 export const utrechtIconScale3xl : string;
 export const utrechtIconScale4xl : string;
 export const utrechtTypographySansSerifFontFamily : string;
-/** 8px */
-export const utrechtTypographyScale2xsFontSize : string;
-/** 12px */
-export const utrechtTypographyScaleXsFontSize : string;
 /** 14px */
 export const utrechtTypographyScaleSmFontSize : string;
 /** 16px */

package/dist/index.flat.json

@@ -127,7 +127,7 @@
   "utrechtBadgeListItemMarginInline": "12px",
   "utrechtBadgePaddingBlock": "8px",
   "utrechtBadgePaddingInline": "12px",
-  "utrechtBlockquoteCaptionFontSize": "0.75rem",
+  "utrechtBlockquoteCaptionFontSize": "0.875rem",
   "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
   "utrechtBlockquoteContentFontSize": "1.125rem",
   "utrechtBlockquoteMarginBlockEnd": "1.6em",
@@ -989,14 +989,12 @@
   "utrechtTypographyLineHeightXs": "1",
   "utrechtTypographySansSerifFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
   "utrechtTypographyScale2xlFontSize": "1.375rem",
-  "utrechtTypographyScale2xsFontSize": "0.5rem",
   "utrechtTypographyScale3xlFontSize": "1.5rem",
   "utrechtTypographyScale4xlFontSize": "2rem",
   "utrechtTypographyScaleLgFontSize": "1.125rem",
   "utrechtTypographyScaleMdFontSize": "1rem",
   "utrechtTypographyScaleSmFontSize": "0.875rem",
   "utrechtTypographyScaleXlFontSize": "1.25rem",
-  "utrechtTypographyScaleXsFontSize": "0.75rem",
   "utrechtTypographyWeightScaleBoldFontWeight": "700",
   "utrechtTypographyWeightScaleNormalFontWeight": "400",
   "utrechtUnorderedListItemMarginBlockEnd": "0.25rem",

package/dist/index.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",

package/dist/index.mjs

@@ -79,7 +79,7 @@ export const utrechtBlockquoteMarginInlineStart = "1.6em";
 export const utrechtBlockquoteMarginInlineEnd = "1.6em";
 export const utrechtBlockquoteContentColor = "hsl(0 100% 40%)";
 export const utrechtBlockquoteContentFontSize = "1.125rem";
-export const utrechtBlockquoteCaptionFontSize = "0.75rem";
+export const utrechtBlockquoteCaptionFontSize = "0.875rem";
 export const utrechtBlockquoteMarginBlockStart = "1.6em";
 export const utrechtBlockquoteMarginBlockEnd = "1.6em";
 export const utrechtBreadcrumbNavMinBlockSize = "34px";
@@ -576,10 +576,10 @@ export const utrechtListboxOptionPaddingInlineStart = "8px";
 export const utrechtListboxOptionActiveBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtListboxOptionActiveColor = "hsl(0 0% 0%)";
 export const utrechtListboxOptionActiveFontWeight = "700";
+export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
+export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
 export const utrechtListboxOptionSelectedBackgroundColor = "hsl(0 0% 95%)";
 export const utrechtListboxOptionSelectedColor = "hsl(0 0% 0%)";
-export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
-export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
 export const utrechtListboxOptionGroupMarginBlockEnd = "8px";
 export const utrechtListboxOptionGroupTitleFontSize = "1rem";
 export const utrechtListboxOptionGroupTitleFontWeight = "700";
@@ -927,8 +927,6 @@ export const utrechtIconScale2xl = "30px"; // Formaat voor marker iconen
 export const utrechtIconScale3xl = "36px"; // Formaat voor toptaks iconen
 export const utrechtIconScale4xl = "48px";
 export const utrechtTypographySansSerifFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
-export const utrechtTypographyScale2xsFontSize = "0.5rem"; // 8px
-export const utrechtTypographyScaleXsFontSize = "0.75rem"; // 12px
 export const utrechtTypographyScaleSmFontSize = "0.875rem"; // 14px
 export const utrechtTypographyScaleMdFontSize = "1rem"; // 16px
 export const utrechtTypographyScaleLgFontSize = "1.125rem"; // 18px

package/dist/index.tokens.json

@@ -837,7 +837,7 @@
           },
           "type": "color"
         },
-        "font-size": "0.75rem"
+        "font-size": "0.875rem"
       },
       "quote": {
         "color": {
@@ -4316,9 +4316,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 +4387,6 @@
               }
             }
           }
-        },
-        "hover": {
-          "color": "hsl(0 0% 0%)",
-          "background-color": "hsl(211 60% 90%)"
         }
       },
       "z-index": {},
@@ -5760,6 +5814,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 +7639,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.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",

package/dist/property.css

@@ -459,6 +459,8 @@
 @property --utrecht-listbox-max-block-size { syntax: '<length>'; inherits: true; }
 @property --utrecht-listbox-option-active-background-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-listbox-option-active-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-listbox-option-hover-background-color { syntax: '<color>'; inherits: true; }
+@property --utrecht-listbox-option-hover-color { syntax: '<color>'; inherits: true; }
 @property --utrecht-listbox-option-min-block-size { syntax: '<length>'; inherits: true; }
 @property --utrecht-listbox-option-padding-block-end { syntax: '<length>'; inherits: true; }
 @property --utrecht-listbox-option-padding-block-start { syntax: '<length>'; inherits: true; }

package/dist/root.css

@@ -8,14 +8,12 @@
   --utrecht-unordered-list-item-margin-block-end: 0.25rem;
   --utrecht-typography-weight-scale-normal-font-weight: 400;
   --utrecht-typography-weight-scale-bold-font-weight: 700;
-  --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
   --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
   --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
   --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
   --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
   --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
   --utrecht-typography-scale-3xl-font-size: 1.5rem; /* 24px */
-  --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
   --utrecht-typography-scale-2xl-font-size: 1.375rem; /* 22px */
   --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-typography-line-height-xs: 1;
@@ -828,7 +826,7 @@
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
   --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
-  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
+  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
   --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
   --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);

package/dist/theme-prince-xml.css

@@ -32,8 +32,6 @@
   --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
   --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
   --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
-  --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
-  --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
   --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-icon-scale-4xl: 48px;
   --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -603,10 +601,10 @@
   --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
-  --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
-  --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
   --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
   --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
+  --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
+  --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
   --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-listbox-option-active-color: var(--utrecht-color-black);
   --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -866,7 +864,7 @@
   --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
   --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
-  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
+  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
   --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);

package/dist/theme.css

@@ -8,14 +8,12 @@
   --utrecht-unordered-list-item-margin-block-end: 0.25rem;
   --utrecht-typography-weight-scale-normal-font-weight: 400;
   --utrecht-typography-weight-scale-bold-font-weight: 700;
-  --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
   --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
   --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
   --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
   --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
   --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
   --utrecht-typography-scale-3xl-font-size: 1.5rem; /* 24px */
-  --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
   --utrecht-typography-scale-2xl-font-size: 1.375rem; /* 22px */
   --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-typography-line-height-xs: 1;
@@ -828,7 +826,7 @@
   --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
   --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
-  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
+  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
   --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
   --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);