@simplysm/angular 14.1.20 → 14.2.1

package/src/controls/select/sd-select.ts

@@ -39,15 +39,7 @@ export type SelectModeValue<T> = {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [
-    SdDropdown,
-    SdDropdownPopup,
-    SdAnchor,
-    SdGap,
-    NgTemplateOutlet,
-    SdRipple,
-    NgIcon,
-  ],
+  imports: [SdDropdown, SdDropdownPopup, SdAnchor, SdGap, NgTemplateOutlet, SdRipple, NgIcon],
   template: `
     <sd-dropdown [disabled]="disabled()" [(open)]="dropdownOpen">
       <div
@@ -92,7 +84,12 @@ export type SelectModeValue<T> = {
           @for (item of _flatItems(); track trackByFn()(item.data, item.index)) {
             <ng-template
               [ngTemplateOutlet]="tpl"
-              [ngTemplateOutletContext]="{ $implicit: item.data, item: item.data, index: item.index, depth: item.depth }"
+              [ngTemplateOutletContext]="{
+                $implicit: item.data,
+                item: item.data,
+                index: item.index,
+                depth: item.depth,
+              }"
             />
           }
         } @else {
@@ -113,23 +110,23 @@ export type SelectModeValue<T> = {
           display: flex;
           overflow: hidden;
 
-          border: 1px solid var(--border-color-light);
-          border-radius: var(--border-radius-default);
-          background: var(--theme-secondary-lightest);
+          border: 1px solid var(--sd-bd-field);
+          border-radius: var(--sd-radius-default);
+          background-color: var(--sd-bg-field);
 
           &:focus,
           &:focus-within {
-            border-color: var(--theme-primary-default);
+            border-color: var(--sd-focus-ring-color);
           }
 
           > ._sd-select-control {
             display: flex;
             position: relative;
-            gap: var(--gap-default);
+            gap: var(--sd-gap-default);
             flex-grow: 1;
-            padding: var(--gap-sm) var(--gap-default);
+            padding: var(--sd-gap-sm) var(--sd-gap-default);
             cursor: pointer;
-            font-family: var(--font-family-field);
+            font-family: var(--sd-font-family-field);
 
             > ._sd-select-control-content {
               flex: 1;
@@ -150,22 +147,23 @@ export type SelectModeValue<T> = {
           }
 
           > sd-select-button {
-            padding: var(--gap-sm);
-            border-left: 1px solid var(--theme-gray-lightest);
+            padding: var(--sd-gap-sm);
+            border-left: 1px solid var(--sd-bd-hairline);
 
             &:last-of-type {
-              border-top-right-radius: var(--border-radius-default);
-              border-bottom-right-radius: var(--border-radius-default);
+              border-top-right-radius: var(--sd-radius-default);
+              border-bottom-right-radius: var(--sd-radius-default);
             }
           }
         }
 
+        // disabled 는 색 치환 단일 규약 (DEC-009)
         &[data-sd-disabled="true"] {
           > sd-dropdown {
-            background: var(--theme-gray-lightest);
+            background-color: var(--sd-bg-disabled);
 
             > ._sd-select-control {
-              color: var(--text-trans-light);
+              color: var(--sd-tx-disabled);
               cursor: default;
 
               > ._sd-select-control-icon {
@@ -184,12 +182,12 @@ export type SelectModeValue<T> = {
         &[data-sd-size="sm"] {
           > sd-dropdown {
             > ._sd-select-control {
-              padding: var(--gap-xs) var(--gap-sm);
-              gap: var(--gap-sm);
+              padding: var(--sd-gap-xs) var(--sd-gap-sm);
+              gap: var(--sd-gap-sm);
             }
 
             > sd-select-button {
-              padding: var(--gap-xs);
+              padding: var(--sd-gap-xs);
             }
           }
         }
@@ -197,12 +195,12 @@ export type SelectModeValue<T> = {
         &[data-sd-size="lg"] {
           > sd-dropdown {
             > ._sd-select-control {
-              padding: var(--gap-default) var(--gap-lg);
-              gap: var(--gap-lg);
+              padding: var(--sd-gap-default) var(--sd-gap-lg);
+              gap: var(--sd-gap-lg);
             }
 
             > sd-select-button {
-              padding: var(--gap-default);
+              padding: var(--sd-gap-default);
             }
           }
         }
@@ -221,21 +219,22 @@ export type SelectModeValue<T> = {
 
             &:focus,
             &:focus-within {
-              outline: 1px solid var(--theme-primary-default);
+              outline: 1px solid var(--sd-focus-ring-color);
               outline-offset: -1px;
 
               > sd-select-button {
-                outline: 1px solid var(--theme-primary-default);
+                outline: 1px solid var(--sd-focus-ring-color);
                 outline-offset: -1px;
               }
             }
           }
 
+          // inset(시트 셀 등)의 disabled 는 일반 콘텐츠처럼 표시(현행 유지)
           &[data-sd-disabled="true"] > sd-dropdown {
-            background: var(--control-color);
+            background-color: var(--sd-bg-control);
 
             > ._sd-select-control {
-              color: var(--text-trans-default);
+              color: var(--sd-tx-default);
             }
           }
         }
@@ -243,8 +242,8 @@ export type SelectModeValue<T> = {
 
       ._sd-select-all-bar {
         display: flex;
-        padding: var(--gap-sm) var(--gap-default);
-        border-bottom: 1px solid var(--border-color-light);
+        padding: var(--sd-gap-sm) var(--sd-gap-default);
+        border-bottom: 1px solid var(--sd-bd-default);
       }
     `,
   ],

