@simplysm/angular 14.1.15 → 14.1.18

package/scss/commons/_variables.scss

@@ -1,50 +1,3 @@
-@use "sass:map";
-@use "sass:color";
-@use "./colors";
-
-/*@function to-rgb($oklch-color) {
-  @return color.to-space($oklch-color, rgb);
-}*/
-
-/*$colors: (
-  red: to-rgb(oklch(0.704 0.191 22.216)),
-  orange: to-rgb(oklch(0.75 0.183 55.934)),
-  amber: to-rgb(oklch(0.828 0.189 84.429)),
-  yellow: to-rgb(oklch(0.852 0.199 91.936)),
-  lime: to-rgb(oklch(0.841 0.238 128.85)),
-  green: to-rgb(oklch(0.792 0.209 151.711)),
-  emerald: to-rgb(oklch(0.765 0.177 163.223)),
-  teal: to-rgb(oklch(0.777 0.152 181.912)),
-  cyan: to-rgb(oklch(0.789 0.154 211.53)),
-  sky: to-rgb(oklch(0.746 0.16 232.661)),
-  blue: to-rgb(oklch(0.707 0.165 254.624)),
-  indigo: to-rgb(oklch(0.673 0.182 276.935)),
-  violet: to-rgb(oklch(0.702 0.183 293.541)),
-  purple: to-rgb(oklch(0.714 0.203 305.504)),
-  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),
-  pink: to-rgb(oklch(0.718 0.202 349.761)),
-  rose: to-rgb(oklch(0.712 0.194 13.428)),
-  slate: to-rgb(oklch(0.704 0.04 256.788)),
-  gray: to-rgb(oklch(0.707 0.022 261.325)),
-  zinc: to-rgb(oklch(0.705 0.015 286.067)),
-  neutral: to-rgb(oklch(0.708 0 0)),
-  stone: to-rgb(oklch(0.709 0.01 56.259)),
-);*/
-
-// D6: lightest~darkest가 실제 밝기와 일치하도록 수정
-// lightest(+90%) > lighter(+75%) > light(+60%) > default > dark(-10%) > darker(-25%) > darkest(-40%)
-//@function color-map($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: $base,
-//    dark: color.scale($base, $lightness: -10% + $offset),
-//    darker: color.scale($base, $lightness: -25% + $offset),
-//    darkest: color.scale($base, $lightness: -40% + $offset)
-//  );
-//}
-
 // Breakpoints for media queries (CSS custom properties cannot be used in media queries)
 $breakpoint-mobile: 520px;
 $breakpoint-xxs: 800px;
