@bigtablet/design-system 2.5.0 → 3.0.0

package/dist/styles/a11y/_index.scss

@@ -1,7 +1,67 @@
 @use "../colors" as colors;
+@use "../breakpoints" as breakpoint;
 
-$focus_ring:         0 0 0 3px rgba(colors.$color_base_brand_primary, 0.15);
-$focus_ring_error:   0 0 0 3px rgba(colors.$color_base_status_error, 0.15);
-$focus_ring_success: 0 0 0 3px rgba(colors.$color_base_status_success, 0.15);
+// Focus rings — CSS Custom Properties로 light/dark 자동 전환.
+// Dark 모드는 흰색 alpha 기반으로 navy bg 위에서도 가시성 확보.
 
-$tap_min_size: 44px;
+:root {
+  --bt-focus-ring:         0 0 0 3px rgba(0, 0, 0, 0.15);
+  --bt-focus-ring-error:   0 0 0 3px rgba(239, 68, 68, 0.30);
+  --bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.30);
+}
+
+[data-theme="dark"] {
+  --bt-focus-ring:         0 0 0 3px rgba(255, 255, 255, 0.35);
+  --bt-focus-ring-error:   0 0 0 3px rgba(239, 68, 68, 0.45);
+  --bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --bt-focus-ring:         0 0 0 3px rgba(255, 255, 255, 0.35);
+    --bt-focus-ring-error:   0 0 0 3px rgba(239, 68, 68, 0.45);
+    --bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45);
+  }
+}
+
+// SCSS aliases — 기존 사용처는 그대로 작동
+$focus_ring:         var(--bt-focus-ring);
+$focus_ring_error:   var(--bt-focus-ring-error);
+$focus_ring_success: var(--bt-focus-ring-success);
+
+// ── Tap target sizes (a11y) ─────────────────────────────────────────────
+// WCAG 2.1 SC 2.5.5 권장 최소: 44×44
+
+$tap_min_size:           44px;  // a11y 최소 권장
+$tap_target_dense:       32px;  // 데스크탑 인라인 폼, 컴팩트 UI
+$tap_target_compact:     40px;  // 데스크탑 기본
+$tap_target_comfortable: 48px;  // 모바일/터치 기본 (44 초과)
+$tap_target_spacious:    56px;  // 강조 CTA, 풀스크린 액션
+
+// ── Responsive height mixin ─────────────────────────────────────────────
+// 데스크탑 height 기준으로 compact breakpoint(<600px)에서 한 단계 키움.
+// 명시적으로 $mobile 지정 시 그 값을 사용.
+//
+// 사용 예:
+//   @include token.responsive_height(token.$tap_target_compact);
+//     → 데스크탑 40, 모바일 48
+//   @include token.responsive_height(token.$tap_target_compact, token.$tap_target_spacious);
+//     → 명시
+
+@mixin responsive_height($desktop, $mobile: null) {
+  min-height: $desktop;
+
+  $bumped: $mobile;
+  @if $bumped == null {
+    @if      $desktop == $tap_target_dense       { $bumped: $tap_target_compact; }
+    @else if $desktop == $tap_target_compact     { $bumped: $tap_target_comfortable; }
+    @else if $desktop == $tap_target_comfortable { $bumped: $tap_target_spacious; }
+    @else                                        { $bumped: $desktop; }
+  }
+
+  @if $bumped != $desktop {
+    @include breakpoint.compact {
+      min-height: $bumped;
+    }
+  }
+}

package/dist/styles/border-width/_index.scss

@@ -8,4 +8,5 @@ $border_width_2: 2px;
 
 $border_width_none:      $border_width_0;
 $border_width_standard:  $border_width_1;
+$border_width_thick:     $border_width_2;
 $border_width_indicator: $border_width_2;

package/dist/styles/colors/_index.scss

