@simplysm/angular 14.1.20 → 14.2.1

package/src/features/editor/sd-tiptap-editor.ts

@@ -46,56 +46,148 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
     @if (!disabled()) {
       <div class="_toolbar">
         <div class="_btn-group">
-          <button type="button" data-cmd="h1" [class._active]="activeStates().h1"
-                  (click)="execCmd('h1')">H1</button>
-          <button type="button" data-cmd="h2" [class._active]="activeStates().h2"
-                  (click)="execCmd('h2')">H2</button>
+          <button
+            type="button"
+            data-cmd="h1"
+            [class._active]="activeStates().h1"
+            (click)="execCmd('h1')"
+          >
+            H1
+          </button>
+          <button
+            type="button"
+            data-cmd="h2"
+            [class._active]="activeStates().h2"
+            (click)="execCmd('h2')"
+          >
+            H2
+          </button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="bold" [class._active]="activeStates().bold"
-                  (click)="execCmd('bold')">B</button>
-          <button type="button" data-cmd="italic" [class._active]="activeStates().italic"
-                  (click)="execCmd('italic')">I</button>
-          <button type="button" data-cmd="underline" [class._active]="activeStates().underline"
-                  (click)="execCmd('underline')">U</button>
-          <button type="button" data-cmd="strike" [class._active]="activeStates().strike"
-                  (click)="execCmd('strike')">S</button>
+          <button
+            type="button"
+            data-cmd="bold"
+            [class._active]="activeStates().bold"
+            (click)="execCmd('bold')"
+          >
+            B
+          </button>
+          <button
+            type="button"
+            data-cmd="italic"
+            [class._active]="activeStates().italic"
+            (click)="execCmd('italic')"
+          >
+            I
+          </button>
+          <button
+            type="button"
+            data-cmd="underline"
+            [class._active]="activeStates().underline"
+            (click)="execCmd('underline')"
+          >
+            U
+          </button>
+          <button
+            type="button"
+            data-cmd="strike"
+            [class._active]="activeStates().strike"
+            (click)="execCmd('strike')"
+          >
+            S
+          </button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="textColor" class="_color-btn"
-                  (click)="toggleColorPicker('text')">
+          <button
+            type="button"
+            data-cmd="textColor"
+            class="_color-btn"
+            (click)="toggleColorPicker('text')"
+          >
             <span class="_color-indicator" [style.background-color]="activeColor()"></span>
             A
           </button>
-          <button type="button" data-cmd="bgColor" class="_color-btn"
-                  (click)="toggleColorPicker('bg')">
+          <button
+            type="button"
+            data-cmd="bgColor"
+            class="_color-btn"
+            (click)="toggleColorPicker('bg')"
+          >
             <span class="_color-indicator" [style.background-color]="activeBgColor()"></span>
             BG
           </button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="bulletList" [class._active]="activeStates().bulletList"
-                  (click)="execCmd('bulletList')">UL</button>
-          <button type="button" data-cmd="orderedList" [class._active]="activeStates().orderedList"
-                  (click)="execCmd('orderedList')">OL</button>
+          <button
+            type="button"
+            data-cmd="bulletList"
+            [class._active]="activeStates().bulletList"
+            (click)="execCmd('bulletList')"
+          >
+            UL
+          </button>
+          <button
+            type="button"
+            data-cmd="orderedList"
+            [class._active]="activeStates().orderedList"
+            (click)="execCmd('orderedList')"
+          >
+            OL
+          </button>
           <button type="button" data-cmd="indent" (click)="execCmd('indent')">→</button>
           <button type="button" data-cmd="outdent" (click)="execCmd('outdent')">←</button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="blockquote" [class._active]="activeStates().blockquote"
-                  (click)="execCmd('blockquote')">❝</button>
-          <button type="button" data-cmd="codeBlock" [class._active]="activeStates().codeBlock"
-                  (click)="execCmd('codeBlock')">&lt;/&gt;</button>
+          <button
+            type="button"
+            data-cmd="blockquote"
+            [class._active]="activeStates().blockquote"
+            (click)="execCmd('blockquote')"
+          >
+            ❝
+          </button>
+          <button
+            type="button"
+            data-cmd="codeBlock"
+            [class._active]="activeStates().codeBlock"
+            (click)="execCmd('codeBlock')"
+          >
+            &lt;/&gt;
+          </button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="alignLeft" [class._active]="activeStates().alignLeft"
-                  (click)="execCmd('alignLeft')">≡L</button>
-          <button type="button" data-cmd="alignCenter" [class._active]="activeStates().alignCenter"
-                  (click)="execCmd('alignCenter')">≡C</button>
-          <button type="button" data-cmd="alignRight" [class._active]="activeStates().alignRight"
-                  (click)="execCmd('alignRight')">≡R</button>
-          <button type="button" data-cmd="alignJustify" [class._active]="activeStates().alignJustify"
-                  (click)="execCmd('alignJustify')">≡J</button>
+          <button
+            type="button"
+            data-cmd="alignLeft"
+            [class._active]="activeStates().alignLeft"
+            (click)="execCmd('alignLeft')"
+          >
+            ≡L
+          </button>
+          <button
+            type="button"
+            data-cmd="alignCenter"
+            [class._active]="activeStates().alignCenter"
+            (click)="execCmd('alignCenter')"
+          >
+            ≡C
+          </button>
+          <button
+            type="button"
+            data-cmd="alignRight"
+            [class._active]="activeStates().alignRight"
+            (click)="execCmd('alignRight')"
+          >
+            ≡R
+          </button>
+          <button
+            type="button"
+            data-cmd="alignJustify"
+            [class._active]="activeStates().alignJustify"
+            (click)="execCmd('alignJustify')"
+          >
+            ≡J
+          </button>
         </div>
         <div class="_btn-group">
           <button type="button" data-cmd="clean" (click)="execCmd('clean')">Tx</button>
@@ -104,13 +196,17 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
       @if (colorPickerMode() != undefined) {
         <div class="_color-picker">
           @for (color of colorPresets; track color) {
-            <button type="button" class="_color-swatch"
-                    [style.background-color]="color"
-                    [attr.aria-label]="color"
-                    (click)="applyColor(color)"></button>
+            <button
+              type="button"
+              class="_color-swatch"
+              [style.background-color]="color"
+              [attr.aria-label]="color"
+              (click)="applyColor(color)"
+            ></button>
           }
-          <button type="button" class="_color-swatch _no-color"
-                  (click)="applyColor(undefined)">✕</button>
+          <button type="button" class="_color-swatch _no-color" (click)="applyColor(undefined)">
+            ✕
+          </button>
         </div>
       }
     }
