@dictu/design-tokens 2.13.0 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @dictu/design-tokens
 
+## 2.15.0
+
+### Minor Changes
+
+- 549c9a0: Fixes colors for border of radio button
+
+## 2.14.0
+
+### Minor Changes
+
+- b45c5b3: Added possibility for icon to be placed at the beginning of a link in
+  the Link component
+- 3d96da7: Changed design tokens for quote component
+
 ## 2.13.0
 
 ### Minor Changes

package/dist/index.css

@@ -233,7 +233,7 @@
   --govnl-logo-subtitle-line-height: 1rem;
   --govnl-logo-subtitle-font-size: 0.775rem;
   --govnl-link-icon-size: 1em;
-  --govnl-link-icon-margin-inline-start: 0.3em;
+  --govnl-link-row-gap: 0.3em;
   --govnl-link-active-text-decoration-thickness: max(3px, .1875rem, .12em);
   --govnl-link-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
   --govnl-link-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
@@ -290,6 +290,19 @@
   --govnl-breadcrumb-nav-link-text-decoration: underline;
   --govnl-breadcrumb-nav-link-mobile-padding-inline-start: 0rem;
   --govnl-breadcrumb-nav-current-text-decoration: none;
+  --govnl-quote-padding-block-start: 0;
+  --govnl-quote-padding-block-end: 0;
+  --govnl-quote-border-block-end-style: solid;
+  --govnl-quote-border-block-end-width: 0;
+  --govnl-quote-border-inline-start-style: solid;
+  --govnl-quote-border-top-left-radius: 0;
+  --govnl-quote-border-top-right-radius: 0;
+  --govnl-quote-border-bottom-right-radius: 0;
+  --govnl-quote-border-bottom-left-radius: 0;
+  --govnl-quote-work-font-style: normal;
+  --govnl-quote-role-font-style: normal;
+  --govnl-quote-author-font-style: normal;
+  --govnl-quote-blockquote-font-style: italic;
   --govnl-accordion-body-border-color: rgba(0, 0, 0, 0);
   --govnl-accordion-button-border-color: rgba(0, 0, 0, 0);
   --govnl-accordion-button-icon-size: 1.5em;
@@ -306,9 +319,6 @@
   --govnl-select-list-item-active-text-decoration: none;
   --govnl-select-list-item-hover-text-decoration: underline;
   --govnl-select-list-item-text-decoration: none;
-  --govnl-radio-button-checked-border-color: transparant;
-  --govnl-radio-button-checked-hover-border-color: transparant;
-  --govnl-radio-button-checked-active-border-color: transparant;
   --govnl-form-field-label-group-row-gap: 0rem;
   --govnl-fieldset-legend-group-row-gap: 0rem;
   --govnl-checkbox-checked-border-color: transparant;
@@ -422,10 +432,28 @@
   --govnl-button-small-min-block-size: var(--govnl-dimension-size-500);
   --govnl-button-small-min-inline-size: var(--govnl-dimension-size-500);
   --govnl-breadcrumb-nav-separator-size: var(--govnl-dimension-size-300);
+  --govnl-quote-border-inline-start-width: var(--govnl-border-border-width-lg);
+  --govnl-quote-work-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-quote-work-font-weight: var(--govnl-typography-font-weight-bold);
+  --govnl-quote-role-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-quote-role-font-weight: var(--govnl-typography-font-weight-regular);
+  --govnl-quote-author-font-size: var(--govnl-typography-font-size-lg);
+  --govnl-quote-author-font-weight: var(--govnl-typography-font-weight-bold);
+  --govnl-quote-caption-font-size: var(--govnl-typography-font-size-sm);
+  --govnl-quote-blockquote-font-size: var(--govnl-typography-font-size-xl);
+  --govnl-quote-blockquote-font-weight: var(--govnl-typography-font-weight-regular);
   --govnl-accordion-body-border-width: var(--govnl-border-border-width-sm);
   --govnl-accordion-button-hover-background-color: var(--govnl-color-grijs-100);
   --govnl-accordion-button-active-background-color: var(--govnl-color-grijs-200);
   --govnl-accordion-button-section-border-block-end-width: var(--govnl-border-border-width-sm);