@@ -1,9 +1,22 @@
-// ── Base colors ───────────────────────────────────────────────────────────────
+// ════════════════════════════════════════════════════════════════════════
+// Bigtablet 컬러 토큰 — Light/Dark 양쪽 지원
+//
+// 구조:
+//   1. Base colors (raw values) — SCSS 변수
+//   2. CSS custom properties (:root + [data-theme="dark"]) — 런타임 테마 전환
+//   3. Semantic SCSS 변수 — CSS var를 참조 → 기존 사용처(@use token; $color_*) 호환 유지
+//
+// `brand_primary`, `accent.*`, `status.*` 는 light/dark 동일 (브랜드 일관성).
+// 나머지 표면/텍스트/border 는 dark에서 navy 계열로 자동 전환.
+// ════════════════════════════════════════════════════════════════════════
+
+// ── Base colors (raw, never theme-aware) ────────────────────────────────
 
 $color_base_brand_primary:    #121212;
 $color_base_blue_600:         #1A73E8;
 $color_base_neutral_0:        #FFFFFF;
 $color_base_neutral_50:       #F4F4F4;
+$color_base_neutral_100:      #F2F2F2;
 $color_base_neutral_200:      #E5E5E5;
 $color_base_neutral_300:      #999999;
 $color_base_neutral_400:      #B3B3B3;
@@ -16,6 +29,20 @@ $color_base_status_error:     #EF4444;
 $color_base_status_success:   #10B981;
 $color_base_status_warning:   #F59E0B;
 $color_base_status_info:      #3B82F6;
+
+// Bigtablet navy (초기 홈페이지에서 추출) — slate-gray-blue + sky blue
+$color_base_navy_50:          #F2F5F8;
+$color_base_navy_100:         #DDE3E9;
+$color_base_navy_200:         #B4C2CD;
+$color_base_navy_300:         #7AA5D2;
+$color_base_navy_400:         #5A8DCB;
+$color_base_navy_500:         #4C7CB6;
+$color_base_navy_600:         #47555E;
+$color_base_navy_700:         #3D4852;
+$color_base_navy_800:         #303841;
+$color_base_navy_900:         #1F2630;
+
+// Alpha
 $color_base_alpha_black_5:    rgba(0, 0, 0, 0.05);
 $color_base_alpha_black_8:    rgba(0, 0, 0, 0.08);
 $color_base_alpha_black_12:   rgba(26, 26, 26, 0.12);
@@ -24,54 +51,227 @@ $color_base_alpha_black_50:   rgba(0, 0, 0, 0.50);
 $color_base_alpha_white_5:    rgba(255, 255, 255, 0.05);
 $color_base_alpha_white_8:    rgba(255, 255, 255, 0.08);
 $color_base_alpha_white_12:   rgba(255, 255, 255, 0.12);
