@uniai-fe/uds-templates 0.0.8 → 0.0.10

package/dist/styles.css

@@ -18,6 +18,7 @@
     letter-spacing: -0.05em;
     flex-shrink: 0;
     overscroll-behavior-y: none;
+    font-family: var(--font-family-sans, "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", "Pretendard", "Inter", sans-serif);
   }
   *:focus,
   *:focus-within,
@@ -626,23 +627,41 @@
     --theme-radius-xlarge: 16px;
   }
 }
+@layer theme.tokens.typography {
+  @font-face {
+    font-family: "Pretendard JP Variable";
+    src: url("./fonts/pretendard-jp/PretendardJPVariable.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "InterVariable";
+    src: url("./fonts/inter/InterVariable.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+  }
+}
 @layer theme.tokens.typography {
   :root {
     --font-family-pretendard:
       "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
-      "Pretendard", "Noto Sans KR", "-apple-system", "BlinkMacSystemFont",
-      "Apple SD Gothic Neo", "Segoe UI", "Roboto", "Helvetica",
-      "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
+      "Pretendard", "InterVariable", "Inter", "Noto Sans KR", "-apple-system",
+      "BlinkMacSystemFont", "Apple SD Gothic Neo", "Segoe UI", "Roboto",
+      "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
       "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
       "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
     --font-family-inter:
-      "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont",
-      "Segoe UI", "Roboto", "Helvetica", "Helvetica Neue", "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움",
-      "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
+      "InterVariable", "Inter", "Pretendard JP Variable", "Pretendard JP",
+      "Pretendard Variable", "Pretendard", "-apple-system",
+      "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica",
+      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic",
+      "맑은 고딕", "돋움", "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu",
+      "Cantarell", "sans-serif";
     --font-family-system:
-      "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
-      "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
+      "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
+      "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
       "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
       "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
     --font-family-sans: var(--font-family-pretendard);
@@ -1051,7 +1070,7 @@
   --badge-fill-label-color: var(--color-primary-default, #1a6aff);
 }
 
-.badge:where([data-style=fill][data-intent=teritary]) {
+.badge:where([data-style=fill][data-intent=tertiary]) {
   --badge-fill-bg-color: var(--color-cool-gray-10, #18191b);
   --badge-fill-label-color: var(--color-common-100, #ffffff);
 }
@@ -1092,7 +1111,7 @@
   --badge-outline-label-color: var(--color-primary-strong, #0050e5);
 }
 
-.badge:where([data-style=outlined][data-intent=teritary]) {
+.badge:where([data-style=outlined][data-intent=tertiary]) {
   --badge-outline-border-color: var(--color-border-standard-heavy, #313235);
   --badge-outline-label-color: var(--color-label-strong, #18191b);
 }
@@ -1131,7 +1150,7 @@
   --badge-dot-color: var(--color-red-55, #f43625);
 }
 
-:where(.radix-themes, .theme-root, :root) {
+:root {
   /* spacing */
   --theme-button-gap-1: var(--spacing-gap-1);
   --theme-button-gap-2: var(--spacing-gap-2);
@@ -1145,6 +1164,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);
   --theme-button-size-small-2: var(--theme-size-small-2);
@@ -1231,16 +1268,9 @@
   --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);
 }
 
-/* Radix reset 이후에도 primitives 스타일이 유지되도록 공통 클래스에 스타일 부여 */
+/* Primitives 버튼 공통 스타일 */
 .button {
   display: flex;
   align-items: center;
@@ -1256,477 +1286,365 @@
   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]) {
+.button 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 .button-icon,
+.button .button-label,
+.button .button-left,
+.button .button-right {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.button.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;
-}
-
-.button:where([data-variant=solid][data-intent=primary]) {
+.button.button-fill-solid.button-priority-primary {
   background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   color: var(--theme-button-color-common-100, var(--color-common-100));
 }
-.button:where([data-variant=solid][data-intent=primary]):disabled, .button:where([data-variant=solid][data-intent=primary])[data-disabled=true] {
+.button.button-fill-solid.button-priority-primary:disabled, .button.button-fill-solid.button-priority-primary[aria-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));
 }
-.button:where([data-variant=solid][data-intent=primary]):hover:not(:disabled), .button:where([data-variant=solid][data-intent=primary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-solid.button-priority-primary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-primary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-blue-50, var(--color-blue-50));
   border-color: var(--theme-button-color-blue-50, var(--color-blue-50));
 }
-.button:where([data-variant=solid][data-intent=primary]):active:not(:disabled), .button:where([data-variant=solid][data-intent=primary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-solid.button-priority-primary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-primary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-blue-45, var(--color-blue-45));
   border-color: var(--theme-button-color-blue-45, var(--color-blue-45));
 }
 
-.button:where([data-variant=outlined][data-intent=primary]) {
+.button.button-fill-outlined.button-priority-primary {
   background-color: transparent;
   color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
-.button:where([data-variant=outlined][data-intent=primary]):disabled, .button:where([data-variant=outlined][data-intent=primary])[data-disabled=true] {
+.button.button-fill-outlined.button-priority-primary:disabled, .button.button-fill-outlined.button-priority-primary[aria-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));
 }
-.button:where([data-variant=outlined][data-intent=primary]):hover:not(:disabled), .button:where([data-variant=outlined][data-intent=primary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-outlined.button-priority-primary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-primary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
-.button:where([data-variant=outlined][data-intent=primary]):active:not(:disabled), .button:where([data-variant=outlined][data-intent=primary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-outlined.button-priority-primary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-primary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
 
-.button:where([data-variant=text-button][data-intent=primary]) {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--theme-button-color-primary-default, var(--color-primary-default));
-}
-.button:where([data-variant=text-button][data-intent=primary]):hover:not(:disabled), .button:where([data-variant=text-button][data-intent=primary])[data-simulated-state=hover]:not(:disabled) {
-  background-color: var(--theme-button-text-default-hover-bg, var(--color-tertiary-default));
-}
-.button:where([data-variant=text-button][data-intent=primary]):active:not(:disabled), .button:where([data-variant=text-button][data-intent=primary])[data-simulated-state=pressed]:not(:disabled) {
-  background-color: var(--theme-button-text-default-pressed-bg, var(--color-tertiary-strong));
-}
-.button:where([data-variant=text-button][data-intent=primary]):disabled, .button:where([data-variant=text-button][data-intent=primary])[data-disabled=true] {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
-}
-
-.button:where([data-variant=solid][data-intent=secondary]) {
+.button.button-fill-solid.button-priority-secondary {
   background-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
   border-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
   color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
-.button:where([data-variant=solid][data-intent=secondary]):disabled, .button:where([data-variant=solid][data-intent=secondary])[data-disabled=true] {
+.button.button-fill-solid.button-priority-secondary:disabled, .button.button-fill-solid.button-priority-secondary[aria-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));
 }
-.button:where([data-variant=solid][data-intent=secondary]):hover:not(:disabled), .button:where([data-variant=solid][data-intent=secondary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-solid.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[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);
 }
-.button:where([data-variant=solid][data-intent=secondary]):active:not(:disabled), .button:where([data-variant=solid][data-intent=secondary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-solid.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[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);
 }
 
-.button:where([data-variant=outlined][data-intent=secondary]) {
+.button.button-fill-outlined.button-priority-secondary {
   background-color: transparent;
   color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
-.button:where([data-variant=outlined][data-intent=secondary]):disabled, .button:where([data-variant=outlined][data-intent=secondary])[data-disabled=true] {
+.button.button-fill-outlined.button-priority-secondary:disabled, .button.button-fill-outlined.button-priority-secondary[aria-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));
 }
-.button:where([data-variant=outlined][data-intent=secondary]):hover:not(:disabled), .button:where([data-variant=outlined][data-intent=secondary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-outlined.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-secondary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-blue-90, var(--color-blue-90));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
-.button:where([data-variant=outlined][data-intent=secondary]):active:not(:disabled), .button:where([data-variant=outlined][data-intent=secondary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-outlined.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-secondary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 
-.button:where([data-variant=text-button][data-intent=secondary]) {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--theme-button-color-primary-default, var(--color-primary-default));
-}
-.button:where([data-variant=text-button][data-intent=secondary]):hover:not(:disabled), .button:where([data-variant=text-button][data-intent=secondary])[data-simulated-state=hover]:not(:disabled) {
-  background-color: var(--theme-button-text-secondary-hover-bg, var(--color-bg-alternative-cool-gray));
-}
-.button:where([data-variant=text-button][data-intent=secondary]):active:not(:disabled), .button:where([data-variant=text-button][data-intent=secondary])[data-simulated-state=pressed]:not(:disabled) {
-  background-color: var(--theme-button-text-secondary-pressed-bg, var(--color-secondary-strong));
-}
-.button:where([data-variant=text-button][data-intent=secondary]):disabled, .button:where([data-variant=text-button][data-intent=secondary])[data-disabled=true] {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
-}
-
-.button:where([data-variant=solid][data-intent=teritary]) {
+.button.button-fill-solid.button-priority-tertiary {
   background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   color: var(--theme-button-tertiary-solid-foreground, var(--color-label-neutral));
 }
-.button:where([data-variant=solid][data-intent=teritary]):disabled, .button:where([data-variant=solid][data-intent=teritary])[data-disabled=true] {
+.button.button-fill-solid.button-priority-tertiary:disabled, .button.button-fill-solid.button-priority-tertiary[aria-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));
 }
-.button:where([data-variant=solid][data-intent=teritary]):hover:not(:disabled), .button:where([data-variant=solid][data-intent=teritary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-solid.button-priority-tertiary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-tertiary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-bg-surface-static-cool-gray));
   border-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-bg-surface-static-cool-gray));
 }
-.button:where([data-variant=solid][data-intent=teritary]):active:not(:disabled), .button:where([data-variant=solid][data-intent=teritary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-solid.button-priority-tertiary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-tertiary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-bg-surface-strong));
   border-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-bg-surface-strong));
 }
 
-.button:where([data-variant=outlined][data-intent=teritary]) {
+.button.button-fill-outlined.button-priority-tertiary {
   background-color: transparent;
   color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
-.button:where([data-variant=outlined][data-intent=teritary]):disabled, .button:where([data-variant=outlined][data-intent=teritary])[data-disabled=true] {
+.button.button-fill-outlined.button-priority-tertiary:disabled, .button.button-fill-outlined.button-priority-tertiary[aria-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));
 }
-.button:where([data-variant=outlined][data-intent=teritary]):hover:not(:disabled), .button:where([data-variant=outlined][data-intent=teritary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-outlined.button-priority-tertiary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-tertiary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-cool-gray-95, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
-.button:where([data-variant=outlined][data-intent=teritary]):active:not(:disabled), .button:where([data-variant=outlined][data-intent=teritary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-outlined.button-priority-tertiary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-tertiary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 
-.button:where([data-variant=text-button][data-intent=teritary]) {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
-}
-.button:where([data-variant=text-button][data-intent=teritary]):hover:not(:disabled), .button:where([data-variant=text-button][data-intent=teritary])[data-simulated-state=hover]:not(:disabled) {
-  background-color: var(--theme-button-text-tertiary-hover-bg, var(--color-bg-alternative-cool-gray));
-}
-.button:where([data-variant=text-button][data-intent=teritary]):active:not(:disabled), .button:where([data-variant=text-button][data-intent=teritary])[data-simulated-state=pressed]:not(:disabled) {
-  background-color: var(--theme-button-text-tertiary-pressed-bg, var(--color-bg-surface-strong));
-}
-.button:where([data-variant=text-button][data-intent=teritary]):disabled, .button:where([data-variant=text-button][data-intent=teritary])[data-disabled=true] {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
+.button.button-size-small {
+  padding-inline: var(--theme-button-padding-6, var(--spacing-padding-6, 24px));
+  gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
+  padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px));
+  min-height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
+  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
 }
-
-.button:where([data-size=small]) {
-  padding-inline: var(--theme-button-padding-3, var(--spacing-padding-3, 12px));
-  gap: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
-  padding-block: var(--theme-button-padding-1, var(--spacing-padding-1, 2px));
+.button.button-size-small span {
   font-size: var(--theme-button-font-label-medium-size, var(--font-label-medium-size, 14px));
   font-weight: var(--theme-button-font-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));
 }
 
-.button:where([data-size=medium]) {
-  padding-inline: var(--theme-button-padding-4, var(--spacing-padding-4, 16px));
+.button.button-size-medium {
+  padding-inline: var(--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));
+  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
+  min-height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
+  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
+}
+.button.button-size-medium span {
   font-size: var(--theme-button-font-label-large-size, var(--font-label-large-size, 16px));
   font-weight: var(--theme-button-font-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));
 }
 
-.button:where([data-size=large]) {
-  padding-inline: var(--theme-button-padding-5, var(--spacing-padding-5, 20px));
+.button.button-size-large {
+  padding-inline: var(--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));
+  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
+  min-height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
+  border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
+}
+.button.button-size-large span {
   font-size: var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 17px));
   font-weight: var(--theme-button-font-weight, 400);
   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));
 }
 
-.button:where([data-size=xlarge]) {
-  padding-inline: var(--theme-button-padding-6, var(--spacing-padding-6, 24px));
+.button.button-size-xlarge {
+  padding-inline: var(--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));
+  padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
+  min-height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
+  border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
+}
+.button.button-size-xlarge span {
   font-size: var(--theme-button-font-body-large-size, var(--font-body-large-size, 19px));
   font-weight: var(--theme-button-font-weight, 400);
   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:where([data-variant=solid][data-size=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));
-}
-
-.button:where([data-variant=solid][data-size=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));
-}
-
-.button:where([data-variant=solid][data-size=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));
-}
-
-.button:where([data-variant=solid][data-size=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:where([data-variant=outlined][data-size=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));
-}
-
-.button:where([data-variant=outlined][data-size=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));
-}
-
-.button:where([data-variant=outlined][data-size=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));
-}
-
-.button:where([data-variant=outlined][data-size=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:where([data-variant=text-button][data-size=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));
-}
-
-.button:where([data-variant=text-button][data-size=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));
-}
-
-.button:where([data-variant=text-button][data-size=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));
-}
-
-.button:where([data-shape=round][data-size=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));
-}
-
-.button:where([data-shape=round][data-size=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));
-}
-
-.button:where([data-shape=round][data-size=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:where([data-variant=solid][data-size=small]) {
-  height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
-  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
-}
-
-.button:where([data-variant=solid][data-size=medium]) {
-  height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
-  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
-}
-
-.button:where([data-variant=solid][data-size=large]) {
-  height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
-  border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
-}
-
-.button:where([data-variant=solid][data-size=xlarge]) {
-  height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
-  border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
-}
-
-.button:where([data-variant=outlined][data-size=small]) {
-  height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
-  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
-}
-
-.button:where([data-variant=outlined][data-size=medium]) {
-  height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
-  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
-}
-
-.button:where([data-variant=outlined][data-size=large]) {
-  height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
-  border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
-}
-
-.button:where([data-variant=outlined][data-size=xlarge]) {
-  height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
-  border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
-}
-
-.button:where([data-variant=text-button][data-size=small]) {
-  height: var(--theme-button-size-small-1, var(--theme-size-small-1, 20px));
-  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
-}
-
-.button:where([data-variant=text-button][data-size=medium]) {
-  height: var(--theme-button-size-small-2, var(--theme-size-small-2, 24px));
-  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
-}
-
-.button:where([data-variant=text-button][data-size=large]) {
-  height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
-  border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
-}
-
-.button:where([data-shape=round][data-size=small]) {
-  height: var(--theme-button-size-small-2, var(--theme-size-small-2, 24px));
-  border-radius: var(--theme-button-size-small-2, var(--theme-size-small-2, 24px));
-}
-
-.button:where([data-shape=round][data-size=medium]) {
-  height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
-  border-radius: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
-}
-
-.button:where([data-shape=round][data-size=large]) {
-  height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
-  border-radius: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
-}
-
-/* Radix Themes outline variant는 box-shadow가 default로 들어가므로 제거 */
-.button.rt-variant-outline,
-.button:where([data-variant=outlined]) {
+.button.button-fill-outlined {
   box-shadow: none;
 }
 
-.button:where([data-variant=solid][data-intent=secondary]):hover:not(:disabled), .button:where([data-variant=solid][data-intent=secondary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-solid.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: transparent;
   border-color: transparent;
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0);
 }
-.button:where([data-variant=solid][data-intent=secondary]):active:not(:disabled), .button:where([data-variant=solid][data-intent=secondary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-solid.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: transparent;
   border-color: transparent;
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0);
 }
 
-.button:where([data-variant=solid][data-intent=secondary]):hover:not(:disabled), .button:where([data-variant=solid][data-intent=secondary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-solid.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[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;
 }
-.button:where([data-variant=solid][data-intent=secondary]):active:not(:disabled), .button:where([data-variant=solid][data-intent=secondary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-solid.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[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;
 }
 
-.button:where([data-variant=solid][data-intent=teritary]):hover:not(:disabled), .button:where([data-variant=solid][data-intent=teritary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-solid.button-priority-tertiary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-tertiary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--color-border-standard-strong, var(--color-bg-surface-strong));
   border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
-.button:where([data-variant=solid][data-intent=teritary]):active:not(:disabled), .button:where([data-variant=solid][data-intent=teritary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-solid.button-priority-tertiary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-tertiary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--color-border-standard-strong, var(--color-bg-surface-strong));
   border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.48);
 }
 
-.button:where([data-variant=outlined][data-intent=primary]):hover:not(:disabled), .button:where([data-variant=outlined][data-intent=primary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-outlined.button-priority-primary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-primary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
-.button:where([data-variant=outlined][data-intent=primary]):active:not(:disabled), .button:where([data-variant=outlined][data-intent=primary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-outlined.button-priority-primary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-primary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
 }
 
-.button:where([data-variant=outlined][data-intent=secondary]):hover:not(:disabled), .button:where([data-variant=outlined][data-intent=secondary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-outlined.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-secondary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
-.button:where([data-variant=outlined][data-intent=secondary]):active:not(:disabled), .button:where([data-variant=outlined][data-intent=secondary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-outlined.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-secondary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
 }
 
-.button:where([data-variant=outlined][data-intent=teritary]):hover:not(:disabled), .button:where([data-variant=outlined][data-intent=teritary])[data-simulated-state=hover]:not(:disabled) {
+.button.button-fill-outlined.button-priority-tertiary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-tertiary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
-.button:where([data-variant=outlined][data-intent=teritary]):active:not(:disabled), .button:where([data-variant=outlined][data-intent=teritary])[data-simulated-state=pressed]:not(:disabled) {
+.button.button-fill-outlined.button-priority-tertiary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-tertiary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
 }
 
 .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));
   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 {
+.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));
 }
 
+.button.button-template-text {
+  min-width: auto;
+  border-color: transparent;
+  background-color: transparent;
+  padding-block: var(--theme-button-text-padding-block, var(--spacing-padding-4, 8px));
+  padding-inline: var(--theme-button-text-padding-inline-small, var(--spacing-padding-4, 8px));
+  border-width: 0;
+  gap: var(--spacing-gap-1, 4px);
+  border-radius: var(--theme-button-text-radius, var(--theme-radius-small, 4px));
+}
+
+.button.button-template-text-size-small {
+  min-height: var(--theme-button-text-min-height-small, var(--theme-size-small-1, 20px));
+  padding-inline: var(--theme-button-text-padding-inline-small, var(--spacing-padding-4, 8px));
+}
+
+.button.button-template-text-size-medium {
+  min-height: var(--theme-button-text-min-height-medium, var(--theme-size-small-2, 24px));
+  padding-inline: var(--theme-button-text-padding-inline-medium, var(--spacing-padding-5, 12px));
+}
+
+.button.button-template-text-size-large {
+  min-height: var(--theme-button-text-min-height-large, var(--theme-size-small-3, 32px));
+  padding-inline: var(--theme-button-text-padding-inline-large, var(--spacing-padding-5, 12px));
+}
+
+.button.button-template-text:disabled {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.button.button-template-text.button-priority-secondary {
+  color: var(--theme-button-color-primary-default, var(--color-primary-default));
+}
+.button.button-template-text.button-priority-secondary:hover:not(:disabled), .button.button-template-text.button-priority-secondary[data-user-action=hover]:not(:disabled) {
+  background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
+}
+.button.button-template-text.button-priority-secondary:active:not(:disabled), .button.button-template-text.button-priority-secondary[data-user-action=pressed]:not(:disabled) {
+  background-color: var(--color-secondary-strong, var(--color-blue-90));
+}
+
+.button.button-template-text.button-priority-tertiary {
+  color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
+}
+.button.button-template-text.button-priority-tertiary:hover:not(:disabled), .button.button-template-text.button-priority-tertiary[data-user-action=hover]:not(:disabled) {
+  background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
+}
+.button.button-template-text.button-priority-tertiary:active:not(:disabled), .button.button-template-text.button-priority-tertiary[data-user-action=pressed]:not(:disabled) {
+  background-color: var(--color-bg-surface-strong, var(--color-cool-gray-20));
+}
+
+.button.button-template-round {
+  min-width: auto;
+  padding-block: var(--theme-button-round-padding-block, var(--spacing-padding-2, 4px));
+  padding-inline: var(--theme-button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
+  gap: var(--spacing-gap-2, 8px);
+}
+
+.button.button-template-round-size-small {
+  min-height: var(--theme-button-round-min-height-small, var(--theme-size-small-2, 24px));
+  padding-inline: var(--theme-button-round-padding-inline-small, var(--spacing-padding-5, 12px));
+  border-radius: var(--theme-button-round-radius-small, var(--theme-radius-xlarge-2, 16px));
+}
+
+.button.button-template-round-size-medium {
+  min-height: var(--theme-button-round-min-height-medium, var(--theme-size-small-3, 32px));
+  padding-inline: var(--theme-button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
+  border-radius: var(--theme-button-round-radius-medium, var(--theme-radius-xlarge-2, 16px));
+}
+
+.button.button-template-round-size-large {
+  min-height: var(--theme-button-round-min-height-large, var(--theme-size-medium-1, 40px));
+  padding-inline: var(--theme-button-round-padding-inline-large, var(--spacing-padding-7, 20px));
+  border-radius: var(--theme-button-round-radius-large, 30px);
+}
+
 /* TODO(calendar): 스타일을 SOT 토큰 값으로 정의한다. */
 :where(.radix-themes, .theme-root, :root) {
   --theme-checkbox-frame-size-medium: 20px;
@@ -2500,12 +2418,12 @@ figure.chip {
   --theme-input-height-small: var(--theme-size-medium-1);
   --theme-input-height-medium: var(--theme-size-medium-2);
   --theme-input-height-large: var(--theme-size-medium-3);
-  --theme-input-height-teritary: calc(var(--theme-size-medium-2) + 24px);
+  --theme-input-height-tertiary: calc(var(--theme-size-medium-2) + 24px);
   --theme-input-padding-x: var(--spacing-padding-6);
   --theme-input-padding-y: var(--spacing-padding-4);
   --theme-input-gap: var(--spacing-gap-4);
   --theme-input-radius-default: var(--theme-radius-large-1);
-  --theme-input-radius-teritary: var(--theme-radius-large-2);
+  --theme-input-radius-tertiary: var(--theme-radius-large-2);
   --theme-input-label-color: var(--color-label-standard);
   --theme-input-helper-color: var(--color-label-neutral);
   --theme-input-helper-disabled-color: var(--color-label-disabled);
@@ -2583,7 +2501,7 @@ figure.chip {
 .input-field[data-size=large] {
   min-height: var(--theme-input-height-large);
 }
-.input-field[data-appearance=secondary] {
+.input-field[data-priority=secondary] {
   border: none;
   border-bottom: var(--theme-input-border-width-default) solid var(--theme-input-border-color);
   border-radius: 0;
@@ -2591,38 +2509,38 @@ figure.chip {
   padding-block: var(--spacing-padding-4);
   background-color: transparent;
 }
-.input-field[data-appearance=teritary] {
-  border-radius: var(--theme-input-radius-teritary);
+.input-field[data-priority=tertiary] {
+  border-radius: var(--theme-input-radius-tertiary);
   background-color: var(--theme-input-surface);
-  min-height: var(--theme-input-height-teritary);
+  min-height: var(--theme-input-height-tertiary);
   flex-wrap: wrap;
   row-gap: var(--spacing-gap-1);
   column-gap: var(--theme-input-gap);
 }
-.input-field[data-appearance=teritary] .input-inline-label {
+.input-field[data-priority=tertiary] .input-inline-label {
   flex-basis: 100%;
 }
-.input-field[data-appearance=teritary] .input-element {
+.input-field[data-priority=tertiary] .input-element {
   min-height: var(--theme-size-medium-2);
   width: auto;
   flex: 1 1 auto;
 }
-.input-field[data-appearance=teritary] .input-element + .input-affix {
+.input-field[data-priority=tertiary] .input-element + .input-affix {
   margin-left: auto;
 }
-.input-field:not([data-appearance=secondary])[data-state=active], .input-field:not([data-appearance=secondary])[data-state=focused] {
+.input-field:not([data-priority=secondary])[data-state=active], .input-field:not([data-priority=secondary])[data-state=focused] {
   border-color: var(--theme-input-border-active);
   border-width: var(--theme-input-border-width-emphasis);
 }
-.input-field:not([data-appearance=secondary])[data-state=success] {
+.input-field:not([data-priority=secondary])[data-state=success] {
   border-color: var(--theme-input-border-success);
   border-width: var(--theme-input-border-width-emphasis);
 }
-.input-field:not([data-appearance=secondary])[data-state=error] {
+.input-field:not([data-priority=secondary])[data-state=error] {
   border-color: var(--theme-input-border-error);
   border-width: var(--theme-input-border-width-emphasis);
 }
-.input-field:not([data-appearance=secondary])[data-state=disabled] {
+.input-field:not([data-priority=secondary])[data-state=disabled] {
   border-color: var(--theme-input-border-disabled);
   border-width: var(--theme-input-border-width-default);
   background-color: var(--theme-input-surface-disabled);
@@ -2662,11 +2580,11 @@ figure.chip {
   color: var(--theme-input-label-color);
 }
 
-.input-field[data-appearance=secondary] .input-element {
+.input-field[data-priority=secondary] .input-element {
   padding-inline: 0;
 }
 
-.input-field[data-appearance=teritary] .input-element {
+.input-field[data-priority=tertiary] .input-element {
   min-height: var(--theme-size-medium-2);
 }
 
@@ -2689,14 +2607,14 @@ figure.chip {
   min-width: 20px;
   color: var(--theme-input-helper-color);
 }
-.input-affix--prefix {
+.input-affix--left {
   order: -1;
   margin-right: var(--spacing-gap-3);
 }
-.input-affix--suffix, .input-affix--reset, .input-affix--status {
+.input-affix--right, .input-affix--clear, .input-affix--status {
   margin-left: var(--spacing-gap-3);
 }
-.input-affix--reset, .input-affix--status {
+.input-affix--clear, .input-affix--status {
   color: var(--theme-input-text-color);
 }
 .input-affix--status[data-state=error] {
@@ -2706,22 +2624,22 @@ figure.chip {
   color: var(--color-primary-default);
 }
 
-.input-field[data-appearance=secondary] {
+.input-field[data-priority=secondary] {
   border-bottom-width: var(--theme-input-border-width-default);
 }
-.input-field[data-appearance=secondary][data-state=active], .input-field[data-appearance=secondary][data-state=focused] {
+.input-field[data-priority=secondary][data-state=active], .input-field[data-priority=secondary][data-state=focused] {
   border-bottom-color: var(--theme-input-border-active);
   border-bottom-width: var(--theme-input-border-width-emphasis);
 }
-.input-field[data-appearance=secondary][data-state=success] {
+.input-field[data-priority=secondary][data-state=success] {
   border-bottom-color: var(--theme-input-border-success);
   border-bottom-width: var(--theme-input-border-width-emphasis);
 }
-.input-field[data-appearance=secondary][data-state=error] {
+.input-field[data-priority=secondary][data-state=error] {
   border-bottom-color: var(--theme-input-border-error);
   border-bottom-width: var(--theme-input-border-width-emphasis);
 }
-.input-field[data-appearance=secondary][data-state=disabled] {
+.input-field[data-priority=secondary][data-state=disabled] {
   border-bottom-color: var(--theme-input-border-underline-disabled);
   border-bottom-width: var(--theme-input-border-width-default);
 }
@@ -2753,7 +2671,7 @@ figure.chip {
   border-color: var(--theme-input-border-color);
   background-color: var(--theme-input-surface-disabled);
 }
-.input[data-state=disabled] .input-field[data-appearance=secondary] {
+.input[data-state=disabled] .input-field[data-priority=secondary] {
   background-color: transparent;
 }
 
@@ -3443,17 +3361,14 @@ figure.chip {
   /* Figma node 694:4619 측정값을 CSS 변수로 고정해 Storybook과 실 서비스 간 시각 편차를 줄인다. */
   --tab-label-font-size: var(--font-heading-xsmall-size, 17px);
   --tab-label-font-weight: var(--font-heading-xsmall-weight, 600);
-  --tab-label-line-height: var(--font-heading-xsmall-line-height, 1.5em);
-  --tab-label-letter-spacing: var(--font-heading-xsmall-letter-spacing, 0px);
-  --tab-gap: 10px;
+  --tab-label-line-height: 1.4;
+  --tab-label-letter-spacing: 0px;
+  --tab-gap: var(--spacing-gap-2, 8px);
   --tab-padding-y: 10px;
-  --tab-padding-x: 20px;
+  --tab-padding-x: var(--spacing-padding-8, 24px);
   --tab-icon-gap: 6px;
-  --tab-line-track-color: var(
-    --color-border-divider,
-    var(--color-cool-gray-85)
-  );
-  --tab-line-track-height: 1.6px;
+  --tab-line-track-color: var(--color-border-divider, #f2f2f3);
+  --tab-line-track-height: 1px;
   --tab-line-indicator-height: 2px;
   --tab-color-active-default: #1a6aff;
   --tab-color-active: var(--tab-color-active-default);
@@ -3463,12 +3378,33 @@ figure.chip {
   --tab-fill-active-color: var(--color-common-100, #ffffff);
   --tab-inactive-color: var(--color-label-alternative, #afb1b6);
   --tab-disabled-opacity: 0.4;
+  --tab-height: 48px;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-gap-3);
 }
 
+.tab-root:where([data-scale=small]) {
+  --tab-label-font-size: var(--font-heading-xxsmall-size, 15px);
+  --tab-label-font-weight: var(--font-heading-xxsmall-weight, 600);
+  --tab-height: 40px;
+  --tab-padding-x: var(--spacing-padding-4, 8px);
+}
+
+.tab-root:where([data-scale=medium]) {
+  --tab-label-font-size: var(--font-heading-xsmall-size, 17px);
+  --tab-label-font-weight: var(--font-heading-xsmall-weight, 600);
+  --tab-height: 48px;
+}
+
+.tab-root:where([data-scale=large]) {
+  --tab-label-font-size: var(--font-heading-small-size, 19px);
+  --tab-label-font-weight: var(--font-heading-small-weight, 600);
+  --tab-height: 56px;
+  --tab-padding-x: var(--spacing-padding-8, 24px);
+}
+
 .tab-list {
   display: flex;
   align-items: stretch;
@@ -3492,6 +3428,7 @@ figure.chip {
   align-items: center;
   justify-content: center;
   gap: var(--tab-icon-gap);
+  min-height: var(--tab-height);
   padding: var(--tab-padding-y) var(--tab-padding-x);
   background: transparent;
   border: none;
@@ -3591,7 +3528,6 @@ figure.chip {
 .tab-trigger:where([data-variant=fill]) {
   border-radius: 12px;
   min-width: 0;
-  padding: var(--tab-padding-y) var(--tab-padding-x);
 }
 
 .tab-trigger:where([data-variant=fill][data-state=active]) {
@@ -3612,6 +3548,23 @@ figure.chip {
 }
 
 /* TODO(table): 스타일을 SOT 토큰 값으로 정의한다. */
+:root {
+  --divider-width: 1px;
+  --divider-height: 12px;
+  --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
+  --divider-margin: var(--spacing-gap-4, 8px);
+}
+
+.divider {
+  width: var(--divider-width);
+  height: var(--divider-height);
+  background-color: var(--divider-color);
+  margin: 0 var(--divider-margin);
+  vertical-align: middle;
+  align-self: center;
+  font-size: 0;
+}
+
 /* 템플릿 레벨 스타일을 통합해 서비스 앱이 단일 엔트리만 import하도록 구성한다. */
 :root {
   --frame-device-height: 812px;