+  --govnl-textarea-min-block-size: var(--govnl-dimension-pointer-target-min-size);
+  --govnl-textarea-border-radius: var(--govnl-border-border-radius-sm);
+  --govnl-textarea-border-width: var(--govnl-border-border-width-sm);
+  --govnl-textarea-error-border-width: var(--govnl-border-border-width-md);
+  --govnl-textarea-hover-border-width: var(--govnl-border-border-width-sm);
+  --govnl-textarea-read-only-border-color: var(--govnl-form-control-read-only-border-color);
+  --govnl-textarea-read-only-border-width: var(--govnl-border-border-width-sm);
+  --govnl-textarea-active-border-width: var(--govnl-border-border-width-sm);
   --govnl-text-input-min-block-size: var(--govnl-dimension-pointer-target-min-size);
   --govnl-text-input-border-radius: var(--govnl-border-border-radius-sm);
   --govnl-text-input-border-width: var(--govnl-border-border-width-sm);
@@ -433,11 +461,6 @@
   --govnl-text-input-read-only-border-color: var(--govnl-form-control-read-only-border-color);
   --govnl-text-input-small-font-size: var(--govnl-typography-font-size-sm);
   --govnl-text-input-small-min-block-size: var(--govnl-dimension-size-500);
-  --govnl-textarea-min-block-size: var(--govnl-dimension-pointer-target-min-size);
-  --govnl-textarea-border-radius: var(--govnl-border-border-radius-sm);
-  --govnl-textarea-border-width: var(--govnl-border-border-width-sm);
-  --govnl-textarea-error-border-width: var(--govnl-border-border-width-md);
-  --govnl-text-area-read-only-border-color: var(--govnl-form-control-read-only-border-color);
   --govnl-select-min-block-size: var(--govnl-dimension-pointer-target-min-size);
   --govnl-select-border-radius: var(--govnl-border-border-radius-sm);
   --govnl-select-border-width: var(--govnl-border-border-width-sm);
@@ -853,6 +876,16 @@
   --govnl-breadcrumb-nav-current-padding-inline-end: var(--govnl-space-xs);
   --govnl-breadcrumb-nav-current-padding-inline-start: var(--govnl-space-xs);
   --govnl-breadcrumb-nav-separator-color: var(--govnl-document-subtle-color);
+  --govnl-quote-padding-inline-start: var(--govnl-space-md);
+  --govnl-quote-padding-inline-end: var(--govnl-space-md);
+  --govnl-quote-border-block-end-color: var(--govnl-line-border-color);
+  --govnl-quote-border-inline-start-color: var(--govnl-feedback-informative-border-color);
+  --govnl-quote-row-gap: var(--govnl-space-sm);
+  --govnl-quote-work-color: var(--govnl-feedback-informative-color);
+  --govnl-quote-role-color: var(--govnl-document-subtle-color);
+  --govnl-quote-author-color: var(--govnl-brand-primary-1-500);
+  --govnl-quote-caption-row-gap: var(--govnl-space-2xs);
+  --govnl-quote-blockquote-color: var(--govnl-document-color);
   --govnl-accordion-body-font-family: var(--govnl-document-font-family);
   --govnl-accordion-body-font-size: var(--govnl-document-font-size);
   --govnl-accordion-body-font-weight: var(--govnl-document-font-weight);
@@ -878,6 +911,26 @@
   --govnl-accordion-button-expanded-background-color: var(--govnl-document-background-color);
   --govnl-accordion-button-expanded-color: var(--govnl-document-color);
   --govnl-accordion-button-section-border-color: var(--govnl-line-subtle-border-color);