+$color_base_alpha_white_38:   rgba(255, 255, 255, 0.38);
+
+// ── CSS custom properties (런타임 테마 전환) ────────────────────────────
+// `:root` = light mode 기본. `[data-theme="dark"]` = dark overrides.
+// 컴포넌트는 SCSS `$color_*` 변수로 접근 — 아래 변수들이 var()로 컴파일됨.
+
+:root {
+  // Brand (light/dark 동일)
+  --bt-color-brand-primary:        #{$color_base_brand_primary};
+  --bt-color-brand-on-primary:     #{$color_base_neutral_0};
+  --bt-color-brand-primary-container: #{$color_base_alpha_black_5};
+
+  // Text
+  --bt-color-text-heading:         #{$color_base_neutral_900};
+  --bt-color-text-body:            #{$color_base_neutral_700};
+  --bt-color-text-caption:         #{$color_base_neutral_500};
+  --bt-color-text-brand:           #{$color_base_brand_primary};
+  --bt-color-text-inverse:         #{$color_base_neutral_0};
+  --bt-color-text-disabled:        #{$color_base_alpha_black_38};
+
+  // Background
+  --bt-color-bg-solid:             #{$color_base_neutral_0};
+  --bt-color-bg-solid-dim:         #{$color_base_neutral_50};
+  --bt-color-bg-additive:          #{$color_base_alpha_black_5};
+  --bt-color-bg-disabled:          #{$color_base_alpha_black_12};
+  --bt-color-bg-overlay:           #{$color_base_alpha_black_50};
+  --bt-color-bg-inverse-surface:   #{$color_base_neutral_800};
+
+  // State
+  --bt-color-state-hover-on-light:    #{$color_base_alpha_black_5};
+  --bt-color-state-pressed-on-light:  #{$color_base_alpha_black_12};
+  --bt-color-state-focus-on-light:    #{$color_base_alpha_black_8};
+  --bt-color-state-hover-on-dark:     #{$color_base_alpha_white_5};
+  --bt-color-state-pressed-on-dark:   #{$color_base_alpha_white_12};
+  --bt-color-state-focus-on-dark:     #{$color_base_alpha_white_8};
+
+  // Border
+  --bt-color-border-default:       #{$color_base_neutral_200};
+  --bt-color-border-hover:         #{$color_base_neutral_400};
+  --bt-color-border-subtle:        #{$color_base_alpha_black_8};
+  --bt-color-border-focus:         #{$color_base_neutral_900};
+  --bt-color-border-disabled:      #{$color_base_neutral_100};
+
+  // Status (light/dark 동일)
+  --bt-color-status-error:         #{$color_base_status_error};
+  --bt-color-status-success:       #{$color_base_status_success};
+  --bt-color-status-warning:       #{$color_base_status_warning};
+  --bt-color-status-info:          #{$color_base_status_info};
+
+  // Accent (검정 brand 기반 — light에서 검정, dark에서 흰색 반전)
+  // 컴포넌트 active/selected/indicator 강조에 사용.
+  // navy 색상은 `color_base_navy_*`로 별도 보존 (legacy/optional usage).
+  --bt-color-accent-subtle:        #{$color_base_alpha_black_5};
+  --bt-color-accent-muted:         #{$color_base_alpha_black_12};
+  --bt-color-accent-light:         #{$color_base_neutral_400};
+  --bt-color-accent-default:       #{$color_base_brand_primary};   // 검정 (brand와 동일)
+  --bt-color-accent-strong:        #{$color_base_neutral_900};
+  --bt-color-accent-on-surface:    #{$color_base_neutral_0};        // 검정 위 흰색
+
+  // Skeleton (light gray gradient — dark 에서 navy gray 로 전환)
+  --bt-color-skeleton-base:        #F3F3F3;
+  --bt-color-skeleton-wave:        #f0f0f0;
+  --bt-color-skeleton-highlight:   #fafafa;
+}
+
+[data-theme="dark"] {
+  // 브라우저 기본 UI (스크롤바, form control 등) 다크 적응
+  color-scheme: dark;
+  // Font rendering — dark bg 위 흰 글씨의 halation/노이즈 보정
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  // Brand (dark 모드에서도 black 유지 — bg가 navy라 black 버튼 구분됨.
+  // 단 텍스트로 쓰일 땐 inverse 사용 권장)
+
+  // Text (light → inverted)
+  // heading: 100% 흰색 → 95%로 살짝 부드럽게 (눈 피로 완화, halation 보정)
+  --bt-color-text-heading:         rgba(255, 255, 255, 0.95);
+  --bt-color-text-body:            #{$color_base_navy_200};
+  --bt-color-text-caption:         #{$color_base_neutral_400};
+  --bt-color-text-inverse:         #{$color_base_neutral_900};
+  --bt-color-text-disabled:        #{$color_base_alpha_white_38};
+
+  // Background (light → navy)
+  --bt-color-bg-solid:             #{$color_base_navy_900};
+  --bt-color-bg-solid-dim:         #{$color_base_navy_800};
+  --bt-color-bg-additive:          #{$color_base_alpha_white_5};
+  --bt-color-bg-disabled:          #{$color_base_alpha_white_12};
+  --bt-color-bg-overlay:           rgba(0, 0, 0, 0.7);
+  --bt-color-bg-inverse-surface:   #{$color_base_neutral_50};
+
+  // State (검정 alpha → 흰색 alpha — dark bg 위에서 작동)
+  --bt-color-state-hover-on-light:    #{$color_base_alpha_white_8};
+  --bt-color-state-pressed-on-light:  #{$color_base_alpha_white_12};
+  --bt-color-state-focus-on-light:    #{$color_base_alpha_white_12};
+  --bt-color-state-hover-on-dark:     #{$color_base_alpha_black_8};
+  --bt-color-state-pressed-on-dark:   #{$color_base_alpha_black_12};
+  --bt-color-state-focus-on-dark:     #{$color_base_alpha_black_12};
+
+  // Border (light gray → navy mid)
+  --bt-color-border-default:       #{$color_base_navy_700};
+  --bt-color-border-hover:         #{$color_base_navy_400};
+  --bt-color-border-subtle:        #{$color_base_alpha_white_12};
+  --bt-color-border-focus:         #{$color_base_neutral_0};
+  --bt-color-border-disabled:      #{$color_base_navy_800};
+
+  // Brand container — dark 모드에선 white alpha로
+  --bt-color-brand-primary-container: #{$color_base_alpha_white_8};
+
+  // Accent (dark — 흰색 반전. active/selected가 dark navy bg 위에서 잘 보임)
+  --bt-color-accent-subtle:        #{$color_base_alpha_white_8};
+  --bt-color-accent-muted:         #{$color_base_alpha_white_12};
+  --bt-color-accent-light:         #{$color_base_neutral_300};
+  --bt-color-accent-default:       #{$color_base_neutral_0};         // 흰색
+  --bt-color-accent-strong:        #{$color_base_neutral_0};
+  --bt-color-accent-on-surface:    #{$color_base_neutral_900};       // 흰 위 검정 텍스트
+
+  // Skeleton — navy_700 (bg-solid-dim navy_800 보다 살짝 밝음 → 시각 대비)
+  --bt-color-skeleton-base:        #{$color_base_navy_700};
+  --bt-color-skeleton-wave:        #{$color_base_navy_700};
+  --bt-color-skeleton-highlight:   #{$color_base_navy_600};
+}
+
+// `prefers-color-scheme: dark` 자동 응답 (ThemeProvider 없이도 작동)
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    --bt-color-text-heading:         rgba(255, 255, 255, 0.95);
+    --bt-color-text-body:            #{$color_base_navy_200};
+    --bt-color-text-caption:         #{$color_base_neutral_400};
+    --bt-color-text-inverse:         #{$color_base_neutral_900};
+    --bt-color-text-disabled:        #{$color_base_alpha_white_38};
 
