@dictu/design-tokens 1.6.0 → 2.1.0

package/src/components/form-elements/text-input.tokens.json

@@ -0,0 +1,160 @@
+{
+  "govnl": {
+    "text-input": {
+      "font-family": {
+        "$type": "fontFamilies",
+        "$value": "{govnl.form-control.font-family}"
+      },
+      "font-size": {
+        "$type": "fontSizes",
+        "$value": "{govnl.form-control.font-size}"
+      },
+      "font-weight": {
+        "$type": "fontWeights",
+        "$value": "{govnl.form-control.font-weight}"
+      },
+      "line-height": {
+        "$type": "lineHeights",
+        "$value": "{govnl.form-control.line-height}"
+      },
+      "background-color": {
+        "$type": "color",
+        "$value": "{govnl.form-control.background-color}"
+      },
+      "border-color": {
+        "$type": "color",
+        "$value": "{govnl.form-control.border-color}"
+      },
+      "color": {
+        "$type": "color",
+        "$value": "{govnl.form-control.color}"
+      },
+      "min-block-size": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.pointer-target.min-size}"
+      },
+      "padding-block-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "padding-inline-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "padding-block-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "padding-inline-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.xs}"
+      },
+      "border-radius": {
+        "$type": "borderRadius",
+        "$value": "{govnl.border.border-radius.sm}"
+      },
+      "border-width": {
+        "$type": "borderWidth",
+        "$value": "{govnl.border.border-width.sm}"
+      },
+      "hover": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.hover.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.hover.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.hover.color}"
+        }
+      },
+      "focus": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.color}"
+        },
+        "outline-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.focus.outline-color}"
+        }
+      },
+      "error": {
+        "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}"
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{govnl.border.border-width.md}"
+        }
+      },
+      "read-only": {
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.read-only.background-color}"
+        },
+        "border-color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.read-only.border-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.read-only.color}"
+        }
+      },
+      "placeholder": {
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.form-control.placeholder.color}"
+        }
+      },
+      "small": {
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.sm}"
+        }
+      }
+    },
+    "text-input-small": {
+      "min-block-size": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.size.500}"
+      },
+      "padding-block-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.2xs}"
+      },
+      "padding-inline-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.2xs}"
+      },
+      "padding-block-end": {
+        "$type": "dimension",
+        "$value": "{govnl.space.2xs}"
+      },
+      "padding-inline-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.2xs}"
+      }
+    }
+  }
+}

package/src/components/navigation-bar.tokens.json

@@ -143,18 +143,60 @@
         "font-size": {
           "$type": "fontSizes",
           "$value": "{govnl.document.font-size}"
+        },
+        "active": {
+          "font-weight": {
+            "$type": "fontWeights",
+            "$value": "{govnl.document.strong.font-weight}"
+          }
         }
       },
       "mobile": {
         "max-inline-size": {
           "$type": "sizing",
           "$value": "100%"
+        },
+        "submenu": {
+          "padding-inline-start": {
+            "$type": "spacing",
+            "$value": "{govnl.space.md}"
+          },
+          "padding-inline-end": {
+            "$type": "spacing",
+            "$value": "{govnl.space.md}"
+          }
         }
       },
       "font-size": {
         "$type": "fontSizes",
         "$value": "{govnl.document.font-size}"
+      },
+      "submenu": {
+        "padding-inline-start": {
+          "$type": "spacing",
+          "$value": "{govnl.space.lg}"
+        },
+        "padding-inline-end": {
+          "$type": "spacing",
+          "$value": "{govnl.space.xl}"
+        },
+        "padding-block-start": {
+          "$type": "spacing",
+          "$value": "{govnl.space.lg}"
+        },
+        "padding-block-end": {
+          "$type": "spacing",
+          "$value": "{govnl.space.lg}"
+        },
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.button.subtle.active.background-color}"
+        },
+        "max-inline-size": {
+          "$type": "sizing",
+          "$value": "{govnl.nav-bar.container.inline-size}"
+        }
       }
     }
   }
-}
+}

package/src/components/searchbar.tokens.json

