feat(GovAlta#2162): replace design tokens for button

vanessatran-ddi · Oct 22, 2024 · 5bb6bfd · 5bb6bfd
1 parent b8d25b8
commit 5bb6bfd
Showing 1 changed file with 7 additions and 13 deletions.
diff --git a/libs/web-components/src/components/button/Button.svelte b/libs/web-components/src/components/button/Button.svelte
@@ -100,28 +100,22 @@
 
 <style>
   :host {
-    --button-height: 2.625rem; /* 42px */
-    --button-height-compact: 2rem; /* 32px */
     --button-height-tall: 3.25rem; /* 52px */
-
     box-sizing: border-box;
-    font-family: var(--goa-font-family-sans);
   }
 
   button {
     display: inline-flex;
     box-sizing: border-box;
-    border-radius: 0.25rem;
+    border-radius: var(--goa-button-border-radius);
     border: 2px solid var(--goa-color-interactive-default);
     box-sizing: border-box;
     cursor: pointer;
-    font-family: var(--goa-font-family-sans);
-    font-size: var(--goa-font-size-5);
-    font-weight: 400;
-    height: var(--button-height);
+    font: var(--goa-button-text);
+    height: var(--goa-button-height);
     letter-spacing: var(--goa-letter-spacing-button);
     line-height: 100%;
-    padding: 0 0.75rem;
+    padding:0 var(--goa-button-padding-lr);
     white-space: nowrap;
 
     /* for leading and trailing icon vertical alignment */
@@ -162,10 +156,10 @@
   }
 
   button.compact {
-    height: var(--button-height-compact);
+    height: var(--goa-button-height-compact);
     font-size: var(--goa-font-size-4);
-    padding-left: var(--goa-space-xs);
-    padding-right: var(--goa-space-xs);
+    padding-left: var(--goa-button-padding-lr-compact);
+    padding-right: var(--goa-button-padding-lr-compact);
   }
 
   button.start {