@utrecht/component-library-css 3.2.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @utrecht/component-library-css
 
+## 4.0.0
+
+### Major Changes
+
+- 14c8559: Replace `utrecht.link-list.item.margin-block-start` design token with `utrecht.link-list.row-gap`.
+- bd0514c: Rename tokens in the Link list component, because they should be on `link` instead of on `item`. "Item" currently only exists in CSS, but is not necessary to build the Link list in Figma.
+
+  - Rename `utrecht.link-list.item.font-weight` to `utrecht.link-list.link.font-weight`.
+  - Rename `utrecht.link-list.item.column-gap` to `utrecht.link-list.link.column-gap`.
+
+### Minor Changes
+
+- e2b188d: Add design token to Link list component: `utrecht.link-list.link.text-decoration`, so you can enable or disable the underline. By default the links have no underline.
+
+### Patch Changes
+
+- 0e2e4da: Fix rendering of the checkbox component in the combined indeterminate and checked state, to have an indeterminate icon instead of a checked icon.'
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/index.css

@@ -2553,8 +2553,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   border-color: var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));
   border-width: var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width));
 }
-.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,
-.utrecht-custom-checkbox--html-input:indeterminate {
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate, .utrecht-checkbox--custom.utrecht-checkbox--html-input:checked:indeterminate,
+.utrecht-custom-checkbox--html-input:indeterminate,
+.utrecht-custom-checkbox--html-input:checked:indeterminate {
   background-color: var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
   border-color: var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));
@@ -3903,13 +3904,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
   /* reset <button> styling */
   border-width: 0;
 }
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
  * Copyright (c) 2021 Robbert Broersma
  */
 /* reset before other stylesheets */
-.utrecht-link-list,
 .utrecht-link-list--html-ul {
   margin-block-end: 0;
   margin-block-start: 0;
@@ -3917,39 +3922,34 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-inline-start: 0;
   padding-inline-start: 0;
 }
-.utrecht-link-list > li,
 .utrecht-link-list--html-ul > li {
   list-style: none;
 }
 
 .utrecht-link-list {
-  --utrecht-link-text-decoration: none;
-  --utrecht-link-hover-text-decoration: underline;
-  --utrecht-link-focus-text-decoration: underline;
+  /* TODO: I wish we could make `--utrecht-link-text-decoration` fall back to `var(--utrecht-link-text-decoration)`
+   * when `var(--utrecht-link-list-text-decoration)` is not set.
+   */
+  --utrecht-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start);
+  --utrecht-icon-size: var(--utrecht-link-list-icon-size);
+  --utrecht-link-icon-size: var(--utrecht-link-list-icon-size);
+  --utrecht-link-text-decoration: var(--utrecht-link-list-link-text-decoration, none);
+  display: flex;
+  flex-direction: column;
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-link-list-margin-block-start, 0));
-}
-
-.utrecht-link-list--distanced {
-  --utrecht-space-around: 1;
+  row-gap: var(--utrecht-link-list-row-gap);
 }
 
 .utrecht-link-list__item {
-  --utrecht-icon-size: var(--utrecht-link-list-icon-size);
-  --utrecht-link-icon-size: var(--utrecht-link-list-icon-size);
-  --utrecht-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start);
   display: block;
-  font-weight: var(--utrecht-link-list-item-font-weight);
-}
-
-.utrecht-link-list__item + .utrecht-link-list__item {
-  margin-block-start: var(--utrecht-link-list-item-margin-block-start);
 }
 
 .utrecht-link-list__link {
   align-items: baseline;
-  column-gap: var(--utrecht-link-list-item-column-gap);
+  column-gap: var(--utrecht-link-list-link-column-gap);
   display: inline-flex;
+  font-weight: var(--utrecht-link-list-link-font-weight);
 }
 
 /**

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.2.0",
+  "version": "4.0.0",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -20,7 +20,7 @@
     "rimraf": "3.0.2",
     "rollup": "3.29.4",
     "rollup-plugin-postcss": "4.0.2",
-    "@utrecht/components": "5.0.0",
+    "@utrecht/components": "6.0.0",
     "@utrecht/html-content-css": "1.1.0"
   },
   "main": "dist/index.css",