@nexus-cross/design-system 2.0.0 → 2.0.2

package/dist/styles.layered.css

@@ -342,10 +342,12 @@
   gap: 0.25rem;
 }
 .nexus-text-input-field__label {
-  font-size: var(--text-text-sm, 0.875rem);
-  font-weight: 600;
-  color: var(--color-text-muted);
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈/색상. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   line-height: 1;
+  color: var(--color-text-tertiary);
 }
 .nexus-text-input-field__footer {
   display: flex;
@@ -354,7 +356,7 @@
 }
 .nexus-text-input-field__description {
   font-size: var(--text-text-xs, 0.75rem);
-  color: var(--color-text-muted);
+  color: var(--color-text-tertiary);
   line-height: 1.5;
   letter-spacing: -0.12px;
 }
@@ -363,7 +365,7 @@
 }
 .nexus-text-input-field__count {
   font-size: var(--text-text-xs, 0.75rem);
-  color: var(--color-text-muted);
+  color: var(--color-text-tertiary);
   margin-left: auto;
   flex-shrink: 0;
 }
@@ -487,8 +489,10 @@
   gap: 0.5rem;
 }
 .nexus-price-input-field__label {
-  font-size: var(--text-text-sm, 0.875rem);
-  font-weight: 600;
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   color: var(--color-text-tertiary);
   line-height: 1;
 }
@@ -645,8 +649,10 @@
   gap: 0.25rem;
 }
 .nexus-textarea-field__label {
-  font-size: var(--text-label-semibold-md, 0.875rem);
-  font-weight: 600;
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   color: var(--color-text-tertiary);
   line-height: 1;
 }
