From db34838ed891a59d86534f41548c05b4ce1d6641 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Wed, 15 Sep 2021 16:08:16 +0200
Subject: [PATCH] feat: optional design tokens to configure button width or
 height

---
 components/button/bem.scss          |  2 ++
 components/button/block.tokens.json | 12 ++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/components/button/bem.scss b/components/button/bem.scss
index 07ec2391725..e5eddd4f3a8 100644
--- a/components/button/bem.scss
+++ b/components/button/bem.scss
@@ -7,12 +7,14 @@
 
 .utrecht-button {
   background-color: var(--utrecht-button-primary-action-background-color);
+  block-size: var(--utrecht-button-block-size, auto);
   border-radius: var(--utrecht-button-border-radius);
   border-width: var(--utrecht-button-border-width);
   color: var(--utrecht-button-primary-action-color);
   font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
   font-weight: var(--utrecht-button-font-weight);
+  inline-size: var(--utrecht-button-inline-size, auto);
   letter-spacing: var(--utrecht-button-letter-spacing);
   padding-block-end: var(--utrecht-button-padding-block-end);
   padding-block-start: var(--utrecht-button-padding-block-start);
diff --git a/components/button/block.tokens.json b/components/button/block.tokens.json
index 68565b28c38..d15c4927346 100644
--- a/components/button/block.tokens.json
+++ b/components/button/block.tokens.json
@@ -7,6 +7,12 @@
           "inherits": true
         }
       },
+      "block-size": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
       "focus-transform-scale": {
         "css": {
           "syntax": "<number>",
@@ -25,6 +31,12 @@
           "inherits": true
         }
       },
+      "inline-size": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
       "letter-spacing": {
         "css": {
           "syntax": "<length>",