@utrecht/design-tokens 2.1.0 → 2.2.0

package/.stylelintrc.json

@@ -1,6 +1,10 @@
 {
   "extends": "../../.stylelintrc.json",
   "rules": {
-    "no-duplicate-selectors": null
+    "comment-empty-line-before": null,
+    "order/properties-alphabetical-order": null,
+    "custom-property-pattern": null,
+    "no-duplicate-selectors": null,
+    "color-hex-length": "long"
   }
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @utrecht/design-tokens
 
+## 2.2.0
+
+### Minor Changes
+
+- fb0a096: Add `utrecht-theme--viewport-scale` class name to `dist/index.css` for responsive scales.
+
+## 2.1.1
+
+### Patch Changes
+
+- 7fc1efc: Fix `propery.css` output. (The file was empty.)
+- 7fc1efc: No longer include `::backdrop` selectors, those are no longer needed in evergreen browsers.'
+- 3185cc0: Convert all `px` `font-size` design tokens to `rem`.
+
 ## 2.1.0
 
 ### Minor Changes

package/config.json

@@ -0,0 +1,8 @@
+{
+  "fullName": "Gemeente Utrecht",
+  "name": "Utrecht",
+  "prefix": "utrecht",
+  "npm": "@utrecht/design-tokens",
+  "cdn": "https://unpkg.com/@utrecht/design-tokens/dist/index.css",
+  "stories": []
+}

package/dist/_mixin-theme.scss

@@ -1,10 +1,9 @@
 /**
- * Do not edit directly
- * Generated on Tue, 01 Oct 2024 19:52:18 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 @mixin utrecht-theme {
-  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
+  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
   --denhaag-process-steps-sub-step-marker-size: 12px;
   --denhaag-process-steps-step-marker-size: 28px;
   --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -33,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 */
@@ -99,7 +96,6 @@
   --utrecht-toptask-link-min-inline-size: 15rem;
   --utrecht-toptask-link-min-block-size: 8.25rem;
   --utrecht-toptask-link-line-height: 1.2;
-  --utrecht-toptask-link-font-size: 1rem;
   --utrecht-textbox-border-bottom-width: 3px;
   --utrecht-textarea-border-bottom-width: 3px;
   --utrecht-textarea-border-block-end-width: 3px;
@@ -108,12 +104,11 @@
   --utrecht-table-cell-padding-inline-end: 0.4em;
   --utrecht-table-cell-padding-block-start: 0.5em;
   --utrecht-table-cell-padding-block-end: 0.5em;
-  --utrecht-table-cell-line-height: 24px;
+  --utrecht-table-cell-line-height: 1.5rem;
   --utrecht-table-footer-sticky-border-block-start-width: 2px;
   --utrecht-table-header-sticky-border-block-end-width: 2px;
   --utrecht-table-caption-margin-block-end: 1em;
   --utrecht-table-caption-text-align: start;
-  --utrecht-table-caption-font-size: 1.125em;
   --utrecht-table-margin-block-end: 0;
   --utrecht-separator-block-size: 8px;
   --utrecht-select-border-block-end-width: 3px;
@@ -152,7 +147,6 @@
   --utrecht-pagination-page-link-background-color: transparent;
   --utrecht-pagination-margin-block-end: 1em;
   --utrecht-pagination-margin-block-start: 0;
-  --utrecht-pagination-font-size: 14px;
   --utrecht-page-padding-inline-start: 2em;
   --utrecht-page-padding-block-end: 1em;
   --utrecht-page-padding-inline-end: 2em;
@@ -178,9 +172,9 @@
   --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-topnav-link-focus-border-type: dotted;
-  --utrecht-mapcontrolbutton-focus-text-decoration: none;
-  --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-mapcontrolbutton-margin-inline-end: 0;
+  --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-border-radius: 2px;
   --utrecht-map-marker-icon-size: 30px;
   --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
@@ -197,7 +191,7 @@
   --utrecht-link-icon-size: 1.2em;
   --utrecht-link-hover-text-decoration-thickness: 3px;
   --utrecht-link-hover-text-decoration: underline;
-  --utrecht-link-focus-text-decoration: none;
+  --utrecht-link-focus-visible-text-decoration: none;
   --utrecht-link-text-underline-offset: 3px;
   --utrecht-link-text-decoration: underline;
   --utrecht-link-social-hover-transform-scale: 1.1;
@@ -234,10 +228,8 @@
   --utrecht-form-toggle-border-radius: 10em;
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-color: transparent;
-  --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
+  --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
   --utrecht-form-label-font-size: 1em;
-  --utrecht-form-fieldset-legend-line-height: 1.4;
-  --utrecht-form-fieldset-legend-font-size: 1rem;
   --utrecht-form-field-invalid-border-inline-start-width: 3px;
   --utrecht-form-control-block-size: 42px;
   --utrecht-form-control-read-only-border-color: transparent;
@@ -248,8 +240,6 @@
   --utrecht-form-control-max-inline-size: 28em;
   --utrecht-form-control-border-radius: 0;
   --utrecht-focus-outline-style: dotted;
-  --utrecht-figure-caption-line-height: 20px;
-  --utrecht-figure-caption-font-size: 14px;
   --utrecht-figure-caption-color: #727272;
   --utrecht-drawer-max-inline-size: 320px;
   --utrecht-drawer-max-block-size: 240px;
@@ -312,20 +302,18 @@
   --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
   --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
   --utrecht-pointer-target-min-size: 44px;
-  --utrecht-action-inert-cursor: default;
-  --utrecht-action-activate-cursor: pointer;
   --utrecht-action-submit-cursor: pointer;
   --utrecht-action-navigate-cursor: pointer;
+  --utrecht-action-inert-cursor: default;
   --utrecht-action-disabled-cursor: not-allowed;
   --utrecht-action-busy-cursor: wait;
+  --utrecht-action-activate-cursor: pointer;
   --utrecht-column-layout-column-width: 350px;
   --utrecht-column-layout-column-rule-width: 2px;
   --utrecht-code-block-padding-inline-end: 20px;
   --utrecht-code-block-padding-inline-start: 20px;
   --utrecht-code-block-padding-block-end: 20px;
   --utrecht-code-block-padding-block-start: 20px;
-  --utrecht-code-block-line-height: 24px;
-  --utrecht-code-block-font-size: 16px;
   --utrecht-checkbox-margin-block-start: 0;
   --utrecht-checkbox-focus-border-width: 2px;
   --utrecht-checkbox-size: 24px;
@@ -345,7 +333,7 @@
   --utrecht-calendar-table-days-item-day-border-color: transparent;
   --utrecht-calendar-table-days-item-day-border-width: 2px;
   --utrecht-calendar-table-days-item-day-size: 44px;
-  --utrecht-calendar-table-weeks-item-line-height: 24px;
+  --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
   --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
   --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
   --utrecht-calendar-table-weeks-item-width: 44px;
@@ -374,15 +362,13 @@
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-blockquote-margin-block-end: 1.6em;
   --utrecht-blockquote-margin-block-start: 1.6em;
-  --utrecht-blockquote-content-font-size: 1.125rem;
-  --utrecht-blockquote-attribution-font-size: 0.75rem;
   --utrecht-blockquote-margin-inline-end: 1.6em;
   --utrecht-blockquote-margin-inline-start: 1.6em;
   --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
   --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
   --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
   --utrecht-backdrop-reduced-transparency-opacity: 0.98;
-  --utrecht-backdrop-fade-in-animation-duration: 0.4s;
+  --utrecht-backdrop-fade-in-animation-duration: 400ms;
   --utrecht-backdrop-opacity: 0.8;
   --utrecht-article-max-inline-size: 780px;
   --utrecht-alert-icon-inset-block-start: 6px;
@@ -443,6 +429,7 @@
   --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
   --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
+  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
   --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -461,6 +448,7 @@
   --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
   --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
   --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
   --utrecht-surface-color: var(--utrecht-color-grey-10);
@@ -475,7 +463,7 @@
   --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
   --utrecht-spotlight-section-color: var(--utrecht-color-black);
   --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
-  --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
+  --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
   --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
   --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
   --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -544,6 +532,7 @@
   --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
   --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
+  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-page-color: var(--utrecht-color-black);
   --utrecht-page-background-color: var(--utrecht-color-white);
   --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -555,7 +544,7 @@
   --utrecht-page-footer-color: var(--utrecht-color-white);
   --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
-  --utrecht-number-badge-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
+  --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
   --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -583,6 +572,12 @@
   --utrecht-nav-bar-background-color: var(--utrecht-color-white);
   --utrecht-mark-color: var(--utrecht-color-black);
   --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
+  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
+  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
+  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
+  --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
+  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
+  --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
   --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
   --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
   --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
@@ -591,12 +586,6 @@
   --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
   --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
   --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
-  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
-  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
-  --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
-  --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
-  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
   --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
   --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
   --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
@@ -612,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);
@@ -677,7 +666,9 @@
   --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
   --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
   --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
