@iyulab/components 1.15.0 → 1.20.0

package/dist/components/badge/UBadge.styles.js

@@ -44,14 +44,42 @@ var styles = css`
     border-radius: var(--u-radius-circle, 50%);
   }
 
-  /* === Color (색상) === */
+  /* === Role (의미 축) ===
+     장식 축(아래)과 달리 역할 토큰을 읽어 리브랜딩을 따라오고, 면과 그 위 글자를
+     **쌍으로** 받아 대비 계약을 물려받는다. warning 이 흰 글자가 아닌 이유가 그것이다. */
+  :host([color="primary"]) {
+    color: var(--u-primary-txt-color, #FFFFFF);
+    background-color: var(--u-primary-color, #1976D2);
+  }
+  :host([color="info"]) {
+    color: var(--u-info-txt-color, #FFFFFF);
+    background-color: var(--u-info-color, #1976D2);
+  }
+  :host([color="success"]) {
+    color: var(--u-success-txt-color, #FFFFFF);
+    background-color: var(--u-success-color, #2E7D32);
+  }
+  :host([color="warning"]) {
+    color: var(--u-warning-txt-color, #000000);
+    background-color: var(--u-warning-color, #FDD835);
+  }
+  :host([color="danger"]) {
+    color: var(--u-danger-txt-color, #FFFFFF);
+    background-color: var(--u-danger-color, #D32F2F);
+  }
+
+  /* === Color (장식 축) === */
   :host([color="neutral"]) {
     color: var(--u-neutral-800, #424242);
     background-color: var(--u-neutral-200, #EEEEEE);
   }
   :host([color="blue"]) {
     color: var(--u-neutral-0, #FFFFFF);
-    background-color: var(--u-primary-color, #1E88E5);
+    /* ★장식 축이므로 팔레트를 직접 읽는다 — 여기만 역할 토큰(--u-primary-color)이었다.
+       그 탓에 브랜드를 바꾸면 color="blue" 배지만 함께 움직였다(color="green" 등 8색은
+       안 움직인다). u-tag 에는 이 오염을 막는 네거티브 컨트롤이 있는데 u-badge 에는
+       없어서 드러나지 않았다. 단은 이 컴포넌트의 다른 장식 색과 같은 500 으로 맞춘다. */
+    background-color: var(--u-blue-500, #2196F3);
   }
   :host([color="green"]) {
     color: var(--u-neutral-0, #FFFFFF);

package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.js

@@ -12,7 +12,7 @@ var styles = css`
     cursor: pointer;
   }
   :host:hover {
-    color: var(--u-primary-color-strong, #1976D2);
+    color: var(--u-primary-color-strong, #1565C0);
   }
   :host([disabled]) {
     opacity: 0.5;

package/dist/components/button/UButton.d.ts

@@ -2,7 +2,18 @@ import { TemplateResult } from 'lit';
 import { UElement } from '../UElement.js';
 export type ButtonVariant = "solid" | "surface" | "filled" | "outlined" | "ghost" | "link";
 export type ButtonType = "button" | "submit" | "reset";
-export type ButtonColor = "neutral" | "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+/**
+ * 두 축이 한 속성에 병존한다.
+ *
+ * - **역할 축**(`primary`·`info`·`success`·`warning`·`danger`) — *의미*를 말한다.
+ *   색은 소비자의 역할 토큰이 정하므로 **리브랜딩을 따라오고**, 대비 계약을 물려받는다.
+ * - **장식 축**(`blue`·`purple` …) — *색 자체*를 말한다. 소비자가 고른 색이므로
+ *   리브랜딩에 **의도적으로 면역**이다.
+ *
+ * ★브랜드가 빨강인 제품에서 `color="red"` 는 브랜드와 위험을 같은 이름으로 만든다 —
+ * 그래서 위험은 `color="danger"` 로 쓴다.
+ */
+export type ButtonColor = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
 export type ButtonSize = "sm" | "md" | "lg";
 /**
  * 클릭 가능한 버튼 컴포넌트입니다. href가 설정되면 앵커 태그로 렌더링됩니다.
@@ -19,11 +30,19 @@ export type ButtonSize = "sm" | "md" | "lg";
  *
  * @cssprop --u-primary-color - color="neutral"일 때 버튼 기준색. 지정 시 hover/active/surface 톤이 color-mix()로 자동 파생.
  * @cssprop --btn-padding-block - 내부 버튼의 상하 여백 (기본: 0.5em)
- * @cssprop --btn-padding-inline - 내부 버튼의 좌우 여백 (기본: 0.5em, variant="link"는 0)
+ * @cssprop --btn-padding-inline - 내부 버튼의 좌우 여백 (기본: 1em, variant="link"는 0).
+ *   ⚠1.20.0 에서 0.5em → 1em. 세로와 같은 값이라 글자가 테두리에 붙어 있었다.
+ *   최소높이는 상하 여백에서 파생되므로(`1.5em + 상하×2 + 2px`) 이 값을 덮어도 높이는 안 변한다.
  * @cssprop --btn-border-color - 내부 버튼의 테두리 색. variant/hover/active 규칙이 이 값을 정한다
  *   (기본: transparent)
- * @cssprop --btn-color - 버튼의 기준색. 아래 파생 토큰이 전부 이 값에서 color-mix()로 계산된다 —
+ * @cssprop --btn-color - 버튼의 **면** 색. 아래 파생 토큰이 전부 이 값에서 color-mix()로 계산된다 —
  *   보통 이것 하나만 덮으면 된다.
+ * @cssprop --btn-txt-color - 그 **면 위**의 글자색 — variant="solid" 가 읽는다
+ *   (기본: #fff · 역할 값 지정 시 --u-{role}-txt-color)
+ * @cssprop --btn-color-strong - **바탕 위**의 글자색 — variant="link" 가 읽는다.
+ *   면과 요구가 반대라 슬롯이 따로 있다 (기본: --btn-color 와 동일 · 역할 값 지정 시 --u-{role}-color-strong)
+ * @cssprop --btn-color-strong-hover - 바탕 위 글자 hover (기본: 85% + black · 역할 값은 움직이지 않고 밑줄로 강조)
+ * @cssprop --btn-color-strong-active - 바탕 위 글자 active (기본: 70% + black · 역할 값은 고정)
  * @cssprop --btn-color-hover - solid 배경 hover (기본: --btn-color 85% + black)
  * @cssprop --btn-color-active - solid 배경 active (기본: --btn-color 70% + black)
  * @cssprop --btn-color-surface - surface 배경 (기본: --btn-color 12% + 배경색)

package/dist/components/button/UButton.styles.js

@@ -3,7 +3,24 @@ import { css } from "lit";
 var styles = css`
   :host {
     /* --btn-color 하나만 정해지면 hover/active/surface/outline 톤이 전부 자동 파생 */
-    --btn-color: var(--u-primary-color, #1E88E5);
+    --btn-color: var(--u-primary-color, #1976D2);
+
+    /* ★색 슬롯이 셋인 이유 — 같은 색이 세 자리에서 요구가 다르다.
+       시트의 역할 층이 이미 이 구분을 갖고 있어(-color = 면 · -strong = 바탕 위 글자 ·
+       -txt-color = 면 위 글자) 슬롯 이름을 그 어법에 1:1 로 맞춘다.
+
+         --btn-color         면(solid 배경 · 테두리 · surface 혼합의 원료)
+         --btn-txt-color     그 면 **위**의 글자   ← solid
+         --btn-color-strong  바탕 **위**의 글자    ← link
+
+       ⚠셋을 하나로 접으면 다크에서 깨진다: 바탕(#121212)과 on-color(#FFFFFF)가 정반대라
+       한 단이 둘을 맡을 수 없다(Cycle 141 실측 — 다크 primary 면 6.09 ✓ / 바탕 3.07 ✗).
+       장식 축(color="purple" 등)은 세 슬롯이 종전 값으로 수렴하므로 렌더가 변하지 않는다. */
+    --btn-txt-color: #fff;
+    --btn-color-strong: var(--btn-color);
+    --btn-color-strong-hover: color-mix(in srgb, var(--btn-color-strong) 85%, black);
+    --btn-color-strong-active: color-mix(in srgb, var(--btn-color-strong) 70%, black);
+
     --btn-color-hover: color-mix(in srgb, var(--btn-color) 85%, black);
     --btn-color-active: color-mix(in srgb, var(--btn-color) 70%, black);
     --btn-color-surface: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color, #FFFFFF));
@@ -32,7 +49,53 @@ var styles = css`
     cursor: pointer;
   }
 
-  /* === Color tokens === */
+  /* === Role tokens (의미 축) ===
+     color="danger" 는 *"위험한 동작"* 을 뜻하고, 그 색이 무엇인지는 소비자의 역할 토큰이
+     정한다. 장식 축과 반대로 **리브랜딩을 따라오고**, 대비 계약(token-contrast.test.ts)이
+     지키는 짝을 그대로 물려받는다.
+
+     ★장식 램프(shade-600)로 해석하면 안 된다 — 라이트에서 그 단 위의 흰 글자는 8색 중
+     6색이 AA 미달이다(green 3.30 · orange 2.37 · cyan 2.74 …). 역할 값을 쓰는 이유가
+     *의미 이름*인데 그 대가로 대비를 잃으면 앞뒤가 맞지 않는다. */
+  :host([color="primary"]) {
+    --btn-color: var(--u-primary-color, #1976D2);
+    --btn-color-strong: var(--u-primary-color-strong, #1565C0);
+    --btn-txt-color: var(--u-primary-txt-color, #FFFFFF);
+  }
+  :host([color="info"]) {
+    --btn-color: var(--u-info-color, #1976D2);
+    --btn-color-strong: var(--u-info-color-strong, #1565C0);
+    --btn-txt-color: var(--u-info-txt-color, #FFFFFF);
+  }
+  :host([color="success"]) {
+    --btn-color: var(--u-success-color, #2E7D32);
+    --btn-color-strong: var(--u-success-color-strong, #1B5E20);
+    --btn-txt-color: var(--u-success-txt-color, #FFFFFF);
+  }
+  :host([color="warning"]) {
+    --btn-color: var(--u-warning-color, #FDD835);
+    --btn-color-strong: var(--u-warning-color-strong, #8A4A00);
+    --btn-txt-color: var(--u-warning-txt-color, #000000);
+  }
+  :host([color="danger"]) {
+    --btn-color: var(--u-danger-color, #D32F2F);
+    --btn-color-strong: var(--u-danger-color-strong, #C62828);
+    --btn-txt-color: var(--u-danger-txt-color, #FFFFFF);
+  }
+
+  /* 역할 축의 link 는 쉬는 상태가 **이미 대비로 선택된 단**(-strong)이라 더 어둡게 하면
+     계약을 벗어난다. 강조는 밑줄이 맡는다 — neutral link 가 쓰는 어법과 같다.
+     장식 축은 종전대로 혼합 파생을 유지한다. */
+  :host([color="primary"]),
+  :host([color="info"]),
+  :host([color="success"]),
+  :host([color="warning"]),
+  :host([color="danger"]) {
+    --btn-color-strong-hover: var(--btn-color-strong);
+    --btn-color-strong-active: var(--btn-color-strong);
+  }
+
+  /* === Color tokens (장식 축) === */
   :host([color="blue"])   { --btn-color: var(--u-blue-600, #1E88E5); }
   :host([color="green"])  { --btn-color: var(--u-green-600, #43A047); }
   :host([color="red"])    { --btn-color: var(--u-red-600, #E53935); }
@@ -42,7 +105,20 @@ var styles = css`
   :host([color="purple"]) { --btn-color: var(--u-purple-600, #8E24AA); }
   :host([color="pink"])   { --btn-color: var(--u-pink-600, #D81B60); }
 
-  /* === Size === */
+  /* === Size ===
+   *
+   * ★**크기 축은 font-size 하나로 움직인다** — 여백·최소높이가 전부 em 이라 비례로 따라온다.
+   *   이것은 결손이 아니라 설계다: 폼·인라인 요소의 여백은 상속된 font-size 에 비례하는 것이
+   *   의도이며(--u-space-* 는 컨테이너/오버레이의 레이아웃 여백 축이라 여기 닿지 않는다),
+   *   px 계단을 따로 두면 두 축이 갈라진다.
+   *
+   * ⚠**그런데 두 값이 그 비례에서 빠져 있었다** (1.20.0 에서 해소):
+   *   ⑴ 가로 여백이 세로와 **같은 0.5em** 이라 글자가 테두리에 붙었다(실측 md 7px/7px).
+   *   ⑵ min-height 가 **없어서** 아이콘만 든 버튼이 글자 버튼과 높이가 달랐다 —
+   *      실측: 같은 size 인데 md 아이콘 32px vs 글자 37px. 툴바에서 5px 어긋난다.
+   *      그리고 아이콘 버튼의 계단(30/32/34)이 글자 버튼(32/37/42)과 기울기가 달라
+   *      size 를 올릴수록 어긋남이 커졌다.
+   */
   :host([size="sm"]) {
     font-size: 12px;
   }
@@ -79,7 +155,7 @@ var styles = css`
 
   /* solid: 강한 채움 (기본 color="neutral") */
   :host([variant="solid"]) {
-    color: #fff;
+    color: var(--btn-txt-color);
     background-color: var(--btn-color);
     --btn-border-color: var(--btn-color);
   }
@@ -148,29 +224,33 @@ var styles = css`
     background-color: var(--u-bg-color-active, #EEEEEE);
   }
 
-  /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존) */
+  /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존)
+     ★종전 3단(weak → color → strong)은 쉬는 상태가 --u-primary-color-weak (흰 바탕 3.12)라
+     링크 글자가 AA 미달이었고, 그 사이 토큰 층의 --u-link-txt-color 는 어디에서도 쓰이지
+     않았다. 링크 색을 정의해 둔 토큰을 링크가 무시하고 있었던 셈이다.
+     쉬는 상태를 그 토큰으로 되돌리고, 강조는 밑줄과 -strong 한 단으로 표현한다. */
   :host([variant="link"]) {
-    color: var(--u-primary-color-weak, #2196F3);
+    color: var(--u-link-txt-color, #1565C0);
     --btn-border-color: transparent;
     background-color: transparent;
     --btn-padding-inline: 0;
   }
-  :host([variant="link"]:hover) {
-    color: var(--u-primary-color, #1E88E5);
-    text-decoration: underline;
-  }
+  :host([variant="link"]:hover),
   :host([variant="link"]:active) {
-    color: var(--u-primary-color-strong, #1976D2);
+    color: var(--u-primary-color-strong, #1565C0);
+    text-decoration: underline;
   }
-  /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크) */
+  /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크)
+     ★여기는 **바탕 위의 글자**다 — 면 슬롯(--btn-color)이 아니라 --btn-color-strong 을
+     읽는다. 장식 축에서는 둘이 같은 값이라 렌더가 변하지 않고, 역할 축에서만 갈린다. */
   :host([variant="link"][color]:not([color="neutral"])) {
-    color: var(--btn-color);
+    color: var(--btn-color-strong);
   }
   :host([variant="link"][color]:not([color="neutral"]):hover) {
-    color: var(--btn-color-hover);
+    color: var(--btn-color-strong-hover);
   }
   :host([variant="link"][color]:not([color="neutral"]):active) {
-    color: var(--btn-color-active);
+    color: var(--btn-color-strong-active);
   }
 
   /* === Inner ===
@@ -192,9 +272,20 @@ var styles = css`
     align-items: center;
     justify-content: space-between;
 
-    padding: var(--btn-padding-block, 0.5em) var(--btn-padding-inline, 0.5em);
+    padding: var(--btn-padding-block, 0.5em) var(--btn-padding-inline, 1em);
     border: 1px solid var(--btn-border-color, transparent);
     border-radius: inherit;
+
+    /* ★**글자 버튼의 자연 높이를 그대로 바닥값으로 쓴다** — 값을 새로 고른 것이 아니라
+     * 같은 식을 다시 쓴 것이다:
+     *
+     *     line-height(1.5em) + 상하 여백 ×2 + 테두리 ×2
+     *
+     * 그래서 글자 버튼의 높이는 **변하지 않고**(sm 32 · md 37 · lg 42 그대로),
+     * 아이콘만 든 버튼이 같은 높이로 올라온다. 상수를 박으면 이 성질이 깨진다 —
+     * 소비자가 --btn-padding-block 을 덮는 순간 둘이 다시 갈라진다. */
+    min-height: calc(1.5em + 2 * var(--btn-padding-block, 0.5em) + 2px);
+
   }
   a {
     text-decoration: none;

package/dist/components/card/UCard.styles.js

@@ -5,7 +5,7 @@ var styles = css`
     display: flex;
     border-radius: var(--u-radius-xl, 8px);
     background-color: var(--u-panel-bg-color, #FFFFFF);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--u-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.12));
     overflow: hidden;
 
     --card-border-width: 1px;
@@ -41,7 +41,7 @@ var styles = css`
   }
   :host([hoverable]:hover) {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16));
   }
 
   .media {

package/dist/components/carousel/UCarousel.styles.js

@@ -60,11 +60,11 @@ var styles = css`
     font-size: 20px;
     color: var(--u-neutral-900, #212121);
     background-color: var(--u-neutral-100, #F5F5F5);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.12));
   }
   .nav-button:hover {
     background-color: var(--u-neutral-200, #EEEEEE);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16));
     transform: translateY(-50%) scale(1.1);
   }
   .nav-button:active {

package/dist/components/checkbox/UCheckbox.d.ts

@@ -1,7 +1,8 @@
 import { PropertyValues } from 'lit';
 import { UFormControlElement } from '../UFormControlElement.js';
 export type CheckboxVariant = "filled" | "outline";
-export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink" | "neutral";
+/** 역할 축(`primary`…`danger`, 의미 · 리브랜딩을 따라옴)과 장식 축(`blue`…, 색 자체 · 면역)이 병존한다. */
+export type CheckboxColor = "primary" | "info" | "success" | "warning" | "danger" | "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink" | "neutral";
 /**
  * 선택/해제 상태를 토글하는 체크박스 컴포넌트입니다.
  * indeterminate 상태도 지원합니다.

package/dist/components/checkbox/UCheckbox.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/checkbox/UCheckbox.styles.ts
 var styles = css`
   :host {
-    --checkbox-fill-color: var(--u-primary-color, #1E88E5);
+    --checkbox-fill-color: var(--u-primary-color, #1976D2);
     --checkbox-color: inherit;
     --checkbox-border-color: var(--u-input-border-color, #E0E0E0);
     --checkbox-background-color: var(--u-input-bg-color, #FFFFFF);
@@ -27,10 +27,10 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) {
-    --checkbox-border-color: var(--u-danger-color, #E53935);
+    --checkbox-border-color: var(--u-danger-color, #D32F2F);
   }
   :host([invalid]) .footer {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
   }
   :host([checked]) .checkbox u-icon,
   :host([indeterminate]) .checkbox u-icon {
@@ -43,7 +43,8 @@ var styles = css`
   /* === Variant: filled - 배경 채움 === */
   :host([variant="filled"][checked]),
   :host([variant="filled"][indeterminate]) {
-    --checkbox-color: var(--u-neutral-100, #F5F5F5);
+    /* 체크 표시가 **채운 면 위**에 선다 — 역할 축에서만 on-color 로 갈린다(장식 축은 폴백). */
+    --checkbox-color: var(--checkbox-hue-on-fill, var(--u-neutral-100, #F5F5F5));
     --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
     --checkbox-background-color: var(--checkbox-hue, var(--checkbox-fill-color));
   }
@@ -51,11 +52,43 @@ var styles = css`
   /* === Variant: outline - 테두리만 === */
   :host([variant="outline"][checked]),
   :host([variant="outline"][indeterminate]) {
-    --checkbox-color: var(--checkbox-hue, var(--checkbox-fill-color));
+    /* 여기서는 같은 표시가 **바탕 위**에 선다 — 면 단이 아니라 -strong 이 맡는다. */
+    --checkbox-color: var(--checkbox-hue-strong, var(--checkbox-hue, var(--checkbox-fill-color)));
     --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
     --checkbox-background-color: transparent;
   }
 
+  /* ==========================================================================
+     역할 축 — 의미 슬롯. 장식 축(아래)과 달리 팔레트가 아니라 역할 토큰을 읽는다.
+     슬롯이 셋인 이유는 체크 표시가 두 자리에 서기 때문이다 —
+     filled 는 **채운 면 위**(그래서 on-color), outline 은 **바탕 위**(그래서 -strong).
+     ========================================================================== */
+  :host([color="primary"]) {
+    --checkbox-hue: var(--u-primary-color, #1976D2);
+    --checkbox-hue-on-fill: var(--u-primary-txt-color, #FFFFFF);
+    --checkbox-hue-strong: var(--u-primary-color-strong, #1565C0);
+  }
+  :host([color="info"]) {
+    --checkbox-hue: var(--u-info-color, #1976D2);
+    --checkbox-hue-on-fill: var(--u-info-txt-color, #FFFFFF);
+    --checkbox-hue-strong: var(--u-info-color-strong, #1565C0);
+  }
+  :host([color="success"]) {
+    --checkbox-hue: var(--u-success-color, #2E7D32);
+    --checkbox-hue-on-fill: var(--u-success-txt-color, #FFFFFF);
+    --checkbox-hue-strong: var(--u-success-color-strong, #1B5E20);
+  }
+  :host([color="warning"]) {
+    --checkbox-hue: var(--u-warning-color, #FDD835);
+    --checkbox-hue-on-fill: var(--u-warning-txt-color, #000000);
+    --checkbox-hue-strong: var(--u-warning-color-strong, #8A4A00);
+  }
+  :host([color="danger"]) {
+    --checkbox-hue: var(--u-danger-color, #D32F2F);
+    --checkbox-hue-on-fill: var(--u-danger-txt-color, #FFFFFF);
+    --checkbox-hue-strong: var(--u-danger-color-strong, #C62828);
+  }
+
   /* ==========================================================================
      장식 축 — color= 는 hue 슬롯만 채운다. variant 규칙이 폴백과 함께 읽는다.
      기본값 blue 는 규칙이 없다 = 슬롯이 비어 브랜드 훅(--checkbox-fill-color)을 탄다.
@@ -104,8 +137,8 @@ var styles = css`
   }
   input:focus-visible ~ .checkbox {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus, #1E88E5),
-      0 0 0 3px rgba(59, 130, 246, 0.22);
+      0 0 0 1px var(--u-input-border-color-focus, #1565C0),
+      0 0 0 3px color-mix(in srgb, var(--u-primary-color-strong, #1565C0) 22%, transparent);
   }
 
   /* 체크박스 외형 */
@@ -137,7 +170,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
     font-weight: 500;
   }
 
@@ -149,7 +182,7 @@ var styles = css`
   }
 
   :host([invalid]) .description {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
   }
 `;
 //#endregion

package/dist/components/copy-button/UCopyButton.styles.js

@@ -14,12 +14,12 @@ var styles = css`
   }
 
   :host([copied]) u-icon-button {
-    color: var(--u-success-color-weak, #4CAF50);
+    color: var(--u-success-color-strong, #1B5E20);
   }
 
   /* 라벨 형태(아이콘+텍스트): 복사 완료 시 아이콘/텍스트를 성공색으로 강조 */
   :host([copied]) u-button {
-    color: var(--u-success-color-weak, #4CAF50);
+    color: var(--u-success-color-strong, #1B5E20);
   }
 `;
 //#endregion

package/dist/components/dialog/UDialog.styles.js

@@ -70,7 +70,7 @@ var styles = css`
     border: 1px solid var(--u-border-color, color-mix(in srgb, CanvasText 20%, Canvas));
     border-radius: var(--u-radius-lg, 6px);
     background: var(--u-panel-bg-color, Canvas);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-xl, 0 6px 18px rgba(0, 0, 0, 0.24));
     pointer-events: auto;
     opacity: 0;
     transform: scale(0.92);

package/dist/components/drawer/UDrawer.styles.js

@@ -57,7 +57,7 @@ var styles = css`
     display: flex;
     flex-direction: column;
     background: var(--u-panel-bg-color, Canvas);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-xl, 0 6px 18px rgba(0, 0, 0, 0.24));
     pointer-events: auto;
     /*
      * easeOutQuart (cubic-bezier(0.22, 1, 0.36, 1)) — 빠르게 시작해서 부드럽게 정착.

package/dist/components/field/UField.styles.js

@@ -12,7 +12,7 @@ var styles = css`
     cursor: not-allowed;
   }
   :host([invalid]) .footer {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
   }
 
   .header {
@@ -32,7 +32,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
     margin-right: 0.2em;
   }
   

package/dist/components/icon-button/UIconButton.styles.js

@@ -11,7 +11,7 @@ var styles = css`
     color: #fff;
   }
   :host([variant="link"]) {
-    color: var(--u-primary-color-weak, #2196F3);
+    color: var(--u-link-txt-color, #1565C0);
   }
 
   u-button {

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, #1565C0);
   }
   :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, #C62828);
   }
 
   /* ===== 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, #1565C0);
   }
   :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, #C62828);
   }
 
   /* ===== 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, #1565C0);
     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, #C62828);
   }
 
   /* ===== Variant: borderless ===== */
@@ -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 {
@@ -175,7 +175,7 @@ var styles = css`
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: var(--u-radius-lg, 6px);
     background-color: var(--u-panel-bg-color, #FFFFFF);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16));
     overflow-x: auto;
     overflow-y: auto;
   }

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 {
@@ -139,7 +139,7 @@ var styles = css`
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: var(--u-radius-md, 4px);
     background-color: var(--u-panel-bg-color, #FFFFFF);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--u-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.12));
     transform: scale(0.8);
     transition: opacity 0.2s ease, visibility 0s 0.2s, transform 0.2s ease;
   }

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,26 +3,26 @@ 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-strong, #1565C0);
     --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-strong, #1B5E20); 
     --progress-bar-buffer-color: var(--u-success-color-weakest, #A5D6A7); 
   }
   :host([status="warning"]) { 
-    --progress-bar-color: var(--u-warning-color-weak, #FFEB3B); 
+    --progress-bar-color: var(--u-warning-color-strong, #8A4A00); 
     --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-strong, #C62828); 
     --progress-bar-buffer-color: var(--u-danger-color-weakest, #EF9A9A); 
   }
   :host([status="info"]) { 
-    --progress-bar-color: var(--u-info-color-weak, #2196F3); 
+    --progress-bar-color: var(--u-info-color-strong, #1565C0); 
     --progress-bar-buffer-color: var(--u-info-color-weakest, #90CAF9); 
   }
 

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-strong, #1565C0);
     --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,19 +11,19 @@ var styles = css`
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-ring-color: var(--u-success-color, #43A047);
+    --progress-ring-color: var(--u-success-color-strong, #1B5E20);
     --progress-ring-buffer-color: var(--u-success-color-weakest, #A5D6A7);
   }
   :host([status="warning"]) { 
-    --progress-ring-color: var(--u-warning-color-weak, #FFEB3B);
+    --progress-ring-color: var(--u-warning-color-strong, #8A4A00);
     --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-strong, #C62828);
     --progress-ring-buffer-color: var(--u-danger-color-weakest, #EF9A9A);
   }
   :host([status="info"]) { 
-    --progress-ring-color: var(--u-info-color-weak, #2196F3);
+    --progress-ring-color: var(--u-info-color-strong, #1565C0);
     --progress-ring-buffer-color: var(--u-info-color-weakest, #90CAF9);
   }