@simplysm/angular 14.2.1 → 14.2.3

package/scss/commons/_colors.scss

@@ -1,301 +0,0 @@
-// Tailwind CSS v4 팔레트 — oklch 원본을 sRGB 정수 rgb 로 변환해 고정 저장.
-// oklch 미지원 브라우저(구버전 Chrome 등) 대응으로 rgb 값을 직접 사용한다.
-// 값 재생성: scratchpad 의 gen.scss 로 color.channel round+clamp 추출(현 팔레트 기준).
-//
-// 발행: --sd-color-* (카탈로그 팔레트). 구 --color-* 발행은 14.2 에서 종료됨(브레이킹).
-$palette: (
-  "red": (
-    50: rgb(254, 242, 242),
-    100: rgb(255, 226, 226),
-    200: rgb(255, 201, 201),
-    300: rgb(255, 162, 162),
-    400: rgb(255, 100, 103),
-    500: rgb(251, 44, 54),
-    600: rgb(231, 0, 11),
-    700: rgb(193, 0, 7),
-    800: rgb(159, 7, 18),
-    900: rgb(130, 24, 26),
-    950: rgb(70, 8, 9),
-  ),
-  "orange": (
-    50: rgb(255, 247, 237),
-    100: rgb(255, 237, 212),
-    200: rgb(255, 214, 167),
-    300: rgb(255, 184, 106),
-    400: rgb(255, 137, 4),
-    500: rgb(255, 105, 0),
-    600: rgb(245, 73, 0),
-    700: rgb(202, 53, 0),
-    800: rgb(159, 45, 0),
-    900: rgb(126, 42, 12),
-    950: rgb(68, 19, 6),
-  ),
-  "amber": (
-    50: rgb(255, 251, 235),
-    100: rgb(254, 243, 198),
-    200: rgb(254, 230, 133),
-    300: rgb(255, 210, 48),
-    400: rgb(255, 185, 0),
-    500: rgb(254, 154, 0),
-    600: rgb(225, 113, 0),
-    700: rgb(187, 77, 0),
-    800: rgb(151, 60, 0),
-    900: rgb(123, 51, 6),
-    950: rgb(70, 25, 1),
-  ),
-  "yellow": (
-    50: rgb(254, 252, 232),
-    100: rgb(254, 249, 194),
-    200: rgb(255, 240, 133),
-    300: rgb(255, 223, 32),
-    400: rgb(253, 199, 0),
-    500: rgb(240, 177, 0),
-    600: rgb(208, 135, 0),
-    700: rgb(166, 95, 0),
-    800: rgb(137, 75, 0),
-    900: rgb(115, 62, 10),
-    950: rgb(67, 32, 4),
-  ),
-  "lime": (
-    50: rgb(247, 254, 231),
-    100: rgb(236, 252, 202),
-    200: rgb(216, 249, 153),
-    300: rgb(187, 244, 81),
-    400: rgb(154, 230, 0),
-    500: rgb(124, 207, 0),
-    600: rgb(94, 165, 0),
-    700: rgb(73, 125, 0),
-    800: rgb(60, 99, 0),
-    900: rgb(53, 83, 14),
-    950: rgb(25, 46, 3),
-  ),
-  "green": (
-    50: rgb(240, 253, 244),
-    100: rgb(220, 252, 231),
-    200: rgb(185, 248, 207),
-    300: rgb(123, 241, 168),
-    400: rgb(5, 223, 114),
-    500: rgb(0, 201, 80),
-    600: rgb(0, 166, 62),
-    700: rgb(0, 130, 54),
-    800: rgb(1, 102, 48),
-    900: rgb(13, 84, 43),
-    950: rgb(3, 46, 21),
-  ),
-  "emerald": (
-    50: rgb(236, 253, 245),
-    100: rgb(208, 250, 229),
-    200: rgb(164, 244, 207),
-    300: rgb(94, 233, 181),
-    400: rgb(0, 212, 146),
-    500: rgb(0, 188, 125),
-    600: rgb(0, 153, 102),
-    700: rgb(0, 122, 85),
-    800: rgb(0, 96, 69),
-    900: rgb(0, 79, 59),
-    950: rgb(0, 44, 34),
-  ),
-  "teal": (
-    50: rgb(240, 253, 250),
-    100: rgb(203, 251, 241),
-    200: rgb(150, 247, 228),
-    300: rgb(70, 236, 213),
-    400: rgb(0, 213, 190),
-    500: rgb(0, 187, 167),
-    600: rgb(0, 150, 137),
-    700: rgb(0, 120, 111),
-    800: rgb(0, 95, 90),
-    900: rgb(11, 79, 74),
-    950: rgb(2, 47, 46),
-  ),
-  "cyan": (
-    50: rgb(236, 254, 255),
-    100: rgb(206, 250, 254),
-    200: rgb(162, 244, 253),
-    300: rgb(83, 234, 253),
-    400: rgb(0, 211, 242),
-    500: rgb(0, 184, 219),
-    600: rgb(0, 146, 184),
-    700: rgb(0, 117, 149),
-    800: rgb(0, 95, 120),
-    900: rgb(16, 78, 100),
-    950: rgb(5, 51, 69),
-  ),
-  "sky": (
-    50: rgb(240, 249, 255),
-    100: rgb(223, 242, 254),
-    200: rgb(184, 230, 254),
-    300: rgb(116, 212, 255),
-    400: rgb(0, 188, 255),
-    500: rgb(0, 166, 244),
-    600: rgb(0, 132, 209),
-    700: rgb(0, 105, 168),
-    800: rgb(0, 89, 138),
-    900: rgb(2, 74, 112),
-    950: rgb(5, 47, 74),
-  ),
-  "blue": (
-    50: rgb(239, 246, 255),
-    100: rgb(219, 234, 254),
-    200: rgb(190, 219, 255),
-    300: rgb(142, 197, 255),
-    400: rgb(81, 162, 255),
-    500: rgb(43, 127, 255),
-    600: rgb(21, 93, 252),
-    700: rgb(20, 71, 230),
-    800: rgb(25, 60, 184),
-    900: rgb(28, 57, 142),
-    950: rgb(22, 36, 86),
-  ),
-  "indigo": (
-    50: rgb(238, 242, 255),
-    100: rgb(224, 231, 255),
-    200: rgb(198, 210, 255),
-    300: rgb(163, 179, 255),
-    400: rgb(124, 134, 255),
-    500: rgb(97, 95, 255),
-    600: rgb(79, 57, 246),
-    700: rgb(67, 45, 215),
-    800: rgb(55, 42, 172),
-    900: rgb(49, 44, 133),
-    950: rgb(30, 26, 77),
-  ),
-  "violet": (
-    50: rgb(245, 243, 255),
-    100: rgb(237, 233, 254),
-    200: rgb(221, 214, 255),
-    300: rgb(196, 180, 255),
-    400: rgb(166, 132, 255),
-    500: rgb(142, 81, 255),
-    600: rgb(127, 34, 254),
-    700: rgb(112, 8, 231),
-    800: rgb(93, 14, 192),
-    900: rgb(77, 23, 154),
-    950: rgb(47, 13, 104),
-  ),
-  "purple": (
-    50: rgb(250, 245, 255),
-    100: rgb(243, 232, 255),
-    200: rgb(233, 212, 255),
-    300: rgb(218, 178, 255),
-    400: rgb(194, 122, 255),
-    500: rgb(173, 70, 255),
-    600: rgb(152, 16, 250),
-    700: rgb(130, 0, 219),
-    800: rgb(110, 17, 176),
-    900: rgb(89, 22, 139),
-    950: rgb(60, 3, 102),
-  ),
-  "fuchsia": (
-    50: rgb(253, 244, 255),
-    100: rgb(250, 232, 255),
-    200: rgb(246, 207, 255),
-    300: rgb(244, 168, 255),
-    400: rgb(237, 106, 255),
-    500: rgb(225, 42, 251),
-    600: rgb(200, 0, 222),
-    700: rgb(168, 0, 183),
-    800: rgb(138, 1, 148),
-    900: rgb(114, 19, 120),
-    950: rgb(75, 0, 79),
-  ),
-  "pink": (
-    50: rgb(253, 242, 248),
-    100: rgb(252, 231, 243),
-    200: rgb(252, 206, 232),
-    300: rgb(253, 165, 213),
-    400: rgb(251, 100, 182),
-    500: rgb(246, 51, 154),
-    600: rgb(230, 0, 118),
-    700: rgb(198, 0, 92),
-    800: rgb(163, 0, 76),
-    900: rgb(134, 16, 67),
-    950: rgb(81, 4, 36),
-  ),
-  "rose": (
-    50: rgb(255, 241, 242),
-    100: rgb(255, 228, 230),
-    200: rgb(255, 204, 211),
-    300: rgb(255, 161, 173),
-    400: rgb(255, 99, 126),
-    500: rgb(255, 32, 86),
-    600: rgb(236, 0, 63),
-    700: rgb(199, 0, 54),
-    800: rgb(165, 0, 54),
-    900: rgb(139, 8, 54),
-    950: rgb(77, 2, 24),
-  ),
-  "slate": (
-    50: rgb(248, 250, 252),
-    100: rgb(241, 245, 249),
-    200: rgb(226, 232, 240),
-    300: rgb(202, 213, 226),
-    400: rgb(144, 161, 185),
-    500: rgb(98, 116, 142),
-    600: rgb(69, 85, 108),
-    700: rgb(49, 65, 88),
-    800: rgb(29, 41, 61),
-    900: rgb(15, 23, 43),
-    950: rgb(2, 6, 24),
-  ),
-  "gray": (
-    50: rgb(249, 250, 251),
-    100: rgb(243, 244, 246),
-    200: rgb(229, 231, 235),
-    300: rgb(209, 213, 220),
-    400: rgb(153, 161, 175),
-    500: rgb(106, 114, 130),
-    600: rgb(74, 85, 101),
-    700: rgb(54, 65, 83),
-    800: rgb(30, 41, 57),
-    900: rgb(16, 24, 40),
-    950: rgb(3, 7, 18),
-  ),
-  "zinc": (
-    50: rgb(250, 250, 250),
-    100: rgb(244, 244, 245),
-    200: rgb(228, 228, 231),
-    300: rgb(212, 212, 216),
-    400: rgb(159, 159, 169),
-    500: rgb(113, 113, 123),
-    600: rgb(82, 82, 92),
-    700: rgb(63, 63, 70),
-    800: rgb(39, 39, 42),
-    900: rgb(24, 24, 27),
-    950: rgb(9, 9, 11),
-  ),
-  "neutral": (
-    50: rgb(250, 250, 250),
-    100: rgb(245, 245, 245),
-    200: rgb(229, 229, 229),
-    300: rgb(212, 212, 212),
-    400: rgb(161, 161, 161),
-    500: rgb(115, 115, 115),
-    600: rgb(82, 82, 82),
-    700: rgb(64, 64, 64),
-    800: rgb(38, 38, 38),
-    900: rgb(23, 23, 23),
-    950: rgb(10, 10, 10),
-  ),
-  "stone": (
-    50: rgb(250, 250, 249),
-    100: rgb(245, 245, 244),
-    200: rgb(231, 229, 228),
-    300: rgb(214, 211, 209),
-    400: rgb(166, 160, 155),
-    500: rgb(121, 113, 107),
-    600: rgb(87, 83, 77),
-    700: rgb(68, 64, 59),
-    800: rgb(41, 37, 36),
-    900: rgb(28, 25, 23),
-    950: rgb(12, 10, 9),
-  ),
-);
-
-@mixin vars {
-  @each $hue, $steps in $palette {
-    @each $step, $val in $steps {
-      --sd-color-#{$hue}-#{$step}: #{$val};
-    }
-  }
-}

package/scss/commons/_density.scss

@@ -1,23 +0,0 @@
-// 밀도(density) 축 — 테마와 독립(DEC-007). compact 는 밀도 그룹(치수 토큰)만 덮는다.
-// 값은 구 ide-dark 테마의 오밀조밀 치수(기본 대비 약 2/3)를 이관한 것.
-// 체이닝 금지(CONSTRAINT-006) — sheet pv/ph 는 compact gap 등가 리터럴로 고정.
-$compact: (
-  gap: (
-    xxs: 0.0833rem,
-    xs: 0.0833rem,
-    sm: 0.1667rem,
-    default: 0.3333rem,
-    lg: 0.4167rem,
-    xl: 0.6667rem,
-    xxl: 1rem,
-  ),
-  line-height: 1.35em,
-  line-height-strip-unit: 1.35,
-  sheet: (
-    pv: 0.0833rem,
-    ph: 0.1667rem,
-  ),
-  topbar: (
-    height: 2rem,
-  ),
-);

package/scss/sd-tokens.md

@@ -1,132 +0,0 @@
-# `--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(커스텀 테마 검증용).