@utrecht/design-tokens 2.1.1 → 2.2.0

package/dist/dark/list.json

@@ -4047,7 +4047,7 @@
       }
     },
     "type": "fontSize",
-    "value": "0.75rem",
+    "value": "0.875rem",
     "filePath": "src/component/utrecht/blockquote.tokens.json",
     "isSource": true,
     "original": {
@@ -4062,7 +4062,7 @@
         }
       },
       "type": "fontSize",
-      "value": "{utrecht.typography.scale.xs.font-size}"
+      "value": "{utrecht.typography.scale.sm.font-size}"
     },
     "name": "utrechtBlockquoteCaptionFontSize",
     "attributes": {},
@@ -18845,10 +18845,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",
@@ -18862,10 +18874,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",
@@ -30337,25 +30361,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",
@@ -30470,25 +30475,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/dark/property.css

@@ -400,6 +400,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/dark/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;
@@ -829,7 +827,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/dark/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 */
@@ -608,10 +606,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);
@@ -867,7 +865,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/dark/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;
@@ -829,7 +827,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/dark/tokens.cjs

@@ -3310,7 +3310,7 @@ module.exports = {
             }
           },
           "type": "fontSize",
-          "value": "0.75rem",
+          "value": "0.875rem",
           "filePath": "src/component/utrecht/blockquote.tokens.json",
           "isSource": true,
           "original": {
@@ -3325,7 +3325,7 @@ module.exports = {
               }
             },
             "type": "fontSize",
-            "value": "{utrecht.typography.scale.xs.font-size}"
+            "value": "{utrecht.typography.scale.sm.font-size}"
           },
           "name": "font-size",
           "attributes": {},
@@ -21707,7 +21707,25 @@ module.exports = {
             ]
           }
         },
-        "selected": {
+        "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": {
@@ -21715,7 +21733,7 @@ module.exports = {
                 "inherits": true
               }
             },
-            "value": "hsl(0 0% 95%)",
+            "value": "hsl(211 60% 90%)",
             "filePath": "src/component/utrecht/listbox.tokens.json",
             "isSource": true,
             "original": {
@@ -21725,7 +21743,7 @@ module.exports = {
                   "inherits": true
                 }
               },
-              "value": "{utrecht.color.grey.95}"
+              "value": "{utrecht.color.blue.90}"
             },
             "name": "background-color",
             "attributes": {},
@@ -21733,7 +21751,7 @@ module.exports = {
               "utrecht",
               "listbox",
               "option",
-              "selected",
+              "hover",
               "background-color"
             ]
           },
@@ -21762,55 +21780,115 @@ module.exports = {
               "utrecht",
               "listbox",
               "option",
-              "selected",
+              "hover",
               "color"
             ]
           }
         },
-        "icon": {
-          "size": {
+        "selected": {
+          "background-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<length>",
+                "syntax": "<color>",
                 "inherits": true
               }
-            }
-          }
-        },
-        "hover": {
-          "color": {
-            "value": "hsl(0 0% 0%)",
+            },
+            "value": "hsl(0 0% 95%)",
             "filePath": "src/component/utrecht/listbox.tokens.json",
             "isSource": true,
             "original": {
-              "value": "{utrecht.color.black}"
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              },
+              "value": "{utrecht.color.grey.95}"
             },
-            "name": "color",
+            "name": "background-color",
             "attributes": {},
             "path": [
               "utrecht",
               "listbox",
               "option",
-              "hover",
-              "color"
+              "selected",
+              "background-color"
             ]
           },
-          "background-color": {
-            "value": "hsl(211 60% 90%)",
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              }
+            },
+            "value": "hsl(0 0% 0%)",
             "filePath": "src/component/utrecht/listbox.tokens.json",
             "isSource": true,
             "original": {
-              "value": "{utrecht.color.blue.90}"
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {
+                  "syntax": "<color>",
+                  "inherits": true
+                }
+              },
+              "value": "{utrecht.color.black}"
             },
-            "name": "background-color",
+            "name": "color",
             "attributes": {},
             "path": [
               "utrecht",
               "listbox",
               "option",
-              "hover",
-              "background-color"
+              "selected",
+              "color"
             ]
+          },
+          "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": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              }
+            }
           }
         }
       },
@@ -29890,6 +29968,53 @@ module.exports = {
           "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": {
@@ -35293,48 +35418,6 @@ module.exports = {
         }
       },
       "scale": {
-        "2xs": {
-          "font-size": {
-            "value": "0.5rem",
-            "comment": "8px",
-            "filePath": "src/brand/utrecht/typography.tokens.json",
-            "isSource": true,
-            "original": {
-              "value": "8px",
-              "comment": "8px"
-            },
-            "name": "font-size",
-            "attributes": {},
-            "path": [
-              "utrecht",
-              "typography",
-              "scale",
-              "2xs",
-              "font-size"
-            ]
-          }
-        },
-        "xs": {
-          "font-size": {
-            "value": "0.75rem",
-            "comment": "12px",
-            "filePath": "src/brand/utrecht/typography.tokens.json",
-            "isSource": true,
-            "original": {
-              "value": "12px",
-              "comment": "12px"
-            },
-            "name": "font-size",
-            "attributes": {},
-            "path": [
-              "utrecht",
-              "typography",
-              "scale",
-              "xs",
-              "font-size"
-            ]
-          }
-        },
         "sm": {
           "font-size": {
             "value": "0.875rem",

package/dist/dark/tokens.d.ts

@@ -2709,20 +2709,56 @@ declare const tokens: {
           "color": DesignToken,
           "font-weight": DesignToken
         },
-        "selected": {
+        "disabled": {
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {}
+            }
+          },
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {}
+            }
+          }
+        },
+        "hover": {
           "background-color": DesignToken,
           "color": DesignToken
         },
+        "selected": {
+          "background-color": DesignToken,
+          "color": DesignToken,
+          "disabled": {
+            "background-color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {}
+              }
+            },
+            "color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {}
+              }
+            }
+          },
+          "hover": {
+            "background-color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {}
+              }
+            },
+            "color": {
+              "$extensions": {
+                "nl.nldesignsystem.css.property": {}
+              }
+            }
+          }
+        },
         "icon": {
           "size": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {}
             }
           }
-        },
-        "hover": {
-          "color": DesignToken,
-          "background-color": DesignToken
         }
       },
       "z-index": {},
@@ -3599,6 +3635,26 @@ declare const tokens: {
           }
         }
       },
+      "hover": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {},
+            "nl.nldesignsystem.fallback": {}
+          }
+        },
+        "border-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {},
+            "nl.nldesignsystem.fallback": {}
+          }
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {},
+            "nl.nldesignsystem.fallback": {}
+          }
+        }
+      },
       "focus": {
         "background-color": {
           "$extensions": {
@@ -4562,12 +4618,6 @@ declare const tokens: {
         "font-family": DesignToken
       },
       "scale": {
-        "2xs": {
-          "font-size": DesignToken
-        },
-        "xs": {
-          "font-size": DesignToken
-        },
         "sm": {
           "font-size": DesignToken
         },