package/src/controls/tab/sd-tab-item.ts

@@ -26,17 +26,17 @@ import { SdTab } from "./sd-tab";
     /* language=SCSS */ `
       sd-tab-item {
         display: inline-block;
-        padding: var(--gap-sm) var(--gap-default);
+        padding: var(--sd-gap-sm) var(--sd-gap-default);
         cursor: pointer;
         margin-bottom: -2px;
 
         border-bottom: 2px solid transparent !important;
         font-weight: bold;
-        color: var(--theme-gray-default);
+        color: var(--sd-tx-gray);
 
         &[data-sd-selected="true"] {
-          border-bottom: 3px solid var(--theme-primary-default) !important;
-          color: var(--theme-primary-default);
+          border-bottom: 3px solid var(--sd-bd-primary-solid) !important;
+          color: var(--sd-tx-primary);
         }
       }
     `,

package/src/controls/tab/sd-tab.ts

@@ -10,9 +10,9 @@ import { ChangeDetectionStrategy, Component, model, ViewEncapsulation } from "@a
     /* language=SCSS */ `
       sd-tab {
         display: block;
-        border-bottom: 2px solid var(--theme-gray-lighter);
+        border-bottom: 2px solid var(--sd-bd-hairline);
 
-        padding: 0 calc(var(--gap-default) + 1px) 0 calc(var(--gap-default) - 1px);
+        padding: 0 calc(var(--sd-gap-default) + 1px) 0 calc(var(--sd-gap-default) - 1px);
       }
     `,
   ],

package/src/core/busy/sd-busy-container.ts

@@ -77,13 +77,13 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
           left: 0;
           width: 100%;
           height: 100%;
-          z-index: map.get(variables.$vars, z-index, busy);
+          z-index: map.get(variables.$sd, z, busy);
 
           visibility: hidden;
           pointer-events: none;
 
           opacity: 0;
-          transition: opacity var(--animation-duration);
+          transition: opacity var(--sd-animation-duration);
           transition-timing-function: linear;
 
           > ._progress {
@@ -93,7 +93,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
             left: 0;
             height: 4px;
             width: 100%;
-            background-color: var(--background-color);
+            background-color: var(--sd-bg-canvas);
 
             > ._progress-bar {
               position: absolute;
@@ -103,11 +103,11 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
               content: "";
               height: 4px;
               width: 100%;
-              transition: var(--animation-duration) ease-in;
+              transition: var(--sd-animation-duration) ease-in;
               transition-property: transform;
               transform-origin: left;
               transform: scaleX(0);
-              background-color: var(--theme-primary-default);
+              background-color: var(--sd-bg-primary-solid);
             }
           }
         }