-// ── Semantic: Brand ───────────────────────────────────────────────────────────
+    --bt-color-bg-solid:             #{$color_base_navy_900};
+    --bt-color-bg-solid-dim:         #{$color_base_navy_800};
+    --bt-color-bg-additive:          #{$color_base_alpha_white_5};
+    --bt-color-bg-disabled:          #{$color_base_alpha_white_12};
+    --bt-color-bg-overlay:           rgba(0, 0, 0, 0.7);
+    --bt-color-bg-inverse-surface:   #{$color_base_neutral_50};
 
-$color_brand_primary:         $color_base_brand_primary;
-$color_brand_on_primary:      $color_base_neutral_0;
+    --bt-color-state-hover-on-light:    #{$color_base_alpha_white_8};
+    --bt-color-state-pressed-on-light:  #{$color_base_alpha_white_12};
+    --bt-color-state-focus-on-light:    #{$color_base_alpha_white_12};
+    --bt-color-state-hover-on-dark:     #{$color_base_alpha_black_8};
+    --bt-color-state-pressed-on-dark:   #{$color_base_alpha_black_12};
+    --bt-color-state-focus-on-dark:     #{$color_base_alpha_black_12};
 
-// ── Semantic: Text ────────────────────────────────────────────────────────────
+    --bt-color-border-default:       #{$color_base_navy_700};
+    --bt-color-border-hover:         #{$color_base_navy_400};
+    --bt-color-border-subtle:        #{$color_base_alpha_white_12};
+    --bt-color-border-focus:         #{$color_base_neutral_0};
+    --bt-color-border-disabled:      #{$color_base_navy_800};
 
