@simplysm/angular 14.1.20 → 14.2.1

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

@@ -14,7 +14,7 @@ import {
   imports: [],
   host: {
     "[attr.data-sd-theme]": "theme()",
-    "[style.background]": "color()",
+    "[style.background-color]": "color()",
     "[attr.data-sd-clickable]": "clickable()",
   },
   template: `
@@ -22,21 +22,20 @@ import {
   `,
   styles: [
     /* language=SCSS */ `
-      @use "sass:map";
-
       @use "../../../scss/commons/variables";
 
       sd-label {
         display: inline-block;
-        background: var(--theme-gray-darker);
-        color: var(--text-trans-rev-default);
-        padding: 0 var(--gap-sm);
-        border-radius: var(--border-radius-default);
+        background-color: var(--sd-bg-gray-solid);
+        color: var(--sd-tx-gray-solid);
+        padding: 0 var(--sd-gap-sm);
+        border-radius: var(--sd-radius-default);
         text-indent: 0;
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="#{$key}"] {
-            background: var(--theme-#{$key}-default);
+            background-color: var(--sd-bg-#{$key}-solid);
+            color: var(--sd-tx-#{$key}-solid);
           }
         }
 
@@ -44,11 +43,11 @@ import {
           cursor: pointer;
 
           &:hover {
-            background: var(--theme-gray-dark);
+            background-color: var(--sd-bg-gray-solid-hover);
 
-            @each $key, $val in map.get(variables.$vars, theme) {
+            @each $key in variables.$theme-keys {
               &[data-sd-theme="#{$key}"] {
-                background: var(--theme-#{$key}-dark);
+                background-color: var(--sd-bg-#{$key}-solid-hover);
               }
             }
           }

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

@@ -22,32 +22,31 @@ import {
   `,
   styles: [
     /* language=SCSS */ `
-      @use "sass:map";
-
       @use "../../../scss/commons/variables";
 
       sd-note {
         display: block;
-        padding: var(--gap-sm) var(--gap-default);
-        background: var(--theme-gray-lightest);
+        padding: var(--sd-gap-sm) var(--sd-gap-default);
+        background-color: var(--sd-bg-gray-subtle);
 
         border: none;
-        border-radius: var(--border-radius-default);
+        border-radius: var(--sd-radius-default);
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="#{$key}"] {
-            background: var(--theme-#{$key}-lightest);
-            border: 1px solid var(--theme-#{$key}-lightest);
+            background-color: var(--sd-bg-#{$key}-subtle);
+            // 보더는 배경과 동일 톤(라이트에선 비가시, 테마의 subtle 값을 그대로 추종)
+            border: 1px solid var(--sd-bg-#{$key}-subtle);
           }
         }
 
         &[data-sd-size="sm"] {
-          font-size: var(--font-size-sm);
-          padding: var(--gap-xs) var(--gap-sm);
+          font-size: var(--sd-font-size-sm);
+          padding: var(--sd-gap-xs) var(--sd-gap-sm);
         }
 
         &[data-sd-size="lg"] {
-          padding: var(--gap-default) var(--gap-lg);
+          padding: var(--sd-gap-default) var(--sd-gap-lg);
         }
 
         &[data-sd-inset="true"] {

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

@@ -27,8 +27,6 @@ import { PercentPipe } from "@angular/common";
   `,
   styles: [
     /* language=SCSS */ `
-      @use "sass:map";
-
       @use "../../../scss/commons/variables";
 
       sd-progress {
@@ -36,15 +34,15 @@ import { PercentPipe } from "@angular/common";
         display: block;
         width: 100%;
         white-space: nowrap;
-        background: var(--theme-gray-lightest);
-        border: 1px solid var(--theme-gray-lightest);
-        border-radius: var(--border-radius-default);
+        background-color: var(--sd-bg-gray-subtle);
+        border: 1px solid var(--sd-bd-hairline);
+        border-radius: var(--sd-radius-default);
         overflow: hidden;
 
         > ._content {
           position: relative;
           z-index: 2;
-          padding: var(--gap-lg) var(--gap-default);
+          padding: var(--sd-gap-lg) var(--sd-gap-default);
         }
 
         > ._progress {
@@ -55,24 +53,24 @@ import { PercentPipe } from "@angular/common";
           height: 100%;
         }
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="#{$key}"] > ._progress {
-            background: var(--theme-#{$key}-default);
+            background-color: var(--sd-bg-#{$key}-solid);
           }
         }
 
         &[data-sd-size="sm"] > ._content {
-          padding: var(--gap-xs) var(--gap-default);
+          padding: var(--sd-gap-xs) var(--sd-gap-default);
         }
 
         &[data-sd-size="lg"] > ._content {
-          padding: var(--gap-default) var(--gap-xl);
+          padding: var(--sd-gap-default) var(--sd-gap-xl);
         }
 
         &[data-sd-inset="true"] {
           border-radius: 0;
           border: none;
-          background: var(--control-color);
+          background-color: var(--sd-bg-control);
         }
       }
     `,

package/src/index.ts

@@ -17,10 +17,7 @@ export type {
 // core/events
 export { SdOptionEventPlugin } from "./core/events/sd-option-event.plugin";
 export { SdResizeDirective, type SdResizeEvent } from "./core/events/sd-resize";
-export {
-  SdIntersectionDirective,
-  type SdIntersectionEvent,
-} from "./core/events/sd-intersection";
+export { SdIntersectionDirective, type SdIntersectionEvent } from "./core/events/sd-intersection";
 export { SdEvents } from "./core/events/sd-events";
 
 // core/commands
@@ -71,11 +68,7 @@ export {
   injectPermsSignal,
 } from "./core/app-structure/sd-app-structure.provider";
 export { SdAppStructureUtils } from "./core/app-structure/sd-app-structure.utils";
-export type {
-  SdMenu,
-  SdFlatMenu,
-  SdPermission,
-} from "./core/app-structure/sd-app-structure.types";
+export type { SdMenu, SdFlatMenu, SdPermission } from "./core/app-structure/sd-app-structure.types";
 
 // core/file-dialog
 export { SdFileDialogProvider } from "./core/file-dialog/sd-file-dialog.provider";
@@ -93,10 +86,7 @@ export {
 } from "./core/shared-data/sd-shared-data.provider";
 
 // core/selection
-export {
-  useExpandingManager,
-  type ExpandItemDef,
-} from "./core/selection/useExpandingManager";
+export { useExpandingManager, type ExpandItemDef } from "./core/selection/useExpandingManager";
 export { useSelectionManager } from "./core/selection/useSelectionManager";
 export { useSortingManager, type SortingDef } from "./core/selection/useSortingManager";
 
@@ -125,17 +115,10 @@ export {
 
 // core/busy
 export { SdBusyContainer } from "./core/busy/sd-busy-container";
-export {
-  SdBusyProvider,
-  type SdBusyType,
-} from "./core/busy/sd-busy.provider";
+export { SdBusyProvider, type SdBusyType } from "./core/busy/sd-busy.provider";
 
 // core/print
-export {
-  SdPrintProvider,
-  type SdPrint,
-  type SdPrintInput,
-} from "./core/print/sd-print.provider";
+export { SdPrintProvider, type SdPrint, type SdPrintInput } from "./core/print/sd-print.provider";
 
 // controls/button
 export { SdButton } from "./controls/button/sd-button";
@@ -149,7 +132,10 @@ export {
 
 // controls/input
 export { SdTextfield } from "./controls/input/sd-textfield";
-export { type SdTextfieldTypes, sdTextfieldTypes } from "./controls/input/sd-textfield-type-handlers";
+export {
+  type SdTextfieldTypes,
+  sdTextfieldTypes,
+} from "./controls/input/sd-textfield-type-handlers";
 export { SdTextarea } from "./controls/input/sd-textarea";
 export { SdNumpad } from "./controls/input/sd-numpad";
 export { SdRange } from "./controls/input/sd-range";
@@ -195,19 +181,13 @@ export { SdPagination } from "./controls/pagination/sd-pagination";
 export { SdSidebarContainer } from "./layout/sidebar/sd-sidebar-container";
 export { SdSidebar } from "./layout/sidebar/sd-sidebar";
 export { SdSidebarMenu } from "./layout/sidebar/sd-sidebar-menu";
-export {
-  SdSidebarUser,
-  type SdSidebarUserMenu,
-} from "./layout/sidebar/sd-sidebar-user";
+export { SdSidebarUser, type SdSidebarUserMenu } from "./layout/sidebar/sd-sidebar-user";
 
 // layout/topbar
 export { SdTopbarContainer } from "./layout/topbar/sd-topbar-container";
 export { SdTopbar } from "./layout/topbar/sd-topbar";
 export { SdTopbarMenu } from "./layout/topbar/sd-topbar-menu";
-export {
-  SdTopbarUser,
-  type SdTopbarUserMenu,
-} from "./layout/topbar/sd-topbar-user";
+export { SdTopbarUser, type SdTopbarUserMenu } from "./layout/topbar/sd-topbar-user";
 
 // data/sheet
 export { SdSheet } from "./data/sheet/sd-sheet";
@@ -242,10 +222,7 @@ export { SdKanbanLane } from "./data/kanban/sd-kanban-lane";
 export { SdPermissionTable } from "./data/permission-table/sd-permission-table";
 
 // data/state-preset
-export {
-  SdStatePreset,
-  type SdStatePresetDef,
-} from "./data/state-preset/sd-state-preset";
+export { SdStatePreset, type SdStatePresetDef } from "./data/state-preset/sd-state-preset";
 
 // data/crud
 export { SdBaseContainer } from "./data/crud/sd-base-container";
@@ -253,14 +230,12 @@ export { SdCrudDetail } from "./data/crud/sd-crud-detail";
 export { SdCrudList } from "./data/crud/sd-crud-list";
 
 // features/theme
-export { SdThemeProvider } from "./features/theme/sd-theme-provider";
+export { SdThemeProvider, type SdThemeName } from "./features/theme/sd-theme-provider";
 export { SdThemeSelector } from "./features/theme/sd-theme-selector";
+export { getWcagContrastRatio } from "./features/theme/wcag-contrast";
 
 // features/address
-export {
-  SdAddressSearchModal,
-  type Address,
-} from "./features/address/sd-address-search.modal";
+export { SdAddressSearchModal, type Address } from "./features/address/sd-address-search.modal";
 
 // features/editor
 export { SdTiptapEditor } from "./features/editor/sd-tiptap-editor";

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

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, effect, inject, signal, ViewEncapsulation } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  inject,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { NavigationStart, Router } from "@angular/router";
 import { filter } from "rxjs";
@@ -14,7 +21,13 @@ import { filter } from "rxjs";
   },
   template: `
     <ng-content />
-    <div class="_backdrop" tabindex="0" role="button" (click)="onBackdropClick()" (keydown.enter)="onBackdropClick()"></div>
+    <div
+      class="_backdrop"
+      tabindex="0"
+      role="button"
+      (click)="onBackdropClick()"
+      (keydown.enter)="onBackdropClick()"
+    ></div>
   `,
   styles: [
     /* language=SCSS */ `
@@ -24,12 +37,12 @@ import { filter } from "rxjs";
         display: block;
         position: relative;
         height: 100%;
-        padding-left: var(--sidebar-width);
-        transition: padding-left var(--animation-duration) ease-out;
+        padding-left: var(--sd-sidebar-width);
+        transition: padding-left var(--sd-animation-duration) ease-out;
 
         &[data-sd-toggle="true"] {
           padding-left: 0;
-          transition: padding-left var(--animation-duration) ease-in;
+          transition: padding-left var(--sd-animation-duration) ease-in;
         }
 
         > ._backdrop {
@@ -44,15 +57,15 @@ import { filter } from "rxjs";
           > ._backdrop {
             position: absolute;
             display: block;
-            z-index: calc(var(--z-index-sidebar) - 1);
+            z-index: calc(var(--sd-z-sidebar) - 1);
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: var(--background-rev-color);
+            background-color: var(--sd-bg-inverse);
             opacity: 0;
             pointer-events: none;
-            transition: opacity var(--animation-duration) ease-in-out;
+            transition: opacity var(--sd-animation-duration) ease-in-out;
           }
 
           &[data-sd-toggle="true"] {

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

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
 import { injectFullPageCodeSignal } from "../../core/routing/injectFullPageCodeSignal";
 import {
   type SdMenu,
@@ -17,14 +23,7 @@ import { NgIcon } from "@ng-icons/core";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [
-    NgTemplateOutlet,
-    SdTypedTemplate,
-    SdRouterLink,
-    SdList,
-    SdListItem,
-    NgIcon,
-  ],
+  imports: [NgTemplateOutlet, SdTypedTemplate, SdRouterLink, SdList, SdListItem, NgIcon],
   host: {
     "class": "flex-column fill",
     "[attr.data-sd-root-layout]": "rootLayout()",
@@ -70,15 +69,14 @@ import { NgIcon } from "@ng-icons/core";
   styles: [
     /* language=SCSS */ `
       sd-sidebar-menu {
-        /*> sd-list[data-sd-inset="true"] {
-          sd-list {
-            background: var(--trans-lightest);
-          }
-        }*/
-
         &[data-sd-root-layout="flat"] {
-          > sd-list[data-sd-inset="true"] > sd-list-item > sd-collapse > ._content > ._children > sd-list {
-            background: transparent;
+          > sd-list[data-sd-inset="true"]
+            > sd-list-item
+            > sd-collapse
+            > ._content
+            > ._children
+            > sd-list {
+            background-color: transparent;
           }
         }
       }

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

@@ -1,100 +1,100 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  signal,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdCollapseIcon } from "../../controls/collapse/sd-collapse-icon";
-import { SdCollapse } from "../../controls/collapse/sd-collapse";
-import { SdRipple } from "../../core/ripple/sd-ripple";
-import { SdList } from "../../controls/list/sd-list";
-import { SdListItem } from "../../controls/list/sd-list-item";
-import { NgIcon } from "@ng-icons/core";
-
-@Component({
-  selector: "sd-sidebar-user",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem, NgIcon],
-  host:{
-    "[class]": "'pv-lg'"
-  },
-  template: `
-    <div class="p-xs-default">
-      <ng-content />
-    </div>
-    @if (userMenu(); as _userMenu) {
-      <div
-        class="_menu-button"
-        tabindex="0"
-        (click)="onMenuOpenButtonClick()"
-        (keydown.enter)="onMenuOpenButtonClick()"
-        [sdRipple]="true"
-      >
-        @if (_userMenu.icon) {
-          <ng-icon [svg]="_userMenu.icon" />
-        }
-        {{ _userMenu.title }}
-        <sd-collapse-icon [open]="menuOpen()" style="float: right;" [openRotate]="180" />
-      </div>
-
-      <sd-collapse [open]="menuOpen()">
-        <sd-list [inset]="true">
-          @for (menu of _userMenu.menus; track menu.title) {
-            <sd-list-item (click)="menu.onClick()">
-              {{ menu.title }}
-            </sd-list-item>
-          }
-        </sd-list>
-      </sd-collapse>
-    }
-  `,
-  styles: [
-    /* language=SCSS */ `
-      sd-sidebar-user {
-        display: block;
-
-        > ._menu-button {
-          display: block;
-          cursor: pointer;
-          user-select: none;
-          color: var(--text-trans-light);
-
-          padding: var(--gap-sm) var(--gap-default);
-          border-radius: var(--border-radius-default);
-          margin: 0 var(--gap-sm);
-
-          &:hover {
-            background: var(--trans-lighter);
-          }
-        }
-
-        > sd-collapse > ._content > sd-list {
-          background: var(--trans-lightest);
-          padding: var(--gap-xs) 0;
-          margin: 0 var(--gap-sm);
-        }
-      }
-    `,
-  ],
-})
-export class SdSidebarUser {
-  userMenu = input<SdSidebarUserMenu>();
-
-  menuOpen = signal(false);
-
-  onMenuOpenButtonClick(): void {
-    this.menuOpen.update((v) => !v);
-  }
-}
-
-export interface SdSidebarUserMenu {
-  icon?: string;
-  title: string;
-  menus: {
-    title: string;
-    onClick: () => Promise<void> | void;
-  }[];
-}
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdCollapseIcon } from "../../controls/collapse/sd-collapse-icon";
+import { SdCollapse } from "../../controls/collapse/sd-collapse";
+import { SdRipple } from "../../core/ripple/sd-ripple";
+import { SdList } from "../../controls/list/sd-list";
+import { SdListItem } from "../../controls/list/sd-list-item";
+import { NgIcon } from "@ng-icons/core";
+
+@Component({
+  selector: "sd-sidebar-user",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdCollapseIcon, SdCollapse, SdRipple, SdList, SdListItem, NgIcon],
+  host: {
+    "[class]": "'pv-lg'",
+  },
+  template: `
+    <div class="p-xs-default">
+      <ng-content />
+    </div>
+    @if (userMenu(); as _userMenu) {
+      <div
+        class="_menu-button"
+        tabindex="0"
+        (click)="onMenuOpenButtonClick()"
+        (keydown.enter)="onMenuOpenButtonClick()"
+        [sdRipple]="true"
+      >
+        @if (_userMenu.icon) {
+          <ng-icon [svg]="_userMenu.icon" />
+        }
+        {{ _userMenu.title }}
+        <sd-collapse-icon [open]="menuOpen()" style="float: right;" [openRotate]="180" />
+      </div>
+
+      <sd-collapse [open]="menuOpen()">
+        <sd-list [inset]="true">
+          @for (menu of _userMenu.menus; track menu.title) {
+            <sd-list-item (click)="menu.onClick()">
+              {{ menu.title }}
+            </sd-list-item>
+          }
+        </sd-list>
+      </sd-collapse>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-sidebar-user {
+        display: block;
+
+        > ._menu-button {
+          display: block;
+          cursor: pointer;
+          user-select: none;
+          color: var(--sd-tx-muted);
+
+          padding: var(--sd-gap-sm) var(--sd-gap-default);
+          border-radius: var(--sd-radius-default);
+          margin: 0 var(--sd-gap-sm);
+
+          &:hover {
+            background-color: var(--sd-bg-state-hover);
+          }
+        }
+
+        > sd-collapse > ._content > sd-list {
+          background-color: var(--sd-bg-gray-subtle);
+          padding: var(--sd-gap-xs) 0;
+          margin: 0 var(--sd-gap-sm);
+        }
+      }
+    `,
+  ],
+})
+export class SdSidebarUser {
+  userMenu = input<SdSidebarUserMenu>();
+
+  menuOpen = signal(false);
+
+  onMenuOpenButtonClick(): void {
+    this.menuOpen.update((v) => !v);
+  }
+}
+
+export interface SdSidebarUserMenu {
+  icon?: string;
+  title: string;
+  menus: {
+    title: string;
+    onClick: () => Promise<void> | void;
+  }[];
+}

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

@@ -27,31 +27,29 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
 
       sd-sidebar {
         position: absolute;
-        z-index: var(--z-index-sidebar);
+        z-index: var(--sd-z-sidebar);
         top: 0;
         left: 0;
-        width: var(--sidebar-width);
+        width: var(--sd-sidebar-width);
         height: 100%;
-        //background: var(--control-color);
-        //background: var(--theme-gray-lightest);
-        border-right: 1px solid var(--border-color-lighter);
+        border-right: 1px solid var(--sd-bd-soft);
 
         @media not all and (max-width: variables.$breakpoint-mobile) {
-          transition: transform var(--animation-duration) ease-out;
+          transition: transform var(--sd-animation-duration) ease-out;
 
           &[data-sd-toggle="true"] {
             transform: translateX(-100%);
-            transition: transform var(--animation-duration) ease-in;
+            transition: transform var(--sd-animation-duration) ease-in;
           }
         }
 
         @media all and (max-width: variables.$breakpoint-mobile) {
-          transition: transform var(--animation-duration) ease-in;
+          transition: transform var(--sd-animation-duration) ease-in;
           transform: translateX(-100%);
 
           &[data-sd-toggle="true"] {
             transform: none;
-            transition: transform var(--animation-duration) ease-out;
+            transition: transform var(--sd-animation-duration) ease-out;
             @include mixins.elevation(16);
           }
         }

package/src/layout/topbar/sd-topbar-menu.ts

@@ -39,13 +39,13 @@ import { tablerCaretDown } from "@ng-icons/tabler-icons";
     NgIcon,
   ],
   host: {
-    "class": "flex-row gap-sm",
+    class: "flex-row gap-sm",
   },
   styles: [
     /* language=SCSS */ `
       sd-topbar-menu {
         sd-list sd-list {
-          background: var(--trans-lightest);
+          background-color: var(--sd-bg-gray-subtle);
         }
       }
     `,
@@ -88,7 +88,7 @@ import { tablerCaretDown } from "@ng-icons/tabler-icons";
       @for (menu of currMenus; track menu.codeChain.join(".")) {
         <sd-list-item
           [style.padding-left.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
-          [style.padding-block]="depth === 0 ? 'var(--gap-default)' : undefined"
+          [style.padding-block]="depth === 0 ? 'var(--sd-gap-default)' : undefined"
           [sdRouterLink]="getMenuRouterLinkOption(menu)"
           (click)="onMenuClick(menu, dropdownIndex)"
           [selected]="getIsMenuSelected(menu)"