@simplysm/angular 14.0.100 → 14.0.101

package/scss/commons/_colors.scss

@@ -0,0 +1,326 @@
+@use "sass:map";
+@use "sass:color";
+
+// oklch 미지원 브라우저 호환을 위해 빌드 타임에 rgb 로 변환해 저장
+@function to-rgb($oklch-color) {
+  @return color.to-space($oklch-color, rgb);
+}
+
+// Tailwind CSS v4 color palette (oklch 원본 → rgb 변환 저장)
+$colors: (
+  red: (
+    50: to-rgb(oklch(97.1% 0.013 17.38)),
+    100: to-rgb(oklch(93.6% 0.032 17.717)),
+    200: to-rgb(oklch(88.5% 0.062 18.334)),
+    300: to-rgb(oklch(80.8% 0.114 19.571)),
+    400: to-rgb(oklch(70.4% 0.191 22.216)),
+    500: to-rgb(oklch(63.7% 0.237 25.331)),
+    600: to-rgb(oklch(57.7% 0.245 27.325)),
+    700: to-rgb(oklch(50.5% 0.213 27.518)),
+    800: to-rgb(oklch(44.4% 0.177 26.899)),
+    900: to-rgb(oklch(39.6% 0.141 25.723)),
+    950: to-rgb(oklch(25.8% 0.092 26.042)),
+  ),
+  orange: (
+    50: to-rgb(oklch(98% 0.016 73.684)),
+    100: to-rgb(oklch(95.4% 0.038 75.164)),
+    200: to-rgb(oklch(90.1% 0.076 70.697)),
+    300: to-rgb(oklch(83.7% 0.128 66.29)),
+    400: to-rgb(oklch(75% 0.183 55.934)),
+    500: to-rgb(oklch(70.5% 0.213 47.604)),
+    600: to-rgb(oklch(64.6% 0.222 41.116)),
+    700: to-rgb(oklch(55.3% 0.195 38.402)),
+    800: to-rgb(oklch(47% 0.157 37.304)),
+    900: to-rgb(oklch(40.8% 0.123 38.172)),
+    950: to-rgb(oklch(26.6% 0.079 36.259)),
+  ),
+  amber: (
+    50: to-rgb(oklch(98.7% 0.022 95.277)),
+    100: to-rgb(oklch(96.2% 0.059 95.617)),
+    200: to-rgb(oklch(92.4% 0.12 95.746)),
+    300: to-rgb(oklch(87.9% 0.169 91.605)),
+    400: to-rgb(oklch(82.8% 0.189 84.429)),
+    500: to-rgb(oklch(76.9% 0.188 70.08)),
+    600: to-rgb(oklch(66.6% 0.179 58.318)),
+    700: to-rgb(oklch(55.5% 0.163 48.998)),
+    800: to-rgb(oklch(47.3% 0.137 46.201)),
+    900: to-rgb(oklch(41.4% 0.112 45.904)),
+    950: to-rgb(oklch(27.9% 0.077 45.635)),
+  ),
+  yellow: (
+    50: to-rgb(oklch(98.7% 0.026 102.212)),
+    100: to-rgb(oklch(97.3% 0.071 103.193)),
+    200: to-rgb(oklch(94.5% 0.129 101.54)),
+    300: to-rgb(oklch(90.5% 0.182 98.111)),
+    400: to-rgb(oklch(85.2% 0.199 91.936)),
+    500: to-rgb(oklch(79.5% 0.184 86.047)),
+    600: to-rgb(oklch(68.1% 0.162 75.834)),
+    700: to-rgb(oklch(55.4% 0.135 66.442)),
+    800: to-rgb(oklch(47.6% 0.114 61.907)),
+    900: to-rgb(oklch(42.1% 0.095 57.708)),
+    950: to-rgb(oklch(28.6% 0.066 53.813)),
+  ),
+  lime: (
+    50: to-rgb(oklch(98.6% 0.031 120.757)),
+    100: to-rgb(oklch(96.7% 0.067 122.328)),
+    200: to-rgb(oklch(93.8% 0.127 124.321)),
+    300: to-rgb(oklch(89.7% 0.196 126.665)),
+    400: to-rgb(oklch(84.1% 0.238 128.85)),
+    500: to-rgb(oklch(76.8% 0.233 130.85)),
+    600: to-rgb(oklch(64.8% 0.2 131.684)),
+    700: to-rgb(oklch(53.2% 0.157 131.589)),
+    800: to-rgb(oklch(45.3% 0.124 130.933)),
+    900: to-rgb(oklch(40.5% 0.101 131.063)),
+    950: to-rgb(oklch(27.4% 0.072 132.109)),
+  ),
+  green: (
+    50: to-rgb(oklch(98.2% 0.018 155.826)),
+    100: to-rgb(oklch(96.2% 0.044 156.743)),
+    200: to-rgb(oklch(92.5% 0.084 155.995)),
+    300: to-rgb(oklch(87.1% 0.15 154.449)),
+    400: to-rgb(oklch(79.2% 0.209 151.711)),
+    500: to-rgb(oklch(72.3% 0.219 149.579)),
+    600: to-rgb(oklch(62.7% 0.194 149.214)),
+    700: to-rgb(oklch(52.7% 0.154 150.069)),
+    800: to-rgb(oklch(44.8% 0.119 151.328)),
+    900: to-rgb(oklch(39.3% 0.095 152.535)),
+    950: to-rgb(oklch(26.6% 0.065 152.934)),
+  ),
+  emerald: (
+    50: to-rgb(oklch(97.9% 0.021 166.113)),
+    100: to-rgb(oklch(95% 0.052 163.051)),
+    200: to-rgb(oklch(90.5% 0.093 164.15)),
+    300: to-rgb(oklch(84.5% 0.143 164.978)),
+    400: to-rgb(oklch(76.5% 0.177 163.223)),
+    500: to-rgb(oklch(69.6% 0.17 162.48)),
+    600: to-rgb(oklch(59.6% 0.145 163.225)),
+    700: to-rgb(oklch(50.8% 0.118 165.612)),
+    800: to-rgb(oklch(43.2% 0.095 166.913)),
+    900: to-rgb(oklch(37.8% 0.077 168.94)),
+    950: to-rgb(oklch(26.2% 0.051 172.552)),
+  ),
+  teal: (
+    50: to-rgb(oklch(98.4% 0.014 180.72)),
+    100: to-rgb(oklch(95.3% 0.051 180.801)),
+    200: to-rgb(oklch(91% 0.096 180.426)),
+    300: to-rgb(oklch(85.5% 0.138 181.071)),
+    400: to-rgb(oklch(77.7% 0.152 181.912)),
+    500: to-rgb(oklch(70.4% 0.14 182.503)),
+    600: to-rgb(oklch(60% 0.118 184.704)),
+    700: to-rgb(oklch(51.1% 0.096 186.391)),
+    800: to-rgb(oklch(43.7% 0.078 188.216)),
+    900: to-rgb(oklch(38.6% 0.063 188.416)),
+    950: to-rgb(oklch(27.7% 0.046 192.524)),
+  ),
+  cyan: (
+    50: to-rgb(oklch(98.4% 0.019 200.873)),
+    100: to-rgb(oklch(95.6% 0.045 203.388)),
+    200: to-rgb(oklch(91.7% 0.08 205.041)),
+    300: to-rgb(oklch(86.5% 0.127 207.078)),
+    400: to-rgb(oklch(78.9% 0.154 211.53)),
+    500: to-rgb(oklch(71.5% 0.143 215.221)),
+    600: to-rgb(oklch(60.9% 0.126 221.723)),
+    700: to-rgb(oklch(52% 0.105 223.128)),
+    800: to-rgb(oklch(45% 0.085 224.283)),
+    900: to-rgb(oklch(39.8% 0.07 227.392)),
+    950: to-rgb(oklch(30.2% 0.056 229.695)),
+  ),
+  sky: (
+    50: to-rgb(oklch(97.7% 0.013 236.62)),
+    100: to-rgb(oklch(95.1% 0.026 236.824)),
+    200: to-rgb(oklch(90.1% 0.058 230.902)),
+    300: to-rgb(oklch(82.8% 0.111 230.318)),
+    400: to-rgb(oklch(74.6% 0.16 232.661)),
+    500: to-rgb(oklch(68.5% 0.169 237.323)),
+    600: to-rgb(oklch(58.8% 0.158 241.966)),
+    700: to-rgb(oklch(50% 0.134 242.749)),
+    800: to-rgb(oklch(44.3% 0.11 240.79)),
+    900: to-rgb(oklch(39.1% 0.09 240.876)),
+    950: to-rgb(oklch(29.3% 0.066 243.157)),
+  ),
+  blue: (
+    50: to-rgb(oklch(97% 0.014 254.604)),
+    100: to-rgb(oklch(93.2% 0.032 255.585)),
+    200: to-rgb(oklch(88.2% 0.059 254.128)),
+    300: to-rgb(oklch(80.9% 0.105 251.813)),
+    400: to-rgb(oklch(70.7% 0.165 254.624)),
+    500: to-rgb(oklch(62.3% 0.214 259.815)),
+    600: to-rgb(oklch(54.6% 0.245 262.881)),
+    700: to-rgb(oklch(48.8% 0.243 264.376)),
+    800: to-rgb(oklch(42.4% 0.199 265.638)),
+    900: to-rgb(oklch(37.9% 0.146 265.522)),
+    950: to-rgb(oklch(28.2% 0.091 267.935)),
+  ),
+  indigo: (
+    50: to-rgb(oklch(96.2% 0.018 272.314)),
+    100: to-rgb(oklch(93% 0.034 272.788)),
+    200: to-rgb(oklch(87% 0.065 274.039)),
+    300: to-rgb(oklch(78.5% 0.115 274.713)),
+    400: to-rgb(oklch(67.3% 0.182 276.935)),
+    500: to-rgb(oklch(58.5% 0.233 277.117)),
+    600: to-rgb(oklch(51.1% 0.262 276.966)),
+    700: to-rgb(oklch(45.7% 0.24 277.023)),
+    800: to-rgb(oklch(39.8% 0.195 277.366)),
+    900: to-rgb(oklch(35.9% 0.144 278.697)),
+    950: to-rgb(oklch(25.7% 0.09 281.288)),
+  ),
+  violet: (
+    50: to-rgb(oklch(96.9% 0.016 293.756)),
+    100: to-rgb(oklch(94.3% 0.029 294.588)),
+    200: to-rgb(oklch(89.4% 0.057 293.283)),
+    300: to-rgb(oklch(81.1% 0.111 293.571)),
+    400: to-rgb(oklch(70.2% 0.183 293.541)),
+    500: to-rgb(oklch(60.6% 0.25 292.717)),
+    600: to-rgb(oklch(54.1% 0.281 293.009)),
+    700: to-rgb(oklch(49.1% 0.27 292.581)),
+    800: to-rgb(oklch(43.2% 0.232 292.759)),
+    900: to-rgb(oklch(38% 0.189 293.745)),
+    950: to-rgb(oklch(28.3% 0.141 291.089)),
+  ),
+  purple: (
+    50: to-rgb(oklch(97.7% 0.014 308.299)),
+    100: to-rgb(oklch(94.6% 0.033 307.174)),
+    200: to-rgb(oklch(90.2% 0.063 306.703)),
+    300: to-rgb(oklch(82.7% 0.119 306.383)),
+    400: to-rgb(oklch(71.4% 0.203 305.504)),
+    500: to-rgb(oklch(62.7% 0.265 303.9)),
+    600: to-rgb(oklch(55.8% 0.288 302.321)),
+    700: to-rgb(oklch(49.6% 0.265 301.924)),
+    800: to-rgb(oklch(43.8% 0.218 303.724)),
+    900: to-rgb(oklch(38.1% 0.176 304.987)),
+    950: to-rgb(oklch(29.1% 0.149 302.717)),
+  ),
+  fuchsia: (
+    50: to-rgb(oklch(97.7% 0.017 320.058)),
+    100: to-rgb(oklch(95.2% 0.037 318.852)),
+    200: to-rgb(oklch(90.3% 0.076 319.62)),
+    300: to-rgb(oklch(83.3% 0.145 321.434)),
+    400: to-rgb(oklch(74% 0.238 322.16)),
+    500: to-rgb(oklch(66.7% 0.295 322.15)),
+    600: to-rgb(oklch(59.1% 0.293 322.896)),
+    700: to-rgb(oklch(51.8% 0.253 323.949)),
+    800: to-rgb(oklch(45.2% 0.211 324.591)),
+    900: to-rgb(oklch(40.1% 0.17 325.612)),
+    950: to-rgb(oklch(29.3% 0.136 325.661)),
+  ),
+  pink: (
+    50: to-rgb(oklch(97.1% 0.014 343.198)),
+    100: to-rgb(oklch(94.8% 0.028 342.258)),
+    200: to-rgb(oklch(89.9% 0.061 343.231)),
+    300: to-rgb(oklch(82.3% 0.12 346.018)),
+    400: to-rgb(oklch(71.8% 0.202 349.761)),
+    500: to-rgb(oklch(65.6% 0.241 354.308)),
+    600: to-rgb(oklch(59.2% 0.249 0.584)),
+    700: to-rgb(oklch(52.5% 0.223 3.958)),
+    800: to-rgb(oklch(45.9% 0.187 3.815)),
+    900: to-rgb(oklch(40.8% 0.153 2.432)),
+    950: to-rgb(oklch(28.4% 0.109 3.907)),
+  ),
+  rose: (
+    50: to-rgb(oklch(96.9% 0.015 12.422)),
+    100: to-rgb(oklch(94.1% 0.03 12.58)),
+    200: to-rgb(oklch(89.2% 0.058 10.001)),
+    300: to-rgb(oklch(81% 0.117 11.638)),
+    400: to-rgb(oklch(71.2% 0.194 13.428)),
+    500: to-rgb(oklch(64.5% 0.246 16.439)),
+    600: to-rgb(oklch(58.6% 0.253 17.585)),
+    700: to-rgb(oklch(51.4% 0.222 16.935)),
+    800: to-rgb(oklch(45.5% 0.188 13.697)),
+    900: to-rgb(oklch(41% 0.159 10.272)),
+    950: to-rgb(oklch(27.1% 0.105 12.094)),
+  ),
+  slate: (
+    50: to-rgb(oklch(98.4% 0.003 247.858)),
+    100: to-rgb(oklch(96.8% 0.007 247.896)),
+    200: to-rgb(oklch(92.9% 0.013 255.508)),
+    300: to-rgb(oklch(86.9% 0.022 252.894)),
+    400: to-rgb(oklch(70.4% 0.04 256.788)),
+    500: to-rgb(oklch(55.4% 0.046 257.417)),
+    600: to-rgb(oklch(44.6% 0.043 257.281)),
+    700: to-rgb(oklch(37.2% 0.044 257.287)),
+    800: to-rgb(oklch(27.9% 0.041 260.031)),
+    900: to-rgb(oklch(20.8% 0.042 265.755)),
+    950: to-rgb(oklch(12.9% 0.042 264.695)),
+  ),
+  gray: (
+    50: to-rgb(oklch(98.5% 0.002 247.839)),
+    100: to-rgb(oklch(96.7% 0.003 264.542)),
+    200: to-rgb(oklch(92.8% 0.006 264.531)),
+    300: to-rgb(oklch(87.2% 0.01 258.338)),
+    400: to-rgb(oklch(70.7% 0.022 261.325)),
+    500: to-rgb(oklch(55.1% 0.027 264.364)),
+    600: to-rgb(oklch(44.6% 0.03 256.802)),
+    700: to-rgb(oklch(37.3% 0.034 259.733)),
+    800: to-rgb(oklch(27.8% 0.033 256.848)),
+    900: to-rgb(oklch(21% 0.034 264.665)),
+    950: to-rgb(oklch(13% 0.028 261.692)),
+  ),
+  zinc: (
+    50: to-rgb(oklch(98.5% 0 0)),
+    100: to-rgb(oklch(96.7% 0.001 286.375)),
+    200: to-rgb(oklch(92% 0.004 286.32)),
+    300: to-rgb(oklch(87.1% 0.006 286.286)),
+    400: to-rgb(oklch(70.5% 0.015 286.067)),
+    500: to-rgb(oklch(55.2% 0.016 285.938)),
+    600: to-rgb(oklch(44.2% 0.017 285.786)),
+    700: to-rgb(oklch(37% 0.013 285.805)),
+    800: to-rgb(oklch(27.4% 0.006 286.033)),
+    900: to-rgb(oklch(21% 0.006 285.885)),
+    950: to-rgb(oklch(14.1% 0.005 285.823)),
+  ),
+  neutral: (
+    50: to-rgb(oklch(98.5% 0 0)),
+    100: to-rgb(oklch(97% 0 0)),
+    200: to-rgb(oklch(92.2% 0 0)),
+    300: to-rgb(oklch(87% 0 0)),
+    400: to-rgb(oklch(70.8% 0 0)),
+    500: to-rgb(oklch(55.6% 0 0)),
+    600: to-rgb(oklch(43.9% 0 0)),
+    700: to-rgb(oklch(37.1% 0 0)),
+    800: to-rgb(oklch(26.9% 0 0)),
+    900: to-rgb(oklch(20.5% 0 0)),
+    950: to-rgb(oklch(14.5% 0 0)),
+  ),
+  stone: (
+    50: to-rgb(oklch(98.5% 0.001 106.423)),
+    100: to-rgb(oklch(97% 0.001 106.424)),
+    200: to-rgb(oklch(92.3% 0.003 48.717)),
+    300: to-rgb(oklch(86.9% 0.005 56.366)),
+    400: to-rgb(oklch(70.9% 0.01 56.259)),
+    500: to-rgb(oklch(55.3% 0.013 58.071)),
+    600: to-rgb(oklch(44.4% 0.011 73.639)),
+    700: to-rgb(oklch(37.4% 0.01 67.558)),
+    800: to-rgb(oklch(26.8% 0.007 34.298)),
+    900: to-rgb(oklch(21.6% 0.006 56.043)),
+    950: to-rgb(oklch(14.7% 0.004 49.25)),
+  ),
+);
+
+// 색상 조회 헬퍼. shade 생략 시 500(각 색의 기준점) 반환
+@function get($name, $shade: 500) {
+  @return map.get(map.get($colors, $name), $shade);
+}
+
+@function variants($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: color.scale($base, $lightness: 0% + $offset),
+    dark: color.scale($base, $lightness: -10% + $offset),
+    darker: color.scale($base, $lightness: -25% + $offset),
+    darkest: color.scale($base, $lightness: -40% + $offset)
+  );
+}
+
+@function variants-dark($base, $offset: 0%) {
+  @return (
+    darkest: color.mix(white, $base, 80% + $offset),
+    darker: color.mix(white, $base, 60% + $offset),
+    dark: color.mix(white, $base, 40% + $offset),
+    default: color.mix(black, $base, 20% + $offset),
+    light: color.mix(black, $base, 55% + $offset),
+    lighter: color.mix(black, $base, 70% + $offset),
+    lightest: color.mix(black, $base, 80% + $offset)
+  );
+}

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, "");
+  }
 }