-$color_text_heading:          $color_base_neutral_900;
-$color_text_body:             $color_base_neutral_700;
-$color_text_caption:          $color_base_neutral_500;
-$color_text_brand:            $color_base_brand_primary;
-$color_text_inverse:          $color_base_neutral_0;
-$color_text_disabled:         $color_base_alpha_black_38;
+    --bt-color-brand-primary-container: #{$color_base_alpha_white_8};
 
-// ── Semantic: Background ──────────────────────────────────────────────────────
+    // Accent dark — 흰색 반전
+    --bt-color-accent-subtle:        #{$color_base_alpha_white_8};
+    --bt-color-accent-muted:         #{$color_base_alpha_white_12};
+    --bt-color-accent-light:         #{$color_base_neutral_300};
+    --bt-color-accent-default:       #{$color_base_neutral_0};
+    --bt-color-accent-strong:        #{$color_base_neutral_0};
+    --bt-color-accent-on-surface:    #{$color_base_neutral_900};
 
-$color_bg_solid:              $color_base_neutral_0;
-$color_bg_solid_dim:          $color_base_neutral_50;
-$color_bg_additive:           $color_base_alpha_black_5;
-$color_bg_disabled:           $color_base_alpha_black_12;
-$color_bg_overlay:            $color_base_alpha_black_50;
-$color_bg_inverse_surface:    $color_base_neutral_800;
+    --bt-color-skeleton-base:        #{$color_base_navy_700};
+    --bt-color-skeleton-wave:        #{$color_base_navy_700};
+    --bt-color-skeleton-highlight:   #{$color_base_navy_600};
+  }
+}
 
-// ── Semantic: State ───────────────────────────────────────────────────────────
+// ── Semantic SCSS variables (CSS var 참조) ─────────────────────────────
+// 기존 사용처 호환 — `@use "..." as token; background: token.$color_bg_solid;`
 
-$color_state_hover_on_light:    $color_base_alpha_black_5;
-$color_state_pressed_on_light:  $color_base_alpha_black_12;
-$color_state_hover_on_dark:     $color_base_alpha_white_5;
-$color_state_pressed_on_dark:   $color_base_alpha_white_12;
+// Brand
+$color_brand_primary:         var(--bt-color-brand-primary);
+$color_brand_on_primary:      var(--bt-color-brand-on-primary);
+$color_brand_primary_container: var(--bt-color-brand-primary-container);
 
-// ── Extended: tokens.json에 없지만 컴포넌트에서 사용 중 ─────────────────────
+// Text
+$color_text_heading:          var(--bt-color-text-heading);
+$color_text_body:             var(--bt-color-text-body);
+$color_text_caption:          var(--bt-color-text-caption);
+$color_text_brand:            var(--bt-color-text-brand);
+$color_text_inverse:          var(--bt-color-text-inverse);
+$color_text_disabled:         var(--bt-color-text-disabled);
 
-$color_state_focus_on_light:    $color_base_alpha_black_8;
-$color_state_focus_on_dark:     $color_base_alpha_white_8;
-$color_brand_primary_container: $color_base_alpha_black_5;
+// Background
+$color_bg_solid:              var(--bt-color-bg-solid);
+$color_bg_solid_dim:          var(--bt-color-bg-solid-dim);
+$color_bg_additive:           var(--bt-color-bg-additive);
+$color_bg_disabled:           var(--bt-color-bg-disabled);
+$color_bg_overlay:            var(--bt-color-bg-overlay);
+$color_bg_inverse_surface:    var(--bt-color-bg-inverse-surface);
 
-// ── Semantic: Border ──────────────────────────────────────────────────────────
+// State
+$color_state_hover_on_light:    var(--bt-color-state-hover-on-light);
+$color_state_pressed_on_light:  var(--bt-color-state-pressed-on-light);
+$color_state_focus_on_light:    var(--bt-color-state-focus-on-light);
+$color_state_hover_on_dark:     var(--bt-color-state-hover-on-dark);
+$color_state_pressed_on_dark:   var(--bt-color-state-pressed-on-dark);
+$color_state_focus_on_dark:     var(--bt-color-state-focus-on-dark);
 
