@simplysm/angular 14.1.17 → 14.1.18

package/scss/commons/_colors.scss

@@ -1,326 +1,247 @@
-@use "sass:map";
-@use "sass:color";
-
-// oklch 미지원 브라우저 호환을 위해 빌드 타임에 rgb 로 변환해 저장
-@function to-rgb($oklch-color) {
-  @return color.to-space($oklch-color, rgb);
-}
-
-// Tailwind CSS v4 color palette (oklch 원본 → rgb 변환 저장)
-$colors: (
-  red: (
-    50: to-rgb(oklch(97.1% 0.013 17.38)),
-    100: to-rgb(oklch(93.6% 0.032 17.717)),
-    200: to-rgb(oklch(88.5% 0.062 18.334)),
-    300: to-rgb(oklch(80.8% 0.114 19.571)),
-    400: to-rgb(oklch(70.4% 0.191 22.216)),
-    500: to-rgb(oklch(63.7% 0.237 25.331)),
-    600: to-rgb(oklch(57.7% 0.245 27.325)),
-    700: to-rgb(oklch(50.5% 0.213 27.518)),
-    800: to-rgb(oklch(44.4% 0.177 26.899)),
-    900: to-rgb(oklch(39.6% 0.141 25.723)),
-    950: to-rgb(oklch(25.8% 0.092 26.042)),
-  ),
-  orange: (
-    50: to-rgb(oklch(98% 0.016 73.684)),
-    100: to-rgb(oklch(95.4% 0.038 75.164)),
-    200: to-rgb(oklch(90.1% 0.076 70.697)),
-    300: to-rgb(oklch(83.7% 0.128 66.29)),
-    400: to-rgb(oklch(75% 0.183 55.934)),
-    500: to-rgb(oklch(70.5% 0.213 47.604)),
-    600: to-rgb(oklch(64.6% 0.222 41.116)),
-    700: to-rgb(oklch(55.3% 0.195 38.402)),
-    800: to-rgb(oklch(47% 0.157 37.304)),
-    900: to-rgb(oklch(40.8% 0.123 38.172)),
-    950: to-rgb(oklch(26.6% 0.079 36.259)),
-  ),
-  amber: (
-    50: to-rgb(oklch(98.7% 0.022 95.277)),
-    100: to-rgb(oklch(96.2% 0.059 95.617)),
-    200: to-rgb(oklch(92.4% 0.12 95.746)),
-    300: to-rgb(oklch(87.9% 0.169 91.605)),
-    400: to-rgb(oklch(82.8% 0.189 84.429)),
-    500: to-rgb(oklch(76.9% 0.188 70.08)),
-    600: to-rgb(oklch(66.6% 0.179 58.318)),
-    700: to-rgb(oklch(55.5% 0.163 48.998)),
-    800: to-rgb(oklch(47.3% 0.137 46.201)),
-    900: to-rgb(oklch(41.4% 0.112 45.904)),
-    950: to-rgb(oklch(27.9% 0.077 45.635)),
-  ),
-  yellow: (
-    50: to-rgb(oklch(98.7% 0.026 102.212)),
-    100: to-rgb(oklch(97.3% 0.071 103.193)),
-    200: to-rgb(oklch(94.5% 0.129 101.54)),
-    300: to-rgb(oklch(90.5% 0.182 98.111)),
-    400: to-rgb(oklch(85.2% 0.199 91.936)),
-    500: to-rgb(oklch(79.5% 0.184 86.047)),
-    600: to-rgb(oklch(68.1% 0.162 75.834)),
-    700: to-rgb(oklch(55.4% 0.135 66.442)),
-    800: to-rgb(oklch(47.6% 0.114 61.907)),
-    900: to-rgb(oklch(42.1% 0.095 57.708)),
-    950: to-rgb(oklch(28.6% 0.066 53.813)),
-  ),
-  lime: (
-    50: to-rgb(oklch(98.6% 0.031 120.757)),
-    100: to-rgb(oklch(96.7% 0.067 122.328)),
-    200: to-rgb(oklch(93.8% 0.127 124.321)),
-    300: to-rgb(oklch(89.7% 0.196 126.665)),
-    400: to-rgb(oklch(84.1% 0.238 128.85)),
-    500: to-rgb(oklch(76.8% 0.233 130.85)),
-    600: to-rgb(oklch(64.8% 0.2 131.684)),
-    700: to-rgb(oklch(53.2% 0.157 131.589)),
-    800: to-rgb(oklch(45.3% 0.124 130.933)),
-    900: to-rgb(oklch(40.5% 0.101 131.063)),
-    950: to-rgb(oklch(27.4% 0.072 132.109)),
-  ),
-  green: (
-    50: to-rgb(oklch(98.2% 0.018 155.826)),
-    100: to-rgb(oklch(96.2% 0.044 156.743)),
-    200: to-rgb(oklch(92.5% 0.084 155.995)),
-    300: to-rgb(oklch(87.1% 0.15 154.449)),
-    400: to-rgb(oklch(79.2% 0.209 151.711)),
-    500: to-rgb(oklch(72.3% 0.219 149.579)),
-    600: to-rgb(oklch(62.7% 0.194 149.214)),
-    700: to-rgb(oklch(52.7% 0.154 150.069)),
-    800: to-rgb(oklch(44.8% 0.119 151.328)),
-    900: to-rgb(oklch(39.3% 0.095 152.535)),
-    950: to-rgb(oklch(26.6% 0.065 152.934)),
-  ),
-  emerald: (
-    50: to-rgb(oklch(97.9% 0.021 166.113)),
-    100: to-rgb(oklch(95% 0.052 163.051)),
-    200: to-rgb(oklch(90.5% 0.093 164.15)),
-    300: to-rgb(oklch(84.5% 0.143 164.978)),
-    400: to-rgb(oklch(76.5% 0.177 163.223)),
-    500: to-rgb(oklch(69.6% 0.17 162.48)),
-    600: to-rgb(oklch(59.6% 0.145 163.225)),
-    700: to-rgb(oklch(50.8% 0.118 165.612)),
-    800: to-rgb(oklch(43.2% 0.095 166.913)),
-    900: to-rgb(oklch(37.8% 0.077 168.94)),
-    950: to-rgb(oklch(26.2% 0.051 172.552)),
-  ),
-  teal: (
-    50: to-rgb(oklch(98.4% 0.014 180.72)),
-    100: to-rgb(oklch(95.3% 0.051 180.801)),
-    200: to-rgb(oklch(91% 0.096 180.426)),
-    300: to-rgb(oklch(85.5% 0.138 181.071)),
-    400: to-rgb(oklch(77.7% 0.152 181.912)),
-    500: to-rgb(oklch(70.4% 0.14 182.503)),
-    600: to-rgb(oklch(60% 0.118 184.704)),
-    700: to-rgb(oklch(51.1% 0.096 186.391)),
-    800: to-rgb(oklch(43.7% 0.078 188.216)),
-    900: to-rgb(oklch(38.6% 0.063 188.416)),
-    950: to-rgb(oklch(27.7% 0.046 192.524)),
-  ),
-  cyan: (
-    50: to-rgb(oklch(98.4% 0.019 200.873)),
-    100: to-rgb(oklch(95.6% 0.045 203.388)),
-    200: to-rgb(oklch(91.7% 0.08 205.041)),
-    300: to-rgb(oklch(86.5% 0.127 207.078)),
-    400: to-rgb(oklch(78.9% 0.154 211.53)),
-    500: to-rgb(oklch(71.5% 0.143 215.221)),
-    600: to-rgb(oklch(60.9% 0.126 221.723)),
-    700: to-rgb(oklch(52% 0.105 223.128)),
-    800: to-rgb(oklch(45% 0.085 224.283)),
-    900: to-rgb(oklch(39.8% 0.07 227.392)),
-    950: to-rgb(oklch(30.2% 0.056 229.695)),
-  ),
-  sky: (
-    50: to-rgb(oklch(97.7% 0.013 236.62)),
-    100: to-rgb(oklch(95.1% 0.026 236.824)),
-    200: to-rgb(oklch(90.1% 0.058 230.902)),
-    300: to-rgb(oklch(82.8% 0.111 230.318)),
-    400: to-rgb(oklch(74.6% 0.16 232.661)),
-    500: to-rgb(oklch(68.5% 0.169 237.323)),
-    600: to-rgb(oklch(58.8% 0.158 241.966)),
-    700: to-rgb(oklch(50% 0.134 242.749)),
-    800: to-rgb(oklch(44.3% 0.11 240.79)),
-    900: to-rgb(oklch(39.1% 0.09 240.876)),
-    950: to-rgb(oklch(29.3% 0.066 243.157)),
-  ),
-  blue: (
-    50: to-rgb(oklch(97% 0.014 254.604)),
-    100: to-rgb(oklch(93.2% 0.032 255.585)),
-    200: to-rgb(oklch(88.2% 0.059 254.128)),
-    300: to-rgb(oklch(80.9% 0.105 251.813)),
-    400: to-rgb(oklch(70.7% 0.165 254.624)),
-    500: to-rgb(oklch(62.3% 0.214 259.815)),
-    600: to-rgb(oklch(54.6% 0.245 262.881)),
-    700: to-rgb(oklch(48.8% 0.243 264.376)),
-    800: to-rgb(oklch(42.4% 0.199 265.638)),
-    900: to-rgb(oklch(37.9% 0.146 265.522)),
-    950: to-rgb(oklch(28.2% 0.091 267.935)),
-  ),
-  indigo: (
-    50: to-rgb(oklch(96.2% 0.018 272.314)),
-    100: to-rgb(oklch(93% 0.034 272.788)),
-    200: to-rgb(oklch(87% 0.065 274.039)),
-    300: to-rgb(oklch(78.5% 0.115 274.713)),
-    400: to-rgb(oklch(67.3% 0.182 276.935)),
-    500: to-rgb(oklch(58.5% 0.233 277.117)),
-    600: to-rgb(oklch(51.1% 0.262 276.966)),
-    700: to-rgb(oklch(45.7% 0.24 277.023)),
-    800: to-rgb(oklch(39.8% 0.195 277.366)),
-    900: to-rgb(oklch(35.9% 0.144 278.697)),
-    950: to-rgb(oklch(25.7% 0.09 281.288)),
-  ),
-  violet: (
-    50: to-rgb(oklch(96.9% 0.016 293.756)),
-    100: to-rgb(oklch(94.3% 0.029 294.588)),
-    200: to-rgb(oklch(89.4% 0.057 293.283)),
-    300: to-rgb(oklch(81.1% 0.111 293.571)),
-    400: to-rgb(oklch(70.2% 0.183 293.541)),
-    500: to-rgb(oklch(60.6% 0.25 292.717)),
-    600: to-rgb(oklch(54.1% 0.281 293.009)),
-    700: to-rgb(oklch(49.1% 0.27 292.581)),
-    800: to-rgb(oklch(43.2% 0.232 292.759)),
-    900: to-rgb(oklch(38% 0.189 293.745)),
-    950: to-rgb(oklch(28.3% 0.141 291.089)),
-  ),
-  purple: (
-    50: to-rgb(oklch(97.7% 0.014 308.299)),
-    100: to-rgb(oklch(94.6% 0.033 307.174)),
-    200: to-rgb(oklch(90.2% 0.063 306.703)),
-    300: to-rgb(oklch(82.7% 0.119 306.383)),
-    400: to-rgb(oklch(71.4% 0.203 305.504)),
-    500: to-rgb(oklch(62.7% 0.265 303.9)),
-    600: to-rgb(oklch(55.8% 0.288 302.321)),
-    700: to-rgb(oklch(49.6% 0.265 301.924)),
-    800: to-rgb(oklch(43.8% 0.218 303.724)),
-    900: to-rgb(oklch(38.1% 0.176 304.987)),
-    950: to-rgb(oklch(29.1% 0.149 302.717)),
-  ),
-  fuchsia: (
-    50: to-rgb(oklch(97.7% 0.017 320.058)),
-    100: to-rgb(oklch(95.2% 0.037 318.852)),
-    200: to-rgb(oklch(90.3% 0.076 319.62)),
-    300: to-rgb(oklch(83.3% 0.145 321.434)),
-    400: to-rgb(oklch(74% 0.238 322.16)),
-    500: to-rgb(oklch(66.7% 0.295 322.15)),
-    600: to-rgb(oklch(59.1% 0.293 322.896)),
-    700: to-rgb(oklch(51.8% 0.253 323.949)),
-    800: to-rgb(oklch(45.2% 0.211 324.591)),
-    900: to-rgb(oklch(40.1% 0.17 325.612)),
-    950: to-rgb(oklch(29.3% 0.136 325.661)),
-  ),
-  pink: (
-    50: to-rgb(oklch(97.1% 0.014 343.198)),
-    100: to-rgb(oklch(94.8% 0.028 342.258)),
-    200: to-rgb(oklch(89.9% 0.061 343.231)),
-    300: to-rgb(oklch(82.3% 0.12 346.018)),
-    400: to-rgb(oklch(71.8% 0.202 349.761)),
-    500: to-rgb(oklch(65.6% 0.241 354.308)),
-    600: to-rgb(oklch(59.2% 0.249 0.584)),
-    700: to-rgb(oklch(52.5% 0.223 3.958)),
-    800: to-rgb(oklch(45.9% 0.187 3.815)),
-    900: to-rgb(oklch(40.8% 0.153 2.432)),
-    950: to-rgb(oklch(28.4% 0.109 3.907)),
-  ),
-  rose: (
-    50: to-rgb(oklch(96.9% 0.015 12.422)),
-    100: to-rgb(oklch(94.1% 0.03 12.58)),
-    200: to-rgb(oklch(89.2% 0.058 10.001)),
-    300: to-rgb(oklch(81% 0.117 11.638)),
-    400: to-rgb(oklch(71.2% 0.194 13.428)),
-    500: to-rgb(oklch(64.5% 0.246 16.439)),
-    600: to-rgb(oklch(58.6% 0.253 17.585)),
-    700: to-rgb(oklch(51.4% 0.222 16.935)),
-    800: to-rgb(oklch(45.5% 0.188 13.697)),
-    900: to-rgb(oklch(41% 0.159 10.272)),
-    950: to-rgb(oklch(27.1% 0.105 12.094)),
-  ),
-  slate: (
-    50: to-rgb(oklch(98.4% 0.003 247.858)),
-    100: to-rgb(oklch(96.8% 0.007 247.896)),
-    200: to-rgb(oklch(92.9% 0.013 255.508)),
-    300: to-rgb(oklch(86.9% 0.022 252.894)),
-    400: to-rgb(oklch(70.4% 0.04 256.788)),
-    500: to-rgb(oklch(55.4% 0.046 257.417)),
-    600: to-rgb(oklch(44.6% 0.043 257.281)),
-    700: to-rgb(oklch(37.2% 0.044 257.287)),
-    800: to-rgb(oklch(27.9% 0.041 260.031)),
-    900: to-rgb(oklch(20.8% 0.042 265.755)),
-    950: to-rgb(oklch(12.9% 0.042 264.695)),
-  ),
-  gray: (
-    50: to-rgb(oklch(98.5% 0.002 247.839)),
-    100: to-rgb(oklch(96.7% 0.003 264.542)),
-    200: to-rgb(oklch(92.8% 0.006 264.531)),
-    300: to-rgb(oklch(87.2% 0.01 258.338)),
-    400: to-rgb(oklch(70.7% 0.022 261.325)),
-    500: to-rgb(oklch(55.1% 0.027 264.364)),
-    600: to-rgb(oklch(44.6% 0.03 256.802)),
-    700: to-rgb(oklch(37.3% 0.034 259.733)),
-    800: to-rgb(oklch(27.8% 0.033 256.848)),
-    900: to-rgb(oklch(21% 0.034 264.665)),
-    950: to-rgb(oklch(13% 0.028 261.692)),
-  ),
-  zinc: (
-    50: to-rgb(oklch(98.5% 0 0)),
-    100: to-rgb(oklch(96.7% 0.001 286.375)),
-    200: to-rgb(oklch(92% 0.004 286.32)),
-    300: to-rgb(oklch(87.1% 0.006 286.286)),
-    400: to-rgb(oklch(70.5% 0.015 286.067)),
-    500: to-rgb(oklch(55.2% 0.016 285.938)),
-    600: to-rgb(oklch(44.2% 0.017 285.786)),
-    700: to-rgb(oklch(37% 0.013 285.805)),
-    800: to-rgb(oklch(27.4% 0.006 286.033)),
-    900: to-rgb(oklch(21% 0.006 285.885)),
-    950: to-rgb(oklch(14.1% 0.005 285.823)),
-  ),
-  neutral: (
-    50: to-rgb(oklch(98.5% 0 0)),
-    100: to-rgb(oklch(97% 0 0)),
-    200: to-rgb(oklch(92.2% 0 0)),
-    300: to-rgb(oklch(87% 0 0)),
-    400: to-rgb(oklch(70.8% 0 0)),
-    500: to-rgb(oklch(55.6% 0 0)),
-    600: to-rgb(oklch(43.9% 0 0)),
-    700: to-rgb(oklch(37.1% 0 0)),
-    800: to-rgb(oklch(26.9% 0 0)),
-    900: to-rgb(oklch(20.5% 0 0)),
-    950: to-rgb(oklch(14.5% 0 0)),
-  ),
-  stone: (
-    50: to-rgb(oklch(98.5% 0.001 106.423)),
-    100: to-rgb(oklch(97% 0.001 106.424)),
-    200: to-rgb(oklch(92.3% 0.003 48.717)),
-    300: to-rgb(oklch(86.9% 0.005 56.366)),
-    400: to-rgb(oklch(70.9% 0.01 56.259)),
-    500: to-rgb(oklch(55.3% 0.013 58.071)),
-    600: to-rgb(oklch(44.4% 0.011 73.639)),
-    700: to-rgb(oklch(37.4% 0.01 67.558)),
-    800: to-rgb(oklch(26.8% 0.007 34.298)),
-    900: to-rgb(oklch(21.6% 0.006 56.043)),
-    950: to-rgb(oklch(14.7% 0.004 49.25)),
-  ),
-);
-
-// 색상 조회 헬퍼. shade 생략 시 500(각 색의 기준점) 반환
-@function get($name, $shade: 500) {
-  @return map.get(map.get($colors, $name), $shade);
-}
-
-@function variants($base, $offset: 0%) {
-  @return (
-    lightest: color.scale($base, $lightness: 90% + $offset),
-    lighter: color.scale($base, $lightness: 75% + $offset),
-    light: color.scale($base, $lightness: 60% + $offset),
-    default: color.scale($base, $lightness: 0% + $offset),
-    dark: color.scale($base, $lightness: -10% + $offset),
-    darker: color.scale($base, $lightness: -25% + $offset),
-    darkest: color.scale($base, $lightness: -40% + $offset)
-  );
-}
-
-@function variants-dark($base, $offset: 0%) {
-  @return (
-    darkest: color.mix(white, $base, 80% + $offset),
-    darker: color.mix(white, $base, 60% + $offset),
-    dark: color.mix(white, $base, 40% + $offset),
-    default: color.mix(black, $base, 20% + $offset),
-    light: color.mix(black, $base, 55% + $offset),
-    lighter: color.mix(black, $base, 70% + $offset),
-    lightest: color.mix(black, $base, 80% + $offset)
-  );
-}
+// Tailwind CSS v4 팔레트 — oklch 원본을 sRGB 정수 rgb 로 변환해 고정 저장.
+// oklch 미지원 브라우저(구버전 Chrome 등) 대응으로 rgb 값을 직접 사용한다.
+// 값 재생성: scratchpad 의 gen.scss 로 color.channel round+clamp 추출(현 팔레트 기준).
+@mixin vars {
+  --color-red-50: rgb(254, 242, 242);
+  --color-red-100: rgb(255, 226, 226);
+  --color-red-200: rgb(255, 201, 201);
+  --color-red-300: rgb(255, 162, 162);
+  --color-red-400: rgb(255, 100, 103);
+  --color-red-500: rgb(251, 44, 54);
+  --color-red-600: rgb(231, 0, 11);
+  --color-red-700: rgb(193, 0, 7);
+  --color-red-800: rgb(159, 7, 18);
+  --color-red-900: rgb(130, 24, 26);
+  --color-red-950: rgb(70, 8, 9);
+  --color-orange-50: rgb(255, 247, 237);
+  --color-orange-100: rgb(255, 237, 212);
+  --color-orange-200: rgb(255, 214, 167);
+  --color-orange-300: rgb(255, 184, 106);
+  --color-orange-400: rgb(255, 137, 4);
+  --color-orange-500: rgb(255, 105, 0);
+  --color-orange-600: rgb(245, 73, 0);
+  --color-orange-700: rgb(202, 53, 0);
+  --color-orange-800: rgb(159, 45, 0);
+  --color-orange-900: rgb(126, 42, 12);
+  --color-orange-950: rgb(68, 19, 6);
+  --color-amber-50: rgb(255, 251, 235);
+  --color-amber-100: rgb(254, 243, 198);
+  --color-amber-200: rgb(254, 230, 133);
+  --color-amber-300: rgb(255, 210, 48);
+  --color-amber-400: rgb(255, 185, 0);
+  --color-amber-500: rgb(254, 154, 0);
+  --color-amber-600: rgb(225, 113, 0);
+  --color-amber-700: rgb(187, 77, 0);
+  --color-amber-800: rgb(151, 60, 0);
+  --color-amber-900: rgb(123, 51, 6);
+  --color-amber-950: rgb(70, 25, 1);
+  --color-yellow-50: rgb(254, 252, 232);
+  --color-yellow-100: rgb(254, 249, 194);
+  --color-yellow-200: rgb(255, 240, 133);
+  --color-yellow-300: rgb(255, 223, 32);
+  --color-yellow-400: rgb(253, 199, 0);
+  --color-yellow-500: rgb(240, 177, 0);
+  --color-yellow-600: rgb(208, 135, 0);
+  --color-yellow-700: rgb(166, 95, 0);
+  --color-yellow-800: rgb(137, 75, 0);
+  --color-yellow-900: rgb(115, 62, 10);
+  --color-yellow-950: rgb(67, 32, 4);
+  --color-lime-50: rgb(247, 254, 231);
+  --color-lime-100: rgb(236, 252, 202);
+  --color-lime-200: rgb(216, 249, 153);
+  --color-lime-300: rgb(187, 244, 81);
+  --color-lime-400: rgb(154, 230, 0);
+  --color-lime-500: rgb(124, 207, 0);
+  --color-lime-600: rgb(94, 165, 0);
+  --color-lime-700: rgb(73, 125, 0);
+  --color-lime-800: rgb(60, 99, 0);
+  --color-lime-900: rgb(53, 83, 14);
+  --color-lime-950: rgb(25, 46, 3);
+  --color-green-50: rgb(240, 253, 244);
+  --color-green-100: rgb(220, 252, 231);
+  --color-green-200: rgb(185, 248, 207);
+  --color-green-300: rgb(123, 241, 168);
+  --color-green-400: rgb(5, 223, 114);
+  --color-green-500: rgb(0, 201, 80);
+  --color-green-600: rgb(0, 166, 62);
+  --color-green-700: rgb(0, 130, 54);
+  --color-green-800: rgb(1, 102, 48);
+  --color-green-900: rgb(13, 84, 43);
+  --color-green-950: rgb(3, 46, 21);
+  --color-emerald-50: rgb(236, 253, 245);
+  --color-emerald-100: rgb(208, 250, 229);
+  --color-emerald-200: rgb(164, 244, 207);
+  --color-emerald-300: rgb(94, 233, 181);
+  --color-emerald-400: rgb(0, 212, 146);
+  --color-emerald-500: rgb(0, 188, 125);
+  --color-emerald-600: rgb(0, 153, 102);
+  --color-emerald-700: rgb(0, 122, 85);
+  --color-emerald-800: rgb(0, 96, 69);
+  --color-emerald-900: rgb(0, 79, 59);
+  --color-emerald-950: rgb(0, 44, 34);
+  --color-teal-50: rgb(240, 253, 250);
+  --color-teal-100: rgb(203, 251, 241);
+  --color-teal-200: rgb(150, 247, 228);
+  --color-teal-300: rgb(70, 236, 213);
+  --color-teal-400: rgb(0, 213, 190);
+  --color-teal-500: rgb(0, 187, 167);
+  --color-teal-600: rgb(0, 150, 137);
+  --color-teal-700: rgb(0, 120, 111);
+  --color-teal-800: rgb(0, 95, 90);
+  --color-teal-900: rgb(11, 79, 74);
+  --color-teal-950: rgb(2, 47, 46);
+  --color-cyan-50: rgb(236, 254, 255);
+  --color-cyan-100: rgb(206, 250, 254);
+  --color-cyan-200: rgb(162, 244, 253);
+  --color-cyan-300: rgb(83, 234, 253);
+  --color-cyan-400: rgb(0, 211, 242);
+  --color-cyan-500: rgb(0, 184, 219);
+  --color-cyan-600: rgb(0, 146, 184);
+  --color-cyan-700: rgb(0, 117, 149);
+  --color-cyan-800: rgb(0, 95, 120);
+  --color-cyan-900: rgb(16, 78, 100);
+  --color-cyan-950: rgb(5, 51, 69);
+  --color-sky-50: rgb(240, 249, 255);
+  --color-sky-100: rgb(223, 242, 254);
+  --color-sky-200: rgb(184, 230, 254);
+  --color-sky-300: rgb(116, 212, 255);
+  --color-sky-400: rgb(0, 188, 255);
+  --color-sky-500: rgb(0, 166, 244);
+  --color-sky-600: rgb(0, 132, 209);
+  --color-sky-700: rgb(0, 105, 168);
+  --color-sky-800: rgb(0, 89, 138);
+  --color-sky-900: rgb(2, 74, 112);
+  --color-sky-950: rgb(5, 47, 74);
+  --color-blue-50: rgb(239, 246, 255);
+  --color-blue-100: rgb(219, 234, 254);
+  --color-blue-200: rgb(190, 219, 255);
+  --color-blue-300: rgb(142, 197, 255);
+  --color-blue-400: rgb(81, 162, 255);
+  --color-blue-500: rgb(43, 127, 255);
+  --color-blue-600: rgb(21, 93, 252);
+  --color-blue-700: rgb(20, 71, 230);
+  --color-blue-800: rgb(25, 60, 184);
+  --color-blue-900: rgb(28, 57, 142);
+  --color-blue-950: rgb(22, 36, 86);
+  --color-indigo-50: rgb(238, 242, 255);
+  --color-indigo-100: rgb(224, 231, 255);
+  --color-indigo-200: rgb(198, 210, 255);
+  --color-indigo-300: rgb(163, 179, 255);
+  --color-indigo-400: rgb(124, 134, 255);
+  --color-indigo-500: rgb(97, 95, 255);
+  --color-indigo-600: rgb(79, 57, 246);
+  --color-indigo-700: rgb(67, 45, 215);
+  --color-indigo-800: rgb(55, 42, 172);
+  --color-indigo-900: rgb(49, 44, 133);
+  --color-indigo-950: rgb(30, 26, 77);
+  --color-violet-50: rgb(245, 243, 255);
+  --color-violet-100: rgb(237, 233, 254);
+  --color-violet-200: rgb(221, 214, 255);
+  --color-violet-300: rgb(196, 180, 255);
+  --color-violet-400: rgb(166, 132, 255);
+  --color-violet-500: rgb(142, 81, 255);
+  --color-violet-600: rgb(127, 34, 254);
+  --color-violet-700: rgb(112, 8, 231);
+  --color-violet-800: rgb(93, 14, 192);
+  --color-violet-900: rgb(77, 23, 154);
+  --color-violet-950: rgb(47, 13, 104);
+  --color-purple-50: rgb(250, 245, 255);
+  --color-purple-100: rgb(243, 232, 255);
+  --color-purple-200: rgb(233, 212, 255);
+  --color-purple-300: rgb(218, 178, 255);
+  --color-purple-400: rgb(194, 122, 255);
+  --color-purple-500: rgb(173, 70, 255);
+  --color-purple-600: rgb(152, 16, 250);
+  --color-purple-700: rgb(130, 0, 219);
+  --color-purple-800: rgb(110, 17, 176);
+  --color-purple-900: rgb(89, 22, 139);
+  --color-purple-950: rgb(60, 3, 102);
+  --color-fuchsia-50: rgb(253, 244, 255);
+  --color-fuchsia-100: rgb(250, 232, 255);
+  --color-fuchsia-200: rgb(246, 207, 255);
+  --color-fuchsia-300: rgb(244, 168, 255);
+  --color-fuchsia-400: rgb(237, 106, 255);
+  --color-fuchsia-500: rgb(225, 42, 251);
+  --color-fuchsia-600: rgb(200, 0, 222);
+  --color-fuchsia-700: rgb(168, 0, 183);
+  --color-fuchsia-800: rgb(138, 1, 148);
+  --color-fuchsia-900: rgb(114, 19, 120);
+  --color-fuchsia-950: rgb(75, 0, 79);
+  --color-pink-50: rgb(253, 242, 248);
+  --color-pink-100: rgb(252, 231, 243);
+  --color-pink-200: rgb(252, 206, 232);
+  --color-pink-300: rgb(253, 165, 213);
+  --color-pink-400: rgb(251, 100, 182);
+  --color-pink-500: rgb(246, 51, 154);
+  --color-pink-600: rgb(230, 0, 118);
+  --color-pink-700: rgb(198, 0, 92);
+  --color-pink-800: rgb(163, 0, 76);
+  --color-pink-900: rgb(134, 16, 67);
+  --color-pink-950: rgb(81, 4, 36);
+  --color-rose-50: rgb(255, 241, 242);
+  --color-rose-100: rgb(255, 228, 230);
+  --color-rose-200: rgb(255, 204, 211);
+  --color-rose-300: rgb(255, 161, 173);
+  --color-rose-400: rgb(255, 99, 126);
+  --color-rose-500: rgb(255, 32, 86);
+  --color-rose-600: rgb(236, 0, 63);
+  --color-rose-700: rgb(199, 0, 54);
+  --color-rose-800: rgb(165, 0, 54);
+  --color-rose-900: rgb(139, 8, 54);
+  --color-rose-950: rgb(77, 2, 24);
+  --color-slate-50: rgb(248, 250, 252);
+  --color-slate-100: rgb(241, 245, 249);
+  --color-slate-200: rgb(226, 232, 240);
+  --color-slate-300: rgb(202, 213, 226);
+  --color-slate-400: rgb(144, 161, 185);
+  --color-slate-500: rgb(98, 116, 142);
+  --color-slate-600: rgb(69, 85, 108);
+  --color-slate-700: rgb(49, 65, 88);
+  --color-slate-800: rgb(29, 41, 61);
+  --color-slate-900: rgb(15, 23, 43);
+  --color-slate-950: rgb(2, 6, 24);
+  --color-gray-50: rgb(249, 250, 251);
+  --color-gray-100: rgb(243, 244, 246);
+  --color-gray-200: rgb(229, 231, 235);
+  --color-gray-300: rgb(209, 213, 220);
+  --color-gray-400: rgb(153, 161, 175);
+  --color-gray-500: rgb(106, 114, 130);
+  --color-gray-600: rgb(74, 85, 101);
+  --color-gray-700: rgb(54, 65, 83);
+  --color-gray-800: rgb(30, 41, 57);
+  --color-gray-900: rgb(16, 24, 40);
+  --color-gray-950: rgb(3, 7, 18);
+  --color-zinc-50: rgb(250, 250, 250);
+  --color-zinc-100: rgb(244, 244, 245);
+  --color-zinc-200: rgb(228, 228, 231);
+  --color-zinc-300: rgb(212, 212, 216);
+  --color-zinc-400: rgb(159, 159, 169);
+  --color-zinc-500: rgb(113, 113, 123);
+  --color-zinc-600: rgb(82, 82, 92);
+  --color-zinc-700: rgb(63, 63, 70);
+  --color-zinc-800: rgb(39, 39, 42);
+  --color-zinc-900: rgb(24, 24, 27);
+  --color-zinc-950: rgb(9, 9, 11);
+  --color-neutral-50: rgb(250, 250, 250);
+  --color-neutral-100: rgb(245, 245, 245);
+  --color-neutral-200: rgb(229, 229, 229);
+  --color-neutral-300: rgb(212, 212, 212);
+  --color-neutral-400: rgb(161, 161, 161);
+  --color-neutral-500: rgb(115, 115, 115);
+  --color-neutral-600: rgb(82, 82, 82);
+  --color-neutral-700: rgb(64, 64, 64);
+  --color-neutral-800: rgb(38, 38, 38);
+  --color-neutral-900: rgb(23, 23, 23);
+  --color-neutral-950: rgb(10, 10, 10);
+  --color-stone-50: rgb(250, 250, 249);
+  --color-stone-100: rgb(245, 245, 244);
+  --color-stone-200: rgb(231, 229, 228);
+  --color-stone-300: rgb(214, 211, 209);
+  --color-stone-400: rgb(166, 160, 155);
+  --color-stone-500: rgb(121, 113, 107);
+  --color-stone-600: rgb(87, 83, 77);
+  --color-stone-700: rgb(68, 64, 59);
+  --color-stone-800: rgb(41, 37, 36);
+  --color-stone-900: rgb(28, 25, 23);
+  --color-stone-950: rgb(12, 10, 9);
+}

package/scss/commons/_theme-variables.scss

@@ -1,29 +1,19 @@
 @use "mixins";
 @use "variables";
 @use "colors";
-@use "../themes/variables-dark" as dark;
 @use "../themes/variables-blueprint" as blueprint;
 
 @layer base, theme-variant, utilities;
 
 @layer base {
   :root {
-    @include mixins.writeVars(colors.$colors, "color");
+    @include colors.vars;
     @include mixins.writeVars(variables.$vars, "");
   }
 }
 
 @layer theme-variant {
-  .sd-theme-dark {
-    @include mixins.writeVars(dark.$vars, "");
-  }
-
-  // D7: opt-out 방식 이미지 반전
-  .sd-theme-dark img:not(.no-invert) {
-    filter: invert(1) hue-rotate(180deg);
-  }
-
-  // 블루프린트 — 다크 토글과 직교. 트레이싱지(라이트 면)
+  // 블루프린트 — 트레이싱지(라이트 면)
   .sd-theme-blueprint {
     @include mixins.writeVars(blueprint.$paper, "");
   }