@@ -53,14 +6,80 @@ $breakpoint-sm: 1280px;
 
 $vars: (
   theme: (
-    "gray": colors.variants(colors.get(zinc, 400)),
-    blue-gray: colors.variants(colors.get(slate, 400)),
-    primary: colors.variants(colors.get(blue, 400)),
-    secondary: colors.variants(colors.get(blue, 400)),
-    info: colors.variants(colors.get(cyan, 400)),
-    success: colors.variants(colors.get(lime, 400)),
-    warning: colors.variants(colors.get(orange, 400)),
-    danger: colors.variants(colors.get(red, 400)),
+    // 중립색: 텍스트·보더 용도라 한 단계 밝은 스케일
+    "gray": (
+        lightest: var(--color-zinc-50),
+        lighter: var(--color-zinc-100),
+        light: var(--color-zinc-300),
+        default: var(--color-zinc-400),
+        dark: var(--color-zinc-500),
+        darker: var(--color-zinc-600),
+        darkest: var(--color-zinc-700),
+      ),
+    blue-gray: (
+      lightest: var(--color-slate-50),
+      lighter: var(--color-slate-100),
+      light: var(--color-slate-300),
+      default: var(--color-slate-400),
+      dark: var(--color-slate-500),
+      darker: var(--color-slate-600),
+      darkest: var(--color-slate-700),
+    ),
+    // 시맨틱 solid 색: 500 기준
+    primary: (
+        lightest: var(--color-blue-50),
+        lighter: var(--color-blue-100),
+        light: var(--color-blue-200),
+        default: var(--color-blue-500),
+        dark: var(--color-blue-600),
+        darker: var(--color-blue-700),
+        darkest: var(--color-blue-800),
+      ),
+    secondary: (
+      lightest: var(--color-blue-50),
+      lighter: var(--color-blue-100),
+      light: var(--color-blue-200),
+      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-200),
+      default: var(--color-cyan-500),
+      dark: var(--color-cyan-600),
+      darker: var(--color-cyan-700),
+      darkest: var(--color-cyan-800),
+    ),
+    success: (
+      lightest: var(--color-lime-50),
+      lighter: var(--color-lime-100),
+      light: var(--color-lime-200),
+      default: var(--color-lime-500),
+      dark: var(--color-lime-600),
+      darker: var(--color-lime-700),
+      darkest: var(--color-lime-800),
+    ),
+    warning: (
+      lightest: var(--color-orange-50),
+      lighter: var(--color-orange-100),
+      light: var(--color-orange-200),
+      default: var(--color-orange-500),
+      dark: var(--color-orange-600),
+      darker: var(--color-orange-700),
+      darkest: var(--color-orange-800),
+    ),
+    danger: (
+      lightest: var(--color-red-50),
+      lighter: var(--color-red-100),
+      light: var(--color-red-200),
+      default: var(--color-red-500),
+      dark: var(--color-red-600),
+      darker: var(--color-red-700),
+      darkest: var(--color-red-800),
+    ),
   ),
   trans: (
     darkest: rgba(0, 0, 0, 0.5),
@@ -107,7 +126,15 @@ $vars: (
     0: 0,
     auto: "auto",
   ),
-  border-color: colors.variants(colors.get(zinc, 400)),
+  border-color: (
+    lightest: var(--color-zinc-100),
+    lighter: var(--color-zinc-200),
+    light: var(--color-zinc-300),
+    default: var(--color-zinc-400),
+    dark: var(--color-zinc-500),
+    darker: var(--color-zinc-600),
+    darkest: var(--color-zinc-700),
+  ),
   border-radius: (
     xs: var(--gap-xxs),
     sm: var(--gap-xs),

package/scss/themes/_variables-blueprint.scss

@@ -1,95 +1,99 @@
-@use "sass:map";
-@use "sass:color";
-@use "../commons/colors";
-
-$paper: (
-  theme: (
-    "gray": (
-      lightest: colors.get(zinc, 50),
-      lighter: colors.get(zinc, 100),
-      light: colors.get(zinc, 300),
-      default: colors.get(zinc, 500),
-      dark: colors.get(zinc, 600),
-      darker: colors.get(zinc, 700),
-      darkest: colors.get(zinc, 800)
-    ),
-    blue-gray: (
-      lightest: colors.get(slate, 50),
-      lighter: colors.get(slate, 100),
-      light: colors.get(slate, 300),
-      default: colors.get(slate, 500),
-      dark: colors.get(slate, 600),
-      darker: colors.get(slate, 700),
-      darkest: colors.get(slate, 800)
-    ),
-    primary: (
-      lightest: colors.get(blue, 100),
-      lighter: colors.get(blue, 300),
-      light: colors.get(blue, 500),
-      default: colors.get(blue, 900),
-      dark: colors.get(blue, 950),
-      darker: colors.get(blue, 950),
-      darkest: colors.get(blue, 950)
-    ),
-    secondary: (
-      lightest: colors.get(blue, 50),
-      lighter: colors.get(blue, 100),
-      light: colors.get(blue, 300),
-      default: colors.get(blue, 500),
-      dark: colors.get(blue, 600),
-      darker: colors.get(blue, 700),
-      darkest: colors.get(blue, 800)
-    ),
-    info: (
-      lightest: colors.get(cyan, 50),
-      lighter: colors.get(cyan, 100),
-      light: colors.get(cyan, 300),
-      default: colors.get(cyan, 500),
-      dark: colors.get(cyan, 600),
-      darker: colors.get(cyan, 700),
-      darkest: colors.get(cyan, 800)
-    ),
-    success: (
-      lightest: colors.get(green, 50),
-      lighter: colors.get(green, 100),
-      light: colors.get(green, 300),
-      default: colors.get(green, 500),
-      dark: colors.get(green, 600),
-      darker: colors.get(green, 700),
-      darkest: colors.get(green, 800)
-    ),
-    warning: (
-      lightest: colors.get(orange, 100),
-      lighter: colors.get(orange, 200),
-      light: colors.get(orange, 300),
-      default: colors.get(orange, 400),
-      dark: colors.get(orange, 600),
-      darker: colors.get(orange, 700),
-      darkest: colors.get(orange, 800)
-    ),
-    danger: (
-      lightest: colors.get(red, 50),
-      lighter: colors.get(red, 100),
-      light: colors.get(red, 200),
-      default: colors.get(red, 400),
-      dark: colors.get(red, 600),
-      darker: colors.get(red, 700),
-      darkest: colors.get(red, 800)
-    )
-  ),
-  background-color: var(--theme-gray-lightest),
-  control-color: white,
-  border-radius: (
-    xs: 0,
-    sm: 0,
-    default: 0,
-    lg: 0,
-    xl: 0,
-    xxl: 0,
-  ),
-  elevation-blur-mult: 0,
-  sheet: (
-    bg: var(--theme-gray-lightest),
-  ),
-  border-color: colors.variants(colors.get(zinc, 500)),
-);
+$paper: (
+  theme: (
+    "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),
+    ),
+    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),
+    ),
+    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),
+    ),
+    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),
+    ),
+    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),
+    ),
+    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),
+    ),
+  ),
+  background-color: var(--theme-gray-lightest),
+  control-color: white,
+  border-radius: (
+    xs: 0,
+    sm: 0,
+    default: 0,
+    lg: 0,
+    xl: 0,
+    xxl: 0,
+  ),
+  elevation-blur-mult: 0,
+  sheet: (
+    bg: var(--theme-gray-lightest),
+  ),
+  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),
+  ),
+);

