@simplysm/angular 14.0.100 → 14.0.101

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

@@ -40,17 +40,18 @@ import { SdGap } from "../gap/sd-gap";
         display: block;
         padding: var(--gap-sm) var(--gap-default);
         cursor: pointer;
-        transition: background 0.1s ease-in;
+        font-family: var(--font-family-field);
+        transition: background var(--animation-duration) ease-in;
         background: var(--control-color);
 
         &:hover {
-          transition: background 0.1s ease-out;
+          transition: background var(--animation-duration) ease-out;
           background: rgba(0, 0, 0, 0.07);
         }
 
         &:focus {
           outline: none;
-          transition: background 0.1s ease-out;
+          transition: background var(--animation-duration) ease-out;
           background: rgba(0, 0, 0, 0.07);
         }
 

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

@@ -113,7 +113,7 @@ export type SelectModeValue<T> = {
           display: flex;
           overflow: hidden;
 
-          border: 1px solid var(--trans-lighter);
+          border: 1px solid var(--border-color-light);
           border-radius: var(--border-radius-default);
           background: var(--theme-secondary-lightest);
 
@@ -129,6 +129,7 @@ export type SelectModeValue<T> = {
             flex-grow: 1;
             padding: var(--gap-sm) var(--gap-default);
             cursor: pointer;
+            font-family: var(--font-family-field);
 
             > ._sd-select-control-content {
               flex: 1;

package/src/core/busy/sd-busy-container.ts

@@ -103,7 +103,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
               content: "";
               height: 4px;
               width: 100%;
-              transition: 0.1s ease-in;
+              transition: var(--animation-duration) ease-in;
               transition-property: transform;
               transform-origin: left;
               transform: scaleX(0);
@@ -124,7 +124,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
         &[data-sd-type="spinner"] {
           > ._screen > ._rect {
             transform: translateY(-100%);
-            transition: 0.1s ease-in;
+            transition: var(--animation-duration) ease-in;
             transition-property: transform;
 
             > ._indicator {
@@ -157,7 +157,7 @@ import { SdBusyProvider, type SdBusyType } from "./sd-busy.provider";
           &[data-sd-busy="true"] {
             > ._screen > ._rect {
               transform: none;
-              transition: 0.1s ease-out;
+              transition: var(--animation-duration) ease-out;
             }
           }
         }

package/src/core/directive-input-signals.ts

@@ -15,15 +15,6 @@ export type UndefToOptional<T> = {
  * 컴포넌트/디렉티브의 InputSignal 프로퍼티에서 값 타입을 추출하는 유틸리티 타입
  *
  * InputSignal이 아닌 프로퍼티는 제외되며, undefined를 포함하는 필드는 optional로 변환된다.
- *
- * @example
- * ```typescript
- * class MyComponent {
- *   name = input.required<string>();
- *   age = input(0);
- * }
- * // DirectiveInputSignals<MyComponent> = { name: string; age: number }
- * ```
  */
 export type DirectiveInputSignals<T> = UndefToOptional<{
   [P in keyof T as T[P] extends InputSignal<any> ? P : never]: T[P] extends InputSignal<

package/src/core/provideSdAngular.ts

@@ -67,6 +67,20 @@ export function provideSdAngular(opt: { clientName: string }): EnvironmentProvid
         }
       });
 
+      const savedBlueprint = sdLocalStorage.get("sd-theme-blueprint");
+      if (savedBlueprint != null) {
+        sdTheme.blueprint.set(savedBlueprint);
+      }
+
+      let prevBlueprint = sdTheme.blueprint();
+      effect(() => {
+        const blueprint = sdTheme.blueprint();
+        if (blueprint !== prevBlueprint) {
+          sdLocalStorage.set("sd-theme-blueprint", blueprint);
+          prevBlueprint = blueprint;
+        }
+      });
+
       const savedFontSize = sdLocalStorage.get("sd-theme-font-size");
       if (savedFontSize != null) {
         sdTheme.fontSize.set(savedFontSize);

package/src/core/ripple/setupRipple.ts

@@ -42,7 +42,7 @@ export function setupRipple(enableFn?: () => boolean): void {
         top: y - size + "px",
         left: x - size + "px",
 
-        transition: "var(--animation-duration) linear",
+        transition: "calc(2 * var(--animation-duration)) linear",
         transitionProperty: "transform, opacity",
         transform: "scale(0.1)",
       });

package/src/data/crud/sd-base-container.ts

@@ -55,9 +55,9 @@ import { NgTemplateOutlet } from "@angular/common";
     </sd-busy-container>
 
     <ng-template #content>
-      <div class="flex-column fill">
+      <div class="flex-column fill bg-control">
         @if (commandTplRef()) {
-          <div class="p-sm-default flex-row gap-default  bdb bdb-color-lighter bg-theme-gray-lightest">
+          <div class="p-sm-default flex-row gap-default  bdb bdb-color-lighter">
             <ng-template [ngTemplateOutlet]="commandTplRef()" />
           </div>
         }
@@ -70,7 +70,7 @@ import { NgTemplateOutlet } from "@angular/common";
 
         @if (bottomCommandTplRef()) {
           <div
-            class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter bg-theme-gray-lightest"
+            class="p-sm-default flex-row main-align-end gap-sm bdt bdt-theme-gray-lighter"
           >
             <ng-template [ngTemplateOutlet]="bottomCommandTplRef()" />
           </div>

package/src/data/kanban/sd-kanban-lane.ts

@@ -102,7 +102,7 @@ import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
               height: 0;
               margin-bottom: 0;
               visibility: hidden;
-              transition: 0.1s linear;
+              transition: var(--animation-duration) linear;
               transition-property: height, margin-bottom, visibility;
             }
           }

package/src/data/kanban/sd-kanban.ts

@@ -91,7 +91,7 @@ import { SdResizeDirective, type SdResizeEvent } from "../../core/events/sd-resi
           height: 0;
           margin-bottom: 0;
           visibility: hidden;
-          transition: 0.1s linear;
+          transition: var(--animation-duration) linear;
           transition-property: height, margin-bottom, visibility;
         }
 

package/src/data/sheet/sd-sheet.ts

@@ -361,9 +361,9 @@ import { SdEvents } from "../../core/events/sd-events";
       $z-index-focus-row-indicator: 6;
       $z-index-resize-indicator: 7;
 
-      $border-color: var(--theme-gray-lighter);
-      $border-color-dark: var(--theme-gray-lighter);
-      $border-color-darker: var(--theme-gray-light);
+      $border-color: var(--border-color-lighter);
+      $border-color-dark: var(--border-color-lighter);
+      $border-color-darker: var(--border-color-light);
 
       $border-radius: var(--border-radius-default);
 
@@ -500,6 +500,7 @@ import { SdEvents } from "../../core/events/sd-events";
             }
 
             > tbody > tr > td {
+              font-family: var(--font-family-field);
               background: var(--control-color);
               vertical-align: top;
 

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

@@ -189,6 +189,7 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
         > ._editor-container {
           padding: var(--gap-sm);
           min-height: 6.25rem;
+          font-family: var(--font-family-field);
 
           > .tiptap {
             outline: none;

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

@@ -5,6 +5,9 @@ import { isPlatformBrowser } from "@angular/common";
 export class SdThemeProvider {
   dark = signal<boolean>(false);
 
+  // 블루프린트(엔지니어링 도면) 테마 — dark 토글과 직교. dark 와 조합해 4면을 만든다.
+  blueprint = signal<boolean>(false);
+
   readonly fontSizePresets: readonly number[] = [12, 14, 16, 20, 24, 28];
 
   fontSize = signal<number>(12);
@@ -17,6 +20,10 @@ export class SdThemeProvider {
       document.body.classList.toggle("sd-theme-dark", this.dark());
     });
 
+    effect(() => {
+      document.body.classList.toggle("sd-theme-blueprint", this.blueprint());
+    });
+
     effect(() => {
       document.documentElement.style.fontSize = `${this.fontSize()}px`;
     });

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

@@ -54,6 +54,10 @@ import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
             <span>다크 모드</span>
             <sd-switch [(value)]="_sdTheme.dark" />
           </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>블루프린트</span>
+            <sd-switch [(value)]="_sdTheme.blueprint" />
+          </div>
         </div>
       </sd-dropdown-popup>
     </sd-dropdown>

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

@@ -25,11 +25,11 @@ import { filter } from "rxjs";
         position: relative;
         height: 100%;
         padding-left: var(--sidebar-width);
-        transition: padding-left 0.1s ease-out;
+        transition: padding-left var(--animation-duration) ease-out;
 
         &[data-sd-toggle="true"] {
           padding-left: 0;
-          transition: padding-left 0.1s ease-in;
+          transition: padding-left var(--animation-duration) ease-in;
         }
 
         > ._backdrop {
@@ -52,7 +52,7 @@ import { filter } from "rxjs";
             background: var(--background-rev-color);
             opacity: 0;
             pointer-events: none;
-            transition: opacity 0.3s ease-in-out;
+            transition: opacity var(--animation-duration) ease-in-out;
           }
 
           &[data-sd-toggle="true"] {

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

@@ -33,25 +33,25 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
         width: var(--sidebar-width);
         height: 100%;
         //background: var(--control-color);
-        background: var(--theme-gray-lightest);
+        //background: var(--theme-gray-lightest);
         //border-right: 1px solid var(--border-color-lighter);
 
         @media not all and (max-width: variables.$breakpoint-mobile) {
-          transition: transform 0.1s ease-out;
+          transition: transform var(--animation-duration) ease-out;
 
           &[data-sd-toggle="true"] {
             transform: translateX(-100%);
-            transition: transform 0.1s ease-in;
+            transition: transform var(--animation-duration) ease-in;
           }
         }
 
         @media all and (max-width: variables.$breakpoint-mobile) {
-          transition: transform 0.3s ease-in;
+          transition: transform var(--animation-duration) ease-in;
           transform: translateX(-100%);
 
           &[data-sd-toggle="true"] {
             transform: none;
-            transition: transform 0.3s ease-out;
+            transition: transform var(--animation-duration) ease-out;
             @include mixins.elevation(16);
           }
         }

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

@@ -43,7 +43,7 @@ import { tablerMenu2 } from "@ng-icons/tabler-icons";
         user-select: none;
 
         //background: var(--control-color);
-        background: var(--theme-gray-lightest);
+        //background: var(--theme-gray-lightest);
         color: var(--text-trans-default);
         border-bottom: 1px solid var(--border-color-lighter);
         padding-left: var(--gap-xs);