@uniai-fe/uds-primitives 0.0.7 → 0.0.9

package/src/components/button/styles/{index.scss → button.scss}

@@ -1,7 +1,7 @@
 @use "@uniai-fe/uds-foundation/css";
 @use "sass:map";
 
-:where(.radix-themes, .theme-root, :root) {
+:root {
   /* spacing */
   --theme-button-gap-1: var(--spacing-gap-1);
   --theme-button-gap-2: var(--spacing-gap-2);
@@ -15,6 +15,24 @@
   --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);
@@ -105,16 +123,8 @@
   --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);
-
-  /* text-button backgrounds */
-  --theme-button-text-default-hover-bg: var(--color-tertiary-default);
-  --theme-button-text-default-pressed-bg: var(--color-tertiary-strong);
-  --theme-button-text-secondary-hover-bg: var(--color-bg-alternative-cool-gray);
-  --theme-button-text-secondary-pressed-bg: var(--color-secondary-strong);
-  --theme-button-text-tertiary-hover-bg: var(--color-bg-alternative-cool-gray);
-  --theme-button-text-tertiary-pressed-bg: var(--color-bg-surface-strong);
 }
-$button-intents: (
+$button-priorities: (
   primary: (
     solid-bg: var(
         --theme-button-color-primary-default,
@@ -130,6 +140,10 @@ $button-intents: (
         --theme-button-color-primary-default,
         var(--color-primary-default)
       ),
+    outline-foreground: var(
+        --theme-button-color-primary-default,
+        var(--color-primary-default)
+      ),
     outline-hover-bg: var(
         --theme-button-color-primary-default,
         var(--color-primary-default)
@@ -138,14 +152,6 @@ $button-intents: (
         --theme-button-color-common-100,
         var(--color-common-100)
       ),
-    text-color: var(
-        --theme-button-color-primary-default,
-        var(--color-primary-default)
-      ),
-    text-hover-color: var(
-        --theme-button-color-primary-heavy,
-        var(--color-primary-heavy)
-      ),
   ),
   secondary: (
     solid-bg: var(
@@ -162,21 +168,17 @@ $button-intents: (
         --theme-button-color-cool-gray-90,
         var(--color-cool-gray-90)
       ),
+    outline-foreground: var(
+        --theme-button-color-primary-default,
+        var(--color-primary-default)
+      ),
     outline-hover-bg: var(--theme-button-color-blue-90, var(--color-blue-90)),
     outline-hover-foreground: var(
         --theme-button-color-primary-heavy,
         var(--color-primary-heavy)
       ),
-    text-color: var(
-        --theme-button-color-primary-default,
-        var(--color-primary-default)
-      ),
-    text-hover-color: var(
-        --theme-button-color-primary-strong,
-        var(--color-primary-strong)
-      ),
   ),
-  teritary: (
+  tertiary: (
     solid-bg: var(
         --theme-button-tertiary-solid-bg,
         var(--color-bg-surface-neutral)
@@ -197,6 +199,10 @@ $button-intents: (
         --theme-button-color-cool-gray-90,
         var(--color-cool-gray-90)
       ),
+    outline-foreground: var(
+        --theme-button-color-cool-gray-10,
+        var(--color-cool-gray-10)
+      ),
     outline-hover-bg: var(
         --theme-button-color-cool-gray-95,
         var(--color-cool-gray-95)
@@ -205,38 +211,30 @@ $button-intents: (
         --theme-button-color-neutral-base,
         var(--color-neutral-20)
       ),
-    text-color: var(
-        --theme-button-color-cool-gray-10,
-        var(--color-cool-gray-10)
-      ),
-    text-hover-color: var(
-        --theme-button-color-neutral-base,
-        var(--color-neutral-20)
-      ),
   ),
 );
 
-@function intent-token($intent, $key) {
-  @return map.get(map.get($button-intents, $intent), $key);
+@function priority-token($priority, $key) {
+  @return map.get(map.get($button-priorities, $priority), $key);
 }
 
-@mixin button-state-selector($variant, $intent) {
-  .button:where([data-variant="#{$variant}"][data-intent="#{$intent}"]) {
+@mixin button-state-selector($fill, $priority) {
+  .button.button-fill-#{$fill}.button-priority-#{$priority} {
     @content;
   }
 }
 
 @mixin button-overlay-state(
-  $variant,
-  $intent,
+  $fill,
+  $priority,
   $bg,
   $hover-opacity,
   $pressed-opacity,
   $border-color: null
 ) {
-  .button:where([data-variant="#{$variant}"][data-intent="#{$intent}"]) {
-    &:hover:not(:disabled),
-    &[data-simulated-state="hover"]:not(:disabled) {
+  .button.button-fill-#{$fill}.button-priority-#{$priority} {
+    &:hover:not(:disabled):not([aria-disabled="true"]),
+    &[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
       background-color: $bg;
       @if $border-color == null {
         border-color: $bg;
@@ -246,8 +244,8 @@ $button-intents: (
       box-shadow: inset 0 0 0 999px rgba(255, 255, 255, $hover-opacity);
     }
 
-    &:active:not(:disabled),
-    &[data-simulated-state="pressed"]:not(:disabled) {
+    &:active:not(:disabled):not([aria-disabled="true"]),
+    &[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
       background-color: $bg;
       @if $border-color == null {
         border-color: $bg;
@@ -259,7 +257,7 @@ $button-intents: (
   }
 }
 
-/* Radix reset 이후에도 primitives 스타일이 유지되도록 공통 클래스에 스타일 부여 */
+/* Primitives 버튼 공통 스타일 */
 .button {
   display: flex;
   align-items: center;
@@ -284,62 +282,70 @@ $button-intents: (
   background-color: transparent;
   color: var(--theme-button-color-neutral-base, var(--color-neutral-20));
   box-shadow: none;
-  font-family: var(
-    --theme-button-font-body-medium-family,
-    var(--font-body-medium-family, "Pretendard")
-  );
-  font-size: var(
-    --theme-button-font-body-medium-size,
-    var(--font-body-medium-size, 16px)
-  );
-  font-weight: var(
-    --theme-button-font-weight,
-    400
-  ); /* 버튼 텍스트는 스케일과 무관하게 weight 400 유지 */
-  line-height: var(
-    --theme-button-font-body-medium-line-height,
-    var(--font-body-medium-line-height, 24px)
-  );
-  letter-spacing: var(
-    --theme-button-font-body-medium-letter-spacing,
-    var(--font-body-medium-letter-spacing, 0px)
-  );
-  /* Radix Theme pressed filter를 비활성화해 상태 색상이 그대로 노출되도록 한다. */
-  --base-button-solid-active-filter: none;
-  --base-button-solid-high-contrast-hover-filter: none;
-  --base-button-solid-high-contrast-active-filter: none;
-  --base-button-classic-active-filter: none;
-  --base-button-classic-high-contrast-hover-filter: none;
-  --base-button-classic-high-contrast-active-filter: none;
   filter: none;
   cursor: pointer;
-}
 
-.button:where([data-block="true"]) {
-  width: 100%;
+  span {
+    font-family: var(
+      --font-caption-medium-family,
+      var(
+        --theme-button-font-body-medium-family,
+        var(--font-body-medium-family, "Pretendard")
+      )
+    );
+    font-size: var(
+      --font-caption-medium-size,
+      var(
+        --theme-button-font-body-medium-size,
+        var(--font-body-medium-size, 16px)
+      )
+    );
+    font-weight: var(
+      --font-caption-medium-weight,
+      var(--theme-button-font-weight, 400)
+    );
+    line-height: var(
+      --font-caption-medium-line-height,
+      var(
+        --theme-button-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,
+        var(--font-body-medium-letter-spacing, 0px)
+      )
+    );
+  }
+
+  .button-icon,
+  .button-label,
+  .button-left,
+  .button-right {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.button-block {
+    width: 100%;
+  }
 }
 
-.button:where([data-loading="true"]) {
+.button[aria-busy="true"] {
   pointer-events: none;
   cursor: progress;
 }
 
-.button-icon,
-.button-label,
-.button-prefix,
-.button-suffix {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@each $intent, $tokens in $button-intents {
-  @include button-state-selector("solid", $intent) {
-    background-color: intent-token($intent, solid-bg);
-    border-color: intent-token($intent, solid-bg);
-    color: intent-token($intent, solid-foreground);
+@each $priority, $tokens in $button-priorities {
+  @include button-state-selector("solid", $priority) {
+    background-color: priority-token($priority, solid-bg);
+    border-color: priority-token($priority, solid-bg);
+    color: priority-token($priority, solid-foreground);
     &:disabled,
-    &[data-disabled="true"] {
+    &[aria-disabled="true"] {
       background-color: var(
         --theme-button-color-bg-surface-standard,
         var(--color-bg-surface-standard)
@@ -354,26 +360,26 @@ $button-intents: (
       );
     }
 
-    &:hover:not(:disabled),
-    &[data-simulated-state="hover"]:not(:disabled) {
-      background-color: intent-token($intent, solid-hover);
-      border-color: intent-token($intent, solid-hover);
+    &:hover:not(:disabled):not([aria-disabled="true"]),
+    &[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+      background-color: priority-token($priority, solid-hover);
+      border-color: priority-token($priority, solid-hover);
     }
 
-    &:active:not(:disabled),
-    &[data-simulated-state="pressed"]:not(:disabled) {
-      background-color: intent-token($intent, solid-active);
-      border-color: intent-token($intent, solid-active);
+    &:active:not(:disabled):not([aria-disabled="true"]),
+    &[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+      background-color: priority-token($priority, solid-active);
+      border-color: priority-token($priority, solid-active);
     }
   }
 
-  @include button-state-selector("outlined", $intent) {
+  @include button-state-selector("outlined", $priority) {
     background-color: transparent;
-    color: intent-token($intent, text-color);
-    border-color: intent-token($intent, outline-border);
+    color: priority-token($priority, outline-foreground);
+    border-color: priority-token($priority, outline-border);
 
     &:disabled,
-    &[data-disabled="true"] {
+    &[aria-disabled="true"] {
       background-color: var(
         --theme-button-color-bg-surface-standard,
         var(--color-bg-surface-standard)
@@ -388,71 +394,16 @@ $button-intents: (
       );
     }
 
-    &:hover:not(:disabled),
-    &[data-simulated-state="hover"]:not(:disabled) {
-      background-color: intent-token($intent, outline-hover-bg);
-      border-color: intent-token($intent, outline-border);
+    &:hover:not(:disabled):not([aria-disabled="true"]),
+    &[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+      background-color: priority-token($priority, outline-hover-bg);
+      border-color: priority-token($priority, outline-border);
     }
 
-    &:active:not(:disabled),
-    &[data-simulated-state="pressed"]:not(:disabled) {
-      background-color: intent-token($intent, solid-bg);
-      border-color: intent-token($intent, outline-border);
-    }
-  }
-
-  @include button-state-selector("text-button", $intent) {
-    border-color: transparent;
-    background-color: transparent;
-    color: intent-token($intent, text-color);
-
-    $hover-bg: var(
-      --theme-button-text-default-hover-bg,
-      var(--color-tertiary-default)
-    );
-    $pressed-bg: var(
-      --theme-button-text-default-pressed-bg,
-      var(--color-tertiary-strong)
-    );
-
-    @if $intent == secondary {
-      $hover-bg: var(
-        --theme-button-text-secondary-hover-bg,
-        var(--color-bg-alternative-cool-gray)
-      );
-      $pressed-bg: var(
-        --theme-button-text-secondary-pressed-bg,
-        var(--color-secondary-strong)
-      );
-    } @else if $intent == teritary {
-      $hover-bg: var(
-        --theme-button-text-tertiary-hover-bg,
-        var(--color-bg-alternative-cool-gray)
-      );
-      $pressed-bg: var(
-        --theme-button-text-tertiary-pressed-bg,
-        var(--color-bg-surface-strong)
-      );
-    }
-
-    &:hover:not(:disabled),
-    &[data-simulated-state="hover"]:not(:disabled) {
-      background-color: $hover-bg;
-    }
-
-    &:active:not(:disabled),
-    &[data-simulated-state="pressed"]:not(:disabled) {
-      background-color: $pressed-bg;
-    }
-
-    &:disabled,
-    &[data-disabled="true"] {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(
-        --theme-button-color-label-disabled,
-        var(--color-label-disabled)
-      );
+    &:active:not(:disabled):not([aria-disabled="true"]),
+    &[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+      background-color: priority-token($priority, solid-bg);
+      border-color: priority-token($priority, outline-border);
     }
   }
 }
@@ -460,324 +411,155 @@ $button-intents: (
 $button-size-map: (
   small: (
     padding-inline: var(
-        --theme-button-padding-3,
-        var(--spacing-padding-3, 12px)
+        --theme-button-padding-6,
+        var(--spacing-padding-6, 24px)
       ),
-    padding-block: var(--theme-button-padding-1, var(--spacing-padding-1, 2px)),
-    gap: var(--theme-button-gap-1, var(--spacing-gap-1, 4px)),
-    font-size: var(
+    padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px)),
+    gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px)),
+    text-font-size: var(
         --theme-button-font-label-medium-size,
         var(--font-label-medium-size, 14px)
       ),
-    font-weight: var(
-        --theme-button-font-label-medium-weight,
-        var(--font-label-medium-weight, 400)
-      ),
-    line-height: var(
+    text-font-weight: var(--theme-button-font-weight, 400),
+    text-line-height: var(
         --theme-button-font-label-medium-line-height,
         var(--font-label-medium-line-height, 1.5em)
       ),
-    letter-spacing: var(
+    text-letter-spacing: var(
         --theme-button-font-label-medium-letter-spacing,
         var(--font-label-medium-letter-spacing, 0px)
       ),
+    min-height: var(
+        --theme-button-size-small-3,
+        var(--theme-size-small-3, 32px)
+      ),
+    radius: var(
+        --theme-button-radius-medium-3,
+        var(--theme-radius-medium-3, 8px)
+      ),
   ),
   medium: (
     padding-inline: var(
-        --theme-button-padding-4,
-        var(--spacing-padding-4, 16px)
+        --theme-button-padding-7,
+        var(--spacing-padding-7, 20px)
       ),
     gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px)),
-    padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px)),
-    font-size: var(
+    padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px)),
+    text-font-size: var(
         --theme-button-font-label-large-size,
         var(--font-label-large-size, 16px)
       ),
-    font-weight: var(
-        --theme-button-font-label-large-weight,
-        var(--font-label-large-weight, 400)
-      ),
-    line-height: var(
+    text-font-weight: var(--theme-button-font-weight, 400),
+    text-line-height: var(
         --theme-button-font-label-large-line-height,
         var(--font-label-large-line-height, 1.5em)
       ),
-    letter-spacing: var(
+    text-letter-spacing: var(
         --theme-button-font-label-large-letter-spacing,
         var(--font-label-large-letter-spacing, 0px)
       ),
+    min-height: var(
+        --theme-button-size-medium-1,
+        var(--theme-size-medium-1, 40px)
+      ),
+    radius: var(
+        --theme-button-radius-medium-3,
+        var(--theme-radius-medium-3, 8px)
+      ),
   ),
   large: (
     padding-inline: var(
-        --theme-button-padding-5,
-        var(--spacing-padding-5, 20px)
+        --theme-button-padding-9,
+        var(--spacing-padding-9, 28px)
       ),
     gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px)),
-    padding-block: var(--theme-button-padding-3, var(--spacing-padding-3, 6px)),
-    font-size: var(
+    padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px)),
+    text-font-size: var(
         --theme-button-font-body-medium-size,
         var(--font-body-medium-size, 17px)
       ),
-    font-weight: var(
-        --theme-button-font-body-medium-weight,
-        var(--font-body-medium-weight, 500)
-      ),
-    line-height: var(
+    text-font-weight: var(--theme-button-font-weight, 400),
+    text-line-height: var(
         --theme-button-font-body-medium-line-height,
         var(--font-body-medium-line-height, 1.5em)
       ),
-    letter-spacing: var(
+    text-letter-spacing: var(
         --theme-button-font-body-medium-letter-spacing,
         var(--font-body-medium-letter-spacing, 0px)
       ),
+    min-height: var(
+        --theme-button-size-medium-2,
+        var(--theme-size-medium-2, 48px)
+      ),
+    radius: var(
+        --theme-button-radius-large-1,
+        var(--theme-radius-large-1, 12px)
+      ),
   ),
   xlarge: (
     padding-inline: var(
-        --theme-button-padding-6,
-        var(--spacing-padding-6, 24px)
+        --theme-button-padding-9,
+        var(--spacing-padding-9, 28px)
       ),
     gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px)),
-    padding-block: var(--theme-button-padding-4, var(--spacing-padding-4, 8px)),
-    font-size: var(
+    padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px)),
+    text-font-size: var(
         --theme-button-font-body-large-size,
         var(--font-body-large-size, 19px)
       ),
-    font-weight: var(
-        --theme-button-font-body-large-weight,
-        var(--font-body-large-weight, 600)
-      ),
-    line-height: var(
+    text-font-weight: var(--theme-button-font-weight, 400),
+    text-line-height: var(
         --theme-button-font-body-large-line-height,
         var(--font-body-large-line-height, 1.5em)
       ),
-    letter-spacing: var(
+    text-letter-spacing: var(
         --theme-button-font-body-large-letter-spacing,
         var(--font-body-large-letter-spacing, 0px)
       ),
-  ),
-);
-
-$button-padding-default: (
-  small: (
-    padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px)),
-    padding-inline: var(
-        --theme-button-padding-6,
-        var(--spacing-padding-6, 24px)
-      ),
-  ),
-  medium: (
-    padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px)),
-    padding-inline: var(
-        --theme-button-padding-7,
-        var(--spacing-padding-7, 20px)
-      ),
-  ),
-  large: (
-    padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px)),
-    padding-inline: var(
-        --theme-button-padding-9,
-        var(--spacing-padding-9, 28px)
-      ),
-  ),
-  xlarge: (
-    padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px)),
-    padding-inline: var(
-        --theme-button-padding-9,
-        var(--spacing-padding-9, 28px)
-      ),
-  ),
-);
-
-$button-padding-round: (
-  small: (
-    padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px)),
-    padding-inline: var(
-        --theme-button-padding-5,
-        var(--spacing-padding-5, 20px)
-      ),
-  ),
-  medium: (
-    padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px)),
-    padding-inline: var(
-        --theme-button-padding-6,
-        var(--spacing-padding-6, 24px)
+    min-height: var(
+        --theme-button-size-medium-3,
+        var(--theme-size-medium-3, 56px)
       ),
-  ),
-  large: (
-    padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px)),
-    padding-inline: var(
-        --theme-button-padding-7,
-        var(--spacing-padding-7, 20px)
-      ),
-  ),
-);
-
-$button-padding-text: (
-  small: (
-    padding-block: var(--theme-button-padding-4, var(--spacing-padding-4, 8px)),
-    padding-inline: var(--theme-button-padding-4, var(--spacing-padding-4, 8px)),
-  ),
-  medium: (
-    padding-block: var(--theme-button-padding-4, var(--spacing-padding-4, 8px)),
-    padding-inline: var(
-        --theme-button-padding-5,
-        var(--spacing-padding-5, 12px)
-      ),
-  ),
-  large: (
-    padding-block: var(--theme-button-padding-4, var(--spacing-padding-4, 8px)),
-    padding-inline: var(
-        --theme-button-padding-5,
-        var(--spacing-padding-5, 12px)
+    radius: var(
+        --theme-button-radius-large-2,
+        var(--theme-radius-large-2, 16px)
       ),
   ),
 );
 
 @each $size, $tokens in $button-size-map {
-  .button:where([data-size="#{$size}"]) {
+  .button.button-size-#{$size} {
     padding-inline: map.get($tokens, padding-inline);
     gap: map.get($tokens, gap);
     padding-block: map.get($tokens, padding-block);
-    font-size: map.get($tokens, font-size);
-    font-weight: var(--theme-button-font-weight, 400);
-    line-height: map.get($tokens, line-height);
-    letter-spacing: map.get($tokens, letter-spacing);
-  }
-}
-
-@mixin button-padding-variant($variant, $map) {
-  @each $size, $tokens in $map {
-    .button:where([data-variant="#{$variant}"][data-size="#{$size}"]) {
-      padding-block: map.get($tokens, padding-block);
-      padding-inline: map.get($tokens, padding-inline);
-    }
-  }
-}
-
-@mixin button-padding-shape($shape, $map) {
-  @each $size, $tokens in $map {
-    .button:where([data-shape="#{$shape}"][data-size="#{$size}"]) {
-      padding-block: map.get($tokens, padding-block);
-      padding-inline: map.get($tokens, padding-inline);
+    min-height: map.get($tokens, min-height);
+    border-radius: map.get($tokens, radius);
+
+    span {
+      font-size: map.get($tokens, text-font-size);
+      font-weight: map.get($tokens, text-font-weight);
+      line-height: map.get($tokens, text-line-height);
+      letter-spacing: map.get($tokens, text-letter-spacing);
     }
   }
 }
 
-@include button-padding-variant("solid", $button-padding-default);
-@include button-padding-variant("outlined", $button-padding-default);
-@include button-padding-variant("text-button", $button-padding-text);
-@include button-padding-shape("round", $button-padding-round);
-
-$button-dimension-default: (
-  small: (
-    height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px)),
-    radius: var(
-        --theme-button-radius-medium-3,
-        var(--theme-radius-medium-3, 8px)
-      ),
-  ),
-  medium: (
-    height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px)),
-    radius: var(
-        --theme-button-radius-medium-3,
-        var(--theme-radius-medium-3, 8px)
-      ),
-  ),
-  large: (
-    height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px)),
-    radius: var(
-        --theme-button-radius-large-1,
-        var(--theme-radius-large-1, 12px)
-      ),
-  ),
-  xlarge: (
-    height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px)),
-    radius: var(
-        --theme-button-radius-large-2,
-        var(--theme-radius-large-2, 16px)
-      ),
-  ),
-);
-
-$button-dimension-round: (
-  small: (
-    height: var(--theme-button-size-small-2, var(--theme-size-small-2, 24px)),
-    radius: var(--theme-button-size-small-2, var(--theme-size-small-2, 24px)),
-  ),
-  medium: (
-    height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px)),
-    radius: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px)),
-  ),
-  large: (
-    height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px)),
-    radius: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px)),
-  ),
-);
-
-$button-dimension-text: (
-  small: (
-    height: var(--theme-button-size-small-1, var(--theme-size-small-1, 20px)),
-    radius: var(
-        --theme-button-radius-medium-3,
-        var(--theme-radius-medium-3, 8px)
-      ),
-  ),
-  medium: (
-    height: var(--theme-button-size-small-2, var(--theme-size-small-2, 24px)),
-    radius: var(
-        --theme-button-radius-medium-3,
-        var(--theme-radius-medium-3, 8px)
-      ),
-  ),
-  large: (
-    height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px)),
-    radius: var(
-        --theme-button-radius-medium-3,
-        var(--theme-radius-medium-3, 8px)
-      ),
-  ),
-);
-
-@mixin button-dimension-variant($variant, $map) {
-  @each $size, $tokens in $map {
-    .button:where([data-variant="#{$variant}"][data-size="#{$size}"]) {
-      height: map.get($tokens, height);
-      border-radius: map.get($tokens, radius);
-    }
-  }
-}
-
-@mixin button-dimension-shape($shape, $map) {
-  @each $size, $tokens in $map {
-    .button:where([data-shape="#{$shape}"][data-size="#{$size}"]) {
-      height: map.get($tokens, height);
-      border-radius: map.get($tokens, radius);
-    }
-  }
-}
-
-@include button-dimension-variant("solid", $button-dimension-default);
-@include button-dimension-variant("outlined", $button-dimension-default);
-@include button-dimension-variant("text-button", $button-dimension-text);
-@include button-dimension-shape("round", $button-dimension-round);
-
-/* Radix Themes outline variant는 box-shadow가 default로 들어가므로 제거 */
-.button.rt-variant-outline,
-.button:where([data-variant="outlined"]) {
+.button.button-fill-outlined {
   box-shadow: none;
 }
 
 @include button-overlay-state("solid", "secondary", transparent, 0, 0);
 
-.button:where([data-variant="solid"][data-intent="secondary"]) {
-  &:hover:not(:disabled),
-  &[data-simulated-state="hover"]:not(:disabled) {
+.button.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);
     box-shadow: none;
   }
 
-  &:active:not(:disabled),
-  &[data-simulated-state="pressed"]:not(:disabled) {
+  &: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);
     box-shadow: none;
@@ -786,11 +568,11 @@ $button-dimension-text: (
 
 @include button-overlay-state(
   "solid",
-  "teritary",
+  "tertiary",
   var(--color-border-standard-strong, var(--color-bg-surface-strong)),
   0.68,
   0.48,
-  intent-token(teritary, solid-bg)
+  priority-token(tertiary, solid-bg)
 );
 
 @include button-overlay-state(
@@ -799,7 +581,7 @@ $button-dimension-text: (
   var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90)),
   0.68,
   0.28,
-  intent-token(primary, outline-border)
+  priority-token(primary, outline-border)
 );
 
 @include button-overlay-state(
@@ -808,20 +590,20 @@ $button-dimension-text: (
   var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95)),
   0.68,
   0.28,
-  intent-token(secondary, outline-border)
+  priority-token(secondary, outline-border)
 );
 
 @include button-overlay-state(
   "outlined",
-  "teritary",
+  "tertiary",
   var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95)),
   0.68,
   0.28,
-  intent-token(teritary, outline-border)
+  priority-token(tertiary, outline-border)
 );
 
 .button:disabled,
-.button:where([data-disabled="true"]) {
+.button[aria-disabled="true"] {
   background-color: var(
     --theme-button-color-bg-surface-standard,
     var(--color-bg-surface-standard)
@@ -834,14 +616,10 @@ $button-dimension-text: (
   cursor: not-allowed;
 }
 
-.button:where([data-shape="round"]) {
-  border-radius: 9999px;
-}
-
-.button:where([data-icon-slot="left"]) .button-label {
+.button.button-icon-left .button-label {
   margin-left: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
 }
 
-.button:where([data-icon-slot="right"]) .button-label {
+.button.button-icon-right .button-label {
   margin-right: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
 }