+  --govnl-textarea-font-family: var(--govnl-form-control-font-family);
+  --govnl-textarea-font-size: var(--govnl-form-control-font-size);
+  --govnl-textarea-font-weight: var(--govnl-form-control-font-weight);
+  --govnl-textarea-line-height: var(--govnl-form-control-line-height);
+  --govnl-textarea-padding-block-start: var(--govnl-space-xs);
+  --govnl-textarea-padding-inline-end: var(--govnl-space-xs);
+  --govnl-textarea-padding-block-end: var(--govnl-space-xs);
+  --govnl-textarea-padding-inline-start: var(--govnl-space-xs);
+  --govnl-textarea-error-background-color: var(--govnl-form-control-invalid-background-color);
+  --govnl-textarea-background-color: var(--govnl-form-control-background-color);
+  --govnl-textarea-border-color: var(--govnl-form-control-border-color);
+  --govnl-textarea-color: var(--govnl-form-control-color);
+  --govnl-textarea-hover-background-color: var(--govnl-form-control-hover-background-color);
+  --govnl-textarea-hover-border-color: var(--govnl-form-control-hover-border-color);
+  --govnl-textarea-hover-color: var(--govnl-form-control-hover-color);
+  --govnl-textarea-focus-background-color: var(--govnl-form-control-background-color);
+  --govnl-textarea-read-only-background-color: var(--govnl-form-control-read-only-background-color);
+  --govnl-textarea-read-only-color: var(--govnl-form-control-read-only-color);
+  --govnl-textarea-placeholder-color: var(--govnl-form-control-placeholder-color);
+  --govnl-textarea-active-background-color: var(--govnl-form-control-background-color);
   --govnl-text-input-font-family: var(--govnl-form-control-font-family);
   --govnl-text-input-font-size: var(--govnl-form-control-font-size);
   --govnl-text-input-font-weight: var(--govnl-form-control-font-weight);
@@ -897,24 +950,6 @@
   --govnl-text-input-placeholder-color: var(--govnl-form-control-placeholder-color);
   --govnl-text-input-small-padding-inline-end: var(--govnl-space-2xs);
   --govnl-text-input-small-padding-inline-start: var(--govnl-space-2xs);
-  --govnl-textarea-font-family: var(--govnl-form-control-font-family);
-  --govnl-textarea-font-size: var(--govnl-form-control-font-size);
-  --govnl-textarea-font-weight: var(--govnl-form-control-font-weight);
-  --govnl-textarea-line-height: var(--govnl-form-control-line-height);
-  --govnl-textarea-padding-block-start: var(--govnl-space-xs);
-  --govnl-textarea-padding-inline-end: var(--govnl-space-xs);
-  --govnl-textarea-padding-block-end: var(--govnl-space-xs);
-  --govnl-textarea-padding-inline-start: var(--govnl-space-xs);
-  --govnl-text-area-background-color: var(--govnl-form-control-background-color);
-  --govnl-text-area-border-color: var(--govnl-form-control-border-color);
-  --govnl-text-area-color: var(--govnl-form-control-color);
-  --govnl-text-area-hover-background-color: var(--govnl-form-control-hover-background-color);
-  --govnl-text-area-hover-border-color: var(--govnl-form-control-hover-border-color);
-  --govnl-text-area-hover-color: var(--govnl-form-control-hover-color);
-  --govnl-text-area-error-background-color: var(--govnl-form-control-invalid-background-color);
-  --govnl-text-area-read-only-background-color: var(--govnl-form-control-read-only-background-color);
-  --govnl-text-area-read-only-color: var(--govnl-form-control-read-only-color);
-  --govnl-text-area-placeholder-color: var(--govnl-form-control-placeholder-color);
   --govnl-select-font-family: var(--govnl-form-control-font-family);
   --govnl-select-font-size: var(--govnl-form-control-font-size);
   --govnl-select-font-weight: var(--govnl-form-control-font-weight);
@@ -940,6 +975,7 @@
   --govnl-select-list-item-hover-background-color: var(--govnl-form-control-hover-background-color);
   --govnl-select-list-item-hover-color: var(--govnl-form-control-hover-color);
   --govnl-select-background-position: right var(--govnl-space-xs) center;
+  --govnl-radio-button-dot-size: var(--govnl-space-2xs);
   --govnl-radio-button-unchecked-background-color: var(--govnl-form-control-background-color);
   --govnl-radio-button-unchecked-border-color: var(--govnl-form-control-border-color);
   --govnl-radio-button-unchecked-hover-background-color: var(--govnl-form-control-hover-background-color);
@@ -947,9 +983,13 @@
   --govnl-radio-button-unchecked-active-background-color: var(--govnl-form-control-active-background-color);
   --govnl-radio-button-unchecked-active-border-color: var(--govnl-form-control-hover-border-color);
   --govnl-radio-button-checked-background-color: var(--govnl-interaction-color);
+  --govnl-radio-button-checked-border-color: var(--govnl-interaction-color);
+  --govnl-radio-button-checked-dot-color: var(--govnl-document-inverse-color);
   --govnl-radio-button-checked-color: var(--govnl-document-inverse-color);
   --govnl-radio-button-checked-hover-color: var(--govnl-document-inverse-color);
