@simplysm/angular 14.1.20 → 14.2.1

package/src/controls/collapse/sd-collapse-icon.ts

@@ -46,7 +46,7 @@ export class SdCollapseIcon {
 
   transitionStyle = computed(() => {
     return this.open()
-      ? "transform var(--animation-duration) ease-out"
-      : "transform var(--animation-duration) ease-in";
+      ? "transform var(--sd-animation-duration) ease-out"
+      : "transform var(--sd-animation-duration) ease-in";
   });
 }

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

@@ -55,8 +55,8 @@ export class SdCollapse {
   contentTransition = computed(() => {
     if (!this._initialized()) return "";
     return this.open()
-      ? "margin-top var(--animation-duration) ease-out"
-      : "margin-top var(--animation-duration) ease-in";
+      ? "margin-top var(--sd-animation-duration) ease-out"
+      : "margin-top var(--sd-animation-duration) ease-in";
   });
 
   constructor() {

package/src/controls/dropdown/sd-dropdown-popup.ts

@@ -30,18 +30,18 @@ import { SdResizeDirective } from "../../core/events/sd-resize";
 
       sd-dropdown-popup {
         position: fixed;
-        z-index: var(--z-index-dropdown);
+        z-index: var(--sd-z-dropdown);
         opacity: 0;
         transform: translateY(-0.625rem);
-        transition: var(--animation-duration) linear;
+        transition: var(--sd-animation-duration) linear;
         transition-property: transform, opacity;
         pointer-events: none;
-        background: var(--control-color);
+        background-color: var(--sd-bg-overlay);
         min-width: 7.5rem;
         @include mixins.elevation(4);
         overflow: hidden;
-        border-radius: var(--border-radius-default);
-        border: 1px solid var(--border-color-light);
+        border-radius: var(--sd-radius-default);
+        border: 1px solid var(--sd-dropdown-bd);
 
         > div {
           width: 100%;
@@ -51,12 +51,12 @@ import { SdResizeDirective } from "../../core/events/sd-resize";
         }
 
         &:focus {
-          outline: 1px solid var(--theme-primary-default);
+          outline: 1px solid var(--sd-focus-ring-color);
         }
 
         @media all and (max-width: variables.$breakpoint-mobile) {
           @include mixins.elevation(0);
-          border: 1px solid var(--border-color-default);
+          border: 1px solid var(--sd-bd-strong);
         }
 
         &[data-sd-mobile] {
@@ -66,11 +66,11 @@ import { SdResizeDirective } from "../../core/events/sd-resize";
           bottom: 0;
           top: auto;
           max-height: 80vh;
-          border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+          border-radius: var(--sd-radius-default) var(--sd-radius-default) 0 0;
           opacity: 1;
           pointer-events: auto;
           transform: none;
-          animation: sd-dropdown-slide-up var(--animation-duration) ease-out;
+          animation: sd-dropdown-slide-up var(--sd-animation-duration) ease-out;
           @include mixins.elevation(8);
         }
       }
@@ -87,9 +87,7 @@ import { SdResizeDirective } from "../../core/events/sd-resize";
   ],
 })
 export class SdDropdownPopup {
-  private readonly _parentControl = inject<SdDropdown>(
-    forwardRef(() => SdDropdown),
-  );
+  private readonly _parentControl = inject<SdDropdown>(forwardRef(() => SdDropdown));
   private readonly _elRef = inject(ElementRef<HTMLElement>);
   private _capped = false;
 

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

@@ -74,7 +74,7 @@ export class SdDropdown {
           const backdrop = document.createElement("div");
           backdrop.setAttribute("data-sd-dropdown-backdrop", "");
           backdrop.style.cssText =
-            "position:fixed;inset:0;background:var(--busy-overlay-bg);z-index:var(--z-index-dropdown)";
+            "position:fixed;inset:0;background-color:var(--sd-bg-busy-overlay);z-index:var(--sd-z-dropdown)";
           backdrop.addEventListener("click", () => {
             this._closePopup();
           });

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

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
 
 @Component({
   selector: "sd-gap",
@@ -12,13 +18,13 @@ import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation
       @use "../../../scss/commons/variables";
 
       sd-gap {
-        @each $key, $val in map.get(variables.$vars, gap) {
+        @each $key, $val in map.get(variables.$sd, gap) {
           &[data-sd-height="#{$key}"] {
-            height: var(--gap-#{$key});
+            height: var(--sd-gap-#{$key});
           }
 
           &[data-sd-width="#{$key}"] {
-            width: var(--gap-#{$key});
+            width: var(--sd-gap-#{$key});
           }
         }
       }
@@ -44,11 +50,7 @@ export class SdGap {
   _displayStyle = computed(() => {
     if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
       return "none";
-    } else if (
-      this.width() != null ||
-      this.widthPx() != null ||
-      this.widthEm() != null
-    ) {
+    } else if (this.width() != null || this.widthPx() != null || this.widthEm() != null) {
       return "inline-block";
     } else if (this.height() != null || this.heightPx() != null) {
       return "block";

package/src/controls/input/sd-date-range-picker.ts

@@ -26,7 +26,7 @@ import { DateOnly } from "@simplysm/core-common";
         display: flex;
         align-items: center;
 
-        @include mixins.flex-direction(row, var(--gap-sm));
+        @include mixins.flex-direction(row, var(--sd-gap-sm));
       }
     `,
   ],

package/src/controls/input/sd-numpad.ts

@@ -59,20 +59,12 @@ import { tablerArrowLeft, tablerEraser } from "@ng-icons/tabler-icons";
             </td>
           }
           <td [attr.colspan]="useMinusButton() ? 1 : 2">
-            <sd-button
-              [size]="'lg'"
-              [buttonClass]="'tx-theme-danger-default'"
-              (click)="onButtonClick('C')"
-            >
+            <sd-button [size]="'lg'" [buttonClass]="'tx-danger'" (click)="onButtonClick('C')">
               <ng-icon [svg]="tablerEraser" />
             </sd-button>
           </td>
           <td>
-            <sd-button
-              [size]="'lg'"
-              [buttonClass]="'tx-theme-warning-default'"
-              (click)="onButtonClick('BS')"
-            >
+            <sd-button [size]="'lg'" [buttonClass]="'tx-warning'" (click)="onButtonClick('BS')">
               <ng-icon [svg]="tablerArrowLeft" />
             </sd-button>
           </td>
@@ -108,7 +100,7 @@ import { tablerArrowLeft, tablerEraser } from "@ng-icons/tabler-icons";
 
           > * > tr > * {
             border: none;
-            padding: var(--gap-xxs);
+            padding: var(--sd-gap-xxs);
 
             > sd-button {
               border: none;

package/src/controls/input/sd-range.ts

@@ -41,7 +41,7 @@ import type { SdTextfieldTypes } from "./sd-textfield-type-handlers";
         display: flex;
         align-items: center;
 
-        @include mixins.flex-direction(row, var(--gap-sm));
+        @include mixins.flex-direction(row, var(--sd-gap-sm));
       }
     `,
   ],

package/src/controls/input/sd-textarea.ts

@@ -25,7 +25,7 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
       @if (value()) {
         <pre>{{ value() }} </pre>
       } @else if (placeholder()) {
-        <span class="tx-trans-lighter">{{ placeholder() }}</span>
+        <span class="tx-faint">{{ placeholder() }}</span>
       } @else {
         <span>&nbsp;</span>
       }
@@ -44,8 +44,6 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
   `,
   styles: [
     /* language=SCSS */ `
-      @use "sass:map";
-
       @use "../../../scss/commons/variables";
       @use "../../../scss/commons/mixins";
 
@@ -56,19 +54,19 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
         > textarea,
         > ._contents {
           @include mixins.form-control-base();
-          font-family: var(--font-family-field);
+          font-family: var(--sd-font-family-field);
           resize: none;
 
           overflow: auto;
           width: 100%;
 
-          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);
 
           &:focus {
             outline: none;
-            border-color: var(--theme-primary-default);
+            border-color: var(--sd-focus-ring-color);
           }
 
           &::-webkit-scrollbar {
@@ -76,7 +74,7 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
           }
 
           &::-webkit-input-placeholder {
-            color: var(--text-trans-lighter);
+            color: var(--sd-tx-faint);
           }
         }
 
@@ -93,11 +91,11 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
           margin-bottom: 0;
         }
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="#{$key}"] {
             > textarea,
             > ._contents {
-              background: var(--theme-#{$key}-lightest);
+              background-color: var(--sd-bg-#{$key}-subtle);
             }
           }
         }
@@ -105,14 +103,14 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
         &[data-sd-size="sm"] {
           > textarea,
           > ._contents {
-            padding: var(--gap-xs) var(--gap-sm);
+            padding: var(--sd-gap-xs) var(--sd-gap-sm);
           }
         }
 
         &[data-sd-size="lg"] {
           > textarea,
           > ._contents {
-            padding: var(--gap-default) var(--gap-lg);
+            padding: var(--sd-gap-default) var(--sd-gap-lg);
           }
         }
 
@@ -146,22 +144,24 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
           }
 
           > textarea:focus {
-            outline: 1px solid var(--theme-primary-default);
+            outline: 1px solid var(--sd-focus-ring-color);
             outline-offset: -1px;
           }
         }
 
+        // disabled 는 색 치환 단일 규약 (DEC-009)
         &[data-sd-disabled="true"] {
           > ._contents {
             display: block;
-            background: var(--theme-gray-lightest);
-            color: var(--text-trans-light);
+            background-color: var(--sd-bg-disabled);
+            color: var(--sd-tx-disabled);
           }
 
+          // inset(시트 셀 등)의 disabled 는 일반 콘텐츠처럼 표시(현행 유지)
           &[data-sd-inset="true"] {
             > ._contents {
-              background: var(--control-color);
-              color: var(--text-trans-default);
+              background-color: var(--sd-bg-control);
+              color: var(--sd-tx-default);
             }
           }
         }

package/src/controls/input/sd-textfield.ts

@@ -15,10 +15,7 @@ import {
   ViewEncapsulation,
 } from "@angular/core";
 import { setupInvalid } from "../../core/validation/setupInvalid";
-import {
-  textfieldTypeHandlers,
-  type SdTextfieldTypes,
-} from "./sd-textfield-type-handlers";
+import { textfieldTypeHandlers, type SdTextfieldTypes } from "./sd-textfield-type-handlers";
 
 @Component({
   selector: "sd-textfield",
@@ -34,12 +31,12 @@ import {
       [style.visibility]="!readonly() && !disabled() ? 'hidden' : undefined"
     >
       @if (controlType() === "password") {
-        <span class="tx-trans-light">****</span>
+        <span class="tx-muted">****</span>
       } @else {
         @if (controlValue()) {
           <pre>{{ controlValueText() ? controlValueText() : " " }}</pre>
         } @else if (placeholder()) {
-          <span class="tx-trans-lighter">{{ placeholder() }}</span>
+          <span class="tx-faint">{{ placeholder() }}</span>
         } @else {
           <span>&nbsp;</span>
         }
@@ -67,8 +64,6 @@ import {
   `,
   styles: [
     /* language=SCSS */ `
-      @use "sass:map";
-
       @use "../../../scss/commons/variables";
       @use "../../../scss/commons/mixins";
 
@@ -79,25 +74,25 @@ import {
         > input,
         > ._contents {
           @include mixins.form-control-base();
-          font-family: var(--font-family-field);
+          font-family: var(--sd-font-family-field);
 
           overflow: auto;
           width: 100%;
 
-          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 {
             outline: none;
-            border-color: var(--theme-primary-default);
+            border-color: var(--sd-focus-ring-color);
           }
 
           &[type="date"],
           &[type="month"],
           &[type="datetime-local"] {
-            padding-top: calc(var(--gap-sm) - 1px);
-            padding-bottom: calc(var(--gap-sm) - 1px);
+            padding-top: calc(var(--sd-gap-sm) - 1px);
+            padding-bottom: calc(var(--sd-gap-sm) - 1px);
           }
 
           &::-webkit-scrollbar {
@@ -105,7 +100,7 @@ import {
           }
 
           &::-webkit-input-placeholder {
-            color: var(--text-trans-lighter);
+            color: var(--sd-tx-faint);
           }
 
           &::-webkit-outer-spin-button,
@@ -135,11 +130,11 @@ import {
           }
         }
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="#{$key}"] {
             > input,
             > ._contents {
-              background: var(--theme-#{$key}-lightest);
+              background-color: var(--sd-bg-#{$key}-subtle);
             }
           }
         }
@@ -147,14 +142,14 @@ import {
         &[data-sd-size="sm"] {
           > input,
           > ._contents {
-            padding: var(--gap-xs) var(--gap-sm);
+            padding: var(--sd-gap-xs) var(--sd-gap-sm);
 
             &[type="date"],
             &[type="month"],
             &[type="datetime-local"],
             &[type="color"] {
-              padding-top: calc(var(--gap-xs) - 1px);
-              padding-bottom: calc(var(--gap-xs) - 1px);
+              padding-top: calc(var(--sd-gap-xs) - 1px);
+              padding-bottom: calc(var(--sd-gap-xs) - 1px);
             }
           }
         }
@@ -162,14 +157,14 @@ import {
         &[data-sd-size="lg"] {
           > input,
           > ._contents {
-            padding: var(--gap-default) var(--gap-lg);
+            padding: var(--sd-gap-default) var(--sd-gap-lg);
 
             &[type="date"],
             &[type="month"],
             &[type="datetime-local"],
             &[type="color"] {
-              padding-top: calc(var(--gap-default) - 1px);
-              padding-bottom: calc(var(--gap-default) - 1px);
+              padding-top: calc(var(--sd-gap-default) - 1px);
+              padding-bottom: calc(var(--sd-gap-default) - 1px);
             }
           }
         }
@@ -204,7 +199,7 @@ import {
           }
 
           > input:focus {
-            outline: 1px solid var(--theme-primary-default);
+            outline: 1px solid var(--sd-focus-ring-color);
             outline-offset: -1px;
           }
 
@@ -240,7 +235,8 @@ import {
             > input,
             > ._contents {
               height: calc(
-                var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2
+                var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-sm) *
+                  2
               );
             }
 
@@ -248,7 +244,8 @@ import {
               > input,
               > ._contents {
                 height: calc(
-                  var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2
+                  var(--sd-font-size-default) * var(--sd-line-height-strip-unit) +
+                    var(--sd-gap-xs) * 2
                 );
               }
             }
@@ -257,24 +254,27 @@ import {
               > input,
               > ._contents {
                 height: calc(
-                  var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2
+                  var(--sd-font-size-default) * var(--sd-line-height-strip-unit) +
+                    var(--sd-gap-default) * 2
                 );
               }
             }
           }
         }
 
+        // disabled 는 색 치환 단일 규약 (DEC-009)
         &[data-sd-disabled="true"] {
           > ._contents {
             display: block;
-            background: var(--trans-lightest);
-            color: var(--text-trans-light);
+            background-color: var(--sd-bg-disabled);
+            color: var(--sd-tx-disabled);
           }
 
+          // inset(시트 셀 등)의 disabled 는 일반 콘텐츠처럼 표시(현행 유지)
           &[data-sd-inset="true"] {
             > ._contents {
-              background: var(--control-color);
-              color: var(--text-trans-default);
+              background-color: var(--sd-bg-control);
+              color: var(--sd-tx-default);
             }
           }
         }
@@ -356,9 +356,11 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
   controlValueText = computed(() => {
     const value = this.value();
     if (value == null) return undefined;
-    return this._handler().toDisplayText(value, {
-      minDigits: this.minDigits(),
-    }) ?? this.controlValue();
+    return (
+      this._handler().toDisplayText(value, {
+        minDigits: this.minDigits(),
+      }) ?? this.controlValue()
+    );
   });
 
   constructor() {
@@ -379,8 +381,8 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
           const domParsed = this._handler().parse(inputEl.value, { format: this.format() });
           // DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아 캐럿·IME 보호
           const domReflectsModel =
-            domParsed != null
-            && this._handler().toControlValue(domParsed, {
+            domParsed != null &&
+            this._handler().toControlValue(domParsed, {
               useNumberComma: this.useNumberComma(),
               format: this.format(),
             }) === controlValue;