@simplysm/angular 14.0.100 → 14.0.102

package/scss/commons/_mixins.scss

@@ -1,129 +1,129 @@
-@use "./variables";
-@use "sass:meta";
-@use "sass:map";
-
-@mixin writeVars($value, $prevKey) {
-  @if meta.type-of($value) == map {
-    @each $key, $val in $value {
-      @if $prevKey == "" {
-        @include writeVars($val, $key);
-      } @else {
-        @include writeVars($val, $prevKey + "-" + $key);
-      }
-    }
-  } @else {
-    --#{$prevKey}: #{$value};
-  }
-}
-
-@mixin elevation($value) {
-  @if $value == none or $value == 0 {
-    box-shadow: none;
-  } @else if $value < 0 {
-    box-shadow:
-      inset 0 0 0.1667rem var(--trans-lighter),
-      inset
-        0
-        calc(#{$value * -1} * var(--elevation-size))
-        calc(#{$value * -1} * 4 * var(--elevation-size))
-        var(--trans-lighter);
-  } @else {
-    box-shadow:
-      0
-        calc(#{$value} * var(--elevation-size))
-        calc(#{$value} * 4 * var(--elevation-size))
-        var(--trans-lighter),
-      0
-        var(--elevation-size)
-        var(--elevation-size)
-        var(--trans-lighter);
-  }
-}
-
-@mixin form-control-base() {
-  display: block;
-  padding: var(--gap-sm) var(--gap-default);
-  border: 1px solid transparent;
-
-  font-size: var(--font-size-default);
-  font-family: var(--font-family);
-  font-variant-numeric: tabular-nums;
-  line-height: var(--line-height);
-
-  color: var(--text-trans-default);
-}
-
-@mixin help() {
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
-  cursor: help;
-}
-
-@mixin border-direction-variants($dir, $d) {
-  .bd#{$d} {
-    border-#{$dir}: 1px solid !important;
-  }
-
-  @each $key, $val in map.get(variables.$vars, theme) {
-    @each $key1, $val1 in $val {
-      .bd#{$d}-theme-#{$key}-#{$key1} {
-        border-#{$dir}-color: var(--theme-#{$key}-#{$key1}) !important;
-      }
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, trans) {
-    .bd#{$d}-trans-#{$key} {
-      border-#{$dir}-color: var(--trans-#{$key}) !important;
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, border-color) {
-    .bd#{$d}-color-#{$key} {
-      border-#{$dir}-color: var(--border-color-#{$key}) !important;
-    }
-  }
-
-  .bd#{$d}-none {
-    border-#{$dir}: none !important;
-  }
-
-  .bd#{$d}-transparent {
-    border-#{$dir}-color: transparent !important;
-  }
-}
-
-@mixin flex-direction($direction, $defaultGap: null) {
-  flex-direction: $direction;
-
-  @if ($defaultGap) {
-    gap: $defaultGap;
-  }
-
-  // Chromium 84이하 / WebKit 61 (Flex Gap 미지원) .gap-*에 대한 폴백
-  @supports not (appearance: auto) {
-    @if ($defaultGap) {
-      gap: 0;
-      > * + * {
-        @if ($direction == row) {
-          margin-left: $defaultGap;
-        } @else {
-          margin-top: $defaultGap;
-        }
-      }
-    }
-
-    @each $key, $val in map.get(variables.$vars, gap) {
-      &.gap-#{$key} {
-        gap: 0;
-        > * + * {
-          @if ($direction == row) {
-            margin-left: var(--gap-#{$key});
-          } @else {
-            margin-top: var(--gap-#{$key});
-          }
-        }
-      }
-    }
-  }
-}
+@use "./variables";
+@use "sass:meta";
+@use "sass:map";
+
+@mixin writeVars($value, $prevKey) {
+  @if meta.type-of($value) == map {
+    @each $key, $val in $value {
+      @if $prevKey == "" {
+        @include writeVars($val, $key);
+      } @else {
+        @include writeVars($val, $prevKey + "-" + $key);
+      }
+    }
+  } @else {
+    --#{$prevKey}: #{$value};
+  }
+}
+
+// blur 항에 --elevation-blur-mult(기본 1, 항등)를 곱해 테마별로 blur 제거 가능.
+// 블루프린트 테마는 이 토큰을 0으로 덮어 하드 오프셋(blur 0) 섀도를 만든다.
+@mixin elevation($value) {
+  @if $value == none or $value == 0 {
+    box-shadow: none;
+  } @else if $value < 0 {
+    box-shadow:
+      inset 0 0 calc(0.1667rem * var(--elevation-blur-mult)) var(--trans-lighter),
+      inset
+        0
+        calc(#{$value * -1} * var(--elevation-size))
+        calc(#{$value * -1} * 4 * var(--elevation-size) * var(--elevation-blur-mult))
+        var(--trans-lighter);
+  } @else {
+    box-shadow:
+      0
+        calc(#{$value} * var(--elevation-size))
+        calc(#{$value} * 4 * var(--elevation-size) * var(--elevation-blur-mult))
+        var(--trans-lighter),
+      0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult))
+        var(--trans-lighter);
+  }
+}
+
+@mixin form-control-base() {
+  display: block;
+  padding: var(--gap-sm) var(--gap-default);
+  border: 1px solid transparent;
+
+  font-size: var(--font-size-default);
+  font-family: var(--font-family);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--line-height);
+
+  color: var(--text-trans-default);
+}
+
+@mixin help() {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  cursor: help;
+}
+
+@mixin border-direction-variants($dir, $d) {
+  .bd#{$d} {
+    border-#{$dir}: 1px solid !important;
+  }
+
+  @each $key, $val in map.get(variables.$vars, theme) {
+    @each $key1, $val1 in $val {
+      .bd#{$d}-theme-#{$key}-#{$key1} {
+        border-#{$dir}-color: var(--theme-#{$key}-#{$key1}) !important;
+      }
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, trans) {
+    .bd#{$d}-trans-#{$key} {
+      border-#{$dir}-color: var(--trans-#{$key}) !important;
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, border-color) {
+    .bd#{$d}-color-#{$key} {
+      border-#{$dir}-color: var(--border-color-#{$key}) !important;
+    }
+  }
+
+  .bd#{$d}-none {
+    border-#{$dir}: none !important;
+  }
+
+  .bd#{$d}-transparent {
+    border-#{$dir}-color: transparent !important;
+  }
+}
+
+@mixin flex-direction($direction, $defaultGap: null) {
+  flex-direction: $direction;
+
+  @if ($defaultGap) {
+    gap: $defaultGap;
+  }
+
+  // Chromium 84이하 / WebKit 61 (Flex Gap 미지원) .gap-*에 대한 폴백
+  @supports not (appearance: auto) {
+    @if ($defaultGap) {
+      gap: 0;
+      > * + * {
+        @if ($direction == row) {
+          margin-left: $defaultGap;
+        } @else {
+          margin-top: $defaultGap;
+        }
+      }
+    }
+
+    @each $key, $val in map.get(variables.$vars, gap) {
+      &.gap-#{$key} {
+        gap: 0;
+        > * + * {
+          @if ($direction == row) {
+            margin-left: var(--gap-#{$key});
+          } @else {
+            margin-top: var(--gap-#{$key});
+          }
+        }
+      }
+    }
+  }
+}

package/scss/commons/_theme-variables.scss

@@ -1,12 +1,14 @@
 @use "mixins";
 @use "variables";
+@use "colors";
 @use "../themes/variables-dark" as dark;
+@use "../themes/variables-blueprint" as blueprint;
 
 @layer base, theme-variant, utilities;
 
 @layer base {
   :root {
-    @include mixins.writeVars(variables.$colors, "color");
+    @include mixins.writeVars(colors.$colors, "color");
     @include mixins.writeVars(variables.$vars, "");
   }
 }
@@ -20,4 +22,9 @@
   .sd-theme-dark img:not(.no-invert) {
     filter: invert(1) hue-rotate(180deg);
   }
+
+  // 블루프린트 — 다크 토글과 직교. 트레이싱지(라이트 면)
+  .sd-theme-blueprint {
+    @include mixins.writeVars(blueprint.$paper, "");
+  }
 }

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,89 @@
+//
+// 블루프린트 모눈 그리드 면 — 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);
+
+    > ._close-btn {
+      color: var(--text-trans-rev-dark);
+
+      &:hover {
+        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(zinc, 50),
+      lighter: colors.get(zinc, 100),
+      light: colors.get(zinc, 300),
+      default: colors.get(zinc, 500),
+      dark: colors.get(zinc, 600),
+      darker: colors.get(zinc, 700),
+      darkest: colors.get(zinc, 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 {