+  --govnl-radio-button-checked-hover-dot-color: var(--govnl-document-inverse-color);
   --govnl-radio-button-checked-active-color: var(--govnl-document-inverse-color);
+  --govnl-radio-button-checked-active-dot-color: var(--govnl-document-inverse-color);
   --govnl-radio-button-column-gap: var(--govnl-space-2xs);
   --govnl-label-required-font-family: var(--govnl-form-control-font-family);
   --govnl-label-required-font-weight: var(--govnl-form-control-font-weight);
@@ -1075,17 +1115,19 @@
   --govnl-breadcrumb-nav-link-hover-color: var(--govnl-interaction-hover-color);
   --govnl-accordion-button-hover-color: var(--govnl-interaction-hover-color);
   --govnl-accordion-button-active-color: var(--govnl-interaction-active-color);
+  --govnl-textarea-error-border-color: var(--govnl-form-control-invalid-border-color);
+  --govnl-textarea-error-color: var(--govnl-form-control-invalid-color);
+  --govnl-textarea-focus-border-color: var(--govnl-form-control-focus-border-color);
+  --govnl-textarea-focus-color: var(--govnl-form-control-focus-color);
+  --govnl-textarea-focus-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-textarea-active-border-color: var(--govnl-form-control-focus-border-color);
+  --govnl-textarea-active-color: var(--govnl-form-control-focus-color);
+  --govnl-textarea-active-outline-color: var(--govnl-form-control-focus-outline-color);
   --govnl-text-input-focus-border-color: var(--govnl-form-control-focus-border-color);
   --govnl-text-input-focus-color: var(--govnl-form-control-focus-color);
   --govnl-text-input-focus-outline-color: var(--govnl-form-control-focus-outline-color);
   --govnl-text-input-error-border-color: var(--govnl-form-control-invalid-border-color);
   --govnl-text-input-error-color: var(--govnl-form-control-invalid-color);
-  --govnl-text-area-focus-background-color: var(--govnl-form-control-focus-background-color);
-  --govnl-text-area-focus-border-color: var(--govnl-form-control-focus-border-color);
-  --govnl-text-area-focus-color: var(--govnl-form-control-focus-color);
-  --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-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);
@@ -1095,11 +1137,14 @@
   --govnl-radio-button-unchecked-focus-border-color: var(--govnl-form-control-focus-border-color);
   --govnl-radio-button-unchecked-focus-outline-color: var(--govnl-form-control-focus-outline-color);
   --govnl-radio-button-checked-hover-background-color: var(--govnl-interaction-hover-color);
+  --govnl-radio-button-checked-hover-border-color: var(--govnl-interaction-hover-color);
   --govnl-radio-button-checked-active-background-color: var(--govnl-interaction-active-color);
+  --govnl-radio-button-checked-active-border-color: var(--govnl-interaction-active-color);
   --govnl-radio-button-checked-focus-background-color: var(--govnl-form-control-focus-background-color);
   --govnl-radio-button-checked-focus-border-color: var(--govnl-form-control-focus-border-color);
   --govnl-radio-button-checked-focus-color: var(--govnl-form-control-focus-color);
   --govnl-radio-button-checked-focus-outline-color: var(--govnl-form-control-focus-outline-color);
+  --govnl-radio-button-checked-focus-dot-color: var(--govnl-form-control-focus-color);
   --govnl-form-field-error-message-icon-color: var(--govnl-form-control-invalid-color);
   --govnl-form-field-error-message-color: var(--govnl-form-control-invalid-color);
   --govnl-form-field-error-border-color: var(--govnl-form-control-invalid-border-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dictu/design-tokens",
-  "version": "2.13.0",
+  "version": "2.15.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

@@ -16,7 +16,7 @@
     "components/form-elements/label.tokens",
     "components/form-elements/radio-button.tokens",
     "components/form-elements/select.tokens",
-    "components/form-elements/text-area.tokens",
+    "components/form-elements/textarea.tokens",
     "components/form-elements/text-input.tokens",
     "components/grid.tokens",
     "components/heading.tokens",
@@ -36,6 +36,8 @@
     "components/skip-link.tokens",
     "components/table.tokens",
     "components/timeline.tokens",
-    "components/video-player.tokens"
+    "components/video-player.tokens",
+    "components/blockqoute.tokens.old",
+    "components/blockquote.tokens"
   ]
 }

