@dictu/design-tokens 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @dictu/design-tokens
 
+## 2.2.0
+
+### Minor Changes
+
+- b474a6c: Changes to table component:
+  - Smaller caption font-size
+  - Word wrap set on table header
+
 ## 2.1.0
 
 ### Minor Changes

package/dist/index.css

@@ -238,10 +238,12 @@
   --govnl-card-heading-active-text-decoration-line: underline;
   --govnl-card-heading-focus-visible-text-decoration-line: underline;
   --govnl-card-heading-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
+  --govnl-card-metadata-subheading-text-decoration-line: none;
   --govnl-card-accent-border-color: transparant;
   --govnl-card-accent-hover-border-color: transparant;
   --govnl-card-accent-active-border-color: transparant;
   --govnl-card-accent-focus-border-color: transparant;
+  --govnl-card-metadata-footer-text-decoration-line: none;
   --govnl-button-primary-action-border-color: rgba(0, 0, 0, 0);
   --govnl-button-primary-action-hover-border-color: rgba(0, 0, 0, 0);
   --govnl-button-primary-action-active-border-color: rgba(0, 0, 0, 0);
@@ -306,7 +308,7 @@
   --nl-link-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
   --govnl-timeline-connector-border-width: var(--govnl-border-border-width-md);
   --govnl-timeline-border-radius: var(--govnl-border-border-radius-sm);
-  --govnl-table-caption-font-size: var(--govnl-typography-font-size-xl);
+  --govnl-table-caption-font-size: var(--govnl-typography-font-size-sm);
   --govnl-table-header-border-block-end-width: var(--govnl-border-border-width-md);
   --govnl-table-header-sticky-color: var(--govnl-color-black);
   --govnl-table-footer-background-color: var(--govnl-color-white);
@@ -647,6 +649,14 @@
   --govnl-card-default-main-padding-inline-start: var(--govnl-space-sm);
   --govnl-card-default-main-padding-block-end: var(--govnl-space-sm);
   --govnl-card-default-main-row-gap: var(--govnl-space-xs);
+  --govnl-card-default-metadata-subheading-color: var(--govnl-document-subtle-color);
+  --govnl-card-default-metadata-footer-color: var(--govnl-document-subtle-color);
+  --govnl-card-metadata-subheading-font-family: var(--govnl-document-font-family);
+  --govnl-card-metadata-subheading-font-size: var(--govnl-document-font-size);
+  --govnl-card-metadata-subheading-font-weight: var(--govnl-document-font-weight);
+  --govnl-card-metadata-subheading-line-height: var(--govnl-document-line-height);
+  --govnl-card-accent-metadata-subheading-color: var(--govnl-document-inverse-color);
+  --govnl-card-accent-metadata-footer-color: var(--govnl-document-inverse-color);
   --govnl-card-accent-background-color: var(--govnl-brand-primary-1-500);
   --govnl-card-accent-color: var(--govnl-document-inverse-color);
   --govnl-card-accent-hover-background-color: var(--govnl-brand-primary-1-500);
@@ -660,6 +670,10 @@
   --govnl-card-accent-paragraph-color: var(--govnl-document-inverse-color);
   --govnl-card-accent-paragraph-hover-color: var(--govnl-document-inverse-color);
   --govnl-card-accent-paragraph-active-color: var(--govnl-document-inverse-color);
+  --govnl-card-metadata-footer-font-family: var(--govnl-document-font-family);
+  --govnl-card-metadata-footer-font-size: var(--govnl-document-font-size);
+  --govnl-card-metadata-footer-font-weight: var(--govnl-document-font-weight);
+  --govnl-card-metadata-footer-line-height: var(--govnl-document-line-height);
   --govnl-button-primary-action-background-color: var(--govnl-interaction-color);
   --govnl-button-primary-action-focus-background-color: var(--govnl-focus-background-color);
   --govnl-button-primary-action-focus-color: var(--govnl-focus-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/design-tokens",
-  "version": "2.1.0",
+  "version": "2.2.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/$metadata.json

@@ -29,7 +29,7 @@
     "components/page-footer.tokens",
     "components/page-header.tokens",
     "components/paragraph.tokens",
-    "components/searchbar.tokens.wip",
+    "components/searchbar.tokens",
     "components/section.tokens",
     "components/skip-link.tokens",
     "components/table.tokens",

package/src/$themes.json

@@ -28,7 +28,6 @@
       "components/timeline.tokens": "enabled",
       "components/table.tokens": "enabled",
       "components/list.tokens": "enabled",
-      "components/searchbar.tokens.wip": "enabled",
       "components/form-elements/checkbox.tokens": "enabled",
       "components/form-elements/date-input.tokens": "enabled",
       "components/form-elements/fieldset.tokens": "enabled",
@@ -37,7 +36,8 @@
       "components/form-elements/radio-button.tokens": "enabled",
       "components/form-elements/select.tokens": "enabled",
       "components/form-elements/text-area.tokens": "enabled",
-      "components/form-elements/text-input.tokens": "enabled"
+      "components/form-elements/text-input.tokens": "enabled",
+      "components/searchbar.tokens": "enabled"
     },
     "$figmaVariableReferences": {},
     "group": "GovNL"

package/src/components/card.tokens.json

@@ -73,6 +73,18 @@
         "border-width": {
           "$type": "dimension",
           "$value": "{govnl.border.border-width.sm}"
+        },
+        "metadata-subheading": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.document.subtle.color}"
+          }
+        },
+        "metadata-footer": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.document.subtle.color}"
+          }
         }
       },
       "heading": {
@@ -119,7 +131,41 @@
           }
         }
       },
+      "metadata-subheading": {
+        "text-decoration-line": {
+          "$type": "textDecoration",
+          "$value": "none"
+        },
+        "font-family": {
+          "$type": "fontFamilies",
+          "$value": "{govnl.document.font-family}"
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.document.font-size}"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.document.font-weight}"
+        },
+        "line-height": {
+          "$type": "lineHeights",
+          "$value": "{govnl.document.line-height}"
+        }
+      },
       "accent": {
+        "metadata-subheading": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.document.inverse.color}"
+          }
+        },
+        "metadata-footer": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.document.inverse.color}"
+          }
+        },
         "background-color": {
           "$type": "color",
           "$value": "{govnl.brand.primary-1.500}"
@@ -228,6 +274,28 @@
             }
           }
         }
+      },
+      "metadata-footer": {
+        "text-decoration-line": {
+          "$type": "textDecoration",
+          "$value": "none"
+        },
+        "font-family": {
+          "$type": "fontFamilies",
+          "$value": "{govnl.document.font-family}"
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.document.font-size}"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.document.font-weight}"
+        },
+        "line-height": {
+          "$type": "lineHeights",
+          "$value": "{govnl.document.line-height}"
+        }
       }
     }
   }

package/src/components/table.tokens.json

@@ -12,7 +12,7 @@
       "caption": {
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{govnl.typography.font-size.xl}"
+          "$value": "{govnl.typography.font-size.sm}"
         },
         "font-weight": {
           "$type": "fontWeights",