@uniai-fe/uds-primitives 0.1.13 → 0.2.0

package/src/components/button/styles/button.scss

@@ -1,214 +1,101 @@
 @use "sass:map";
 
-/* 버튼 전용 토큰은 theme root에서 한 번만 정의한다. */
-:root {
-  /* spacing */
-  --theme-button-gap-1: var(--spacing-gap-1);
-  --theme-button-gap-2: var(--spacing-gap-2);
-  --theme-button-gap-3: var(--spacing-gap-3);
-  --theme-button-padding-1: var(--spacing-padding-1);
-  --theme-button-padding-2: var(--spacing-padding-2);
-  --theme-button-padding-3: var(--spacing-padding-3);
-  --theme-button-padding-4: var(--spacing-padding-4);
-  --theme-button-padding-5: var(--spacing-padding-5);
-  --theme-button-padding-6: var(--spacing-padding-6);
-  --theme-button-padding-7: var(--spacing-padding-7);
-  --theme-button-padding-9: var(--spacing-padding-9);
-  --theme-button-min-width: var(--theme-size-small-2);
-  --theme-button-text-padding-block: var(--spacing-padding-4, 8px);
-  --theme-button-text-padding-inline-small: var(--spacing-padding-4, 8px);
-  --theme-button-text-padding-inline-medium: var(--spacing-padding-5, 12px);
-  --theme-button-text-padding-inline-large: var(--spacing-padding-5, 12px);
-  --theme-button-text-min-height-small: var(--theme-size-small-1, 20px);
-  --theme-button-text-min-height-medium: var(--theme-size-small-2, 24px);
-  --theme-button-text-min-height-large: var(--theme-size-small-3, 32px);
-  --theme-button-text-radius: var(--theme-radius-small, 4px);
-  --theme-button-round-padding-inline-small: var(--spacing-padding-5, 12px);
-  --theme-button-round-padding-inline-medium: var(--spacing-padding-6, 16px);
-  --theme-button-round-padding-inline-large: var(--spacing-padding-7, 20px);
-  --theme-button-round-padding-block: var(--spacing-padding-2, 4px);
-  --theme-button-round-min-height-small: var(--theme-size-small-2, 24px);
-  --theme-button-round-min-height-medium: var(--theme-size-small-3, 32px);
-  --theme-button-round-min-height-large: var(--theme-size-medium-1, 40px);
-  --theme-button-round-radius-small: var(--theme-radius-xlarge-2, 16px);
-  --theme-button-round-radius-medium: var(--theme-radius-xlarge-2, 16px);
-  --theme-button-round-radius-large: 30px;
-
-  /* size/radius */
-  --theme-button-size-small-1: var(--theme-size-small-1);
-  --theme-button-size-small-2: var(--theme-size-small-2);
-  --theme-button-size-small-3: var(--theme-size-small-3);
-  --theme-button-size-medium-1: var(--theme-size-medium-1);
-  --theme-button-size-medium-2: var(--theme-size-medium-2);
-  --theme-button-size-medium-3: var(--theme-size-medium-3);
-  --theme-button-radius-medium-1: var(--theme-radius-medium-1);
-  --theme-button-radius-medium-3: var(--theme-radius-medium-3);
-  --theme-button-radius-large-1: var(--theme-radius-large-1);
-  --theme-button-radius-large-2: var(--theme-radius-large-2);
-  --theme-button-radius-small: var(--theme-radius-small);
-  --theme-button-radius-xlarge: var(--theme-radius-xlarge);
-
-  /* typography */
-  --theme-button-font-body-medium-family: var(--font-body-medium-family);
-  --theme-button-font-body-medium-size: var(--font-body-medium-size);
-  --theme-button-font-body-medium-weight: var(--font-body-medium-weight);
-  --theme-button-font-body-medium-line-height: var(
-    --font-body-medium-line-height
-  );
-  --theme-button-font-body-medium-letter-spacing: var(
-    --font-body-medium-letter-spacing
-  );
-  --theme-button-font-label-medium-size: var(--font-label-medium-size);
-  --theme-button-font-label-medium-weight: var(--font-label-medium-weight);
-  --theme-button-font-label-medium-line-height: var(
-    --font-label-medium-line-height
-  );
-  --theme-button-font-label-medium-letter-spacing: var(
-    --font-label-medium-letter-spacing
-  );
-  --theme-button-font-label-large-size: var(--font-label-large-size);
-  --theme-button-font-label-large-weight: var(--font-label-large-weight);
-  --theme-button-font-label-large-line-height: var(
-    --font-label-large-line-height
-  );
-  --theme-button-font-label-large-letter-spacing: var(
-    --font-label-large-letter-spacing
-  );
-  --theme-button-font-body-large-size: var(--font-body-large-size);
-  --theme-button-font-body-large-weight: var(--font-body-large-weight);
-  --theme-button-font-body-large-line-height: var(
-    --font-body-large-line-height
-  );
-  --theme-button-font-body-large-letter-spacing: var(
-    --font-body-large-letter-spacing
-  );
-  --theme-button-font-weight: 400;
-
-  /* colors */
-  --theme-button-color-neutral-base: var(--color-neutral-20);
-  --theme-button-color-common-100: var(--color-common-100);
-  --theme-button-color-primary-default: var(--color-primary-default);
-  --theme-button-color-primary-strong: var(--color-primary-strong);
-  --theme-button-color-primary-heavy: var(--color-primary-heavy);
-  --theme-button-color-secondary-default: var(--color-secondary-default);
-  --theme-button-color-secondary-strong: var(--color-secondary-strong);
-  --theme-button-color-secondary-heavy: var(--color-secondary-heavy);
-  --theme-button-color-tertiary-default: var(--color-tertiary-default);
-  --theme-button-color-tertiary-strong: var(--color-tertiary-strong);
-  --theme-button-color-tertiary-heavy: var(--color-tertiary-heavy);
-  --theme-button-color-blue-90: var(--color-blue-90);
-  --theme-button-color-blue-50: var(--color-blue-50);
-  --theme-button-color-blue-45: var(--color-blue-45);
-  --theme-button-overlay-solid-tertiary-bg: var(--color-surface-strong);
-  /* Confirm dialog cancel 버튼을 위한 solid tertiary 색상 정의 */
-  --theme-button-tertiary-solid-bg: var(--color-surface-neutral);
-  --theme-button-tertiary-solid-hover-bg: var(--color-surface-strong);
-  --theme-button-tertiary-solid-pressed-bg: var(--color-surface-strong);
-  --theme-button-tertiary-solid-foreground: var(--color-label-neutral);
-  --theme-button-secondary-solid-bg: var(--color-blue-95, #e5eeff);
-  --theme-button-secondary-solid-hover-bg: #dbe9ff;
-  --theme-button-secondary-solid-pressed-bg: #ccdeff;
-  --theme-button-color-cool-gray-90: var(--color-cool-gray-90);
-  --theme-button-color-cool-gray-95: var(--color-cool-gray-95);
-  --theme-button-color-cool-gray-10: var(--color-cool-gray-10);
-  --theme-button-color-bg-surface-standard: var(--color-surface-standard);
-  --theme-button-color-bg-alternative-cool-gray: var(
-    --color-bg-alternative-cool-gray
-  );
-  --theme-button-color-bg-surface-strong: var(--color-surface-strong);
-  --theme-button-color-label-disabled: var(--color-label-disabled);
-
-  /* overlays */
-  --theme-button-overlay-solid-secondary-bg: var(--color-blue-90);
-  --theme-button-overlay-outlined-primary-bg: var(--color-blue-90);
-  --theme-button-overlay-outlined-secondary-bg: var(--color-cool-gray-95);
-  --theme-button-overlay-outlined-tertiary-bg: var(--color-cool-gray-95);
-}
+/* 버튼 관련 CSS 변수는 variables.scss에서 주입된다. */
+/* priority 토큰은 --button-default-{priority}-* 컬러 변수와 연결된다. */
 $button-priorities: (
   primary: (
     solid-bg: var(
-        --theme-button-color-primary-default,
+        --button-default-primary-solid-bg,
         var(--color-primary-default)
       ),
-    solid-hover: var(--theme-button-color-blue-50, var(--color-blue-50)),
-    solid-active: var(--theme-button-color-blue-45, var(--color-blue-45)),
+    solid-hover: var(
+        --button-default-primary-solid-hover-bg,
+        var(--color-blue-50)
+      ),
+    solid-active: var(
+        --button-default-primary-solid-active-bg,
+        var(--color-blue-45)
+      ),
     solid-foreground: var(
-        --theme-button-color-common-100,
+        --button-default-primary-solid-foreground,
         var(--color-common-100)
       ),
     outline-border: var(
-        --theme-button-color-primary-default,
+        --button-default-primary-outline-border,
         var(--color-primary-default)
       ),
     outline-foreground: var(
-        --theme-button-color-primary-default,
+        --button-default-primary-outline-foreground,
         var(--color-primary-default)
       ),
     outline-hover-bg: var(
-        --theme-button-color-primary-default,
+        --button-default-primary-outline-hover-bg,
         var(--color-primary-default)
       ),
     outline-hover-foreground: var(
-        --theme-button-color-common-100,
+        --button-default-primary-outline-hover-foreground,
         var(--color-common-100)
       ),
   ),
   secondary: (
     solid-bg: var(
-        --theme-button-secondary-solid-bg,
+        --button-default-secondary-solid-bg,
         var(--color-blue-95, #e5eeff)
       ),
-    solid-hover: var(--theme-button-secondary-solid-hover-bg, #dbe9ff),
-    solid-active: var(--theme-button-secondary-solid-pressed-bg, #ccdeff),
+    solid-hover: var(--button-default-secondary-solid-hover-bg, #dbe9ff),
+    solid-active: var(--button-default-secondary-solid-active-bg, #ccdeff),
     solid-foreground: var(
-        --theme-button-color-primary-default,
+        --button-default-secondary-solid-foreground,
         var(--color-primary-default)
       ),
     outline-border: var(
-        --theme-button-color-cool-gray-90,
+        --button-default-secondary-outline-border,
         var(--color-cool-gray-90)
       ),
     outline-foreground: var(
-        --theme-button-color-primary-default,
+        --button-default-secondary-outline-foreground,
         var(--color-primary-default)
       ),
-    outline-hover-bg: var(--theme-button-color-blue-90, var(--color-blue-90)),
+    outline-hover-bg: var(
+        --button-default-secondary-outline-hover-bg,
+        var(--color-blue-90)
+      ),
     outline-hover-foreground: var(
-        --theme-button-color-primary-heavy,
+        --button-default-secondary-outline-hover-foreground,
         var(--color-primary-heavy)
       ),
   ),
   tertiary: (
     solid-bg: var(
-        --theme-button-tertiary-solid-bg,
+        --button-default-tertiary-solid-bg,
         var(--color-surface-neutral)
       ),
     solid-hover: var(
-        --theme-button-tertiary-solid-hover-bg,
+        --button-default-tertiary-solid-hover-bg,
         var(--color-surface-static-cool-gray)
       ),
     solid-active: var(
-        --theme-button-tertiary-solid-pressed-bg,
+        --button-default-tertiary-solid-active-bg,
         var(--color-surface-strong)
       ),
     solid-foreground: var(
-        --theme-button-tertiary-solid-foreground,
+        --button-default-tertiary-solid-foreground,
         var(--color-label-neutral)
       ),
     outline-border: var(
-        --theme-button-color-cool-gray-90,
+        --button-default-tertiary-outline-border,
         var(--color-cool-gray-90)
       ),
     outline-foreground: var(
-        --theme-button-color-cool-gray-10,
+        --button-default-tertiary-outline-foreground,
         var(--color-cool-gray-10)
       ),
     outline-hover-bg: var(
-        --theme-button-color-cool-gray-95,
+        --button-default-tertiary-outline-hover-bg,
         var(--color-cool-gray-95)
       ),
     outline-hover-foreground: var(
-        --theme-button-color-neutral-base,
+        --button-default-tertiary-outline-hover-foreground,
         var(--color-neutral-20)
       ),
   ),
@@ -262,25 +149,25 @@ $button-priorities: (
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
+  gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
   width: fit-content;
-  min-width: var(--theme-button-min-width, var(--theme-size-small-2, 24px));
+  min-width: var(
+    --button-default-width-min-base,
+    var(--theme-size-small-2, 24px)
+  );
   min-height: var(--button-min-height, auto);
   padding-inline: var(
     --button-padding-inline,
-    var(--theme-button-padding-4, var(--spacing-padding-4, 16px))
-  );
-  padding-block: var(
-    --button-padding-block,
-    var(--theme-button-padding-2, var(--spacing-padding-2, 4px))
+    var(--button-default-padding-inline-base, var(--spacing-padding-4, 16px))
   );
+  padding-block: 0;
   border-radius: var(
     --button-border-radius,
-    var(--theme-button-radius-medium-1, var(--theme-radius-medium-1, 8px))
+    var(--button-default-radius-medium, var(--theme-radius-medium-1, 8px))
   );
   border: 1px solid transparent;
   background-color: transparent;
-  color: var(--theme-button-color-neutral-base, var(--color-neutral-20));
+  color: var(--button-default-neutral-foreground, var(--color-neutral-20));
   box-shadow: none;
   filter: none;
   cursor: pointer;
@@ -289,32 +176,32 @@ $button-priorities: (
     font-family: var(
       --font-caption-medium-family,
       var(
-        --theme-button-font-body-medium-family,
+        --button-default-font-body-medium-family,
         var(--font-body-medium-family, "Pretendard")
       )
     );
     font-size: var(
       --font-caption-medium-size,
       var(
-        --theme-button-font-body-medium-size,
+        --button-default-font-body-medium-size,
         var(--font-body-medium-size, 16px)
       )
     );
     font-weight: var(
       --font-caption-medium-weight,
-      var(--theme-button-font-weight, 400)
+      var(--button-default-font-weight, 400)
     );
     line-height: var(
       --font-caption-medium-line-height,
       var(
-        --theme-button-font-body-medium-line-height,
+        --button-default-font-body-medium-line-height,
         var(--font-body-medium-line-height, 24px)
       )
     );
     letter-spacing: var(
       --font-caption-medium-letter-spacing,
       var(
-        --theme-button-font-body-medium-letter-spacing,
+        --button-default-font-body-medium-letter-spacing,
         var(--font-body-medium-letter-spacing, 0px)
       )
     );
@@ -363,15 +250,15 @@ $button-priorities: (
       &:disabled,
       &[aria-disabled="true"] {
         background-color: var(
-          --theme-button-color-bg-surface-standard,
+          --button-default-neutral-disabled-bg,
           var(--color-surface-standard)
         );
         border-color: var(
-          --theme-button-color-bg-surface-standard,
+          --button-default-neutral-disabled-bg,
           var(--color-surface-standard)
         );
         color: var(
-          --theme-button-color-label-disabled,
+          --button-default-neutral-disabled-foreground,
           var(--color-label-disabled)
         );
       }
@@ -397,15 +284,15 @@ $button-priorities: (
       &:disabled,
       &[aria-disabled="true"] {
         background-color: var(
-          --theme-button-color-bg-surface-standard,
+          --button-default-neutral-disabled-bg,
           var(--color-surface-standard)
         );
         border-color: var(
-          --theme-button-color-bg-surface-standard,
+          --button-default-neutral-disabled-bg,
           var(--color-surface-standard)
         );
         color: var(
-          --theme-button-color-label-disabled,
+          --button-default-neutral-disabled-foreground,
           var(--color-label-disabled)
         );
       }
@@ -427,129 +314,117 @@ $button-priorities: (
   $button-size-map: (
     small: (
       padding-inline: var(
-          --theme-button-padding-6,
+          --button-default-padding-inline-small,
           var(--spacing-padding-6, 24px)
         ),
-      padding-block: var(
-          --theme-button-padding-2,
-          var(--spacing-padding-2, 4px)
-        ),
-      gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px)),
+      padding-block: 0,
+      gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px)),
       text-font-size: var(
-          --theme-button-font-label-medium-size,
+          --button-default-font-label-medium-size,
           var(--font-label-medium-size, 14px)
         ),
-      text-font-weight: var(--theme-button-font-weight, 400),
+      text-font-weight: var(--button-default-font-weight, 400),
       text-line-height: var(
-          --theme-button-font-label-medium-line-height,
+          --button-default-font-label-medium-line-height,
           var(--font-label-medium-line-height, 1.5em)
         ),
       text-letter-spacing: var(
-          --theme-button-font-label-medium-letter-spacing,
+          --button-default-font-label-medium-letter-spacing,
           var(--font-label-medium-letter-spacing, 0px)
         ),
       min-height: var(
-          --theme-button-size-small-3,
+          --button-default-height-small,
           var(--theme-size-small-3, 32px)
         ),
       radius: var(
-          --theme-button-radius-medium-3,
+          --button-default-radius-small,
           var(--theme-radius-medium-3, 8px)
         ),
     ),
     medium: (
       padding-inline: var(
-          --theme-button-padding-7,
+          --button-default-padding-inline-medium,
           var(--spacing-padding-7, 20px)
         ),
-      gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px)),
-      padding-block: var(
-          --theme-button-padding-5,
-          var(--spacing-padding-5, 12px)
-        ),
+      gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px)),
+      padding-block: 0,
       text-font-size: var(
-          --theme-button-font-label-large-size,
+          --button-default-font-label-large-size,
           var(--font-label-large-size, 16px)
         ),
-      text-font-weight: var(--theme-button-font-weight, 400),
+      text-font-weight: var(--button-default-font-weight, 400),
       text-line-height: var(
-          --theme-button-font-label-large-line-height,
+          --button-default-font-label-large-line-height,
           var(--font-label-large-line-height, 1.5em)
         ),
       text-letter-spacing: var(
-          --theme-button-font-label-large-letter-spacing,
+          --button-default-font-label-large-letter-spacing,
           var(--font-label-large-letter-spacing, 0px)
         ),
       min-height: var(
-          --theme-button-size-medium-1,
+          --button-default-height-medium,
           var(--theme-size-medium-1, 40px)
         ),
       radius: var(
-          --theme-button-radius-medium-3,
+          --button-default-radius-small,
           var(--theme-radius-medium-3, 8px)
         ),
     ),
     large: (
       padding-inline: var(
-          --theme-button-padding-9,
+          --button-default-padding-inline-large,
           var(--spacing-padding-9, 28px)
         ),
-      gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px)),
-      padding-block: var(
-          --theme-button-padding-5,
-          var(--spacing-padding-5, 12px)
-        ),
+      gap: var(--button-default-gap-large, var(--spacing-gap-3, 12px)),
+      padding-block: 0,
       text-font-size: var(
-          --theme-button-font-body-medium-size,
+          --button-default-font-body-medium-size,
           var(--font-body-medium-size, 17px)
         ),
-      text-font-weight: var(--theme-button-font-weight, 400),
+      text-font-weight: var(--button-default-font-weight, 400),
       text-line-height: var(
-          --theme-button-font-body-medium-line-height,
+          --button-default-font-body-medium-line-height,
           var(--font-body-medium-line-height, 1.5em)
         ),
       text-letter-spacing: var(
-          --theme-button-font-body-medium-letter-spacing,
+          --button-default-font-body-medium-letter-spacing,
           var(--font-body-medium-letter-spacing, 0px)
         ),
       min-height: var(
-          --theme-button-size-medium-2,
+          --button-default-height-large,
           var(--theme-size-medium-2, 48px)
         ),
       radius: var(
-          --theme-button-radius-large-1,
+          --button-default-radius-large,
           var(--theme-radius-large-1, 12px)
         ),
     ),
     xlarge: (
       padding-inline: var(
-          --theme-button-padding-9,
+          --button-default-padding-inline-large,
           var(--spacing-padding-9, 28px)
         ),
-      gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px)),
-      padding-block: var(
-          --theme-button-padding-5,
-          var(--spacing-padding-5, 12px)
-        ),
+      gap: var(--button-default-gap-large, var(--spacing-gap-3, 12px)),
+      padding-block: 0,
       text-font-size: var(
-          --theme-button-font-body-large-size,
+          --button-default-font-body-large-size,
           var(--font-body-large-size, 19px)
         ),
-      text-font-weight: var(--theme-button-font-weight, 400),
+      text-font-weight: var(--button-default-font-weight, 400),
       text-line-height: var(
-          --theme-button-font-body-large-line-height,
+          --button-default-font-body-large-line-height,
           var(--font-body-large-line-height, 1.5em)
         ),
       text-letter-spacing: var(
-          --theme-button-font-body-large-letter-spacing,
+          --button-default-font-body-large-letter-spacing,
           var(--font-body-large-letter-spacing, 0px)
         ),
       min-height: var(
-          --theme-button-size-medium-3,
+          --button-default-height-xlarge,
           var(--theme-size-medium-3, 56px)
         ),
       radius: var(
-          --theme-button-radius-large-2,
+          --button-default-radius-xlarge,
           var(--theme-radius-large-2, 16px)
         ),
     ),
@@ -579,15 +454,18 @@ $button-priorities: (
   :where(.button-fill-solid.button-priority-secondary) {
     &:hover:not(:disabled):not([aria-disabled="true"]),
     &[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
-      background-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
-      border-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
+      background-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
+      border-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
       box-shadow: none;
     }
 
     &:active:not(:disabled):not([aria-disabled="true"]),
     &[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-      background-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
-      border-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
+      background-color: var(
+        --button-default-secondary-solid-active-bg,
+        #ccdeff
+      );
+      border-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
       box-shadow: none;
     }
   }
@@ -595,7 +473,10 @@ $button-priorities: (
   @include button-overlay-state(
     "solid",
     "tertiary",
-    var(--color-border-strong, var(--color-surface-strong)),
+    var(
+      --button-default-tertiary-overlay-solid-bg,
+      var(--color-surface-strong)
+    ),
     0.68,
     0.48,
     priority-token(tertiary, solid-bg)
@@ -604,7 +485,7 @@ $button-priorities: (
   @include button-overlay-state(
     "outlined",
     "primary",
-    var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90)),
+    var(--button-default-primary-overlay-outlined-bg, var(--color-blue-90)),
     0.68,
     0.28,
     priority-token(primary, outline-border)
@@ -614,7 +495,7 @@ $button-priorities: (
     "outlined",
     "secondary",
     var(
-      --theme-button-overlay-outlined-secondary-bg,
+      --button-default-secondary-overlay-outlined-bg,
       var(--color-cool-gray-95)
     ),
     0.68,
@@ -625,7 +506,10 @@ $button-priorities: (
   @include button-overlay-state(
     "outlined",
     "tertiary",
-    var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95)),
+    var(
+      --button-default-tertiary-overlay-outlined-bg,
+      var(--color-cool-gray-95)
+    ),
     0.68,
     0.28,
     priority-token(tertiary, outline-border)
@@ -634,25 +518,25 @@ $button-priorities: (
   &:where(:disabled),
   &:where([aria-disabled="true"]) {
     background-color: var(
-      --theme-button-color-bg-surface-standard,
+      --button-default-neutral-disabled-bg,
       var(--color-surface-standard)
     );
     border-color: var(
-      --theme-button-color-bg-surface-standard,
+      --button-default-neutral-disabled-bg,
       var(--color-surface-standard)
     );
     color: var(
-      --theme-button-color-label-disabled,
+      --button-default-neutral-disabled-foreground,
       var(--color-label-disabled)
     );
     cursor: not-allowed;
   }
 
   &:where(.button-icon-left) .button-label {
-    margin-left: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
+    margin-left: var(--button-default-gap-small, var(--spacing-gap-1, 4px));
   }
 
   &:where(.button-icon-right) .button-label {
-    margin-right: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
+    margin-right: var(--button-default-gap-small, var(--spacing-gap-1, 4px));
   }
 }