# Vortex Design System — Full Component Reference > Companion to [`vortex.md`](./vortex.md). This file lists every Foundation > component with its CVA variants, default values, and CSS token usage, plus > Brand Overlay additions and overrides. Consult this file when you need > component-specific detail beyond what vortex.md's six core categories cover. ## Foundation Components (74) ### Accordion Accordion 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/accordion/accordion.variants.ts` **Token prefix**: `--accordion-` _No CVA variants declared._ #### CSS tokens used - `--accordion-content-font-size`: `var(--accordion-content-font-size)` → `0.875rem` - `--accordion-content-padding-bottom`: `var(--accordion-content-padding-bottom)` → `1rem` - `--accordion-item-border`: `var(--accordion-item-border)` → `#e5e5e5` - `--accordion-trigger-font-size`: `var(--accordion-trigger-font-size)` → `0.875rem` - `--accordion-trigger-font-weight`: `var(--accordion-trigger-font-weight)` → `500` - `--accordion-trigger-foreground-disabled`: `var(--accordion-trigger-foreground-disabled)` → `#737373` - `--accordion-trigger-gap`: `var(--accordion-trigger-gap)` → `1rem` - `--accordion-trigger-padding-y`: `var(--accordion-trigger-padding-y)` → `1rem` - `--accordion-trigger-radius`: `var(--accordion-trigger-radius)` → `0.2344rem` ### ActionButtons **Source**: `packages/ui-foundation/src/components/ui/action-buttons/action-buttons.variants.ts` **Token prefix**: `--action-buttons-` _No CVA variants declared._ #### CSS tokens used - `--action-buttons-gap`: `var(--action-buttons-gap)` → `0.5rem` ### Alert **Source**: `packages/ui-foundation/src/components/ui/alert/alert.variants.ts` **Layout**: display: grid · gap: `var(--alert-gap-y)` → `0.5rem` · border: 1px solid **Token prefix**: `--alert-` #### `variant` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 1 | 2 | | `destructive` | 1 | 1 | #### CSS tokens used - `--alert-background-default`: `var(--alert-background-default)` → `#ffffff` - `--alert-border`: `var(--alert-border)` → `#e5e5e5` - `--alert-description-font-size`: `var(--alert-description-font-size)` → `0.875rem` - `--alert-description-foreground`: `var(--alert-description-foreground)` → `#737373` - `--alert-description-gap`: `var(--alert-description-gap)` → `0.5rem` - `--alert-font-size`: `var(--alert-font-size)` → `1.125rem` - `--alert-foreground-default`: `var(--alert-foreground-default)` → `#0a0a0a` - `--alert-gap-y`: `var(--alert-gap-y)` → `0.5rem` - `--alert-padding-x`: `var(--alert-padding-x)` → `1rem` - `--alert-padding-y`: `var(--alert-padding-y)` → `0.75rem` - `--alert-radius`: `var(--alert-radius)` → `0.3125rem` - `--alert-title-font-weight`: `var(--alert-title-font-weight)` → `500` ### AlertDialog Alert Dialog 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/alert-dialog/alert-dialog.variants.ts` **Layout**: gap: `var(--alert-dialog-content-gap)` → `1.25rem` **Token prefix**: `--alert-dialog-` _No CVA variants declared._ #### CSS tokens used - `--alert-dialog-content-background`: `var(--alert-dialog-content-background)` → `#ffffff` - `--alert-dialog-content-border`: `var(--alert-dialog-content-border)` → `#e5e5e5` - `--alert-dialog-content-gap`: `var(--alert-dialog-content-gap)` → `1.25rem` - `--alert-dialog-content-padding`: `var(--alert-dialog-content-padding)` → `1.25rem` - `--alert-dialog-content-radius`: `var(--alert-dialog-content-radius)` → `0.4688rem` - `--alert-dialog-content-shadow`: `var(--alert-dialog-content-shadow)` - `--alert-dialog-description-font-size`: `var(--alert-dialog-description-font-size)` → `0.875rem` - `--alert-dialog-description-foreground`: `var(--alert-dialog-description-foreground)` → `#737373` - `--alert-dialog-footer-gap`: `var(--alert-dialog-footer-gap)` → `1rem` - `--alert-dialog-header-gap`: `var(--alert-dialog-header-gap)` → `0.75rem` - `--alert-dialog-overlay-background`: `var(--alert-dialog-overlay-background)` - `--alert-dialog-title-font-size`: `var(--alert-dialog-title-font-size)` → `1.5rem` - `--alert-dialog-title-font-weight`: `var(--alert-dialog-title-font-weight)` → `700` ### AspectRatio.tsx Aspect Ratio 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/aspect-ratio/aspect-ratio.tsx` _No CVA variants declared._ ### Avatar Avatar 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/avatar/avatar.variants.ts` **Token prefix**: `--avatar-` _No CVA variants declared._ #### CSS tokens used - `--avatar-badge-background`: `var(--avatar-badge-background)` → `#171717` - `--avatar-badge-border`: `var(--avatar-badge-border)` → `#000000` - `--avatar-badge-font-size`: `var(--avatar-badge-font-size)` → `0.75rem` - `--avatar-badge-foreground`: `var(--avatar-badge-foreground)` → `#fafafa` - `--avatar-badge-size`: `var(--avatar-badge-size)` → `0.75rem` - `--avatar-fallback-background`: `var(--avatar-fallback-background)` → `#f5f5f5` - `--avatar-group-count-background`: `var(--avatar-group-count-background)` → `#f5f5f5` - `--avatar-group-count-font-size`: `var(--avatar-group-count-font-size)` → `0.75rem` - `--avatar-group-count-font-weight`: `var(--avatar-group-count-font-weight)` - `--avatar-group-count-foreground`: `var(--avatar-group-count-foreground)` → `#737373` - `--avatar-group-count-height`: `var(--avatar-group-count-height)` → `2rem` - `--avatar-group-count-width`: `var(--avatar-group-count-width)` → `2rem` - `--avatar-radius`: `var(--avatar-radius)` → `999px` - `--avatar-size-default`: `var(--avatar-size-default)` → `2rem` - `--avatar-size-lg`: `var(--avatar-size-lg)` → `2.5rem` - `--avatar-size-sm`: `var(--avatar-size-sm)` → `1.5rem` ### Badge Badge 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/badge/badge.variants.ts` **Layout**: display: inline-flex · align: CENTER · justify: CENTER · border: 1px solid **Token prefix**: `--badge-` #### `variant` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 12 | 12 | | `destructive` | 12 | 12 | | `secondary` | 12 | 12 | | `outline` | 12 | 12 | | `ghost` | 12 | 12 | | `link` | 14 | 12 | | `tertiary` | 12 | 12 | #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 7 | 4 | | `sm` | 7 | 4 | | `md` (default) | 7 | 4 | | `lg` | 7 | 4 | | `xl` | 7 | 4 | | `icon` | 2 | 2 | | `icon-xs` | 2 | 2 | | `icon-sm` | 2 | 2 | | `icon-lg` | 2 | 2 | | `icon-xl` | 2 | 2 | #### CSS tokens used - `--badge-background-default`: `var(--badge-background-default)` → `#171717` - `--badge-background-default-hover`: `var(--badge-background-default-hover)` → `#171717` - `--badge-background-destructive`: `var(--badge-background-destructive)` - `--badge-background-destructive-hover`: `var(--badge-background-destructive-hover)` - `--badge-background-ghost`: `var(--badge-background-ghost)` → `transparent` - `--badge-background-ghost-hover`: `var(--badge-background-ghost-hover)` → `#f5f5f5` - `--badge-background-link`: `var(--badge-background-link)` → `transparent` - `--badge-background-link-hover`: `var(--badge-background-link-hover)` → `transparent` - `--badge-background-outline`: `var(--badge-background-outline)` → `#ffffff` - `--badge-background-outline-hover`: `var(--badge-background-outline-hover)` → `#f5f5f5` - `--badge-background-secondary`: `var(--badge-background-secondary)` → `#f5f5f5` - `--badge-background-secondary-hover`: `var(--badge-background-secondary-hover)` → `#f5f5f5` - `--badge-background-tertiary`: `var(--badge-background-tertiary)` → `#93c5fd` - `--badge-background-tertiary-hover`: `var(--badge-background-tertiary-hover)` - `--badge-border-default`: `var(--badge-border-default)` → `transparent` - `--badge-border-default-hover`: `var(--badge-border-default-hover)` → `transparent` - `--badge-border-destructive`: `var(--badge-border-destructive)` → `transparent` - `--badge-border-destructive-hover`: `var(--badge-border-destructive-hover)` → `transparent` - `--badge-border-ghost`: `var(--badge-border-ghost)` → `transparent` - `--badge-border-ghost-hover`: `var(--badge-border-ghost-hover)` → `transparent` - `--badge-border-link`: `var(--badge-border-link)` → `transparent` - `--badge-border-link-hover`: `var(--badge-border-link-hover)` → `transparent` - `--badge-border-outline`: `var(--badge-border-outline)` → `#e5e5e5` - `--badge-border-outline-hover`: `var(--badge-border-outline-hover)` → `#e5e5e5` - `--badge-border-secondary`: `var(--badge-border-secondary)` → `transparent` - `--badge-border-secondary-hover`: `var(--badge-border-secondary-hover)` → `transparent` - `--badge-border-tertiary`: `var(--badge-border-tertiary)` → `transparent` - `--badge-border-tertiary-hover`: `var(--badge-border-tertiary-hover)` → `transparent` - `--badge-font-size-lg`: `var(--badge-font-size-lg)` → `1rem` - `--badge-font-size-md`: `var(--badge-font-size-md)` → `0.875rem` - `--badge-font-size-sm`: `var(--badge-font-size-sm)` → `0.875rem` - `--badge-font-size-xl`: `var(--badge-font-size-xl)` → `1rem` - `--badge-font-size-xs`: `var(--badge-font-size-xs)` → `0.75rem` - `--badge-foreground-default`: `var(--badge-foreground-default)` → `#fafafa` - `--badge-foreground-default-hover`: `var(--badge-foreground-default-hover)` → `#fafafa` - `--badge-foreground-destructive`: `var(--badge-foreground-destructive)` → `#ef4444` - `--badge-foreground-destructive-hover`: `var(--badge-foreground-destructive-hover)` → `#ef4444` - `--badge-foreground-ghost`: `var(--badge-foreground-ghost)` → `#0a0a0a` - `--badge-foreground-ghost-hover`: `var(--badge-foreground-ghost-hover)` → `#737373` - `--badge-foreground-link`: `var(--badge-foreground-link)` → `#171717` - `--badge-foreground-link-hover`: `var(--badge-foreground-link-hover)` → `#171717` - `--badge-foreground-outline`: `var(--badge-foreground-outline)` → `#0a0a0a` - `--badge-foreground-outline-hover`: `var(--badge-foreground-outline-hover)` → `#737373` - `--badge-foreground-secondary`: `var(--badge-foreground-secondary)` → `#171717` - `--badge-foreground-secondary-hover`: `var(--badge-foreground-secondary-hover)` → `#171717` - `--badge-foreground-tertiary`: `var(--badge-foreground-tertiary)` → `#0a0a0a` - `--badge-foreground-tertiary-hover`: `var(--badge-foreground-tertiary-hover)` → `#0a0a0a` - `--badge-gap-lg`: `var(--badge-gap-lg)` → `0.5rem` - `--badge-gap-md`: `var(--badge-gap-md)` → `0.5rem` - `--badge-gap-sm`: `var(--badge-gap-sm)` → `0.25rem` - `--badge-gap-xl`: `var(--badge-gap-xl)` → `0.5rem` - `--badge-gap-xs`: `var(--badge-gap-xs)` → `0.25rem` - `--badge-height-lg`: `var(--badge-height-lg)` → `2rem` - `--badge-height-md`: `var(--badge-height-md)` → `1.75rem` - `--badge-height-sm`: `var(--badge-height-sm)` → `1.5rem` - `--badge-height-xl`: `var(--badge-height-xl)` → `2.25rem` - `--badge-height-xs`: `var(--badge-height-xs)` → `1.25rem` - `--badge-icon-lg`: `var(--badge-icon-lg)` → `2rem` - `--badge-icon-md`: `var(--badge-icon-md)` → `1.75rem` - `--badge-icon-sm`: `var(--badge-icon-sm)` → `1.5rem` - `--badge-icon-xl`: `var(--badge-icon-xl)` → `2.25rem` - `--badge-icon-xs`: `var(--badge-icon-xs)` → `1.25rem` - `--badge-padding-x-lg`: `var(--badge-padding-x-lg)` → `1rem` - `--badge-padding-x-md`: `var(--badge-padding-x-md)` → `0.75rem` - `--badge-padding-x-sm`: `var(--badge-padding-x-sm)` → `0.75rem` - `--badge-padding-x-xl`: `var(--badge-padding-x-xl)` → `1rem` - `--badge-padding-x-xs`: `var(--badge-padding-x-xs)` → `0.5rem` ### Breadcrumb Breadcrumb 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/breadcrumb/breadcrumb.variants.ts` **Token prefix**: `--breadcrumb-` _No CVA variants declared._ #### CSS tokens used - `--breadcrumb-ellipsis-size`: `var(--breadcrumb-ellipsis-size)` → `2rem` - `--breadcrumb-item-gap`: `var(--breadcrumb-item-gap)` → `0.25rem` - `--breadcrumb-link-foreground-hover`: `var(--breadcrumb-link-foreground-hover)` → `#0a0a0a` - `--breadcrumb-list-font-size`: `var(--breadcrumb-list-font-size)` → `1rem` - `--breadcrumb-list-foreground`: `var(--breadcrumb-list-foreground)` → `#737373` - `--breadcrumb-list-gap`: `var(--breadcrumb-list-gap)` → `0.25rem` - `--breadcrumb-page-font-weight`: `var(--breadcrumb-page-font-weight)` → `400` - `--breadcrumb-page-foreground`: `var(--breadcrumb-page-foreground)` → `#0a0a0a` ### Button Button 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/button/button.variants.ts` **Token prefix**: `--button-` #### `variant` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 13 | 13 | | `destructive` | 13 | 13 | | `secondary` | 13 | 13 | | `outline` | 13 | 13 | | `ghost` | 13 | 13 | | `link` | 14 | 13 | | `tertiary` | 13 | 13 | #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `md` (default) | 8 | 5 | | `xs` | 8 | 5 | | `sm` | 8 | 5 | | `lg` | 7 | 5 | | `xl` | 7 | 5 | | `icon` | 2 | 3 | | `icon-xs` | 3 | 3 | | `icon-sm` | 3 | 3 | | `icon-lg` | 2 | 3 | | `icon-xl` | 2 | 3 | #### CSS tokens used - `--button-background-default`: `var(--button-background-default)` → `#171717` - `--button-background-default-active`: `var(--button-background-default-active)` → `#171717` - `--button-background-default-disabled`: `var(--button-background-default-disabled)` - `--button-background-default-hover`: `var(--button-background-default-hover)` → `#171717` - `--button-background-destructive`: `var(--button-background-destructive)` - `--button-background-destructive-active`: `var(--button-background-destructive-active)` - `--button-background-destructive-disabled`: `var(--button-background-destructive-disabled)` - `--button-background-destructive-hover`: `var(--button-background-destructive-hover)` - `--button-background-ghost`: `var(--button-background-ghost)` → `transparent` - `--button-background-ghost-active`: `var(--button-background-ghost-active)` → `#ffffff` - `--button-background-ghost-disabled`: `var(--button-background-ghost-disabled)` → `transparent` - `--button-background-ghost-hover`: `var(--button-background-ghost-hover)` → `#f5f5f5` - `--button-background-link`: `var(--button-background-link)` → `transparent` - `--button-background-link-active`: `var(--button-background-link-active)` → `transparent` - `--button-background-link-disabled`: `var(--button-background-link-disabled)` → `transparent` - `--button-background-link-hover`: `var(--button-background-link-hover)` → `transparent` - `--button-background-outline`: `var(--button-background-outline)` → `#ffffff` - `--button-background-outline-active`: `var(--button-background-outline-active)` → `#ffffff` - `--button-background-outline-disabled`: `var(--button-background-outline-disabled)` → `#f5f5f5` - `--button-background-outline-hover`: `var(--button-background-outline-hover)` → `#f5f5f5` - `--button-background-secondary`: `var(--button-background-secondary)` → `#f5f5f5` - `--button-background-secondary-active`: `var(--button-background-secondary-active)` → `#f5f5f5` - `--button-background-secondary-disabled`: `var(--button-background-secondary-disabled)` - `--button-background-secondary-hover`: `var(--button-background-secondary-hover)` → `#f5f5f5` - `--button-background-tertiary`: `var(--button-background-tertiary)` → `#93c5fd` - `--button-background-tertiary-active`: `var(--button-background-tertiary-active)` → `#93c5fd` - `--button-background-tertiary-disabled`: `var(--button-background-tertiary-disabled)` - `--button-background-tertiary-hover`: `var(--button-background-tertiary-hover)` - `--button-border-default`: `var(--button-border-default)` → `#171717` - `--button-border-default-active`: `var(--button-border-default-active)` → `#171717` - `--button-border-default-disabled`: `var(--button-border-default-disabled)` - `--button-border-default-hover`: `var(--button-border-default-hover)` → `#171717` - `--button-border-destructive`: `var(--button-border-destructive)` - `--button-border-destructive-active`: `var(--button-border-destructive-active)` - `--button-border-destructive-disabled`: `var(--button-border-destructive-disabled)` - `--button-border-destructive-hover`: `var(--button-border-destructive-hover)` - `--button-border-ghost`: `var(--button-border-ghost)` → `transparent` - `--button-border-ghost-active`: `var(--button-border-ghost-active)` → `#ffffff` - `--button-border-ghost-disabled`: `var(--button-border-ghost-disabled)` → `transparent` - `--button-border-ghost-hover`: `var(--button-border-ghost-hover)` → `#f5f5f5` - `--button-border-link`: `var(--button-border-link)` → `transparent` - `--button-border-link-active`: `var(--button-border-link-active)` → `transparent` - `--button-border-link-disabled`: `var(--button-border-link-disabled)` → `transparent` - `--button-border-link-hover`: `var(--button-border-link-hover)` → `transparent` - `--button-border-outline`: `var(--button-border-outline)` → `#e5e5e5` - `--button-border-outline-active`: `var(--button-border-outline-active)` → `#e5e5e5` - `--button-border-outline-disabled`: `var(--button-border-outline-disabled)` → `#f5f5f5` - `--button-border-outline-hover`: `var(--button-border-outline-hover)` → `#e5e5e5` - `--button-border-secondary`: `var(--button-border-secondary)` → `#f5f5f5` - `--button-border-secondary-active`: `var(--button-border-secondary-active)` → `#f5f5f5` - `--button-border-secondary-disabled`: `var(--button-border-secondary-disabled)` - `--button-border-secondary-hover`: `var(--button-border-secondary-hover)` → `#f5f5f5` - `--button-border-tertiary`: `var(--button-border-tertiary)` → `#93c5fd` - `--button-border-tertiary-active`: `var(--button-border-tertiary-active)` → `#93c5fd` - `--button-border-tertiary-disabled`: `var(--button-border-tertiary-disabled)` - `--button-border-tertiary-hover`: `var(--button-border-tertiary-hover)` - `--button-font-size-lg`: `var(--button-font-size-lg)` → `1.125rem` - `--button-font-size-md`: `var(--button-font-size-md)` → `1rem` - `--button-font-size-sm`: `var(--button-font-size-sm)` → `0.875rem` - `--button-font-size-xl`: `var(--button-font-size-xl)` → `1.25rem` - `--button-font-size-xs`: `var(--button-font-size-xs)` → `0.75rem` - `--button-foreground-default`: `var(--button-foreground-default)` → `#fafafa` - `--button-foreground-default-active`: `var(--button-foreground-default-active)` → `#fafafa` - `--button-foreground-default-disabled`: `var(--button-foreground-default-disabled)` → `#fafafa` - `--button-foreground-default-hover`: `var(--button-foreground-default-hover)` → `#fafafa` - `--button-foreground-destructive`: `var(--button-foreground-destructive)` → `#ef4444` - `--button-foreground-destructive-active`: `var(--button-foreground-destructive-active)` → `#ef4444` - `--button-foreground-destructive-disabled`: `var(--button-foreground-destructive-disabled)` - `--button-foreground-destructive-hover`: `var(--button-foreground-destructive-hover)` → `#ef4444` - `--button-foreground-ghost`: `var(--button-foreground-ghost)` → `#0a0a0a` - `--button-foreground-ghost-active`: `var(--button-foreground-ghost-active)` → `#0a0a0a` - `--button-foreground-ghost-disabled`: `var(--button-foreground-ghost-disabled)` - `--button-foreground-ghost-hover`: `var(--button-foreground-ghost-hover)` → `#0a0a0a` - `--button-foreground-link`: `var(--button-foreground-link)` → `#171717` - `--button-foreground-link-active`: `var(--button-foreground-link-active)` → `#171717` - `--button-foreground-link-disabled`: `var(--button-foreground-link-disabled)` - `--button-foreground-link-hover`: `var(--button-foreground-link-hover)` → `#171717` - `--button-foreground-outline`: `var(--button-foreground-outline)` → `#0a0a0a` - `--button-foreground-outline-active`: `var(--button-foreground-outline-active)` → `#0a0a0a` - `--button-foreground-outline-disabled`: `var(--button-foreground-outline-disabled)` - `--button-foreground-outline-hover`: `var(--button-foreground-outline-hover)` → `#0a0a0a` - `--button-foreground-secondary`: `var(--button-foreground-secondary)` → `#171717` - `--button-foreground-secondary-active`: `var(--button-foreground-secondary-active)` → `#171717` - `--button-foreground-secondary-disabled`: `var(--button-foreground-secondary-disabled)` - `--button-foreground-secondary-hover`: `var(--button-foreground-secondary-hover)` → `#171717` - `--button-foreground-tertiary`: `var(--button-foreground-tertiary)` → `#0a0a0a` - `--button-foreground-tertiary-active`: `var(--button-foreground-tertiary-active)` → `#0a0a0a` - `--button-foreground-tertiary-disabled`: `var(--button-foreground-tertiary-disabled)` - `--button-foreground-tertiary-hover`: `var(--button-foreground-tertiary-hover)` → `#0a0a0a` - `--button-gap-lg`: `var(--button-gap-lg)` → `0.5rem` - `--button-gap-md`: `var(--button-gap-md)` → `0.5rem` - `--button-gap-sm`: `var(--button-gap-sm)` → `0.25rem` - `--button-gap-xl`: `var(--button-gap-xl)` → `0.5rem` - `--button-gap-xs`: `var(--button-gap-xs)` → `0.25rem` - `--button-height-lg`: `var(--button-height-lg)` → `2.5rem` - `--button-height-md`: `var(--button-height-md)` → `2.25rem` - `--button-height-sm`: `var(--button-height-sm)` → `2rem` - `--button-height-xl`: `var(--button-height-xl)` → `3rem` - `--button-height-xs`: `var(--button-height-xs)` → `1.5rem` - `--button-icon-lg`: `var(--button-icon-lg)` → `2.5rem` - `--button-icon-md`: `var(--button-icon-md)` → `2.25rem` - `--button-icon-sm`: `var(--button-icon-sm)` → `2rem` - `--button-icon-xl`: `var(--button-icon-xl)` → `3rem` - `--button-icon-xs`: `var(--button-icon-xs)` → `1.5rem` - `--button-padding-x-lg`: `var(--button-padding-x-lg)` → `1rem` - `--button-padding-x-md`: `var(--button-padding-x-md)` → `1rem` - `--button-padding-x-sm`: `var(--button-padding-x-sm)` → `0.5rem` - `--button-padding-x-xl`: `var(--button-padding-x-xl)` → `1.25rem` - `--button-padding-x-xs`: `var(--button-padding-x-xs)` → `0.5rem` - `--button-radius-lg`: `var(--button-radius-lg)` → `0.3125rem` - `--button-radius-md`: `var(--button-radius-md)` → `0.3125rem` - `--button-radius-sm`: `var(--button-radius-sm)` → `0.2344rem` - `--button-radius-xl`: `var(--button-radius-xl)` → `0.4688rem` - `--button-radius-xs`: `var(--button-radius-xs)` → `0.2344rem` - `--button-shadow-default`: `var(--button-shadow-default)` - `--button-shadow-destructive`: `var(--button-shadow-destructive)` - `--button-shadow-ghost`: `var(--button-shadow-ghost)` - `--button-shadow-link`: `var(--button-shadow-link)` - `--button-shadow-outline`: `var(--button-shadow-outline)` - `--button-shadow-secondary`: `var(--button-shadow-secondary)` - `--button-shadow-tertiary`: `var(--button-shadow-tertiary)` ### ButtonGroup Button Group 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/button-group/button-group.variants.ts` **Token prefix**: `--button-group-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 1 | 5 | | `sm` | 1 | 5 | | `md` (default) | 1 | 5 | | `lg` | 1 | 5 | | `xl` | 1 | 5 | #### CSS tokens used - `--button-group-radius-lg`: `var(--button-group-radius-lg)` → `0.3125rem` - `--button-group-radius-md`: `var(--button-group-radius-md)` → `0.3125rem` - `--button-group-radius-sm`: `var(--button-group-radius-sm)` → `0.2344rem` - `--button-group-radius-xl`: `var(--button-group-radius-xl)` → `0.4688rem` - `--button-group-radius-xs`: `var(--button-group-radius-xs)` → `0.2344rem` - `--button-group-separator-background`: `var(--button-group-separator-background)` → `#e5e5e5` - `--button-group-text-background`: `var(--button-group-text-background)` → `#f5f5f5` - `--button-group-text-border`: `var(--button-group-text-border)` → `#e5e5e5` - `--button-group-text-font-size-lg`: `var(--button-group-text-font-size-lg)` → `1rem` - `--button-group-text-font-size-md`: `var(--button-group-text-font-size-md)` → `0.875rem` - `--button-group-text-font-size-sm`: `var(--button-group-text-font-size-sm)` → `0.875rem` - `--button-group-text-font-size-xl`: `var(--button-group-text-font-size-xl)` → `1rem` - `--button-group-text-font-size-xs`: `var(--button-group-text-font-size-xs)` → `0.75rem` - `--button-group-text-font-weight`: `var(--button-group-text-font-weight)` - `--button-group-text-gap-lg`: `var(--button-group-text-gap-lg)` → `0.5rem` - `--button-group-text-gap-md`: `var(--button-group-text-gap-md)` → `0.5rem` - `--button-group-text-gap-sm`: `var(--button-group-text-gap-sm)` → `0.5rem` - `--button-group-text-gap-xl`: `var(--button-group-text-gap-xl)` → `0.5rem` - `--button-group-text-gap-xs`: `var(--button-group-text-gap-xs)` → `0.5rem` - `--button-group-text-padding-x-lg`: `var(--button-group-text-padding-x-lg)` → `0.5rem` - `--button-group-text-padding-x-md`: `var(--button-group-text-padding-x-md)` → `0.5rem` - `--button-group-text-padding-x-sm`: `var(--button-group-text-padding-x-sm)` → `0.5rem` - `--button-group-text-padding-x-xl`: `var(--button-group-text-padding-x-xl)` → `0.5rem` - `--button-group-text-padding-x-xs`: `var(--button-group-text-padding-x-xs)` → `0.5rem` - `--button-group-text-radius-lg`: `var(--button-group-text-radius-lg)` → `0.3125rem` - `--button-group-text-radius-md`: `var(--button-group-text-radius-md)` → `0.3125rem` - `--button-group-text-radius-sm`: `var(--button-group-text-radius-sm)` → `0.2344rem` - `--button-group-text-radius-xl`: `var(--button-group-text-radius-xl)` → `0.3125rem` - `--button-group-text-radius-xs`: `var(--button-group-text-radius-xs)` → `0.2344rem` - `--button-group-text-shadow`: `var(--button-group-text-shadow)` ### Calendar Calendar 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/calendar/calendar.variants.ts` **Layout**: border: 1px solid **Token prefix**: `--calendar-` _No CVA variants declared._ #### CSS tokens used - `--calendar-background`: `var(--calendar-background)` → `transparent` - `--calendar-border`: `var(--calendar-border)` → `transparent` - `--calendar-day-button-background`: `var(--calendar-day-button-background)` → `transparent` - `--calendar-day-button-background-selected`: `var(--calendar-day-button-background-selected)` → `#171717` - `--calendar-day-button-font-size`: `var(--calendar-day-button-font-size)` → `0.875rem` - `--calendar-day-button-foreground`: `var(--calendar-day-button-foreground)` → `#0a0a0a` - `--calendar-day-button-foreground-selected`: `var(--calendar-day-button-foreground-selected)` → `#fafafa` - `--calendar-day-button-radius`: `var(--calendar-day-button-radius)` → `0.2344rem` - `--calendar-day-button-range-end-background`: `var(--calendar-day-button-range-end-background)` → `#171717` - `--calendar-day-button-range-end-foreground`: `var(--calendar-day-button-range-end-foreground)` → `#fafafa` - `--calendar-day-button-range-middle-background`: `var(--calendar-day-button-range-middle-background)` → `#f5f5f5` - `--calendar-day-button-range-middle-foreground`: `var(--calendar-day-button-range-middle-foreground)` → `#171717` - `--calendar-day-button-range-start-background`: `var(--calendar-day-button-range-start-background)` → `#171717` - `--calendar-day-button-range-start-foreground`: `var(--calendar-day-button-range-start-foreground)` → `#fafafa` - `--calendar-day-button-today-background`: `var(--calendar-day-button-today-background)` → `#f5f5f5` - `--calendar-day-button-today-foreground`: `var(--calendar-day-button-today-foreground)` → `#171717` - `--calendar-foreground`: `var(--calendar-foreground)` → `#737373` - `--calendar-padding`: `var(--calendar-padding)` → `0.5rem` - `--calendar-radius`: `var(--calendar-radius)` → `0.3125rem` ### Card Card 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/card/card.variants.ts` **Layout**: gap: `var(--card-gap)` → `1rem` **Token prefix**: `--card-` _No CVA variants declared._ #### CSS tokens used - `--card-border`: `var(--card-border)` → `#e5e5e5` - `--card-content-padding-x`: `var(--card-content-padding-x)` → `1.25rem` - `--card-description-font-size`: `var(--card-description-font-size)` → `0.875rem` - `--card-description-foreground`: `var(--card-description-foreground)` → `#737373` - `--card-font-size`: `var(--card-font-size)` → `1rem` - `--card-footer-padding-top`: `var(--card-footer-padding-top)` → `1rem` - `--card-footer-padding-x`: `var(--card-footer-padding-x)` → `1.25rem` - `--card-gap`: `var(--card-gap)` → `1rem` - `--card-header-gap`: `var(--card-header-gap)` → `0.5rem` - `--card-header-padding-bottom`: `var(--card-header-padding-bottom)` → `1rem` - `--card-header-padding-x`: `var(--card-header-padding-x)` → `1.25rem` - `--card-padding-y`: `var(--card-padding-y)` → `1.25rem` - `--card-radius`: `var(--card-radius)` → `0.3125rem` - `--card-shadow`: `var(--card-shadow)` - `--card-title-font-weight`: `var(--card-title-font-weight)` → `700` ### Carousel.tsx Carousel 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/carousel/carousel.tsx` _No CVA variants declared._ ### Chart.tsx Chart 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/chart/chart.tsx` _No CVA variants declared._ ### Checkbox Checkbox 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/checkbox/checkbox.variants.ts` **Layout**: display: flex · align: CENTER · justify: CENTER · border: 1px solid **Token prefix**: `--checkbox-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 2 | 3 | | `sm` | 2 | 3 | | `md` (default) | 2 | 3 | | `lg` | 2 | 3 | | `xl` | 2 | 3 | #### CSS tokens used - `--checkbox-background`: `var(--checkbox-background)` → `#ffffff` - `--checkbox-background-checked`: `var(--checkbox-background-checked)` → `#171717` - `--checkbox-background-checked-disabled`: `var(--checkbox-background-checked-disabled)` - `--checkbox-background-checked-readonly`: `var(--checkbox-background-checked-readonly)` - `--checkbox-background-disabled`: `var(--checkbox-background-disabled)` - `--checkbox-background-readonly`: `var(--checkbox-background-readonly)` - `--checkbox-border`: `var(--checkbox-border)` → `#e5e5e5` - `--checkbox-border-checked`: `var(--checkbox-border-checked)` → `#e5e5e5` - `--checkbox-border-checked-disabled`: `var(--checkbox-border-checked-disabled)` - `--checkbox-border-checked-readonly`: `var(--checkbox-border-checked-readonly)` - `--checkbox-border-disabled`: `var(--checkbox-border-disabled)` - `--checkbox-border-readonly`: `var(--checkbox-border-readonly)` - `--checkbox-foreground`: `var(--checkbox-foreground)` → `#0a0a0a` - `--checkbox-foreground-checked-disabled`: `var(--checkbox-foreground-checked-disabled)` → `#737373` - `--checkbox-foreground-checked-readonly`: `var(--checkbox-foreground-checked-readonly)` → `#737373` - `--checkbox-foreground-disabled`: `var(--checkbox-foreground-disabled)` → `#737373` - `--checkbox-foreground-readonly`: `var(--checkbox-foreground-readonly)` → `#737373` - `--checkbox-indicator-background`: `var(--checkbox-indicator-background)` → `transparent` - `--checkbox-indicator-background-checked`: `var(--checkbox-indicator-background-checked)` → `#ffffff` - `--checkbox-indicator-background-checked-disabled`: `var(--checkbox-indicator-background-checked-disabled)` - `--checkbox-indicator-background-checked-readonly`: `var(--checkbox-indicator-background-checked-readonly)` - `--checkbox-indicator-background-disabled`: `var(--checkbox-indicator-background-disabled)` - `--checkbox-indicator-background-readonly`: `var(--checkbox-indicator-background-readonly)` - `--checkbox-indicator-size-lg`: `var(--checkbox-indicator-size-lg)` → `1.25rem` - `--checkbox-indicator-size-md`: `var(--checkbox-indicator-size-md)` → `1rem` - `--checkbox-indicator-size-sm`: `var(--checkbox-indicator-size-sm)` → `0.75rem` - `--checkbox-indicator-size-xl`: `var(--checkbox-indicator-size-xl)` → `1.5rem` - `--checkbox-indicator-size-xs`: `var(--checkbox-indicator-size-xs)` → `0.5rem` - `--checkbox-radius-lg`: `var(--checkbox-radius-lg)` → `0.2344rem` - `--checkbox-radius-md`: `var(--checkbox-radius-md)` → `0.2344rem` - `--checkbox-radius-sm`: `var(--checkbox-radius-sm)` → `0.1563rem` - `--checkbox-radius-xl`: `var(--checkbox-radius-xl)` → `0.3125rem` - `--checkbox-radius-xs`: `var(--checkbox-radius-xs)` → `0.1563rem` - `--checkbox-shadow`: `var(--checkbox-shadow)` - `--checkbox-size-lg`: `var(--checkbox-size-lg)` → `1.75rem` - `--checkbox-size-md`: `var(--checkbox-size-md)` → `1.5rem` - `--checkbox-size-sm`: `var(--checkbox-size-sm)` → `1.25rem` - `--checkbox-size-xl`: `var(--checkbox-size-xl)` → `2rem` - `--checkbox-size-xs`: `var(--checkbox-size-xs)` → `1rem` ### Collapsible.tsx Collapsible 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/collapsible/collapsible.tsx` _No CVA variants declared._ ### ColorPicker Color Picker 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/color-picker/color-picker.variants.ts` **Layout**: display: flex · align: CENTER · gap: `0.5rem` → `0.5rem` · border: 1px solid **Token prefix**: `--color-picker-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 4 | 4 | | `sm` | 4 | 4 | | `md` (default) | 4 | 4 | | `lg` | 4 | 4 | | `xl` | 4 | 4 | #### CSS tokens used - `--color-picker-background`: `var(--color-picker-background)` - `--color-picker-background-disabled`: `var(--color-picker-background-disabled)` - `--color-picker-background-readonly`: `var(--color-picker-background-readonly)` - `--color-picker-border`: `var(--color-picker-border)` - `--color-picker-border-disabled`: `var(--color-picker-border-disabled)` - `--color-picker-border-readonly`: `var(--color-picker-border-readonly)` - `--color-picker-font-size-lg`: `var(--color-picker-font-size-lg)` - `--color-picker-font-size-md`: `var(--color-picker-font-size-md)` - `--color-picker-font-size-sm`: `var(--color-picker-font-size-sm)` - `--color-picker-font-size-xl`: `var(--color-picker-font-size-xl)` - `--color-picker-font-size-xs`: `var(--color-picker-font-size-xs)` - `--color-picker-foreground`: `var(--color-picker-foreground)` - `--color-picker-foreground-disabled`: `var(--color-picker-foreground-disabled)` - `--color-picker-foreground-readonly`: `var(--color-picker-foreground-readonly)` - `--color-picker-height-lg`: `var(--color-picker-height-lg)` - `--color-picker-height-md`: `var(--color-picker-height-md)` - `--color-picker-height-sm`: `var(--color-picker-height-sm)` - `--color-picker-height-xl`: `var(--color-picker-height-xl)` - `--color-picker-height-xs`: `var(--color-picker-height-xs)` - `--color-picker-padding-x-lg`: `var(--color-picker-padding-x-lg)` - `--color-picker-padding-x-md`: `var(--color-picker-padding-x-md)` - `--color-picker-padding-x-sm`: `var(--color-picker-padding-x-sm)` - `--color-picker-padding-x-xl`: `var(--color-picker-padding-x-xl)` - `--color-picker-padding-x-xs`: `var(--color-picker-padding-x-xs)` - `--color-picker-radius-lg`: `var(--color-picker-radius-lg)` - `--color-picker-radius-md`: `var(--color-picker-radius-md)` - `--color-picker-radius-sm`: `var(--color-picker-radius-sm)` - `--color-picker-radius-xl`: `var(--color-picker-radius-xl)` - `--color-picker-radius-xs`: `var(--color-picker-radius-xs)` - `--color-picker-shadow`: `var(--color-picker-shadow)` ### Combobox Combobox 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/combobox/combobox.variants.ts` **Token prefix**: `--combobox-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 4 | 5 | | `sm` | 4 | 5 | | `md` (default) | 4 | 5 | | `lg` | 4 | 5 | | `xl` | 4 | 5 | #### CSS tokens used - `--combobox-chip-background`: `var(--combobox-chip-background)` → `#f5f5f5` - `--combobox-chip-font-size-lg`: `var(--combobox-chip-font-size-lg)` → `0.875rem` - `--combobox-chip-font-size-md`: `var(--combobox-chip-font-size-md)` → `0.875rem` - `--combobox-chip-font-size-sm`: `var(--combobox-chip-font-size-sm)` → `0.75rem` - `--combobox-chip-font-size-xl`: `var(--combobox-chip-font-size-xl)` → `1rem` - `--combobox-chip-font-size-xs`: `var(--combobox-chip-font-size-xs)` → `0.75rem` - `--combobox-chip-foreground`: `var(--combobox-chip-foreground)` → `#0a0a0a` - `--combobox-chip-gap`: `var(--combobox-chip-gap)` → `0.5rem` - `--combobox-chip-min-width`: `var(--combobox-chip-min-width)` → `2rem` - `--combobox-chip-padding-x-lg`: `var(--combobox-chip-padding-x-lg)` → `0.5rem` - `--combobox-chip-padding-x-md`: `var(--combobox-chip-padding-x-md)` → `0.5rem` - `--combobox-chip-padding-x-sm`: `var(--combobox-chip-padding-x-sm)` → `0.5rem` - `--combobox-chip-padding-x-xl`: `var(--combobox-chip-padding-x-xl)` → `0.75rem` - `--combobox-chip-padding-x-xs`: `var(--combobox-chip-padding-x-xs)` → `0.5rem` - `--combobox-chip-radius-lg`: `var(--combobox-chip-radius-lg)` → `0.3125rem` - `--combobox-chip-radius-md`: `var(--combobox-chip-radius-md)` → `0.3125rem` - `--combobox-chip-radius-sm`: `var(--combobox-chip-radius-sm)` → `0.2344rem` - `--combobox-chip-radius-xl`: `var(--combobox-chip-radius-xl)` → `0.4688rem` - `--combobox-chip-radius-xs`: `var(--combobox-chip-radius-xs)` → `0.2344rem` - `--combobox-chips-background`: `var(--combobox-chips-background)` - `--combobox-chips-border`: `var(--combobox-chips-border)` - `--combobox-chips-font-size-lg`: `var(--combobox-chips-font-size-lg)` - `--combobox-chips-font-size-md`: `var(--combobox-chips-font-size-md)` - `--combobox-chips-font-size-sm`: `var(--combobox-chips-font-size-sm)` - `--combobox-chips-font-size-xl`: `var(--combobox-chips-font-size-xl)` - `--combobox-chips-font-size-xs`: `var(--combobox-chips-font-size-xs)` - `--combobox-chips-gap`: `var(--combobox-chips-gap)` → `0.5rem` - `--combobox-chips-min-height-lg`: `var(--combobox-chips-min-height-lg)` - `--combobox-chips-min-height-md`: `var(--combobox-chips-min-height-md)` - `--combobox-chips-min-height-sm`: `var(--combobox-chips-min-height-sm)` - `--combobox-chips-min-height-xl`: `var(--combobox-chips-min-height-xl)` - `--combobox-chips-min-height-xs`: `var(--combobox-chips-min-height-xs)` - `--combobox-chips-padding-x-lg`: `var(--combobox-chips-padding-x-lg)` - `--combobox-chips-padding-x-md`: `var(--combobox-chips-padding-x-md)` - `--combobox-chips-padding-x-sm`: `var(--combobox-chips-padding-x-sm)` - `--combobox-chips-padding-x-xl`: `var(--combobox-chips-padding-x-xl)` - `--combobox-chips-padding-x-xs`: `var(--combobox-chips-padding-x-xs)` - `--combobox-chips-padding-y-lg`: `var(--combobox-chips-padding-y-lg)` → `0.25rem` - `--combobox-chips-padding-y-md`: `var(--combobox-chips-padding-y-md)` → `0.25rem` - `--combobox-chips-padding-y-sm`: `var(--combobox-chips-padding-y-sm)` → `0.25rem` - `--combobox-chips-padding-y-xl`: `var(--combobox-chips-padding-y-xl)` → `0.25rem` - `--combobox-chips-padding-y-xs`: `var(--combobox-chips-padding-y-xs)` → `0.25rem` - `--combobox-chips-radius-lg`: `var(--combobox-chips-radius-lg)` - `--combobox-chips-radius-md`: `var(--combobox-chips-radius-md)` - `--combobox-chips-radius-sm`: `var(--combobox-chips-radius-sm)` - `--combobox-chips-radius-xl`: `var(--combobox-chips-radius-xl)` - `--combobox-chips-radius-xs`: `var(--combobox-chips-radius-xs)` - `--combobox-chips-shadow`: `var(--combobox-chips-shadow)` - `--combobox-empty-font-size`: `var(--combobox-empty-font-size)` → `1rem` - `--combobox-empty-foreground`: `var(--combobox-empty-foreground)` → `#737373` - `--combobox-empty-padding-y`: `var(--combobox-empty-padding-y)` → `1rem` - `--combobox-item-font-size`: `var(--combobox-item-font-size)` → `0.875rem` - `--combobox-item-foreground-disabled`: `var(--combobox-item-foreground-disabled)` → `#0a0a0a` - `--combobox-item-gap`: `var(--combobox-item-gap)` → `0.5rem` - `--combobox-item-padding-left`: `var(--combobox-item-padding-left)` → `0.5rem` - `--combobox-item-padding-right`: `var(--combobox-item-padding-right)` → `0.5rem` - `--combobox-item-padding-y`: `var(--combobox-item-padding-y)` → `0.25rem` - `--combobox-item-radius`: `var(--combobox-item-radius)` → `0.2344rem` - `--combobox-label-font-size`: `var(--combobox-label-font-size)` → `0.875rem` - `--combobox-label-foreground`: `var(--combobox-label-foreground)` → `#737373` - `--combobox-label-padding-x`: `var(--combobox-label-padding-x)` → `0.5rem` - `--combobox-label-padding-y`: `var(--combobox-label-padding-y)` → `0.25rem` - `--combobox-list-padding`: `var(--combobox-list-padding)` → `0.5rem` - `--combobox-separator-background`: `var(--combobox-separator-background)` → `#e5e5e5` - `--combobox-separator-margin-x`: `var(--combobox-separator-margin-x)` → `0.25rem` - `--combobox-separator-margin-y`: `var(--combobox-separator-margin-y)` → `0.25rem` - `--combobox-trigger-background`: `var(--combobox-trigger-background)` - `--combobox-trigger-background-disabled`: `var(--combobox-trigger-background-disabled)` - `--combobox-trigger-background-readonly`: `var(--combobox-trigger-background-readonly)` - `--combobox-trigger-border`: `var(--combobox-trigger-border)` - `--combobox-trigger-border-disabled`: `var(--combobox-trigger-border-disabled)` - `--combobox-trigger-border-readonly`: `var(--combobox-trigger-border-readonly)` - `--combobox-trigger-font-size-lg`: `var(--combobox-trigger-font-size-lg)` - `--combobox-trigger-font-size-md`: `var(--combobox-trigger-font-size-md)` - `--combobox-trigger-font-size-sm`: `var(--combobox-trigger-font-size-sm)` - `--combobox-trigger-font-size-xl`: `var(--combobox-trigger-font-size-xl)` - `--combobox-trigger-font-size-xs`: `var(--combobox-trigger-font-size-xs)` - `--combobox-trigger-foreground`: `var(--combobox-trigger-foreground)` - `--combobox-trigger-foreground-disabled`: `var(--combobox-trigger-foreground-disabled)` - `--combobox-trigger-foreground-readonly`: `var(--combobox-trigger-foreground-readonly)` - `--combobox-trigger-height-lg`: `var(--combobox-trigger-height-lg)` - `--combobox-trigger-height-md`: `var(--combobox-trigger-height-md)` - `--combobox-trigger-height-sm`: `var(--combobox-trigger-height-sm)` - `--combobox-trigger-height-xl`: `var(--combobox-trigger-height-xl)` - `--combobox-trigger-height-xs`: `var(--combobox-trigger-height-xs)` - `--combobox-trigger-padding-x-lg`: `var(--combobox-trigger-padding-x-lg)` - `--combobox-trigger-padding-x-md`: `var(--combobox-trigger-padding-x-md)` - `--combobox-trigger-padding-x-sm`: `var(--combobox-trigger-padding-x-sm)` - `--combobox-trigger-padding-x-xl`: `var(--combobox-trigger-padding-x-xl)` - `--combobox-trigger-padding-x-xs`: `var(--combobox-trigger-padding-x-xs)` - `--combobox-trigger-placeholder`: `var(--combobox-trigger-placeholder)` - `--combobox-trigger-radius-lg`: `var(--combobox-trigger-radius-lg)` - `--combobox-trigger-radius-md`: `var(--combobox-trigger-radius-md)` - `--combobox-trigger-radius-sm`: `var(--combobox-trigger-radius-sm)` - `--combobox-trigger-radius-xl`: `var(--combobox-trigger-radius-xl)` - `--combobox-trigger-radius-xs`: `var(--combobox-trigger-radius-xs)` - `--combobox-trigger-shadow`: `var(--combobox-trigger-shadow)` ### Command Command 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/command/command.variants.ts` **Token prefix**: `--command-` _No CVA variants declared._ #### CSS tokens used - `--command-empty-font-size`: `var(--command-empty-font-size)` → `0.875rem` - `--command-empty-padding-y`: `var(--command-empty-padding-y)` → `1.5rem` - `--command-group-foreground`: `var(--command-group-foreground)` → `#0a0a0a` - `--command-group-padding`: `var(--command-group-padding)` → `0.25rem` - `--command-input-background`: `var(--command-input-background)` → `transparent` - `--command-input-background-disabled`: `var(--command-input-background-disabled)` → `#f5f5f5` - `--command-input-font-size`: `var(--command-input-font-size)` → `0.875rem` - `--command-input-foreground-disabled`: `var(--command-input-foreground-disabled)` → `#737373` - `--command-input-height`: `var(--command-input-height)` → `2.25rem` - `--command-input-placeholder`: `var(--command-input-placeholder)` → `#737373` - `--command-input-radius`: `var(--command-input-radius)` → `0.3125rem` - `--command-input-wrapper-gap`: `var(--command-input-wrapper-gap)` → `0.5rem` - `--command-input-wrapper-height`: `var(--command-input-wrapper-height)` → `2.25rem` - `--command-input-wrapper-padding-x`: `var(--command-input-wrapper-padding-x)` → `0.75rem` - `--command-item-background-disabled`: `var(--command-item-background-disabled)` → `#f5f5f5` - `--command-item-background-selected`: `var(--command-item-background-selected)` → `#f5f5f5` - `--command-item-font-size`: `var(--command-item-font-size)` → `0.875rem` - `--command-item-foreground-disabled`: `var(--command-item-foreground-disabled)` → `#737373` - `--command-item-foreground-selected`: `var(--command-item-foreground-selected)` → `#171717` - `--command-item-gap`: `var(--command-item-gap)` → `0.5rem` - `--command-item-padding-x`: `var(--command-item-padding-x)` → `0.5rem` - `--command-item-padding-y`: `var(--command-item-padding-y)` → `0.5rem` - `--command-item-radius`: `var(--command-item-radius)` → `0.2344rem` - `--command-separator-background`: `var(--command-separator-background)` → `#e5e5e5` - `--command-separator-margin-x`: `var(--command-separator-margin-x)` - `--command-shortcut-font-size`: `var(--command-shortcut-font-size)` → `0.75rem` - `--command-shortcut-foreground`: `var(--command-shortcut-foreground)` → `#737373` ### ContextMenu Context Menu 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/context-menu/context-menu.variants.ts` **Layout**: gap: `var(--context-menu-item-gap)` → `0.25rem` **Token prefix**: `--context-menu-` _No CVA variants declared._ #### CSS tokens used - `--context-menu-checkbox-item-background-focus`: `var(--context-menu-checkbox-item-background-focus)` → `#f5f5f5` - `--context-menu-checkbox-item-font-size`: `var(--context-menu-checkbox-item-font-size)` → `0.875rem` - `--context-menu-checkbox-item-foreground-disabled`: `var(--context-menu-checkbox-item-foreground-disabled)` - `--context-menu-checkbox-item-foreground-focus`: `var(--context-menu-checkbox-item-foreground-focus)` → `#171717` - `--context-menu-checkbox-item-gap`: `var(--context-menu-checkbox-item-gap)` → `0.25rem` - `--context-menu-checkbox-item-padding-left`: `var(--context-menu-checkbox-item-padding-left)` → `2rem` - `--context-menu-checkbox-item-padding-right`: `var(--context-menu-checkbox-item-padding-right)` → `0.5rem` - `--context-menu-checkbox-item-padding-y`: `var(--context-menu-checkbox-item-padding-y)` → `0.25rem` - `--context-menu-checkbox-item-radius`: `var(--context-menu-checkbox-item-radius)` → `0.2344rem` - `--context-menu-item-background-focus`: `var(--context-menu-item-background-focus)` → `#f5f5f5` - `--context-menu-item-font-size`: `var(--context-menu-item-font-size)` → `0.875rem` - `--context-menu-item-foreground-disabled`: `var(--context-menu-item-foreground-disabled)` - `--context-menu-item-foreground-focus`: `var(--context-menu-item-foreground-focus)` → `#171717` - `--context-menu-item-gap`: `var(--context-menu-item-gap)` → `0.25rem` - `--context-menu-item-padding-x`: `var(--context-menu-item-padding-x)` → `0.5rem` - `--context-menu-item-padding-y`: `var(--context-menu-item-padding-y)` → `0.25rem` - `--context-menu-item-radius`: `var(--context-menu-item-radius)` → `0.2344rem` - `--context-menu-label-font-size`: `var(--context-menu-label-font-size)` → `0.875rem` - `--context-menu-label-font-weight`: `var(--context-menu-label-font-weight)` → `500` - `--context-menu-label-foreground`: `var(--context-menu-label-foreground)` → `#737373` - `--context-menu-label-padding-x`: `var(--context-menu-label-padding-x)` → `0.25rem` - `--context-menu-label-padding-y`: `var(--context-menu-label-padding-y)` → `0.25rem` - `--context-menu-radio-item-background-focus`: `var(--context-menu-radio-item-background-focus)` → `#f5f5f5` - `--context-menu-radio-item-font-size`: `var(--context-menu-radio-item-font-size)` → `0.875rem` - `--context-menu-radio-item-foreground-disabled`: `var(--context-menu-radio-item-foreground-disabled)` - `--context-menu-radio-item-foreground-focus`: `var(--context-menu-radio-item-foreground-focus)` → `#171717` - `--context-menu-radio-item-gap`: `var(--context-menu-radio-item-gap)` → `0.25rem` - `--context-menu-radio-item-padding-left`: `var(--context-menu-radio-item-padding-left)` → `0.5rem` - `--context-menu-radio-item-padding-right`: `var(--context-menu-radio-item-padding-right)` → `0.5rem` - `--context-menu-radio-item-padding-y`: `var(--context-menu-radio-item-padding-y)` → `0.25rem` - `--context-menu-radio-item-radius`: `var(--context-menu-radio-item-radius)` → `0.2344rem` - `--context-menu-separator-background`: `var(--context-menu-separator-background)` → `#e5e5e5` - `--context-menu-separator-margin-x`: `var(--context-menu-separator-margin-x)` - `--context-menu-separator-margin-y`: `var(--context-menu-separator-margin-y)` → `0.25rem` - `--context-menu-shortcut-font-size`: `var(--context-menu-shortcut-font-size)` → `0.875rem` - `--context-menu-shortcut-foreground`: `var(--context-menu-shortcut-foreground)` → `#737373` - `--context-menu-sub-trigger-background-focus`: `var(--context-menu-sub-trigger-background-focus)` → `#f5f5f5` - `--context-menu-sub-trigger-background-open`: `var(--context-menu-sub-trigger-background-open)` → `#f5f5f5` - `--context-menu-sub-trigger-font-size`: `var(--context-menu-sub-trigger-font-size)` → `0.875rem` - `--context-menu-sub-trigger-foreground-focus`: `var(--context-menu-sub-trigger-foreground-focus)` → `#171717` - `--context-menu-sub-trigger-foreground-open`: `var(--context-menu-sub-trigger-foreground-open)` → `#171717` - `--context-menu-sub-trigger-padding-x`: `var(--context-menu-sub-trigger-padding-x)` → `0.5rem` - `--context-menu-sub-trigger-padding-y`: `var(--context-menu-sub-trigger-padding-y)` → `0.5rem` - `--context-menu-sub-trigger-radius`: `var(--context-menu-sub-trigger-radius)` → `0.2344rem` ### DatePicker Date Picker 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/date-picker/date-picker.variants.ts` **Layout**: justify: SPACE_BETWEEN **Token prefix**: `--date-picker-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 5 | 5 | | `sm` | 5 | 5 | | `md` (default) | 5 | 5 | | `lg` | 5 | 5 | | `xl` | 5 | 5 | #### CSS tokens used - `--date-picker-background`: `var(--date-picker-background)` - `--date-picker-background-disabled`: `var(--date-picker-background-disabled)` - `--date-picker-background-readonly`: `var(--date-picker-background-readonly)` - `--date-picker-background-selection`: `var(--date-picker-background-selection)` - `--date-picker-border`: `var(--date-picker-border)` - `--date-picker-border-disabled`: `var(--date-picker-border-disabled)` - `--date-picker-border-readonly`: `var(--date-picker-border-readonly)` - `--date-picker-font-size-lg`: `var(--date-picker-font-size-lg)` - `--date-picker-font-size-md`: `var(--date-picker-font-size-md)` - `--date-picker-font-size-sm`: `var(--date-picker-font-size-sm)` - `--date-picker-font-size-xl`: `var(--date-picker-font-size-xl)` - `--date-picker-font-size-xs`: `var(--date-picker-font-size-xs)` - `--date-picker-foreground`: `var(--date-picker-foreground)` - `--date-picker-foreground-disabled`: `var(--date-picker-foreground-disabled)` - `--date-picker-foreground-readonly`: `var(--date-picker-foreground-readonly)` - `--date-picker-foreground-selection`: `var(--date-picker-foreground-selection)` - `--date-picker-height-lg`: `var(--date-picker-height-lg)` - `--date-picker-height-md`: `var(--date-picker-height-md)` - `--date-picker-height-sm`: `var(--date-picker-height-sm)` - `--date-picker-height-xl`: `var(--date-picker-height-xl)` - `--date-picker-height-xs`: `var(--date-picker-height-xs)` - `--date-picker-padding-x-lg`: `var(--date-picker-padding-x-lg)` - `--date-picker-padding-x-md`: `var(--date-picker-padding-x-md)` - `--date-picker-padding-x-sm`: `var(--date-picker-padding-x-sm)` - `--date-picker-padding-x-xl`: `var(--date-picker-padding-x-xl)` - `--date-picker-padding-x-xs`: `var(--date-picker-padding-x-xs)` - `--date-picker-placeholder`: `var(--date-picker-placeholder)` - `--date-picker-radius-lg`: `var(--date-picker-radius-lg)` - `--date-picker-radius-md`: `var(--date-picker-radius-md)` - `--date-picker-radius-sm`: `var(--date-picker-radius-sm)` - `--date-picker-radius-xl`: `var(--date-picker-radius-xl)` - `--date-picker-radius-xs`: `var(--date-picker-radius-xs)` - `--date-picker-shadow`: `var(--date-picker-shadow)` ### Dialog Dialog 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/dialog/dialog.variants.ts` **Layout**: gap: `var(--dialog-content-gap)` → `0px` · border: 1px solid **Token prefix**: `--dialog-` _No CVA variants declared._ #### CSS tokens used - `--dialog-body-padding`: `var(--dialog-body-padding)` → `0px` - `--dialog-content-background`: `var(--dialog-content-background)` → `#ffffff` - `--dialog-content-border`: `var(--dialog-content-border)` → `#e5e5e5` - `--dialog-content-font-size`: `var(--dialog-content-font-size)` → `0.875rem` - `--dialog-content-gap`: `var(--dialog-content-gap)` → `0px` - `--dialog-content-radius`: `var(--dialog-content-radius)` → `0.4688rem` - `--dialog-content-shadow`: `var(--dialog-content-shadow)` - `--dialog-description-font-size`: `var(--dialog-description-font-size)` → `0.875rem` - `--dialog-description-foreground`: `var(--dialog-description-foreground)` → `#737373` - `--dialog-footer-background`: `var(--dialog-footer-background)` → `#ffffff` - `--dialog-footer-border`: `var(--dialog-footer-border)` → `#e5e5e5` - `--dialog-footer-gap`: `var(--dialog-footer-gap)` → `1rem` - `--dialog-footer-padding-x`: `var(--dialog-footer-padding-x)` → `1.25rem` - `--dialog-footer-padding-y`: `var(--dialog-footer-padding-y)` → `0.75rem` - `--dialog-header-background`: `var(--dialog-header-background)` → `#f5f5f5` - `--dialog-header-border`: `var(--dialog-header-border)` → `#e5e5e5` - `--dialog-header-gap`: `var(--dialog-header-gap)` → `0.5rem` - `--dialog-header-padding-x`: `var(--dialog-header-padding-x)` → `1.25rem` - `--dialog-header-padding-y`: `var(--dialog-header-padding-y)` → `0.75rem` - `--dialog-overlay-background`: `var(--dialog-overlay-background)` - `--dialog-title-font-size`: `var(--dialog-title-font-size)` → `1.5rem` - `--dialog-title-font-weight`: `var(--dialog-title-font-weight)` → `700` ### Drawer Drawer 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/drawer/drawer.variants.ts` **Token prefix**: `--drawer-` _No CVA variants declared._ #### CSS tokens used - `--drawer-content-background`: `var(--drawer-content-background)` - `--drawer-content-font-size`: `var(--drawer-content-font-size)` - `--drawer-description-font-size`: `var(--drawer-description-font-size)` - `--drawer-description-foreground`: `var(--drawer-description-foreground)` - `--drawer-footer-gap`: `var(--drawer-footer-gap)` - `--drawer-footer-padding`: `var(--drawer-footer-padding)` - `--drawer-header-gap`: `var(--drawer-header-gap)` - `--drawer-header-padding`: `var(--drawer-header-padding)` - `--drawer-overlay-background`: `var(--drawer-overlay-background)` - `--drawer-title-font-weight`: `var(--drawer-title-font-weight)` - `--drawer-title-foreground`: `var(--drawer-title-foreground)` ### DropdownMenu Dropdown Menu 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/dropdown-menu/dropdown-menu.variants.ts` **Layout**: gap: `var(--dropdown-menu-checkbox-item-gap)` → `0.5rem` **Token prefix**: `--dropdown-menu-` _No CVA variants declared._ #### CSS tokens used - `--dropdown-menu-checkbox-item-background-focus`: `var(--dropdown-menu-checkbox-item-background-focus)` → `#f5f5f5` - `--dropdown-menu-checkbox-item-font-size`: `var(--dropdown-menu-checkbox-item-font-size)` → `0.875rem` - `--dropdown-menu-checkbox-item-foreground-disabled`: `var(--dropdown-menu-checkbox-item-foreground-disabled)` - `--dropdown-menu-checkbox-item-foreground-focus`: `var(--dropdown-menu-checkbox-item-foreground-focus)` → `#171717` - `--dropdown-menu-checkbox-item-gap`: `var(--dropdown-menu-checkbox-item-gap)` → `0.5rem` - `--dropdown-menu-checkbox-item-padding-x`: `var(--dropdown-menu-checkbox-item-padding-x)` → `0.5rem` - `--dropdown-menu-checkbox-item-radius`: `var(--dropdown-menu-checkbox-item-radius)` → `0.2344rem` - `--dropdown-menu-item-background-focus`: `var(--dropdown-menu-item-background-focus)` → `#f5f5f5` - `--dropdown-menu-item-font-size`: `var(--dropdown-menu-item-font-size)` → `0.875rem` - `--dropdown-menu-item-foreground-disabled`: `var(--dropdown-menu-item-foreground-disabled)` - `--dropdown-menu-item-foreground-focus`: `var(--dropdown-menu-item-foreground-focus)` → `#171717` - `--dropdown-menu-item-gap`: `var(--dropdown-menu-item-gap)` → `0.5rem` - `--dropdown-menu-item-padding-x`: `var(--dropdown-menu-item-padding-x)` → `0.5rem` - `--dropdown-menu-item-padding-y`: `var(--dropdown-menu-item-padding-y)` → `0.375rem` - `--dropdown-menu-item-radius`: `var(--dropdown-menu-item-radius)` → `0.1563rem` - `--dropdown-menu-label-font-size`: `var(--dropdown-menu-label-font-size)` → `0.875rem` - `--dropdown-menu-label-font-weight`: `var(--dropdown-menu-label-font-weight)` → `500` - `--dropdown-menu-label-padding-x`: `var(--dropdown-menu-label-padding-x)` → `0.5rem` - `--dropdown-menu-label-padding-y`: `var(--dropdown-menu-label-padding-y)` → `0.375rem` - `--dropdown-menu-radio-item-background-focus`: `var(--dropdown-menu-radio-item-background-focus)` → `#f5f5f5` - `--dropdown-menu-radio-item-font-size`: `var(--dropdown-menu-radio-item-font-size)` → `0.875rem` - `--dropdown-menu-radio-item-foreground-disabled`: `var(--dropdown-menu-radio-item-foreground-disabled)` - `--dropdown-menu-radio-item-foreground-focus`: `var(--dropdown-menu-radio-item-foreground-focus)` → `#171717` - `--dropdown-menu-radio-item-gap`: `var(--dropdown-menu-radio-item-gap)` → `0.5rem` - `--dropdown-menu-radio-item-padding-x`: `var(--dropdown-menu-radio-item-padding-x)` → `0.5rem` - `--dropdown-menu-radio-item-radius`: `var(--dropdown-menu-radio-item-radius)` → `0.2344rem` - `--dropdown-menu-separator-background`: `var(--dropdown-menu-separator-background)` → `#e5e5e5` - `--dropdown-menu-separator-margin-x`: `var(--dropdown-menu-separator-margin-x)` - `--dropdown-menu-separator-margin-y`: `var(--dropdown-menu-separator-margin-y)` → `0.25rem` - `--dropdown-menu-shortcut-font-size`: `var(--dropdown-menu-shortcut-font-size)` → `0.75rem` - `--dropdown-menu-shortcut-foreground`: `var(--dropdown-menu-shortcut-foreground)` → `#737373` - `--dropdown-menu-sub-trigger-background-focus`: `var(--dropdown-menu-sub-trigger-background-focus)` → `#f5f5f5` - `--dropdown-menu-sub-trigger-font-size`: `var(--dropdown-menu-sub-trigger-font-size)` → `0.875rem` - `--dropdown-menu-sub-trigger-foreground-focus`: `var(--dropdown-menu-sub-trigger-foreground-focus)` → `#171717` - `--dropdown-menu-sub-trigger-gap`: `var(--dropdown-menu-sub-trigger-gap)` → `0.5rem` - `--dropdown-menu-sub-trigger-padding-x`: `var(--dropdown-menu-sub-trigger-padding-x)` → `0.5rem` - `--dropdown-menu-sub-trigger-padding-y`: `var(--dropdown-menu-sub-trigger-padding-y)` → `0.375rem` - `--dropdown-menu-sub-trigger-radius`: `var(--dropdown-menu-sub-trigger-radius)` → `0.1563rem` ### Empty Empty 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/empty/empty.variants.ts` **Layout**: gap: `var(--empty-gap)` → `1rem` **Token prefix**: `--empty-` #### `variant` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 1 | 1 | | `icon` | 4 | 4 | #### CSS tokens used - `--empty-content-font-size`: `var(--empty-content-font-size)` → `0.875rem` - `--empty-content-gap`: `var(--empty-content-gap)` → `1rem` - `--empty-description-font-size`: `var(--empty-description-font-size)` → `0.875rem` - `--empty-description-foreground`: `var(--empty-description-foreground)` → `#737373` - `--empty-gap`: `var(--empty-gap)` → `1rem` - `--empty-header-gap`: `var(--empty-header-gap)` → `0.5rem` - `--empty-media-background-default`: `var(--empty-media-background-default)` → `transparent` - `--empty-media-background-icon`: `var(--empty-media-background-icon)` → `#f5f5f5` - `--empty-media-foreground-icon`: `var(--empty-media-foreground-icon)` → `#0a0a0a` - `--empty-media-radius-icon`: `var(--empty-media-radius-icon)` → `0.2344rem` - `--empty-media-size-icon`: `var(--empty-media-size-icon)` → `2.5rem` - `--empty-padding`: `var(--empty-padding)` → `3rem` - `--empty-radius`: `var(--empty-radius)` → `0.2344rem` - `--empty-title-font-size`: `var(--empty-title-font-size)` → `1.125rem` - `--empty-title-font-weight`: `var(--empty-title-font-weight)` → `500` ### Field **Source**: `packages/ui-foundation/src/components/ui/field/field.variants.ts` **Layout**: display: flex · direction: VERTICAL · gap: `var(--field-set-gap)` **Token prefix**: `--field-` _No CVA variants declared._ #### CSS tokens used - `--field-content-gap`: `var(--field-content-gap)` - `--field-description-font-size`: `var(--field-description-font-size)` - `--field-description-foreground`: `var(--field-description-foreground)` - `--field-error-font-size`: `var(--field-error-font-size)` - `--field-error-font-weight`: `var(--field-error-font-weight)` - `--field-gap`: `var(--field-gap)` - `--field-group-gap`: `var(--field-group-gap)` - `--field-label-gap`: `var(--field-label-gap)` - `--field-legend-font-size-label`: `var(--field-legend-font-size-label)` - `--field-legend-font-size-legend`: `var(--field-legend-font-size-legend)` - `--field-legend-font-weight`: `var(--field-legend-font-weight)` - `--field-legend-margin-bottom`: `var(--field-legend-margin-bottom)` - `--field-separator-background`: `var(--field-separator-background)` - `--field-separator-font-size`: `var(--field-separator-font-size)` - `--field-separator-foreground`: `var(--field-separator-foreground)` - `--field-separator-height`: `var(--field-separator-height)` - `--field-separator-margin-bottom`: `var(--field-separator-margin-bottom)` - `--field-separator-margin-top`: `var(--field-separator-margin-top)` - `--field-separator-margin-x`: `var(--field-separator-margin-x)` - `--field-set-gap`: `var(--field-set-gap)` - `--field-title-font-size`: `var(--field-title-font-size)` - `--field-title-font-weight`: `var(--field-title-font-weight)` - `--field-title-gap`: `var(--field-title-gap)` ### FileUpload File Upload 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/file-upload/file-upload.variants.ts` **Token prefix**: `--file-upload-` _No CVA variants declared._ #### CSS tokens used - `--file-upload-description-font-size`: `var(--file-upload-description-font-size)` → `0.875rem` - `--file-upload-description-foreground`: `var(--file-upload-description-foreground)` → `#737373` - `--file-upload-drop-zone-background`: `var(--file-upload-drop-zone-background)` → `#ffffff` - `--file-upload-drop-zone-background-disabled`: `var(--file-upload-drop-zone-background-disabled)` - `--file-upload-drop-zone-background-dragging`: `var(--file-upload-drop-zone-background-dragging)` - `--file-upload-drop-zone-border`: `var(--file-upload-drop-zone-border)` → `#e5e5e5` - `--file-upload-drop-zone-border-disabled`: `var(--file-upload-drop-zone-border-disabled)` - `--file-upload-drop-zone-border-dragging`: `var(--file-upload-drop-zone-border-dragging)` → `#737373` - `--file-upload-drop-zone-padding-x`: `var(--file-upload-drop-zone-padding-x)` → `1.5rem` - `--file-upload-drop-zone-padding-y`: `var(--file-upload-drop-zone-padding-y)` → `2rem` - `--file-upload-drop-zone-radius`: `var(--file-upload-drop-zone-radius)` → `0.3125rem` - `--file-upload-file-item-background`: `var(--file-upload-file-item-background)` → `#ffffff` - `--file-upload-file-item-border`: `var(--file-upload-file-item-border)` → `#e5e5e5` - `--file-upload-file-item-font-size`: `var(--file-upload-file-item-font-size)` → `0.875rem` - `--file-upload-file-item-foreground`: `var(--file-upload-file-item-foreground)` → `#0a0a0a` - `--file-upload-file-item-gap`: `var(--file-upload-file-item-gap)` → `0.5rem` - `--file-upload-file-item-padding-x`: `var(--file-upload-file-item-padding-x)` → `0.75rem` - `--file-upload-file-item-padding-y`: `var(--file-upload-file-item-padding-y)` → `0.5rem` - `--file-upload-file-item-radius`: `var(--file-upload-file-item-radius)` → `0.2344rem` - `--file-upload-file-list-gap`: `var(--file-upload-file-list-gap)` → `0.5rem` - `--file-upload-font-weight`: `var(--file-upload-font-weight)` → `400` ### Form **Source**: `packages/ui-foundation/src/components/ui/form/form.variants.ts` **Layout**: display: flex · direction: VERTICAL **Token prefix**: `--form-` _No CVA variants declared._ #### CSS tokens used - `--form-gap-x`: `var(--form-gap-x)` → `0.5rem` - `--form-gap-y`: `var(--form-gap-y)` → `0.5rem` ### FormItem.tsx Form Item 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/form-item/form-item.tsx` _No CVA variants declared._ ### FullCalendar **Source**: `packages/ui-foundation/src/components/ui/full-calendar/full-calendar.variants.ts` **Token prefix**: `--full-calendar-` _No CVA variants declared._ #### CSS tokens used - `--full-calendar-common-background`: `var(--full-calendar-common-background)` → `#ffffff` - `--full-calendar-common-background-selection`: `var(--full-calendar-common-background-selection)` → `#0a0a0a` - `--full-calendar-common-border`: `var(--full-calendar-common-border)` → `#e5e5e5` - `--full-calendar-common-border-selection`: `var(--full-calendar-common-border-selection)` → `#171717` - `--full-calendar-common-day-name-background`: `var(--full-calendar-common-day-name-background)` → `#f5f5f5` - `--full-calendar-common-day-name-foreground`: `var(--full-calendar-common-day-name-foreground)` → `#737373` - `--full-calendar-common-exceed-foreground`: `var(--full-calendar-common-exceed-foreground)` → `#60a5fa` - `--full-calendar-common-exceed-foreground-hover`: `var(--full-calendar-common-exceed-foreground-hover)` → `#2563eb` - `--full-calendar-common-holiday-foreground`: `var(--full-calendar-common-holiday-foreground)` → `#ef4444` - `--full-calendar-common-saturday-foreground`: `var(--full-calendar-common-saturday-foreground)` → `#3b82f6` - `--full-calendar-common-today-background`: `var(--full-calendar-common-today-background)` - `--full-calendar-common-today-foreground`: `var(--full-calendar-common-today-foreground)` → `#0a0a0a` - `--full-calendar-container-background`: `var(--full-calendar-container-background)` → `#ffffff` - `--full-calendar-container-border`: `var(--full-calendar-container-border)` → `#e5e5e5` - `--full-calendar-container-radius`: `var(--full-calendar-container-radius)` → `0.3125rem` - `--full-calendar-more-popup-background`: `var(--full-calendar-more-popup-background)` → `#ffffff` - `--full-calendar-more-popup-border`: `var(--full-calendar-more-popup-border)` → `#e5e5e5` - `--full-calendar-more-popup-close-background-hover`: `var(--full-calendar-more-popup-close-background-hover)` → `#f5f5f5` - `--full-calendar-more-popup-close-foreground`: `var(--full-calendar-more-popup-close-foreground)` → `#737373` - `--full-calendar-more-popup-close-foreground-hover`: `var(--full-calendar-more-popup-close-foreground-hover)` → `#737373` - `--full-calendar-more-popup-header-border`: `var(--full-calendar-more-popup-header-border)` → `#e5e5e5` - `--full-calendar-more-popup-header-padding-x`: `var(--full-calendar-more-popup-header-padding-x)` → `0.75rem` - `--full-calendar-more-popup-header-padding-y`: `var(--full-calendar-more-popup-header-padding-y)` → `0.5rem` - `--full-calendar-more-popup-item-gap`: `var(--full-calendar-more-popup-item-gap)` → `0.5rem` - `--full-calendar-more-popup-item-padding-x`: `var(--full-calendar-more-popup-item-padding-x)` → `0.75rem` - `--full-calendar-more-popup-item-padding-y`: `var(--full-calendar-more-popup-item-padding-y)` → `0.375rem` - `--full-calendar-more-popup-item-title-font-size`: `var(--full-calendar-more-popup-item-title-font-size)` → `0.875rem` - `--full-calendar-more-popup-item-title-foreground`: `var(--full-calendar-more-popup-item-title-foreground)` → `#0a0a0a` - `--full-calendar-more-popup-radius`: `var(--full-calendar-more-popup-radius)` → `0.3125rem` - `--full-calendar-more-popup-shadow`: `var(--full-calendar-more-popup-shadow)` - `--full-calendar-more-popup-title-font-size`: `var(--full-calendar-more-popup-title-font-size)` → `0.875rem` - `--full-calendar-more-popup-title-font-weight`: `var(--full-calendar-more-popup-title-font-weight)` → `600` - `--full-calendar-more-popup-title-foreground`: `var(--full-calendar-more-popup-title-foreground)` → `#0a0a0a` - `--full-calendar-restriction-background-custom`: `var(--full-calendar-restriction-background-custom)` - `--full-calendar-restriction-background-deadline`: `var(--full-calendar-restriction-background-deadline)` - `--full-calendar-restriction-background-drag`: `var(--full-calendar-restriction-background-drag)` → `#f5f5f5` - `--full-calendar-restriction-background-holiday`: `var(--full-calendar-restriction-background-holiday)` - `--full-calendar-restriction-background-milestone`: `var(--full-calendar-restriction-background-milestone)` - `--full-calendar-restriction-foreground`: `var(--full-calendar-restriction-foreground)` → `#0a0a0a` ### HoverCard Hover Card 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/hover-card/hover-card.variants.ts` **Token prefix**: `--hover-card-` _No CVA variants declared._ #### CSS tokens used - `--hover-card-content-font-size`: `var(--hover-card-content-font-size)` → `1rem` - `--hover-card-content-padding`: `var(--hover-card-content-padding)` → `1rem` - `--hover-card-content-radius`: `var(--hover-card-content-radius)` → `0.3125rem` - `--hover-card-content-shadow`: `var(--hover-card-content-shadow)` ### Iframe.tsx **Source**: `packages/ui-foundation/src/components/ui/iframe/iframe.tsx` _No CVA variants declared._ ### Image.tsx **Source**: `packages/ui-foundation/src/components/ui/image/image.tsx` _No CVA variants declared._ ### Input Input 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/input/input.variants.ts` **Layout**: border: 1px solid **Token prefix**: `--input-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 5 | 5 | | `sm` | 5 | 5 | | `md` (default) | 5 | 5 | | `lg` | 5 | 5 | | `xl` | 5 | 5 | #### CSS tokens used - `--input-background`: `var(--input-background)` - `--input-background-disabled`: `var(--input-background-disabled)` - `--input-background-readonly`: `var(--input-background-readonly)` - `--input-background-selection`: `var(--input-background-selection)` - `--input-border`: `var(--input-border)` - `--input-border-disabled`: `var(--input-border-disabled)` - `--input-border-readonly`: `var(--input-border-readonly)` - `--input-font-size-lg`: `var(--input-font-size-lg)` - `--input-font-size-md`: `var(--input-font-size-md)` - `--input-font-size-sm`: `var(--input-font-size-sm)` - `--input-font-size-xl`: `var(--input-font-size-xl)` - `--input-font-size-xs`: `var(--input-font-size-xs)` - `--input-foreground`: `var(--input-foreground)` - `--input-foreground-disabled`: `var(--input-foreground-disabled)` - `--input-foreground-readonly`: `var(--input-foreground-readonly)` - `--input-foreground-selection`: `var(--input-foreground-selection)` - `--input-height-lg`: `var(--input-height-lg)` - `--input-height-md`: `var(--input-height-md)` - `--input-height-sm`: `var(--input-height-sm)` - `--input-height-xl`: `var(--input-height-xl)` - `--input-height-xs`: `var(--input-height-xs)` - `--input-padding-x-lg`: `var(--input-padding-x-lg)` - `--input-padding-x-md`: `var(--input-padding-x-md)` - `--input-padding-x-sm`: `var(--input-padding-x-sm)` - `--input-padding-x-xl`: `var(--input-padding-x-xl)` - `--input-padding-x-xs`: `var(--input-padding-x-xs)` - `--input-placeholder`: `var(--input-placeholder)` - `--input-radius-lg`: `var(--input-radius-lg)` - `--input-radius-md`: `var(--input-radius-md)` - `--input-radius-sm`: `var(--input-radius-sm)` - `--input-radius-xl`: `var(--input-radius-xl)` - `--input-radius-xs`: `var(--input-radius-xs)` - `--input-shadow`: `var(--input-shadow)` ### InputGroup Input Group 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/input-group/input-group.variants.ts` **Layout**: display: flex · align: CENTER · border: 1px solid **Token prefix**: `--input-group-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 3 | 3 | | `sm` | 3 | 3 | | `md` (default) | 3 | 3 | | `lg` | 3 | 3 | | `xl` | 3 | 3 | #### CSS tokens used - `--input-group-addon-font-size`: `var(--input-group-addon-font-size)` → `0.875rem` - `--input-group-addon-font-weight`: `var(--input-group-addon-font-weight)` → `500` - `--input-group-addon-foreground`: `var(--input-group-addon-foreground)` → `#737373` - `--input-group-addon-gap`: `var(--input-group-addon-gap)` → `0.5rem` - `--input-group-addon-padding-y`: `var(--input-group-addon-padding-y)` → `0.375rem` - `--input-group-border`: `var(--input-group-border)` - `--input-group-button-font-size`: `var(--input-group-button-font-size)` → `0.875rem` - `--input-group-button-gap`: `var(--input-group-button-gap)` → `0.5rem` - `--input-group-button-gap-sm`: `var(--input-group-button-gap-sm)` → `0.375rem` - `--input-group-button-gap-xs`: `var(--input-group-button-gap-xs)` → `0.25rem` - `--input-group-button-height-sm`: `var(--input-group-button-height-sm)` → `2rem` - `--input-group-button-height-xs`: `var(--input-group-button-height-xs)` → `1.5rem` - `--input-group-button-padding-x-sm`: `var(--input-group-button-padding-x-sm)` → `0.625rem` - `--input-group-button-padding-x-xs`: `var(--input-group-button-padding-x-xs)` → `0.5rem` - `--input-group-button-size-icon-sm`: `var(--input-group-button-size-icon-sm)` → `2rem` - `--input-group-button-size-icon-xs`: `var(--input-group-button-size-icon-xs)` → `1.5rem` - `--input-group-font-size-lg`: `var(--input-group-font-size-lg)` - `--input-group-font-size-md`: `var(--input-group-font-size-md)` - `--input-group-font-size-sm`: `var(--input-group-font-size-sm)` - `--input-group-font-size-xl`: `var(--input-group-font-size-xl)` - `--input-group-font-size-xs`: `var(--input-group-font-size-xs)` - `--input-group-height-lg`: `var(--input-group-height-lg)` - `--input-group-height-md`: `var(--input-group-height-md)` - `--input-group-height-sm`: `var(--input-group-height-sm)` - `--input-group-height-xl`: `var(--input-group-height-xl)` - `--input-group-height-xs`: `var(--input-group-height-xs)` - `--input-group-padding-x-lg`: `var(--input-group-padding-x-lg)` - `--input-group-padding-x-md`: `var(--input-group-padding-x-md)` - `--input-group-padding-x-sm`: `var(--input-group-padding-x-sm)` - `--input-group-padding-x-xl`: `var(--input-group-padding-x-xl)` - `--input-group-padding-x-xs`: `var(--input-group-padding-x-xs)` - `--input-group-radius-lg`: `var(--input-group-radius-lg)` - `--input-group-radius-md`: `var(--input-group-radius-md)` - `--input-group-radius-sm`: `var(--input-group-radius-sm)` - `--input-group-radius-xl`: `var(--input-group-radius-xl)` - `--input-group-radius-xs`: `var(--input-group-radius-xs)` - `--input-group-shadow`: `var(--input-group-shadow)` - `--input-group-text-font-size`: `var(--input-group-text-font-size)` → `0.875rem` - `--input-group-text-foreground`: `var(--input-group-text-foreground)` → `#737373` - `--input-group-text-gap`: `var(--input-group-text-gap)` → `0.5rem` - `--radius`: `var(--radius)` → `0.625rem` ### InputNumber Input Number 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/input-number/input-number.variants.ts` **Layout**: display: flex · align: CENTER · border: 1px solid **Token prefix**: `--input-number-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 2 | 2 | | `sm` | 2 | 2 | | `md` (default) | 2 | 2 | | `lg` | 2 | 2 | | `xl` | 2 | 2 | #### CSS tokens used - `--input-number-background`: `var(--input-number-background)` - `--input-number-background-disabled`: `var(--input-number-background-disabled)` - `--input-number-background-readonly`: `var(--input-number-background-readonly)` - `--input-number-background-selection`: `var(--input-number-background-selection)` - `--input-number-border`: `var(--input-number-border)` - `--input-number-border-disabled`: `var(--input-number-border-disabled)` - `--input-number-border-readonly`: `var(--input-number-border-readonly)` - `--input-number-button-background`: `var(--input-number-button-background)` - `--input-number-button-background-active`: `var(--input-number-button-background-active)` - `--input-number-button-background-disabled`: `var(--input-number-button-background-disabled)` → `#f5f5f5` - `--input-number-button-background-hover`: `var(--input-number-button-background-hover)` → `#0a0a0a` - `--input-number-button-background-readonly`: `var(--input-number-button-background-readonly)` → `#f5f5f5` - `--input-number-button-border`: `var(--input-number-button-border)` - `--input-number-button-border-active`: `var(--input-number-button-border-active)` - `--input-number-button-border-disabled`: `var(--input-number-button-border-disabled)` - `--input-number-button-border-hover`: `var(--input-number-button-border-hover)` - `--input-number-button-border-readonly`: `var(--input-number-button-border-readonly)` - `--input-number-button-foreground`: `var(--input-number-button-foreground)` → `#0a0a0a` - `--input-number-button-foreground-active`: `var(--input-number-button-foreground-active)` → `#0a0a0a` - `--input-number-button-foreground-disabled`: `var(--input-number-button-foreground-disabled)` - `--input-number-button-foreground-hover`: `var(--input-number-button-foreground-hover)` → `#0a0a0a` - `--input-number-button-foreground-readonly`: `var(--input-number-button-foreground-readonly)` - `--input-number-font-size-lg`: `var(--input-number-font-size-lg)` - `--input-number-font-size-md`: `var(--input-number-font-size-md)` - `--input-number-font-size-sm`: `var(--input-number-font-size-sm)` - `--input-number-font-size-xl`: `var(--input-number-font-size-xl)` - `--input-number-font-size-xs`: `var(--input-number-font-size-xs)` - `--input-number-foreground`: `var(--input-number-foreground)` - `--input-number-foreground-disabled`: `var(--input-number-foreground-disabled)` - `--input-number-foreground-readonly`: `var(--input-number-foreground-readonly)` - `--input-number-foreground-selection`: `var(--input-number-foreground-selection)` - `--input-number-height-lg`: `var(--input-number-height-lg)` - `--input-number-height-md`: `var(--input-number-height-md)` - `--input-number-height-sm`: `var(--input-number-height-sm)` - `--input-number-height-xl`: `var(--input-number-height-xl)` - `--input-number-height-xs`: `var(--input-number-height-xs)` - `--input-number-padding-x-lg`: `var(--input-number-padding-x-lg)` - `--input-number-padding-x-md`: `var(--input-number-padding-x-md)` - `--input-number-padding-x-sm`: `var(--input-number-padding-x-sm)` - `--input-number-padding-x-xl`: `var(--input-number-padding-x-xl)` - `--input-number-padding-x-xs`: `var(--input-number-padding-x-xs)` - `--input-number-placeholder`: `var(--input-number-placeholder)` - `--input-number-radius-lg`: `var(--input-number-radius-lg)` - `--input-number-radius-md`: `var(--input-number-radius-md)` - `--input-number-radius-sm`: `var(--input-number-radius-sm)` - `--input-number-radius-xl`: `var(--input-number-radius-xl)` - `--input-number-radius-xs`: `var(--input-number-radius-xs)` - `--input-number-shadow`: `var(--input-number-shadow)` ### InputOtp **Source**: `packages/ui-foundation/src/components/ui/input-otp/input-otp.variants.ts` **Layout**: display: flex · align: CENTER **Token prefix**: `--input-otp-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 1 | 1 | | `sm` | 1 | 1 | | `md` (default) | 1 | 1 | | `lg` | 1 | 1 | | `xl` | 1 | 1 | #### CSS tokens used - `--input-otp-border`: `var(--input-otp-border)` - `--input-otp-font-size-lg`: `var(--input-otp-font-size-lg)` - `--input-otp-font-size-md`: `var(--input-otp-font-size-md)` - `--input-otp-font-size-sm`: `var(--input-otp-font-size-sm)` - `--input-otp-font-size-xl`: `var(--input-otp-font-size-xl)` - `--input-otp-font-size-xs`: `var(--input-otp-font-size-xs)` - `--input-otp-gap`: `var(--input-otp-gap)` → `0.5rem` - `--input-otp-radius-lg`: `var(--input-otp-radius-lg)` - `--input-otp-radius-md`: `var(--input-otp-radius-md)` - `--input-otp-radius-sm`: `var(--input-otp-radius-sm)` - `--input-otp-radius-xl`: `var(--input-otp-radius-xl)` - `--input-otp-radius-xs`: `var(--input-otp-radius-xs)` - `--input-otp-shadow`: `var(--input-otp-shadow)` - `--input-otp-size-lg`: `var(--input-otp-size-lg)` - `--input-otp-size-md`: `var(--input-otp-size-md)` - `--input-otp-size-sm`: `var(--input-otp-size-sm)` - `--input-otp-size-xl`: `var(--input-otp-size-xl)` - `--input-otp-size-xs`: `var(--input-otp-size-xs)` ### Item **Source**: `packages/ui-foundation/src/components/ui/item/item.variants.ts` **Token prefix**: `--item-` #### `variant` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 1 | 1 | | `outline` | 1 | 1 | | `muted` | 1 | 2 | #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 3 | 3 | | `sm` | 3 | 3 | | `xs` | 3 | 3 | #### CSS tokens used - `--item-actions-gap`: `var(--item-actions-gap)` → `0.5rem` - `--item-background-muted`: `var(--item-background-muted)` - `--item-border-default`: `var(--item-border-default)` → `transparent` - `--item-border-outline`: `var(--item-border-outline)` → `#e5e5e5` - `--item-content-gap`: `var(--item-content-gap)` → `0.25rem` - `--item-description-font-size`: `var(--item-description-font-size)` → `0.875rem` - `--item-description-font-weight`: `var(--item-description-font-weight)` → `400` - `--item-description-foreground`: `var(--item-description-foreground)` → `#737373` - `--item-font-size`: `var(--item-font-size)` → `0.875rem` - `--item-footer-gap`: `var(--item-footer-gap)` → `1rem` - `--item-gap-default`: `var(--item-gap-default)` → `0.875rem` - `--item-gap-sm`: `var(--item-gap-sm)` → `0.625rem` - `--item-gap-xs`: `var(--item-gap-xs)` → `0.5rem` - `--item-header-gap`: `var(--item-header-gap)` → `0.5rem` - `--item-media-background-default`: `var(--item-media-background-default)` → `#ffffff` - `--item-media-gap`: `var(--item-media-gap)` → `0.5rem` - `--item-media-radius-image`: `var(--item-media-radius-image)` → `0.1563rem` - `--item-media-size-icon`: `var(--item-media-size-icon)` → `1rem` - `--item-media-size-image`: `var(--item-media-size-image)` → `2.5rem` - `--item-padding-x-default`: `var(--item-padding-x-default)` → `1rem` - `--item-padding-x-sm`: `var(--item-padding-x-sm)` → `0.75rem` - `--item-padding-x-xs`: `var(--item-padding-x-xs)` → `0.625rem` - `--item-padding-y-default`: `var(--item-padding-y-default)` → `0.875rem` - `--item-padding-y-sm`: `var(--item-padding-y-sm)` → `0.625rem` - `--item-padding-y-xs`: `var(--item-padding-y-xs)` → `0.5rem` - `--item-radius`: `var(--item-radius)` → `0.2344rem` - `--item-title-font-size`: `var(--item-title-font-size)` → `1.125rem` - `--item-title-font-weight`: `var(--item-title-font-weight)` → `500` - `--item-title-gap`: `var(--item-title-gap)` → `0.5rem` ### Kanban **Source**: `packages/ui-foundation/src/components/ui/kanban/kanban.variants.ts` **Layout**: gap: `var(--kanban-board-gap)` → `1rem` **Token prefix**: `--kanban-` _No CVA variants declared._ #### CSS tokens used - `--kanban-board-gap`: `var(--kanban-board-gap)` → `1rem` - `--kanban-card-background`: `var(--kanban-card-background)` → `#ffffff` - `--kanban-card-border`: `var(--kanban-card-border)` → `#e5e5e5` - `--kanban-card-font-size`: `var(--kanban-card-font-size)` → `0.875rem` - `--kanban-card-font-weight`: `var(--kanban-card-font-weight)` → `600` - `--kanban-card-foreground`: `var(--kanban-card-foreground)` → `#0a0a0a` - `--kanban-card-padding-x`: `var(--kanban-card-padding-x)` → `0.625rem` - `--kanban-card-padding-y`: `var(--kanban-card-padding-y)` → `0.5rem` - `--kanban-card-radius`: `var(--kanban-card-radius)` → `0.2344rem` - `--kanban-column-background`: `var(--kanban-column-background)` → `#f5f5f5` - `--kanban-column-content-background-drop`: `var(--kanban-column-content-background-drop)` - `--kanban-column-content-gap`: `var(--kanban-column-content-gap)` → `0.5rem` - `--kanban-column-content-radius`: `var(--kanban-column-content-radius)` → `0.2344rem` - `--kanban-column-gap`: `var(--kanban-column-gap)` → `0.5rem` - `--kanban-column-padding`: `var(--kanban-column-padding)` → `0.75rem` - `--kanban-column-radius`: `var(--kanban-column-radius)` → `0.2344rem` - `--kanban-column-title-font-size`: `var(--kanban-column-title-font-size)` → `1rem` - `--kanban-column-title-font-weight`: `var(--kanban-column-title-font-weight)` → `600` ### Kbd Kbd 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/kbd/kbd.variants.ts` **Layout**: gap: `var(--kbd-group-gap)` → `0.25rem` **Token prefix**: `--kbd-` _No CVA variants declared._ #### CSS tokens used - `--kbd-background`: `var(--kbd-background)` → `#f5f5f5` - `--kbd-font-size`: `var(--kbd-font-size)` → `0.75rem` - `--kbd-font-weight`: `var(--kbd-font-weight)` → `500` - `--kbd-foreground`: `var(--kbd-foreground)` → `#737373` - `--kbd-gap`: `var(--kbd-gap)` → `0.25rem` - `--kbd-group-gap`: `var(--kbd-group-gap)` → `0.25rem` - `--kbd-height`: `var(--kbd-height)` → `1.25rem` - `--kbd-min-width`: `var(--kbd-min-width)` → `1.25rem` - `--kbd-padding-x`: `var(--kbd-padding-x)` → `0.25rem` - `--kbd-radius`: `var(--kbd-radius)` → `0.1563rem` ### Label Label 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/label/label.variants.ts` **Layout**: display: flex · align: CENTER · gap: `var(--label-gap)` → `0.25rem` **Token prefix**: `--label-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 1 | 1 | | `sm` | 1 | 1 | | `md` (default) | 1 | 1 | | `lg` | 1 | 1 | | `xl` | 1 | 1 | #### CSS tokens used - `--label-font-size-lg`: `var(--label-font-size-lg)` → `1.125rem` - `--label-font-size-md`: `var(--label-font-size-md)` → `1rem` - `--label-font-size-sm`: `var(--label-font-size-sm)` → `0.875rem` - `--label-font-size-xl`: `var(--label-font-size-xl)` → `1.25rem` - `--label-font-size-xs`: `var(--label-font-size-xs)` → `0.75rem` - `--label-font-weight`: `var(--label-font-weight)` → `500` - `--label-gap`: `var(--label-gap)` → `0.25rem` ### Lookup Lookup 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/lookup/lookup.variants.ts` **Token prefix**: `--lookup-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 2 | 2 | | `sm` | 2 | 2 | | `md` (default) | 2 | 2 | | `lg` | 2 | 2 | | `xl` | 2 | 2 | #### CSS tokens used - `--lookup-background`: `var(--lookup-background)` - `--lookup-background-disabled`: `var(--lookup-background-disabled)` - `--lookup-background-readonly`: `var(--lookup-background-readonly)` - `--lookup-background-selection`: `var(--lookup-background-selection)` - `--lookup-border`: `var(--lookup-border)` - `--lookup-border-disabled`: `var(--lookup-border-disabled)` - `--lookup-border-readonly`: `var(--lookup-border-readonly)` - `--lookup-font-size-lg`: `var(--lookup-font-size-lg)` - `--lookup-font-size-md`: `var(--lookup-font-size-md)` - `--lookup-font-size-sm`: `var(--lookup-font-size-sm)` - `--lookup-font-size-xl`: `var(--lookup-font-size-xl)` - `--lookup-font-size-xs`: `var(--lookup-font-size-xs)` - `--lookup-foreground`: `var(--lookup-foreground)` - `--lookup-foreground-disabled`: `var(--lookup-foreground-disabled)` - `--lookup-foreground-readonly`: `var(--lookup-foreground-readonly)` - `--lookup-foreground-selection`: `var(--lookup-foreground-selection)` - `--lookup-height-lg`: `var(--lookup-height-lg)` - `--lookup-height-md`: `var(--lookup-height-md)` - `--lookup-height-sm`: `var(--lookup-height-sm)` - `--lookup-height-xl`: `var(--lookup-height-xl)` - `--lookup-height-xs`: `var(--lookup-height-xs)` - `--lookup-padding-x-lg`: `var(--lookup-padding-x-lg)` - `--lookup-padding-x-md`: `var(--lookup-padding-x-md)` - `--lookup-padding-x-sm`: `var(--lookup-padding-x-sm)` - `--lookup-padding-x-xl`: `var(--lookup-padding-x-xl)` - `--lookup-padding-x-xs`: `var(--lookup-padding-x-xs)` - `--lookup-placeholder`: `var(--lookup-placeholder)` - `--lookup-radius-lg`: `var(--lookup-radius-lg)` - `--lookup-radius-md`: `var(--lookup-radius-md)` - `--lookup-radius-sm`: `var(--lookup-radius-sm)` - `--lookup-radius-xl`: `var(--lookup-radius-xl)` - `--lookup-radius-xs`: `var(--lookup-radius-xs)` - `--lookup-shadow`: `var(--lookup-shadow)` ### Menubar Menubar 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/menubar/menubar.variants.ts` **Layout**: gap: `var(--menubar-gap)` → `0.5rem` **Token prefix**: `--menubar-` _No CVA variants declared._ #### CSS tokens used - `--menubar-background`: `var(--menubar-background)` → `#ffffff` - `--menubar-border`: `var(--menubar-border)` → `#e5e5e5` - `--menubar-checkbox-item-background`: `var(--menubar-checkbox-item-background)` → `transparent` - `--menubar-checkbox-item-background-focus`: `var(--menubar-checkbox-item-background-focus)` → `#f5f5f5` - `--menubar-checkbox-item-font-size`: `var(--menubar-checkbox-item-font-size)` → `0.875rem` - `--menubar-checkbox-item-foreground`: `var(--menubar-checkbox-item-foreground)` → `#0a0a0a` - `--menubar-checkbox-item-foreground-disabled`: `var(--menubar-checkbox-item-foreground-disabled)` - `--menubar-checkbox-item-foreground-focus`: `var(--menubar-checkbox-item-foreground-focus)` → `#171717` - `--menubar-checkbox-item-gap`: `var(--menubar-checkbox-item-gap)` → `0.25rem` - `--menubar-checkbox-item-padding-left`: `var(--menubar-checkbox-item-padding-left)` → `2rem` - `--menubar-checkbox-item-padding-right`: `var(--menubar-checkbox-item-padding-right)` → `0.5rem` - `--menubar-checkbox-item-padding-y`: `var(--menubar-checkbox-item-padding-y)` → `0.5rem` - `--menubar-checkbox-item-radius`: `var(--menubar-checkbox-item-radius)` → `0.2344rem` - `--menubar-gap`: `var(--menubar-gap)` → `0.5rem` - `--menubar-height`: `var(--menubar-height)` → `2.5rem` - `--menubar-item-background`: `var(--menubar-item-background)` → `transparent` - `--menubar-item-background-focus`: `var(--menubar-item-background-focus)` → `#f5f5f5` - `--menubar-item-font-size`: `var(--menubar-item-font-size)` → `0.875rem` - `--menubar-item-foreground`: `var(--menubar-item-foreground)` → `#0a0a0a` - `--menubar-item-foreground-disabled`: `var(--menubar-item-foreground-disabled)` - `--menubar-item-foreground-focus`: `var(--menubar-item-foreground-focus)` → `#171717` - `--menubar-item-gap`: `var(--menubar-item-gap)` → `0.25rem` - `--menubar-item-padding-x`: `var(--menubar-item-padding-x)` → `0.5rem` - `--menubar-item-padding-y`: `var(--menubar-item-padding-y)` → `0.5rem` - `--menubar-item-radius`: `var(--menubar-item-radius)` → `0.2344rem` - `--menubar-label-font-size`: `var(--menubar-label-font-size)` → `0.875rem` - `--menubar-label-font-weight`: `var(--menubar-label-font-weight)` → `500` - `--menubar-label-padding-x`: `var(--menubar-label-padding-x)` → `0.25rem` - `--menubar-label-padding-y`: `var(--menubar-label-padding-y)` → `0.25rem` - `--menubar-padding-x`: `var(--menubar-padding-x)` → `0.25rem` - `--menubar-radio-item-background`: `var(--menubar-radio-item-background)` → `transparent` - `--menubar-radio-item-background-focus`: `var(--menubar-radio-item-background-focus)` → `#f5f5f5` - `--menubar-radio-item-font-size`: `var(--menubar-radio-item-font-size)` → `0.875rem` - `--menubar-radio-item-foreground`: `var(--menubar-radio-item-foreground)` → `#0a0a0a` - `--menubar-radio-item-foreground-disabled`: `var(--menubar-radio-item-foreground-disabled)` - `--menubar-radio-item-foreground-focus`: `var(--menubar-radio-item-foreground-focus)` → `#171717` - `--menubar-radio-item-gap`: `var(--menubar-radio-item-gap)` → `0.25rem` - `--menubar-radio-item-padding-left`: `var(--menubar-radio-item-padding-left)` → `2rem` - `--menubar-radio-item-padding-right`: `var(--menubar-radio-item-padding-right)` → `0.5rem` - `--menubar-radio-item-padding-y`: `var(--menubar-radio-item-padding-y)` → `0.5rem` - `--menubar-radio-item-radius`: `var(--menubar-radio-item-radius)` → `0.2344rem` - `--menubar-radius`: `var(--menubar-radius)` → `0.2344rem` - `--menubar-separator-background`: `var(--menubar-separator-background)` → `#e5e5e5` - `--menubar-separator-margin-x`: `var(--menubar-separator-margin-x)` - `--menubar-separator-margin-y`: `var(--menubar-separator-margin-y)` → `0.25rem` - `--menubar-shadow`: `var(--menubar-shadow)` - `--menubar-shortcut-font-size`: `var(--menubar-shortcut-font-size)` → `0.75rem` - `--menubar-shortcut-foreground`: `var(--menubar-shortcut-foreground)` → `#737373` - `--menubar-sub-trigger-background`: `var(--menubar-sub-trigger-background)` → `transparent` - `--menubar-sub-trigger-font-size`: `var(--menubar-sub-trigger-font-size)` → `0.875rem` - `--menubar-sub-trigger-foreground`: `var(--menubar-sub-trigger-foreground)` → `#0a0a0a` - `--menubar-sub-trigger-padding-x`: `var(--menubar-sub-trigger-padding-x)` → `0.5rem` - `--menubar-sub-trigger-padding-y`: `var(--menubar-sub-trigger-padding-y)` → `0.5rem` - `--menubar-sub-trigger-radius`: `var(--menubar-sub-trigger-radius)` → `0.2344rem` - `--menubar-trigger-background-focus`: `var(--menubar-trigger-background-focus)` → `#f5f5f5` - `--menubar-trigger-font-size`: `var(--menubar-trigger-font-size)` → `0.875rem` - `--menubar-trigger-font-weight`: `var(--menubar-trigger-font-weight)` → `500` - `--menubar-trigger-foreground-focus`: `var(--menubar-trigger-foreground-focus)` → `#171717` - `--menubar-trigger-padding-x`: `var(--menubar-trigger-padding-x)` → `0.5rem` - `--menubar-trigger-padding-y`: `var(--menubar-trigger-padding-y)` → `0.5rem` - `--menubar-trigger-radius`: `var(--menubar-trigger-radius)` → `0.2344rem` ### Modal Modal 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/modal/modal.variants.ts` **Token prefix**: `--modal-` _No CVA variants declared._ #### CSS tokens used - `--modal-overlay-background`: `var(--modal-overlay-background)` ### NativeSelect Native Select 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/native-select/native-select.variants.ts` **Token prefix**: `--native-select-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 0 | 4 | | `sm` | 0 | 4 | | `md` (default) | 0 | 4 | | `lg` | 0 | 4 | | `xl` | 0 | 4 | #### CSS tokens used - `--native-select-background`: `var(--native-select-background)` → `#ffffff` - `--native-select-background-disabled`: `var(--native-select-background-disabled)` → `transparent` - `--native-select-background-selection`: `var(--native-select-background-selection)` → `#171717` - `--native-select-border`: `var(--native-select-border)` → `#e5e5e5` - `--native-select-border-disabled`: `var(--native-select-border-disabled)` - `--native-select-font-size-lg`: `var(--native-select-font-size-lg)` → `1.125rem` - `--native-select-font-size-md`: `var(--native-select-font-size-md)` → `1rem` - `--native-select-font-size-sm`: `var(--native-select-font-size-sm)` → `0.875rem` - `--native-select-font-size-xl`: `var(--native-select-font-size-xl)` → `1.25rem` - `--native-select-font-size-xs`: `var(--native-select-font-size-xs)` → `0.75rem` - `--native-select-foreground-disabled`: `var(--native-select-foreground-disabled)` → `#737373` - `--native-select-foreground-selection`: `var(--native-select-foreground-selection)` → `#fafafa` - `--native-select-height-lg`: `var(--native-select-height-lg)` → `2.5rem` - `--native-select-height-md`: `var(--native-select-height-md)` → `2.25rem` - `--native-select-height-sm`: `var(--native-select-height-sm)` → `2rem` - `--native-select-height-xl`: `var(--native-select-height-xl)` → `3rem` - `--native-select-height-xs`: `var(--native-select-height-xs)` → `1.5rem` - `--native-select-padding-x-lg`: `var(--native-select-padding-x-lg)` → `0.875rem` - `--native-select-padding-x-md`: `var(--native-select-padding-x-md)` → `0.75rem` - `--native-select-padding-x-sm`: `var(--native-select-padding-x-sm)` → `0.625rem` - `--native-select-padding-x-xl`: `var(--native-select-padding-x-xl)` → `1rem` - `--native-select-padding-x-xs`: `var(--native-select-padding-x-xs)` → `0.625rem` - `--native-select-placeholder`: `var(--native-select-placeholder)` → `#737373` - `--native-select-radius-lg`: `var(--native-select-radius-lg)` → `0.3125rem` - `--native-select-radius-md`: `var(--native-select-radius-md)` → `0.2344rem` - `--native-select-radius-sm`: `var(--native-select-radius-sm)` → `0.1563rem` - `--native-select-radius-xl`: `var(--native-select-radius-xl)` → `0.4688rem` - `--native-select-radius-xs`: `var(--native-select-radius-xs)` → `0.0781rem` - `--native-select-shadow`: `var(--native-select-shadow)` ### NavigationMenu Navigation Menu 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/navigation-menu/navigation-menu.variants.ts` **Token prefix**: `--navigation-menu-` _No CVA variants declared._ #### CSS tokens used - `--navigation-menu-content-background`: `var(--navigation-menu-content-background)` → `#ffffff` - `--navigation-menu-content-foreground`: `var(--navigation-menu-content-foreground)` → `#0a0a0a` - `--navigation-menu-content-padding-inline-end`: `var(--navigation-menu-content-padding-inline-end)` → `0.625rem` - `--navigation-menu-content-padding-inline-start`: `var(--navigation-menu-content-padding-inline-start)` → `0.5rem` - `--navigation-menu-content-padding-y`: `var(--navigation-menu-content-padding-y)` → `0.5rem` - `--navigation-menu-content-radius`: `var(--navigation-menu-content-radius)` → `0.2344rem` - `--navigation-menu-content-shadow`: `var(--navigation-menu-content-shadow)` - `--navigation-menu-link-background-active`: `var(--navigation-menu-link-background-active)` - `--navigation-menu-link-background-focus`: `var(--navigation-menu-link-background-focus)` → `#f5f5f5` - `--navigation-menu-link-background-hover`: `var(--navigation-menu-link-background-hover)` → `#f5f5f5` - `--navigation-menu-link-font-size`: `var(--navigation-menu-link-font-size)` → `0.875rem` - `--navigation-menu-link-gap`: `var(--navigation-menu-link-gap)` → `1rem` - `--navigation-menu-link-padding`: `var(--navigation-menu-link-padding)` → `0.5rem` - `--navigation-menu-link-radius`: `var(--navigation-menu-link-radius)` → `0.1563rem` - `--navigation-menu-popup-background`: `var(--navigation-menu-popup-background)` → `#ffffff` - `--navigation-menu-popup-foreground`: `var(--navigation-menu-popup-foreground)` → `#0a0a0a` - `--navigation-menu-popup-radius`: `var(--navigation-menu-popup-radius)` → `0.3125rem` - `--navigation-menu-popup-shadow`: `var(--navigation-menu-popup-shadow)` - `--navigation-menu-trigger-background`: `var(--navigation-menu-trigger-background)` → `#ffffff` - `--navigation-menu-trigger-background-focus`: `var(--navigation-menu-trigger-background-focus)` → `#f5f5f5` - `--navigation-menu-trigger-background-hover`: `var(--navigation-menu-trigger-background-hover)` → `#f5f5f5` - `--navigation-menu-trigger-background-open`: `var(--navigation-menu-trigger-background-open)` - `--navigation-menu-trigger-font-size`: `var(--navigation-menu-trigger-font-size)` → `0.875rem` - `--navigation-menu-trigger-font-weight`: `var(--navigation-menu-trigger-font-weight)` → `500` - `--navigation-menu-trigger-padding-x`: `var(--navigation-menu-trigger-padding-x)` → `1rem` - `--navigation-menu-trigger-padding-y`: `var(--navigation-menu-trigger-padding-y)` → `0.5rem` - `--navigation-menu-trigger-radius`: `var(--navigation-menu-trigger-radius)` → `0.2344rem` ### OverlayLoading **Source**: `packages/ui-foundation/src/components/ui/overlay-loading/overlay-loading.variants.ts` **Token prefix**: `--overlay-loading-` #### `open` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 1 | 1 | | `false` | 0 | 0 | #### CSS tokens used - `--overlay-loading-dim-background`: `var(--overlay-loading-dim-background)` ### Pagination Pagination 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/pagination/pagination.variants.ts` **Layout**: gap: `var(--pagination-content-gap)` → `0.5rem` **Token prefix**: `--pagination-` _No CVA variants declared._ #### CSS tokens used - `--pagination-content-gap`: `var(--pagination-content-gap)` → `0.5rem` - `--pagination-ellipsis-size`: `var(--pagination-ellipsis-size)` → `2rem` - `--pagination-link-background-active`: `var(--pagination-link-background-active)` → `#f5f5f5` - `--pagination-link-border-active`: `var(--pagination-link-border-active)` → `#d4d4d4` - `--pagination-link-foreground-active`: `var(--pagination-link-foreground-active)` → `#0a0a0a` - `--pagination-next-gap`: `var(--pagination-next-gap)` → `0.25rem` - `--pagination-next-padding-x`: `var(--pagination-next-padding-x)` → `0.5rem` - `--pagination-previous-gap`: `var(--pagination-previous-gap)` → `0.25rem` - `--pagination-previous-padding-x`: `var(--pagination-previous-padding-x)` → `0.5rem` ### Popover Popover 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/popover/popover.variants.ts` **Layout**: border: 1px solid **Token prefix**: `--popover-` _No CVA variants declared._ #### CSS tokens used - `--popover-border`: `var(--popover-border)` → `#e5e5e5` - `--popover-font-size`: `var(--popover-font-size)` → `0.875rem` - `--popover-header-font-size`: `var(--popover-header-font-size)` → `0.875rem` - `--popover-padding`: `var(--popover-padding)` → `0.5rem` - `--popover-radius`: `var(--popover-radius)` → `0.3125rem` - `--popover-shadow`: `var(--popover-shadow)` ### Progress Progress 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/progress/progress.variants.ts` **Token prefix**: `--progress-` _No CVA variants declared._ #### CSS tokens used - `--progress-background`: `var(--progress-background)` → `#f5f5f5` - `--progress-height`: `var(--progress-height)` → `0.5rem` - `--progress-indicator-background`: `var(--progress-indicator-background)` → `#737373` ### RadioGroup RadioGroup 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/radio-group/radio-group.variants.ts` **Token prefix**: `--radio-group-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 1 | 1 | | `sm` | 1 | 1 | | `md` (default) | 1 | 1 | | `lg` | 1 | 1 | | `xl` | 1 | 1 | #### CSS tokens used - `--radio-group-background`: `var(--radio-group-background)` → `#ffffff` - `--radio-group-background-checked`: `var(--radio-group-background-checked)` → `#171717` - `--radio-group-background-checked-disabled`: `var(--radio-group-background-checked-disabled)` - `--radio-group-background-checked-readonly`: `var(--radio-group-background-checked-readonly)` - `--radio-group-background-disabled`: `var(--radio-group-background-disabled)` - `--radio-group-background-readonly`: `var(--radio-group-background-readonly)` - `--radio-group-border`: `var(--radio-group-border)` → `#e5e5e5` - `--radio-group-border-checked`: `var(--radio-group-border-checked)` → `#e5e5e5` - `--radio-group-border-checked-disabled`: `var(--radio-group-border-checked-disabled)` → `#e5e5e5` - `--radio-group-border-checked-readonly`: `var(--radio-group-border-checked-readonly)` → `#e5e5e5` - `--radio-group-border-disabled`: `var(--radio-group-border-disabled)` → `#e5e5e5` - `--radio-group-border-readonly`: `var(--radio-group-border-readonly)` → `#e5e5e5` - `--radio-group-foreground`: `var(--radio-group-foreground)` → `#0a0a0a` - `--radio-group-foreground-checked-disabled`: `var(--radio-group-foreground-checked-disabled)` → `#737373` - `--radio-group-foreground-checked-readonly`: `var(--radio-group-foreground-checked-readonly)` → `#737373` - `--radio-group-foreground-disabled`: `var(--radio-group-foreground-disabled)` → `#737373` - `--radio-group-foreground-readonly`: `var(--radio-group-foreground-readonly)` → `#737373` - `--radio-group-gap-x`: `var(--radio-group-gap-x)` → `1rem` - `--radio-group-gap-y`: `var(--radio-group-gap-y)` → `0.75rem` - `--radio-group-indicator-background`: `var(--radio-group-indicator-background)` → `#ffffff` - `--radio-group-indicator-background-checked`: `var(--radio-group-indicator-background-checked)` → `#ffffff` - `--radio-group-indicator-background-checked-disabled`: `var(--radio-group-indicator-background-checked-disabled)` → `#ffffff` - `--radio-group-indicator-background-checked-readonly`: `var(--radio-group-indicator-background-checked-readonly)` → `#ffffff` - `--radio-group-indicator-background-disabled`: `var(--radio-group-indicator-background-disabled)` → `#ffffff` - `--radio-group-indicator-background-readonly`: `var(--radio-group-indicator-background-readonly)` → `#ffffff` - `--radio-group-indicator-size-lg`: `var(--radio-group-indicator-size-lg)` → `0.875rem` - `--radio-group-indicator-size-md`: `var(--radio-group-indicator-size-md)` → `0.75rem` - `--radio-group-indicator-size-sm`: `var(--radio-group-indicator-size-sm)` → `0.625rem` - `--radio-group-indicator-size-xl`: `var(--radio-group-indicator-size-xl)` → `1rem` - `--radio-group-indicator-size-xs`: `var(--radio-group-indicator-size-xs)` → `0.5rem` - `--radio-group-shadow`: `var(--radio-group-shadow)` - `--radio-group-size-lg`: `var(--radio-group-size-lg)` → `1.75rem` - `--radio-group-size-md`: `var(--radio-group-size-md)` → `1.5rem` - `--radio-group-size-sm`: `var(--radio-group-size-sm)` → `1.25rem` - `--radio-group-size-xl`: `var(--radio-group-size-xl)` → `2rem` - `--radio-group-size-xs`: `var(--radio-group-size-xs)` → `1rem` ### Resizable.tsx Resizable 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/resizable/resizable.tsx` _No CVA variants declared._ ### ScrollArea Scroll Area 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/scroll-area/scroll-area.variants.ts` **Token prefix**: `--scroll-area-` #### `orientation` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `vertical` (default) | 1 | 1 | | `horizontal` | 1 | 1 | #### CSS tokens used - `--scroll-area-scrollbar-height-horizontal`: `var(--scroll-area-scrollbar-height-horizontal)` → `0.5rem` - `--scroll-area-scrollbar-width-vertical`: `var(--scroll-area-scrollbar-width-vertical)` → `0.5rem` ### Select Select 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/select/select.variants.ts` **Token prefix**: `--select-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 5 | 5 | | `sm` | 5 | 5 | | `md` (default) | 5 | 5 | | `lg` | 5 | 5 | | `xl` | 5 | 5 | #### CSS tokens used - `--select-item-background-disabled`: `var(--select-item-background-disabled)` → `transparent` - `--select-item-background-focus`: `var(--select-item-background-focus)` → `#f5f5f5` - `--select-item-background-readonly`: `var(--select-item-background-readonly)` → `transparent` - `--select-item-font-size`: `var(--select-item-font-size)` → `0.875rem` - `--select-item-foreground-disabled`: `var(--select-item-foreground-disabled)` → `#737373` - `--select-item-foreground-focus`: `var(--select-item-foreground-focus)` → `#171717` - `--select-item-foreground-readonly`: `var(--select-item-foreground-readonly)` → `#737373` - `--select-item-gap`: `var(--select-item-gap)` → `0.25rem` - `--select-item-padding-left`: `var(--select-item-padding-left)` → `0.5rem` - `--select-item-padding-right`: `var(--select-item-padding-right)` → `0.25rem` - `--select-item-padding-y`: `var(--select-item-padding-y)` → `0.5rem` - `--select-item-radius`: `var(--select-item-radius)` → `0.2344rem` - `--select-label-font-size`: `var(--select-label-font-size)` → `0.875rem` - `--select-label-foreground`: `var(--select-label-foreground)` → `#171717` - `--select-label-padding-x`: `var(--select-label-padding-x)` → `0.5rem` - `--select-label-padding-y`: `var(--select-label-padding-y)` → `0.5rem` - `--select-separator-background`: `var(--select-separator-background)` → `#e5e5e5` - `--select-separator-margin-x`: `var(--select-separator-margin-x)` → `0.25rem` - `--select-separator-margin-y`: `var(--select-separator-margin-y)` → `0.25rem` - `--select-trigger-background`: `var(--select-trigger-background)` - `--select-trigger-background-disabled`: `var(--select-trigger-background-disabled)` - `--select-trigger-background-readonly`: `var(--select-trigger-background-readonly)` - `--select-trigger-border`: `var(--select-trigger-border)` - `--select-trigger-border-disabled`: `var(--select-trigger-border-disabled)` - `--select-trigger-border-readonly`: `var(--select-trigger-border-readonly)` - `--select-trigger-font-size-lg`: `var(--select-trigger-font-size-lg)` - `--select-trigger-font-size-md`: `var(--select-trigger-font-size-md)` - `--select-trigger-font-size-sm`: `var(--select-trigger-font-size-sm)` - `--select-trigger-font-size-xl`: `var(--select-trigger-font-size-xl)` - `--select-trigger-font-size-xs`: `var(--select-trigger-font-size-xs)` - `--select-trigger-foreground`: `var(--select-trigger-foreground)` - `--select-trigger-foreground-disabled`: `var(--select-trigger-foreground-disabled)` - `--select-trigger-foreground-readonly`: `var(--select-trigger-foreground-readonly)` - `--select-trigger-gap`: `var(--select-trigger-gap)` → `0.5rem` - `--select-trigger-height-lg`: `var(--select-trigger-height-lg)` - `--select-trigger-height-md`: `var(--select-trigger-height-md)` - `--select-trigger-height-sm`: `var(--select-trigger-height-sm)` - `--select-trigger-height-xl`: `var(--select-trigger-height-xl)` - `--select-trigger-height-xs`: `var(--select-trigger-height-xs)` - `--select-trigger-padding-x-lg`: `var(--select-trigger-padding-x-lg)` - `--select-trigger-padding-x-md`: `var(--select-trigger-padding-x-md)` - `--select-trigger-padding-x-sm`: `var(--select-trigger-padding-x-sm)` - `--select-trigger-padding-x-xl`: `var(--select-trigger-padding-x-xl)` - `--select-trigger-padding-x-xs`: `var(--select-trigger-padding-x-xs)` - `--select-trigger-placeholder`: `var(--select-trigger-placeholder)` - `--select-trigger-radius-lg`: `var(--select-trigger-radius-lg)` - `--select-trigger-radius-md`: `var(--select-trigger-radius-md)` - `--select-trigger-radius-sm`: `var(--select-trigger-radius-sm)` - `--select-trigger-radius-xl`: `var(--select-trigger-radius-xl)` - `--select-trigger-radius-xs`: `var(--select-trigger-radius-xs)` - `--select-trigger-shadow`: `var(--select-trigger-shadow)` ### Separator Separator 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/separator/separator.variants.ts` **Token prefix**: `--separator-` _No CVA variants declared._ #### CSS tokens used - `--separator-background`: `var(--separator-background)` → `#e5e5e5` ### Sheet Sheet 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/sheet/sheet.variants.ts` **Layout**: gap: `var(--sheet-content-gap)` → `0.75rem` **Token prefix**: `--sheet-` _No CVA variants declared._ #### CSS tokens used - `--sheet-content-background`: `var(--sheet-content-background)` → `#ffffff` - `--sheet-content-gap`: `var(--sheet-content-gap)` → `0.75rem` - `--sheet-content-shadow`: `var(--sheet-content-shadow)` - `--sheet-description-font-size`: `var(--sheet-description-font-size)` → `0.875rem` - `--sheet-description-foreground`: `var(--sheet-description-foreground)` → `#737373` - `--sheet-footer-gap`: `var(--sheet-footer-gap)` → `1rem` - `--sheet-footer-padding`: `var(--sheet-footer-padding)` → `1.25rem` - `--sheet-header-gap`: `var(--sheet-header-gap)` → `0.5rem` - `--sheet-header-padding`: `var(--sheet-header-padding)` → `1.25rem` - `--sheet-overlay-background`: `var(--sheet-overlay-background)` - `--sheet-title-font-weight`: `var(--sheet-title-font-weight)` → `700` - `--sheet-title-foreground`: `var(--sheet-title-foreground)` → `#0a0a0a` ### Sidebar Sidebar 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/sidebar/sidebar.variants.ts` **Token prefix**: `--sidebar-` #### `variant` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 2 | 2 | | `outline` | 3 | 3 | #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 2 | 2 | | `sm` | 2 | 2 | | `lg` | 3 | 2 | #### `isActive` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 7 | 1 | #### CSS tokens used - `--sidebar-dropdown-menu-item-background`: `var(--sidebar-dropdown-menu-item-background)` - `--sidebar-dropdown-menu-item-background-focus`: `var(--sidebar-dropdown-menu-item-background-focus)` - `--sidebar-dropdown-menu-item-font-size`: `var(--sidebar-dropdown-menu-item-font-size)` - `--sidebar-dropdown-menu-item-foreground`: `var(--sidebar-dropdown-menu-item-foreground)` - `--sidebar-dropdown-menu-item-foreground-disabled`: `var(--sidebar-dropdown-menu-item-foreground-disabled)` - `--sidebar-dropdown-menu-item-foreground-focus`: `var(--sidebar-dropdown-menu-item-foreground-focus)` - `--sidebar-dropdown-menu-item-gap`: `var(--sidebar-dropdown-menu-item-gap)` - `--sidebar-dropdown-menu-item-padding-x`: `var(--sidebar-dropdown-menu-item-padding-x)` - `--sidebar-dropdown-menu-item-padding-y`: `var(--sidebar-dropdown-menu-item-padding-y)` - `--sidebar-dropdown-menu-item-radius`: `var(--sidebar-dropdown-menu-item-radius)` - `--sidebar-dropdown-menu-label-background`: `var(--sidebar-dropdown-menu-label-background)` - `--sidebar-dropdown-menu-label-border`: `var(--sidebar-dropdown-menu-label-border)` - `--sidebar-dropdown-menu-label-font-size`: `var(--sidebar-dropdown-menu-label-font-size)` - `--sidebar-dropdown-menu-label-font-weight`: `var(--sidebar-dropdown-menu-label-font-weight)` - `--sidebar-dropdown-menu-label-foreground`: `var(--sidebar-dropdown-menu-label-foreground)` - `--sidebar-group-content-font-size`: `var(--sidebar-group-content-font-size)` - `--sidebar-group-label-font-size`: `var(--sidebar-group-label-font-size)` - `--sidebar-input-background`: `var(--sidebar-input-background)` - `--sidebar-input-height`: `var(--sidebar-input-height)` - `--sidebar-menu-button-background-default-hover`: `var(--sidebar-menu-button-background-default-hover)` - `--sidebar-menu-button-background-outline`: `var(--sidebar-menu-button-background-outline)` - `--sidebar-menu-button-background-outline-hover`: `var(--sidebar-menu-button-background-outline-hover)` - `--sidebar-menu-button-font-size-default`: `var(--sidebar-menu-button-font-size-default)` - `--sidebar-menu-button-font-size-lg`: `var(--sidebar-menu-button-font-size-lg)` - `--sidebar-menu-button-font-size-sm`: `var(--sidebar-menu-button-font-size-sm)` - `--sidebar-menu-button-font-weight`: `var(--sidebar-menu-button-font-weight)` - `--sidebar-menu-button-font-weight-active`: `var(--sidebar-menu-button-font-weight-active)` - `--sidebar-menu-button-foreground-default-hover`: `var(--sidebar-menu-button-foreground-default-hover)` - `--sidebar-menu-button-foreground-outline-hover`: `var(--sidebar-menu-button-foreground-outline-hover)` - `--sidebar-menu-button-gap`: `var(--sidebar-menu-button-gap)` - `--sidebar-menu-button-height-default`: `var(--sidebar-menu-button-height-default)` - `--sidebar-menu-button-height-lg`: `var(--sidebar-menu-button-height-lg)` - `--sidebar-menu-button-height-sm`: `var(--sidebar-menu-button-height-sm)` - `--sidebar-menu-button-padding`: `var(--sidebar-menu-button-padding)` - `--sidebar-menu-button-radius`: `var(--sidebar-menu-button-radius)` - `--sidebar-menu-sub-button-font-weight`: `var(--sidebar-menu-sub-button-font-weight)` - `--sidebar-menu-sub-button-font-weight-active`: `var(--sidebar-menu-sub-button-font-weight-active)` ### Skeleton Skeleton 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/skeleton/skeleton.variants.ts` **Token prefix**: `--skeleton-` _No CVA variants declared._ #### CSS tokens used - `--skeleton-background`: `var(--skeleton-background)` → `#f5f5f5` - `--skeleton-radius`: `var(--skeleton-radius)` → `0.4688rem` ### Slider Slider 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/slider/slider.variants.ts` **Token prefix**: `--slider-` _No CVA variants declared._ #### CSS tokens used - `--slider-range-background`: `var(--slider-range-background)` → `#171717` - `--slider-range-background-disabled`: `var(--slider-range-background-disabled)` - `--slider-range-background-readonly`: `var(--slider-range-background-readonly)` - `--slider-thumb-background`: `var(--slider-thumb-background)` → `#ffffff` - `--slider-thumb-background-disabled`: `var(--slider-thumb-background-disabled)` → `#f5f5f5` - `--slider-thumb-background-readonly`: `var(--slider-thumb-background-readonly)` → `#e5e5e5` - `--slider-thumb-border`: `var(--slider-thumb-border)` → `#e5e5e5` - `--slider-thumb-border-disabled`: `var(--slider-thumb-border-disabled)` → `#e5e5e5` - `--slider-thumb-border-readonly`: `var(--slider-thumb-border-readonly)` → `#e5e5e5` - `--slider-thumb-shadow`: `var(--slider-thumb-shadow)` - `--slider-thumb-size`: `var(--slider-thumb-size)` → `1rem` - `--slider-track-background`: `var(--slider-track-background)` → `#f5f5f5` - `--slider-track-height-horizontal`: `var(--slider-track-height-horizontal)` → `0.5rem` - `--slider-track-width-vertical`: `var(--slider-track-width-vertical)` → `0.5rem` ### Sonner Sonner 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/sonner/sonner.variants.ts` **Token prefix**: `--sonner-` _No CVA variants declared._ #### CSS tokens used - `--sonner-icon-foreground-error`: `var(--sonner-icon-foreground-error)` - `--sonner-icon-foreground-info`: `var(--sonner-icon-foreground-info)` - `--sonner-icon-foreground-loading`: `var(--sonner-icon-foreground-loading)` - `--sonner-icon-foreground-success`: `var(--sonner-icon-foreground-success)` - `--sonner-icon-foreground-warning`: `var(--sonner-icon-foreground-warning)` ### Spinner Spinner 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/spinner/spinner.variants.ts` **Token prefix**: `--spinner-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 1 | 1 | | `sm` | 1 | 1 | | `md` (default) | 1 | 1 | | `lg` | 1 | 1 | | `xl` | 1 | 1 | #### CSS tokens used - `--spinner-size-lg`: `var(--spinner-size-lg)` → `1.25rem` - `--spinner-size-md`: `var(--spinner-size-md)` → `1rem` - `--spinner-size-sm`: `var(--spinner-size-sm)` → `0.75rem` - `--spinner-size-xl`: `var(--spinner-size-xl)` → `1.5rem` - `--spinner-size-xs`: `var(--spinner-size-xs)` → `0.5rem` ### Step Step 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/step/step.variants.ts` **Layout**: display: flex · align: CENTER · justify: CENTER · border: 2px solid **Token prefix**: `--step-` #### `status` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `completed` | 3 | 3 | | `success` | 3 | 3 | | `error` | 3 | 3 | | `current` | 3 | 3 | | `pending` (default) | 3 | 3 | #### CSS tokens used - `--step-description-font-size`: `var(--step-description-font-size)` → `0.875rem` - `--step-description-foreground`: `var(--step-description-foreground)` → `#737373` - `--step-head-background-error`: `var(--step-head-background-error)` → `#ef4444` - `--step-head-background-finish`: `var(--step-head-background-finish)` → `#171717` - `--step-head-background-process`: `var(--step-head-background-process)` → `#93c5fd` - `--step-head-background-success`: `var(--step-head-background-success)` → `#171717` - `--step-head-background-wait`: `var(--step-head-background-wait)` → `#f5f5f5` - `--step-head-border-error`: `var(--step-head-border-error)` → `#ef4444` - `--step-head-border-finish`: `var(--step-head-border-finish)` → `#171717` - `--step-head-border-process`: `var(--step-head-border-process)` → `#93c5fd` - `--step-head-border-success`: `var(--step-head-border-success)` → `#171717` - `--step-head-border-wait`: `var(--step-head-border-wait)` → `#e5e5e5` - `--step-head-font-size`: `var(--step-head-font-size)` → `0.875rem` - `--step-head-font-weight`: `var(--step-head-font-weight)` → `500` - `--step-head-foreground-error`: `var(--step-head-foreground-error)` → `#fafafa` - `--step-head-foreground-finish`: `var(--step-head-foreground-finish)` → `#fafafa` - `--step-head-foreground-process`: `var(--step-head-foreground-process)` → `#0a0a0a` - `--step-head-foreground-success`: `var(--step-head-foreground-success)` → `#fafafa` - `--step-head-foreground-wait`: `var(--step-head-foreground-wait)` → `#737373` - `--step-head-size`: `var(--step-head-size)` → `2rem` - `--step-line-active`: `var(--step-line-active)` → `#171717` - `--step-line-background`: `var(--step-line-background)` - `--step-line-error`: `var(--step-line-error)` → `#ef4444` - `--step-line-height`: `var(--step-line-height)` → `2px` - `--step-line-margin-top`: `var(--step-line-margin-top)` → `1rem` - `--step-line-success`: `var(--step-line-success)` → `#171717` - `--step-title-font-size`: `var(--step-title-font-size)` → `1rem` - `--step-title-font-weight`: `var(--step-title-font-weight)` → `500` - `--step-title-foreground`: `var(--step-title-foreground)` → `#0a0a0a` - `--step-title-foreground-wait`: `var(--step-title-foreground-wait)` → `#737373` ### Switch Switch 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/switch/switch.variants.ts` **Layout**: display: inline-flex · align: CENTER · border: 1px solid **Token prefix**: `--switch-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 3 | 3 | | `sm` | 3 | 3 | | `md` (default) | 3 | 3 | | `lg` | 3 | 3 | | `xl` | 3 | 3 | #### CSS tokens used - `--switch-background`: `var(--switch-background)` → `#e5e5e5` - `--switch-background-checked`: `var(--switch-background-checked)` → `#171717` - `--switch-background-checked-disabled`: `var(--switch-background-checked-disabled)` → `#e5e5e5` - `--switch-background-checked-readonly`: `var(--switch-background-checked-readonly)` → `#e5e5e5` - `--switch-background-disabled`: `var(--switch-background-disabled)` - `--switch-background-readonly`: `var(--switch-background-readonly)` - `--switch-border`: `var(--switch-border)` → `#e5e5e5` - `--switch-border-checked`: `var(--switch-border-checked)` → `#171717` - `--switch-border-checked-disabled`: `var(--switch-border-checked-disabled)` → `#e5e5e5` - `--switch-border-checked-readonly`: `var(--switch-border-checked-readonly)` → `#e5e5e5` - `--switch-border-disabled`: `var(--switch-border-disabled)` - `--switch-border-readonly`: `var(--switch-border-readonly)` - `--switch-font-size-lg`: `var(--switch-font-size-lg)` → `1rem` - `--switch-font-size-md`: `var(--switch-font-size-md)` → `0.875rem` - `--switch-font-size-sm`: `var(--switch-font-size-sm)` → `0.875rem` - `--switch-font-size-xl`: `var(--switch-font-size-xl)` → `1rem` - `--switch-font-size-xs`: `var(--switch-font-size-xs)` → `0.75rem` - `--switch-foreground`: `var(--switch-foreground)` → `#737373` - `--switch-foreground-checked`: `var(--switch-foreground-checked)` → `#ffffff` - `--switch-foreground-checked-disabled`: `var(--switch-foreground-checked-disabled)` - `--switch-foreground-checked-readonly`: `var(--switch-foreground-checked-readonly)` → `#0a0a0a` - `--switch-foreground-disabled`: `var(--switch-foreground-disabled)` - `--switch-foreground-readonly`: `var(--switch-foreground-readonly)` - `--switch-height-lg`: `var(--switch-height-lg)` → `1.5rem` - `--switch-height-md`: `var(--switch-height-md)` → `1.25rem` - `--switch-height-sm`: `var(--switch-height-sm)` → `1rem` - `--switch-height-xl`: `var(--switch-height-xl)` → `1.75rem` - `--switch-height-xs`: `var(--switch-height-xs)` → `0.75rem` - `--switch-min-width-lg`: `var(--switch-min-width-lg)` - `--switch-min-width-md`: `var(--switch-min-width-md)` - `--switch-min-width-sm`: `var(--switch-min-width-sm)` - `--switch-min-width-xl`: `var(--switch-min-width-xl)` - `--switch-min-width-xs`: `var(--switch-min-width-xs)` - `--switch-shadow`: `var(--switch-shadow)` - `--switch-thumb-background`: `var(--switch-thumb-background)` → `#ffffff` - `--switch-thumb-background-checked`: `var(--switch-thumb-background-checked)` → `#ffffff` - `--switch-thumb-size-lg`: `var(--switch-thumb-size-lg)` - `--switch-thumb-size-md`: `var(--switch-thumb-size-md)` - `--switch-thumb-size-sm`: `var(--switch-thumb-size-sm)` - `--switch-thumb-size-xl`: `var(--switch-thumb-size-xl)` - `--switch-thumb-size-xs`: `var(--switch-thumb-size-xs)` ### Table Table 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/table/table.variants.ts` **Token prefix**: `--table-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 1 | 1 | | `sm` | 1 | 1 | | `md` (default) | 1 | 1 | | `lg` | 1 | 1 | | `xl` | 1 | 1 | #### CSS tokens used - `--table-background`: `var(--table-background)` → `#ffffff` - `--table-border`: `var(--table-border)` → `#71717a` - `--table-cell-border`: `var(--table-cell-border)` → `#e5e5e5` - `--table-cell-foreground`: `var(--table-cell-foreground)` → `#0a0a0a` - `--table-cell-height-lg`: `var(--table-cell-height-lg)` → `52px` - `--table-cell-height-md`: `var(--table-cell-height-md)` → `48px` - `--table-cell-height-sm`: `var(--table-cell-height-sm)` → `44px` - `--table-cell-height-xl`: `var(--table-cell-height-xl)` → `56px` - `--table-cell-height-xs`: `var(--table-cell-height-xs)` → `36px` - `--table-cell-padding-x-lg`: `var(--table-cell-padding-x-lg)` → `1.25rem` - `--table-cell-padding-x-md`: `var(--table-cell-padding-x-md)` → `1rem` - `--table-cell-padding-x-sm`: `var(--table-cell-padding-x-sm)` → `0.75rem` - `--table-cell-padding-x-xl`: `var(--table-cell-padding-x-xl)` → `1.5rem` - `--table-cell-padding-x-xs`: `var(--table-cell-padding-x-xs)` → `0.5rem` - `--table-cell-padding-y-lg`: `var(--table-cell-padding-y-lg)` → `0.5rem` - `--table-cell-padding-y-md`: `var(--table-cell-padding-y-md)` → `0.5rem` - `--table-cell-padding-y-sm`: `var(--table-cell-padding-y-sm)` → `0.5rem` - `--table-cell-padding-y-xl`: `var(--table-cell-padding-y-xl)` → `0.5rem` - `--table-cell-padding-y-xs`: `var(--table-cell-padding-y-xs)` → `0.5rem` - `--table-font-size-lg`: `var(--table-font-size-lg)` → `1rem` - `--table-font-size-md`: `var(--table-font-size-md)` → `0.875rem` - `--table-font-size-sm`: `var(--table-font-size-sm)` → `0.875rem` - `--table-font-size-xl`: `var(--table-font-size-xl)` → `1rem` - `--table-font-size-xs`: `var(--table-font-size-xs)` → `0.75rem` - `--table-foot-border`: `var(--table-foot-border)` → `#e5e5e5` - `--table-foot-font-size`: `var(--table-foot-font-size)` → `0.875rem` - `--table-foot-font-weight`: `var(--table-foot-font-weight)` → `500` - `--table-foot-foreground`: `var(--table-foot-foreground)` → `#0a0a0a` - `--table-footer-background`: `var(--table-footer-background)` → `#0c4a6e` - `--table-head-border`: `var(--table-head-border)` → `#e5e5e5` - `--table-head-font-size`: `var(--table-head-font-size)` → `0.875rem` - `--table-head-font-weight`: `var(--table-head-font-weight)` → `500` - `--table-head-foreground`: `var(--table-head-foreground)` → `#0a0a0a` - `--table-header-background`: `var(--table-header-background)` → `#111827` - `--table-radius-lg`: `var(--table-radius-lg)` → `0` - `--table-radius-md`: `var(--table-radius-md)` → `0` - `--table-radius-sm`: `var(--table-radius-sm)` → `0` - `--table-radius-xl`: `var(--table-radius-xl)` → `0` - `--table-radius-xs`: `var(--table-radius-xs)` → `0` - `--table-row-background`: `var(--table-row-background)` → `#ffffff` - `--table-row-background-hover`: `var(--table-row-background-hover)` → `#f5f5f5` - `--table-row-background-selected`: `var(--table-row-background-selected)` → `#f5f5f5` - `--table-row-background-striped`: `var(--table-row-background-striped)` → `#f5f5f5` ### Tabs Tabs 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/tabs/tabs.variants.ts` **Layout**: gap: `var(--tabs-gap)` → `0.5rem` **Token prefix**: `--tabs-` #### `variant` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 6 | 5 | | `line` | 8 | 5 | | `outline` | 8 | 5 | #### CSS tokens used - `--tabs-gap`: `var(--tabs-gap)` → `0.5rem` - `--tabs-list-background-default`: `var(--tabs-list-background-default)` → `#09090b` - `--tabs-list-background-line`: `var(--tabs-list-background-line)` → `transparent` - `--tabs-list-background-outline`: `var(--tabs-list-background-outline)` → `transparent` - `--tabs-list-border-default`: `var(--tabs-list-border-default)` → `transparent` - `--tabs-list-border-line`: `var(--tabs-list-border-line)` → `#e5e5e5` - `--tabs-list-border-outline`: `var(--tabs-list-border-outline)` → `#e5e5e5` - `--tabs-list-gap-default`: `var(--tabs-list-gap-default)` → `1rem` - `--tabs-list-gap-line`: `var(--tabs-list-gap-line)` → `0.75rem` - `--tabs-list-gap-outline`: `var(--tabs-list-gap-outline)` → `0.75rem` - `--tabs-list-padding-default`: `var(--tabs-list-padding-default)` → `1rem` - `--tabs-list-padding-line`: `var(--tabs-list-padding-line)` → `1.25rem` - `--tabs-list-padding-outline`: `var(--tabs-list-padding-outline)` → `1.25rem` - `--tabs-list-radius-default`: `var(--tabs-list-radius-default)` → `0.3125rem` - `--tabs-list-radius-line`: `var(--tabs-list-radius-line)` → `0px` - `--tabs-list-radius-outline`: `var(--tabs-list-radius-outline)` → `0px` - `--tabs-trigger-background-default`: `var(--tabs-trigger-background-default)` → `transparent` - `--tabs-trigger-background-default-active`: `var(--tabs-trigger-background-default-active)` → `#ffffff` - `--tabs-trigger-background-default-disabled`: `var(--tabs-trigger-background-default-disabled)` → `#f5f5f5` - `--tabs-trigger-background-default-hover`: `var(--tabs-trigger-background-default-hover)` → `transparent` - `--tabs-trigger-background-line`: `var(--tabs-trigger-background-line)` → `transparent` - `--tabs-trigger-background-line-active`: `var(--tabs-trigger-background-line-active)` → `transparent` - `--tabs-trigger-background-line-disabled`: `var(--tabs-trigger-background-line-disabled)` → `#f5f5f5` - `--tabs-trigger-background-line-hover`: `var(--tabs-trigger-background-line-hover)` → `transparent` - `--tabs-trigger-background-outline`: `var(--tabs-trigger-background-outline)` → `#ffffff` - `--tabs-trigger-background-outline-active`: `var(--tabs-trigger-background-outline-active)` → `#171717` - `--tabs-trigger-background-outline-disabled`: `var(--tabs-trigger-background-outline-disabled)` → `#f5f5f5` - `--tabs-trigger-background-outline-hover`: `var(--tabs-trigger-background-outline-hover)` → `#ffffff` - `--tabs-trigger-border-default`: `var(--tabs-trigger-border-default)` → `transparent` - `--tabs-trigger-border-default-active`: `var(--tabs-trigger-border-default-active)` → `#e5e5e5` - `--tabs-trigger-border-default-disabled`: `var(--tabs-trigger-border-default-disabled)` → `transparent` - `--tabs-trigger-border-default-hover`: `var(--tabs-trigger-border-default-hover)` → `transparent` - `--tabs-trigger-border-line`: `var(--tabs-trigger-border-line)` → `transparent` - `--tabs-trigger-border-line-active`: `var(--tabs-trigger-border-line-active)` → `#0a0a0a` - `--tabs-trigger-border-line-disabled`: `var(--tabs-trigger-border-line-disabled)` → `transparent` - `--tabs-trigger-border-line-hover`: `var(--tabs-trigger-border-line-hover)` → `transparent` - `--tabs-trigger-border-outline`: `var(--tabs-trigger-border-outline)` → `#e5e5e5` - `--tabs-trigger-border-outline-active`: `var(--tabs-trigger-border-outline-active)` → `#171717` - `--tabs-trigger-border-outline-disabled`: `var(--tabs-trigger-border-outline-disabled)` → `#e5e5e5` - `--tabs-trigger-border-outline-hover`: `var(--tabs-trigger-border-outline-hover)` → `#e5e5e5` - `--tabs-trigger-font-size-default`: `var(--tabs-trigger-font-size-default)` → `1.125rem` - `--tabs-trigger-font-size-line`: `var(--tabs-trigger-font-size-line)` → `1.125rem` - `--tabs-trigger-font-size-outline`: `var(--tabs-trigger-font-size-outline)` → `1.125rem` - `--tabs-trigger-foreground-default`: `var(--tabs-trigger-foreground-default)` → `#737373` - `--tabs-trigger-foreground-default-active`: `var(--tabs-trigger-foreground-default-active)` → `#0a0a0a` - `--tabs-trigger-foreground-default-disabled`: `var(--tabs-trigger-foreground-default-disabled)` - `--tabs-trigger-foreground-default-hover`: `var(--tabs-trigger-foreground-default-hover)` → `#0a0a0a` - `--tabs-trigger-foreground-line`: `var(--tabs-trigger-foreground-line)` → `#737373` - `--tabs-trigger-foreground-line-active`: `var(--tabs-trigger-foreground-line-active)` → `#0a0a0a` - `--tabs-trigger-foreground-line-disabled`: `var(--tabs-trigger-foreground-line-disabled)` - `--tabs-trigger-foreground-line-hover`: `var(--tabs-trigger-foreground-line-hover)` → `#0a0a0a` - `--tabs-trigger-foreground-outline`: `var(--tabs-trigger-foreground-outline)` → `#737373` - `--tabs-trigger-foreground-outline-active`: `var(--tabs-trigger-foreground-outline-active)` → `#fafafa` - `--tabs-trigger-foreground-outline-disabled`: `var(--tabs-trigger-foreground-outline-disabled)` - `--tabs-trigger-foreground-outline-hover`: `var(--tabs-trigger-foreground-outline-hover)` → `#0a0a0a` - `--tabs-trigger-gap-default`: `var(--tabs-trigger-gap-default)` → `0.5rem` - `--tabs-trigger-gap-line`: `var(--tabs-trigger-gap-line)` → `0.5rem` - `--tabs-trigger-gap-outline`: `var(--tabs-trigger-gap-outline)` → `0.5rem` - `--tabs-trigger-padding-x-default`: `var(--tabs-trigger-padding-x-default)` → `0.5rem` - `--tabs-trigger-padding-x-line`: `var(--tabs-trigger-padding-x-line)` → `0.25rem` - `--tabs-trigger-padding-x-outline`: `var(--tabs-trigger-padding-x-outline)` → `0.75rem` - `--tabs-trigger-padding-y-default`: `var(--tabs-trigger-padding-y-default)` → `0.5rem` - `--tabs-trigger-padding-y-line`: `var(--tabs-trigger-padding-y-line)` → `0.5rem` - `--tabs-trigger-padding-y-outline`: `var(--tabs-trigger-padding-y-outline)` → `0.5rem` - `--tabs-trigger-radius-default`: `var(--tabs-trigger-radius-default)` → `0.3125rem` - `--tabs-trigger-radius-line`: `var(--tabs-trigger-radius-line)` → `0px` - `--tabs-trigger-radius-outline`: `var(--tabs-trigger-radius-outline)` → `0.3125rem` - `--tabs-trigger-separator-background`: `var(--tabs-trigger-separator-background)` → `#e5e5e5` ### Textarea Textarea 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/textarea/textarea.variants.ts` **Layout**: display: flex · border: 1px solid **Token prefix**: `--textarea-` #### `resizable` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 1 | 0 | | `false` | 1 | 0 | #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 5 | 5 | | `sm` | 5 | 5 | | `md` (default) | 5 | 5 | | `lg` | 5 | 5 | | `xl` | 5 | 5 | #### CSS tokens used - `--textarea-background`: `var(--textarea-background)` - `--textarea-background-disabled`: `var(--textarea-background-disabled)` - `--textarea-background-readonly`: `var(--textarea-background-readonly)` - `--textarea-border`: `var(--textarea-border)` - `--textarea-border-disabled`: `var(--textarea-border-disabled)` - `--textarea-border-readonly`: `var(--textarea-border-readonly)` - `--textarea-font-size-lg`: `var(--textarea-font-size-lg)` - `--textarea-font-size-md`: `var(--textarea-font-size-md)` - `--textarea-font-size-sm`: `var(--textarea-font-size-sm)` - `--textarea-font-size-xl`: `var(--textarea-font-size-xl)` - `--textarea-font-size-xs`: `var(--textarea-font-size-xs)` - `--textarea-foreground`: `var(--textarea-foreground)` - `--textarea-foreground-disabled`: `var(--textarea-foreground-disabled)` - `--textarea-foreground-readonly`: `var(--textarea-foreground-readonly)` - `--textarea-min-height`: `var(--textarea-min-height)` → `5rem` - `--textarea-padding-x-lg`: `var(--textarea-padding-x-lg)` - `--textarea-padding-x-md`: `var(--textarea-padding-x-md)` - `--textarea-padding-x-sm`: `var(--textarea-padding-x-sm)` - `--textarea-padding-x-xl`: `var(--textarea-padding-x-xl)` - `--textarea-padding-x-xs`: `var(--textarea-padding-x-xs)` - `--textarea-padding-y-lg`: `var(--textarea-padding-y-lg)` → `0.5rem` - `--textarea-padding-y-md`: `var(--textarea-padding-y-md)` → `0.5rem` - `--textarea-padding-y-sm`: `var(--textarea-padding-y-sm)` → `0.5rem` - `--textarea-padding-y-xl`: `var(--textarea-padding-y-xl)` → `0.5rem` - `--textarea-padding-y-xs`: `var(--textarea-padding-y-xs)` → `0.5rem` - `--textarea-placeholder`: `var(--textarea-placeholder)` - `--textarea-radius-lg`: `var(--textarea-radius-lg)` - `--textarea-radius-md`: `var(--textarea-radius-md)` - `--textarea-radius-sm`: `var(--textarea-radius-sm)` - `--textarea-radius-xl`: `var(--textarea-radius-xl)` - `--textarea-radius-xs`: `var(--textarea-radius-xs)` - `--textarea-shadow`: `var(--textarea-shadow)` ### TimelineChart **Source**: `packages/ui-foundation/src/components/ui/timeline-chart/timeline-chart.variants.ts` **Token prefix**: `--timeline-chart-` #### `status` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `pending` | 1 | 3 | | `in_progress` | 1 | 3 | | `completed` | 1 | 3 | | `delayed` | 1 | 3 | | `cancelled` | 1 | 3 | #### CSS tokens used - `--timeline-chart-container-background`: `var(--timeline-chart-container-background)` → `#ffffff` - `--timeline-chart-container-border`: `var(--timeline-chart-container-border)` → `#e5e5e5` - `--timeline-chart-container-radius`: `var(--timeline-chart-container-radius)` → `0.3125rem` - `--timeline-chart-item-font-size`: `var(--timeline-chart-item-font-size)` → `0.875rem` - `--timeline-chart-item-font-weight`: `var(--timeline-chart-item-font-weight)` → `500` - `--timeline-chart-item-padding-x`: `var(--timeline-chart-item-padding-x)` → `0.5rem` - `--timeline-chart-item-padding-y`: `var(--timeline-chart-item-padding-y)` → `0.25rem` - `--timeline-chart-item-radius`: `var(--timeline-chart-item-radius)` → `0.2344rem` - `--timeline-chart-item-shadow-hover`: `var(--timeline-chart-item-shadow-hover)` - `--timeline-chart-item-shadow-selected`: `var(--timeline-chart-item-shadow-selected)` - `--timeline-chart-item-status-background-cancelled`: `var(--timeline-chart-item-status-background-cancelled)` - `--timeline-chart-item-status-background-completed`: `var(--timeline-chart-item-status-background-completed)` → `#dcfce7` - `--timeline-chart-item-status-background-delayed`: `var(--timeline-chart-item-status-background-delayed)` → `#fee2e2` - `--timeline-chart-item-status-background-in-progress`: `var(--timeline-chart-item-status-background-in-progress)` → `#f1f5f9` - `--timeline-chart-item-status-background-pending`: `var(--timeline-chart-item-status-background-pending)` → `#f5f5f5` - `--timeline-chart-item-status-border-cancelled`: `var(--timeline-chart-item-status-border-cancelled)` → `#e5e5e5` - `--timeline-chart-item-status-border-completed`: `var(--timeline-chart-item-status-border-completed)` → `#bbf7d0` - `--timeline-chart-item-status-border-delayed`: `var(--timeline-chart-item-status-border-delayed)` → `#fecaca` - `--timeline-chart-item-status-border-in-progress`: `var(--timeline-chart-item-status-border-in-progress)` → `#e2e8f0` - `--timeline-chart-item-status-border-pending`: `var(--timeline-chart-item-status-border-pending)` → `#e5e5e5` - `--timeline-chart-item-status-foreground-cancelled`: `var(--timeline-chart-item-status-foreground-cancelled)` → `#737373` - `--timeline-chart-item-status-foreground-completed`: `var(--timeline-chart-item-status-foreground-completed)` - `--timeline-chart-item-status-foreground-delayed`: `var(--timeline-chart-item-status-foreground-delayed)` - `--timeline-chart-item-status-foreground-in-progress`: `var(--timeline-chart-item-status-foreground-in-progress)` - `--timeline-chart-item-status-foreground-pending`: `var(--timeline-chart-item-status-foreground-pending)` → `#0a0a0a` - `--timeline-chart-label-background`: `var(--timeline-chart-label-background)` → `#f5f5f5` - `--timeline-chart-label-border`: `var(--timeline-chart-label-border)` → `#e5e5e5` - `--timeline-chart-legend-font-size`: `var(--timeline-chart-legend-font-size)` → `0.75rem` - `--timeline-chart-legend-foreground`: `var(--timeline-chart-legend-foreground)` → `#737373` - `--timeline-chart-legend-gap`: `var(--timeline-chart-legend-gap)` → `1rem` - `--timeline-chart-legend-label-font-weight`: `var(--timeline-chart-legend-label-font-weight)` → `500` - `--timeline-chart-legend-swatch-gap`: `var(--timeline-chart-legend-swatch-gap)` → `0.25rem` - `--timeline-chart-restriction-background-custom`: `var(--timeline-chart-restriction-background-custom)` - `--timeline-chart-restriction-background-deadline`: `var(--timeline-chart-restriction-background-deadline)` - `--timeline-chart-restriction-background-holiday`: `var(--timeline-chart-restriction-background-holiday)` - `--timeline-chart-restriction-background-milestone`: `var(--timeline-chart-restriction-background-milestone)` - `--timeline-chart-time-axis-font-size`: `var(--timeline-chart-time-axis-font-size)` → `0.75rem` - `--timeline-chart-time-axis-foreground`: `var(--timeline-chart-time-axis-foreground)` → `#737373` ### TimePicker **Source**: `packages/ui-foundation/src/components/ui/time-picker/time-picker.variants.ts` **Token prefix**: `--time-picker-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 2 | 2 | | `sm` | 2 | 2 | | `md` (default) | 2 | 2 | | `lg` | 2 | 2 | | `xl` | 2 | 2 | #### `disabled` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 3 | 3 | #### `readOnly` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 3 | 3 | #### CSS tokens used - `--time-picker-item-background`: `var(--time-picker-item-background)` → `#ffffff` - `--time-picker-item-background-disabled`: `var(--time-picker-item-background-disabled)` → `#f5f5f5` - `--time-picker-item-background-hover`: `var(--time-picker-item-background-hover)` → `#f5f5f5` - `--time-picker-item-background-selected`: `var(--time-picker-item-background-selected)` → `#e5e5e5` - `--time-picker-item-foreground`: `var(--time-picker-item-foreground)` → `#0a0a0a` - `--time-picker-item-foreground-disabled`: `var(--time-picker-item-foreground-disabled)` → `#0a0a0a` - `--time-picker-item-foreground-hover`: `var(--time-picker-item-foreground-hover)` → `#0a0a0a` - `--time-picker-item-foreground-selected`: `var(--time-picker-item-foreground-selected)` → `#0a0a0a` - `--time-picker-trigger-background`: `var(--time-picker-trigger-background)` - `--time-picker-trigger-background-disabled`: `var(--time-picker-trigger-background-disabled)` - `--time-picker-trigger-background-readonly`: `var(--time-picker-trigger-background-readonly)` - `--time-picker-trigger-background-selection`: `var(--time-picker-trigger-background-selection)` - `--time-picker-trigger-border`: `var(--time-picker-trigger-border)` - `--time-picker-trigger-border-disabled`: `var(--time-picker-trigger-border-disabled)` - `--time-picker-trigger-border-readonly`: `var(--time-picker-trigger-border-readonly)` - `--time-picker-trigger-font-size-lg`: `var(--time-picker-trigger-font-size-lg)` - `--time-picker-trigger-font-size-md`: `var(--time-picker-trigger-font-size-md)` - `--time-picker-trigger-font-size-sm`: `var(--time-picker-trigger-font-size-sm)` - `--time-picker-trigger-font-size-xl`: `var(--time-picker-trigger-font-size-xl)` - `--time-picker-trigger-font-size-xs`: `var(--time-picker-trigger-font-size-xs)` - `--time-picker-trigger-foreground`: `var(--time-picker-trigger-foreground)` - `--time-picker-trigger-foreground-disabled`: `var(--time-picker-trigger-foreground-disabled)` - `--time-picker-trigger-foreground-readonly`: `var(--time-picker-trigger-foreground-readonly)` - `--time-picker-trigger-foreground-selection`: `var(--time-picker-trigger-foreground-selection)` - `--time-picker-trigger-height-lg`: `var(--time-picker-trigger-height-lg)` - `--time-picker-trigger-height-md`: `var(--time-picker-trigger-height-md)` - `--time-picker-trigger-height-sm`: `var(--time-picker-trigger-height-sm)` - `--time-picker-trigger-height-xl`: `var(--time-picker-trigger-height-xl)` - `--time-picker-trigger-height-xs`: `var(--time-picker-trigger-height-xs)` - `--time-picker-trigger-padding-x-lg`: `var(--time-picker-trigger-padding-x-lg)` - `--time-picker-trigger-padding-x-md`: `var(--time-picker-trigger-padding-x-md)` - `--time-picker-trigger-padding-x-sm`: `var(--time-picker-trigger-padding-x-sm)` - `--time-picker-trigger-padding-x-xl`: `var(--time-picker-trigger-padding-x-xl)` - `--time-picker-trigger-padding-x-xs`: `var(--time-picker-trigger-padding-x-xs)` - `--time-picker-trigger-placeholder`: `var(--time-picker-trigger-placeholder)` - `--time-picker-trigger-radius-lg`: `var(--time-picker-trigger-radius-lg)` - `--time-picker-trigger-radius-md`: `var(--time-picker-trigger-radius-md)` - `--time-picker-trigger-radius-sm`: `var(--time-picker-trigger-radius-sm)` - `--time-picker-trigger-radius-xl`: `var(--time-picker-trigger-radius-xl)` - `--time-picker-trigger-radius-xs`: `var(--time-picker-trigger-radius-xs)` - `--time-picker-trigger-shadow`: `var(--time-picker-trigger-shadow)` ### Toggle Toggle 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/toggle/toggle.variants.ts` **Layout**: display: inline-flex · align: CENTER · justify: CENTER · gap: `0.25rem` → `0.25rem` · border: 1px solid **Token prefix**: `--toggle-` #### `variant` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 31 | 31 | | `outline` | 31 | 31 | #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` | 5 | 5 | | `xs` | 5 | 5 | | `sm` | 5 | 5 | | `md` (default) | 5 | 5 | | `lg` | 5 | 5 | | `xl` | 5 | 5 | #### CSS tokens used - `--toggle-background-default`: `var(--toggle-background-default)` → `#ffffff` - `--toggle-background-default-disabled`: `var(--toggle-background-default-disabled)` → `#ffffff` - `--toggle-background-default-hover`: `var(--toggle-background-default-hover)` → `#ffffff` - `--toggle-background-default-on`: `var(--toggle-background-default-on)` → `#f5f5f5` - `--toggle-background-default-on-disabled`: `var(--toggle-background-default-on-disabled)` → `#f5f5f5` - `--toggle-background-default-on-hover`: `var(--toggle-background-default-on-hover)` → `#ffffff` - `--toggle-background-default-on-readonly`: `var(--toggle-background-default-on-readonly)` → `#ffffff` - `--toggle-background-default-readonly`: `var(--toggle-background-default-readonly)` → `#ffffff` - `--toggle-background-outline`: `var(--toggle-background-outline)` → `#ffffff` - `--toggle-background-outline-disabled`: `var(--toggle-background-outline-disabled)` → `#ffffff` - `--toggle-background-outline-hover`: `var(--toggle-background-outline-hover)` → `#ffffff` - `--toggle-background-outline-on`: `var(--toggle-background-outline-on)` → `#f5f5f5` - `--toggle-background-outline-on-disabled`: `var(--toggle-background-outline-on-disabled)` → `#f5f5f5` - `--toggle-background-outline-on-hover`: `var(--toggle-background-outline-on-hover)` → `#ffffff` - `--toggle-background-outline-on-readonly`: `var(--toggle-background-outline-on-readonly)` → `#ffffff` - `--toggle-background-outline-readonly`: `var(--toggle-background-outline-readonly)` → `#ffffff` - `--toggle-border-default`: `var(--toggle-border-default)` → `transparent` - `--toggle-border-default-disabled`: `var(--toggle-border-default-disabled)` → `transparent` - `--toggle-border-default-hover`: `var(--toggle-border-default-hover)` → `transparent` - `--toggle-border-default-on`: `var(--toggle-border-default-on)` → `transparent` - `--toggle-border-default-on-disabled`: `var(--toggle-border-default-on-disabled)` → `transparent` - `--toggle-border-default-on-hover`: `var(--toggle-border-default-on-hover)` → `transparent` - `--toggle-border-default-on-readonly`: `var(--toggle-border-default-on-readonly)` → `transparent` - `--toggle-border-default-readonly`: `var(--toggle-border-default-readonly)` → `transparent` - `--toggle-border-outline`: `var(--toggle-border-outline)` → `#e5e5e5` - `--toggle-border-outline-disabled`: `var(--toggle-border-outline-disabled)` → `#e5e5e5` - `--toggle-border-outline-hover`: `var(--toggle-border-outline-hover)` → `#e5e5e5` - `--toggle-border-outline-on`: `var(--toggle-border-outline-on)` → `#e5e5e5` - `--toggle-border-outline-on-disabled`: `var(--toggle-border-outline-on-disabled)` → `#e5e5e5` - `--toggle-border-outline-on-hover`: `var(--toggle-border-outline-on-hover)` → `#e5e5e5` - `--toggle-border-outline-on-readonly`: `var(--toggle-border-outline-on-readonly)` → `#e5e5e5` - `--toggle-border-outline-readonly`: `var(--toggle-border-outline-readonly)` → `#e5e5e5` - `--toggle-font-size-lg`: `var(--toggle-font-size-lg)` → `1rem` - `--toggle-font-size-md`: `var(--toggle-font-size-md)` → `0.875rem` - `--toggle-font-size-sm`: `var(--toggle-font-size-sm)` → `0.875rem` - `--toggle-font-size-xl`: `var(--toggle-font-size-xl)` → `1rem` - `--toggle-font-size-xs`: `var(--toggle-font-size-xs)` → `0.75rem` - `--toggle-font-weight`: `var(--toggle-font-weight)` → `500` - `--toggle-foreground-default`: `var(--toggle-foreground-default)` → `#171717` - `--toggle-foreground-default-disabled`: `var(--toggle-foreground-default-disabled)` → `#737373` - `--toggle-foreground-default-hover`: `var(--toggle-foreground-default-hover)` → `#0a0a0a` - `--toggle-foreground-default-on`: `var(--toggle-foreground-default-on)` → `#171717` - `--toggle-foreground-default-on-disabled`: `var(--toggle-foreground-default-on-disabled)` → `#171717` - `--toggle-foreground-default-on-hover`: `var(--toggle-foreground-default-on-hover)` → `#0a0a0a` - `--toggle-foreground-default-on-readonly`: `var(--toggle-foreground-default-on-readonly)` → `#0a0a0a` - `--toggle-foreground-default-readonly`: `var(--toggle-foreground-default-readonly)` → `#0a0a0a` - `--toggle-foreground-outline`: `var(--toggle-foreground-outline)` → `#171717` - `--toggle-foreground-outline-disabled`: `var(--toggle-foreground-outline-disabled)` → `#737373` - `--toggle-foreground-outline-hover`: `var(--toggle-foreground-outline-hover)` → `#0a0a0a` - `--toggle-foreground-outline-on`: `var(--toggle-foreground-outline-on)` → `#171717` - `--toggle-foreground-outline-on-disabled`: `var(--toggle-foreground-outline-on-disabled)` → `#171717` - `--toggle-foreground-outline-on-hover`: `var(--toggle-foreground-outline-on-hover)` → `#0a0a0a` - `--toggle-foreground-outline-on-readonly`: `var(--toggle-foreground-outline-on-readonly)` → `#0a0a0a` - `--toggle-foreground-outline-readonly`: `var(--toggle-foreground-outline-readonly)` → `#0a0a0a` - `--toggle-height-lg`: `var(--toggle-height-lg)` → `2.5rem` - `--toggle-height-md`: `var(--toggle-height-md)` → `2.25rem` - `--toggle-height-sm`: `var(--toggle-height-sm)` → `2rem` - `--toggle-height-xl`: `var(--toggle-height-xl)` → `2.75rem` - `--toggle-height-xs`: `var(--toggle-height-xs)` → `1.5rem` - `--toggle-padding-x-lg`: `var(--toggle-padding-x-lg)` → `1rem` - `--toggle-padding-x-md`: `var(--toggle-padding-x-md)` → `1rem` - `--toggle-padding-x-sm`: `var(--toggle-padding-x-sm)` → `0.75rem` - `--toggle-padding-x-xl`: `var(--toggle-padding-x-xl)` → `1.25rem` - `--toggle-padding-x-xs`: `var(--toggle-padding-x-xs)` → `0.5rem` - `--toggle-radius-lg`: `var(--toggle-radius-lg)` → `0.3125rem` - `--toggle-radius-md`: `var(--toggle-radius-md)` → `0.3125rem` - `--toggle-radius-sm`: `var(--toggle-radius-sm)` → `0.2344rem` - `--toggle-radius-xl`: `var(--toggle-radius-xl)` → `0.3125rem` - `--toggle-radius-xs`: `var(--toggle-radius-xs)` → `0.1563rem` - `--toggle-shadow-default`: `var(--toggle-shadow-default)` - `--toggle-shadow-outline`: `var(--toggle-shadow-outline)` ### ToggleGroup Toggle Group 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/toggle-group/toggle-group.variants.ts` **Token prefix**: `--toggle-group-` #### `radius` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 1 | 5 | | `sm` | 1 | 5 | | `md` (default) | 1 | 5 | | `lg` | 1 | 5 | | `xl` | 1 | 5 | #### CSS tokens used - `--toggle-group-radius-lg`: `var(--toggle-group-radius-lg)` - `--toggle-group-radius-md`: `var(--toggle-group-radius-md)` - `--toggle-group-radius-sm`: `var(--toggle-group-radius-sm)` - `--toggle-group-radius-xl`: `var(--toggle-group-radius-xl)` - `--toggle-group-radius-xs`: `var(--toggle-group-radius-xs)` - `--toggle-group-shadow-default`: `var(--toggle-group-shadow-default)` - `--toggle-group-shadow-outline`: `var(--toggle-group-shadow-outline)` ### Toolbar.tsx Toolbar 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/toolbar/toolbar.tsx` _No CVA variants declared._ ### Tooltip Tooltip 컴포넌트 PRD **Source**: `packages/ui-foundation/src/components/ui/tooltip/tooltip.variants.ts` **Token prefix**: `--tooltip-` _No CVA variants declared._ #### CSS tokens used - `--tooltip-content-background`: `var(--tooltip-content-background)` → `#0a0a0a` - `--tooltip-content-font-size`: `var(--tooltip-content-font-size)` → `0.75rem` - `--tooltip-content-foreground`: `var(--tooltip-content-foreground)` → `#ffffff` - `--tooltip-content-padding-x`: `var(--tooltip-content-padding-x)` → `0.75rem` - `--tooltip-content-padding-y`: `var(--tooltip-content-padding-y)` → `0.5rem` - `--tooltip-content-radius`: `var(--tooltip-content-radius)` → `0.2344rem` ### Tree **Source**: `packages/ui-foundation/src/components/ui/tree/tree.variants.ts` **Token prefix**: `--tree-` _No CVA variants declared._ #### CSS tokens used - `--tree-label-font-size`: `var(--tree-label-font-size)` → `1rem` - `--tree-lines-border`: `var(--tree-lines-border)` → `#e5e5e5` - `--tree-node-trigger-background`: `var(--tree-node-trigger-background)` → `transparent` - `--tree-node-trigger-background-hover`: `var(--tree-node-trigger-background-hover)` → `#f5f5f5` - `--tree-node-trigger-background-selected`: `var(--tree-node-trigger-background-selected)` → `transparent` - `--tree-node-trigger-foreground`: `var(--tree-node-trigger-foreground)` → `#171717` - `--tree-node-trigger-foreground-hover`: `var(--tree-node-trigger-foreground-hover)` → `#171717` - `--tree-node-trigger-foreground-selected`: `var(--tree-node-trigger-foreground-selected)` → `#737373` - `--tree-node-trigger-padding-x`: `var(--tree-node-trigger-padding-x)` → `0.75rem` - `--tree-node-trigger-padding-y`: `var(--tree-node-trigger-padding-y)` → `0.5rem` - `--tree-node-trigger-radius`: `var(--tree-node-trigger-radius)` → `0.2344rem` - `--tree-view-padding-x`: `var(--tree-view-padding-x)` → `0.5rem` - `--tree-view-padding-y`: `var(--tree-view-padding-y)` → `0.5rem` ### Typography **Source**: `packages/ui-foundation/src/components/ui/typography/typography.variants.ts` **Token prefix**: `--typography-` _No CVA variants declared._ #### CSS tokens used - `--typography-blockquote-border`: `var(--typography-blockquote-border)` → `#e5e5e5` - `--typography-blockquote-border-width`: `var(--typography-blockquote-border-width)` → `2px` - `--typography-blockquote-margin-top`: `var(--typography-blockquote-margin-top)` → `1.25rem` - `--typography-blockquote-padding-left`: `var(--typography-blockquote-padding-left)` → `1.25rem` - `--typography-h1-font-size`: `var(--typography-h1-font-size)` → `2.25rem` - `--typography-h1-font-weight`: `var(--typography-h1-font-weight)` → `700` - `--typography-h1-letter-spacing`: `var(--typography-h1-letter-spacing)` → `-0.025em` - `--typography-h2-border-bottom`: `var(--typography-h2-border-bottom)` → `0px` - `--typography-h2-font-size`: `var(--typography-h2-font-size)` → `1.875rem` - `--typography-h2-font-weight`: `var(--typography-h2-font-weight)` → `600` - `--typography-h2-letter-spacing`: `var(--typography-h2-letter-spacing)` → `-0.025em` - `--typography-h2-padding-bottom`: `var(--typography-h2-padding-bottom)` → `0px` - `--typography-h3-font-size`: `var(--typography-h3-font-size)` → `1.5rem` - `--typography-h3-font-weight`: `var(--typography-h3-font-weight)` → `600` - `--typography-h3-letter-spacing`: `var(--typography-h3-letter-spacing)` → `-0.025em` - `--typography-h4-font-size`: `var(--typography-h4-font-size)` → `1.25rem` - `--typography-h4-font-weight`: `var(--typography-h4-font-weight)` → `600` - `--typography-h4-letter-spacing`: `var(--typography-h4-letter-spacing)` → `-0.025em` - `--typography-inline-code-background`: `var(--typography-inline-code-background)` → `#f5f5f5` - `--typography-inline-code-font-size`: `var(--typography-inline-code-font-size)` → `0.875rem` - `--typography-inline-code-font-weight`: `var(--typography-inline-code-font-weight)` → `600` - `--typography-inline-code-padding-x`: `var(--typography-inline-code-padding-x)` → `0.25rem` - `--typography-inline-code-padding-y`: `var(--typography-inline-code-padding-y)` → `0.25rem` - `--typography-inline-code-radius`: `var(--typography-inline-code-radius)` → `0.1563rem` - `--typography-large-font-size`: `var(--typography-large-font-size)` → `1.125rem` - `--typography-large-font-weight`: `var(--typography-large-font-weight)` → `600` - `--typography-lead-font-size`: `var(--typography-lead-font-size)` → `1rem` - `--typography-lead-foreground`: `var(--typography-lead-foreground)` → `#737373` - `--typography-list-item-margin-top`: `var(--typography-list-item-margin-top)` → `0.5rem` - `--typography-list-margin-left`: `var(--typography-list-margin-left)` → `1.25rem` - `--typography-list-margin-y`: `var(--typography-list-margin-y)` → `1.25rem` - `--typography-muted-font-size`: `var(--typography-muted-font-size)` → `0.875rem` - `--typography-muted-foreground`: `var(--typography-muted-foreground)` → `#737373` - `--typography-p-line-height`: `var(--typography-p-line-height)` → `1.5` - `--typography-p-margin-top`: `var(--typography-p-margin-top)` → `1.25rem` - `--typography-small-font-size`: `var(--typography-small-font-size)` → `0.75rem` - `--typography-small-font-weight`: `var(--typography-small-font-weight)` → `400` - `--typography-small-line-height`: `var(--typography-small-line-height)` → `1.5` - `--typography-table-margin-y`: `var(--typography-table-margin-y)` → `1.25rem` - `--typography-tracking-tight`: `var(--typography-tracking-tight)` → `-0.025em` ## Brand Overlay — Cals | 항목 | 상세 | | --------------- | --------------------------------------- | | **브랜드 컬러** | Steel Blue `#9FCAD9` (Primary-500) | | **딥 틸** | `#055A78` (Primary-800) | | **라이트 배경** | `#F5FAFC` (Primary-50) | | **모드** | Light / Dark Dual | | **폰트** | Pretendard, Noto Sans KR, IBM Plex Mono | ### Added components (74) ### Alert.tsx CS Alert 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/alert/alert.tsx` _No CVA variants declared._ ### AreaChart.tsx AreaChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/area-chart/area-chart.tsx` _No CVA variants declared._ ### BarChart.tsx BarChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/bar-chart/bar-chart.tsx` _No CVA variants declared._ ### Box.tsx Box 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/box/box.tsx` _No CVA variants declared._ ### BoxData.tsx BoxData 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/box-data/box-data.tsx` _No CVA variants declared._ ### BoxIcon.tsx BoxIcon 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/box-icon/box-icon.tsx` _No CVA variants declared._ ### BoxLabel.tsx BoxLabel 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/box-label/box-label.tsx` _No CVA variants declared._ ### Button.tsx Button 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/button/button.tsx` _No CVA variants declared._ ### ChannelButton.tsx ChannelButton 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/channel-button/channel-button.tsx` _No CVA variants declared._ ### ChannelMailPopup.tsx ChannelMailPopup 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/channel-mail-popup/channel-mail-popup.tsx` _No CVA variants declared._ ### Checkbox.tsx Checkbox 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/checkbox/checkbox.tsx` _No CVA variants declared._ ### Collapse.tsx Collapse / CollapseItem 컴포넌트 PRD (기능정의서) **Source**: `packages/ui-cals/src/components/ui/collapse/collapse.tsx` _No CVA variants declared._ ### Collection.tsx Collection 컴포넌트 PRD (기능정의서) **Source**: `packages/ui-cals/src/components/ui/collection/collection.tsx` _No CVA variants declared._ ### ColorPicker.tsx ColorPicker 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/color-picker/color-picker.tsx` _No CVA variants declared._ ### ColumnBarChart.tsx ColumnBarChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/column-bar-chart/column-bar-chart.tsx` _No CVA variants declared._ ### Comment.tsx Comment 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/comment/comment.tsx` _No CVA variants declared._ ### CommentButton.tsx CommentButton 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/comment-button/comment-button.tsx` _No CVA variants declared._ ### ConditionalFormatting.tsx CS Conditional Formatting PRD **Source**: `packages/ui-cals/src/components/ui/conditional-formatting/conditional-formatting.tsx` _No CVA variants declared._ ### Confirm.tsx CS Confirm 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/confirm/confirm.tsx` _No CVA variants declared._ ### ContextMenu.tsx CS ContextMenu 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/context-menu/context-menu.tsx` _No CVA variants declared._ ### DatePicker.tsx DatePicker 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/date-picker/date-picker.tsx` _No CVA variants declared._ ### DateTimePicker.tsx DateTimePicker 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/date-time-picker/date-time-picker.tsx` _No CVA variants declared._ ### DonutChart.tsx DonutChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/donut-chart/donut-chart.tsx` _No CVA variants declared._ ### Dynamic.tsx Dynamic 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/dynamic/dynamic.tsx` _No CVA variants declared._ ### Editor.tsx Editor PRD (기능정의서) **Source**: `packages/ui-cals/src/components/ui/editor/editor.tsx` _No CVA variants declared._ ### EmptyChart.tsx **Source**: `packages/ui-cals/src/components/ui/empty-chart/empty-chart.tsx` _No CVA variants declared._ ### FileUpload.tsx FileUpload — PRD (기능정의서) **Source**: `packages/ui-cals/src/components/ui/file-upload/file-upload.tsx` _No CVA variants declared._ ### Form.tsx Form 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/form/form.tsx` _No CVA variants declared._ ### FunnelChart.tsx FunnelChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/funnel-chart/funnel-chart.tsx` _No CVA variants declared._ ### Grid.tsx Grid 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/grid/grid.tsx` _No CVA variants declared._ #### CSS tokens used - `--grid-row-selected`: `var(--grid-row-selected)` ### Group.tsx CS Group 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/group/group.tsx` _No CVA variants declared._ ### Hidden.tsx Hidden 컴포넌트 기능정의서 (PRD) **Source**: `packages/ui-cals/src/components/ui/hidden/hidden.tsx` _No CVA variants declared._ ### ImageUpload.tsx ImageUpload PRD (기능정의서) **Source**: `packages/ui-cals/src/components/ui/image-upload/image-upload.tsx` _No CVA variants declared._ ### ImageView.tsx ImageView 컴포넌트 기능정의서 (PRD) **Source**: `packages/ui-cals/src/components/ui/image-view/image-view.tsx` _No CVA variants declared._ ### InlineEditToolbar.tsx InlineEditToolbar 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/inline-edit-toolbar/inline-edit-toolbar.tsx` _No CVA variants declared._ ### Kanban.tsx Kanban 컴포넌트 기능정의서 (PRD) **Source**: `packages/ui-cals/src/components/ui/kanban/kanban.tsx` _No CVA variants declared._ ### Label.tsx Label 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/label/label.tsx` _No CVA variants declared._ ### LineChart.tsx LineChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/line-chart/line-chart.tsx` _No CVA variants declared._ ### List.tsx List 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/list/list.tsx` _No CVA variants declared._ ### Lookup.tsx LookUp 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/lookup/lookup.tsx` _No CVA variants declared._ ### Menu.tsx CS Menu PRD **Source**: `packages/ui-cals/src/components/ui/menu/menu.tsx` _No CVA variants declared._ ### Number.tsx Number 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/number/number.tsx` _No CVA variants declared._ ### ObjectExplorer.tsx CS Object Explorer PRD **Source**: `packages/ui-cals/src/components/ui/object-explorer/object-explorer.tsx` _No CVA variants declared._ ### OrchestrationDesigner.tsx **Source**: `packages/ui-cals/src/components/ui/orchestration-designer/orchestration-designer.tsx` _No CVA variants declared._ ### ParetoChart.tsx ParetoChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/pareto-chart/pareto-chart.tsx` _No CVA variants declared._ ### Password.tsx Password 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/password/password.tsx` _No CVA variants declared._ ### PieChart.tsx PieChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/pie-chart/pie-chart.tsx` _No CVA variants declared._ ### Progress.tsx - **컴포넌트명**: Progress **Source**: `packages/ui-cals/src/components/ui/progress/progress.tsx` _No CVA variants declared._ ### ProgressUploader.tsx CS ProgressUploader 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/progress-uploader/progress-uploader.tsx` _No CVA variants declared._ ### PyramidChart.tsx PyramidChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/pyramid-chart/pyramid-chart.tsx` _No CVA variants declared._ ### Radio.tsx Radio 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/radio/radio.tsx` _No CVA variants declared._ ### ReplacementList.tsx CS Replacement List PRD **Source**: `packages/ui-cals/src/components/ui/replacement-list/replacement-list.tsx` _No CVA variants declared._ ### Schedule.tsx Schedule 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/schedule/schedule.tsx` _No CVA variants declared._ #### CSS tokens used - `--color-blue-500`: `var(--color-blue-500)` → `#3b82f6` ### Spacer.tsx Spacer 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/spacer/spacer.tsx` _No CVA variants declared._ ### SplineAreaChart.tsx SplineAreaChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/spline-area-chart/spline-area-chart.tsx` _No CVA variants declared._ ### SplineChart.tsx SplineChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/spline-chart/spline-chart.tsx` _No CVA variants declared._ ### StackedColumnBarChart.tsx StackedColumnBarChart 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/stacked-column-bar-chart/stacked-column-bar-chart.tsx` _No CVA variants declared._ ### Steps.tsx Steps 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/steps/steps.tsx` _No CVA variants declared._ ### TableColumn.tsx TableColumn 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/table-column/table-column.tsx` _No CVA variants declared._ ### Tabs.tsx Tabs (탭) **Source**: `packages/ui-cals/src/components/ui/tabs/tabs.tsx` _No CVA variants declared._ ### Text.tsx Text 컴포넌트 기능정의서 (PRD) **Source**: `packages/ui-cals/src/components/ui/text/text.tsx` _No CVA variants declared._ ### Textarea.tsx Textarea 컴포넌트 기능정의서 (PRD) **Source**: `packages/ui-cals/src/components/ui/textarea/textarea.tsx` _No CVA variants declared._ ### TextContent.tsx TextContent PRD **Source**: `packages/ui-cals/src/components/ui/text-content/text-content.tsx` _No CVA variants declared._ ### Timeline.tsx Timeline 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/timeline/timeline.tsx` _No CVA variants declared._ ### TimeSelect.tsx TimeSelect 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/time-select/time-select.tsx` _No CVA variants declared._ ### ToolbarButton.tsx ToolbarButton PRD **Source**: `packages/ui-cals/src/components/ui/toolbar-button/toolbar-button.tsx` _No CVA variants declared._ ### ToolbarForm.tsx ToolbarForm 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/toolbar-form/toolbar-form.tsx` _No CVA variants declared._ ### ToolbarGrid.tsx ToolbarGrid PRD **Source**: `packages/ui-cals/src/components/ui/toolbar-grid/toolbar-grid.tsx` _No CVA variants declared._ ### ToolbarList.tsx ToolbarList PRD **Source**: `packages/ui-cals/src/components/ui/toolbar-list/toolbar-list.tsx` _No CVA variants declared._ ### Tree.tsx Tree 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/tree/tree.tsx` _No CVA variants declared._ ### Upload.tsx CS Upload 컴포넌트 PRD **Source**: `packages/ui-cals/src/components/ui/upload/upload.tsx` _No CVA variants declared._ ### WebComponent.tsx WebComponent 컴포넌트 기능정의서 (PRD) **Source**: `packages/ui-cals/src/components/ui/web-component/web-component.tsx` _No CVA variants declared._ ### Wizard.tsx CS Wizard PRD **Source**: `packages/ui-cals/src/components/ui/wizard/wizard.tsx` _No CVA variants declared._ ### ZipCodeKr.tsx ZipCodeKR PRD **Source**: `packages/ui-cals/src/components/ui/zip-code-kr/zip-code-kr.tsx` _No CVA variants declared._ ### Overridden components (5) #### Carousel.tsx **Source**: `packages/ui-cals/src/components/ui/carousel/carousel.tsx` _No structural differences vs Foundation (overlay may re-export)._ #### Iframe.tsx **Source**: `packages/ui-cals/src/components/ui/iframe/iframe.tsx` _No structural differences vs Foundation (overlay may re-export)._ #### Resizable.tsx **Source**: `packages/ui-cals/src/components/ui/resizable/resizable.tsx` _No structural differences vs Foundation (overlay may re-export)._ #### Select **Source**: `packages/ui-cals/src/components/ui/select/select.variants.ts` - Removed variant keys: `size` - Overridden CSS tokens (3): `--combobox-trigger-background`, `--combobox-trigger-foreground`, `--combobox-trigger-border` #### Toolbar.tsx **Source**: `packages/ui-cals/src/components/ui/toolbar/toolbar.tsx` _No structural differences vs Foundation (overlay may re-export)._ ## Brand Overlay — iCignal | 항목 | 상세 | | ----------------- | --------------------------------------- | | **브랜드 컬러** | iCignal Blue `#2196f3` (Primary) | | **다크 사이드바** | Gray-800 dark chrome | | **모드** | Light / Dark Dual | | **폰트** | Pretendard, Noto Sans KR, IBM Plex Mono | ### Added components (33) ### AlertDialog.tsx **Source**: `packages/ui-icignal/src/components/ui/alert-dialog/alert-dialog.tsx` _No CVA variants declared._ ### Avatar.tsx **Source**: `packages/ui-icignal/src/components/ui/avatar/avatar.tsx` _No CVA variants declared._ ### BoxHelper.tsx **Source**: `packages/ui-icignal/src/components/ui/box-helper/box-helper.tsx` _No CVA variants declared._ ### Breadcrumb.tsx **Source**: `packages/ui-icignal/src/components/ui/breadcrumb/breadcrumb.tsx` _No CVA variants declared._ ### CheckboxGroup **Source**: `packages/ui-icignal/src/components/ui/checkbox-group/checkbox-group.variants.ts` **Layout**: display: flex **Token prefix**: `--checkbox-group-` #### `orientation` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `horizontal` (default) | 1 | 1 | | `vertical` | 1 | 1 | #### CSS tokens used - `--checkbox-group-gap-x`: `var(--checkbox-group-gap-x)` - `--checkbox-group-gap-y`: `var(--checkbox-group-gap-y)` ### ColorPicker.tsx **Source**: `packages/ui-icignal/src/components/ui/color-picker/color-picker.tsx` _No CVA variants declared._ ### Combobox.tsx **Source**: `packages/ui-icignal/src/components/ui/combobox/combobox.tsx` _No CVA variants declared._ #### CSS tokens used - `--combobox-trigger-height-md`: `var(--combobox-trigger-height-md)` ### Command.tsx **Source**: `packages/ui-icignal/src/components/ui/command/command.tsx` _No CVA variants declared._ ### ContextMenu.tsx **Source**: `packages/ui-icignal/src/components/ui/context-menu/context-menu.tsx` _No CVA variants declared._ ### DataTable List 컴포넌트 PRD **Source**: `packages/ui-icignal/src/components/ui/data-table/data-table.variants.ts` **Layout**: gap: `var(--data-table-gap)` **Token prefix**: `--data-table-` #### `hovered` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 1 | 1 | | `false` | 0 | 0 | #### CSS tokens used - `--data-table-gap`: `var(--data-table-gap)` - `--data-table-head-foreground-filtered`: `var(--data-table-head-foreground-filtered)` - `--data-table-head-resizer-background`: `var(--data-table-head-resizer-background)` - `--data-table-head-resizer-background-hover`: `var(--data-table-head-resizer-background-hover)` - `--text-foreground`: `var(--text-foreground)` ### DropdownMenu.tsx **Source**: `packages/ui-icignal/src/components/ui/dropdown-menu/dropdown-menu.tsx` _No CVA variants declared._ ### Editor.tsx **Source**: `packages/ui-icignal/src/components/ui/editor/editor.tsx` _No CVA variants declared._ ### FileUpload.tsx **Source**: `packages/ui-icignal/src/components/ui/file-upload/file-upload.tsx` _No CVA variants declared._ ### Input.tsx **Source**: `packages/ui-icignal/src/components/ui/input/input.tsx` _No CVA variants declared._ ### InputNumber.tsx **Source**: `packages/ui-icignal/src/components/ui/input-number/input-number.tsx` _No CVA variants declared._ ### InputPassword **Source**: `packages/ui-icignal/src/components/ui/input-password/input-password.variants.ts` **Token prefix**: `--input-password-` #### `size` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `xs` | 4 | 4 | | `sm` | 4 | 4 | | `md` (default) | 4 | 4 | | `lg` | 4 | 4 | | `xl` | 4 | 4 | #### `disabled` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 3 | 3 | #### `readOnly` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 3 | 3 | #### CSS tokens used - `--input-password-background`: `var(--input-password-background)` - `--input-password-background-disabled`: `var(--input-password-background-disabled)` - `--input-password-background-readonly`: `var(--input-password-background-readonly)` - `--input-password-background-selection`: `var(--input-password-background-selection)` - `--input-password-border`: `var(--input-password-border)` - `--input-password-border-disabled`: `var(--input-password-border-disabled)` - `--input-password-border-readonly`: `var(--input-password-border-readonly)` - `--input-password-font-size-lg`: `var(--input-password-font-size-lg)` - `--input-password-font-size-md`: `var(--input-password-font-size-md)` - `--input-password-font-size-sm`: `var(--input-password-font-size-sm)` - `--input-password-font-size-xl`: `var(--input-password-font-size-xl)` - `--input-password-font-size-xs`: `var(--input-password-font-size-xs)` - `--input-password-foreground`: `var(--input-password-foreground)` - `--input-password-foreground-disabled`: `var(--input-password-foreground-disabled)` - `--input-password-foreground-readonly`: `var(--input-password-foreground-readonly)` - `--input-password-foreground-selection`: `var(--input-password-foreground-selection)` - `--input-password-height-lg`: `var(--input-password-height-lg)` - `--input-password-height-md`: `var(--input-password-height-md)` - `--input-password-height-sm`: `var(--input-password-height-sm)` - `--input-password-height-xl`: `var(--input-password-height-xl)` - `--input-password-height-xs`: `var(--input-password-height-xs)` - `--input-password-padding-x-lg`: `var(--input-password-padding-x-lg)` - `--input-password-padding-x-md`: `var(--input-password-padding-x-md)` - `--input-password-padding-x-sm`: `var(--input-password-padding-x-sm)` - `--input-password-padding-x-xl`: `var(--input-password-padding-x-xl)` - `--input-password-padding-x-xs`: `var(--input-password-padding-x-xs)` - `--input-password-placeholder`: `var(--input-password-placeholder)` - `--input-password-radius-lg`: `var(--input-password-radius-lg)` - `--input-password-radius-md`: `var(--input-password-radius-md)` - `--input-password-radius-sm`: `var(--input-password-radius-sm)` - `--input-password-radius-xl`: `var(--input-password-radius-xl)` - `--input-password-radius-xs`: `var(--input-password-radius-xs)` - `--input-password-shadow`: `var(--input-password-shadow)` ### Lookup.tsx **Source**: `packages/ui-icignal/src/components/ui/lookup/lookup.tsx` _No CVA variants declared._ ### Popover.tsx **Source**: `packages/ui-icignal/src/components/ui/popover/popover.tsx` _No CVA variants declared._ ### Progress.tsx **Source**: `packages/ui-icignal/src/components/ui/progress/progress.tsx` _No CVA variants declared._ ### RadioButton.tsx **Source**: `packages/ui-icignal/src/components/ui/radio-button/radio-button.tsx` _No CVA variants declared._ ### RadioButtonGroup.tsx **Source**: `packages/ui-icignal/src/components/ui/radio-button-group/radio-button-group.tsx` _No CVA variants declared._ ### Select.tsx **Source**: `packages/ui-icignal/src/components/ui/select/select.tsx` _No CVA variants declared._ #### CSS tokens used - `--select-trigger-foreground`: `var(--select-trigger-foreground)` ### Slider.tsx **Source**: `packages/ui-icignal/src/components/ui/slider/slider.tsx` _No CVA variants declared._ ### TabNavigation **Source**: `packages/ui-icignal/src/components/ui/tab-navigation/tab-navigation.variants.ts` **Layout**: display: inline-flex · align: CENTER · border: 1px solid #### `pressed` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 6 | 0 | | `false` | 6 | 0 | #### `disabled` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `true` | 5 | 0 | | `false` | 0 | 0 | ### Tabs.tsx **Source**: `packages/ui-icignal/src/components/ui/tabs/tabs.tsx` _No CVA variants declared._ #### CSS tokens used - `--spacing`: `var(--spacing)` → `0.25rem` ### Tag **Source**: `packages/ui-icignal/src/components/ui/tag/tag.variants.ts` **Layout**: display: inline-flex · align: CENTER · border: 1px solid **Token prefix**: `--tag-` #### `variant` | Value | Classes (count) | CSS tokens (count) | | --- | --- | --- | | `default` (default) | 4 | 4 | | `selected` | 4 | 4 | | `filter` | 4 | 4 | | `outline` | 4 | 4 | #### CSS tokens used - `--tag-background-default`: `var(--tag-background-default)` - `--tag-background-default-hover`: `var(--tag-background-default-hover)` - `--tag-background-filter`: `var(--tag-background-filter)` - `--tag-background-filter-hover`: `var(--tag-background-filter-hover)` - `--tag-background-outline`: `var(--tag-background-outline)` - `--tag-background-outline-hover`: `var(--tag-background-outline-hover)` - `--tag-background-selected`: `var(--tag-background-selected)` - `--tag-background-selected-hover`: `var(--tag-background-selected-hover)` - `--tag-border-default`: `var(--tag-border-default)` - `--tag-border-filter`: `var(--tag-border-filter)` - `--tag-border-outline`: `var(--tag-border-outline)` - `--tag-border-selected`: `var(--tag-border-selected)` - `--tag-font-size`: `var(--tag-font-size)` - `--tag-font-weight`: `var(--tag-font-weight)` - `--tag-foreground-default`: `var(--tag-foreground-default)` - `--tag-foreground-filter`: `var(--tag-foreground-filter)` - `--tag-foreground-outline`: `var(--tag-foreground-outline)` - `--tag-foreground-selected`: `var(--tag-foreground-selected)` - `--tag-gap`: `var(--tag-gap)` - `--tag-padding-x`: `var(--tag-padding-x)` - `--tag-padding-y`: `var(--tag-padding-y)` - `--tag-radius`: `var(--tag-radius)` ### Textarea.tsx **Source**: `packages/ui-icignal/src/components/ui/textarea/textarea.tsx` _No CVA variants declared._ ### TimePicker.tsx **Source**: `packages/ui-icignal/src/components/ui/time-picker/time-picker.tsx` _No CVA variants declared._ ### Toggle.tsx **Source**: `packages/ui-icignal/src/components/ui/toggle/toggle.tsx` _No CVA variants declared._ ### ToggleGroup.tsx **Source**: `packages/ui-icignal/src/components/ui/toggle-group/toggle-group.tsx` _No CVA variants declared._ ### Tooltip.tsx **Source**: `packages/ui-icignal/src/components/ui/tooltip/tooltip.tsx` _No CVA variants declared._ ### Typography.tsx **Source**: `packages/ui-icignal/src/components/ui/typography/typography.tsx` _No CVA variants declared._ ### WorkflowDesigner **Source**: `packages/ui-icignal/src/components/ui/workflow-designer/workflow-designer.variants.ts` _No CVA variants declared._ ### Overridden components (6) #### Checkbox **Source**: `packages/ui-icignal/src/components/ui/checkbox/checkbox.variants.ts` - Removed variant keys: `size` #### DatePicker **Source**: `packages/ui-icignal/src/components/ui/date-picker/date-picker.variants.ts` - Added variant keys: `disabled`, `readOnly` #### OverlayLoading **Source**: `packages/ui-icignal/src/components/ui/overlay-loading/overlay-loading.variants.ts` _No structural differences vs Foundation (overlay may re-export)._ #### Pagination **Source**: `packages/ui-icignal/src/components/ui/pagination/pagination.variants.ts` - Overridden CSS tokens (2): `--pagination-total-font-size`, `--pagination-total-count-font-weight` #### Switch **Source**: `packages/ui-icignal/src/components/ui/switch/switch.variants.ts` - Overridden CSS tokens (1): `--foreground` #### Tree **Source**: `packages/ui-icignal/src/components/ui/tree/tree.variants.ts` _No structural differences vs Foundation (overlay may re-export)._