@iyulab/components 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## [1.14.0] - 2026-08-01
+
+### Added
+
+- **토큰 시트 없이도 렌더된다** — 시트 토큰 참조 **411곳**에 use-site 리터럴 폴백을
+  배선했다(`var(--u-txt-color)` → `var(--u-txt-color, #212121)`).
+
+  토큰 시트(`styles/tokens.css`)를 로드하지 않으면 `var(--u-*)` 는 무효가 되고 **그 선언이
+  통째로 버려진다** — 색이 빠지는 게 아니라 규칙이 사라지는 것이라, 텍스트가 안 보이거나
+  패널이 완전히 투명해진다. 이제 시트가 없어도 기본 테마 값으로 렌더된다.
+
+  **시트를 쓰는 경우 시각 변화는 없다** — 폴백은 시트가 없을 때만 평가된다. 리터럴이
+  시트 값과 어긋나지 않도록 대조 테스트가 강제하며, 폴백은 손으로 쓰지 않고 생성한다.
+
+- **`Theme.resolved()`** — 문서에 **실제로 적용된** 테마(`'light' | 'dark'`)를 돌려준다.
+
+  `Theme.get()` 은 사용자의 **선호**를 돌려주며 거기에는 `'system'` 이 있고, 그것이
+  기본값이다. 그래서 `get() === 'dark'` 로 분기하는 소비자는 **system + OS 다크에서
+  밝은 화면을 그리게 된다** — 가장 흔한 경로에서 틀린다. 실효 테마를 알 방법이 없어
+  소비자마다 다르게 추측하고 있었다.
+
+  ⚠**폰트 계열(`--u-font-*`)은 예외**다 — 폴백을 배선하지 않았다. 폰트 스택은 리터럴이
+  100자를 넘어 모든 사용처에 굽으면 얻는 것보다 잃는 것이 크고, 시트가 없으면 UA 기본
+  폰트로 대체되어 **화면이 깨지지 않는다**(색·테두리는 깨진다).
+
+### Fixed
+
+- ★**토큰 시트를 쓰지 않을 때 버튼만 다른 브랜드 색으로 렌더되던 문제 수정** —
+  `u-button` 의 폴백 3곳(`#3b82f6`·`#2563eb`·`#1d4ed8`)이 디자인 시트의 파랑
+  (`#2196F3`·`#1E88E5`·`#1976D2`)과 다른 계열이었다. 시트를 로드한 환경에서는 폴백이
+  평가되지 않아 드러나지 않았고, **시트 없이 쓰는 소비자에게만** 버튼이 다른 파랑으로
+  보였다. 시트 값으로 맞췄다.
+- **오버레이 배경 불투명도 불일치 수정** — 폴백이 `rgba(0,0,0,0.4)`, 시트가 `0.5` 였다.
+- **`u-badge` 의 폴백이 다른 명도 단을 가리키던 문제 수정** —
+  `var(--u-primary-color, var(--u-blue-500))` 이 시트 정의(`--u-blue-600`)와 어긋나 있었다.
+
+### Changed
+
+- **토큰 시트 부재 경고 문구를 실제 거동에 맞췄다.** 종전에는 *"테두리·배경·색이 무효가
+  됩니다"* 였으나 폴백 배선으로 더는 무효가 되지 않는다. 이제 남는 손실을 정확히 말한다 —
+  **다크 테마와 테마 변수 오버라이드가 적용되지 않는다.** 경고 자체는 유지한다: 폴백은
+  *"조용히 사라지지 않게"* 하는 안전망이지 *"시트 없이 써도 된다"* 가 아니다.
+- **`u-tree` 의 기본 글자 크기가 `rem` 에서 `em` 으로 바뀌었다.** 루트 기준이라 소비자가
+  컨테이너 타이포를 키워도 트리만 따라오지 않았다. **기본 상황에서는 두 단위가 같은 값
+  (14px)이므로 시각 변화가 없고**, 상속 컨텍스트에서만 동작이 달라진다 —
+  `<div style="font-size:24px"><u-tree>` 안에서 트리가 21px 로 함께 커진다.
+
 ## [1.13.0] - 2026-08-01
 
 ### Added

package/dist/components/UElement.styles.js