@@ -121,41 +217,41 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
       sd-tiptap-editor {
         display: block;
         position: relative;
-        border: 1px solid var(--trans-lighter);
-        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);
 
         > ._toolbar {
           display: flex;
           flex-wrap: wrap;
-          gap: var(--gap-xs);
-          padding: var(--gap-xs);
-          border-bottom: 1px solid var(--trans-lighter);
+          gap: var(--sd-gap-xs);
+          padding: var(--sd-gap-xs);
+          border-bottom: 1px solid var(--sd-bd-hairline);
 
           > ._btn-group {
             display: flex;
             gap: 1px;
 
             > button {
-              padding: var(--gap-xs) var(--gap-sm);
-              border: 1px solid var(--trans-lighter);
-              border-radius: var(--border-radius-default);
-              background: transparent;
+              padding: var(--sd-gap-xs) var(--sd-gap-sm);
+              border: 1px solid var(--sd-bd-hairline);
+              border-radius: var(--sd-radius-default);
+              background-color: transparent;
               cursor: pointer;
-              font-size: var(--font-size-default);
+              font-size: var(--sd-font-size-default);
               line-height: 1;
 
               &._active {
-                background: var(--theme-primary-default);
-                color: var(--text-trans-rev-default);
+                background-color: var(--sd-bg-primary-solid);
+                color: var(--sd-tx-primary-solid);
               }
 
               &:hover {
-                background: var(--trans-lighter);
+                background-color: var(--sd-bg-state-hover);
               }
 
               &._active:hover {
-                background: var(--theme-primary-default);
+                background-color: var(--sd-bg-primary-solid);
               }
             }
           }
@@ -165,13 +261,13 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
           display: flex;
           flex-wrap: wrap;
           gap: 2px;
-          padding: var(--gap-xs);
-          border-bottom: 1px solid var(--trans-lighter);
+          padding: var(--sd-gap-xs);
+          border-bottom: 1px solid var(--sd-bd-hairline);
 
           > ._color-swatch {
             width: 1.25rem;
             height: 1.25rem;
-            border: 1px solid var(--trans-lighter);
+            border: 1px solid var(--sd-bd-hairline);
             border-radius: 2px;
             cursor: pointer;
             padding: 0;
@@ -180,16 +276,16 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
               display: flex;
               align-items: center;
               justify-content: center;
-              background: var(--control-color);
+              background-color: var(--sd-bg-control);
               font-size: 0.625rem;
             }
           }
         }
 
         > ._editor-container {
-          padding: var(--gap-sm);
+          padding: var(--sd-gap-sm);
           min-height: 6.25rem;
-          font-family: var(--font-family-field);
+          font-family: var(--sd-font-family-field);
 
           > .tiptap {
             outline: none;
@@ -200,9 +296,10 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
           }
         }
 