-$color_border_default:        $color_base_neutral_200;
-$color_border_hover:          $color_base_neutral_400;
-$color_border_subtle:         $color_base_alpha_black_8;
-$color_border_focus:          $color_base_neutral_900;
-$color_border_disabled:       #F2F2F2;
+// Border
+$color_border_default:        var(--bt-color-border-default);
+$color_border_hover:          var(--bt-color-border-hover);
+$color_border_subtle:         var(--bt-color-border-subtle);
+$color_border_focus:          var(--bt-color-border-focus);
+$color_border_disabled:       var(--bt-color-border-disabled);
 
-// ── Semantic: Status ──────────────────────────────────────────────────────────
+// Status
+$color_status_error:          var(--bt-color-status-error);
+$color_status_success:        var(--bt-color-status-success);
+$color_status_warning:        var(--bt-color-status-warning);
+$color_status_info:           var(--bt-color-status-info);
 
-$color_status_error:          $color_base_status_error;
-$color_status_success:        $color_base_status_success;
-$color_status_warning:        $color_base_status_warning;
-$color_status_info:           $color_base_status_info;
+// Accent
+$color_accent_subtle:         var(--bt-color-accent-subtle);
+$color_accent_muted:          var(--bt-color-accent-muted);
+$color_accent_light:          var(--bt-color-accent-light);
+$color_accent_default:        var(--bt-color-accent-default);
+$color_accent_strong:         var(--bt-color-accent-strong);
+$color_accent_on_surface:     var(--bt-color-accent-on-surface);

package/dist/styles/elevation/_index.scss

@@ -1,5 +1,36 @@
-$elevation_level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);
-$elevation_level2: 0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
-$elevation_level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
-$elevation_level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);
-$elevation_level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12);
+// Elevation shadows — CSS Custom Properties로 light/dark 자동 전환.
+// Dark 모드는 navy bg 위에서 그림자가 보이도록 더 강한 검정 + 살짝 spread 증가.
+
+:root {
+  --bt-elevation-level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);
+  --bt-elevation-level2: 0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
+  --bt-elevation-level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
+  --bt-elevation-level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);
+  --bt-elevation-level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12);
+}
+
+[data-theme="dark"] {
+  // navy bg 위에서 그림자 가시성 — 검정 더 진하게 + 약간 더 큰 spread
+  --bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);
+  --bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);
+  --bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);
+  --bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);
+  --bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);
+    --bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);
+    --bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);
+    --bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);
+    --bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45);
+  }
+}
+
+// SCSS aliases — 기존 사용처는 그대로 작동
+$elevation_level1: var(--bt-elevation-level1);
+$elevation_level2: var(--bt-elevation-level2);
+$elevation_level3: var(--bt-elevation-level3);
+$elevation_level4: var(--bt-elevation-level4);
+$elevation_level5: var(--bt-elevation-level5);

package/dist/styles/motion/_index.scss

@@ -1,7 +1,12 @@
-/* Base Transitions */
-$transition_fast: 0.1s ease-in-out;   // hover, icon
-$transition_base: 0.2s ease-in-out;   // 메뉴 열림
-$transition_slow: 0.3s ease-in-out;   // 레이아웃 변화
+/* Duration only — easing 따로 조합할 때 사용 */
+$duration_fast:  0.1s;
+$duration_base:  0.2s;
+$duration_slow:  0.3s;
+
+/* Base Transitions (composite shorthand — easing 이미 포함) */
+$transition_fast: $duration_fast ease-in-out;   // hover, icon
+$transition_base: $duration_base ease-in-out;   // 메뉴 열림
+$transition_slow: $duration_slow ease-in-out;   // 레이아웃 변화
 
 /* Easing Curves */
 $ease_out_expo: cubic-bezier(0.16, 1, 0.3, 1);
@@ -9,6 +14,10 @@ $ease_out_quart: cubic-bezier(0.25, 1, 0.5, 1);
 $ease_in_out_cubic: cubic-bezier(0.65, 0, 0.35, 1);
 $ease_spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 
