@simplysm/angular 14.1.20 → 14.2.1

package/scss/sd-tokens.md

@@ -0,0 +1,132 @@
+# `--sd-*` 역할 토큰 카탈로그
+
+테마는 이 카탈로그의 **값 맵만으로** 완성함 — 컴포넌트 셀렉터 오버라이드 금지.
+정의·발행: `commons/_variables.scss` 의 `$sd` 맵 → `writeVars($sd, "sd")` 로 `:root`(base 레이어) 발행. 테마는 theme-variant 레이어에서 같은 이름을 재정의함.
+
+## 규칙
+
+- **어휘(DEC-013)**: 색 어휘는 `--sd-{bg|tx|bd}-…` 속성 우선. 유틸 클래스명 = 토큰명에서 `--sd-` 만 뗀 것(`--sd-bg-primary-solid` ↔ `.bg-primary-solid`). hover 변형은 `-hover` 접미. 비색상·컴포넌트 전용 그룹(팔레트·focus-ring·scrollbar·shadow·타이포·치수·z)은 그룹 구조 유지.
+- **체이닝 금지**: `:root` 발행 토큰의 `var()` 참조는 팔레트(`--sd-color-*`, 테마 불변)만 허용함. 테마·밀도가 덮는 토큰끼리 체인을 두면 재정의 스코프에서 하위가 안 따라옴(확정값 상속). 파생 calc 는 소비 지점에서 계산함.
+- **색 원천**: 팔레트 + 흰/검 알파(rgba white/black)만. 커스텀 rgb 리터럴 금지.
+- **그룹 소유권**: 테마 맵 = 색·폰트·형태(radius·그림자·표면 패턴) / 밀도 그룹 = 간격·행높이·시트 패딩·topbar 높이(`sd-density-compact` 가 밀도 그룹만 덮음).
+- **소비 규약**: 컴포넌트는 `background` 단축 금지(`background-color:` 사용 — `--sd-bg-canvas-image` 패턴 보존). 컴포넌트 config 의 인라인 var 지정 금지.
+- 구 스케일 어휘(`--theme-*-{lightest..darkest}`·`--trans-*`·`--text-trans-*`·rev 계열)는 카탈로그에 없고 발행도 종료됨(14.2 브레이킹). 구 어휘를 소비하던 앱은 이 카탈로그 어휘로 전환해야 함.
+
+## 토큰 표 (라이트 기본값 = 구 어휘 시각 등가)
+
+### 팔레트
+
+| 토큰                         | 기본값                                    |
+| ---------------------------- | ----------------------------------------- |
+| `--sd-color-{hue}-{50..950}` | Tailwind v4 rgb 고정값 (22 hue × 11 step) |
+
+### 배경(bg)
+
+| 토큰                                    | 역할                                 | 기본값                 |
+| --------------------------------------- | ------------------------------------ | ---------------------- |
+| `--sd-bg-canvas`                        | 앱 배경                              | zinc-50                |
+| `--sd-bg-canvas-image`                  | 배경 패턴(블루프린트 모눈 등)        | none                   |
+| `--sd-bg-control`                       | 컨트롤 면(인풋·카드 내부 등 백색 면) | white                  |
+| `--sd-bg-elevated`                      | 카드·모달 승격 면                    | white                  |
+| `--sd-bg-overlay`                       | 드롭다운·팝업 면                     | white                  |
+| `--sd-bg-sheet`                         | 시트 컨테이너 면                     | zinc-50                |
+| `--sd-bg-sheet-image`                   | 시트 컨테이너 배경 패턴              | none                   |
+| `--sd-bg-inverse`                       | 반전 면                              | black                  |
+| `--sd-bg-field`                         | 인풋류 필드 면                       | blue-50                |
+| `--sd-bg-track`                         | 트랙 면(스위치 off 트랙 등)          | zinc-100               |
+| `--sd-bg-state-{hover,active,selected}` | 상태 오버레이(알파) — 전 컨트롤 공통 | rgba(0,0,0,.05/.1/.07) |
+| `--sd-bg-disabled`                      | 비활성 면(색 치환 규약)              | zinc-100               |
+| `--sd-bg-busy-overlay`                  | busy 오버레이 면                     | rgba(255,255,255,.6)   |
+| `--sd-bg-busy-indicator`                | busy 인디케이터 그래픽 면(큐브 등)   | rgba(0,0,0,.1)         |
+| `--sd-bg-backdrop`                      | 모달 뒤 스크림(배경 어둡히기)        | rgba(0,0,0,.2)         |
+
+### 텍스트(tx)
+
+| 토큰                                   | 역할                          | 기본값                             |
+| -------------------------------------- | ----------------------------- | ---------------------------------- |
+| `--sd-tx-{strong,default,muted,faint}` | 무채 텍스트(표면색과 독립 축) | black / rgba(0,0,0,.87) / .6 / .38 |
+| `--sd-tx-on-inverse`                   | 반전 면 위 텍스트             | white                              |
+| `--sd-tx-on-inverse-muted`             | 반전 면 위 보조 텍스트(hover) | rgba(255,255,255,.7)               |
+| `--sd-tx-on-inverse-disabled`          | 반전 면 위 비활성 텍스트      | rgba(255,255,255,.5)               |
+| `--sd-tx-disabled`                     | 비활성 텍스트(색 치환 규약)   | rgba(0,0,0,.38)                    |
+
+### 보더(bd)
+
+| 토큰                                              | 역할                      | 기본값                   |
+| ------------------------------------------------- | ------------------------- | ------------------------ |
+| `--sd-bd-{hairline,soft,default,strong,emphasis}` | 무채 보더 강도 스케일     | zinc-100/200/300/400/500 |
+| `--sd-bd-field`                                   | 인풋류 필드 보더          | zinc-300                 |
+| `--sd-bd-disabled`                                | 비활성 보더(색 치환 규약) | zinc-200                 |
+
+### 시맨틱 슬롯 (키: gray·blue-gray·primary·secondary·info·success·warning·danger)
+
+| 토큰                               | 역할                    | 기본값(일반 키 / gray·blue-gray) |
+| ---------------------------------- | ----------------------- | -------------------------------- |
+| `--sd-bg-{key}-solid` (+`-hover`)  | solid 면                | 500→600 / 400→500                |
+| `--sd-bg-{key}-subtle` (+`-hover`) | 옅은 면                 | 50→100                           |
+| `--sd-tx-{key}` (+`-hover`)        | 텍스트·아이콘·링크 단독 | 500→600 / 400→500                |
+| `--sd-tx-{key}-solid`              | solid 면 위 텍스트      | white                            |
+| `--sd-tx-{key}-subtle`             | subtle 면 위 텍스트     | 700 / 600                        |
+| `--sd-bd-{key}-solid` (+`-hover`)  | solid 보더              | bg 동일                          |
+| `--sd-bd-{key}-subtle`             | 옅은 보더               | 200 / 300                        |
+
+### 포커스·스크롤바
+
+| 토큰                                                           | 기본값                           |
+| -------------------------------------------------------------- | -------------------------------- |
+| `--sd-focus-ring-{color,width,offset}` (`:focus-visible` 규약) | blue-500 / 0.1667rem / 0.0833rem |
+| `--sd-scrollbar-{thumb,thumb-hover,track}`                     | rgba(0,0,0,.05/.1/.03)           |
+
+### 컴포넌트 장식 (방침 1, 2026-07-16 확정 — FIND-003 ③ 해소)
+
+테마 오버라이드가 값 맵으로 못 잡던 컴포넌트 장식의 소비 지점. 기본값은 현행 시각 등가.
+
+| 토큰                               | 역할                                     | 기본값                       |
+| ---------------------------------- | ---------------------------------------- | ---------------------------- |
+| `--sd-card-bd`                     | 카드 보더 색                             | transparent                  |
+| `--sd-card-bd-active`              | 카드 focus-within 상단 보더 색           | transparent                  |
+| `--sd-card-shadow` (+`-hover`)     | 카드 box-shadow(전체 값)                 | elevation(2)/(4) 등가 리터럴 |
+| `--sd-modal-bd`                    | 모달 다이얼로그 보더 색                  | transparent                  |
+| `--sd-modal-header-bg`             | 모달 헤더 배경                           | zinc-50                      |
+| `--sd-modal-header-tx` (+`-muted`) | 모달 헤더 글자·닫기(muted=기본/tx=hover) | rgba(0,0,0,.87) / zinc-400   |
+| `--sd-dropdown-bd`                 | 드롭다운 보더 색                         | zinc-300                     |
+| `--sd-sheet-shadow`                | 시트 테이블 box-shadow                   | none                         |
+| `--sd-permission-group-{bg,tx}`    | 권한표 그룹 첫 행 배경·글자              | cyan-500 / white             |
+
+- `--sd-card-bd` 를 덮는 테마는 `--sd-card-bd-active` 도 함께 정의함(미정의 시 focus 에서 상단 보더만 transparent 로 뚫림).
+
+### 그림자·기타
+
+| 토큰                                         | 기본값                          |
+| -------------------------------------------- | ------------------------------- |
+| `--sd-shadow-{color,size,blur-mult}`         | rgba(0,0,0,.05) / 0.0833rem / 1 |
+| `--sd-z-{toast,busy,dropdown,modal,sidebar}` | 9999/9998/5000/4000/3000        |
+| `--sd-animation-duration`                    | 0.2s                            |
+
+### 타이포·형태(테마 소유)
+
+| 토큰                                                        | 기본값                                                           |
+| ----------------------------------------------------------- | ---------------------------------------------------------------- |
+| `--sd-font-size-{sm,default,lg,h1..h6}`                     | 0.9167 / 1 / 1.1667 / 2 / 1.5 / 1.3333 / 1.1667 / 1 / 0.9167 rem |
+| `--sd-font-family{,-field,-monospace}` / `--sd-font-weight` | sans-serif / ui-sans-serif… / ui-monospace… / 400                |
+| `--sd-radius-{xs,sm,default,lg,xl,xxl}`                     | 0.0833 / 0.1667 / 0.3333 / 0.5 / 0.6667 / 1 rem                  |
+
+### 밀도 그룹(치수 — compact 가 덮음)
+
+| 토큰                                               | 기본값                                                           |
+| -------------------------------------------------- | ---------------------------------------------------------------- |
+| `--sd-gap-{xxs,xs,sm,default,lg,xl,xxl,0,auto}`    | 0.0833 / 0.1667 / 0.3333 / 0.5 / 0.6667 / 1 / 1.5 rem / 0 / auto |
+| `--sd-line-height` / `--sd-line-height-strip-unit` | 1.5em / 1.5                                                      |
+| `--sd-sheet-{pv,ph}`                               | 0.1667 / 0.3333 rem                                              |
+| `--sd-topbar-height` / `--sd-sidebar-width`        | 2.5rem / 14rem                                                   |
+
+## 테마·밀도 값 맵
+
+- 테마 = `--sd-*` 값 맵만(`scss/themes/_variables-*.scss` → theme-variant 레이어 발행). 셀렉터 오버라이드 금지 — surfaces 파일 없음.
+- 밀도 = `sd-density-compact` 클래스가 밀도 그룹(치수)만 덮음(`scss/commons/_density.scss`).
+- 값 맵은 라이트 기본값과의 차이만 기술함(같은 항목 생략).
+
+## 검증
+
+- 발행 전수·체이닝 금지 spec: `packages/angular/tests/features/theme/sd-tokens.spec.ts` — 카탈로그 키 추가 시 이 spec 의 목록도 함께 갱신함.
+- 테마 핵심 쌍 WCAG 대비 게이트(DEC-012): `theme-contrast.spec.ts` — 본문 4.5:1·보조/UI 3:1, 의도적 저대비는 예외 목록 명시. 검사 유틸 `getWcagContrastRatio` 는 패키지 export(커스텀 테마 검증용).