package/src/core/provideSdAngular.ts

@@ -53,20 +53,6 @@ export function provideSdAngular(opt: { clientName: string }): EnvironmentProvid
       const sdTheme = inject(SdThemeProvider);
       const sdLocalStorage = inject(SdLocalStorageProvider);
 
-      const savedDark = sdLocalStorage.get("sd-theme-dark");
-      if (savedDark != null) {
-        sdTheme.dark.set(savedDark);
-      }
-
-      let prevDark = sdTheme.dark();
-      effect(() => {
-        const dark = sdTheme.dark();
-        if (dark !== prevDark) {
-          sdLocalStorage.set("sd-theme-dark", dark);
-          prevDark = dark;
-        }
-      });
-
       const savedBlueprint = sdLocalStorage.get("sd-theme-blueprint");
       if (savedBlueprint != null) {
         sdTheme.blueprint.set(savedBlueprint);

package/src/features/theme/sd-theme-provider.ts

@@ -3,9 +3,7 @@ import { isPlatformBrowser } from "@angular/common";
 
 @Injectable({ providedIn: "root" })
 export class SdThemeProvider {
-  dark = signal<boolean>(false);
-
-  // 블루프린트(엔지니어링 도면) 테마 — dark 토글과 직교. dark 와 조합해 4면을 만든다.
+  // 블루프린트(엔지니어링 도면) 테마
   blueprint = signal<boolean>(false);
 
   readonly fontSizePresets: readonly number[] = [12, 14, 16, 20, 24, 28];
@@ -16,10 +14,6 @@ export class SdThemeProvider {
     // SSR(프리렌더) 가드: document 반영은 브라우저 전용
     if (!isPlatformBrowser(inject(PLATFORM_ID))) return;
 
-    effect(() => {
-      document.body.classList.toggle("sd-theme-dark", this.dark());
-    });
-
     effect(() => {
       document.body.classList.toggle("sd-theme-blueprint", this.blueprint());
     });

package/src/features/theme/sd-theme-selector.ts

@@ -1,81 +1,77 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
-import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
-import { SdButton } from "../../controls/button/sd-button";
-import { SdSwitch } from "../../controls/checkbox/sd-switch";
-import { NgIcon } from "@ng-icons/core";
-import { SdThemeProvider } from "./sd-theme-provider";
-import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
-
-@Component({
-  selector: "sd-theme-selector",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon],
-  template: `
-    <sd-dropdown>
-      <sd-button [inline]="true" [theme]="'link-gray'">
-        <ng-icon [svg]="tablerPalette" />
-      </sd-button>
-      <sd-dropdown-popup>
-        <div class="p-default">
-          <div class="flex-row gap-sm cross-align-center">
-            <span>글자 크기</span>
-            <div class="flex-row gap-xs cross-align-center">
-              <sd-button
-                [inline]="true"
-                [theme]="'link-gray'"
-                [size]="'sm'"
-                [disabled]="isMinFontSize()"
-                (click)="_sdTheme.decreaseFontSize()"
-              >
-                <ng-icon [svg]="tablerMinus" />
-              </sd-button>
-              <span>{{ _sdTheme.fontSize() }}px</span>
-              <sd-button
-                [inline]="true"
-                [theme]="'link-gray'"
-                [size]="'sm'"
-                [disabled]="isMaxFontSize()"
-                (click)="_sdTheme.increaseFontSize()"
-              >
-                <ng-icon [svg]="tablerPlus" />
-              </sd-button>
-            </div>
-          </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>다크 모드</span>
-            <sd-switch [(value)]="_sdTheme.dark" />
-          </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>블루프린트</span>
-            <sd-switch [(value)]="_sdTheme.blueprint" />
-          </div>
-        </div>
-      </sd-dropdown-popup>
-    </sd-dropdown>
-  `,
-  styles: [],
-})
-export class SdThemeSelector {
-  protected readonly _sdTheme = inject(SdThemeProvider);
-
-  isMinFontSize = computed(() => this._sdTheme.fontSize() <= this._sdTheme.fontSizePresets[0]);
-
-  isMaxFontSize = computed(
-    () =>
-      this._sdTheme.fontSize() >=
-      this._sdTheme.fontSizePresets[this._sdTheme.fontSizePresets.length - 1],
-  );
-
-  protected readonly tablerPlus = tablerPlus;
-  protected readonly tablerMinus = tablerMinus;
-  protected readonly tablerPalette = tablerPalette;
-}
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
+import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdSwitch } from "../../controls/checkbox/sd-switch";
+import { NgIcon } from "@ng-icons/core";
+import { SdThemeProvider } from "./sd-theme-provider";
+import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-theme-selector",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon],
+  template: `
+    <sd-dropdown>
+      <sd-button [inline]="true" [theme]="'link-gray'">
+        <ng-icon [svg]="tablerPalette" />
+      </sd-button>
+      <sd-dropdown-popup>
+        <div class="p-default">
+          <div class="flex-row gap-sm cross-align-center">
+            <span>글자 크기</span>
+            <div class="flex-row gap-xs cross-align-center">
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMinFontSize()"
+                (click)="_sdTheme.decreaseFontSize()"
+              >
+                <ng-icon [svg]="tablerMinus" />
+              </sd-button>
+              <span>{{ _sdTheme.fontSize() }}px</span>
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMaxFontSize()"
+                (click)="_sdTheme.increaseFontSize()"
+              >
+                <ng-icon [svg]="tablerPlus" />
+              </sd-button>
+            </div>
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>블루프린트</span>
+            <sd-switch [(value)]="_sdTheme.blueprint" />
+          </div>
+        </div>
+      </sd-dropdown-popup>
+    </sd-dropdown>
+  `,
+  styles: [],
+})
+export class SdThemeSelector {
+  protected readonly _sdTheme = inject(SdThemeProvider);
+
+  isMinFontSize = computed(() => this._sdTheme.fontSize() <= this._sdTheme.fontSizePresets[0]);
+
+  isMaxFontSize = computed(
+    () =>
+      this._sdTheme.fontSize() >=
+      this._sdTheme.fontSizePresets[this._sdTheme.fontSizePresets.length - 1],
+  );
+
+  protected readonly tablerPlus = tablerPlus;
+  protected readonly tablerMinus = tablerMinus;
+  protected readonly tablerPalette = tablerPalette;
+}

package/src/layout/sidebar/sd-sidebar.ts

@@ -34,7 +34,7 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
         height: 100%;
         //background: var(--control-color);
         //background: var(--theme-gray-lightest);
-        //border-right: 1px solid var(--border-color-lighter);
+        border-right: 1px solid var(--border-color-lighter);
 
         @media not all and (max-width: variables.$breakpoint-mobile) {
           transition: transform var(--animation-duration) ease-out;