@iyulab/components 1.10.0 → 1.13.0

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

@@ -2,202 +2,121 @@ import { css } from "lit";
 //#region src/components/tag/UTag.styles.ts
 var styles = css`
   :host {
-    --tag-fill-color: var(--u-primary-color, var(--u-blue-600));
+    --tag-fill-color: var(--u-primary-color);
     --tag-color: var(--u-neutral-800);
     --tag-bg-color: var(--u-neutral-100);
     --tag-border-color: transparent;
   }
 
-  /* Variant: solid (강한 채움, 기본 색상은 --u-primary-color) */
+  /* ==========================================================================
+     장식 축 — 색 슬롯 매핑
+     color="purple" 에는 역할 의미가 없다(장식이다). 그래서 역할 토큰이 아니라
+     팔레트를 직접 읽으며, 브랜드 오버라이드에 의도적으로 면역이다.
+     아래 9개 규칙이 hue 슬롯을 채우고, variant 규칙이 그것을 소비한다.
+     슬롯이 비면(color="neutral") variant 규칙의 폴백 = 브랜드 경로를 탄다.
+     ========================================================================== */
+  :host([color="blue"]) {
+    --tag-hue-solid: var(--u-blue-500);
+    --tag-hue-line: var(--u-blue-300);
+    --tag-hue-surface: var(--u-blue-100);
+    --tag-hue-text: var(--u-blue-800);
+    --tag-hue-text-outlined: var(--u-blue-600);
+  }
+  :host([color="green"]) {
+    --tag-hue-solid: var(--u-green-500);
+    --tag-hue-line: var(--u-green-300);
+    --tag-hue-surface: var(--u-green-100);
+    --tag-hue-text: var(--u-green-800);
+    --tag-hue-text-outlined: var(--u-green-600);
+  }
+   /* yellow 는 명도가 높아 solid·outlined 텍스트를 한 단 진하게 쓴다 */
+  :host([color="yellow"]) {
+    --tag-hue-solid: var(--u-yellow-600);
+    --tag-hue-line: var(--u-yellow-300);
+    --tag-hue-surface: var(--u-yellow-100);
+    --tag-hue-text: var(--u-yellow-800);
+    --tag-hue-text-outlined: var(--u-yellow-700);
+  }
+  :host([color="red"]) {
+    --tag-hue-solid: var(--u-red-500);
+    --tag-hue-line: var(--u-red-300);
+    --tag-hue-surface: var(--u-red-100);
+    --tag-hue-text: var(--u-red-800);
+    --tag-hue-text-outlined: var(--u-red-600);
+  }
+  :host([color="orange"]) {
+    --tag-hue-solid: var(--u-orange-500);
+    --tag-hue-line: var(--u-orange-300);
+    --tag-hue-surface: var(--u-orange-100);
+    --tag-hue-text: var(--u-orange-800);
+    --tag-hue-text-outlined: var(--u-orange-600);
+  }
+  :host([color="teal"]) {
+    --tag-hue-solid: var(--u-teal-500);
+    --tag-hue-line: var(--u-teal-300);
+    --tag-hue-surface: var(--u-teal-100);
+    --tag-hue-text: var(--u-teal-800);
+    --tag-hue-text-outlined: var(--u-teal-600);
+  }
+  :host([color="cyan"]) {
+    --tag-hue-solid: var(--u-cyan-500);
+    --tag-hue-line: var(--u-cyan-300);
+    --tag-hue-surface: var(--u-cyan-100);
+    --tag-hue-text: var(--u-cyan-800);
+    --tag-hue-text-outlined: var(--u-cyan-600);
+  }
+  :host([color="purple"]) {
+    --tag-hue-solid: var(--u-purple-500);
+    --tag-hue-line: var(--u-purple-300);
+    --tag-hue-surface: var(--u-purple-100);
+    --tag-hue-text: var(--u-purple-800);
+    --tag-hue-text-outlined: var(--u-purple-600);
+  }
+  :host([color="pink"]) {
+    --tag-hue-solid: var(--u-pink-500);
+    --tag-hue-line: var(--u-pink-300);
+    --tag-hue-surface: var(--u-pink-100);
+    --tag-hue-text: var(--u-pink-800);
+    --tag-hue-text-outlined: var(--u-pink-600);
+  }
+
+  /* Variant: solid (강한 채움, 색 미지정 시 --tag-fill-color = 브랜드) */
   :host([variant="solid"]) {
     --tag-color: var(--u-neutral-0);
-    --tag-bg-color: var(--tag-fill-color);
-    --tag-border-color: var(--tag-fill-color);
-  }
-  :host([variant="solid"][color="blue"]) {
-    --tag-bg-color: var(--u-blue-500);
-    --tag-border-color: var(--u-blue-500);
-  }
-  :host([variant="solid"][color="green"]) {
-    --tag-bg-color: var(--u-green-500);
-    --tag-border-color: var(--u-green-500);
-  }
-  :host([variant="solid"][color="yellow"]) {
-    --tag-bg-color: var(--u-yellow-600);
-    --tag-border-color: var(--u-yellow-600);
-  }
-  :host([variant="solid"][color="red"]) {
-    --tag-bg-color: var(--u-red-500);
-    --tag-border-color: var(--u-red-500);
-  }
-  :host([variant="solid"][color="orange"]) {
-    --tag-bg-color: var(--u-orange-500);
-    --tag-border-color: var(--u-orange-500);
-  }
-  :host([variant="solid"][color="teal"]) {
-    --tag-bg-color: var(--u-teal-500);
-    --tag-border-color: var(--u-teal-500);
-  }
-  :host([variant="solid"][color="cyan"]) {
-    --tag-bg-color: var(--u-cyan-500);
-    --tag-border-color: var(--u-cyan-500);
-  }
-  :host([variant="solid"][color="purple"]) {
-    --tag-bg-color: var(--u-purple-500);
-    --tag-border-color: var(--u-purple-500);
-  }
-  :host([variant="solid"][color="pink"]) {
-    --tag-bg-color: var(--u-pink-500);
-    --tag-border-color: var(--u-pink-500);
+    --tag-bg-color: var(--tag-hue-solid, var(--tag-fill-color));
+    --tag-border-color: var(--tag-hue-solid, var(--tag-fill-color));
   }
 
   /* Variant: surface (채우기 + 테두리, 기본 색상은 --u-primary-color) */
   :host([variant="surface"]) {
-    --tag-color: color-mix(in srgb, var(--tag-fill-color) 70%, black);
-    --tag-bg-color: color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color));
-    --tag-border-color: color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color));
-  }
-  :host([variant="surface"][color="blue"]) {
-    --tag-color: var(--u-blue-800);
-    --tag-bg-color: var(--u-blue-100);
-    --tag-border-color: var(--u-blue-300);
-  }
-  :host([variant="surface"][color="green"]) {
-    --tag-color: var(--u-green-800);
-    --tag-bg-color: var(--u-green-100);
-    --tag-border-color: var(--u-green-300);
-  }
-  :host([variant="surface"][color="yellow"]) {
-    --tag-color: var(--u-yellow-800);
-    --tag-bg-color: var(--u-yellow-100);
-    --tag-border-color: var(--u-yellow-300);
-  }
-  :host([variant="surface"][color="red"]) {
-    --tag-color: var(--u-red-800);
-    --tag-bg-color: var(--u-red-100);
-    --tag-border-color: var(--u-red-300);
-  }
-  :host([variant="surface"][color="orange"]) {
-    --tag-color: var(--u-orange-800);
-    --tag-bg-color: var(--u-orange-100);
-    --tag-border-color: var(--u-orange-300);
-  }
-  :host([variant="surface"][color="teal"]) {
-    --tag-color: var(--u-teal-800);
-    --tag-bg-color: var(--u-teal-100);
-    --tag-border-color: var(--u-teal-300);
-  }
-  :host([variant="surface"][color="cyan"]) {
-    --tag-color: var(--u-cyan-800);
-    --tag-bg-color: var(--u-cyan-100);
-    --tag-border-color: var(--u-cyan-300);
-  }
-  :host([variant="surface"][color="purple"]) {
-    --tag-color: var(--u-purple-800);
-    --tag-bg-color: var(--u-purple-100);
-    --tag-border-color: var(--u-purple-300);
-  }
-  :host([variant="surface"][color="pink"]) {
-    --tag-color: var(--u-pink-800);
-    --tag-bg-color: var(--u-pink-100);
-    --tag-border-color: var(--u-pink-300);
+    --tag-color: var(--tag-hue-text, color-mix(in srgb, var(--tag-fill-color) 70%, black));
+    --tag-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color)));
+    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color)));
   }
 
   /* Variant: filled (채우기만, 테두리 없음, 기본 색상은 --u-primary-color) */
   :host([variant="filled"]) {
-    --tag-color: color-mix(in srgb, var(--tag-fill-color) 70%, black);
-    --tag-bg-color: color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color));
+    --tag-color: var(--tag-hue-text, color-mix(in srgb, var(--tag-fill-color) 70%, black));
+    --tag-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color)));
     --tag-border-color: transparent;
   }
-  :host([variant="filled"][color="blue"]) {
-    --tag-color: var(--u-blue-800);
-    --tag-bg-color: var(--u-blue-100);
-  }
-  :host([variant="filled"][color="green"]) {
-    --tag-color: var(--u-green-800);
-    --tag-bg-color: var(--u-green-100);
-  }
-  :host([variant="filled"][color="yellow"]) {
-    --tag-color: var(--u-yellow-800);
-    --tag-bg-color: var(--u-yellow-100);
-  }
-  :host([variant="filled"][color="red"]) {
-    --tag-color: var(--u-red-800);
-    --tag-bg-color: var(--u-red-100);
-  }
-  :host([variant="filled"][color="orange"]) {
-    --tag-color: var(--u-orange-800);
-    --tag-bg-color: var(--u-orange-100);
-  }
-  :host([variant="filled"][color="teal"]) {
-    --tag-color: var(--u-teal-800);
-    --tag-bg-color: var(--u-teal-100);
-  }
-  :host([variant="filled"][color="cyan"]) {
-    --tag-color: var(--u-cyan-800);
-    --tag-bg-color: var(--u-cyan-100);
-  }
-  :host([variant="filled"][color="purple"]) {
-    --tag-color: var(--u-purple-800);
-    --tag-bg-color: var(--u-purple-100);
-  }
-  :host([variant="filled"][color="pink"]) {
-    --tag-color: var(--u-pink-800);
-    --tag-bg-color: var(--u-pink-100);
-  }
 
   /* Variant: outlined (테두리만, 기본 색상은 --u-primary-color) */
   :host([variant="outlined"]) {
-    --tag-color: color-mix(in srgb, var(--tag-fill-color) 85%, black);
+    --tag-color: var(--tag-hue-text-outlined, color-mix(in srgb, var(--tag-fill-color) 85%, black));
     --tag-bg-color: transparent;
-    --tag-border-color: color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color));
-  }
-  :host([variant="outlined"][color="blue"]) {
-    --tag-color: var(--u-blue-600);
-    --tag-border-color: var(--u-blue-300);
-  }
-  :host([variant="outlined"][color="green"]) {
-    --tag-color: var(--u-green-600);
-    --tag-border-color: var(--u-green-300);
-  }
-  :host([variant="outlined"][color="yellow"]) {
-    --tag-color: var(--u-yellow-700);
-    --tag-border-color: var(--u-yellow-300);
-  }
-  :host([variant="outlined"][color="red"]) {
-    --tag-color: var(--u-red-600);
-    --tag-border-color: var(--u-red-300);
-  }
-  :host([variant="outlined"][color="orange"]) {
-    --tag-color: var(--u-orange-600);
-    --tag-border-color: var(--u-orange-300);
-  }
-  :host([variant="outlined"][color="teal"]) {
-    --tag-color: var(--u-teal-600);
-    --tag-border-color: var(--u-teal-300);
-  }
-  :host([variant="outlined"][color="cyan"]) {
-    --tag-color: var(--u-cyan-600);
-    --tag-border-color: var(--u-cyan-300);
-  }
-  :host([variant="outlined"][color="purple"]) {
-    --tag-color: var(--u-purple-600);
-    --tag-border-color: var(--u-purple-300);
-  }
-  :host([variant="outlined"][color="pink"]) {
-    --tag-color: var(--u-pink-600);
-    --tag-border-color: var(--u-pink-300);
+    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color)));
   }
 
   :host {
     display: inline-flex;
-    align-items: center;
-    gap: 4px;
     font-size: 12px;
     font-weight: 500;
-    padding: 0.25em 0.5em;
-    border: 1px solid var(--tag-border-color);
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
+
+    --tag-padding-block: 0.25em;
+    --tag-padding-inline: 0.5em;
+    --tag-gap: var(--u-space-xs, 6px);
     color: var(--tag-color);
     background-color: var(--tag-bg-color);
     line-height: 1.5em;
@@ -205,18 +124,30 @@ var styles = css`
     user-select: none;
     box-sizing: border-box;
   }
