@dictu/design-tokens 2.12.0 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @dictu/design-tokens
 
+## 2.13.0
+
+### Minor Changes
+
+- eae83a7: Added row-gap and column-gap tokens to container and section
+  tokensets
+
+## 2.12.1
+
+### Patch Changes
+
+- 077c299: Added border-style property, changed focus background color, and
+  removed hover styling for disabled select element
+
 ## 2.12.0
 
 ### Minor Changes

package/dist/index.css

@@ -198,6 +198,9 @@
   --govnl-table-cell-padding-inline-start: 0.4em;
   --govnl-table-cell-icon-size: 1em;
   --govnl-table-cell-header-border-inline-end-width: 2px;
+  --govnl-section-gap-small-column-gap: 0;
+  --govnl-section-gap-medium-column-gap: 0;
+  --govnl-section-gap-large-column-gap: 0;
   --govnl-searchbar-small-min-inline-size: 240px;
   --govnl-searchbar-small-max-inline-size: 480px;
   --govnl-searchbar-min-inline-size: 400px;
@@ -254,6 +257,9 @@
   --govnl-grid-template-columns-col-3: repeat(3, 1fr);
   --govnl-grid-template-columns-col-4: repeat(4, 1fr);
   --govnl-grid-template-rows-auto: auto;
+  --govnl-container-gap-small-column-gap: 0;
+  --govnl-container-gap-medium-column-gap: 0;
+  --govnl-container-gap-large-column-gap: 0;
   --govnl-card-default-focus-border-color: transparant;
   --govnl-card-heading-text-decoration-line: underline;
   --govnl-card-heading-hover-text-decoration-line: underline;
@@ -296,6 +302,7 @@
   --govnl-text-input-padding-block-end: 0rem;
   --govnl-text-input-small-padding-block-start: 0rem;
   --govnl-text-input-small-padding-block-end: 0rem;
+  --govnl-select-border-style: solid;
   --govnl-select-list-item-active-text-decoration: none;
   --govnl-select-list-item-hover-text-decoration: underline;
   --govnl-select-list-item-text-decoration: none;
@@ -627,6 +634,9 @@
   --govnl-table-cell-selected-background-color: var(--govnl-brand-primary-1-50);
   --govnl-table-cell-header-border-inline-end-color: var(--govnl-line-strong-border-color);
   --govnl-table-row-border-block-end-color: var(--govnl-line-subtle-border-color);
+  --govnl-section-gap-small-row-gap: var(--govnl-space-sm);
+  --govnl-section-gap-medium-row-gap: var(--govnl-space-md);
+  --govnl-section-gap-large-row-gap: var(--govnl-space-lg);
   --govnl-pagination-relative-link-large-previous-padding-block-start: var(--govnl-space-2xs);
   --govnl-pagination-relative-link-large-previous-padding-block-end: var(--govnl-space-2xs);
   --govnl-pagination-relative-link-large-previous-padding-inline-end: var(--govnl-space-3xs);
@@ -750,6 +760,9 @@
   --govnl-grid-gap-column-max: var(--govnl-gap-content-max);
   --govnl-figure-caption-color: var(--govnl-document-color);
   --govnl-figure-row-gap: 0.5rem;
+  --govnl-container-gap-small-row-gap: var(--govnl-space-sm);
+  --govnl-container-gap-medium-row-gap: var(--govnl-space-md);
+  --govnl-container-gap-large-row-gap: var(--govnl-space-lg);
   --govnl-card-default-background-color: var(--govnl-document-background-color);
   --govnl-card-default-border-color: var(--govnl-line-subtle-border-color);
   --govnl-card-default-hover-border-color: var(--govnl-line-border-color);
@@ -917,6 +930,7 @@
   --govnl-select-hover-background-color: var(--govnl-form-control-hover-background-color);
   --govnl-select-hover-border-color: var(--govnl-form-control-hover-border-color);
   --govnl-select-hover-color: var(--govnl-form-control-hover-color);
+  --govnl-select-focus-background-color: var(--govnl-form-control-background-color);
   --govnl-select-error-background-color: var(--govnl-form-control-invalid-background-color);
   --govnl-select-icon-color: var(--govnl-form-control-color);
   --govnl-select-list-item-background-color: var(--govnl-form-control-background-color);
@@ -1072,7 +1086,6 @@
   --govnl-text-area-focus-outline-color: var(--govnl-form-control-focus-outline-color);
   --govnl-text-area-error-border-color: var(--govnl-form-control-invalid-border-color);
   --govnl-text-area-error-color: var(--govnl-form-control-invalid-color);
-  --govnl-select-focus-background-color: var(--govnl-form-control-focus-background-color);
   --govnl-select-focus-border-color: var(--govnl-form-control-focus-border-color);
   --govnl-select-focus-color: var(--govnl-form-control-focus-color);
   --govnl-select-focus-outline-color: var(--govnl-form-control-focus-outline-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/design-tokens",
-  "version": "2.12.0",
+  "version": "2.13.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/container.tokens.json

@@ -8,7 +8,39 @@
       "padding-inline": {
         "$type": "dimension",
         "$value": "{govnl.dimension.size.200}"
+      },
+      "gap": {
+        "small": {
+          "column-gap": {
+            "$type": "dimension",
+            "$value": "0"
+          },
+          "row-gap": {
+            "$type": "dimension",
+            "$value": "{govnl.space.sm}"
+          }
+        },
+        "medium": {
+          "column-gap": {
+            "$type": "dimension",
+            "$value": "0"
+          },
+          "row-gap": {
+            "$type": "dimension",
+            "$value": "{govnl.space.md}"
+          }
+        },
+        "large": {
+          "column-gap": {
+            "$type": "dimension",
+            "$value": "0"
+          },
+          "row-gap": {
+            "$type": "dimension",
+            "$value": "{govnl.space.lg}"
+          }
+        }
       }
     }
   }
-}
+}

package/src/components/form-elements/select.tokens.json

@@ -53,6 +53,10 @@
         "$type": "borderRadius",
         "$value": "{govnl.border.border-radius.sm}"
       },
+      "border-style": {
+        "$type": "other",
+        "$value": "solid"
+      },
       "border-width": {
         "$type": "borderWidth",
         "$value": "{govnl.border.border-width.sm}"
@@ -78,7 +82,7 @@
       "focus": {
         "background-color": {
           "$type": "color",
-          "$value": "{govnl.form-control.focus.background-color}"
+          "$value": "{govnl.form-control.background-color}"
         },
         "border-color": {
           "$type": "color",
@@ -165,4 +169,4 @@
       }
     }
   }
-}
+}

package/src/components/section.tokens.json

@@ -4,7 +4,39 @@
       "margin-block-end": {
         "$type": "dimension",
         "$value": "{govnl.dimension.size.1000}"
+      },
+      "gap": {
+        "small": {
+          "column-gap": {
+            "$type": "dimension",
+            "$value": "0"
+          },
+          "row-gap": {
+            "$type": "dimension",
+            "$value": "{govnl.space.sm}"
+          }
+        },
+        "medium": {
+          "column-gap": {
+            "$type": "dimension",
+            "$value": "0"
+          },
+          "row-gap": {
+            "$type": "dimension",
+            "$value": "{govnl.space.md}"
+          }
+        },
+        "large": {
+          "column-gap": {
+            "$type": "dimension",
+            "$value": "0"
+          },
+          "row-gap": {
+            "$type": "dimension",
+            "$value": "{govnl.space.lg}"
+          }
+        }
       }
     }
   }
-}
+}