@@ -124,7 +124,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
         &[data-sd-type="spinner"] {
           > ._screen > ._rect {
             transform: translateY(-100%);
-            transition: var(--animation-duration) ease-in;
+            transition: var(--sd-animation-duration) ease-in;
             transition-property: transform;
 
             > ._indicator {
@@ -132,11 +132,12 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
               width: 30px;
               height: 30px;
               margin: 20px auto 0 auto;
-              border: 6px solid var(--background-color);
+              // 링은 캔버스색, 하단 호는 primary 면색을 그대로 사용하는 그래픽
+              border: 6px solid var(--sd-bg-canvas);
               border-radius: 100%;
-              border-bottom-color: var(--theme-primary-default);
+              border-bottom-color: var(--sd-bg-primary-solid);
               animation: sd-busy-spin 1s linear infinite;
-              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+              box-shadow: 0 2px 4px var(--sd-shadow-color);
 
               > div {
                 display: none;
@@ -147,17 +148,17 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
               position: absolute;
               top: 55px;
               width: 100%;
-              color: var(--background-color);
+              color: var(--sd-bg-canvas);
               font-weight: bold;
               text-align: center;
-              text-shadow: 0 0 2px var(--background-rev-color);
+              text-shadow: 0 0 2px var(--sd-bg-inverse);
             }
           }
 
           &[data-sd-busy="true"] {
             > ._screen > ._rect {
               transform: none;
-              transition: var(--animation-duration) ease-out;
+              transition: var(--sd-animation-duration) ease-out;
             }
           }
         }
@@ -173,7 +174,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
                 left: 0;
                 height: 4px;
                 width: 100%;
-                background-color: var(--background-color);
+                background-color: var(--sd-bg-canvas);
 
                 &:before,
                 &:after {
@@ -189,12 +190,12 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
                 }
 
                 &:before {
-                  background-color: var(--theme-primary-default);
+                  background-color: var(--sd-bg-primary-solid);
                   animation: sd-busy-bar-indicator-before 2s infinite ease-in;
                 }
 
                 &:after {
-                  background-color: var(--background-color);
+                  background-color: var(--sd-bg-canvas);
                   animation: sd-busy-bar-indicator-after 2s infinite ease-out;
                 }
 
@@ -239,7 +240,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
                   left: 0;
                   width: 100%;
                   height: 100%;
-                  background-color: var(--trans-light);
+                  background-color: var(--sd-bg-busy-indicator);
                   animation: sd-busy-cube 2.4s infinite linear both;
                   transform-origin: 100% 100%;
                 }

package/src/core/modal/sd-modal.ts

