@iyulab/components 1.14.1 → 1.18.0

package/dist/components/input/UInput.styles.js

@@ -38,10 +38,10 @@ var styles = css`
     box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
   }
   :host(:not([readonly]):not([disabled])) .container:focus-within {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1E88E5);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1976D2);
   }
   :host([invalid]:not([readonly]):not([disabled])) .container {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #E53935);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #D32F2F);
   }
 
   /* ===== Variant: filled ===== */
@@ -63,11 +63,11 @@ var styles = css`
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
+    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
   }
   :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
+    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
   }
 
   /* ===== Variant: underlined ===== */
@@ -90,12 +90,12 @@ var styles = css`
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
+    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
     border-bottom-width: 2px;
   }
   :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
+    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
   }
 
   /* ===== Variant: borderless ===== */
@@ -120,7 +120,7 @@ var styles = css`
     line-height: 1.5;
   }
   input::placeholder {
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
   }
   input:disabled {
     cursor: not-allowed;
@@ -161,10 +161,10 @@ var styles = css`
     cursor: pointer;
   }
   .suffix-item:hover {
-    color: var(--u-icon-color-hover, #1E88E5);
+    color: var(--u-icon-color-hover, #1565C0);
   }
   .suffix-item:active {
-    color: var(--u-icon-color-active, #1E88E5);
+    color: var(--u-icon-color-active, #1565C0);
   }
 
   u-popover {

package/dist/components/menu-item/UMenuItem.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --menu-item-depth: 0;
-    --menu-item-color: var(--u-primary-color, #1E88E5);
+    --menu-item-color: var(--u-primary-color, #1976D2);
   }
 
   :host {

package/dist/components/option/UOption.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/option/UOption.styles.ts
 var styles = css`
   :host {
-    --option-color: var(--u-primary-color, #1E88E5);
+    --option-color: var(--u-primary-color, #1976D2);
     --option-color-interactive: inherit;
     --option-border-color-interactive: var(--u-border-color-hover, #BDBDBD);
     --option-background-color-interactive: var(--u-bg-color-hover, #F5F5F5);

package/dist/components/progress-bar/UProgressBar.styles.js

@@ -3,14 +3,14 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-bar-height: 0.5em;
-    --progress-bar-color: var(--u-primary-color, #1E88E5);
+    --progress-bar-color: var(--u-primary-color, #1976D2);
     --progress-bar-buffer-color: color-mix(in srgb, var(--progress-bar-color) 35%, var(--u-bg-color, #FFFFFF));
     --progress-bar-track-color: var(--u-neutral-200, #EEEEEE);
   }
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-bar-color: var(--u-success-color, #43A047); 
+    --progress-bar-color: var(--u-success-color, #2E7D32); 
     --progress-bar-buffer-color: var(--u-success-color-weakest, #A5D6A7); 
   }
   :host([status="warning"]) { 
@@ -18,7 +18,7 @@ var styles = css`
     --progress-bar-buffer-color: var(--u-warning-color-weakest, #FFF59D); 
   }
   :host([status="error"]) { 
-    --progress-bar-color: var(--u-danger-color, #E53935); 
+    --progress-bar-color: var(--u-danger-color, #D32F2F); 
     --progress-bar-buffer-color: var(--u-danger-color-weakest, #EF9A9A); 
   }
   :host([status="info"]) { 

package/dist/components/progress-ring/UProgressRing.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-ring-size: 6em;
-    --progress-ring-color: var(--u-primary-color, #1E88E5);
+    --progress-ring-color: var(--u-primary-color, #1976D2);
     --progress-ring-track-width: 6;
     --progress-ring-track-color: var(--u-neutral-200, #EEEEEE);
     --progress-ring-buffer-color: color-mix(in srgb, var(--progress-ring-color) 35%, var(--u-bg-color, #FFFFFF));
@@ -11,7 +11,7 @@ var styles = css`
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-ring-color: var(--u-success-color, #43A047);
+    --progress-ring-color: var(--u-success-color, #2E7D32);
     --progress-ring-buffer-color: var(--u-success-color-weakest, #A5D6A7);
   }
   :host([status="warning"]) { 
@@ -19,7 +19,7 @@ var styles = css`
     --progress-ring-buffer-color: var(--u-warning-color-weakest, #FFF59D);
   }
   :host([status="error"]) { 
-    --progress-ring-color: var(--u-danger-color, #E53935);
+    --progress-ring-color: var(--u-danger-color, #D32F2F);
     --progress-ring-buffer-color: var(--u-danger-color-weakest, #EF9A9A);
   }
   :host([status="info"]) { 

package/dist/components/radio/URadio.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/radio/URadio.styles.ts
 var styles = css`
   :host {
-    --radio-color: var(--u-primary-color, #1E88E5);
+    --radio-color: var(--u-primary-color, #1976D2);
     --radio-color-active: color-mix(in srgb, var(--radio-color) 85%, black);
   }
 
@@ -38,7 +38,7 @@ var styles = css`
     border-radius: 0.35em;
   }
   :host([invalid]) .container {
-    border-color: var(--u-danger-color, #E53935);
+    border-color: var(--u-danger-color, #D32F2F);
   }
 
   /* Type: default */

package/dist/components/select/USelect.styles.js

@@ -44,10 +44,10 @@ var styles = css`
     box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
   }
   :host(:not([readonly]):not([disabled])) .container:focus-within {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1E88E5);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1976D2);
   }
   :host([invalid]:not([readonly]):not([disabled])) .container {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #E53935);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #D32F2F);
   }
 
   /* ===== Variant: filled ===== */
@@ -69,11 +69,11 @@ var styles = css`
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
+    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
   }
   :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
+    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
   }
 
   /* ===== Variant: underlined ===== */
@@ -96,12 +96,12 @@ var styles = css`
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
+    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
     border-bottom-width: 2px;
   }
   :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
+    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
   }
 
   /* ===== Variant: borderless ===== */
@@ -118,7 +118,7 @@ var styles = css`
   }
 
   .count {
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
     line-height: 1.25;
   }
 
@@ -131,7 +131,7 @@ var styles = css`
     text-overflow: ellipsis;
   }
   .text-content.placeholder {
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .chips-content {
@@ -157,10 +157,10 @@ var styles = css`
     cursor: pointer;
   }
   .suffix-item:hover {
-    color: var(--u-icon-color-hover, #1E88E5);
+    color: var(--u-icon-color-hover, #1565C0);
   }
   .suffix-item:active {
-    color: var(--u-icon-color-active, #1E88E5);
+    color: var(--u-icon-color-active, #1565C0);
   }
 
   /* 드롭다운 패널 — 옵션 텍스트가 길어도 팝오버가 앵커보다 넓어지지 않도록 고정 너비로
@@ -183,7 +183,7 @@ var styles = css`
     align-items: center;
     gap: 0.4em;
     padding: 0.3em 0.6em;
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
     border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   .search-input input {
@@ -193,7 +193,7 @@ var styles = css`
     line-height: 1.5;
   }
   .search-input input::placeholder {
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
   }
 `;
 //#endregion

package/dist/components/slider/USlider.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/slider/USlider.styles.ts
 var styles = css`
   :host {
-    --slider-fill-color: var(--u-primary-color, #1E88E5);
+    --slider-fill-color: var(--u-primary-color, #1976D2);
     --slider-track-color: var(--u-neutral-300, #E0E0E0);
     --slider-track-height: 6px;
     --slider-thumb-size: 18px;
@@ -117,7 +117,7 @@ var styles = css`
     position: absolute;
     transform: translateX(-50%);
     font-size: 0.75em;
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
     white-space: nowrap;
   }
 `;

package/dist/components/spinner/USpinner.styles.js

@@ -4,7 +4,7 @@ var styles = css`
   :host {
     --spinner-track-width: 0.125em;
     --spinner-track-color: var(--u-neutral-200, #EEEEEE);
-    --spinner-indicator-color: var(--u-primary-color, #1E88E5);
+    --spinner-indicator-color: var(--u-primary-color, #1976D2);
     --spinner-indicator-speed: 2s;
   }
 

package/dist/components/switch/USwitch.styles.js

@@ -5,7 +5,7 @@ var styles = css`
     --switch-track-width: 2.4em;
     --switch-track-height: 1.4em;
     --switch-track-color: var(--u-neutral-300, #E0E0E0);
-    --switch-track-color-checked: var(--u-primary-color, #1E88E5);
+    --switch-track-color-checked: var(--u-primary-color, #1976D2);
     --switch-thumb-size: 1.1em;
     --switch-thumb-offset: 0.15em;
     --switch-thumb-color: #fff;
@@ -34,7 +34,7 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) .track {
-    outline: 2px solid var(--u-danger-color, #E53935);
+    outline: 2px solid var(--u-danger-color, #D32F2F);
     outline-offset: 1px;
   }
   :host(:not([disabled]):not([readonly]):hover) .track {
@@ -56,7 +56,7 @@ var styles = css`
   }
   input:focus-visible ~ .track {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus, #1E88E5),
+      0 0 0 1px var(--u-input-border-color-focus, #1976D2),
       0 0 0 3px rgba(59, 130, 246, 0.22);
   }
 
@@ -105,7 +105,7 @@ var styles = css`
   .track-unchecked {
     opacity: 1;
     right: var(--switch-thumb-offset);
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
   }
   :host([checked]) .track-unchecked {
     opacity: 0;
@@ -163,7 +163,7 @@ var styles = css`
   .thumb-unchecked {
     opacity: 1;
     transform: scale(1) rotate(0deg);
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
   }
   :host([checked]) .thumb-unchecked {
     opacity: 0;
@@ -176,19 +176,19 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
     font-weight: 500;
   }
 
   .description {
     margin-top: 0.5em;
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
     font-size: 0.75em;
     line-height: 1.3;
   }
 
   :host([invalid]) .description {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
   }
 `;
 //#endregion

package/dist/components/tab/UTab.styles.js

@@ -7,7 +7,7 @@ var styles = css`
     display: inline-flex;
     font-size: 0.9em;
     font-weight: 500;
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;

package/dist/components/tab-panel/UTabPanel.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/tab-panel/UTabPanel.styles.ts
 var styles = css`
   :host {
-    --tab-panel-color: var(--u-primary-color, #1E88E5);
+    --tab-panel-color: var(--u-primary-color, #1976D2);
   }
 
   :host {

package/dist/components/tag/UTag.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/tag/UTag.styles.ts
 var styles = css`
   :host {
-    --tag-fill-color: var(--u-primary-color, #1E88E5);
+    --tag-fill-color: var(--u-primary-color, #1976D2);
     --tag-color: var(--u-neutral-800, #424242);
     --tag-bg-color: var(--u-neutral-100, #F5F5F5);
     --tag-border-color: transparent;

package/dist/components/textarea/UTextarea.styles.js

@@ -26,10 +26,10 @@ var styles = css`
     box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
   }
   :host(:not([readonly]):not([disabled])) .container:focus-within {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1E88E5);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1976D2);
   }
   :host([invalid]:not([readonly]):not([disabled])) .container {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #E53935);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #D32F2F);
   }
 
   /* ===== Variant: filled ===== */
@@ -51,11 +51,11 @@ var styles = css`
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
+    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
   }
   :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
+    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
   }
 
   /* ===== Variant: underlined ===== */
@@ -78,12 +78,12 @@ var styles = css`
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
+    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
     border-bottom-width: 2px;
   }
   :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
+    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
   }
 
   /* ===== Variant: borderless ===== */
@@ -117,7 +117,7 @@ var styles = css`
     word-wrap: break-word;
   }
   textarea::placeholder {
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
   }
   textarea:disabled {
     cursor: not-allowed;
@@ -155,7 +155,7 @@ var styles = css`
   .counter {
     margin-top: 0.25em;
     text-align: right;
-    color: var(--u-txt-color-weak, #9E9E9E);
+    color: var(--u-txt-color-weak, #757575);
     font-size: 0.75em;
     line-height: 1.2;
   }

package/dist/components/tree-item/UTreeItem.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --tree-item-depth: 0;
-    --tree-item-color: var(--u-primary-color, #1E88E5);
+    --tree-item-color: var(--u-primary-color, #1976D2);
   }
 
   :host {

package/dist/styles/dark.css

@@ -140,21 +140,30 @@
      단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는
      소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느
      단인지 같은 모순이 생긴다.
+
+     ★**다만 두 단은 용도가 확정돼 있다** — 대비 요구가 서로 다르기 때문이다.
+        `-color`  = **면**. `--u-*-txt-color` 가 그 위에 얹히므로 on-color 기준 4.5.
+        `-strong` = **글자·아이콘**. `--u-bg-color` 위에 놓이므로 바탕 기준 4.5.
+     라이트에서는 바탕도 on-color 도 흰색이라 두 요구가 한 조건으로 합쳐지지만,
+     **다크에서는 정반대 방향**이다(바탕 #121212 · on-color #FFFFFF). 바탕에서 읽히는
+     밝은 단은 흰 글자를 못 받고, 흰 글자를 받는 어두운 단은 바탕에서 안 읽힌다.
+     ⇒ 다크에서 `-color` 와 `-strong` 이 두 단 벌어지는 것이 그 결과다.
+     `tests/build/token-contrast.test.ts` 가 값을 지킨다.
      ========================================================================== */
 
   /* primary — 브랜드 · 강조 · 포커스 · 링크 */
   --u-primary-color-weakest:     var(--u-blue-200);
   --u-primary-color-weaker:      var(--u-blue-300);
   --u-primary-color-weak:        var(--u-blue-500);
-  --u-primary-color:             var(--u-blue-600);
-  --u-primary-color-strong:      var(--u-blue-700);
+  --u-primary-color:             var(--u-blue-600);  /* 면: 흰 글자 6.09 ✓ */
+  --u-primary-color-strong:      var(--u-blue-800);  /* 글자: 바탕 5.32 ✓ (700 은 4.05 ✗) */
 
   /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */
   --u-info-color-weakest:        var(--u-blue-200);
   --u-info-color-weaker:         var(--u-blue-300);
   --u-info-color-weak:           var(--u-blue-500);
   --u-info-color:                var(--u-blue-600);
-  --u-info-color-strong:         var(--u-blue-700);
+  --u-info-color-strong:         var(--u-blue-800);
 
   /* success — 성공 · 완료 */
   --u-success-color-weakest:     var(--u-green-200);
@@ -174,8 +183,8 @@
   --u-danger-color-weakest:      var(--u-red-200);
   --u-danger-color-weaker:       var(--u-red-300);
   --u-danger-color-weak:         var(--u-red-500);
-  --u-danger-color:              var(--u-red-600);
-  --u-danger-color-strong:       var(--u-red-700);
+  --u-danger-color:              var(--u-red-600);  /* 면: 흰 글자 6.83 ✓ */
+  --u-danger-color-strong:       var(--u-red-800);  /* 글자: 바탕 4.87 ✓ (700 은 3.67 ✗) */
   /* ==========================================================================
      Radius Scale — 모서리 반경
      리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).
@@ -205,8 +214,18 @@
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-100);
-  --u-txt-color-hover:       var(--u-primary-color);
-  --u-txt-color-active:      var(--u-primary-color);
+
+  /* 유채색 배경 위의 글자 — warning 만 다르다(light.css 참조). */
+  --u-primary-txt-color:     #FFFFFF;
+  --u-info-txt-color:        #FFFFFF;
+  --u-success-txt-color:     #FFFFFF;
+  --u-danger-txt-color:      #FFFFFF;
+  /* ★라이트 시트와 같은 이유로 중립 최상단을 쓴다 — 다크에서는 그 값이 #FFFFFF 라
+     결과가 종전과 같다(4.65 ✓). 리터럴 대신 토큰을 쓰는 이유는 라이트에서 뒤집히기
+     때문이다(#000000). 두 시트가 같은 선언이 되어 어긋날 자리가 없어진다. */
+  --u-warning-txt-color:     var(--u-neutral-1000);
+  --u-txt-color-hover:       var(--u-primary-color-strong);
+  --u-txt-color-active:      var(--u-primary-color-strong);
   --u-txt-color-disabled:    var(--u-neutral-500);
   --u-txt-color-weak:        var(--u-neutral-700);
   --u-txt-color-strong:      var(--u-neutral-1000);
@@ -217,8 +236,8 @@
   /* Icon Colors */
   --u-icon-color:            var(--u-neutral-800);
   --u-icon-color-inverse:    var(--u-neutral-100);
-  --u-icon-color-hover:      var(--u-primary-color);
-  --u-icon-color-active:     var(--u-primary-color);
+  --u-icon-color-hover:      var(--u-primary-color-strong);
+  --u-icon-color-active:     var(--u-primary-color-strong);
   --u-icon-color-disabled:   var(--u-neutral-500);
 
   /* Border Colors */
@@ -238,7 +257,22 @@
   --u-bg-color-hover:        var(--u-neutral-300);
   --u-bg-color-active:       var(--u-neutral-400);
   --u-bg-color-disabled:     var(--u-neutral-100);
+
+  /* 면 높이 — 상세는 light.css 참조. 다크는 **바탕보다 밝은 쪽**이 위다.
+     neutral-300(#2A2A2A)은 바탕(#121212) 대비 1.42 로, 소비 측이 오버라이드로 쓰던
+     neutral-200(1.15)보다 실제로 더 잘 구분된다 — 그 오버라이드가 해결하려던 증상이
+     *"툴바·헤더가 배경에 묻힌다"* 였다. */
+  --u-bg-color-raised:       var(--u-neutral-300);
   
+  /* 유채색 표면 — 라이트와 **같은 단이 아니라 같은 세기**로 짝지었다(light.css 참조).
+     팔레트 유채색 틴트가 다크에서 짓눌리므로 한 단 위를 쓴다. green 은 대칭이라 그대로. */
+  --u-primary-bg-color:      var(--u-blue-100);
+  --u-info-bg-color:         var(--u-blue-100);
+  --u-success-bg-color:      var(--u-green-0);
+  --u-danger-bg-color:       var(--u-red-100);
+  /* warning 합류 — 라이트는 yellow-200 이다(단 이름이 다른 이유는 light.css 참조). */
+  --u-warning-bg-color:      var(--u-yellow-100);
+
   --u-input-bg-color:        var(--u-neutral-200);
   --u-panel-bg-color:        var(--u-neutral-200);
   --u-overlay-bg-color:      rgba(0, 0, 0, 0.7);