@uniai-fe/uds-primitives 0.4.7 → 0.5.0

package/README.md

@@ -153,6 +153,9 @@ export default function Page() {
 - `Slot.Text`
 - `SlotComponentProps`
 - `SlotTextProps`
+- `Switch`
+- `SwitchProps`
+- `SwitchSize`
 - `TabRoot`
 - `TabList`
 - `TabTrigger`

package/dist/styles.css

@@ -1,16 +1,43 @@
 @charset "UTF-8";
 :root {
-  --theme-badge-height-xsmall: var(--theme-size-small-1, 20px);
-  --theme-badge-height-small: var(--theme-size-small-2, 24px);
-  --theme-badge-padding-inline-xsmall: var(--spacing-padding-3, 6px);
-  --theme-badge-padding-inline-small: var(--spacing-padding-4, 8px);
-  --theme-badge-radius: var(--theme-radius-medium-1, 6px);
-  --theme-badge-font-family: var(--font-caption-medium-family, inherit);
-  --theme-badge-font-size: var(--font-caption-medium-size, 11px);
-  --theme-badge-font-weight: 400;
-  --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
-  --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
-  --theme-badge-dot-size: var(--spacing-gap-3, 8px);
+  --theme-badge-height-xsmall: var(--theme-size-small-1);
+  --theme-badge-height-small: var(--theme-size-small-2);
+  /* 변경: Figma 2421:619 기준 medium 배지 높이 32px를 추가한다. */
+  --theme-badge-height-medium: var(--theme-size-small-3);
+  --theme-badge-padding-inline-xsmall: var(--spacing-padding-3);
+  --theme-badge-padding-inline-small: var(--spacing-padding-4);
+  --theme-badge-padding-inline-medium: var(--spacing-padding-5);
+  --theme-badge-radius-xsmall: var(--theme-radius-medium-1);
+  --theme-badge-radius-small: var(--theme-radius-medium-1);
+  --theme-badge-radius-medium: var(--theme-radius-medium-3);
+  --theme-badge-font-family: var(--font-caption-medium-family);
+  --theme-badge-font-size-xsmall: var(--font-caption-medium-size);
+  --theme-badge-font-size-small: var(--font-caption-large-size);
+  --theme-badge-font-size-medium: var(--font-body-xsmall-size);
+  /* 변경: Figma badge size 축은 모두 Regular(400) 기준으로 고정한다. */
+  --theme-badge-font-weight-xsmall: 400;
+  --theme-badge-font-weight-small: 400;
+  --theme-badge-font-weight-medium: 400;
+  --theme-badge-line-height-xsmall: var(--font-caption-medium-line-height);
+  --theme-badge-line-height-small: var(--font-caption-large-line-height);
+  --theme-badge-line-height-medium: var(--font-body-xsmall-line-height);
+  --theme-badge-letter-spacing-xsmall: var(
+  --font-caption-medium-letter-spacing
+  );
+  --theme-badge-letter-spacing-small: var(--font-caption-large-letter-spacing);
+  --theme-badge-letter-spacing-medium: var(--font-body-xsmall-letter-spacing);
+  /* 변경: Count xsmall은 Figma 1620:844 기준으로 radius 10px를 사용한다. */
+  --theme-badge-count-radius-xsmall: var(--theme-radius-medium-4);
+  --theme-badge-dot-size: var(--spacing-gap-3);
+  --theme-badge-gap: var(--spacing-gap-1);
+  --theme-badge-fill-background-default: var(--color-primary-default);
+  --theme-badge-fill-text-default: var(--color-common-100);
+  --theme-badge-outlined-background-default: var(--color-surface-static-white);
+  --theme-badge-outlined-border-default: var(--color-primary-default);
+  --theme-badge-outlined-text-default: var(--color-primary-default);
+  --theme-badge-dot-background-default: var(--color-primary-default);
+  --theme-badge-count-background-default: var(--color-primary-default);
+  --theme-badge-count-text-default: var(--color-common-100);
   /* layout presets */
   --button-width: fit-content;
   --button-flex: 0 0 auto;
@@ -664,6 +691,56 @@
   --select-multiple-chip-summary-font-weight: 400;
   /* Typography tokens */
   --select-text-font-family: var(--font-body-medium-family);
+  --switch-track-width-small: 48px;
+  --switch-track-height-small: 24px;
+  --switch-track-padding-small: 3px;
+  --switch-handle-size-small: 18px;
+  --switch-track-width-medium: 68px;
+  --switch-track-height-medium: 34px;
+  --switch-track-padding-medium: 2px;
+  --switch-handle-size-medium: 30px;
+  --switch-track-background-unchecked: var(--color-surface-strong);
+  --switch-track-background-checked: var(--color-primary-standard);
+  --switch-thumb-background: var(--color-surface-static-white);
+  --switch-thumb-shadow-unchecked:
+  0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.08);
+  --switch-thumb-shadow-checked:
+  0px 2px 8px rgba(0, 0, 0, 0.08), 0px 0px 4px rgba(0, 0, 0, 0.12);
+  --switch-focus-ring: var(--color-primary-focus);
+  --switch-disabled-opacity: 0.4;
+  --tab-height-small: 40px;
+  --tab-height-medium: 48px;
+  --tab-height-large: 56px;
+  /* 변경: Figma node 1176:834/781/739 기준으로 tab label typography를 exact spec으로 다시 고정한다. */
+  --tab-label-font-size-small: var(--font-label-medium-size);
+  --tab-label-font-weight-small: 700;
+  --tab-label-line-height-small: 1.4;
+  --tab-label-letter-spacing-small: 0px;
+  --tab-label-font-size-medium: var(--font-label-large-size);
+  --tab-label-font-weight-medium: 700;
+  --tab-label-line-height-medium: 1.4;
+  --tab-label-letter-spacing-medium: 0px;
+  --tab-label-font-size-large: var(--font-heading-small-size);
+  --tab-label-font-weight-large: 700;
+  --tab-label-line-height-large: 1.4;
+  --tab-label-letter-spacing-large: 0px;
+  --tab-gap: var(--spacing-gap-2);
+  --tab-root-gap: var(--spacing-gap-3);
+  --tab-padding-y: 10px;
+  --tab-padding-x: var(--spacing-padding-8);
+  --tab-padding-x-small: var(--spacing-padding-4);
+  --tab-icon-gap: 6px;
+  /* 변경: line track은 foundation에 존재하는 assistive border token(#f2f2f3)을 사용한다. */
+  --tab-line-track-color: var(--color-border-assistive);
+  --tab-line-track-height: 1px;
+  --tab-line-indicator-height: 2px;
+  --tab-color-active-default: var(--color-primary-default);
+  --tab-color-active: var(--tab-color-active-default);
+  --tab-color-hover: color-mix(in srgb, var(--tab-color-active), #000 15%);
+  --tab-fill-hover-bg: var(--color-bg-alternative-cool-gray);
+  --tab-fill-active-color: var(--color-common-100);
+  --tab-inactive-color: var(--color-label-alternative);
+  --tab-disabled-opacity: 0.4;
   --table-border-color: var(--color-border-standard-cool-gray);
   --table-line-head-background-color: var(--color-surface-static-cool-gray);
   --table-grid-head-background-color: var(
@@ -785,179 +862,237 @@
   height: 100%;
 }
 
+/* Badge 기본 토큰 래핑 */
 
 
 .badge {
   --badge-height: var(--theme-badge-height-xsmall);
   --badge-padding-inline: var(--theme-badge-padding-inline-xsmall);
-  --badge-gap: var(--spacing-gap-1, 4px);
-  --badge-fill-bg-color: var(--color-primary-default, #1a6aff);
-  --badge-fill-label-color: var(--color-common-100, #ffffff);
-  --badge-outline-border-color: var(--color-primary-default, #1a6aff);
-  --badge-outline-label-color: var(--color-primary-default, #1a6aff);
-  --badge-dot-color: var(--color-primary-default, #1a6aff);
+  --badge-radius: var(--theme-badge-radius-xsmall);
+  --badge-font-size: var(--theme-badge-font-size-xsmall);
+  --badge-font-weight: var(--theme-badge-font-weight-xsmall);
+  --badge-line-height: var(--theme-badge-line-height-xsmall);
+  --badge-letter-spacing: var(--theme-badge-letter-spacing-xsmall);
   --badge-dot-size: var(--theme-badge-dot-size);
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--badge-gap);
+  gap: var(--theme-badge-gap);
+  width: fit-content;
   height: var(--badge-height);
+  margin: 0;
   padding-inline: var(--badge-padding-inline);
   padding-block: 0;
-  border-radius: var(--theme-badge-radius);
   border: 0;
-  font-family: var(--theme-badge-font-family);
-  font-size: var(--theme-badge-font-size);
-  font-weight: var(--theme-badge-font-weight);
-  line-height: 1;
-  letter-spacing: var(--theme-badge-letter-spacing);
-  white-space: nowrap;
   box-sizing: border-box;
-  margin: 0;
-  width: fit-content;
+  border-radius: var(--badge-radius);
+  white-space: nowrap;
+  font-family: var(--theme-badge-font-family);
+  font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  line-height: var(--badge-line-height);
+  letter-spacing: var(--badge-letter-spacing);
 }
 
 .badge:where([data-size=small]) {
   --badge-height: var(--theme-badge-height-small);
   --badge-padding-inline: var(--theme-badge-padding-inline-small);
+  --badge-radius: var(--theme-badge-radius-small);
+  --badge-font-size: var(--theme-badge-font-size-small);
+  --badge-font-weight: var(--theme-badge-font-weight-small);
+  --badge-line-height: var(--theme-badge-line-height-small);
+  --badge-letter-spacing: var(--theme-badge-letter-spacing-small);
+}
+
+.badge:where([data-size=medium]) {
+  --badge-height: var(--theme-badge-height-medium);
+  --badge-padding-inline: var(--theme-badge-padding-inline-medium);
+  --badge-radius: var(--theme-badge-radius-medium);
+  --badge-font-size: var(--theme-badge-font-size-medium);
+  --badge-font-weight: var(--theme-badge-font-weight-medium);
+  --badge-line-height: var(--theme-badge-line-height-medium);
+  --badge-letter-spacing: var(--theme-badge-letter-spacing-medium);
 }
 
+/* 변경: 새 color props를 기본 계약으로 삼고, semantic preset은 style별 selector에서 보정한다. */
 .badge:where([data-style=fill]) {
-  background-color: var(--badge-fill-bg-color);
-  color: var(--badge-fill-label-color);
+  background-color: var(--badge-background-color, var(--theme-badge-fill-background-default));
+  color: var(--badge-text-color, var(--theme-badge-fill-text-default));
   border-color: transparent;
 }
 
 .badge:where([data-style=outlined]) {
-  background-color: var(--color-surface-static-white, #ffffff);
+  background-color: var(--badge-background-color, var(--theme-badge-outlined-background-default));
+  color: var(--badge-text-color, var(--theme-badge-outlined-text-default));
   border-width: 1px;
   border-style: solid;
-  border-color: var(--badge-outline-border-color);
-  color: var(--badge-outline-label-color);
+  border-color: var(--badge-border-color, var(--theme-badge-outlined-border-default));
+}
+
+.badge:where([data-style=count]) {
+  background-color: var(--badge-background-color, var(--theme-badge-count-background-default));
+  color: var(--badge-text-color, var(--theme-badge-count-text-default));
+  border-color: transparent;
+  border-radius: calc(var(--badge-height) / 2);
+}
+
+.badge:where([data-style=count][data-size=xsmall]) {
+  border-radius: var(--theme-badge-count-radius-xsmall);
 }
 
 .badge:where([data-style=dot]) {
-  padding: 0;
-  border-width: 0;
   width: var(--badge-dot-size);
-  height: var(--badge-dot-size);
   min-width: 0;
+  height: var(--badge-dot-size);
+  padding: 0;
+  border-width: 0;
   border-radius: var(--badge-dot-size);
   background-color: transparent;
 }
 
-.badge-dot {
+.badge:where([data-style=dot]) .badge-dot {
   width: var(--badge-dot-size);
   height: var(--badge-dot-size);
-  border-radius: 999px;
-  background-color: var(--badge-dot-color);
   flex-shrink: 0;
+  border-radius: 999px;
+  background-color: var(--badge-background-color, var(--theme-badge-dot-background-default));
 }
 
-.badge-label {
-  display: inline-flex;
+.badge :where(.badge-label) {
+  display: flex;
   align-items: center;
   color: inherit;
-  line-height: 1;
+  line-height: inherit;
 }
 
 .badge:where([data-style=dot]) .badge-label {
-  font-size: 0;
-  line-height: 0;
-  height: 0;
   width: 0;
+  height: 0;
   overflow: hidden;
+  font-size: 0;
+  line-height: 0;
+}
+
+.badge:where([data-style=fill][data-preset=primary]) {
+  --badge-background-color: var(--color-primary-default);
+  --badge-text-color: var(--color-common-100);
+}
+
+.badge:where([data-style=fill][data-preset=secondary]) {
+  --badge-background-color: var(--color-secondary-default);
+  --badge-text-color: var(--color-primary-default);
+}
+
+.badge:where([data-style=fill][data-preset=tertiary]) {
+  --badge-background-color: var(--color-cool-gray-10);
+  --badge-text-color: var(--color-common-100);
+}
+
+.badge:where([data-style=fill][data-preset=gray]) {
+  --badge-background-color: var(--color-surface-neutral);
+  --badge-text-color: var(--color-label-neutral);
+}
+
+.badge:where([data-style=fill][data-preset=green]) {
+  --badge-background-color: var(--color-green-95);
+  --badge-text-color: var(--color-green-45);
+}
+
+.badge:where([data-style=fill][data-preset=yellow]) {
+  --badge-background-color: var(--color-yellow-95);
+  --badge-text-color: var(--color-yellow-45);
+}
+
+.badge:where([data-style=fill][data-preset=orange]) {
+  --badge-background-color: var(--color-orange-95);
+  --badge-text-color: var(--color-orange-55);
 }
 
-/* fill intent 별 배경/라벨 컬러 정의 */
-.badge:where([data-style=fill][data-intent=primary]) {
-  --badge-fill-bg-color: var(--color-primary-default, #1a6aff);
-  --badge-fill-label-color: var(--color-common-100, #ffffff);
+.badge:where([data-style=fill][data-preset=red]) {
+  --badge-background-color: var(--color-red-95);
+  --badge-text-color: var(--color-red-55);
 }
 
-.badge:where([data-style=fill][data-intent=secondary]) {
-  --badge-fill-bg-color: var(--color-secondary-default, #e5eeff);
-  --badge-fill-label-color: var(--color-primary-default, #1a6aff);
+.badge:where([data-style=outlined][data-preset=primary]) {
+  --badge-border-color: var(--color-primary-default);
+  --badge-text-color: var(--color-primary-default);
 }
 
-.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);
+.badge:where([data-style=outlined][data-preset=secondary]) {
+  --badge-border-color: var(--color-border-standard-blue);
+  --badge-text-color: var(--color-primary-strong);
 }
 
-.badge:where([data-style=fill][data-intent=gray]) {
-  --badge-fill-bg-color: var(--color-surface-neutral, #f2f2f2);
-  --badge-fill-label-color: var(--color-label-neutral, #797e86);
+.badge:where([data-style=outlined][data-preset=tertiary]) {
+  --badge-border-color: var(--color-border-heavy);
+  --badge-text-color: var(--color-label-strong);
 }
 
-.badge:where([data-style=fill][data-intent=green]) {
-  --badge-fill-bg-color: var(--color-green-95, #e9fcef);
-  --badge-fill-label-color: var(--color-green-45, #1dc956);
+.badge:where([data-style=outlined][data-preset=gray]) {
+  --badge-border-color: var(--color-border-assistive);
+  --badge-text-color: var(--color-label-standard);
 }
 
-.badge:where([data-style=fill][data-intent=yellow]) {
-  --badge-fill-bg-color: var(--color-yellow-95, #fefae7);
-  --badge-fill-label-color: var(--color-yellow-45, #dab80b);
+.badge:where([data-style=outlined][data-preset=green]) {
+  --badge-border-color: var(--color-green-45);
+  --badge-text-color: var(--color-green-45);
 }
 
-.badge:where([data-style=fill][data-intent=orange]) {
-  --badge-fill-bg-color: var(--color-orange-95, #ffeee5);
-  --badge-fill-label-color: var(--color-orange-55, #ff661a);
+.badge:where([data-style=outlined][data-preset=yellow]) {
+  --badge-border-color: var(--color-yellow-60);
+  --badge-text-color: var(--color-yellow-45);
 }
 
-.badge:where([data-style=fill][data-intent=red]) {
-  --badge-fill-bg-color: var(--color-red-95, #fde8e7);
-  --badge-fill-label-color: var(--color-red-55, #f43625);
+.badge:where([data-style=outlined][data-preset=orange]) {
+  --badge-border-color: var(--color-orange-70);
+  --badge-text-color: var(--color-orange-55);
 }
 
-/* outlined intent 별 border/label 컬러 정의 */
-.badge:where([data-style=outlined][data-intent=primary]) {
-  --badge-outline-border-color: var(--color-primary-default, #1a6aff);
-  --badge-outline-label-color: var(--color-primary-default, #1a6aff);
+.badge:where([data-style=outlined][data-preset=red]) {
+  --badge-border-color: var(--color-red-70);
+  --badge-text-color: var(--color-red-55);
 }
 
-.badge:where([data-style=outlined][data-intent=secondary]) {
-  --badge-outline-border-color: var(--color-border-standard-blue, #ccdeff);
-  --badge-outline-label-color: var(--color-primary-strong, #0050e5);
+.badge:where([data-style=count][data-preset=primary]) {
+  --badge-background-color: var(--color-primary-default);
+  --badge-text-color: var(--color-common-100);
 }
 
-.badge:where([data-style=outlined][data-intent=tertiary]) {
-  --badge-outline-border-color: var(--color-border-heavy, #313235);
-  --badge-outline-label-color: var(--color-label-strong, #18191b);
+.badge:where([data-style=count][data-preset=gray]) {
+  --badge-background-color: var(--color-cool-gray-90);
+  --badge-text-color: var(--color-label-standard);
 }
 
-.badge:where([data-style=outlined][data-intent=gray]) {
-  --badge-outline-border-color: var(--color-border-assistive, #e4e5e7);
-  --badge-outline-label-color: var(--color-label-standard, #3d3f43);
+.badge:where([data-style=dot][data-preset=primary]) {
+  --badge-background-color: var(--color-primary-default);
 }
 
-.badge:where([data-style=outlined][data-intent=green]) {
-  --badge-outline-border-color: var(--color-green-45, #1dc956);
-  --badge-outline-label-color: var(--color-green-45, #1dc956);
+.badge:where([data-style=dot][data-preset=secondary]) {
+  --badge-background-color: var(--color-secondary-default);
 }
 
-.badge:where([data-style=outlined][data-intent=yellow]) {
-  --badge-outline-border-color: var(--color-yellow-60, #f5d63d);
-  --badge-outline-label-color: var(--color-yellow-45, #dab80b);
+.badge:where([data-style=dot][data-preset=tertiary]) {
+  --badge-background-color: var(--color-cool-gray-10);
 }
 
-.badge:where([data-style=outlined][data-intent=orange]) {
-  --badge-outline-border-color: var(--color-orange-70, #ff9966);
-  --badge-outline-label-color: var(--color-orange-55, #ff661a);
+.badge:where([data-style=dot][data-preset=gray]) {
+  --badge-background-color: var(--color-cool-gray-90);
 }
 
-.badge:where([data-style=outlined][data-intent=red]) {
-  --badge-outline-border-color: var(--color-red-70, #f7796e);
-  --badge-outline-label-color: var(--color-red-55, #f43625);
+.badge:where([data-style=dot][data-preset=green]) {
+  --badge-background-color: var(--color-green-45);
 }
 
-/* dot tone 별 포인트 컬러 */
-.badge:where([data-style=dot][data-tone=primary]) {
-  --badge-dot-color: var(--color-primary-default, #1a6aff);
+.badge:where([data-style=dot][data-preset=yellow]) {
+  --badge-background-color: var(--color-yellow-45);
 }
 
-.badge:where([data-style=dot][data-tone=feedback]) {
-  --badge-dot-color: var(--color-red-55, #f43625);
+.badge:where([data-style=dot][data-preset=orange]) {
+  --badge-background-color: var(--color-orange-55);
+}
+
+.badge:where([data-style=dot][data-preset=red]) {
+  --badge-background-color: var(--color-red-55);
 }
 
 /* 버튼 전용 토큰은 theme root에서 한 번만 정의하며, size 기반 규칙(--button-{type}-{property}-{size})을 따른다. */
@@ -4299,52 +4434,103 @@ figure.chip {
   stroke: var(--select-icon-fill);
 }
 
+
+
+.switch {
+  --switch-track-width: var(--switch-track-width-small);
+  --switch-track-height: var(--switch-track-height-small);
+  --switch-track-padding: var(--switch-track-padding-small);
+  --switch-handle-size: var(--switch-handle-size-small);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: var(--switch-track-width);
+  min-width: var(--switch-track-width);
+  height: var(--switch-track-height);
+  padding: var(--switch-track-padding);
+  border: none;
+  border-radius: 999px;
+  background-color: var(--switch-track-background-unchecked);
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+}
+
+.switch:where([data-size=medium]) {
+  --switch-track-width: var(--switch-track-width-medium);
+  --switch-track-height: var(--switch-track-height-medium);
+  --switch-track-padding: var(--switch-track-padding-medium);
+  --switch-handle-size: var(--switch-handle-size-medium);
+}
+
+.switch:where([data-state=checked]) {
+  background-color: var(--switch-track-background-checked);
+}
+
+.switch:where(:focus-visible) {
+  box-shadow: 0 0 0 2px var(--switch-focus-ring);
+}
+
+.switch:where(:disabled) {
+  cursor: not-allowed;
+  opacity: var(--switch-disabled-opacity);
+}
+
+.switch-handle {
+  display: flex;
+  width: var(--switch-handle-size);
+  min-width: var(--switch-handle-size);
+  height: var(--switch-handle-size);
+  border-radius: 999px;
+  background-color: var(--switch-thumb-background);
+  box-shadow: var(--switch-thumb-shadow-unchecked);
+  transition: transform 0.2s ease;
+}
+
+.switch:where([data-state=checked]) .switch-handle {
+  /* 변경: handle 이동 거리는 frame width - handle size - 양쪽 padding 합으로 고정한다. */
+  box-shadow: var(--switch-thumb-shadow-checked);
+  transform: translateX(calc(var(--switch-track-width) - var(--switch-handle-size) - var(--switch-track-padding) * 2));
+}
+
+
+
 .tab-root {
-  /* 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: 1.4;
-  --tab-label-letter-spacing: 0px;
-  --tab-gap: var(--spacing-gap-2, 8px);
-  --tab-padding-y: 10px;
-  --tab-padding-x: var(--spacing-padding-8, 24px);
-  --tab-icon-gap: 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);
-  --tab-color-hover: color-mix(in srgb, var(--tab-color-active), #000 15%);
-  --tab-line-hover-color: var(--tab-color-hover, var(--tab-color-active));
-  --tab-fill-hover-bg: var(--color-bg-alternative-cool-gray, #f2f2f3);
-  --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;
+  --tab-height: var(--tab-height-medium);
+  --tab-label-font-size: var(--tab-label-font-size-medium);
+  --tab-label-font-weight: var(--tab-label-font-weight-medium);
+  --tab-label-line-height: var(--tab-label-line-height-medium);
+  --tab-label-letter-spacing: var(--tab-label-letter-spacing-medium);
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-3);
+  gap: var(--tab-root-gap);
 }
 
 .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-height: var(--tab-height-small);
+  --tab-label-font-size: var(--tab-label-font-size-small);
+  --tab-label-font-weight: var(--tab-label-font-weight-small);
+  --tab-label-line-height: var(--tab-label-line-height-small);
+  --tab-label-letter-spacing: var(--tab-label-letter-spacing-small);
+  --tab-padding-x: var(--tab-padding-x-small);
 }
 
 .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-height: var(--tab-height-medium);
+  --tab-label-font-size: var(--tab-label-font-size-medium);
+  --tab-label-font-weight: var(--tab-label-font-weight-medium);
+  --tab-label-line-height: var(--tab-label-line-height-medium);
+  --tab-label-letter-spacing: var(--tab-label-letter-spacing-medium);
+  --tab-padding-x: var(--spacing-padding-8);
 }
 
 .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-height: var(--tab-height-large);
+  --tab-label-font-size: var(--tab-label-font-size-large);
+  --tab-label-font-weight: var(--tab-label-font-weight-large);
+  --tab-label-line-height: var(--tab-label-line-height-large);
+  --tab-label-letter-spacing: var(--tab-label-letter-spacing-large);
+  --tab-padding-x: var(--spacing-padding-8);
 }
 
 .tab-list {
@@ -4379,7 +4565,7 @@ figure.chip {
 }
 
 .tab-trigger:where(:focus-visible) {
-  outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
+  outline: 2px solid var(--color-primary-default);
   outline-offset: 2px;
 }
 
@@ -4415,7 +4601,7 @@ figure.chip {
   content: "";
   position: absolute;
   inset: auto 0 0;
-  height: var(--tab-line-track-height, 1px);
+  height: var(--tab-line-track-height);
   background: var(--tab-line-track-color);
   z-index: 0;
 }
@@ -4429,8 +4615,9 @@ figure.chip {
   position: absolute;
   left: 0;
   right: 0;
-  bottom: -1px;
-  height: var(--tab-line-indicator-height, 2px);
+  /* 변경: scroll container에서 vertical overflow clip 리스크를 피하기 위해 indicator를 내부 바닥에 붙인다. */
+  bottom: 0;
+  height: var(--tab-line-indicator-height);
   background: transparent;
   transform: scaleX(0);
   transform-origin: center;
@@ -4448,7 +4635,7 @@ figure.chip {
 }
 
 .tab-trigger:where([data-variant=line]):where(:not([data-state=active])):hover .tab-trigger-label {
-  color: var(--tab-line-hover-color);
+  color: var(--tab-color-hover);
 }
 
 .tab-list:where([data-variant=fill]) {
@@ -4468,8 +4655,8 @@ figure.chip {
 }
 
 .tab-trigger:where([data-variant=fill]) {
-  border-radius: 12px;
   min-width: 0;
+  border-radius: 12px;
 }
 
 .tab-trigger:where([data-variant=fill][data-state=active]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/badge/index.tsx

@@ -1,12 +1,10 @@
 /**
  * Badge; status/info label 렌더링 카테고리 배럴
  * @desc
- * - `Badge`: size/style/intent/tone 축을 렌더링하는 단일 leaf 컴포넌트다.
+ * - `Badge`: size/style와 색상 props를 렌더링하는 단일 leaf 컴포넌트다.
  * - `BadgeProps`: badge public props 계약이다.
  */
 import "./index.scss";
 
 export * from "./markup";
-export * from "./hooks";
 export type * from "./types";
-export * from "./utils";