-  :host([rounded]) {
-    border-radius: 999px;
-  }
 
-  /* === Slots === */
-  ::slotted([slot="prefix"]) {
-    margin-right: 0.15em;
+  /* 여백/테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--tag-gap);
+    padding: var(--tag-padding-block) var(--tag-padding-inline);
+    border: 1px solid var(--tag-border-color);
+    border-radius: inherit;
   }
-  ::slotted([slot="suffix"]) {
-    margin-left: 0.15em;
+  :host([rounded]) {
+    border-radius: var(--u-radius-pill);
   }
 
+  /*
+   * === Slots ===
+   * 간격은 .base 의 gap 하나가 진다.
+   * 종전에는 gap 과 슬롯 margin(0.15em, 약 1.8px)이 **같은 자리에 겹쳐** 있어,
+   * 소비자가 --tag-gap 을 0 으로 줘도 1.8px 이 남았고 그 값에는 훅이 없었다.
+   * --tag-gap 기본값을 합계(4 + 1.8 = 약 6px)로 올려 흡수했다 — 렌더 간격은 사실상 그대로다.
+   */
+
   /* === Content === */
   .content {
     display: inline-block;

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

@@ -61,7 +61,7 @@ var styles = css`
   /* ===== Variant: underlined ===== */
   :host([variant="underlined"]) .container {
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     background-color: transparent;
     padding-left: 0;
     padding-right: 0;
@@ -89,7 +89,7 @@ var styles = css`
   /* ===== Variant: borderless ===== */
   :host([variant="borderless"]) .container {
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     background-color: transparent;
     padding: 0;
     box-shadow: none;

package/dist/components/tooltip/UTooltip.d.ts

@@ -8,6 +8,8 @@ import { UFloatingElement } from '../UFloatingElement.js';
  *
  * @event show - 툴팁을 표시하기 직전 발생 (취소 가능)
  * @event hide - 툴팁을 숨기기 직전 발생 (취소 가능)
+ * @cssprop --tooltip-padding-block - 세로 여백
+ * @cssprop --tooltip-padding-inline - 가로 여백
  */
 export declare class UTooltip extends UFloatingElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/tooltip/UTooltip.js

@@ -67,7 +67,9 @@ var UTooltip = class UTooltip extends UFloatingElement {
 	}
 	render() {
 		return html`
-      <slot @slotchange=${this.handleSlotChange}></slot>
+      <div class="base" part="base">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
     `;
 	}
 	bind(anchors) {

package/dist/components/tooltip/UTooltip.styles.js

@@ -6,17 +6,26 @@ var styles = css`
   }
 
   :host {
-    padding: 6px 8px;
     color: var(--u-tooltip-txt-color);
     font-family: var(--u-font-display, inherit);
     font-size: 12px;
     line-height: 1.25;
-    border: none;
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
     background-color: var(--u-tooltip-bg-color);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
     transform: scale(0.9);
     transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
+
+    --tooltip-padding-block: var(--u-space-xs, 6px);
+    --tooltip-padding-inline: var(--u-space-sm, 8px);
+  }
+
+  /* 여백은 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--tooltip-padding-block) var(--tooltip-padding-inline);
+    border-radius: inherit;
   }
   :host([open]) {
     transform: scale(1);

package/dist/components/tree-item/UTreeItem.d.ts

@@ -17,7 +17,7 @@ export type TreeItemTrigger = 'item' | 'icon';
  * @event pick - 선택 시 발생
  * @event check - 체크 시 발생
  *
- * @cssprop --tree-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color, 미지정 시 blue-600)
+ * @cssprop --tree-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color)
  */
 export declare class UTreeItem extends UElement {
     static styles: import('lit').CSSResultGroup[];

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, var(--u-blue-600));
+    --tree-item-color: var(--u-primary-color);
   }
 
   :host {
@@ -67,7 +67,7 @@ var styles = css`
     justify-content: center;
     width: 18px;
     height: 18px;
-    border-radius: 3px;
+    border-radius: var(--u-radius-sm);
   }
   .prefix-toggler u-icon {
     font-size: 12px;
@@ -86,7 +86,7 @@ var styles = css`
     justify-content: center;
     width: 16px;
     height: 16px;
-    border-radius: 3px;
+    border-radius: var(--u-radius-sm);
     border: 1.5px solid var(--u-input-border-color);
     background-color: transparent;
     transition: background-color 0.15s ease, border-color 0.15s ease;

package/dist/styles/dark.css

@@ -132,23 +132,93 @@
   --u-pink-900:      #E095C7;
   --u-pink-1000:     #EBB5D9;
 
+  /* ==========================================================================
+     Role Colors — 의미 역할 층
+     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.
+     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.
+
+     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는
+     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느
+     단인지 같은 모순이 생긴다.
+     ========================================================================== */
+
+  /* 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);
+
+  /* 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);
+
+  /* success — 성공 · 완료 */
+  --u-success-color-weakest:     var(--u-green-200);
+  --u-success-color-weaker:      var(--u-green-300);
+  --u-success-color-weak:        var(--u-green-500);
+  --u-success-color:             var(--u-green-600);
+  --u-success-color-strong:      var(--u-green-700);
+
+  /* warning — 주의 */
+  --u-warning-color-weakest:     var(--u-yellow-200);
+  --u-warning-color-weaker:      var(--u-yellow-300);
+  --u-warning-color-weak:        var(--u-yellow-500);
+  --u-warning-color:             var(--u-yellow-600);
+  --u-warning-color-strong:      var(--u-yellow-700);
+
+  /* danger — 오류 · 위험 · 유효성 실패 */
+  --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);
+  /* ==========================================================================
+     Radius Scale — 모서리 반경
+     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).
+     ========================================================================== */
+  --u-radius-none:   0;
+  --u-radius-sm:     3px;
+  --u-radius-md:     4px;
+  --u-radius-lg:     6px;
+  --u-radius-xl:     8px;
+  --u-radius-pill:   9999px;
+  --u-radius-circle: 50%;
+
+  /* ==========================================================================
+     Space Scale — 컨테이너·오버레이의 절대 여백
+     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이의 **레이아웃 여백**만
+     담당한다. 폼·인라인 요소의 `em` 여백은 상속된 `font-size` 에 비례하는 것이 의도이므로
+     **여기로 흡수하지 않는다.** 반경과 마찬가지로 테마와 무관하므로 두 시트가 같다.
+     축 구분과 근거는 docs/design-tokens.md 참조.
+     ========================================================================== */
+  --u-space-3xs:  2px;
+  --u-space-2xs:  4px;
+  --u-space-xs:   6px;
+  --u-space-sm:   8px;
+  --u-space-md:  12px;
+  --u-space-lg:  16px;
+
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-100);
-  --u-txt-color-hover:       var(--u-blue-600);
-  --u-txt-color-active:      var(--u-blue-600);
+  --u-txt-color-hover:       var(--u-primary-color);
+  --u-txt-color-active:      var(--u-primary-color);
   --u-txt-color-disabled:    var(--u-neutral-500);
   --u-txt-color-weak:        var(--u-neutral-700);
   --u-txt-color-strong:      var(--u-neutral-1000);
 
-  --u-link-txt-color:        var(--u-blue-700);
+  --u-link-txt-color:        var(--u-primary-color-strong);
   --u-tooltip-txt-color:     var(--u-neutral-100);
 
   /* Icon Colors */
   --u-icon-color:            var(--u-neutral-800);
   --u-icon-color-inverse:    var(--u-neutral-100);
-  --u-icon-color-hover:      var(--u-blue-600);
-  --u-icon-color-active:     var(--u-blue-600);
+  --u-icon-color-hover:      var(--u-primary-color);
+  --u-icon-color-active:     var(--u-primary-color);
   --u-icon-color-disabled:   var(--u-neutral-500);
 
   /* Border Colors */
@@ -159,8 +229,8 @@
 
   --u-input-border-color:         var(--u-neutral-400);
   --u-input-border-color-hover:   var(--u-neutral-500);
-  --u-input-border-color-focus:   var(--u-blue-600);
-  --u-input-border-color-invalid: var(--u-red-600);
+  --u-input-border-color-focus:   var(--u-primary-color);
+  --u-input-border-color-invalid: var(--u-danger-color);
 
   /* Background Colors */
   --u-bg-color:              var(--u-neutral-100);

package/dist/styles/light.css

@@ -132,23 +132,94 @@
   --u-pink-900:      #880E4F;
   --u-pink-1000:     #520830;
 
+  /* ==========================================================================
+     Role Colors — 의미 역할 층
+     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.
+     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.
+
+     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는
+     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느
+     단인지 같은 모순이 생긴다.
+     ========================================================================== */
+
+  /* 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);
+
+  /* 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);
+
+  /* success — 성공 · 완료 */
+  --u-success-color-weakest:     var(--u-green-200);
+  --u-success-color-weaker:      var(--u-green-300);
+  --u-success-color-weak:        var(--u-green-500);
+  --u-success-color:             var(--u-green-600);
+  --u-success-color-strong:      var(--u-green-700);
+
+  /* warning — 주의 */
+  --u-warning-color-weakest:     var(--u-yellow-200);
+  --u-warning-color-weaker:      var(--u-yellow-300);
+  --u-warning-color-weak:        var(--u-yellow-500);
+  --u-warning-color:             var(--u-yellow-600);
+  --u-warning-color-strong:      var(--u-yellow-700);
+
+  /* danger — 오류 · 위험 · 유효성 실패 */
+  --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);
+  /* ==========================================================================
+     Radius Scale — 모서리 반경
+     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).
+     ========================================================================== */
+  --u-radius-none:   0;
+  --u-radius-sm:     3px;
+  --u-radius-md:     4px;
+  --u-radius-lg:     6px;
+  --u-radius-xl:     8px;
+  --u-radius-pill:   9999px;
+  --u-radius-circle: 50%;
+
+  /* ==========================================================================
+     Space Scale — 컨테이너·오버레이의 절대 여백
+     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이(카드·대화상자·드로어·
+     알림·메뉴·툴팁 등)의 **레이아웃 여백**만 담당한다. 폼·인라인 요소의 `em` 여백은
+     상속된 `font-size` 에 비례하는 것이 의도이므로 **여기로 흡수하지 않는다** —
+     흡수하면 타이포를 키운 소비자의 여백이 따라 커지지 않는다.
+     축 구분과 근거는 docs/design-tokens.md 참조.
+     ========================================================================== */
+  --u-space-3xs:  2px;
+  --u-space-2xs:  4px;
+  --u-space-xs:   6px;
+  --u-space-sm:   8px;
+  --u-space-md:  12px;
+  --u-space-lg:  16px;
+
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-0);
-  --u-txt-color-hover:       var(--u-blue-600);
-  --u-txt-color-active:      var(--u-blue-600);
+  --u-txt-color-hover:       var(--u-primary-color);
+  --u-txt-color-active:      var(--u-primary-color);
   --u-txt-color-disabled:    var(--u-neutral-400);
   --u-txt-color-weak:        var(--u-neutral-500);
   --u-txt-color-strong:      var(--u-neutral-1000);
 
-  --u-link-txt-color:        var(--u-blue-700);
+  --u-link-txt-color:        var(--u-primary-color-strong);
   --u-tooltip-txt-color:     var(--u-neutral-0);
 
   /* Icon Colors */
   --u-icon-color:            var(--u-neutral-700);
   --u-icon-color-inverse:    var(--u-neutral-0);
-  --u-icon-color-hover:      var(--u-blue-600);
-  --u-icon-color-active:     var(--u-blue-600);
+  --u-icon-color-hover:      var(--u-primary-color);
+  --u-icon-color-active:     var(--u-primary-color);
   --u-icon-color-disabled:   var(--u-neutral-400);
 
   /* Border Colors */
@@ -159,8 +230,8 @@
 
   --u-input-border-color:         var(--u-neutral-300);
   --u-input-border-color-hover:   var(--u-neutral-400);
-  --u-input-border-color-focus:   var(--u-blue-600);
-  --u-input-border-color-invalid: var(--u-red-600);
+  --u-input-border-color-focus:   var(--u-primary-color);
+  --u-input-border-color-invalid: var(--u-danger-color);
 
   /* Background Colors */
   --u-bg-color:              var(--u-neutral-0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.10.0",
+  "version": "1.13.0",
   "keywords": [
     "iyulab",
     "components",
@@ -48,7 +48,8 @@
     "test:react-types": "tsc -p tsconfig.react-smoke.json",
     "typecheck:plugins": "tsc -p plugins/tsconfig.json",
     "docs:cssprops": "node scripts/cssprops-doc.mjs --write",
-    "docs:react-events": "node scripts/react-events-doc.mjs --write"
+    "docs:react-events": "node scripts/react-events-doc.mjs --write",
+    "docs:tokens": "node scripts/design-tokens-doc.mjs --write"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",