@@ -792,8 +798,10 @@
   margin-bottom: 4px;
 }
 .nexus-number-input__label {
-  font-size: var(--text-label-semibold-md, 0.875rem);
-  font-weight: var(--font-weight-label-semibold-md, 600);
+  /* label-semibold-sm 토큰 기준 (12px / 600). TextInput과 동일한 라벨 사이즈로 sync. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   line-height: 1;
   color: var(--color-text-tertiary);
 }
@@ -896,7 +904,6 @@
   border: none;
   background: transparent;
   outline: none;
-  font-size: var(--text-label-lg, 1rem);
   font-weight: var(--font-weight-label-lg, 500);
   line-height: 1;
   color: var(--color-text-primary);
@@ -912,26 +919,82 @@
   cursor: not-allowed;
 }
 
-/* ── Size: field padding (basic) ── */
-.nexus-number-input--basic.nexus-number-input--lg .nexus-number-input__field {
-  padding: var(--spacing-padding-sm, 0.75rem);
+/* ── Size: field padding + font-size ──
+ * TextInput과 동일한 사이즈 체계 (md / lg / xl).
+ * basic, bind 변형 모두 동일 padding/font를 사용 (variant는 좌우 컨트롤만 다름).
+ *
+ * :where()로 명시도 0 — 외부 className의 height/padding/font utility(`h-12`, `py-3`, `text-base`)
+ * 가 항상 우선해서 사이즈 오버라이드가 자연스럽게 동작한다.
+ */
+:where(.nexus-number-input--md) .nexus-number-input__field {
+  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
 }
-.nexus-number-input--basic.nexus-number-input--xl .nexus-number-input__field {
-  padding: var(--spacing-padding-md, 1rem);
+:where(.nexus-number-input--lg) .nexus-number-input__field {
+  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+:where(.nexus-number-input--xl) .nexus-number-input__field {
+  padding: calc(var(--spacing-padding-md, 1rem) - 1px) var(--spacing-padding-md, 1rem);
+  font-size: var(--text-text-base, 1rem);
+}
+
+/* ── Prefix / Suffix icon (text or ReactNode) ──
+ * basic / bind variant 모두 공통.
+ * field padding과 자연스럽게 이어지도록 padding-inline은 size별 :where() 규칙 참고.
+ * 좌측 prefix는 field 좌측 padding을 줄여서 visual gap 통일.
+ */
+.nexus-number-input__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  font-size: inherit;
+  line-height: 1;
+  user-select: none;
+  pointer-events: none;
+}
+:where(.nexus-number-input--md) .nexus-number-input__icon {
+  padding-inline-start: var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+:where(.nexus-number-input--lg) .nexus-number-input__icon {
+  padding-inline-start: var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+:where(.nexus-number-input--xl) .nexus-number-input__icon {
+  padding-inline-start: var(--spacing-padding-md, 1rem);
+  font-size: var(--text-text-base, 1rem);
+}
+:where(.nexus-number-input__icon--suffix) {
+  padding-inline-start: 0;
+  padding-inline-end: var(--spacing-padding-sm, 0.75rem);
+}
+:where(.nexus-number-input--xl .nexus-number-input__icon--suffix) {
+  padding-inline-end: var(--spacing-padding-md, 1rem);
+}
+/* prefix가 있으면 field 좌측 padding을 한번만 가지도록 (icon이 좌측 패딩 담당) */
+:where(.nexus-number-input__icon--prefix) ~ .nexus-number-input__field {
+  padding-inline-start: var(--spacing-padding-xs, 0.5rem);
+}
+.nexus-number-input--disabled .nexus-number-input__icon {
+  color: var(--color-text-muted);
 }
 
-/* ── Size: field padding (bind) ── */
+/* ── Bind variant: 좌우 ± 버튼이 들어갈 자리 ── */
 .nexus-number-input--bind .nexus-number-input__container {
   padding-inline: var(--spacing-padding-xs, 0.5rem);
 }
 .nexus-number-input--bind .nexus-number-input__field {
   text-align: center;
 }
-.nexus-number-input--bind.nexus-number-input--lg .nexus-number-input__field {
-  padding: var(--spacing-padding-sm, 0.75rem);
+/* bind variant에서는 ± 버튼이 padding 역할이므로 icon padding 살짝만 */
+.nexus-number-input--bind .nexus-number-input__icon {
+  padding-inline-start: var(--spacing-padding-2xs, 0.25rem);
 }
-.nexus-number-input--bind.nexus-number-input--xl .nexus-number-input__field {
-  padding: var(--spacing-padding-md, 1rem) var(--spacing-padding-sm, 0.75rem);
+.nexus-number-input--bind .nexus-number-input__icon--suffix {
+  padding-inline-start: 0;
+  padding-inline-end: var(--spacing-padding-2xs, 0.25rem);
 }
 
 /* ── Basic variant: chevron buttons column ── */
@@ -1005,7 +1068,17 @@
   color: var(--color-text-muted);
   cursor: not-allowed;
 }
-.nexus-number-input--xl .nexus-number-input__bind-btn {
+/* bind ± 버튼: 사이즈별로 가시 영역이 자연스럽게 늘어나도록.
+ * :where()로 명시도 0 — 외부 className으로 버튼 크기도 오버라이드 가능. */
+:where(.nexus-number-input--md) .nexus-number-input__bind-btn {
+  width: 20px;
+  height: 20px;
+}
+:where(.nexus-number-input--lg) .nexus-number-input__bind-btn {
+  width: 24px;
+  height: 24px;
+}
+:where(.nexus-number-input--xl) .nexus-number-input__bind-btn {
   width: 30px;
   height: 30px;
 }
@@ -1829,6 +1902,15 @@
   border-radius: var(--radius-corner-lg, 0.5rem);
   padding: 0.25rem;
 }
+/* fullWidth: 모든 트리거를 균등 분할해서 부모 너비를 채움. :where()로 specificity 0
+   → 사용처에서 className(w-*, flex-*)으로 자유롭게 오버라이드 가능. */
+:where(.nexus-tab-list--full-width) {
+  width: 100%;
+}
+:where(.nexus-tab-list--full-width) .nexus-tab-trigger {
+  flex: 1;
+  justify-content: center;
+}
 .nexus-tab-trigger {
   position: relative;
   display: inline-flex;
@@ -1916,7 +1998,10 @@
 
 .nexus-spinner {
   animation: nexus-spin 1s linear infinite;
-  color: currentColor;
+}
+/* default color: brand primary (semantic). :where()로 specificity 0 → 외부 className(text-*, color)이 항상 우선 override 가능. */
+:where(.nexus-spinner) {
+  color: var(--color-accent-primary);
 }
 
 /* ═══════════════════════════════════════════
@@ -2142,16 +2227,17 @@
 .nexus-select-trigger--outline {
   background: var(--color-surface-default);
 }
-.nexus-select-trigger--sm {
+/* size variant width: :where() 로 명시도 0 — 외부 className 의 w- / min-w- / max-w- 유틸이 항상 우선. */
+:where(.nexus-select-trigger--sm) {
   width: 4rem;
 }
-.nexus-select-trigger--md {
+:where(.nexus-select-trigger--md) {
   width: 8rem;
 }
-.nexus-select-trigger--lg {
+:where(.nexus-select-trigger--lg) {
   width: 12rem;
 }
-.nexus-select-trigger--full {
+:where(.nexus-select-trigger--full) {
   width: 100%;
 }
 .nexus-select-trigger--justify-end {
@@ -2227,17 +2313,19 @@
     transform: translateY(-4px) scaleY(0.96);
   }
 }
-.nexus-select-content--sm {
-  width: 4rem;
-}
-.nexus-select-content--md {
-  width: 8rem;
-}
-.nexus-select-content--lg {
-  width: 12rem;
-}
-.nexus-select-content--full {
+/* Content는 size variant와 무관하게 항상 trigger 너비를 추종한다.
+ * - size는 트리거 크기만 결정. content는 anchor-width로 자동 동기화 → 외부 className으로
+ *   Select 하나만 늘리면 드롭다운/Item도 자연스럽게 같이 늘어난다.
+ * - SelectItem이 anchor-width보다 더 크면 min-width가 그대로라 content가 자식 너비만큼 자연
+ *   확장된다.
+ * - 별도 너비를 원하면 `contentClassName`으로 명시적으로 오버라이드 (외부 className은 :where()
+ *   덕분에 항상 우선). */
+:where(.nexus-select-content--sm),
+:where(.nexus-select-content--md),
+:where(.nexus-select-content--lg),
+:where(.nexus-select-content--full) {
   width: var(--radix-popper-anchor-width);
+  min-width: var(--radix-popper-anchor-width);
 }
 .nexus-select-viewport {
   padding: 0.25rem;
@@ -2246,7 +2334,6 @@
 .nexus-select-item {
   position: relative;
   display: flex;
-  width: 100%;
   cursor: pointer;
   align-items: center;
   border-radius: var(--radius-corner-sm, 0.25rem);
@@ -2258,6 +2345,10 @@
   outline: none;
   user-select: none;
 }
+/* width 만 :where()로 명시도 0 — 외부 className 의 w-* 가 항상 우선. */
+:where(.nexus-select-item) {
+  width: 100%;
+}
 .nexus-select-item:hover,
 .nexus-select-item:focus,
 .nexus-select-item[data-highlighted] {
@@ -4580,6 +4671,53 @@
   height: 16px;
 }
 
+/* ─── ImageUpload: previewMode="cover" — 박스 가득 채우는 풀 이미지 ─── */
+.nexus-image-upload--preview-cover {
+  position: relative;
+  display: block;
+  padding: 0;
+  border: 1px solid var(--color-border-default);
+  border-style: solid;
+  background: var(--color-surface-strong);
+  cursor: pointer;
+  /* X 버튼이 모서리 밖으로 살짝 튀어나올 수 있도록 visible. 이미지는 아래 clip wrapper가 라운드 처리. */
+  overflow: visible;
+}
+.nexus-image-upload--preview-cover:hover {
+  border-color: var(--color-border-default-hover);
+  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
+}
+/* 이미지 클리핑 — 박스 border-radius와 동일하게 라운드. */
+.nexus-image-upload__preview-cover-clip {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: var(--radius-corner-md, 8px);
+}
+.nexus-image-upload__preview-cover-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  pointer-events: none;
+}
+.nexus-image-upload__preview-cover-img--contain {
+  object-fit: contain;
+}
+/* cover 모드의 X 버튼 — card preview와 동일하게 우측 상단 모서리에 걸치는 형태. */
+.nexus-image-upload__remove--cover {
+  top: -6px;
+  right: -6px;
+  background: var(--color-surface-inverted);
+  color: var(--color-icon-inverted);
+}
+.nexus-image-upload__remove--cover:hover {
+  opacity: 0.85;
+  background: var(--color-surface-inverted);
+}
+
 .nexus-image-upload__info {
   display: flex;
   flex-direction: column;
@@ -4617,10 +4755,11 @@
   gap: var(--spacing-gap-xs, 0.25rem);
 }
 .nexus-image-upload-field__label {
-  font-size: var(--text-label-semibold-md);
-  font-weight: var(--font-weight-label-semibold-md, 600);
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
   line-height: 1;
-  letter-spacing: var(--letter-spacing-label-semibold-md, 0);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   color: var(--color-text-tertiary);
 }
 .nexus-image-upload-field__description {
@@ -4831,8 +4970,10 @@
   gap: var(--spacing-gap-xs, 0.25rem);
 }
 .nexus-combobox-field__label {
-  font-size: var(--text-label-semibold-md);
-  font-weight: var(--font-weight-label-semibold-md, 600);
+  /* label-semibold-sm 토큰 기준 (12px / 600). 다른 input 컴포넌트들과 sync된 라벨 사이즈. */
+  font-size: var(--text-label-semibold-sm, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  letter-spacing: var(--letter-spacing-label-semibold-sm, 0);
   line-height: 1;
   color: var(--color-text-tertiary);
 }

package/dist/styles.mjs

@@ -1,4 +1,4 @@
-import { built_default } from './chunks/chunk-QWK4CLS2.mjs';
+import { built_default } from './chunks/chunk-3NSJMG3G.mjs';
 
 // src/styles/inject.ts
 var STYLE_ID = "__nexus-ds__";

package/dist/tab.js

@@ -1,19 +1,19 @@
 'use strict';
 
-var chunk2ZXDXO4I_js = require('./chunks/chunk-2ZXDXO4I.js');
+var chunkVDEB5BMT_js = require('./chunks/chunk-VDEB5BMT.js');
 require('./chunks/chunk-CZC76ZD5.js');
 
 
 
 Object.defineProperty(exports, "Tab", {
   enumerable: true,
-  get: function () { return chunk2ZXDXO4I_js.Tab; }
+  get: function () { return chunkVDEB5BMT_js.Tab; }
 });
 Object.defineProperty(exports, "tabListVariants", {
   enumerable: true,
-  get: function () { return chunk2ZXDXO4I_js.tabListVariants; }
+  get: function () { return chunkVDEB5BMT_js.tabListVariants; }
 });
 Object.defineProperty(exports, "tabTriggerVariants", {
   enumerable: true,
-  get: function () { return chunk2ZXDXO4I_js.tabTriggerVariants; }
+  get: function () { return chunkVDEB5BMT_js.tabTriggerVariants; }
 });

package/dist/tab.mjs

@@ -1,2 +1,2 @@
-export { Tab, tabListVariants, tabTriggerVariants } from './chunks/chunk-QZ4QR3XV.mjs';
+export { Tab, tabListVariants, tabTriggerVariants } from './chunks/chunk-ATZE57ZO.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/tokens/TOKENS.md

@@ -133,12 +133,14 @@ const { semantic } = getTheme("dark");
 | `bg-status-success-disabled` | `--color-status-success-disabled` | Success - disabled | `#CDF4EA` | `#0D4431` |
 | `bg-status-success-intense` | `--color-status-success-intense` | Success - intense | `#1B9674` | `#0BDFA5` |
 | `bg-status-success-dim` | `--color-status-success-dim` | Success - dim | `#9FECD7` | `#1B9674` |
+| `bg-status-success-bg` | `--color-status-success-bg` |  | `#EAFAF6` | `#06261B` |
 | `bg-status-warning` | `--color-status-warning` | Warning | `#FF9D00` | `#FFAA00` |
 | `bg-status-warning-hover` | `--color-status-warning-hover` | Warning - hover | `#FFAA00` | `#FF9D00` |
 | `bg-status-warning-pressed` | `--color-status-warning-pressed` | Warning - pressed | `#F9C127` | `#F9C127` |
 | `bg-status-warning-disabled` | `--color-status-warning-disabled` | Warning - disabled | `#FFF2D2` | `#4A3F2B` |
 | `bg-status-warning-intense` | `--color-status-warning-intense` | Warning - intense | `#D9840C` | `#FFAA00` |
 | `bg-status-warning-dim` | `--color-status-warning-dim` | Warning - dim | `#FFDB6E` | `#9F701A` |
+| `bg-status-warning-bg` | `--color-status-warning-bg` |  | `#FBF7EC` | `#393421` |
 | `bg-status-danger` | `--color-status-danger` | Danger | `#DB0A2D` | `#DB0A2D` |
 | `bg-status-danger-hover` | `--color-status-danger-hover` | Danger - hover | `#E62848` | `#E62848` |
 | `bg-status-danger-pressed` | `--color-status-danger-pressed` | Danger - pressed | `#AF2239` | `#D20625` |
@@ -146,12 +148,14 @@ const { semantic } = getTheme("dark");
 | `bg-status-danger-intense` | `--color-status-danger-intense` | Danger - intense | `#D20625` | `#EC3C56` |
 | `bg-status-danger-dim` | `--color-status-danger-dim` | Danger - dim | `#FFBBC4` | `#AF2239` |
 | `bg-status-danger-focus` | `--color-status-danger-focus` | Danger - focus | `#E62848` | `#AF2239` |
+| `bg-status-danger-bg` | `--color-status-danger-bg` |  | `#FFF4F5` | `#530E1A` |
 | `bg-status-info` | `--color-status-info` | Info | `#0095FF` | `#0095FF` |
 | `bg-status-info-hover` | `--color-status-info-hover` | Info - hover | `#20B1FF` | `#20B1FF` |
 | `bg-status-info-pressed` | `--color-status-info-pressed` | Info - pressed | `#1087FF` | `#1087FF` |
 | `bg-status-info-disabled` | `--color-status-info-disabled` | Info - disabled | `#CCEFFF` | `#143A67` |
 | `bg-status-info-intense` | `--color-status-info-intense` | Info - intense | `#1672D0` | `#20B1FF` |
 | `bg-status-info-dim` | `--color-status-info-dim` | Info - dim | `#92DDFF` | `#1672D0` |
+| `bg-status-info-bg` | `--color-status-info-bg` |  | `#EAF8FF` | `#0E2F53` |
 
 ### Overlay
 
@@ -210,11 +214,13 @@ const { semantic } = getTheme("dark");
 | `text-text-base` | `--text-text-base` | `1rem` |
 | `text-text-lg` | `--text-text-lg` | `1.125rem` |
 | `text-text-xl` | `--text-text-xl` | `1.25rem` |
+| `text-text-2xs` | `--text-text-2xs` | `0.625rem` |
 | `text-text-medium-xs` | `--text-text-medium-xs` | `0.75rem` |
 | `text-text-medium-sm` | `--text-text-medium-sm` | `0.875rem` |
 | `text-text-medium-base` | `--text-text-medium-base` | `1rem` |
 | `text-text-medium-lg` | `--text-text-medium-lg` | `1.125rem` |
 | `text-text-medium-xl` | `--text-text-medium-xl` | `1.25rem` |
+| `text-text-medium-2xs` | `--text-text-medium-2xs` | `0.625rem` |
 | `text-text-semibold-xs` | `--text-text-semibold-xs` | `0.75rem` |
 | `text-text-semibold-sm` | `--text-text-semibold-sm` | `0.875rem` |
 | `text-text-semibold-base` | `--text-text-semibold-base` | `1rem` |
@@ -233,6 +239,7 @@ const { semantic } = getTheme("dark");
 | `text-label-sm` | `--text-label-sm` | `0.75rem` |
 | `text-label-md` | `--text-label-md` | `0.875rem` |
 | `text-label-lg` | `--text-label-lg` | `1rem` |
+| `text-label-xs` | `--text-label-xs` | `0.625rem` |
 | `text-label-semibold-sm` | `--text-label-semibold-sm` | `0.75rem` |
 | `text-label-semibold-md` | `--text-label-semibold-md` | `0.875rem` |
 | `text-label-semibold-lg` | `--text-label-semibold-lg` | `1rem` |
@@ -349,11 +356,13 @@ const { semantic } = getTheme("dark");
 | `--font-weight-text-base` | `400` | `font-weight: var(--font-weight-text-base)` |
 | `--font-weight-text-lg` | `400` | `font-weight: var(--font-weight-text-lg)` |
 | `--font-weight-text-xl` | `400` | `font-weight: var(--font-weight-text-xl)` |
+| `--font-weight-text-2xs` | `400` | `font-weight: var(--font-weight-text-2xs)` |
 | `--font-weight-text-medium-xs` | `500` | `font-weight: var(--font-weight-text-medium-xs)` |
 | `--font-weight-text-medium-sm` | `500` | `font-weight: var(--font-weight-text-medium-sm)` |
 | `--font-weight-text-medium-base` | `500` | `font-weight: var(--font-weight-text-medium-base)` |
 | `--font-weight-text-medium-lg` | `500` | `font-weight: var(--font-weight-text-medium-lg)` |
 | `--font-weight-text-medium-xl` | `500` | `font-weight: var(--font-weight-text-medium-xl)` |
+| `--font-weight-text-medium-2xs` | `500` | `font-weight: var(--font-weight-text-medium-2xs)` |
 | `--font-weight-text-semibold-xs` | `600` | `font-weight: var(--font-weight-text-semibold-xs)` |
 | `--font-weight-text-semibold-sm` | `600` | `font-weight: var(--font-weight-text-semibold-sm)` |
 | `--font-weight-text-semibold-base` | `600` | `font-weight: var(--font-weight-text-semibold-base)` |
@@ -372,6 +381,7 @@ const { semantic } = getTheme("dark");
 | `--font-weight-label-sm` | `500` | `font-weight: var(--font-weight-label-sm)` |
 | `--font-weight-label-md` | `500` | `font-weight: var(--font-weight-label-md)` |
 | `--font-weight-label-lg` | `500` | `font-weight: var(--font-weight-label-lg)` |
+| `--font-weight-label-xs` | `500` | `font-weight: var(--font-weight-label-xs)` |
 | `--font-weight-label-semibold-sm` | `600` | `font-weight: var(--font-weight-label-semibold-sm)` |
 | `--font-weight-label-semibold-md` | `600` | `font-weight: var(--font-weight-label-semibold-md)` |
 | `--font-weight-label-semibold-lg` | `600` | `font-weight: var(--font-weight-label-semibold-lg)` |
@@ -385,11 +395,13 @@ const { semantic } = getTheme("dark");
 | `--letter-spacing-text-base` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-base)` |
 | `--letter-spacing-text-lg` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-lg)` |
 | `--letter-spacing-text-xl` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-xl)` |
+| `--letter-spacing-text-2xs` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-2xs)` |
 | `--letter-spacing-text-medium-xs` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-xs)` |
 | `--letter-spacing-text-medium-sm` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-sm)` |
 | `--letter-spacing-text-medium-base` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-base)` |
 | `--letter-spacing-text-medium-lg` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-lg)` |
 | `--letter-spacing-text-medium-xl` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-xl)` |
+| `--letter-spacing-text-medium-2xs` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-medium-2xs)` |
 | `--letter-spacing-text-semibold-xs` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-semibold-xs)` |
 | `--letter-spacing-text-semibold-sm` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-semibold-sm)` |
 | `--letter-spacing-text-semibold-base` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-semibold-base)` |
@@ -408,6 +420,7 @@ const { semantic } = getTheme("dark");
 | `--letter-spacing-label-sm` | `0` | `letter-spacing: var(--letter-spacing-label-sm)` |
 | `--letter-spacing-label-md` | `0` | `letter-spacing: var(--letter-spacing-label-md)` |
 | `--letter-spacing-label-lg` | `0` | `letter-spacing: var(--letter-spacing-label-lg)` |
+| `--letter-spacing-label-xs` | `0` | `letter-spacing: var(--letter-spacing-label-xs)` |
 | `--letter-spacing-label-semibold-sm` | `0` | `letter-spacing: var(--letter-spacing-label-semibold-sm)` |
 | `--letter-spacing-label-semibold-md` | `0` | `letter-spacing: var(--letter-spacing-label-semibold-md)` |
 | `--letter-spacing-label-semibold-lg` | `0` | `letter-spacing: var(--letter-spacing-label-semibold-lg)` |

package/dist/tokens/company.css

@@ -1,7 +1,7 @@
 /**
  * Company CSS — Tailwind v4 (@theme + .dark)
  * 자동 생성: scripts/generate-css.js
- * 생성일: 2026-05-06T03:32:31.081Z
+ * 생성일: 2026-05-07T10:05:13.498Z
  *
  * @theme: Tailwind 유틸리티 클래스 자동 생성
  * :root: 순수 CSS 변수 (var()로 직접 사용)
@@ -74,12 +74,14 @@
   --color-status-success-disabled: #CDF4EA;
   --color-status-success-intense: #1B9674;
   --color-status-success-dim: #9FECD7;
+  --color-status-success-bg: #EAFAF6;
   --color-status-warning: #FF9D00;
   --color-status-warning-hover: #FFAA00;
   --color-status-warning-pressed: #F9C127;
   --color-status-warning-disabled: #FFF2D2;
   --color-status-warning-intense: #D9840C;
   --color-status-warning-dim: #FFDB6E;
+  --color-status-warning-bg: #FBF7EC;
   --color-status-danger: #DB0A2D;
   --color-status-danger-hover: #E62848;
   --color-status-danger-pressed: #AF2239;
@@ -87,12 +89,14 @@
   --color-status-danger-intense: #D20625;
   --color-status-danger-dim: #FFBBC4;
   --color-status-danger-focus: #E62848;
+  --color-status-danger-bg: #FFF4F5;
   --color-status-info: #0095FF;
   --color-status-info-hover: #20B1FF;
   --color-status-info-pressed: #1087FF;
   --color-status-info-disabled: #CCEFFF;
   --color-status-info-intense: #1672D0;
   --color-status-info-dim: #92DDFF;
+  --color-status-info-bg: #EAF8FF;
   --color-overlay-dim: #000000;
   --color-overlay-light: #000000;
   --color-static-white: #FFFFFF;
@@ -126,6 +130,8 @@
   --text-text-lg--line-height: 1.5;
   --text-text-xl: 1.25rem;
   --text-text-xl--line-height: 1.5;
+  --text-text-2xs: 0.625rem;
+  --text-text-2xs--line-height: 1.5;
   --text-text-medium-xs: 0.75rem;
   --text-text-medium-xs--line-height: 1.5;
   --text-text-medium-sm: 0.875rem;
@@ -136,6 +142,8 @@
   --text-text-medium-lg--line-height: 1.5;
   --text-text-medium-xl: 1.25rem;
   --text-text-medium-xl--line-height: 1.5;
+  --text-text-medium-2xs: 0.625rem;
+  --text-text-medium-2xs--line-height: 1.5;
   --text-text-semibold-xs: 0.75rem;
   --text-text-semibold-xs--line-height: 1.5;
   --text-text-semibold-sm: 0.875rem;
@@ -172,6 +180,8 @@
   --text-label-md--line-height: 1;
   --text-label-lg: 1rem;
   --text-label-lg--line-height: 1;
+  --text-label-xs: 0.625rem;
+  --text-label-xs--line-height: 1;
   --text-label-semibold-sm: 0.75rem;
   --text-label-semibold-sm--line-height: 1;
   --text-label-semibold-md: 0.875rem;
@@ -257,6 +267,8 @@
   --letter-spacing-text-lg: -0.01em;
   --font-weight-text-xl: 400;
   --letter-spacing-text-xl: -0.01em;
+  --font-weight-text-2xs: 400;
+  --letter-spacing-text-2xs: -0.01em;
   --font-weight-text-medium-xs: 500;
   --letter-spacing-text-medium-xs: -0.01em;
   --font-weight-text-medium-sm: 500;
@@ -267,6 +279,8 @@
   --letter-spacing-text-medium-lg: -0.01em;
   --font-weight-text-medium-xl: 500;
   --letter-spacing-text-medium-xl: -0.01em;
+  --font-weight-text-medium-2xs: 500;
+  --letter-spacing-text-medium-2xs: -0.01em;
   --font-weight-text-semibold-xs: 600;
   --letter-spacing-text-semibold-xs: -0.01em;
   --font-weight-text-semibold-sm: 600;
@@ -303,6 +317,8 @@
   --letter-spacing-label-md: 0;
   --font-weight-label-lg: 500;
   --letter-spacing-label-lg: 0;
+  --font-weight-label-xs: 500;
+  --letter-spacing-label-xs: 0;
   --font-weight-label-semibold-sm: 600;
   --letter-spacing-label-semibold-sm: 0;
   --font-weight-label-semibold-md: 600;
@@ -378,12 +394,14 @@
   --color-status-success-disabled: #0D4431;
   --color-status-success-intense: #0BDFA5;
   --color-status-success-dim: #1B9674;
+  --color-status-success-bg: #06261B;
   --color-status-warning: #FFAA00;
   --color-status-warning-hover: #FF9D00;
   --color-status-warning-pressed: #F9C127;
   --color-status-warning-disabled: #4A3F2B;
   --color-status-warning-intense: #FFAA00;
   --color-status-warning-dim: #9F701A;
+  --color-status-warning-bg: #393421;
   --color-status-danger: #DB0A2D;
   --color-status-danger-hover: #E62848;
   --color-status-danger-pressed: #D20625;
@@ -391,12 +409,14 @@
   --color-status-danger-intense: #EC3C56;
   --color-status-danger-dim: #AF2239;
   --color-status-danger-focus: #AF2239;
+  --color-status-danger-bg: #530E1A;
   --color-status-info: #0095FF;
   --color-status-info-hover: #20B1FF;
   --color-status-info-pressed: #1087FF;
   --color-status-info-disabled: #143A67;
   --color-status-info-intense: #20B1FF;
   --color-status-info-dim: #1672D0;
+  --color-status-info-bg: #0E2F53;
   --color-overlay-dim: #000000;
   --color-overlay-light: #000000;
   --color-static-white: #FFFFFF;