+  --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
   --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
   --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -702,6 +693,8 @@
   --utrecht-focus-outline-width: var(--utrecht-border-width-md);
   --utrecht-focus-outline-color: var(--utrecht-color-black);
   --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
+  --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
+  --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
   --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -737,6 +730,8 @@
   --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
   --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
   --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
+  --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
+  --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-code-block-color: var(--utrecht-color-black);
   --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
   --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -840,7 +835,6 @@
   --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
   --utrecht-button-disabled-border-color: var(--utrecht-color-grey-80);
   --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
-  --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
   --utrecht-button-active-color: var(--utrecht-color-white);
   --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
   --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -851,6 +845,7 @@
   --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
   --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --utrecht-button-column-gap: var(--utrecht-space-text-xs);
   --utrecht-button-color: var(--utrecht-color-grey-40);
   --utrecht-button-border-color: var(--utrecht-color-grey-40);
   --utrecht-button-background-color: var(--utrecht-color-white);
@@ -869,6 +864,8 @@
   --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-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);
   --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -946,7 +943,7 @@
   --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
   --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
   --utrecht-paragraph-lead-color: var(--utrecht-document-color);
-  --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size); /* Default corner radius for badge components */
+  --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
   --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
   --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
   --utrecht-link-visited-color: var(--utrecht-link-color);