package/src/$themes.json

@@ -35,11 +35,11 @@
       "components/form-elements/label.tokens": "enabled",
       "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/searchbar.tokens": "enabled",
       "components/pagination.tokens": "enabled",
-      "components/video-player.tokens": "enabled"
+      "components/video-player.tokens": "enabled",
+      "components/form-elements/textarea.tokens": "enabled"
     },
     "$figmaVariableReferences": {},
     "group": "GovNL"

package/src/components/blockqoute.tokens.old.json

@@ -0,0 +1,26 @@
+{
+  "govnl": {
+    "quote": {
+      "text": {
+        "font-style": {
+          "$type": "text",
+          "$value": "italic"
+        }
+      },
+      "author": {
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.typography.font-weight.regular}"
+        }
+      },
+      "padding-inline-start": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.size.300}"
+      },
+      "border-inline-start": {
+        "$type": "border",
+        "$value": "{govnl.border.border-width.lg} solid {govnl.brand.primary-1.500}"
+      }
+    }
+  }
+}

package/src/components/blockquote.tokens.json

@@ -0,0 +1,158 @@
+{
+  "govnl": {
+    "quote": {
+      "padding": {
+        "block-start": {
+          "$type": "dimension",
+          "$value": "0"
+        },
+        "block-end": {
+          "$type": "dimension",
+          "$value": "0"
+        },
+        "inline-start": {
+          "$type": "dimension",
+          "$value": "{govnl.space.md}"
+        },
+        "inline-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.md}"
+        }
+      },
+      "border": {
+        "block-end": {
+          "style": {
+            "$type": "text",
+            "$value": "solid"
+          },
+          "width": {
+            "$type": "dimension",
+            "$value": "0"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.line.border-color}"
+          }
+        },
+        "inline-start": {
+          "style": {
+            "$type": "text",
+            "$value": "solid"
+          },
+          "width": {
+            "$type": "dimension",
+            "$value": "{govnl.border.border-width.lg}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.feedback.informative.border-color}"
+          }
+        }
+      },
+      "border-top-left-radius": {
+        "$type": "dimension",
+        "$value": "0"
+      },
+      "border-top-right-radius": {
+        "$type": "dimension",
+        "$value": "0"
+      },
+      "border-bottom-right-radius": {
+        "$type": "dimension",
+        "$value": "0"
+      },
+      "border-bottom-left-radius": {
+        "$type": "dimension",
+        "$value": "0"
+      },
+      "row-gap": {
+        "$type": "spacing",
+        "$value": "{govnl.space.sm}"
+      },
+      "work": {
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.feedback.informative.color}"
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.sm}"
+        },
+        "font-style": {
+          "$type": "text",
+          "$value": "normal"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.typography.font-weight.bold}"
+        }
+      },
+      "role": {
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.document.subtle.color}"
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.sm}"
+        },
+        "font-style": {
+          "$type": "text",
+          "$value": "normal"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.typography.font-weight.regular}"
+        }
+      },
+      "author": {
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.brand.primary-1.500}"
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.lg}"
+        },
+        "font-style": {
+          "$type": "text",
+          "$value": "normal"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.typography.font-weight.bold}"
+        }
+      },
+      "caption": {
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.sm}"
+        },
+        "row-gap": {
+          "$type": "spacing",
+          "$value": "{govnl.space.2xs}"
+        }
+      },
+      "blockquote": {
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.document.color}"
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.xl}"
+        },
+        "font-style": {
+          "$type": "text",
+          "$value": "italic"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.typography.font-weight.regular}"
+        }
+      }
+    }
+  }
+}
+
+

package/src/components/form-elements/radio-button.tokens.json

@@ -5,6 +5,10 @@
         "$type": "sizing",
         "$value": "{govnl.dimension.size.300}"
       },