@@ -0,0 +1,28 @@
+{
+  "govnl": {
+    "searchbar": {
+      "gap": {
+        "$type": "dimension",
+        "$value": "{govnl.dimension.size.50}"
+      },
+      "small": {
+        "min-inline-size": {
+          "$type": "dimension",
+          "$value": "240px"
+        },
+        "max-inline-size": {
+          "$type": "dimension",
+          "$value": "480px"
+        }
+      },
+      "min-inline-size": {
+        "$type": "dimension",
+        "$value": "400px"
+      },
+      "max-inline-size": {
+        "$type": "dimension",
+        "$value": "640px"
+      }
+    }
+  }
+}

package/src/components/table.tokens.json

@@ -0,0 +1,190 @@
+{
+  "govnl": {
+    "table": {
+      "margin-block-start": {
+        "$type": "dimension",
+        "$value": "{govnl.space.sm}"
+      },
+      "margin-block-end": {
+        "$type": "dimension",
+        "$value": "0"
+      },
+      "caption": {
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{govnl.typography.font-size.xl}"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.document.font-weight}"
+        },
+        "text-align": {
+          "$type": "other",
+          "$value": "start"
+        },
+        "margin-block-end": {
+          "$type": "dimension",
+          "$value": "{govnl.space.sm}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.document.color}"
+        }
+      },
+      "header": {
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.heading.font-weight}"
+        },
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.document.background-color}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.heading.color}"
+        },
+        "border-block-end-color": {
+          "$type": "color",
+          "$value": "{govnl.line.strong.border-color}"
+        },
+        "border-block-end-width": {
+          "$type": "border",
+          "$value": "{govnl.border.border-width.md}"
+        },
+        "sticky": {
+          "font-weight": {
+            "$type": "fontWeights",
+            "$value": "{govnl.heading.font-weight}"
+          },
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.document.background-color}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.black}"
+          },
+          "border-block-end-color": {
+            "$type": "color",
+            "$value": "{govnl.line.strong.border-color}"
+          },
+          "border-block-end-width": {
+            "$type": "border",
+            "$value": "2px"
+          }
+        },
+        "icon": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.interaction.color}"
+          }
+        }
+      },
+      "footer": {
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{govnl.document.strong.font-weight}"
+        },
+        "background-color": {
+          "$type": "color",
+          "$value": "{govnl.color.white}"
+        },
+        "color": {
+          "$type": "color",
+          "$value": "{govnl.color.black}"
+        },
+        "border-block-start-color": {
+          "$type": "color",
+          "$value": "{govnl.line.strong.border-color}"
+        },
+        "border-block-start-width": {
+          "$type": "border",
+          "$value": "2px"
+        }
+      },
+      "cell": {
+        "padding-block-end": {
+          "$type": "dimension",
+          "$value": "0.5em"
+        },
+        "padding-block-start": {
+          "$type": "dimension",
+          "$value": "0.5em"
+        },
+        "padding-inline-end": {
+          "$type": "dimension",
+          "$value": "0.4em"
+        },
+        "padding-inline-start": {
+          "$type": "dimension",
+          "$value": "0.4em"
+        },
+        "border-inline-end-width": {
+          "$type": "border",
+          "$value": "{govnl.border.border-width.sm}"
+        },
+        "border-inline-end-color": {
+          "$type": "color",
+          "$value": "{govnl.line.subtle.border-color}"
+        },
+        "selected": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.brand.primary-1.50}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.black}"
+          }
+        },
+        "icon": {
+          "size": {
+            "$type": "sizing",
+            "$value": "1em"
+          }
+        },
+        "header": {
+          "border-inline-end-color": {
+            "$type": "color",
+            "$value": "{govnl.line.strong.border-color}"
+          },
+          "border-inline-end-width": {
+            "$type": "border",
+            "$value": "2px"
+          }
+        }
+      },
+      "row": {
+        "border-block-end-width": {
+          "$type": "border",
+          "$value": "{govnl.border.border-width.sm}"
+        },
+        "border-block-end-color": {
+          "$type": "color",
+          "$value": "{govnl.line.subtle.border-color}"
+        },
+        "alternate-odd": {
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.color.white}"
+          },
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.black}"
+          }
+        },
+        "alternate-even": {
+          "color": {
+            "$type": "color",
+            "$value": "{govnl.color.black}"
+          },
+          "background-color": {
+            "$type": "color",
+            "$value": "{govnl.color.grijs.100}"
+          }
+        }
+      }
+    }
+  }
+}

