fix: comply with WCAG with 44x44px as minimum button size

Reduce padding-block size, since it no longer functions as a method to increase the button height. The block padding is now mainly necessary for buttons with multiple lines of text.
nl-design-system · May 18, 2022 · 07f8037 · 07f8037
1 parent e7f3dc8
commit 07f8037
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/components/button/css/index.scss b/components/button/css/index.scss
@@ -21,8 +21,8 @@
   inline-size: var(--utrecht-button-inline-size, auto);
   letter-spacing: var(--utrecht-button-letter-spacing);
   line-height: var(--utrecht-button-line-height);
-  min-block-size: var(--utrecht-button-min-block-size, auto);
-  min-inline-size: var(--utrecht-button-min-inline-size, 0);
+  min-block-size: var(--utrecht-button-min-block-size, 44px);
+  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
   padding-block-end: var(--utrecht-button-padding-block-end);
   padding-block-start: var(--utrecht-button-padding-block-start);
   padding-inline-end: var(--utrecht-button-padding-inline-end);

diff --git a/components/link-button/css/index.scss b/components/link-button/css/index.scss
@@ -15,8 +15,8 @@
   font-weight: var(--utrecht-button-font-weight);
   inline-size: var(--utrecht-button-inline-size, auto);
   letter-spacing: var(--utrecht-button-letter-spacing);
-  min-block-size: var(--utrecht-button-min-block-size, auto);
-  min-inline-size: var(--utrecht-button-min-inline-size, 0);
+  min-block-size: var(--utrecht-button-min-block-size, 44px);
+  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
   padding-block-end: var(--utrecht-button-padding-block-end);
   padding-block-start: var(--utrecht-button-padding-block-start);
   padding-inline-end: var(--utrecht-button-padding-inline-end);

diff --git a/proprietary/design-tokens/src/component/utrecht/button.tokens.json b/proprietary/design-tokens/src/component/utrecht/button.tokens.json
@@ -10,8 +10,8 @@
       "font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
       "padding-inline-start": { "value": "{utrecht.space.inline.md}" },
       "padding-inline-end": { "value": "{utrecht.space.inline.md}" },
-      "padding-block-start": { "value": "{utrecht.space.block.sm}" },
-      "padding-block-end": { "value": "{utrecht.space.block.sm}" },
+      "padding-block-start": { "value": "{utrecht.space.block.xs}" },
+      "padding-block-end": { "value": "{utrecht.space.block.xs}" },
       "margin-inline-start": { "value": "0" },
       "margin-inline-end": { "value": "0" },
       "margin-block-start": { "value": "{utrecht.space.row.xs}" },