+      "dot-size": {
+        "$type": "sizing",
+        "$value": "{govnl.space.2xs}"
+      },
       "border-radius": {
         "$type": "borderRadius",
         "$value": "{govnl.border.border-radius.round}"
@@ -82,7 +86,11 @@
         },
         "border-color": {
           "$type": "color",
-          "$value": "transparant"
+          "$value": "{govnl.interaction.color}"
+        },
+        "dot-color": {
+          "$type": "color",
+          "$value": "{govnl.document.inverse.color}"
         },
         "color": {
           "$type": "color",
@@ -99,7 +107,7 @@
           },
           "border-color": {
             "$type": "color",
-            "$value": "transparant"
+            "$value": "{govnl.interaction.hover.color}"
           },
           "color": {
             "$type": "color",
@@ -108,6 +116,10 @@
           "border-width": {
             "$type": "borderWidth",
             "$value": "{govnl.border.border-width.md}"
+          },
+          "dot-color": {
+            "$type": "color",
+            "$value": "{govnl.document.inverse.color}"
           }
         },
         "active": {
@@ -117,7 +129,7 @@
           },
           "border-color": {
             "$type": "color",
-            "$value": "transparant"
+            "$value": "{govnl.interaction.active.color}"
           },
           "color": {
             "$type": "color",
@@ -126,6 +138,10 @@
           "border-width": {
             "$type": "borderWidth",
             "$value": "{govnl.border.border-width.md}"
+          },
+          "dot-color": {
+            "$type": "color",
+            "$value": "{govnl.document.inverse.color}"
           }
         },
         "focus": {
@@ -148,6 +164,10 @@
           "border-width": {
             "$type": "borderWidth",
             "$value": "{govnl.border.border-width.sm}"
+          },
+          "dot-color": {
+            "$type": "color",
+            "$value": "{govnl.form-control.focus.color}"
           }
         }
       },

package/src/components/form-elements/{text-area.tokens.json → textarea.tokens.json}

@@ -49,10 +49,20 @@
         "border-width": {
           "$type": "borderWidth",
           "$value": "{govnl.border.border-width.md}"
+        },
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.invalid.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.invalid.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.invalid.color}"
         }
-      }
-    },
-    "text-area": {
+      },
       "background-color": {
         "$type": "color",
         "$value": "{govnl.form-control.background-color}"
@@ -77,12 +87,16 @@
         "color": {
           "$type": "color",
           "$value": "{govnl.form-control.hover.color}"
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{govnl.border.border-width.sm}"
         }
       },
       "focus": {
         "background-color": {
           "$type": "color",
-          "$value": "{govnl.form-control.focus.background-color}"
+          "$value": "{govnl.form-control.background-color}"
         },
         "border-color": {
           "$type": "color",
@@ -97,40 +111,52 @@
           "$value": "{govnl.form-control.focus.outline-color}"
         }
       },
-      "error": {
+      "read-only": {
         "background-color": {
           "$type": "color",
-          "$value": "{govnl.form-control.invalid.background-color}"
+          "$value": "{govnl.form-control.read-only.background-color}"
         },
         "border-color": {
           "$type": "color",
-          "$value": "{govnl.form-control.invalid.border-color}"
+          "$value": "{govnl.form-control.read-only.border-color}"
         },
         "color": {
           "$type": "color",
-          "$value": "{govnl.form-control.invalid.color}"
+          "$value": "{govnl.form-control.read-only.color}"
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{govnl.border.border-width.sm}"
         }
       },
-      "read-only": {
+      "placeholder": {
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.placeholder.color}"
+        }
+      },
+      "active": {
         "background-color": {
           "$type": "color",
-          "$value": "{govnl.form-control.read-only.background-color}"
+          "$value": "{govnl.form-control.background-color}"
         },
         "border-color": {
           "$type": "color",
-          "$value": "{govnl.form-control.read-only.border-color}"
+          "$value": "{govnl.form-control.focus.border-color}"
         },
         "color": {
           "$type": "color",
-          "$value": "{govnl.form-control.read-only.color}"
-        }
-      },
-      "placeholder": {
-        "color": {
+          "$value": "{govnl.form-control.focus.color}"
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{govnl.border.border-width.sm}"
+        },
+        "outline-color": {
           "$type": "color",
-          "$value": "{govnl.form-control.placeholder.color}"
+          "$value": "{govnl.form-control.focus.outline-color}"
         }
       }
     }
   }
-}
+}

package/src/components/link.tokens.json

@@ -91,11 +91,11 @@
         "size": {
           "$type": "sizing",
           "$value": "1em"
-        },
-        "margin-inline-start": {
-          "$type": "dimension",
-          "$value": "0.3em"
         }
+      },
+      "row-gap": {
+        "$type": "dimension",
+        "$value": "0.3em"
       }
     }
   }