package/style-dictionary-build.mjs

@@ -1,18 +1,15 @@
 import { register } from '@tokens-studio/sd-transforms';
 import { globSync } from 'glob';
-import path from 'path';
 import StyleDictionary from 'style-dictionary';
 
 // will register them on StyleDictionary object
 // that is installed as a dependency of this package.
 register(StyleDictionary);
 
-// Path to base token files.
-const baseTokens = ['./src/**/common.tokens.json', './src/**/core.tokens.json'];
+// Path to token files.
 const tokens = globSync('./src/**/*.tokens.json');
 
-// Unified SD config that handles both base tokens and component tokens in a single build.
-const unified = new StyleDictionary({
+const sd = new StyleDictionary({
   source: tokens,
   preprocessors: ['tokens-studio'],
   platforms: {
@@ -21,34 +18,17 @@ const unified = new StyleDictionary({
       transforms: ['attribute/cti', 'name/kebab', 'color/rgb'],
       buildPath: 'dist/',
       files: [
-        // Base tokens file (core and common tokens)
         {
           destination: 'index.css',
           format: 'css/variables',
-          filter: token =>
-            baseTokens.some(pattern =>
-              token.filePath.match(pattern.replace('./src/**/', '').replace('.tokens.json', ''))
-            ),
           options: {
             selector: '.dictu-theme',
-            outputReferences: false,
+            outputReferences: true,
           },
         },
-        // Component-specific token files
-        ...tokens
-          .filter(file => file.startsWith('src/components/'))
-          .map(file => ({
-            destination: `${path.parse(file).name.toLowerCase().replace('.tokens', '')}.css`,
-            format: 'css/variables',
-            filter: token => token.filePath === file,
-            options: {
-              selector: `.dictu-${path.parse(file).name.toLowerCase().replace('.tokens', '')}`,
-              outputReferences: true,
-            },
-          })),
       ],
     },
   },
 });
 
-await unified.buildAllPlatforms();
+await sd.buildAllPlatforms();

package/dist/accordion.css

@@ -1,45 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-.dictu-accordion {
-  --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;
-  --govnl-accordion-button-hover-border-color: rgba(0, 0, 0, 0);
-  --govnl-accordion-button-focus-border-color: rgba(0, 0, 0, 0);
-  --govnl-accordion-button-active-border-color: rgba(0, 0, 0, 0);
-  --govnl-accordion-button-expanded-border-color: rgba(0, 0, 0, 0);
-  --govnl-accordion-button-section-border-width: 0px;
-  --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-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);
-  --govnl-accordion-body-padding-block-end: var(--govnl-space-md);
-  --govnl-accordion-body-padding-block-start: var(--govnl-space-sm);
-  --govnl-accordion-body-padding-inline-end: var(--govnl-space-sm);
-  --govnl-accordion-body-padding-inline-start: var(--govnl-space-sm);
-  --govnl-accordion-button-background-color: var(--govnl-document-background-color);
-  --govnl-accordion-button-color: var(--govnl-interaction-color);
-  --govnl-accordion-button-font-family: var(--govnl-document-font-family);
-  --govnl-accordion-button-font-size: var(--govnl-document-font-size);
-  --govnl-accordion-button-font-weight: var(--govnl-document-strong-font-weight);
-  --govnl-accordion-button-line-height: var(--govnl-document-line-height);
-  --govnl-accordion-button-gap: var(--govnl-gap-content-min) / 2;
-  --govnl-accordion-button-icon-margin-inline: var(--govnl-space-xs);
-  --govnl-accordion-button-icon-color: var(--govnl-interaction-color);
-  --govnl-accordion-button-padding-block-end: var(--govnl-space-xs);
-  --govnl-accordion-button-padding-block-start: var(--govnl-space-xs);
-  --govnl-accordion-button-padding-inline-end: var(--govnl-space-sm);
-  --govnl-accordion-button-padding-inline-start: var(--govnl-space-sm);
-  --govnl-accordion-button-focus-background-color: var(--govnl-focus-background-color);
-  --govnl-accordion-button-focus-color: var(--govnl-focus-color);
-  --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-accordion-button-hover-color: var(--govnl-interaction-hover-color);
-  --govnl-accordion-button-active-color: var(--govnl-interaction-active-color);
-}

package/dist/breadcrumb.css

@@ -1,34 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-.dictu-breadcrumb {
-  --govnl-breadcrumb-nav-link-active-text-decoration: underline;
-  --govnl-breadcrumb-nav-link-focus-visible-text-decoration: underline;
-  --govnl-breadcrumb-nav-link-hover-text-decoration: underline;
-  --govnl-breadcrumb-nav-link-text-decoration: underline;
-  --govnl-breadcrumb-nav-current-text-decoration: none;
-  --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);
-  --govnl-breadcrumb-nav-separator-size: var(--govnl-dimension-size-300);
-  --govnl-breadcrumb-nav-font-family: var(--govnl-document-font-family);
-  --govnl-breadcrumb-nav-font-size: var(--govnl-document-font-size);
-  --govnl-breadcrumb-nav-font-weight: var(--govnl-document-font-weight);
-  --govnl-breadcrumb-nav-line-height: var(--govnl-document-line-height);
-  --govnl-breadcrumb-nav-link-padding-block-end: var(--govnl-space-xs);
-  --govnl-breadcrumb-nav-link-padding-block-start: var(--govnl-space-xs);
-  --govnl-breadcrumb-nav-link-padding-inline-end: var(--govnl-space-xs);
-  --govnl-breadcrumb-nav-link-padding-inline-start: var(--govnl-space-xs);
-  --govnl-breadcrumb-nav-link-color: var(--govnl-interaction-color);
-  --govnl-breadcrumb-nav-link-focus-visible-background-color: var(--govnl-focus-background-color);
-  --govnl-breadcrumb-nav-link-focus-visible-color: var(--govnl-focus-color);
-  --govnl-breadcrumb-nav-link-current-color: var(--govnl-document-subtle-color);
-  --govnl-breadcrumb-nav-current-padding-block-end: var(--govnl-space-xs);
-  --govnl-breadcrumb-nav-current-padding-block-start: var(--govnl-space-xs);
-  --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-breadcrumb-nav-link-active-color: var(--govnl-interaction-active-color);
-  --govnl-breadcrumb-nav-link-hover-color: var(--govnl-interaction-hover-color);
-}

package/dist/button.css

@@ -1,84 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-.dictu-button {
-  --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);
-  --govnl-button-primary-action-disabled-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-primary-action-focus-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-secondary-action-disabled-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-secondary-action-focus-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-subtle-hover-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-subtle-background-color: rgba(0, 0, 0, 0);
-  --govnl-button-subtle-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-subtle-disabled-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-subtle-focus-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-subtle-active-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-icon-only-background-color: rgba(0, 0, 0, 0);
-  --govnl-button-icon-only-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-icon-only-hover-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-icon-only-active-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-icon-only-disabled-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-icon-only-focus-border-color: rgba(0, 0, 0, 0);
-  --govnl-button-icon-size: 1.125em;
-  --govnl-button-primary-action-color: var(--govnl-color-white);
-  --govnl-button-primary-action-hover-color: var(--govnl-color-white);
-  --govnl-button-primary-action-active-color: var(--govnl-color-white);
-  --govnl-button-primary-action-disabled-background-color: var(--govnl-color-grijs-50);
-  --govnl-button-primary-action-disabled-color: var(--govnl-color-grijs-500);
-  --govnl-button-secondary-action-hover-background-color: var(--govnl-color-grijs-50);
-  --govnl-button-secondary-action-background-color: var(--govnl-color-white);
-  --govnl-button-secondary-action-disabled-background-color: var(--govnl-color-grijs-50);
-  --govnl-button-secondary-action-disabled-color: var(--govnl-color-grijs-500);
-  --govnl-button-secondary-action-active-background-color: var(--govnl-color-grijs-100);
-  --govnl-button-subtle-hover-background-color: var(--govnl-color-grijs-50);
-  --govnl-button-subtle-disabled-background-color: var(--govnl-color-grijs-50);
-  --govnl-button-subtle-disabled-color: var(--govnl-color-grijs-500);
-  --govnl-button-subtle-active-background-color: var(--govnl-color-grijs-50);
-  --govnl-button-icon-only-hover-background-color: var(--govnl-color-grijs-50);
-  --govnl-button-icon-only-active-background-color: var(--govnl-color-grijs-50);
-  --govnl-button-icon-only-disabled-background-color: var(--govnl-color-grijs-50);
-  --govnl-button-icon-only-disabled-color: var(--govnl-color-grijs-500);
-  --govnl-button-border-radius: var(--govnl-border-border-radius-sm);
-  --govnl-button-border-width: var(--govnl-border-border-width-sm);
-  --govnl-button-min-block-size: var(--govnl-dimension-pointer-target-min-size);
-  --govnl-button-min-inline-size: var(--govnl-dimension-pointer-target-min-size);
-  --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);
-  --govnl-button-secondary-action-border-color: var(--govnl-interaction-color);
-  --govnl-button-secondary-action-color: var(--govnl-interaction-color);
-  --govnl-button-secondary-action-focus-background-color: var(--govnl-focus-background-color);
-  --govnl-button-secondary-action-focus-color: var(--govnl-focus-color);
-  --govnl-button-subtle-color: var(--govnl-interaction-color);
-  --govnl-button-subtle-focus-background-color: var(--govnl-focus-background-color);
-  --govnl-button-subtle-focus-color: var(--govnl-focus-color);
-  --govnl-button-icon-only-color: var(--govnl-interaction-color);
-  --govnl-button-icon-only-focus-background-color: var(--govnl-focus-background-color);
-  --govnl-button-icon-only-focus-color: var(--govnl-focus-color);
-  --govnl-button-icon-only-padding-block-end: var(--govnl-space-xs);
-  --govnl-button-icon-only-padding-block-start: var(--govnl-space-xs);
-  --govnl-button-icon-only-padding-inline-start: var(--govnl-space-xs);
-  --govnl-button-icon-only-padding-inline-end: var(--govnl-space-xs);
-  --govnl-button-font-family: var(--govnl-document-font-family);
-  --govnl-button-font-size: var(--govnl-document-font-size);
-  --govnl-button-font-weight: var(--govnl-document-font-weight);
-  --govnl-button-line-height: var(--govnl-document-line-height);
-  --govnl-button-padding-block-end: var(--govnl-space-xs);
-  --govnl-button-padding-block-start: var(--govnl-space-xs);
-  --govnl-button-padding-inline-end: var(--govnl-space-sm);
-  --govnl-button-padding-inline-start: var(--govnl-space-sm);
-  --govnl-button-column-gap: var(--govnl-gap-content-min) / 2;
-  --govnl-button-primary-action-hover-background-color: var(--govnl-interaction-hover-color);
-  --govnl-button-primary-action-active-background-color: var(--govnl-interaction-active-color);
-  --govnl-button-secondary-action-hover-border-color: var(--govnl-interaction-hover-color);
-  --govnl-button-secondary-action-hover-color: var(--govnl-interaction-hover-color);
-  --govnl-button-secondary-action-active-border-color: var(--govnl-interaction-active-color);
-  --govnl-button-secondary-action-active-color: var(--govnl-interaction-active-color);
-  --govnl-button-subtle-hover-color: var(--govnl-interaction-hover-color);
-  --govnl-button-subtle-active-color: var(--govnl-interaction-active-color);
-  --govnl-button-icon-only-hover-color: var(--govnl-interaction-hover-color);
-  --govnl-button-icon-only-active-color: var(--govnl-interaction-active-color);
-}