@@ -17,11 +17,11 @@ var styles = css`
 
   /* Focus Styles */
   :host(:focus-visible) {
-    outline: 2px solid var(--u-primary-color-weak);
+    outline: 2px solid var(--u-primary-color-weak, #2196F3);
     outline-offset: 2px;
   }
   :focus-visible {
-    outline: 2px solid var(--u-primary-color-weak);
+    outline: 2px solid var(--u-primary-color-weak, #2196F3);
     outline-offset: 2px;
   }
 
@@ -36,31 +36,31 @@ var styles = css`
   /* Scrollbar Styles */
   :host([scrollable]) {
     scrollbar-width: thin;
-    scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
+    scrollbar-color: var(--u-scrollbar-color, #BDBDBD) var(--u-scrollbar-track-color, transparent);
   }
   :host([scrollable])::-webkit-scrollbar {
     width: 8px;
     height: 8px;
   }
   :host([scrollable])::-webkit-scrollbar-thumb {
-    background: var(--u-scrollbar-color);
+    background: var(--u-scrollbar-color, #BDBDBD);
   }
   :host([scrollable])::-webkit-scrollbar-track {
-    background: var(--u-scrollbar-track-color);
+    background: var(--u-scrollbar-track-color, transparent);
   }
   [scrollable] {
     scrollbar-width: thin;
-    scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
+    scrollbar-color: var(--u-scrollbar-color, #BDBDBD) var(--u-scrollbar-track-color, transparent);
   }
   [scrollable]::-webkit-scrollbar {
     width: 8px;
     height: 8px;
   }
   [scrollable]::-webkit-scrollbar-thumb {
-    background: var(--u-scrollbar-color);
+    background: var(--u-scrollbar-color, #BDBDBD);
   }
   [scrollable]::-webkit-scrollbar-track {
-    background: var(--u-scrollbar-track-color);
+    background: var(--u-scrollbar-track-color, transparent);
   }
 `;
 //#endregion

package/dist/components/UOverlayElement.styles.js

@@ -6,7 +6,7 @@ var styles = css`
     z-index: 9999;
     inset: 0;
     display: flex;
-    background: var(--u-overlay-bg-color, rgba(0, 0, 0, 0.4));
+    background: var(--u-overlay-bg-color, rgba(0, 0, 0, 0.5));
 
     opacity: 0;
     visibility: hidden;

package/dist/components/alert/UAlert.styles.js

@@ -3,34 +3,34 @@ import { css } from "lit";
 var styles = css`
   /* === Status Colors === */
   :host {
-    --alert-icon-color: var(--u-neutral-700);
-    --alert-border-color: var(--u-neutral-300);
-    --alert-background-color: var(--u-neutral-200);
+    --alert-icon-color: var(--u-neutral-700, #616161);
+    --alert-border-color: var(--u-neutral-300, #E0E0E0);
+    --alert-background-color: var(--u-neutral-200, #EEEEEE);
   }
   :host([status="error"]) {
-    --alert-icon-color: var(--u-danger-color-strong);
-    --alert-border-color: var(--u-danger-color-weaker);
-    --alert-background-color: var(--u-danger-color-weakest);
+    --alert-icon-color: var(--u-danger-color-strong, #D32F2F);
+    --alert-border-color: var(--u-danger-color-weaker, #E57373);
+    --alert-background-color: var(--u-danger-color-weakest, #EF9A9A);
   }
   :host([status="warning"]) {
-    --alert-icon-color: var(--u-warning-color-strong);
-    --alert-border-color: var(--u-warning-color-weaker);
-    --alert-background-color: var(--u-warning-color-weakest);
+    --alert-icon-color: var(--u-warning-color-strong, #FBC02D);
+    --alert-border-color: var(--u-warning-color-weaker, #FFF176);
+    --alert-background-color: var(--u-warning-color-weakest, #FFF59D);
   }
   :host([status="info"]) {
-    --alert-icon-color: var(--u-info-color-strong);
-    --alert-border-color: var(--u-info-color-weaker);
-    --alert-background-color: var(--u-info-color-weakest);
+    --alert-icon-color: var(--u-info-color-strong, #1976D2);
+    --alert-border-color: var(--u-info-color-weaker, #64B5F6);
+    --alert-background-color: var(--u-info-color-weakest, #90CAF9);
   }
   :host([status="success"]) {
-    --alert-icon-color: var(--u-success-color-strong);
-    --alert-border-color: var(--u-success-color-weaker);
-    --alert-background-color: var(--u-success-color-weakest);
+    --alert-icon-color: var(--u-success-color-strong, #388E3C);
+    --alert-border-color: var(--u-success-color-weaker, #81C784);
+    --alert-background-color: var(--u-success-color-weakest, #A5D6A7);
   }
   :host([status="notice"]) {
-    --alert-icon-color: var(--u-neutral-700);
-    --alert-border-color: var(--u-neutral-300);
-    --alert-background-color: var(--u-neutral-200);
+    --alert-icon-color: var(--u-neutral-700, #616161);
+    --alert-border-color: var(--u-neutral-300, #E0E0E0);
+    --alert-background-color: var(--u-neutral-200, #EEEEEE);
   }
 
   :host {
@@ -39,8 +39,8 @@ var styles = css`
     min-width: 200px;
     max-width: 100%;
     max-height: 50vh;
-    border-radius: var(--u-radius-xl);
-    box-shadow: 0 4px 12px var(--u-shadow-color-normal);
+    border-radius: var(--u-radius-xl, 8px);
+    box-shadow: 0 4px 12px var(--u-shadow-color-normal, rgba(0, 0, 0, 0.12));
     
     opacity: 0;
     transform: scale(0.8);
@@ -122,7 +122,7 @@ var styles = css`
     flex-shrink: 0;
     padding: var(--u-space-2xs, 4px);
     font-size: inherit;
-    border-radius: var(--u-radius-md);
+    border-radius: var(--u-radius-md, 4px);
   }
 
   .content {

package/dist/components/avatar/UAvatar.styles.js

@@ -9,24 +9,24 @@ var styles = css`
     height: 2.5em;
     font-family: var(--u-font-base);
     font-weight: 600;
-    color: var(--u-neutral-0);
-    background-color: var(--u-neutral-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-neutral-500, #9E9E9E);
     vertical-align: middle;
     overflow: hidden;
     user-select: none;
   }
 
   :host([shape="circle"]) {
-    border-radius: var(--u-radius-circle);
+    border-radius: var(--u-radius-circle, 50%);
   }
   :host([shape="square"]) {
-    border-radius: var(--u-radius-none);
+    border-radius: var(--u-radius-none, 0);
   }
   :host([shape="rounded"]) {
     border-radius: 0.375em;
   }
   :host([outline]) {
-    box-shadow: 0 0 0 0.125em var(--u-border-color);
+    box-shadow: 0 0 0 0.125em var(--u-border-color, #E0E0E0);
   }
 
   img {

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

@@ -34,56 +34,56 @@ var styles = css`
     border-radius: 0.2em;
   }
   :host([variant="pill"]) {
-    border-radius: var(--u-radius-pill);
+    border-radius: var(--u-radius-pill, 9999px);
   }
   :host([variant="dot"]) {
     width: 0.6em;
     height: 0.6em;
     min-width: 0.6em;
     min-height: 0.6em;
-    border-radius: var(--u-radius-circle);
+    border-radius: var(--u-radius-circle, 50%);
   }
 
   /* === Color (색상) === */
   :host([color="neutral"]) {
-    color: var(--u-neutral-800);
-    background-color: var(--u-neutral-200);
+    color: var(--u-neutral-800, #424242);
+    background-color: var(--u-neutral-200, #EEEEEE);
   }
   :host([color="blue"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-primary-color, var(--u-blue-500));
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-primary-color, #1E88E5);
   }
   :host([color="green"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-green-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-green-500, #4CAF50);
   }
   :host([color="yellow"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-yellow-600);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-yellow-600, #FDD835);
   }
   :host([color="red"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-red-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-red-500, #F44336);
   }
   :host([color="orange"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-orange-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-orange-500, #FF9800);
   }
   :host([color="teal"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-teal-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-teal-500, #009688);
   }
   :host([color="cyan"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-cyan-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-cyan-500, #00BCD4);
   }
   :host([color="purple"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-purple-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-purple-500, #9C27B0);
   }
   :host([color="pink"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-pink-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-pink-500, #E91E63);
   }
 
   /* === Anchor (위치 고정) === */

package/dist/components/breadcrumb/UBreadcrumb.styles.js

@@ -5,7 +5,7 @@ var styles = css`
     display: block;
     font-size: inherit;
     font-family: var(--u-font-base);
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     user-select: none;
   }
 
@@ -28,7 +28,7 @@ var styles = css`
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.75em;
     user-select: none;
   }

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

@@ -6,13 +6,13 @@ var styles = css`
     align-items: center;
     gap: 0.2em;
     flex-shrink: 0;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: inherit;
     line-height: 1.5em;
     cursor: pointer;
   }
   :host:hover {
-    color: var(--u-primary-color-strong);
+    color: var(--u-primary-color-strong, #1976D2);
   }
   :host([disabled]) {
     opacity: 0.5;

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

@@ -3,17 +3,17 @@ import { css } from "lit";
 var styles = css`
   :host {
     /* --btn-color 하나만 정해지면 hover/active/surface/outline 톤이 전부 자동 파생 */
-    --btn-color: var(--u-primary-color);
+    --btn-color: var(--u-primary-color, #1E88E5);
     --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));
-    --btn-color-surface-hover: color-mix(in srgb, var(--btn-color) 22%, var(--u-bg-color));
-    --btn-color-surface-active: color-mix(in srgb, var(--btn-color) 32%, var(--u-bg-color));
-    --btn-color-border: color-mix(in srgb, var(--btn-color) 45%, var(--u-bg-color));
-    --btn-color-border-hover: color-mix(in srgb, var(--btn-color) 60%, var(--u-bg-color));
-    --btn-color-border-active: color-mix(in srgb, var(--btn-color) 75%, var(--u-bg-color));
-    --btn-color-outline-hover: color-mix(in srgb, var(--btn-color) 6%, var(--u-bg-color));
-    --btn-color-outline-active: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color));
+    --btn-color-surface: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color, #FFFFFF));
+    --btn-color-surface-hover: color-mix(in srgb, var(--btn-color) 22%, var(--u-bg-color, #FFFFFF));
+    --btn-color-surface-active: color-mix(in srgb, var(--btn-color) 32%, var(--u-bg-color, #FFFFFF));
+    --btn-color-border: color-mix(in srgb, var(--btn-color) 45%, var(--u-bg-color, #FFFFFF));
+    --btn-color-border-hover: color-mix(in srgb, var(--btn-color) 60%, var(--u-bg-color, #FFFFFF));
+    --btn-color-border-active: color-mix(in srgb, var(--btn-color) 75%, var(--u-bg-color, #FFFFFF));
+    --btn-color-outline-hover: color-mix(in srgb, var(--btn-color) 6%, var(--u-bg-color, #FFFFFF));
+    --btn-color-outline-active: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color, #FFFFFF));
   }
 
   :host {
@@ -23,7 +23,7 @@ var styles = css`
     font-size: 14px;
     font-weight: 500;
     line-height: 1.5;
-    border-radius: var(--u-radius-lg);
+    border-radius: var(--u-radius-lg, 6px);
     background-color: transparent;
 
     transition: all 0.2s ease;
@@ -33,14 +33,14 @@ var styles = css`
   }
 
   /* === Color tokens === */
-  :host([color="blue"])   { --btn-color: var(--u-blue-600); }
-  :host([color="green"])  { --btn-color: var(--u-green-600); }
-  :host([color="red"])    { --btn-color: var(--u-red-600); }
-  :host([color="orange"]) { --btn-color: var(--u-orange-600); }
-  :host([color="teal"])   { --btn-color: var(--u-teal-600); }
-  :host([color="cyan"])   { --btn-color: var(--u-cyan-600); }
-  :host([color="purple"]) { --btn-color: var(--u-purple-600); }
-  :host([color="pink"])   { --btn-color: var(--u-pink-600); }
+  :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); }
+  :host([color="orange"]) { --btn-color: var(--u-orange-600, #FB8C00); }
+  :host([color="teal"])   { --btn-color: var(--u-teal-600, #00897B); }
+  :host([color="cyan"])   { --btn-color: var(--u-cyan-600, #00ACC1); }
+  :host([color="purple"]) { --btn-color: var(--u-purple-600, #8E24AA); }
+  :host([color="pink"])   { --btn-color: var(--u-pink-600, #D81B60); }
 
   /* === Size === */
   :host([size="sm"]) {
@@ -69,7 +69,7 @@ var styles = css`
     visibility: hidden;
   }
   :host([rounded]) {
-    border-radius: var(--u-radius-pill);
+    border-radius: var(--u-radius-pill, 9999px);
   }
   :host([has-spinner]) u-spinner {
     display: none;
@@ -94,7 +94,7 @@ var styles = css`
 
   /* surface: 채우기 + 경계 */
   :host([variant="surface"]) {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     background-color: var(--btn-color-surface);
     --btn-border-color: var(--btn-color-border);
   }
@@ -109,7 +109,7 @@ var styles = css`
 
   /* filled: 채우기만 */
   :host([variant="filled"]) {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     background-color: var(--btn-color-surface);
     --btn-border-color: transparent;
   }
@@ -122,7 +122,7 @@ var styles = css`
 
   /* outlined: 경계만 */
   :host([variant="outlined"]) {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     --btn-border-color: var(--btn-color-border);
     background-color: transparent;
   }
@@ -137,30 +137,30 @@ var styles = css`
 
   /* ghost: transparent */
   :host([variant="ghost"]) {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     --btn-border-color: transparent;
     background-color: transparent;
   }
   :host([variant="ghost"]:hover) {
-    background-color: var(--u-bg-color-hover);
+    background-color: var(--u-bg-color-hover, #F5F5F5);
   }
   :host([variant="ghost"]:active) {
-    background-color: var(--u-bg-color-active);
+    background-color: var(--u-bg-color-active, #EEEEEE);
   }
 
   /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존) */
   :host([variant="link"]) {
-    color: var(--u-primary-color-weak, #3b82f6);
+    color: var(--u-primary-color-weak, #2196F3);
     --btn-border-color: transparent;
     background-color: transparent;
     --btn-padding-inline: 0;
   }
   :host([variant="link"]:hover) {
-    color: var(--u-primary-color, #2563eb);
+    color: var(--u-primary-color, #1E88E5);
     text-decoration: underline;
   }
   :host([variant="link"]:active) {
-    color: var(--u-primary-color-strong, #1d4ed8);
+    color: var(--u-primary-color-strong, #1976D2);
   }
   /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크) */
   :host([variant="link"][color]:not([color="neutral"])) {

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

@@ -3,13 +3,13 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: flex;
-    border-radius: var(--u-radius-xl);
-    background-color: var(--u-panel-bg-color);
+    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);
     overflow: hidden;
 
     --card-border-width: 1px;
-    --card-border-color: var(--u-border-color);
+    --card-border-color: var(--u-border-color, #E0E0E0);
   }
 
   /* 테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
@@ -63,7 +63,7 @@ var styles = css`
   .header {
     display: none;
     padding: var(--u-space-lg, 16px);
-    border-bottom: 1px solid var(--u-border-color);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   .header.has-content {
     display: block;
@@ -81,7 +81,7 @@ var styles = css`
   .footer {
     display: none;
     padding: var(--u-space-lg, 16px);
-    border-top: 1px solid var(--u-border-color);
+    border-top: 1px solid var(--u-border-color, #E0E0E0);
   }
   .footer.has-content {
     display: block;

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

@@ -58,17 +58,17 @@ var styles = css`
     transform: translateY(-50%);
     padding: var(--u-space-sm, 8px);
     font-size: 20px;
-    color: var(--u-neutral-900);
-    background-color: var(--u-neutral-100);
+    color: var(--u-neutral-900, #212121);
+    background-color: var(--u-neutral-100, #F5F5F5);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
   .nav-button:hover {
-    background-color: var(--u-neutral-200);
+    background-color: var(--u-neutral-200, #EEEEEE);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transform: translateY(-50%) scale(1.1);
   }
   .nav-button:active {
-    background-color: var(--u-neutral-300);
+    background-color: var(--u-neutral-300, #E0E0E0);
     transform: translateY(-50%) scale(0.95);
   }
 
@@ -94,18 +94,18 @@ var styles = css`
     height: 10px;
     padding: 0;
     border: none;
-    border-radius: var(--u-radius-circle);
-    background-color: var(--u-neutral-400);
+    border-radius: var(--u-radius-circle, 50%);
+    background-color: var(--u-neutral-400, #BDBDBD);
     cursor: pointer;
     transition: all 0.2s ease;
   }
   .dot:hover {
-    background-color: var(--u-neutral-200);
+    background-color: var(--u-neutral-200, #EEEEEE);
   }
   .dot[active] {
     width: 24px;
     border-radius: 5px;
-    background-color: var(--u-neutral-100);
+    background-color: var(--u-neutral-100, #F5F5F5);
   }
 `;
 //#endregion

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

@@ -2,16 +2,16 @@ import { css } from "lit";
 //#region src/components/checkbox/UCheckbox.styles.ts
 var styles = css`
   :host {
-    --checkbox-fill-color: var(--u-primary-color);
+    --checkbox-fill-color: var(--u-primary-color, #1E88E5);
     --checkbox-color: inherit;
-    --checkbox-border-color: var(--u-input-border-color);
-    --checkbox-background-color: var(--u-input-bg-color);
+    --checkbox-border-color: var(--u-input-border-color, #E0E0E0);
+    --checkbox-background-color: var(--u-input-bg-color, #FFFFFF);
   }
 
   :host {
     display: inline-flex;
     flex-direction: column;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
     user-select: none;
@@ -27,23 +27,23 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) {
-    --checkbox-border-color: var(--u-danger-color);
+    --checkbox-border-color: var(--u-danger-color, #E53935);
   }
   :host([invalid]) .footer {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
   }
   :host([checked]) .checkbox u-icon,
   :host([indeterminate]) .checkbox u-icon {
     transform: scale(1);
   }
   :host(:not([disabled]):not([readonly]):hover) {
-    --checkbox-border-color: var(--u-input-border-color-hover);
+    --checkbox-border-color: var(--u-input-border-color-hover, #BDBDBD);
   }
 
   /* === Variant: filled - 배경 채움 === */
   :host([variant="filled"][checked]),
   :host([variant="filled"][indeterminate]) {
-    --checkbox-color: var(--u-neutral-100);
+    --checkbox-color: 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));
   }
@@ -63,28 +63,28 @@ var styles = css`
      즉 blue 는 장식 축의 한 값이 아니라 "색을 지정하지 않음" 의 표기다.
      ========================================================================== */
   :host([color="green"]) {
-    --checkbox-hue: var(--u-green-600);
+    --checkbox-hue: var(--u-green-600, #43A047);
   }
   :host([color="red"]) {
-    --checkbox-hue: var(--u-red-600);
+    --checkbox-hue: var(--u-red-600, #E53935);
   }
   :host([color="orange"]) {
-    --checkbox-hue: var(--u-orange-600);
+    --checkbox-hue: var(--u-orange-600, #FB8C00);
   }
   :host([color="teal"]) {
-    --checkbox-hue: var(--u-teal-600);
+    --checkbox-hue: var(--u-teal-600, #00897B);
   }
   :host([color="cyan"]) {
-    --checkbox-hue: var(--u-cyan-600);
+    --checkbox-hue: var(--u-cyan-600, #00ACC1);
   }
   :host([color="purple"]) {
-    --checkbox-hue: var(--u-purple-600);
+    --checkbox-hue: var(--u-purple-600, #8E24AA);
   }
   :host([color="pink"]) {
-    --checkbox-hue: var(--u-pink-600);
+    --checkbox-hue: var(--u-pink-600, #D81B60);
   }
   :host([color="neutral"]) {
-    --checkbox-hue: var(--u-neutral-600);
+    --checkbox-hue: var(--u-neutral-600, #757575);
   }
 
 
@@ -104,7 +104,7 @@ var styles = css`
   }
   input:focus-visible ~ .checkbox {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus),
+      0 0 0 1px var(--u-input-border-color-focus, #1E88E5),
       0 0 0 3px rgba(59, 130, 246, 0.22);
   }
 
@@ -137,19 +137,19 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
     font-weight: 500;
   }
 
   .description {
     margin-top: 0.5em;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.75em;
     line-height: 1.2;
   }
 
   :host([invalid]) .description {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
   }
 `;
 //#endregion