@uniai-fe/uds-primitives 0.4.7 → 0.4.8

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,39 @@
   --select-multiple-chip-summary-font-weight: 400;
   /* Typography tokens */
   --select-text-font-family: var(--font-body-medium-family);
+  --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 +845,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);
+}
+
+.badge:where([data-style=fill][data-preset=red]) {
+  --badge-background-color: var(--color-red-95);
+  --badge-text-color: var(--color-red-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=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=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=secondary]) {
+  --badge-border-color: var(--color-border-standard-blue);
+  --badge-text-color: var(--color-primary-strong);
 }
 
-.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=tertiary]) {
+  --badge-border-color: var(--color-border-heavy);
+  --badge-text-color: var(--color-label-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=gray]) {
+  --badge-border-color: var(--color-border-assistive);
+  --badge-text-color: var(--color-label-standard);
 }
 
-.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=green]) {
+  --badge-border-color: var(--color-green-45);
+  --badge-text-color: var(--color-green-45);
 }
 
-.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=yellow]) {
+  --badge-border-color: var(--color-yellow-60);
+  --badge-text-color: var(--color-yellow-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=orange]) {
+  --badge-border-color: var(--color-orange-70);
+  --badge-text-color: var(--color-orange-55);
 }
 
-.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=red]) {
+  --badge-border-color: var(--color-red-70);
+  --badge-text-color: var(--color-red-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=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=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=gray]) {
+  --badge-background-color: var(--color-cool-gray-90);
+  --badge-text-color: var(--color-label-standard);
 }
 
-.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=dot][data-preset=primary]) {
+  --badge-background-color: var(--color-primary-default);
 }
 
-.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=secondary]) {
+  --badge-background-color: var(--color-secondary-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=tertiary]) {
+  --badge-background-color: var(--color-cool-gray-10);
 }
 
-.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=gray]) {
+  --badge-background-color: var(--color-cool-gray-90);
 }
 
-.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=green]) {
+  --badge-background-color: var(--color-green-45);
 }
 
-.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=yellow]) {
+  --badge-background-color: var(--color-yellow-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=orange]) {
+  --badge-background-color: var(--color-orange-55);
 }
 
-.badge:where([data-style=dot][data-tone=feedback]) {
-  --badge-dot-color: var(--color-red-55, #f43625);
+.badge:where([data-style=dot][data-preset=red]) {
+  --badge-background-color: var(--color-red-55);
 }
 
 /* 버튼 전용 토큰은 theme root에서 한 번만 정의하며, size 기반 규칙(--button-{type}-{property}-{size})을 따른다. */
@@ -4299,52 +4417,45 @@ figure.chip {
   stroke: var(--select-icon-fill);
 }
 
+
+
 .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 +4490,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 +4526,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 +4540,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 +4560,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 +4580,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.4.8",
   "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";

package/src/components/badge/markup/Badge.tsx

@@ -1,22 +1,24 @@
+import clsx from "clsx";
 import { forwardRef } from "react";
+import type { CSSProperties } from "react";
 import type { BadgeProps } from "../types";
-import { composeBadgeClassName } from "../utils";
 import { Slot } from "../../slot";
 
 /**
  * Badge; status/info label 렌더링 leaf 컴포넌트
  * @component
  * @param {BadgeProps} props
- * @param {"xsmall" | "small"} [props.size="xsmall"] 토큰 size 축이다.
- * @param {"fill" | "outlined" | "dot"} [props.style="fill"] 시각 스타일 축이다.
- * @param {"primary" | "secondary" | "tertiary" | "gray" | "green" | "yellow" | "orange" | "red"} [props.intent="primary"]
- *  fill/outlined 스타일에서 사용되는 intent 축이다.
- * @param {"primary" | "feedback"} [props.tone="primary"] dot 스타일 전용 tone 축이다.
+ * @param {"xsmall" | "small" | "medium"} [props.size="xsmall"] 토큰 size 축이다.
+ * @param {"fill" | "outlined" | "dot" | "count"} [props.style="fill"] 시각 스타일 축이다.
+ * @param {"primary" | "secondary" | "tertiary" | "gray" | "green" | "yellow" | "orange" | "red"} [props.preset] style에 대응하는 semantic 색상 preset이다.
+ * @param {string} [props.textColor] 라벨 텍스트 색상 CSS 값 또는 토큰 참조 문자열이다.
+ * @param {string} [props.backgroundColor] 배경 또는 dot 색상 CSS 값 또는 토큰 참조 문자열이다.
+ * @param {string} [props.borderColor] 외곽선 색상 CSS 값 또는 토큰 참조 문자열이다.
  * @param {React.ReactNode} [props.children] 라벨 텍스트다. dot 스타일에서 생략하면 점만 렌더링한다.
  * @param {string} [props.className] figure root className override다.
  * @param {React.CSSProperties} [props.inlineStyle] figure root inline style이다.
  * @example
- * <Badge style="fill" intent="primary">승인됨</Badge>
+ * <Badge style="fill" backgroundColor="var(--color-primary-default)" textColor="var(--color-common-100)">승인됨</Badge>
  */
 const Badge = forwardRef<HTMLElementTagNameMap["figure"], BadgeProps>(
   (
@@ -24,33 +26,42 @@ const Badge = forwardRef<HTMLElementTagNameMap["figure"], BadgeProps>(
       children,
       size = "xsmall",
       style = "fill",
-      intent = "primary",
-      tone = "primary",
+      preset,
+      textColor,
+      backgroundColor,
+      borderColor,
       className,
       inlineStyle,
       ...restProps
     },
     ref,
   ) => {
-    const combinedClassName = composeBadgeClassName({ size, style, className });
+    // 변경: size/style 상태는 data-*로만 표현하고 root className은 leaf override만 남긴다.
+    const combinedClassName = clsx("badge", className);
+    // 변경: color props는 preset selector보다 우선하도록 CSS variable을 직접 주입한다.
+    const colorStyle = {
+      ...inlineStyle,
+      ...(textColor ? { "--badge-text-color": textColor } : null),
+      ...(backgroundColor
+        ? { "--badge-background-color": backgroundColor }
+        : null),
+      ...(borderColor ? { "--badge-border-color": borderColor } : null),
+    } as CSSProperties;
     // dot 스타일은 실제 원형 포인트 요소를 별도로 렌더링한다.
     const renderDot =
       style === "dot" ? (
         <span className="badge-dot" aria-hidden="true" />
       ) : null;
-    const hasLabel = Boolean(children);
 
     return (
       <figure
         {...restProps}
         ref={ref}
         className={combinedClassName}
-        style={inlineStyle}
+        style={colorStyle}
         data-size={size}
         data-style={style}
-        data-intent={style === "dot" ? undefined : intent}
-        data-tone={style === "dot" ? tone : undefined}
-        data-has-label={hasLabel ? "true" : undefined}
+        data-preset={preset}
       >
         {renderDot}
         {/* 변경: badge 라벨 텍스트 래핑 규칙을 Slot.Text로 통일한다. */}