package/scss/styles.scss

@@ -1,9 +1,6 @@
 @use "commons/theme-variables";
 @use "commons/styles";
 
-// 블루프린트 모눈 그리드 면 (언레이어드 — 파일 내 주석 참조)
-@use "themes/blueprint-surfaces";
-
 @use "controls/flex";
 @use "controls/grid";
 @use "controls/card";
@@ -12,7 +9,9 @@
 @use "controls/table";
 
 ng-icon {
-  --ng-icon__size: 1.33em;
+  // 아이콘 박스 + 아래 시프트(0.2em)가 라인박스를 절대 못 넘게 line-height 에서 유도.
+  // 고정 배율(1.33em)이던 시절 1.33+0.2 > line-height 로 행 높이가 부풀었음.
+  --ng-icon__size: calc(var(--sd-line-height) - 0.2em);
   vertical-align: -0.2em !important;
 
   svg {

package/scss/themes/_variables-blueprint.scss

@@ -1,99 +1,145 @@
+// 블루프린트 테마 — 트레이싱지(라이트 면)를 --sd-* 역할 토큰 값 맵으로만 구성(셀렉터 오버라이드 0).
+// 라이트 기본값과 같은 항목은 생략(값 맵은 차이만 덮음).
+// 색 규칙(CONSTRAINT-007): --sd-color-* 팔레트 + 흰/검 알파만.
+// 모눈·그림자 청색 틴트는 rgb(28, 57, 142) ≈ --sd-color-blue-900 근사 리터럴(2026-07-16 확정 —
+// var() 를 알파와 조합할 수 없어 팔레트 성분을 리터럴로 풂).
+
+// 모눈: 24px 헤어라인 + 120px 메이저 — background-size 없이 성립하는 repeating-linear-gradient 형
+$grid-strong: rgba(28, 57, 142, 0.055);
+$grid-weak: rgba(28, 57, 142, 0.022);
+$grid-image: (
+  repeating-linear-gradient(to bottom, #{$grid-strong} 0 1px, transparent 1px 120px),
+  repeating-linear-gradient(to right, #{$grid-strong} 0 1px, transparent 1px 120px),
+  repeating-linear-gradient(to bottom, #{$grid-weak} 0 1px, transparent 1px 24px),
+  repeating-linear-gradient(to right, #{$grid-weak} 0 1px, transparent 1px 24px)
+);
+
 $paper: (
-  theme: (
+  bg: (
+    // 모눈은 body(캔버스)와 시트 컨테이너에만 — 콘텐츠 내부는 무지(가독 우선)
+    canvas-image: $grid-image,
+    sheet-image: $grid-image,
     "gray": (
-      lightest: var(--color-zinc-50),
-      lighter: var(--color-zinc-100),
-      light: var(--color-zinc-300),
-      default: var(--color-zinc-500),
-      dark: var(--color-zinc-600),
-      darker: var(--color-zinc-700),
-      darkest: var(--color-zinc-800),
+      solid: var(--sd-color-zinc-500),
+      solid-hover: var(--sd-color-zinc-600),
     ),
     blue-gray: (
-      lightest: var(--color-slate-50),
-      lighter: var(--color-slate-100),
-      light: var(--color-slate-300),
-      default: var(--color-slate-500),
-      dark: var(--color-slate-600),
-      darker: var(--color-slate-700),
-      darkest: var(--color-slate-800),
+      solid: var(--sd-color-slate-500),
+      solid-hover: var(--sd-color-slate-600),
     ),
+    // 블루프린트 잉크 — primary 는 깊은 남색(900)
     primary: (
-      lightest: var(--color-blue-100),
-      lighter: var(--color-blue-300),
-      light: var(--color-blue-500),
-      default: var(--color-blue-900),
-      dark: var(--color-blue-950),
-      darker: var(--color-blue-950),
-      darkest: var(--color-blue-950),
-    ),
-    secondary: (
-      lightest: var(--color-blue-50),
-      lighter: var(--color-blue-100),
-      light: var(--color-blue-300),
-      default: var(--color-blue-500),
-      dark: var(--color-blue-600),
-      darker: var(--color-blue-700),
-      darkest: var(--color-blue-800),
-    ),
-    info: (
-      lightest: var(--color-cyan-50),
-      lighter: var(--color-cyan-100),
-      light: var(--color-cyan-300),
-      default: var(--color-cyan-500),
-      dark: var(--color-cyan-600),
-      darker: var(--color-cyan-700),
-      darkest: var(--color-cyan-800),
+        solid: var(--sd-color-blue-900),
+        solid-hover: var(--sd-color-blue-950),
+        subtle: var(--sd-color-blue-100),
+        subtle-hover: var(--sd-color-blue-300),
+      ),
+    success: (
+      solid: var(--sd-color-green-500),
+      solid-hover: var(--sd-color-green-600),
+      subtle: var(--sd-color-green-50),
+      subtle-hover: var(--sd-color-green-100),
+    ),
+    warning: (
+      solid: var(--sd-color-orange-400),
+      solid-hover: var(--sd-color-orange-600),
+      subtle: var(--sd-color-orange-100),
+      subtle-hover: var(--sd-color-orange-200),
+    ),
+    danger: (
+      solid: var(--sd-color-red-400),
+      solid-hover: var(--sd-color-red-600),
+    ),
+  ),
+  tx: (
+    "gray": var(--sd-color-zinc-500),
+    gray-hover: var(--sd-color-zinc-600),
+    gray-subtle: var(--sd-color-zinc-700),
+    blue-gray: var(--sd-color-slate-500),
+    blue-gray-hover: var(--sd-color-slate-600),
+    blue-gray-subtle: var(--sd-color-slate-700),
+    primary: var(--sd-color-blue-900),
+    primary-hover: var(--sd-color-blue-950),
+    primary-subtle: var(--sd-color-blue-950),
+    success: var(--sd-color-green-500),
+    success-hover: var(--sd-color-green-600),
+    success-subtle: var(--sd-color-green-700),
+    warning: var(--sd-color-orange-400),
+    warning-hover: var(--sd-color-orange-600),
+    danger: var(--sd-color-red-400),
+    danger-hover: var(--sd-color-red-600),
+  ),
+  bd: (
+    strong: var(--sd-color-zinc-500),
+    emphasis: var(--sd-color-zinc-600),
+    "gray": (
+      solid: var(--sd-color-zinc-500),
+      solid-hover: var(--sd-color-zinc-600),
+    ),
+    blue-gray: (
+      solid: var(--sd-color-slate-500),
+      solid-hover: var(--sd-color-slate-600),
+    ),
+    primary: (
+      solid: var(--sd-color-blue-900),
+      solid-hover: var(--sd-color-blue-950),
+      subtle: var(--sd-color-blue-300),
     ),
     success: (
-      lightest: var(--color-green-50),
-      lighter: var(--color-green-100),
-      light: var(--color-green-300),
-      default: var(--color-green-500),
-      dark: var(--color-green-600),
-      darker: var(--color-green-700),
-      darkest: var(--color-green-800),
+      solid: var(--sd-color-green-500),
+      solid-hover: var(--sd-color-green-600),
+      subtle: var(--sd-color-green-300),
     ),
     warning: (
-      lightest: var(--color-orange-100),
-      lighter: var(--color-orange-200),
-      light: var(--color-orange-300),
-      default: var(--color-orange-400),
-      dark: var(--color-orange-600),
-      darker: var(--color-orange-700),
-      darkest: var(--color-orange-800),
+      solid: var(--sd-color-orange-400),
+      solid-hover: var(--sd-color-orange-600),
+      subtle: var(--sd-color-orange-300),
     ),
     danger: (
-      lightest: var(--color-red-50),
-      lighter: var(--color-red-100),
-      light: var(--color-red-200),
-      default: var(--color-red-400),
-      dark: var(--color-red-600),
-      darker: var(--color-red-700),
-      darkest: var(--color-red-800),
+      solid: var(--sd-color-red-400),
+      solid-hover: var(--sd-color-red-600),
     ),
   ),
-  background-color: var(--theme-gray-lightest),
-  control-color: white,
-  border-radius: (
-    xs: 0,
-    sm: 0,
-    default: 0,
-    lg: 0,
-    xl: 0,
-    xxl: 0,
+  focus-ring: (
+    color: var(--sd-color-blue-900),
   ),
-  elevation-blur-mult: 0,
-  sheet: (
-    bg: var(--theme-gray-lightest),
+  // 하드 섀도(blur 0) — 도면 인쇄 느낌
+  shadow: (
+      blur-mult: 0,
+    ),
+  card: (
+    bd: var(--sd-color-zinc-500),
+    bd-active: var(--sd-color-zinc-500),
+    shadow: (
+      3px 3px 0 rgba(28, 57, 142, 0.1),
+    ),
+    shadow-hover: (
+      5px 5px 0 rgba(28, 57, 142, 0.14),
+    ),
   ),
-  border-color: (
-    lightest: var(--color-zinc-100),
-    lighter: var(--color-zinc-200),
-    light: var(--color-zinc-300),
-    default: var(--color-zinc-500),
-    dark: var(--color-zinc-600),
-    darker: var(--color-zinc-700),
-    darkest: var(--color-zinc-800),
+  // 모달 헤더 잉크 액센트
+  modal: (
+      header-bg: var(--sd-color-blue-900),
+      header-tx: white,
+      header-tx-muted: rgba(255, 255, 255, 0.7),
+    ),
+  sheet: (
+    shadow: (
+      1px 1px 0 rgba(28, 57, 142, 0.1),
+    ),
   ),
+  // 권한표 그룹 행 — 원색 solid 를 무채 옅은 행으로
+  permission-group: (
+      bg: var(--sd-color-zinc-100),
+      tx: rgba(0, 0, 0, 0.87),
+    ),
+  // 도면 직각 — 라운드 0
+  radius: (
+      xs: 0,
+      sm: 0,
+      default: 0,
+      lg: 0,
+      xl: 0,
+      xxl: 0,
+    ),
 );

package/scss/themes/_variables-ide-dark.scss

@@ -0,0 +1,215 @@
+// IDE 다크 테마 — VSCode "Dark 2026" 을 --sd-* 역할 토큰 값 맵으로만 구성(셀렉터 오버라이드 0).
+// 레퍼런스: microsoft/vscode extensions/theme-defaults/themes/2026-dark.json (v1.113 기본 테마)
+// 색 규칙(CONSTRAINT-007): --sd-color-* 팔레트 + 흰/검 알파(rgba white/black)만.
+// 값 이전 기준(FIND-015): 구 스케일 맵·ide-dark-surfaces 확정 상태를 라이트 기본값 등가 슬롯으로 역매핑.
+// 치수(gap·line-height·sheet pv/ph·topbar height)는 밀도 그룹 소유(DEC-007) — 이 맵엔 없음.
+$dark: (
+  bg: (
+    // 계층: canvas zinc-950 → control zinc-900 → elevated/overlay zinc-800
+    canvas: var(--sd-color-zinc-950),
+    control: var(--sd-color-zinc-900),
+    elevated: var(--sd-color-zinc-800),
+    overlay: var(--sd-color-zinc-800),
+    sheet: var(--sd-color-zinc-950),
+    inverse: white,
+    // 필드 배경 — input.background 근사
+    field: var(--sd-color-zinc-900),
+    track: var(--sd-color-zinc-700),
+    // 시맨틱 solid = 깊은 스텝(600) + hover 한 단계 밝게(500) — VSCode 방식(다크에서 500 배경은 과함)
+    "gray": (
+        solid: var(--sd-color-zinc-400),
+        solid-hover: var(--sd-color-zinc-300),
+        subtle: var(--sd-color-zinc-800),
+        subtle-hover: var(--sd-color-zinc-700),
+      ),
+    blue-gray: (
+      solid: var(--sd-color-slate-400),
+      solid-hover: var(--sd-color-slate-300),
+      subtle: var(--sd-color-slate-800),
+      subtle-hover: var(--sd-color-slate-700),
+    ),
+    primary: (
+      solid: var(--sd-color-sky-600),
+      solid-hover: var(--sd-color-sky-500),
+      subtle: var(--sd-color-sky-950),
+      subtle-hover: var(--sd-color-sky-900),
+    ),
+    secondary: (
+      solid: var(--sd-color-sky-600),
+      solid-hover: var(--sd-color-sky-500),
+      subtle: var(--sd-color-zinc-900),
+      subtle-hover: var(--sd-color-sky-900),
+    ),
+    info: (
+      solid: var(--sd-color-cyan-600),
+      solid-hover: var(--sd-color-cyan-500),
+      subtle: var(--sd-color-cyan-950),
+      subtle-hover: var(--sd-color-cyan-900),
+    ),
+    success: (
+      solid: var(--sd-color-green-600),
+      solid-hover: var(--sd-color-green-500),
+      subtle: var(--sd-color-green-950),
+      subtle-hover: var(--sd-color-green-900),
+    ),
+    warning: (
+      solid: var(--sd-color-amber-600),
+      solid-hover: var(--sd-color-amber-500),
+      subtle: var(--sd-color-amber-950),
+      subtle-hover: var(--sd-color-amber-900),
+    ),
+    // errorForeground #f48771 근사 = red-400 (solid 는 400 기준·hover 500)
+    danger: (
+        solid: var(--sd-color-red-400),
+        solid-hover: var(--sd-color-red-500),
+        subtle: var(--sd-color-red-950),
+        subtle-hover: var(--sd-color-red-900),
+      ),
+    // 오버레이·hover: list.hoverBackground #FFFFFF14 근사 — 흰 알파
+    state: (
+        hover: rgba(255, 255, 255, 0.05),
+        active: rgba(255, 255, 255, 0.08),
+        selected: rgba(255, 255, 255, 0.07),
+      ),
+    disabled: var(--sd-color-zinc-800),
+    busy-overlay: rgba(0, 0, 0, 0.6),
+    busy-indicator: rgba(255, 255, 255, 0.13),
+  ),
+  // 텍스트: 흰색 알파 스케일 (Dark 2026 근사 — #ededed/#bfbfbf/#8c8c8c/#555)
+  tx: (
+      strong: rgba(255, 255, 255, 0.93),
+      default: rgba(255, 255, 255, 0.75),
+      muted: rgba(255, 255, 255, 0.55),
+      faint: rgba(255, 255, 255, 0.33),
+      on-inverse: white,
+      on-inverse-muted: rgba(255, 255, 255, 0.75),
+      on-inverse-disabled: rgba(255, 255, 255, 0.55),
+      disabled: rgba(255, 255, 255, 0.33),
+      // 링크·단독 텍스트 = 깊은 톤(600), hover 시 500 (쨍함 억제)
+      "gray": var(--sd-color-zinc-400),
+      gray-hover: var(--sd-color-zinc-300),
+      gray-subtle: var(--sd-color-zinc-200),
+      blue-gray: var(--sd-color-slate-400),
+      blue-gray-hover: var(--sd-color-slate-300),
+      blue-gray-subtle: var(--sd-color-slate-200),
+      primary: var(--sd-color-sky-600),
+      primary-hover: var(--sd-color-sky-500),
+      primary-subtle: var(--sd-color-sky-400),
+      secondary: var(--sd-color-sky-600),
+      secondary-hover: var(--sd-color-sky-500),
+      secondary-subtle: var(--sd-color-sky-400),
+      info: var(--sd-color-cyan-600),
+      info-hover: var(--sd-color-cyan-500),
+      info-subtle: var(--sd-color-cyan-300),
+      success: var(--sd-color-green-600),
+      success-hover: var(--sd-color-green-500),
+      success-subtle: var(--sd-color-green-300),
+      warning: var(--sd-color-amber-600),
+      warning-hover: var(--sd-color-amber-500),
+      warning-subtle: var(--sd-color-amber-300),
+      danger: var(--sd-color-red-400),
+      danger-hover: var(--sd-color-red-500),
+      danger-subtle: var(--sd-color-red-300),
+    ),
+  // 보더: 흰색 알파 헤어라인 (widget #2A2B2C·input #333536 근사)
+  bd: (
+      hairline: rgba(255, 255, 255, 0.05),
+      soft: rgba(255, 255, 255, 0.08),
+      default: rgba(255, 255, 255, 0.1),
+      strong: rgba(255, 255, 255, 0.12),
+      emphasis: rgba(255, 255, 255, 0.16),
+      field: rgba(255, 255, 255, 0.1),
+      disabled: rgba(255, 255, 255, 0.08),
+      "gray": (
+        solid: var(--sd-color-zinc-400),
+        solid-hover: var(--sd-color-zinc-300),
+        subtle: var(--sd-color-zinc-600),
+      ),
+      blue-gray: (
+        solid: var(--sd-color-slate-400),
+        solid-hover: var(--sd-color-slate-300),
+        subtle: var(--sd-color-slate-600),
+      ),
+      primary: (
+        solid: var(--sd-color-sky-600),
+        solid-hover: var(--sd-color-sky-500),
+        subtle: var(--sd-color-sky-500),
+      ),
+      secondary: (
+        solid: var(--sd-color-sky-600),
+        solid-hover: var(--sd-color-sky-500),
+        subtle: var(--sd-color-sky-500),
+      ),
+      info: (
+        solid: var(--sd-color-cyan-600),
+        solid-hover: var(--sd-color-cyan-500),
+        subtle: var(--sd-color-cyan-600),
+      ),
+      success: (
+        solid: var(--sd-color-green-600),
+        solid-hover: var(--sd-color-green-500),
+        subtle: var(--sd-color-green-600),
+      ),
+      warning: (
+        solid: var(--sd-color-amber-600),
+        solid-hover: var(--sd-color-amber-500),
+        subtle: var(--sd-color-amber-600),
+      ),
+      danger: (
+        solid: var(--sd-color-red-400),
+        solid-hover: var(--sd-color-red-500),
+        subtle: var(--sd-color-red-400),
+      ),
+    ),
+  focus-ring: (
+    color: var(--sd-color-sky-600),
+  ),
+  // Dark 2026 scrollbarSlider.* 근사 (DEC-011)
+  scrollbar: (
+      thumb: rgba(255, 255, 255, 0.1),
+      thumb-hover: rgba(255, 255, 255, 0.16),
+      track: rgba(255, 255, 255, 0.03),
+    ),
+  // 그림자 전면 제거 — VSCode 는 경계를 보더로 세움
+  shadow: (
+      size: 0,
+      blur-mult: 0,
+    ),
+  // 다크는 그림자가 약해 카드 경계를 헤어라인으로, 포커스 시 상단 액센트 라인
+  // (tab.activeBorderTop #3994BC 근사 = sky-500)
+  card: (
+      bd: rgba(255, 255, 255, 0.08),
+      bd-active: var(--sd-color-sky-500),
+      shadow: none,
+      shadow-hover: none,
+    ),
+  // 오버레이 elevated 경계 — editorWidget/menu 배경 + widget.border #2A2B2C 근사
+  modal: (
+      bd: rgba(255, 255, 255, 0.22),
+      header-bg: var(--sd-color-zinc-800),
+      header-tx: rgba(255, 255, 255, 0.75),
+      header-tx-muted: var(--sd-color-zinc-400),
+    ),
+  dropdown: (
+    bd: rgba(255, 255, 255, 0.22),
+  ),
+  // 권한표 그룹 행 — theme 원색 solid 를 무채 어두운 행으로
+  permission-group: (
+      bg: var(--sd-color-zinc-800),
+      tx: rgba(255, 255, 255, 0.75),
+    ),
+  // VSCode 수준 소형 라운드 — 버튼·인풋 2px, 위젯·메뉴 4px 급 (12px 기준)
+  radius: (
+      xs: 0.0833rem,
+      sm: 0.0833rem,
+      default: 0.1667rem,
+      lg: 0.25rem,
+      xl: 0.3333rem,
+      xxl: 0.5rem,
+    ),
+  // 폰트는 이 테마 컨셉이라 여기서만 Sarasa Fixed K 로 덮는다(라이트·블루프린트 불변)
+  font-family: '"Sarasa Fixed K", ui-monospace, monospace',
+  font-family-field: '"Sarasa Fixed K", ui-monospace, monospace',
+  font-family-monospace: '"Sarasa Fixed K", ui-monospace, monospace',
+  font-weight: 300,
+);

package/src/controls/button/sd-additional-button.ts

@@ -25,12 +25,12 @@ import {
       @use "../../../scss/commons/mixins";
 
       sd-additional-button {
-        border: 1px solid var(--trans-light);
-        border-radius: var(--border-radius-default);
+        border: 1px solid var(--sd-bd-soft);
+        border-radius: var(--sd-radius-default);
         overflow: hidden;
 
         > ._content {
-          padding: var(--gap-sm) var(--gap-default);
+          padding: var(--sd-gap-sm) var(--sd-gap-default);
         }
 
         > ._button {
@@ -39,12 +39,12 @@ import {
           @include mixins.flex-direction(row);
 
           > sd-anchor {
-            padding: var(--gap-sm) !important;
+            padding: var(--sd-gap-sm) !important;
           }
 
           > sd-button > button {
-            border-left: 1px solid var(--trans-lighter) !important;
-            padding: var(--gap-sm) !important;
+            border-left: 1px solid var(--sd-bd-hairline) !important;
+            padding: var(--sd-gap-sm) !important;
             height: 100%;
           }
         }
@@ -56,32 +56,32 @@ import {
 
         &[data-sd-size="sm"] {
           > ._content {
-            padding: var(--gap-xs) var(--gap-default);
+            padding: var(--sd-gap-xs) var(--sd-gap-default);
           }
 
           > ._button {
             > sd-anchor {
-              padding: var(--gap-xs) var(--gap-sm) !important;
+              padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;
             }
 
             > sd-button > button {
-              padding: var(--gap-xs) var(--gap-sm) !important;
+              padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;
             }
           }
         }
 
         &[data-sd-size="lg"] {
           > ._content {
-            padding: var(--gap-default) var(--gap-xl);
+            padding: var(--sd-gap-default) var(--sd-gap-xl);
           }
 
           > ._button {
             > sd-anchor {
-              padding: var(--gap-default) !important;
+              padding: var(--sd-gap-default) !important;
             }
 
             > sd-button > button {
-              padding: var(--gap-default) !important;
+              padding: var(--sd-gap-default) !important;
             }
           }
         }