+        // disabled 는 색 치환 단일 규약 (DEC-009)
         &[data-sd-disabled="true"] {
-          background: var(--theme-gray-lightest);
-          color: var(--text-trans-light);
+          background-color: var(--sd-bg-disabled);
+          color: var(--sd-tx-disabled);
 
           > ._editor-container > .tiptap {
             cursor: not-allowed;
@@ -248,11 +345,46 @@ export class SdTiptapEditor {
   private readonly _destroyRef = inject(DestroyRef);
 
   readonly colorPresets = [
-    "#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef",
-    "#f3f3f3", "#ffffff", "#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff",
-    "#4a86e8", "#0000ff", "#9900ff", "#ff00ff", "#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc",
-    "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc", "#dd7e6b", "#ea9999",
-    "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd",
+    "#000000",
+    "#434343",
+    "#666666",
+    "#999999",
+    "#b7b7b7",
+    "#cccccc",
+    "#d9d9d9",
+    "#efefef",
+    "#f3f3f3",
+    "#ffffff",
+    "#980000",
+    "#ff0000",
+    "#ff9900",
+    "#ffff00",
+    "#00ff00",
+    "#00ffff",
+    "#4a86e8",
+    "#0000ff",
+    "#9900ff",
+    "#ff00ff",
+    "#e6b8af",
+    "#f4cccc",
+    "#fce5cd",
+    "#fff2cc",
+    "#d9ead3",
+    "#d0e0e3",
+    "#c9daf8",
+    "#cfe2f3",
+    "#d9d2e9",
+    "#ead1dc",
+    "#dd7e6b",
+    "#ea9999",
+    "#f9cb9c",
+    "#ffe599",
+    "#b6d7a8",
+    "#a2c4c9",
+    "#a4c2f4",
+    "#9fc5e8",
+    "#b4a7d6",
+    "#d5a6bd",
   ];
 
   /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
@@ -344,20 +476,22 @@ export class SdTiptapEditor {
     const container = this._elRef.nativeElement.querySelector("._editor-container");
     if (container == null) return;
 
-    this.editor.set(new Editor({
-      element: container,
-      extensions,
-      content: initialContent ?? "",
-      editable: untracked(() => !this.disabled() && !this.readonly()),
-      onUpdate: ({ editor }) => {
-        const html = this._getEditorHtmlFrom(editor);
-        this._lastEditorHtml = html;
-        this.value.set(html);
-      },
-      onTransaction: () => {
-        this._toolbar.refreshActiveStates();
-      },
-    }));
+    this.editor.set(
+      new Editor({
+        element: container,
+        extensions,
+        content: initialContent ?? "",
+        editable: untracked(() => !this.disabled() && !this.readonly()),
+        onUpdate: ({ editor }) => {
+          const html = this._getEditorHtmlFrom(editor);
+          this._lastEditorHtml = html;
+          this.value.set(html);
+        },
+        onTransaction: () => {
+          this._toolbar.refreshActiveStates();
+        },
+      }),
+    );
   }
 
   private _destroyEditor(): void {
@@ -374,5 +508,4 @@ export class SdTiptapEditor {
     if (editor.isEmpty) return undefined;
     return html;
   }
-
 }

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

@@ -1,10 +1,28 @@
 import { effect, inject, Injectable, PLATFORM_ID, signal } from "@angular/core";
 import { isPlatformBrowser } from "@angular/common";
 
+// 내장 테마 단일 정의 — 새 테마 추가 시 여기 항목 1줄 +
+// scss/themes 값 맵 + _theme-variables 의 .sd-theme-{value} writeVars 블록만 추가하면 된다.
+// light 는 :root 기본값이라 값 맵/블록이 없어도 동작한다(클래스가 붙어도 규칙이 없어 무효).
+export const SD_THEMES = [
+  { value: "light", label: "라이트" },
+  { value: "blueprint", label: "블루프린트" },
+  { value: "ide-dark", label: "IDE 다크" },
+] as const;
+
+export type SdThemeName = (typeof SD_THEMES)[number]["value"];
+
+// 밀도 축 — 테마와 직교(DEC-007). compact 는 치수 토큰 그룹(sd-density-compact)만 덮는다.
+export type SdDensity = "normal" | "compact";
+
 @Injectable({ providedIn: "root" })
 export class SdThemeProvider {
-  // 블루프린트(엔지니어링 도면) 테마
-  blueprint = signal<boolean>(false);
+  readonly themes: readonly { value: SdThemeName; label: string }[] = SD_THEMES;
+
+  // 라이트(기본) / 블루프린트(도면) / IDE 다크
+  theme = signal<SdThemeName>("light");
+
+  density = signal<SdDensity>("normal");
 
   readonly fontSizePresets: readonly number[] = [12, 14, 16, 20, 24, 28];
 
@@ -15,7 +33,14 @@ export class SdThemeProvider {
     if (!isPlatformBrowser(inject(PLATFORM_ID))) return;
 
     effect(() => {
-      document.body.classList.toggle("sd-theme-blueprint", this.blueprint());
+      const theme = this.theme();
+      for (const def of this.themes) {
+        document.body.classList.toggle(`sd-theme-${def.value}`, def.value === theme);
+      }
+    });
+
+    effect(() => {
+      document.body.classList.toggle("sd-density-compact", this.density() === "compact");
     });
 
     effect(() => {

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

@@ -51,8 +51,27 @@ import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
             </div>
           </div>
           <div class="flex-row gap-sm cross-align-center">
-            <span>블루프린트</span>
-            <sd-switch [(value)]="_sdTheme.blueprint" />
+            <span>테마</span>
+            <div class="flex-row gap-xs cross-align-center">
+              @for (item of _sdTheme.themes; track item.value) {
+                <sd-button
+                  [inline]="true"
+                  [size]="'sm'"
+                  [theme]="_sdTheme.theme() === item.value ? 'primary' : 'link-gray'"
+                  (click)="_sdTheme.theme.set(item.value)"
+                >
+                  {{ item.label }}
+                </sd-button>
+              }
+            </div>
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>compact</span>
+            <sd-switch
+              [inline]="true"
+              [value]="_sdTheme.density() === 'compact'"
+              (valueChange)="_sdTheme.density.set($event ? 'compact' : 'normal')"
+            />
           </div>
         </div>
       </sd-dropdown-popup>

package/src/features/theme/wcag-contrast.ts

@@ -0,0 +1,103 @@
+// WCAG 2.x 대비율 계산 (DEC-012) — 테마(커스텀 테마 포함) 핵심 fg/bg 쌍 검증용.
+// 알파 색은 배경 표면에 합성 후 계산한다.
+
+interface RgbaColor {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+function parseCssColor(colorText: string): RgbaColor {
+  const trimmed = colorText.trim().toLowerCase();
+
+  if (trimmed === "white") return { r: 255, g: 255, b: 255, a: 1 };
+  if (trimmed === "black") return { r: 0, g: 0, b: 0, a: 1 };
+  if (trimmed === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
+
+  const hexMatch = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(trimmed);
+  if (hexMatch) {
+    const hex = hexMatch[1];
+    if (hex.length === 3) {
+      return {
+        r: parseInt(hex[0] + hex[0], 16),
+        g: parseInt(hex[1] + hex[1], 16),
+        b: parseInt(hex[2] + hex[2], 16),
+        a: 1,
+      };
+    }
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1,
+    };
+  }
+
+  const rgbMatch =
+    /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/.exec(trimmed);
+  if (rgbMatch) {
+    // 알파 캡처 그룹은 미매치 시 런타임에 undefined (exec 타입은 string 으로 나옴)
+    const alphaText = rgbMatch[4] as string | undefined;
+    return {
+      r: Number(rgbMatch[1]),
+      g: Number(rgbMatch[2]),
+      b: Number(rgbMatch[3]),
+      a: alphaText != null ? Number(alphaText) : 1,
+    };
+  }
+
+  throw new Error(`WCAG 대비 계산: 색상을 해석할 수 없습니다: "${colorText}"`);
+}
+
+function composite(fg: RgbaColor, bg: RgbaColor): RgbaColor {
+  const a = fg.a + bg.a * (1 - fg.a);
+  if (a === 0) return { r: 0, g: 0, b: 0, a: 0 };
+  return {
+    r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / a,
+    g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / a,
+    b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / a,
+    a,
+  };
+}
+
+function getRelativeLuminance(color: RgbaColor): number {
+  const [r, g, b] = [color.r, color.g, color.b].map((v) => {
+    const srgb = v / 255;
+    return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * WCAG 2.x 대비율 (1-21).
+ *
+ * @param foregroundColor 전경색(텍스트 등). 알파면 배경 위에 합성 후 계산.
+ * @param backgroundColor 배경색. 알파면 `baseColor` 위에 합성(불투명 배경이면 불필요).
+ * @param baseColor 반투명 배경 아래의 최종 불투명 표면색.
+ */
+export function getWcagContrastRatio(
+  foregroundColor: string,
+  backgroundColor: string,
+  baseColor?: string,
+): number {
+  let bg = parseCssColor(backgroundColor);
+  if (bg.a < 1) {
+    if (baseColor == null) {
+      throw new Error(
+        `WCAG 대비 계산: 반투명 배경("${backgroundColor}")은 base 표면색이 필요합니다`,
+      );
+    }
+    const base = parseCssColor(baseColor);
+    if (base.a < 1) {
+      throw new Error(`WCAG 대비 계산: base 표면색("${baseColor}")은 불투명해야 합니다`);
+    }
+    bg = composite(bg, base);
+  }
+
+  const fg = composite(parseCssColor(foregroundColor), bg);
+
+  const l1 = getRelativeLuminance(fg);
+  const l2 = getRelativeLuminance(bg);
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}

package/src/features/visual/sd-calendar.ts

@@ -85,18 +85,18 @@ import { NgTemplateOutlet } from "@angular/common";
           border-collapse: collapse;
           width: 100%;
           height: 100%;
-          border-radius: var(--border-radius-default);
+          border-radius: var(--sd-radius-default);
           overflow: hidden;
 
           > * > tr > * {
-            padding: var(--gap-sm) var(--gap-default);
-            border: 1px solid var(--theme-gray-light);
+            padding: var(--sd-gap-sm) var(--sd-gap-default);
+            border: 1px solid var(--sd-bd-default);
 
             width: calc(100% / 7);
           }
 
           > thead > tr > th {
-            background: var(--theme-gray-lighter);
+            background-color: var(--sd-bg-gray-subtle);
             height: 10%;
           }
 
@@ -105,14 +105,14 @@ import { NgTemplateOutlet } from "@angular/common";
             height: 15%;
 
             > .day {
-              margin-bottom: var(--gap-sm);
+              margin-bottom: var(--sd-gap-sm);
             }
 
             &.not-current {
-              background: var(--theme-gray-lightest);
+              background-color: var(--sd-bg-canvas);
 
               > .day {
-                color: var(--theme-gray-default);
+                color: var(--sd-tx-gray);
               }
             }
 
@@ -120,7 +120,7 @@ import { NgTemplateOutlet } from "@angular/common";
               display: flex;
               flex-wrap: nowrap;
 
-              @include mixins.flex-direction(column, var(--gap-sm));
+              @include mixins.flex-direction(column, var(--sd-gap-sm));
             }
           }
         }