+/* Enter / Exit easing aliases (use these for popups, modals, drawers, toasts) */
+$easing_enter: $ease_out_expo;                 // 감속 진입
+$easing_exit:  cubic-bezier(0.4, 0, 1, 1);     // 가속 퇴출
+
 /* Material / Emphasized */
 $transition_emphasized: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 $transition_bounce: 0.3s $ease_out_expo;
@@ -19,6 +28,12 @@ $transition_slide: 0.25s $ease_out_expo;
 $transition_scale: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
 $transition_state: 0.18s ease-in-out;
 
+/* Enter / Exit pairs (퇴출은 진입보다 짧게가 관례) */
+$transition_enter_fast: 0.15s $easing_enter;
+$transition_enter_base: 0.2s  $easing_enter;
+$transition_exit_fast:  0.12s $easing_exit;
+$transition_exit_base:  0.15s $easing_exit;
+
 /* Modern/Tech Transitions */
 $transition_smooth: 0.4s $ease_out_expo;
 $transition_spring: 0.5s $ease_spring;

package/dist/styles/skeleton/_index.scss

@@ -1,9 +1,11 @@
 // Standalone skeleton tokens — no external @use so consumers can import
 // this file directly without needing the design system's src/ in their loadPaths.
 
-$color_skeleton_base: #F3F3F3;
-$color_skeleton_wave: #f0f0f0;
-$color_skeleton_highlight: #fafafa;
+// CSS custom property 기반 — `[data-theme="dark"]` 에서 자동 전환.
+// fallback 값은 standalone import (colors 미포함) 시 light 동작 보장.
+$color_skeleton_base:      var(--bt-color-skeleton-base, #F3F3F3);
+$color_skeleton_wave:      var(--bt-color-skeleton-wave, #f0f0f0);
+$color_skeleton_highlight: var(--bt-color-skeleton-highlight, #fafafa);
 
 $skeleton_gradient: linear-gradient(
                 90deg,

package/dist/styles/typography/_index.scss

@@ -1,3 +1,5 @@
+@use "../breakpoints" as breakpoint;
+
 $font_family_primary: "Pretendard", sans-serif;
 
 // ── Base: Font size ───────────────────────────────────────────────────────────
@@ -42,6 +44,7 @@ $line_height_50:   50px;
 $line_height_60:   60px;
 
 $letter_spacing_normal: 0px;
+$letter_spacing_tight:  0.32px;
 
 // ── Semantic mixins ───────────────────────────────────────────────────────────
 
@@ -79,3 +82,71 @@ $letter_spacing_normal: 0px;
 @mixin label_medium_medium   { font-size: $font_size_13; font-weight: $font_weight_medium;  line-height: $line_height_18; letter-spacing: $letter_spacing_normal; }
 @mixin label_small           { font-size: $font_size_12; font-weight: $font_weight_regular; line-height: $line_height_16; letter-spacing: $letter_spacing_normal; }
 @mixin label_small_medium    { font-size: $font_size_12; font-weight: $font_weight_medium;  line-height: $line_height_16; letter-spacing: $letter_spacing_normal; }
+
+// ── Bold weight variants (v3.1) ───────────────────────────────────────────
+// 강조용 — 매번 font-weight 명시 안 해도 되도록.
+
+@mixin display_large_bold    { font-size: $font_size_48; font-weight: $font_weight_bold; line-height: $line_height_60; letter-spacing: -0.02em; }
+@mixin display_medium_bold   { font-size: $font_size_40; font-weight: $font_weight_bold; line-height: $line_height_50; letter-spacing: -0.02em; }
+@mixin display_small_bold    { font-size: $font_size_32; font-weight: $font_weight_bold; line-height: $line_height_40; letter-spacing: -0.015em; }
+
+@mixin heading_large_bold    { font-size: $font_size_28; font-weight: $font_weight_bold; line-height: $line_height_36; letter-spacing: -0.01em; }
+@mixin heading_medium_bold   { font-size: $font_size_24; font-weight: $font_weight_bold; line-height: $line_height_32; letter-spacing: -0.01em; }
+@mixin heading_small_bold    { font-size: $font_size_20; font-weight: $font_weight_bold; line-height: $line_height_28; letter-spacing: $letter_spacing_normal; }
+
+@mixin title_large_bold      { font-size: $font_size_18; font-weight: $font_weight_bold; line-height: $line_height_24; letter-spacing: $letter_spacing_normal; }
+@mixin title_medium_bold     { font-size: $font_size_16; font-weight: $font_weight_bold; line-height: $line_height_24; letter-spacing: $letter_spacing_normal; }
+@mixin title_small_bold      { font-size: $font_size_14; font-weight: $font_weight_bold; line-height: $line_height_20; letter-spacing: $letter_spacing_normal; }
+
+@mixin body_large_bold       { font-size: $font_size_16; font-weight: $font_weight_bold; line-height: $line_height_24; letter-spacing: $letter_spacing_normal; }
+@mixin body_medium_bold      { font-size: $font_size_15; font-weight: $font_weight_bold; line-height: $line_height_22_5; letter-spacing: $letter_spacing_normal; }
+@mixin body_small_bold       { font-size: $font_size_14; font-weight: $font_weight_bold; line-height: $line_height_20; letter-spacing: $letter_spacing_normal; }
+
+@mixin label_large_bold      { font-size: $font_size_14; font-weight: $font_weight_bold; line-height: $line_height_20; letter-spacing: $letter_spacing_tight; }
+@mixin label_medium_bold     { font-size: $font_size_13; font-weight: $font_weight_bold; line-height: $line_height_18; letter-spacing: $letter_spacing_tight; }
+@mixin label_small_bold      { font-size: $font_size_12; font-weight: $font_weight_bold; line-height: $line_height_16; letter-spacing: $letter_spacing_tight; }
+
+// ── Semantic aliases (v3.1) ───────────────────────────────────────────────
+// 의미상 명확한 이름. heading_*/body_* 외워두기 어려운 경우 대안.
+
+@mixin caption               { font-size: $font_size_12; font-weight: $font_weight_regular; line-height: $line_height_16; letter-spacing: $letter_spacing_tight; }
+@mixin caption_bold          { font-size: $font_size_12; font-weight: $font_weight_bold;    line-height: $line_height_16; letter-spacing: $letter_spacing_tight; }
+@mixin overline              { font-size: $font_size_12; font-weight: $font_weight_semi_bold; line-height: $line_height_16; letter-spacing: 0.08em; text-transform: uppercase; }
+@mixin subtitle              { font-size: $font_size_15; font-weight: $font_weight_medium;  line-height: $line_height_22_5; letter-spacing: $letter_spacing_normal; }
+@mixin code                  { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: $font_size_13; line-height: $line_height_18; }
+
+// ── Responsive display (v3.1) ─────────────────────────────────────────────
+// Hero/marketing title — 데스크탑 큰 사이즈, 모바일에서 자동 한 단계 축소.
+
+@mixin display_large_responsive {
+  @include display_large_bold;
+  @include breakpoint.compact { @include display_small_bold; }
+}
+
+@mixin display_medium_responsive {
+  @include display_medium_bold;
+  @include breakpoint.compact { @include heading_large_bold; }
+}
+
+@mixin heading_large_responsive {
+  @include heading_large_bold;
+  @include breakpoint.compact { @include heading_medium_bold; }
+}
+
+// ── Text wrap helpers (v3.1) ──────────────────────────────────────────────
+// CSS text-wrap 신기능 활용 — heading은 균형, body는 pretty.
+
+@mixin text_balance { text-wrap: balance; }
+@mixin text_pretty  { text-wrap: pretty; }
+@mixin text_nowrap  { white-space: nowrap; }
+@mixin text_truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ── Numeric (v3.1) ────────────────────────────────────────────────────────
+// 매출/지표 표시할 때 숫자 자릿수 정렬.
+
+@mixin tabular_nums  { font-variant-numeric: tabular-nums; }
+@mixin slashed_zero  { font-variant-numeric: slashed-zero; }