@@ -118,14 +118,14 @@ import "@simplysm/core-browser";
       sd-modal {
         display: block;
         position: fixed;
-        z-index: var(--z-index-modal);
+        z-index: var(--sd-z-modal);
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
-        padding-top: calc(var(--topbar-height) + var(--gap-sm));
+        padding-top: calc(var(--sd-topbar-height) + var(--sd-gap-sm));
         opacity: 0;
-        transition: opacity var(--animation-duration) ease-in-out;
+        transition: opacity var(--sd-animation-duration) ease-in-out;
         pointer-events: none;
 
         > ._backdrop {
@@ -134,7 +134,7 @@ import "@simplysm/core-browser";
           left: 0;
           width: 100%;
           height: 100%;
-          background: var(--trans-default);
+          background-color: var(--sd-bg-backdrop);
         }
 
         > ._dialog {
@@ -144,12 +144,13 @@ import "@simplysm/core-browser";
           margin: 0 auto;
           width: fit-content;
           min-width: 200px;
-          background: var(--control-color);
+          background-color: var(--sd-bg-elevated);
+          border: 1px solid var(--sd-modal-bd);
           overflow: hidden;
           @include mixins.elevation(16);
-          border-radius: var(--border-radius-default);
+          border-radius: var(--sd-radius-default);
           transform: translateY(-25px);
-          transition: transform var(--animation-duration) ease-in-out;
+          transition: transform var(--sd-animation-duration) ease-in-out;
 
           &:focus {
             outline: none;
@@ -159,16 +160,22 @@ import "@simplysm/core-browser";
             display: flex;
             align-items: center;
             user-select: none;
-            border-bottom: 1px solid var(--theme-gray-lighter);
-            background: var(--theme-gray-lightest);
+            border-bottom: 1px solid var(--sd-bd-hairline);
+            background-color: var(--sd-modal-header-bg);
+            color: var(--sd-modal-header-tx);
 
             > ._title {
               flex: 1;
-              padding: var(--gap-sm) var(--gap-default);
+              padding: var(--sd-gap-sm) var(--sd-gap-default);
             }
 
             > ._close-btn {
-              padding: var(--gap-sm) var(--gap-default);
+              padding: var(--sd-gap-sm) var(--sd-gap-default);
+              color: var(--sd-modal-header-tx-muted);
+
+              &:hover {
+                color: var(--sd-modal-header-tx);
+              }
             }
           }
 
@@ -183,7 +190,7 @@ import "@simplysm/core-browser";
             &._resize-left {
               top: 0;
               left: 0;
-              width: var(--gap-sm);
+              width: var(--sd-gap-sm);
               height: 100%;
               cursor: ew-resize;
             }
@@ -191,7 +198,7 @@ import "@simplysm/core-browser";
             &._resize-right {
               top: 0;
               right: 0;
-              width: var(--gap-sm);
+              width: var(--sd-gap-sm);
               height: 100%;
               cursor: ew-resize;
             }
@@ -200,15 +207,15 @@ import "@simplysm/core-browser";
               top: 0;
               left: 0;
               width: 100%;
-              height: var(--gap-sm);
+              height: var(--sd-gap-sm);
               cursor: ns-resize;
             }
 
             &._resize-top-right {
               right: 0;
               top: 0;
-              width: var(--gap-sm);
-              height: var(--gap-sm);
+              width: var(--sd-gap-sm);
+              height: var(--sd-gap-sm);
               z-index: 1;
               cursor: nesw-resize;
             }
@@ -216,8 +223,8 @@ import "@simplysm/core-browser";
             &._resize-top-left {
               left: 0;
               top: 0;
-              width: var(--gap-sm);
-              height: var(--gap-sm);
+              width: var(--sd-gap-sm);
+              height: var(--sd-gap-sm);
               cursor: nwse-resize;
               z-index: 1;
             }
@@ -226,15 +233,15 @@ import "@simplysm/core-browser";
               bottom: 0;
               left: 0;
               width: 100%;
-              height: var(--gap-sm);
+              height: var(--sd-gap-sm);
               cursor: ns-resize;
             }
 
             &._resize-bottom-right {
               right: 0;
               bottom: 0;
-              width: var(--gap-sm);
-              height: var(--gap-sm);
+              width: var(--sd-gap-sm);
+              height: var(--sd-gap-sm);
               z-index: 1;
               cursor: nwse-resize;
             }
@@ -242,8 +249,8 @@ import "@simplysm/core-browser";
             &._resize-bottom-left {
               left: 0;
               bottom: 0;
-              width: var(--gap-sm);
-              height: var(--gap-sm);
+              width: var(--sd-gap-sm);
+              height: var(--sd-gap-sm);
               cursor: nesw-resize;
               z-index: 1;
             }
@@ -270,7 +277,7 @@ import "@simplysm/core-browser";
             pointer-events: auto;
             opacity: 0;
             @include mixins.elevation(4);
