@simplysm/angular 14.0.100 → 14.0.101

package/scss/commons/_variables.scss

@@ -1,11 +1,12 @@
 @use "sass:map";
 @use "sass:color";
+@use "./colors";
 
-@function to-rgb($oklch-color) {
+/*@function to-rgb($oklch-color) {
   @return color.to-space($oklch-color, rgb);
-}
+}*/
 
-$colors: (
+/*$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)),
@@ -28,21 +29,21 @@ $colors: (
   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)
-  );
-}
+//@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;
@@ -52,14 +53,14 @@ $breakpoint-sm: 1280px;
 
 $vars: (
   theme: (
-    "gray": color-map(map.get($colors, gray)),
-    blue-gray: color-map(map.get($colors, slate)),
-    primary: color-map(map.get($colors, blue)),
-    secondary: color-map(map.get($colors, blue)),
-    info: color-map(map.get($colors, cyan)),
-    success: color-map(map.get($colors, lime)),
-    warning: color-map(map.get($colors, orange)),
-    danger: color-map(map.get($colors, red)),
+    "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)),
   ),
   trans: (
     darkest: rgba(0, 0, 0, 0.5),
@@ -106,14 +107,14 @@ $vars: (
     0: 0,
     auto: "auto",
   ),
-  border-color: color-map(map.get($colors, gray), 5%),
+  border-color: colors.variants(colors.get(zinc, 400)),
   border-radius: (
-    xs: var(--gap-xs),
-    sm: var(--gap-sm),
-    default: var(--gap-default),
-    lg: var(--gap-lg),
-    xl: var(--gap-xl),
-    xxl: var(--gap-xxl),
+    xs: var(--gap-xxs),
+    sm: var(--gap-xs),
+    default: var(--gap-sm),
+    lg: var(--gap-default),
+    xl: var(--gap-lg),
+    xxl: var(--gap-xl),
   ),
   z-index: (
     toast: 9999,
@@ -124,14 +125,17 @@ $vars: (
   ),
   line-height: 1.5em,
   line-height-strip-unit: 1.5,
-  font-family: sans-serif,
-  font-family-monospace: monospace,
-  background-color: white,
+  font-family: "sans-serif",
+  font-family-field: "ui-sans-serif, system-ui, sans-serif",
+  font-family-monospace: "ui-monospace, monospace",
+  background-color: var(--theme-gray-lightest),
   background-rev-color: black,
   control-color: white,
   busy-overlay-bg: rgba(255, 255, 255, 0.6),
   animation-duration: 0.2s,
   elevation-size: 0.0833rem,
+  // elevation 그림자 blur 배수 (기본 1 = 현재 동작 유지). 테마에서 0으로 덮으면 하드 섀도.
+  elevation-blur-mult: 1,
   sidebar: (
     width: 14rem,
   ),

package/scss/controls/_card.scss

@@ -4,7 +4,7 @@
   display: block;
   background: var(--control-color);
   border-radius: var(--border-radius-default);
-  transition: box-shadow 0.3s ease-in-out;
+  transition: box-shadow var(--animation-duration) ease-in-out;
   @include mixins.elevation(2);
   animation: sd-card var(--animation-duration) ease-out;
   opacity: 0;

package/scss/styles.scss

@@ -1,6 +1,9 @@
 @use "commons/theme-variables";
 @use "commons/styles";
 
+// 블루프린트 모눈 그리드 면 (언레이어드 — 파일 내 주석 참조)
+@use "themes/blueprint-surfaces";
+
 @use "controls/flex";
 @use "controls/grid";
 @use "controls/card";

package/scss/themes/_blueprint-surfaces.scss

@@ -0,0 +1,81 @@
+//
+// 블루프린트 모눈 그리드 면 — body(앱 배경)와 chrome(사이드바·탑바)에만 적용.
+// 콘텐츠(카드·시트·폼·드롭다운·모달) 내부는 무지(가독 우선) — 브랜드 패턴과 동일.
+//
+// ⚠ 언레이어드(@layer 밖)로 둔다. 면 배경은 컴포넌트 스타일(언레이어드)이
+//   `background: var(--theme-gray-lightest)` 같은 단축으로 background-image 를 none 으로
+//   리셋하므로, 같은(언레이어드) 우선순위에서 더 높은 명시도의 자손 셀렉터로 background-image
+//   만 다시 얹어야 그리드가 살아남는다. background-color 는 컴포넌트 단축이 그대로 유지한다.
+//
+
+// 모눈: 24px 헤어라인 + 120px 메이저
+@mixin grid-image($strong, $weak) {
+  background-image:
+    linear-gradient(#{$strong} 1px, transparent 1px),
+    linear-gradient(90deg, #{$strong} 1px, transparent 1px),
+    linear-gradient(#{$weak} 1px, transparent 1px),
+    linear-gradient(90deg, #{$weak} 1px, transparent 1px);
+  background-size:
+    120px 120px,
+    120px 120px,
+    24px 24px,
+    24px 24px;
+}
+
+body.sd-theme-blueprint,
+.sd-theme-blueprint sd-sheet > ._sheet-container {
+  @include grid-image(rgba(28, 62, 156, 0.055), rgba(28, 62, 156, 0.022));
+}
+
+.sd-theme-blueprint sd-sheet > ._sheet-container > table {
+  box-shadow: 1px 1px 0 rgba(28, 62, 156, 0.1);
+}
+
+.sd-theme-blueprint .card {
+  border: 1px solid var(--border-color-default);
+  box-shadow: 3px 3px 0 rgba(28, 62, 156, 0.1);
+
+  &:hover,
+  &:focus-within {
+    box-shadow: 5px 5px 0 rgba(28, 62, 156, 0.14);
+  }
+}
+
+.sd-theme-blueprint sd-permission-table table > * > tr > * {
+  border-bottom: 1px solid var(--border-color-lighter);
+}
+
+.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="first"] > *._before,
+.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="first"] > *._title,
+.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="first"] > *._after {
+  background: var(--trans-lighter);
+  border-top: 1px solid var(--border-color-default);
+  border-bottom: 1px solid var(--border-color-default);
+  color: var(--text-trans-default);
+  font-weight: 700;
+
+  > * {
+    color: var(--text-trans-default) !important;
+  }
+}
+
+// 하위 depth 틴트(info/warning/success lightest) 제거 → 무지, 행 헤어라인으로만 구분
+.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="info"] > *._title,
+.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="info"] > *._after,
+.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="warning"] > *._title,
+.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="warning"] > *._after,
+.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="success"] > *._title,
+.sd-theme-blueprint sd-permission-table table > * > tr[data-sd-theme="success"] > *._after {
+  background: transparent;
+}
+
+.sd-theme-blueprint {
+  sd-modal > ._dialog > ._header {
+    background: var(--theme-primary-default);
+    color: var(--text-trans-rev-default);
+  }
+
+  sd-crud-detail > sd-base-container > sd-busy-container > .bg-control > .main-align-end {
+    background: var(--theme-gray-lightest);
+  }
+}

package/scss/themes/_variables-blueprint.scss

@@ -0,0 +1,95 @@
+@use "sass:map";
+@use "sass:color";
+@use "../commons/colors";
+
+$paper: (
+  theme: (
+    "gray": (
+      lightest: colors.get(stone, 50),
+      lighter: colors.get(stone, 100),
+      light: colors.get(stone, 300),
+      default: colors.get(stone, 500),
+      dark: colors.get(stone, 600),
+      darker: colors.get(stone, 700),
+      darkest: colors.get(stone, 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, 50),
+      lighter: colors.get(orange, 100),
+      light: colors.get(orange, 200),
+      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)),
+);

package/scss/themes/_variables-dark.scss

@@ -1,30 +1,17 @@
 @use "sass:map";
 @use "sass:color";
-
-@use "../commons/variables";
-
-@function color-map($base) {
-  @return (
-    darkest: color.mix(white, $base, 80%),
-    darker: color.mix(white, $base, 60%),
-    dark: color.mix(white, $base, 40%),
-    default: color.mix(black, $base, 20%),
-    light: color.mix(black, $base, 55%),
-    lighter: color.mix(black, $base, 70%),
-    lightest: color.mix(black, $base, 80%)
-  );
-}
+@use "../commons/colors";
 
 $vars: (
   theme: (
-    "gray": color-map(map.get(variables.$colors, gray)),
-    blue-gray: color-map(map.get(variables.$colors, slate)),
-    primary: color-map(map.get(variables.$colors, blue)),
-    secondary: color-map(map.get(variables.$colors, blue)),
-    info: color-map(map.get(variables.$colors, cyan)),
-    success: color-map(map.get(variables.$colors, lime)),
-    warning: color-map(map.get(variables.$colors, orange)),
-    danger: color-map(map.get(variables.$colors, red)),
+    "gray": colors.variants-dark(colors.get(gray)),
+    blue-gray: colors.variants-dark(colors.get(slate)),
+    primary: colors.variants-dark(colors.get(blue)),
+    secondary: colors.variants-dark(colors.get(blue)),
+    info: colors.variants-dark(colors.get(cyan)),
+    success: colors.variants-dark(colors.get(lime)),
+    warning: colors.variants-dark(colors.get(orange)),
+    danger: colors.variants-dark(colors.get(red)),
   ),
   trans: (
     darkest: rgba(255, 255, 255, 0.5),

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

@@ -40,14 +40,14 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           width: 100%;
 
           background: var(--control-color);
-          border-color: var(--border-color-light);
+          border-color: var(--theme-primary-default);
           border-radius: var(--border-radius-default);
 
           font-weight: bold;
           text-align: center;
           cursor: pointer;
 
-          transition: 0.1s linear;
+          transition: var(--animation-duration) linear;
           transition-property: border, background;
 
           &:hover {

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

@@ -62,7 +62,7 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
 
           width: calc(var(--font-size-default) + 2px);
           height: calc(var(--font-size-default) + 2px);
-          border: 1px solid var(--trans-light);
+          border: 1px solid var(--border-color-light);
           background: var(--theme-secondary-lightest);
 
           > ._indicator {
@@ -114,14 +114,9 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
               }
             }
 
-            &:focus {
-              > ._indicator_rect {
-                border-color: var(--theme-#{$key}-default);
-              }
-            }
-
             &[data-sd-checked="true"] {
               > ._indicator_rect {
+                border-color: var(--theme-#{$key}-default);
                 background: var(--theme-#{$key}-default);
 
                 > ._indicator {
@@ -129,6 +124,12 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
                 }
               }
             }
+
+            &:focus {
+              > ._indicator_rect {
+                border-color: var(--theme-#{$key}-dark);
+              }
+            }
           }
         }
 
@@ -138,15 +139,16 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
             border-color: var(--text-trans-lightest);
           }
 
-          &:focus {
+          &[data-sd-checked="true"] {
             > ._indicator_rect {
-              border-color: var(--text-trans-default);
+              border-color: var(--theme-primary-default);
+              background: var(--theme-primary-default);
             }
           }
 
-          &[data-sd-checked="true"] {
+          &:focus {
             > ._indicator_rect {
-              background: var(--theme-primary-default);
+              border-color: var(--theme-primary-dark);
             }
           }
         }

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

@@ -45,6 +45,8 @@ export class SdCollapseIcon {
   });
 
   transitionStyle = computed(() => {
-    return this.open() ? "transform 0.1s ease-out" : "transform 0.1s ease-in";
+    return this.open()
+      ? "transform var(--animation-duration) ease-out"
+      : "transform var(--animation-duration) ease-in";
   });
 }

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

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

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

@@ -33,7 +33,7 @@ import { SdResizeDirective } from "../../core/events/sd-resize";
         z-index: var(--z-index-dropdown);
         opacity: 0;
         transform: translateY(-0.625rem);
-        transition: 0.1s linear;
+        transition: var(--animation-duration) linear;
         transition-property: transform, opacity;
         pointer-events: none;
         background: var(--control-color);
@@ -70,7 +70,7 @@ import { SdResizeDirective } from "../../core/events/sd-resize";
           opacity: 1;
           pointer-events: auto;
           transform: none;
-          animation: sd-dropdown-slide-up 0.2s ease-out;
+          animation: sd-dropdown-slide-up var(--animation-duration) ease-out;
           @include mixins.elevation(8);
         }
       }

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

@@ -56,6 +56,7 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
         > textarea,
         > ._contents {
           @include mixins.form-control-base();
+          font-family: var(--font-family-field);
           resize: none;
 
           overflow: auto;
@@ -79,6 +80,10 @@ import { setupInvalid } from "../../core/validation/setupInvalid";
           }
         }
 
+        > ._contents > pre {
+          font-family: inherit;
+        }
+
         &:not([data-sd-inset="true"]):not([data-sd-disabled="true"]) > ._contents {
           height: 0;
           max-height: 0;

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

@@ -1,10 +1,16 @@
+import { isPlatformBrowser } from "@angular/common";
 import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   computed,
+  effect,
+  ElementRef,
+  inject,
   input,
   model,
+  PLATFORM_ID,
+  viewChild,
   ViewEncapsulation,
 } from "@angular/core";
 import { setupInvalid } from "../../core/validation/setupInvalid";
@@ -40,6 +46,7 @@ import {
     </div>
     @if (!readonly() && !disabled()) {
       <input
+        #inputEl
         [style]="inputStyle()"
         [class]="inputClass()"
         [attr.title]="title() ?? placeholder()"
@@ -48,11 +55,11 @@ import {
         [attr.max]="max()"
         [type]="controlType()"
         [attr.inputmode]="type() === 'number' ? 'numeric' : undefined"
-        [value]="controlValue()"
         [attr.autocomplete]="autocomplete()"
         [attr.step]="controlStep()"
         (input)="onInput($event)"
         (paste)="onInputPaste($event)"
+        (blur)="onBlur($event)"
       />
     }
   `,
@@ -70,17 +77,18 @@ import {
         > input,
         > ._contents {
           @include mixins.form-control-base();
+          font-family: var(--font-family-field);
 
           overflow: auto;
           width: 100%;
 
-          border: 1px solid var(--trans-lighter);
+          border: 1px solid var(--border-color-light);
           border-radius: var(--border-radius-default);
           background: var(--theme-secondary-lightest);
 
           &:focus {
             outline: none;
-            border-color: var(--theme-secondary-default);
+            border-color: var(--theme-primary-default);
           }
 
           &[type="date"],
@@ -114,6 +122,10 @@ import {
           display: none;
         }
 
+        > ._contents > pre {
+          font-family: inherit;
+        }
+
         &[data-sd-type="number"] {
           > input,
           > ._contents {
@@ -253,7 +265,7 @@ import {
         &[data-sd-disabled="true"] {
           > ._contents {
             display: block;
-            background: var(--theme-gray-lightest);
+            background: var(--trans-lightest);
             color: var(--text-trans-light);
           }
 
@@ -316,6 +328,8 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
     "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
   >();
 
+  private readonly _inputElRef = viewChild<ElementRef<HTMLInputElement>>("inputEl");
+
   private readonly _handler = computed(() => textfieldTypeHandlers[this.type()]);
 
   controlType = computed(() => this._handler().controlType);
@@ -340,6 +354,21 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
   });
 
   constructor() {
+    if (isPlatformBrowser(inject(PLATFORM_ID))) {
+      effect(() => {
+        const controlValue = this.controlValue();
+        const inputEl = this._inputElRef()?.nativeElement;
+        if (inputEl == null) return;
+
+        // 편집(포커스) 중에는 DOM 을 되쓰면 사용자 입력(세그먼트·캐럿·IME 조합)이 깨지므로 생략
+        if (document.activeElement === inputEl) return;
+
+        if (inputEl.value !== controlValue) {
+          inputEl.value = controlValue;
+        }
+      });
+    }
+
     setupInvalid(() => {
       const value = this.value();
       const handlerErrors = this._handler().validate(value, {
@@ -379,6 +408,13 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
     this.value.set(parsed as SdTextfieldTypes[K]);
   }
 
+  onBlur(event: FocusEvent): void {
+    // 편집 종료 시 모델 기준값으로 동기화 (number 콤마 포맷 반영, date 미완성 입력 정리)
+    // date 미완성 입력은 input.value 가 "" 라 비교 없이 무조건 되써야 남은 세그먼트가 정리됨
+    const inputEl = event.target as HTMLInputElement;
+    inputEl.value = this.controlValue();
+  }
+
   onInputPaste(event: ClipboardEvent): void {
     event.preventDefault();
     const text = event.clipboardData?.getData("text/plain").trim();

package/src/controls/list/sd-list-item.ts

@@ -84,12 +84,12 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           &:focus-visible {
             outline: none;
             transition: background var(--animation-duration) ease-out;
-            background: var(--trans-lighter);
+            background: var(--trans-light);
           }
         }
 
         &[data-sd-selected="true"] > ._content {
-          background: var(--trans-lighter);
+          background: var(--trans-light);
           font-weight: bold;
         }
 
@@ -97,7 +97,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           color: var(--text-trans-default);
 
           &:hover {
-            background: var(--trans-lighter);
+            background: var(--trans-light);
           }
         }
 
@@ -128,13 +128,13 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
           &:not([data-sd-readonly="true"]) {
             > ._content:hover {
               transition: background var(--animation-duration) ease-out;
-              background: var(--trans-lighter);
+              background: var(--trans-light);
             }
           }
 
           // 깊이별 들여쓰기: accordion 항목의 자식 리스트를 한 칸씩 누적 들여씀.
           // (flat 항목의 자식 리스트는 들여쓰지 않음)
-          > sd-collapse > ._content > ._children > sd-list {
+          > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {
             padding-left: 1.5em;
           }
         }

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

@@ -22,7 +22,7 @@ import { setupRipple } from "../../core/ripple/setupRipple";
         font-weight: bold;
         cursor: pointer;
         color: var(--theme-primary-default);
-        transition: background 0.1s linear;
+        transition: background var(--animation-duration) linear;
 
         &:hover {
           color: var(--theme-primary-darker);