@simplysm/angular 14.1.20 → 14.2.1

package/src/controls/button/sd-anchor.ts

@@ -16,38 +16,37 @@ import {
   `,
   styles: [
     /* language=SCSS */ `
-      @use "sass:map";
-
       @use "../../../scss/commons/variables";
 
       sd-anchor {
         display: inline-block;
         cursor: pointer;
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="#{$key}"] {
-            color: var(--theme-#{$key}-default);
+            color: var(--sd-tx-#{$key});
 
             &:hover {
-              color: var(--theme-#{$key}-darker);
+              color: var(--sd-tx-#{$key}-hover);
               text-decoration: underline;
             }
 
             &:active {
-              color: var(--theme-#{$key}-default);
+              color: var(--sd-tx-#{$key});
             }
 
             @media all and (pointer: coarse) {
               &:hover {
-                color: var(--theme-#{$key}-default);
+                color: var(--sd-tx-#{$key});
                 text-decoration: none;
               }
             }
           }
         }
 
+        // disabled 는 색 치환 단일 규약 (DEC-009 — opacity 방식 폐기)
         &[data-sd-disabled="true"] {
-          opacity: 0.3;
+          color: var(--sd-tx-disabled) !important;
           pointer-events: none;
         }
       }

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

@@ -27,8 +27,6 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
   `,
   styles: [
     /* language=SCSS */ `
-      @use "sass:map";
-
       @use "../../../scss/commons/variables";
       @use "../../../scss/commons/mixins";
 
@@ -36,28 +34,28 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
         > button {
           @include mixins.form-control-base();
           user-select: none;
-          padding: var(--gap-sm) var(--gap-lg);
+          padding: var(--sd-gap-sm) var(--sd-gap-lg);
           width: 100%;
 
-          background: var(--control-color);
-          border-color: var(--theme-primary-default);
-          border-radius: var(--border-radius-default);
+          background-color: var(--sd-bg-control);
+          border-color: var(--sd-bd-primary-solid);
+          border-radius: var(--sd-radius-default);
 
           font-weight: bold;
           text-align: center;
           cursor: pointer;
 
-          transition: var(--animation-duration) linear;
+          transition: var(--sd-animation-duration) linear;
           transition-property: border, background;
 
           &:hover {
-            background: var(--theme-gray-lightest);
+            background-color: var(--sd-bg-state-hover);
           }
 
           &:disabled {
-            background: var(--control-color);
-            border-color: var(--theme-gray-lighter);
-            color: var(--text-trans-lighter);
+            background-color: var(--sd-bg-disabled);
+            border-color: var(--sd-bd-disabled);
+            color: var(--sd-tx-disabled);
             cursor: default;
           }
         }
@@ -65,36 +63,36 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
         &[data-sd-inset="true"] > button {
           border-radius: 0;
           border: none;
-          color: var(--theme-primary-default);
+          color: var(--sd-tx-primary);
 
           &:hover {
-            color: var(--theme-primary-dark);
+            color: var(--sd-tx-primary-hover);
           }
 
           &:disabled {
-            background: var(--control-color);
-            border-color: var(--theme-gray-lighter);
-            color: var(--text-trans-default);
+            background-color: var(--sd-bg-disabled);
+            border-color: var(--sd-bd-disabled);
+            color: var(--sd-tx-disabled);
             cursor: default;
           }
         }
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="#{$key}"] > button {
-            background: var(--theme-#{$key}-default);
-            border-color: var(--theme-#{$key}-default);
-            color: var(--text-trans-rev-default);
+            background-color: var(--sd-bg-#{$key}-solid);
+            border-color: var(--sd-bd-#{$key}-solid);
+            color: var(--sd-tx-#{$key}-solid);
 
             &:hover {
-              background: var(--theme-#{$key}-dark);
-              border-color: var(--theme-#{$key}-dark);
-              color: var(--text-trans-rev-default);
+              background-color: var(--sd-bg-#{$key}-solid-hover);
+              border-color: var(--sd-bd-#{$key}-solid-hover);
+              color: var(--sd-tx-#{$key}-solid);
             }
 
             &:disabled {
-              background: var(--theme-gray-lighter);
-              border-color: var(--theme-gray-lighter);
-              color: var(--text-trans-lighter);
+              background-color: var(--sd-bg-disabled);
+              border-color: var(--sd-bd-disabled);
+              color: var(--sd-tx-disabled);
               cursor: default;
             }
           }
@@ -102,49 +100,49 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
 
         &[data-sd-theme="link"] > button {
           border-color: transparent;
-          background: transparent;
-          color: var(--theme-primary-default);
+          background-color: transparent;
+          color: var(--sd-tx-primary);
 
           &:hover {
-            color: var(--theme-primary-dark);
+            color: var(--sd-tx-primary-hover);
           }
 
           &:disabled {
             border-color: transparent;
-            color: var(--text-trans-lighter);
+            color: var(--sd-tx-disabled);
           }
         }
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="link-#{$key}"] > button {
             border-color: transparent;
-            background: transparent;
-            color: var(--theme-#{$key}-default);
+            background-color: transparent;
+            color: var(--sd-tx-#{$key});
 
             &:hover {
-              background: var(--trans-lighter);
-              color: var(--theme-#{$key}-dark);
+              background-color: var(--sd-bg-state-hover);
+              color: var(--sd-tx-#{$key}-hover);
             }
 
             &:disabled {
               border-color: transparent;
-              color: var(--text-trans-lighter);
+              color: var(--sd-tx-disabled);
             }
           }
         }
 
         &[data-sd-theme="link-rev"] > button {
           border-color: transparent;
-          background: transparent;
-          color: var(--text-trans-rev-default);
+          background-color: transparent;
+          color: var(--sd-tx-on-inverse);
 
           &:hover {
-            color: var(--text-trans-rev-dark);
+            color: var(--sd-tx-on-inverse-muted);
           }
 
           &:disabled {
             border-color: transparent;
-            color: var(--text-trans-rev-darker);
+            color: var(--sd-tx-on-inverse-disabled);
           }
         }
 
@@ -155,15 +153,15 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
         }
 
         &[data-sd-size="xs"] > button {
-          padding: var(--gap-xxs) var(--gap-xs);
+          padding: var(--sd-gap-xxs) var(--sd-gap-xs);
         }
-        
+
         &[data-sd-size="sm"] > button {
-          padding: var(--gap-xs) var(--gap-default);
+          padding: var(--sd-gap-xs) var(--sd-gap-default);
         }
 
         &[data-sd-size="lg"] > button {
-          padding: var(--gap-default) var(--gap-xl);
+          padding: var(--sd-gap-default) var(--sd-gap-xl);
         }
 
         &[data-sd-disabled="true"] {

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

@@ -70,18 +70,18 @@ export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
       sd-modal-select-button {
         display: flex;
         flex-direction: row;
-        gap: var(--gap-sm);
+        gap: var(--sd-gap-sm);
         position: relative;
         width: 100%;
         min-width: 3em;
 
-        border: 1px solid var(--trans-light);
-        border-radius: var(--border-radius-default);
+        border: 1px solid var(--sd-bd-soft);
+        border-radius: var(--sd-radius-default);
         overflow: hidden;
 
         > ._content {
           flex: 1;
-          padding: var(--gap-sm) var(--gap-default);
+          padding: var(--sd-gap-sm) var(--sd-gap-default);
         }
 
         > ._button {
@@ -90,12 +90,12 @@ export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
           @include mixins.flex-direction(row);
 
           > sd-anchor {
-            padding: var(--gap-sm) !important;
+            padding: var(--sd-gap-sm) !important;
           }
 
           > sd-button > button {
-            border-left: 1px solid var(--trans-lighter) !important;
-            padding: var(--gap-sm) !important;
+            border-left: 1px solid var(--sd-bd-hairline) !important;
+            padding: var(--sd-gap-sm) !important;
             height: 100%;
           }
         }
@@ -107,32 +107,32 @@ export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
 
         &[data-sd-size="sm"] {
           > ._content {
-            padding: var(--gap-xs) var(--gap-default);
+            padding: var(--sd-gap-xs) var(--sd-gap-default);
           }
 
           > ._button {
             > sd-anchor {
-              padding: var(--gap-xs) var(--gap-sm) !important;
+              padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;
             }
 
             > sd-button > button {
-              padding: var(--gap-xs) var(--gap-sm) !important;
+              padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;
             }
           }
         }
 
         &[data-sd-size="lg"] {
           > ._content {
-            padding: var(--gap-default) var(--gap-xl);
+            padding: var(--sd-gap-default) var(--sd-gap-xl);
           }
 
           > ._button {
             > sd-anchor {
-              padding: var(--gap-default) !important;
+              padding: var(--sd-gap-default) !important;
             }
 
             > sd-button > button {
-              padding: var(--gap-default) !important;
+              padding: var(--sd-gap-default) !important;
             }
           }
         }
@@ -145,10 +145,7 @@ export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
     "[attr.data-sd-disabled]": "disabled()",
   },
 })
-export class SdModalSelectButton<
-  K,
-  M extends keyof SelectModeValue<K> = keyof SelectModeValue<K>,
-> {
+export class SdModalSelectButton<K, M extends keyof SelectModeValue<K> = keyof SelectModeValue<K>> {
   private readonly _sdModal = inject(SdModalProvider);
 
   modal = input.required<SdSelectModalInfo<SdSelectModal<K>>>();
@@ -205,8 +202,7 @@ export class SdModalSelectButton<
     });
 
     if (result) {
-      const newValue =
-        this.selectMode() === "multi" ? result.selectedKeys : result.selectedKeys[0];
+      const newValue = this.selectMode() === "multi" ? result.selectedKeys : result.selectedKeys[0];
       this.value.set(newValue as SelectModeValue<K>[M]);
     }
   }

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

@@ -33,8 +33,6 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
   `,
   styles: [
     /* language=SCSS */ `
-      @use "sass:map";
-
       @use "../../../scss/commons/variables";
       @use "../../../scss/commons/mixins";
 
@@ -44,14 +42,15 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
         cursor: pointer;
 
         height: calc(
-          var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px
+          var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-sm) * 2 +
+            2px
         );
-        gap: var(--gap-sm);
+        gap: var(--sd-gap-sm);
 
         @supports not (appearance: auto) {
           gap: 0;
           > * + * {
-            margin-left: var(--gap-sm);
+            margin-left: var(--sd-gap-sm);
           }
         }
 
@@ -60,16 +59,16 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
           vertical-align: -0.125em;
           user-select: none;
 
-          width: calc(var(--font-size-default) + 2px);
-          height: calc(var(--font-size-default) + 2px);
-          border: 1px solid var(--border-color-light);
-          background: var(--theme-secondary-lightest);
+          width: calc(var(--sd-font-size-default) + 2px);
+          height: calc(var(--sd-font-size-default) + 2px);
+          border: 1px solid var(--sd-bd-field);
+          background-color: var(--sd-bg-field);
 
           > ._indicator {
             margin: -1px -2px;
             text-align: center;
             opacity: 0;
-            color: var(--text-trans-rev-default);
+            color: var(--sd-tx-primary-solid);
 
             > ng-icon {
               > svg {
@@ -83,7 +82,7 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
         ._contents {
           display: inline-block;
           vertical-align: top;
-          padding-left: var(--gap-sm);
+          padding-left: var(--sd-gap-sm);
         }
 
         > ._indicator_rect + ._contents:empty {
@@ -91,13 +90,13 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
         }
 
         &:focus > ._indicator_rect {
-          border-color: var(--theme-primary-dark);
+          border-color: var(--sd-focus-ring-color);
         }
 
         &[data-sd-checked="true"] {
           > ._indicator_rect {
-            border-color: var(--theme-primary-default);
-            background: var(--theme-primary-default);
+            border-color: var(--sd-bd-primary-solid);
+            background-color: var(--sd-bg-primary-solid);
 
             > ._indicator {
               opacity: 1;
@@ -105,30 +104,30 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
           }
         }
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="#{$key}"] {
             > ._indicator_rect {
-              background: var(--theme-#{$key}-lightest);
+              background-color: var(--sd-bg-#{$key}-subtle);
 
               > ._indicator {
-                color: var(--theme-#{$key}-default);
+                color: var(--sd-tx-#{$key});
               }
             }
 
             &[data-sd-checked="true"] {
               > ._indicator_rect {
-                border-color: var(--theme-#{$key}-default);
-                background: var(--theme-#{$key}-default);
+                border-color: var(--sd-bd-#{$key}-solid);
+                background-color: var(--sd-bg-#{$key}-solid);
 
                 > ._indicator {
-                  color: var(--text-trans-rev-default);
+                  color: var(--sd-tx-#{$key}-solid);
                 }
               }
             }
 
             &:focus {
               > ._indicator_rect {
-                border-color: var(--theme-#{$key}-dark);
+                border-color: var(--sd-focus-ring-color);
               }
             }
           }
@@ -136,20 +135,20 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
 
         &[data-sd-theme="white"] {
           > ._indicator_rect {
-            background: var(--control-color);
-            border-color: var(--text-trans-lightest);
+            background-color: var(--sd-bg-control);
+            border-color: var(--sd-bd-field);
           }
 
           &[data-sd-checked="true"] {
             > ._indicator_rect {
-              border-color: var(--theme-primary-default);
-              background: var(--theme-primary-default);
+              border-color: var(--sd-bd-primary-solid);
+              background-color: var(--sd-bg-primary-solid);
             }
           }
 
           &:focus {
             > ._indicator_rect {
-              border-color: var(--theme-primary-dark);
+              border-color: var(--sd-focus-ring-color);
             }
           }
         }
@@ -157,57 +156,59 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
         &[data-sd-radio="true"] {
           > ._indicator_rect {
             border-radius: 100%;
-            padding: var(--gap-xs);
+            padding: var(--sd-gap-xs);
 
             > ._indicator {
               border-radius: 100%;
               width: 100%;
               height: 100%;
-              background: var(--theme-primary-default);
+              background-color: var(--sd-bg-primary-solid);
             }
           }
 
           &[data-sd-checked="true"] {
             > ._indicator_rect {
-              background: var(--theme-secondary-lightest);
-              border-color: var(--theme-primary-dark);
+              background-color: var(--sd-bg-field);
+              border-color: var(--sd-bd-primary-solid);
             }
           }
         }
 
         &[data-sd-size="sm"] {
           height: calc(
-            var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px
+            var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-xs) * 2 +
+              2px
           );
-          padding: var(--gap-xs) var(--gap-sm);
-          gap: var(--gap-xs);
+          padding: var(--sd-gap-xs) var(--sd-gap-sm);
+          gap: var(--sd-gap-xs);
 
           @supports not (appearance: auto) {
             gap: 0;
             > * + * {
-              margin-left: var(--gap-xs);
+              margin-left: var(--sd-gap-xs);
             }
           }
         }
 
         &[data-sd-size="lg"] {
           height: calc(
-            var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px
+            var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-default) *
+              2 + 2px
           );
-          padding: var(--gap-default) var(--gap-lg);
-          gap: var(--gap-default);
+          padding: var(--sd-gap-default) var(--sd-gap-lg);
+          gap: var(--sd-gap-default);
 
           @supports not (appearance: auto) {
             gap: 0;
             > * + * {
-              margin-left: var(--gap-default);
+              margin-left: var(--sd-gap-default);
             }
           }
         }
 
         &[data-sd-inset="true"] {
           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
           );
           border: none;
           justify-content: center;
@@ -215,13 +216,14 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
 
           &[data-sd-size="sm"] {
             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
             );
           }
 
           &[data-sd-size="lg"] {
             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
             );
           }
         }
@@ -231,13 +233,23 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
           vertical-align: top;
           padding: 0;
           border: none;
-          height: calc(var(--font-size-default) * var(--line-height-strip-unit));
+          height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit));
           width: auto;
         }
 
+        // disabled 는 색 치환 단일 규약 (DEC-009 — opacity 방식 폐기)
         &[data-sd-disabled="true"] {
-          opacity: 0.3;
+          color: var(--sd-tx-disabled) !important;
           pointer-events: none;
+
+          > ._indicator_rect {
+            background-color: var(--sd-bg-disabled) !important;
+            border-color: var(--sd-bd-disabled) !important;
+
+            > ._indicator {
+              color: var(--sd-tx-disabled) !important;
+            }
+          }
         }
       }
     `,

package/src/controls/checkbox/sd-switch.ts

@@ -32,41 +32,39 @@ import { setupModelHook } from "../../core/setupModelHook";
   `,
   styles: [
     /* language=SCSS */ `
-      @use "sass:map";
-
       @use "../../../scss/commons/variables";
 
       sd-switch {
         display: block;
-        padding: var(--gap-sm) 0;
+        padding: var(--sd-gap-sm) 0;
         border: 1px solid transparent;
         vertical-align: top;
         cursor: pointer;
 
         > div {
-          height: var(--line-height);
-          width: calc(var(--line-height) * 2 - var(--gap-xs));
-          padding: calc(var(--gap-xs) / 2);
-          border-radius: calc(var(--line-height) / 2);
+          height: var(--sd-line-height);
+          width: calc(var(--sd-line-height) * 2 - var(--sd-gap-xs));
+          padding: calc(var(--sd-gap-xs) / 2);
+          border-radius: calc(var(--sd-line-height) / 2);
           text-align: left;
 
-          background: var(--theme-gray-lighter);
+          background-color: var(--sd-bg-track);
 
           > div {
             display: inline-block;
-            width: calc(var(--line-height) - var(--gap-xs));
-            height: calc(var(--line-height) - var(--gap-xs));
+            width: calc(var(--sd-line-height) - var(--sd-gap-xs));
+            height: calc(var(--sd-line-height) - var(--sd-gap-xs));
             border-radius: 100%;
 
-            background: var(--control-color);
+            background-color: var(--sd-bg-control);
 
-            transition: transform var(--animation-duration);
+            transition: transform var(--sd-animation-duration);
           }
         }
 
         &[data-sd-on="true"] {
           > div {
-            background: var(--theme-success-default);
+            background-color: var(--sd-bg-success-solid);
 
             > div {
               transform: translateX(100%);
@@ -85,29 +83,30 @@ import { setupModelHook } from "../../core/setupModelHook";
         }
 
         &[data-sd-size="sm"] {
-          padding: var(--gap-sm) 0;
+          padding: var(--sd-gap-sm) 0;
         }
 
         &[data-sd-size="lg"] {
-          padding: var(--gap-default) 0;
+          padding: var(--sd-gap-default) 0;
         }
 
-        @each $key, $val in map.get(variables.$vars, theme) {
+        @each $key in variables.$theme-keys {
           &[data-sd-theme="#{$key}"] {
             &[data-sd-on="true"] {
               > div {
-                background: var(--theme-#{$key}-default);
+                background-color: var(--sd-bg-#{$key}-solid);
               }
             }
           }
         }
 
+        // disabled 는 색 치환 단일 규약 (DEC-009 — opacity 방식 폐기)
         &[data-sd-disabled="true"] {
           > div {
-            opacity: 0.5;
+            background-color: var(--sd-bg-disabled) !important;
 
             > div {
-              background: var(--theme-gray-default);
+              background-color: var(--sd-bg-gray-solid);
             }
           }
         }