@uniai-fe/uds-primitives 0.0.1

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

@@ -0,0 +1,847 @@
+@use "@uniai-fe/uds-foundation/css";
+@use "sass:map";
+
+:where(.radix-themes, .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);
+
+  /* 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-bg-surface-strong);
+  /* Confirm dialog cancel 버튼을 위한 solid tertiary 색상 정의 */
+  --theme-button-tertiary-solid-bg: var(--color-bg-surface-neutral);
+  --theme-button-tertiary-solid-hover-bg: var(--color-bg-surface-strong);
+  --theme-button-tertiary-solid-pressed-bg: var(--color-bg-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-bg-surface-standard);
+  --theme-button-color-bg-alternative-cool-gray: var(
+    --color-bg-alternative-cool-gray
+  );
+  --theme-button-color-bg-surface-strong: var(--color-bg-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);
+
+  /* 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: (
+  primary: (
+    solid-bg: var(
+        --theme-button-color-primary-default,
+        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-foreground: var(
+        --theme-button-color-common-100,
+        var(--color-common-100)
+      ),
+    outline-border: var(
+        --theme-button-color-primary-default,
+        var(--color-primary-default)
+      ),
+    outline-hover-bg: var(
+        --theme-button-color-primary-default,
+        var(--color-primary-default)
+      ),
+    outline-hover-foreground: var(
+        --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(
+        --theme-button-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-foreground: var(
+        --theme-button-color-primary-default,
+        var(--color-primary-default)
+      ),
+    outline-border: var(
+        --theme-button-color-cool-gray-90,
+        var(--color-cool-gray-90)
+      ),
+    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: (
+    solid-bg: var(
+        --theme-button-tertiary-solid-bg,
+        var(--color-bg-surface-neutral)
+      ),
+    solid-hover: var(
+        --theme-button-tertiary-solid-hover-bg,
+        var(--color-bg-surface-static-cool-gray)
+      ),
+    solid-active: var(
+        --theme-button-tertiary-solid-pressed-bg,
+        var(--color-bg-surface-strong)
+      ),
+    solid-foreground: var(
+        --theme-button-tertiary-solid-foreground,
+        var(--color-label-neutral)
+      ),
+    outline-border: var(
+        --theme-button-color-cool-gray-90,
+        var(--color-cool-gray-90)
+      ),
+    outline-hover-bg: var(
+        --theme-button-color-cool-gray-95,
+        var(--color-cool-gray-95)
+      ),
+    outline-hover-foreground: var(
+        --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);
+}
+
+@mixin button-state-selector($variant, $intent) {
+  .button:where([data-variant="#{$variant}"][data-intent="#{$intent}"]) {
+    @content;
+  }
+}
+
+@mixin button-overlay-state(
+  $variant,
+  $intent,
+  $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) {
+      background-color: $bg;
+      @if $border-color == null {
+        border-color: $bg;
+      } @else {
+        border-color: $border-color;
+      }
+      box-shadow: inset 0 0 0 999px rgba(255, 255, 255, $hover-opacity);
+    }
+
+    &:active:not(:disabled),
+    &[data-simulated-state="pressed"]:not(:disabled) {
+      background-color: $bg;
+      @if $border-color == null {
+        border-color: $bg;
+      } @else {
+        border-color: $border-color;
+      }
+      box-shadow: inset 0 0 0 999px rgba(255, 255, 255, $pressed-opacity);
+    }
+  }
+}
+
+/* Radix reset 이후에도 primitives 스타일이 유지되도록 공통 클래스에 스타일 부여 */
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
+  width: fit-content;
+  min-width: var(--theme-button-min-width, 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))
+  );
+  border-radius: var(
+    --button-border-radius,
+    var(--theme-button-radius-medium-1, var(--theme-radius-medium-1, 8px))
+  );
+  border: 1px solid transparent;
+  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%;
+}
+
+.button:where([data-loading="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);
+    &:disabled,
+    &[data-disabled="true"] {
+      background-color: var(
+        --theme-button-color-bg-surface-standard,
+        var(--color-bg-surface-standard)
+      );
+      border-color: var(
+        --theme-button-color-bg-surface-standard,
+        var(--color-bg-surface-standard)
+      );
+      color: var(
+        --theme-button-color-label-disabled,
+        var(--color-label-disabled)
+      );
+    }
+
+    &:hover:not(:disabled),
+    &[data-simulated-state="hover"]:not(:disabled) {
+      background-color: intent-token($intent, solid-hover);
+      border-color: intent-token($intent, 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);
+    }
+  }
+
+  @include button-state-selector("outlined", $intent) {
+    background-color: transparent;
+    color: intent-token($intent, text-color);
+    border-color: intent-token($intent, outline-border);
+
+    &:disabled,
+    &[data-disabled="true"] {
+      background-color: var(
+        --theme-button-color-bg-surface-standard,
+        var(--color-bg-surface-standard)
+      );
+      border-color: var(
+        --theme-button-color-bg-surface-standard,
+        var(--color-bg-surface-standard)
+      );
+      color: var(
+        --theme-button-color-label-disabled,
+        var(--color-label-disabled)
+      );
+    }
+
+    &:hover:not(:disabled),
+    &[data-simulated-state="hover"]:not(:disabled) {
+      background-color: intent-token($intent, outline-hover-bg);
+      border-color: intent-token($intent, 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)
+      );
+    }
+  }
+}
+
+$button-size-map: (
+  small: (
+    padding-inline: var(
+        --theme-button-padding-3,
+        var(--spacing-padding-3, 12px)
+      ),
+    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(
+        --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(
+        --theme-button-font-label-medium-line-height,
+        var(--font-label-medium-line-height, 1.5em)
+      ),
+    letter-spacing: var(
+        --theme-button-font-label-medium-letter-spacing,
+        var(--font-label-medium-letter-spacing, 0px)
+      ),
+  ),
+  medium: (
+    padding-inline: var(
+        --theme-button-padding-4,
+        var(--spacing-padding-4, 16px)
+      ),
+    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(
+        --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(
+        --theme-button-font-label-large-line-height,
+        var(--font-label-large-line-height, 1.5em)
+      ),
+    letter-spacing: var(
+        --theme-button-font-label-large-letter-spacing,
+        var(--font-label-large-letter-spacing, 0px)
+      ),
+  ),
+  large: (
+    padding-inline: var(
+        --theme-button-padding-5,
+        var(--spacing-padding-5, 20px)
+      ),
+    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(
+        --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(
+        --theme-button-font-body-medium-line-height,
+        var(--font-body-medium-line-height, 1.5em)
+      ),
+    letter-spacing: var(
+        --theme-button-font-body-medium-letter-spacing,
+        var(--font-body-medium-letter-spacing, 0px)
+      ),
+  ),
+  xlarge: (
+    padding-inline: var(
+        --theme-button-padding-6,
+        var(--spacing-padding-6, 24px)
+      ),
+    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(
+        --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(
+        --theme-button-font-body-large-line-height,
+        var(--font-body-large-line-height, 1.5em)
+      ),
+    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)
+      ),
+  ),
+  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)
+      ),
+  ),
+);
+
+@each $size, $tokens in $button-size-map {
+  .button:where([data-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);
+    }
+  }
+}
+
+@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"]) {
+  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) {
+    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) {
+    background-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
+    border-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
+    box-shadow: none;
+  }
+}
+
+@include button-overlay-state(
+  "solid",
+  "teritary",
+  var(--color-border-standard-strong, var(--color-bg-surface-strong)),
+  0.68,
+  0.48,
+  intent-token(teritary, solid-bg)
+);
+
+@include button-overlay-state(
+  "outlined",
+  "primary",
+  var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90)),
+  0.68,
+  0.28,
+  intent-token(primary, outline-border)
+);
+
+@include button-overlay-state(
+  "outlined",
+  "secondary",
+  var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95)),
+  0.68,
+  0.28,
+  intent-token(secondary, outline-border)
+);
+
+@include button-overlay-state(
+  "outlined",
+  "teritary",
+  var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95)),
+  0.68,
+  0.28,
+  intent-token(teritary, outline-border)
+);
+
+.button:disabled,
+.button:where([data-disabled="true"]) {
+  background-color: var(
+    --theme-button-color-bg-surface-standard,
+    var(--color-bg-surface-standard)
+  );
+  border-color: var(
+    --theme-button-color-bg-surface-standard,
+    var(--color-bg-surface-standard)
+  );
+  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
+  cursor: not-allowed;
+}
+
+.button:where([data-shape="round"]) {
+  border-radius: 9999px;
+}
+
+.button:where([data-icon-slot="left"]) .button-label {
+  margin-left: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
+}
+
+.button:where([data-icon-slot="right"]) .button-label {
+  margin-right: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
+}