// ───────────────────────────────────────────────────────────────────────────── // 색상 토큰 // // 이 map이 단일 진실 공급원(SSOT)이다. 여기서 두 가지가 함께 파생된다: // 1. `_root.scss` → `--fox-color-*` CSS 커스텀 프로퍼티 선언 // 2. `_functions.scss`의 `color()` → 토큰 이름 유효성 컴파일타임 검증 // 값과 이름 목록이 한 파일에만 존재하므로 둘 사이의 드리프트가 구조적으로 불가능하다. // // 라이트/다크는 `light-dark(라이트값, 다크값)` 한 줄로 함께 보유한다. 테마 전환은 // `_root.scss`의 `color-scheme`이 담당하므로 다크 전용 블록을 따로 두지 않는다 — // 한쪽만 고쳐서 생기는 테마 불일치가 애초에 발생할 수 없다. // // 브라우저 지원: `light-dark()` 자체는 Chrome 123 / Safari 17.5 / Firefox 120 이상이 // 필요하지만, Next.js 16(Turbopack)의 Lightning CSS가 현재 설정에서 이를 // `var(--lightningcss-light, 라이트) var(--lightningcss-dark, 다크)` 조합으로 **폴리필**해 // 출력하므로 구형 브라우저에서도 동작한다(2026-08-11 빌드 산출물에서 확인). // browserslist 타깃을 최신 브라우저로 좁히면 폴리필이 빠지고 원본 `light-dark()`가 // 그대로 나가므로, 타깃을 바꿀 때 이 전제를 다시 확인한다. // // ⚠️ 아래 값은 전부 **임시 플레이스홀더**다. 파이프라인 검증과 /design 카탈로그 // 렌더를 위한 중립 팔레트이며, 실제 브랜드 값은 사용자 제공 Figma/파일로 교체한다. // 교체 시 이 파일의 값만 바꾸면 앱 전체에 반영된다. // ───────────────────────────────────────────────────────────────────────────── $color: ( // 브랜드 primary: light-dark(#4f46e5, #818cf8), primary-hover: light-dark(#4338ca, #a5b4fc), primary-subtle: light-dark(#eef2ff, #312e81), on-primary: light-dark(#ffffff, #1e1b34), // 표면 — background(페이지 바닥) < surface(카드) < surface-raised(팝오버 등) background: light-dark(#ffffff, #14161b), surface: light-dark(#ffffff, #1e2128), surface-muted: light-dark(#f5f7fa, #262a33), surface-raised: light-dark(#ffffff, #2c3038), // 전경(텍스트·아이콘) foreground: light-dark(#1f2430, #f5f7fa), foreground-muted: light-dark(#565d6b, #bbc4d8), foreground-subtle: light-dark(#8790a3, #8790a3), foreground-inverse: light-dark(#ffffff, #14161b), // 경계선 border: light-dark(#dae0ed, #424752), border-subtle: light-dark(#eaeef6, #2f343d), border-strong: light-dark(#b6bfd2, #5a616e), // 상태 — 각 상태색 위에 얹는 텍스트색을 on-* 로 함께 정의한다. danger: light-dark(#dc2626, #f87171), on-danger: light-dark(#ffffff, #1a0d0d), success: light-dark(#16a34a, #4ade80), on-success: light-dark(#ffffff, #0a1a10), warning: light-dark(#d97706, #fbbf24), on-warning: light-dark(#ffffff, #1a1205), info: light-dark(#0284c7, #38bdf8), on-info: light-dark(#ffffff, #05161f), // 오버레이 scrim: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.65)) );