-            border: 1px solid var(--theme-gray-lighter);
+            border: 1px solid var(--sd-bd-hairline);
 
             &:focus {
               @include mixins.elevation(16);
@@ -290,16 +297,16 @@ import "@simplysm/core-browser";
         &[data-sd-position="bottom-right"] {
           > ._dialog {
             position: absolute;
-            right: calc(var(--gap-xxl) * 2);
-            bottom: var(--gap-xxl);
+            right: calc(var(--sd-gap-xxl) * 2);
+            bottom: var(--sd-gap-xxl);
           }
         }
 
         &[data-sd-position="top-right"] {
           > ._dialog {
             position: absolute;
-            right: var(--gap-xxl);
-            top: var(--gap-xxl);
+            right: var(--sd-gap-xxl);
+            top: var(--sd-gap-xxl);
           }
         }
 
@@ -313,8 +320,8 @@ import "@simplysm/core-browser";
             border-radius: 0;
 
             > ._header {
-              background: transparent;
-              color: var(--text-trans-lighter);
+              background-color: transparent;
+              color: var(--sd-tx-faint);
             }
           }
         }
@@ -519,8 +526,7 @@ export class SdModal {
     if (this._sdSystemConfig == null) return;
 
     const config = (await this._sdSystemConfig.getAsync(`sd-modal.${k}`)) as
-      | Record<string, string | undefined>
-      | undefined;
+      Record<string, string | undefined> | undefined;
     if (config == null) return;
 
     const dialogEl = this._getDialogEl();

package/src/core/provideSdAngular.ts

@@ -25,13 +25,14 @@ import { SwUpdate } from "@angular/service-worker";
 import { provideNgIconsConfig } from "@ng-icons/core";
 import { SdBusyProvider } from "./busy/sd-busy.provider";
 import { SdAngularConfigProvider } from "./config/sd-angular-config.provider";
-import { SdThemeProvider } from "../features/theme/sd-theme-provider";
+import { SD_THEMES, SdThemeProvider } from "../features/theme/sd-theme-provider";
 import { SdLocalStorageProvider } from "./config/sd-local-storage.provider";
 import { SdGlobalErrorHandlerPlugin } from "./error-handler/sd-global-error-handler.plugin";
 import { SdOptionEventPlugin } from "./events/sd-option-event.plugin";
 import { createLogger } from "@simplysm/core-common";
 
 const logger = createLogger("angular:sw-update");
+const themeLogger = createLogger("angular:theme");
 
 export function provideSdAngular(opt: { clientName: string }): EnvironmentProviders {
   return makeEnvironmentProviders([
@@ -42,9 +43,10 @@ export function provideSdAngular(opt: { clientName: string }): EnvironmentProvid
         disableImageLazyLoadWarning: true,
       },
     },
+    // size 는 지정하지 않음 — 인라인 스타일로 박혀 styles.scss 의
+    // line-height 연동 calc(--ng-icon__size)를 덮어버림.
     provideNgIconsConfig({
       strokeWidth: 1.5,
-      size: "1.33em",
     }),
     provideEnvironmentInitializer(() => {
       // SSR(프리렌더) 가드: 테마 저장·복원은 브라우저 전용
@@ -53,17 +55,39 @@ export function provideSdAngular(opt: { clientName: string }): EnvironmentProvid
       const sdTheme = inject(SdThemeProvider);
       const sdLocalStorage = inject(SdLocalStorageProvider);
 
-      const savedBlueprint = sdLocalStorage.get("sd-theme-blueprint");
-      if (savedBlueprint != null) {
-        sdTheme.blueprint.set(savedBlueprint);
+      const savedTheme = sdLocalStorage.get("sd-theme");
+      if (savedTheme != null) {
+        const matched = SD_THEMES.find((def) => def.value === savedTheme);
+        if (matched != null) {
+          sdTheme.theme.set(matched.value);
+        } else {
+          // 저장된 테마가 내장 목록에 없음(구버전 제거 등) — 기본 테마 유지 + 사용자 인지용 경고
+          themeLogger.warn(
+            `저장된 테마 '${String(savedTheme)}' 가 내장 테마 목록에 없어 기본 테마로 표시합니다.`,
+          );
+        }
+      }
+
+      let prevTheme = sdTheme.theme();
+      effect(() => {
+        const theme = sdTheme.theme();
+        if (theme !== prevTheme) {
+          sdLocalStorage.set("sd-theme", theme);
+          prevTheme = theme;
+        }
+      });
+
+      const savedDensity = sdLocalStorage.get("sd-theme-density");
+      if (savedDensity === "compact" || savedDensity === "normal") {
+        sdTheme.density.set(savedDensity);
       }
 
-      let prevBlueprint = sdTheme.blueprint();
+      let prevDensity = sdTheme.density();
       effect(() => {
-        const blueprint = sdTheme.blueprint();
-        if (blueprint !== prevBlueprint) {
-          sdLocalStorage.set("sd-theme-blueprint", blueprint);
-          prevBlueprint = blueprint;
+        const density = sdTheme.density();
+        if (density !== prevDensity) {
+          sdLocalStorage.set("sd-theme-density", density);
+          prevDensity = density;
         }
       });
 

package/src/core/ripple/setupRipple.ts

@@ -35,14 +35,14 @@ export function setupRipple(enableFn?: () => boolean): void {
         position: "absolute",
         pointerEvents: "none",
         borderRadius: "100%",
-        background: "var(--trans-light)",
+        backgroundColor: "var(--sd-bg-state-active)",
 
         width: size * 2 + "px",
         height: size * 2 + "px",
         top: y - size + "px",
         left: x - size + "px",
 
-        transition: "calc(2 * var(--animation-duration)) linear",
+        transition: "calc(2 * var(--sd-animation-duration)) linear",
         transitionProperty: "transform, opacity",
         transform: "scale(0.1)",
       });

package/src/core/setupBgTheme.ts

@@ -3,29 +3,20 @@ import { isPlatformBrowser } from "@angular/common";
 
 export function setupBgTheme(options?: {
   theme?:
-    | "primary"
-    | "secondary"
-    | "info"
-    | "success"
-    | "warning"
-    | "danger"
-    | "gray"
-    | "blue-gray";
-  lightness?: "lightest" | "lighter";
+    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray";
 }): void {
   // SSR(프리렌더) 가드: document 반영은 브라우저 전용
   if (!isPlatformBrowser(inject(PLATFORM_ID))) return;
 
   effect((onCleanup) => {
+    // 앱 배경(body 가 소비하는 --sd-bg-canvas)을 시맨틱 subtle 면으로 덮는다.
     document.body.style.setProperty(
-      "--background-color",
-      options?.theme
-        ? `var(--theme-${options.theme}-${options.lightness ?? "lightest"})`
-        : "",
+      "--sd-bg-canvas",
+      options?.theme ? `var(--sd-bg-${options.theme}-subtle)` : "",
     );
 
     onCleanup(() => {
-      document.body.style.setProperty("--background-color", "");
+      document.body.style.setProperty("--sd-bg-canvas", "");
     });
   });
 }

package/src/core/show-effect/setupRevealOnShow.ts

@@ -28,7 +28,7 @@ export function setupRevealOnShow(
         Object.assign(el.style, {
           opacity: "1",
           transform: "none",
-          transitionDuration: "var(--animation-duration)",
+          transitionDuration: "var(--sd-animation-duration)",
           transitionTimingFunction: "ease-out",
           transitionProperty: "opacity, transform",
         });

package/src/core/toast/sd-toast-container.ts

@@ -29,8 +29,8 @@ import {
         height: 100%;
         width: 100%;
         pointer-events: none;
-        padding: var(--gap-xxl);
-        z-index: map.get(variables.$vars, z-index, toast);
+        padding: var(--sd-gap-xxl);
+        z-index: map.get(variables.$sd, z, toast);
 
         @include mixins.flex-direction(column);
 
@@ -43,9 +43,9 @@ import {
 
           > sd-toast {
             position: absolute;
-            bottom: var(--gap-xxl);
-            left: var(--gap-xxl);
-            right: var(--gap-xxl);
+            bottom: var(--sd-gap-xxl);
+            left: var(--sd-gap-xxl);
+            right: var(--sd-gap-xxl);
             width: auto;
           }
         }