@dictu/design-tokens 2.15.0 → 2.17.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @dictu/design-tokens
 
+## 2.17.0
+
+### Minor Changes
+
+- a9f9669: Fixes the card icon rendering in the wrong color. The optional card
+  icon inherited `currentColor`, falling back to plain black instead of a
+  design-system color. New `card.default.icon.color` and
+  `card.accent.icon.color` tokens are added and applied, so the icon matches the
+  heading color of its variant (`heading.color` for the default card,
+  `card.accent.color` for the accent card).
+
+## 2.16.0
+
+### Minor Changes
+
+- d4660a7: Add timeline design tokens for the connector icon-center and
+  sub-icon-center, heading text-align, content align-items, and button
+  justify-content, so the timeline component relies on tokens instead of
+  hardcoded values and mixin arguments.
+
 ## 2.15.0
 
 ### Minor Changes

package/dist/index.css

@@ -185,9 +185,12 @@
   --govnl-timeline-connector-padding-inline-end: 0px;
   --govnl-timeline-connector-margin-inline-start: 15px;
   --govnl-timeline-title-padding-block-start: 0px;
+  --govnl-timeline-heading-text-align: start;
   --govnl-timeline-heading-text-decoration: none;
   --govnl-timeline-heading-hover-text-decoration: underline;
   --govnl-timeline-subheading-padding-block-start: 0px;
+  --govnl-timeline-content-align-items: flex-start;
+  --govnl-timeline-button-justify-content: start;
   --govnl-table-margin-block-end: 0;
   --govnl-table-caption-text-align: start;
   --govnl-table-header-sticky-border-block-end-width: 2px;
@@ -634,6 +637,8 @@
   --govnl-timeline-toggle-link-padding-block-end: var(--govnl-space-sm);
   --govnl-timeline-connector-color: var(--govnl-brand-primary-1-500);
   --govnl-timeline-connector-padding-inline-start: var(--govnl-space-sm);
+  --govnl-timeline-connector-icon-center: var(--govnl-space-sm);
+  --govnl-timeline-connector-sub-icon-center: var(--govnl-space-xs);
   --govnl-timeline-title-padding-block-end: var(--govnl-space-sm);
   --govnl-timeline-heading-padding-block-start: var(--govnl-space-4xs);
   --govnl-timeline-heading-padding-block-end: var(--govnl-space-md);
@@ -1101,6 +1106,8 @@
   --govnl-link-as-button-secondary-action-hover-color: var(--govnl-interaction-hover-color);
   --govnl-link-as-button-secondary-action-active-border-color: var(--govnl-interaction-active-color);
   --govnl-link-as-button-secondary-action-active-color: var(--govnl-interaction-active-color);
+  --govnl-card-default-icon-color: var(--govnl-heading-color);
+  --govnl-card-accent-icon-color: var(--govnl-card-accent-color);
   --govnl-button-primary-action-hover-background-color: var(--govnl-interaction-hover-color);
   --govnl-button-primary-action-hover-border-color: var(--govnl-interaction-hover-color);
   --govnl-button-primary-action-active-background-color: var(--govnl-interaction-active-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/design-tokens",
-  "version": "2.15.0",
+  "version": "2.17.0",
   "author": "Dienst ICT Uitvoering",
   "description": "Design Tokens for DICTU Design system, based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/components/card.tokens.json

@@ -85,6 +85,12 @@
             "$type": "color",
             "$value": "{govnl.document.subtle.color}"
           }
+        },
+        "icon": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.heading.color}"
+          }
         }
       },
       "heading": {
@@ -154,6 +160,12 @@
         }
       },
       "accent": {
+        "icon": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.card.accent.color}"
+          }
+        },
         "metadata-subheading": {
           "color": {
             "$type": "color",

package/src/components/timeline.tokens.json

@@ -77,6 +77,14 @@
         "margin-inline-start": {
           "$type": "dimension",
           "$value": "15px"
+        },
+        "icon-center": {
+          "$type": "dimension",
+          "$value": "{govnl.space.sm}"
+        },
+        "sub-icon-center": {
+          "$type": "dimension",
+          "$value": "{govnl.space.xs}"
         }
       },
       "title": {
@@ -90,6 +98,10 @@
         }
       },
       "heading": {
+        "text-align": {
+          "$type": "other",
+          "$value": "start"
+        },
         "text-decoration": {
           "$type": "textDecoration",
           "$value": "none"
@@ -129,6 +141,16 @@
         "column-gap": {
           "$type": "dimension",
           "$value": "{govnl.gap-content.min}"
+        },
+        "align-items": {
+          "$type": "other",
+          "$value": "flex-start"
+        }
+      },
+      "button": {
+        "justify-content": {
+          "$type": "other",
+          "$value": "start"
         }
       },
       "border-radius": {