feat: optional design tokens to configure button width or height

nl-design-system · Sep 15, 2021 · db34838 · db34838
1 parent 9b8e950
commit db34838
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git 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
@@ -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>",