@iyulab/chat-components 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Changelog
 
+## [0.10.0] - 2026-08-03
+
+### Fixed
+
+- ★**Firefox·Safari 에서 다크 코드블록·다크 마크다운이 적용된 적이 없던 문제.**
+
+  두 컴포넌트의 다크 팔레트(구문 강조 15색 · 마크다운 11색)가
+  `:host-context([theme="dark"])` **단독**으로 선언돼 있었다. 그 선택자는 크로미움
+  전용이라, 나머지 두 엔진에서는 어두운 코드블록 위에 **라이트용 색이 그대로** 남았다.
+
+  ```
+  u-code-block     구문 강조 15색
+  u-marked-block   본문·테두리·강조 11색
+  ```
+
+  섀도 루트 안에서 문서 루트의 테마를 읽는 수단 중 **상속되는 것은 `color-scheme`** 이고,
+  `light-dark()` 가 그 값을 따른다. 테마 시트가 `:root[theme="dark"] { color-scheme: dark }`
+  를 이미 선언하므로 별도 배선이 필요 없다.
+
+  ⚠**소비자 조치**: 테마 시트를 로드하지 않고 `theme` 속성만 세우고 있다면 다크가
+  적용되지 않는다 — 문서 루트에 `color-scheme: dark` 를 함께 선언할 것.
+  `@supports` 가드가 있어 `light-dark()` 미지원 브라우저는 **라이트로 떨어진다**
+  (종전 Firefox·Safari 와 같은 결과 — 회귀가 아니다).
+
+- **참조 카드 헤더의 포커스 링이 팔레트에 없는 색이었다** — `rgba(100, 150, 250, .6)`
+  를 굽고 있었다. 다른 컴포넌트의 포커스 링과 색이 달랐고 브랜드를 따라오지 않았다.
+  역할 토큰(`--u-primary-color-strong`)을 읽도록 고쳤다 — 디자인 시스템의 전역 포커스 링과
+  같은 값이다.
+
+### Added
+
+- **섀도 안 테마 해석 회귀 테스트** — 실제 크로미움에서 `color-scheme` 을 뒤집어
+  구문색·본문색이 따라오는지 확인한다. 커스텀 프로퍼티를 직접 읽지 않고 **그것을 소비하는
+  선언의 계산색**을 재는데, `getComputedStyle().getPropertyValue()` 는 해석된 색이 아니라
+  `light-dark(...)` 문자열 그대로를 돌려주기 때문이다.
+
+## [0.9.1] - 2026-08-02
+
+### Fixed
+
+- **토큰 폴백 리터럴 9곳이 정본 시트와 어긋나 있던 문제.**
+  `var(--u-danger-color, #E53935)` 처럼 배선된 리터럴은 **시트 값의 복제**여야 하는데,
+  ⑴ `@iyulab/components` 1.16.0 의 역할 단 재매핑을 받지 못한 값(6곳)과
+  ⑵ 애초에 시트에 없던 임의 값(`#4a90e2`·`#f3f4f6`·`rgba(0,0,0,0.02)` — 3곳)이 섞여 있었다.
+
+  ⚠**이 결함은 개발 환경에서 절대 드러나지 않는다.** 토큰 시트가 있으면 폴백은 아예
+  평가되지 않는다 — 깨지는 곳은 시트를 로드하지 않은 소비자의 화면이고, 우리가 보지
+  못하는 자리다. 모노레포 루트의 `npm run tokens:sync` 가 이제 정본 시트와 대조한다.
+
 ## [0.9.0] - 2026-08-01
 
 ### Changed

package/dist/components/blocks/UCodeBlock.styles.js

@@ -18,22 +18,40 @@ var styles = css`
     --hljs-deletion-color: #b31d28;
     --hljs-deletion-bg-color: #ffeef0;
   }
-  :host-context([theme="dark"]) {
-    --hljs-text-color: #c9d1d9;
-    --hljs-background-color: #0d1117;
-    --hljs-keyword-color: #ff7b72;
-    --hljs-entity-color: #d2a8ff;
-    --hljs-constant-color: #79c0ff;
-    --hljs-string-color: #a5d6ff;
-    --hljs-variable-color: #ffa657;
-    --hljs-comment-color: #8b949e;
-    --hljs-entity-tag-color: #7ee787;
-    --hljs-markup-heading-color: #1f6feb;
-    --hljs-markup-list-color: #f2cc60;
-    --hljs-addition-color: #aff5b4;
-    --hljs-addition-bg-color: #033a16;
-    --hljs-deletion-color: #ffdcd7;
-    --hljs-deletion-bg-color: #67060c;
+  /* ★다크 팔레트는 light-dark() 로 싣는다 — 종전에는 :host-context([theme="dark"]) 였고,
+     그 선택자는 **Firefox·Safari 에서 미지원**이라 두 브라우저에서 다크 구문 강조가 적용된
+     적이 없다(라이트용 색이 어두운 코드블록 위에 그대로 남았다).
+
+     왜 light-dark() 인가: 테마 표시(theme 속성)는 문서 루트에 있고 이 팔레트는 섀도 루트
+     안에 있다. 그 경계를 넘는 수단 중 상속되는 것은 color-scheme 뿐이고, 토큰 시트가
+     :root[theme="dark"] { color-scheme: dark } 로 이미 선언한다 — 상속 프로퍼티라
+     섀도 안까지 닿는다.
+
+     ⚠**:host 에 color-scheme 을 선언하지 말 것.** 선언하면 루트에서 상속받은 값을 덮어
+     OS 선호를 따르게 되어, 앱이 라이트인데 OS 가 다크면 코드블록만 어두워진다.
+
+     ⚠**이 방식을 --u-* 디자인 토큰으로 확대하지 말 것.** getComputedStyle 로 읽는 소비자
+     (같은 패키지의 UChartBlock 이 Chart.js 기본값을 그렇게 세팅한다)에게는 해석된 색이
+     아니라 light-dark(...) **문자열 그대로** 돌아온다. 여기 팔레트는 CSS 안에서만 쓰이므로
+     안전하다. */
+  @supports (color: light-dark(#000, #fff)) {
+    :host {
+      --hljs-text-color: light-dark(#24292e, #c9d1d9);
+      --hljs-background-color: light-dark(#ffffff, #0d1117);
+      --hljs-keyword-color: light-dark(#d73a49, #ff7b72);
+      --hljs-entity-color: light-dark(#6f42c1, #d2a8ff);
+      --hljs-constant-color: light-dark(#005cc5, #79c0ff);
+      --hljs-string-color: light-dark(#032f62, #a5d6ff);
+      --hljs-variable-color: light-dark(#e36209, #ffa657);
+      --hljs-comment-color: light-dark(#6a737d, #8b949e);
+      --hljs-entity-tag-color: light-dark(#22863a, #7ee787);
+      --hljs-markup-heading-color: light-dark(#005cc5, #1f6feb);
+      --hljs-markup-list-color: light-dark(#735c0f, #f2cc60);
+      --hljs-addition-color: light-dark(#22863a, #aff5b4);
+      --hljs-addition-bg-color: light-dark(#f0fff4, #033a16);
+      --hljs-deletion-color: light-dark(#b31d28, #ffdcd7);
+      --hljs-deletion-bg-color: light-dark(#ffeef0, #67060c);
+    }
   }
 
   :host {

package/dist/components/blocks/UFileBlock.styles.js

@@ -110,7 +110,7 @@ var styles = css`
     pointer-events: auto;
   }
   .remove-btn:hover {
-    background-color: var(--u-danger-color, #E53935);
+    background-color: var(--u-danger-color, #D32F2F);
   }
 
   /* ─── 미리보기 오버레이 ─── */

package/dist/components/blocks/UMarkedBlock.styles.js

@@ -25,18 +25,23 @@ var styles = css`
     --borderColor-muted: #d1d9e0b3;
     --borderColor-neutral-muted: #d1d9e0b3;
   }
-  :host-context([theme="dark"]) {
-    --focus-outlineColor: #1f6feb;
-    --fgColor-default: #f0f6fc;
-    --fgColor-muted: #9198a1;
-    --fgColor-accent: #4493f8;
-    --bgColor-default: #0d1117;
-    --bgColor-muted: #151b23;
-    --bgColor-neutral-muted: #656c7633;
-    --bgColor-attention-muted: #bb800926;
-    --borderColor-default: #3d444d;
-    --borderColor-muted: #3d444db3;
-    --borderColor-neutral-muted: #3d444db3;
+  /* ★다크 팔레트는 light-dark() 로 — 근거는 UCodeBlock.styles.ts 의 같은 자리 주석 참조.
+     :host-context() 가 Firefox·Safari 미지원이라 두 브라우저에서 마크다운 본문의 다크가
+     적용된 적이 없다. */
+  @supports (color: light-dark(#000, #fff)) {
+    :host {
+      --focus-outlineColor: light-dark(#0969da, #1f6feb);
+      --fgColor-default: light-dark(#1f2328, #f0f6fc);
+      --fgColor-muted: light-dark(#59636e, #9198a1);
+      --fgColor-accent: light-dark(#0969da, #4493f8);
+      --bgColor-default: light-dark(#ffffff, #0d1117);
+      --bgColor-muted: light-dark(#f6f8fa, #151b23);
+      --bgColor-neutral-muted: light-dark(#818b981f, #656c7633);
+      --bgColor-attention-muted: light-dark(#fff8c5, #bb800926);
+      --borderColor-default: light-dark(#d1d9e0, #3d444d);
+      --borderColor-muted: light-dark(#d1d9e0b3, #3d444db3);
+      --borderColor-neutral-muted: light-dark(#d1d9e0b3, #3d444db3);
+    }
   }
 
   :host {

package/dist/components/blocks/URefBlock.styles.js

@@ -23,7 +23,7 @@ var styles = css`
     color: var(--u-txt-color-hover);
   }
   .header:focus-visible {
-    outline: 2px solid rgba(100, 150, 250, 0.6);
+    outline: 2px solid var(--u-primary-color-strong, #1565C0);
     outline-offset: 2px;
   }
 
@@ -41,7 +41,11 @@ var styles = css`
     font-size: 1em;
     line-height: 1.5;
     font-weight: 600;
-    color: var(--u-text-color-weak);
+    /* 여기 color: var(--u-text-color-weak) 가 있었다 — 그런 토큰은 없다
+       (올바른 이름은 --u-txt-color-weak). 폴백도 없어 선언이 통째로 무효가 됐고,
+       그래서 위의 color: inherit 과 결과가 같았다. 즉 한 번도 적용된 적이 없는
+       선언이다. 형제 .count 도 inherit 이므로 현재 렌더를 유지하며 죽은 선언만
+       걷는다. 제목을 약한 회색으로 하려던 의도였다면 이름을 고쳐 되살릴 것. */
   }
 
   .count {

package/dist/components/blocks/UTableBlock.styles.js

@@ -89,7 +89,7 @@ var styles = css`
     opacity: 0.7;
   }
   th[active] {
-    color: var(--u-primary-color, #4a90e2);
+    color: var(--u-primary-color, #1976D2);
   }
   th[active] .sort-icon {
     opacity: 1;
@@ -107,7 +107,7 @@ var styles = css`
     background-color: var(--u-neutral-0);
   }
   tbody tr:hover td {
-    background-color: var(--u-neutral-50, rgba(0,0,0,0.02));
+    background-color: var(--u-neutral-50, #FAFAFA);
   }
   tbody tr:last-child td {
     border-bottom: none;

package/dist/components/blocks/UTextBlock.styles.js

@@ -51,7 +51,6 @@ var styles = css`
     visibility: hidden;
     position: relative;
     display: block;
-    color: red;
 
     /* 동일 스타일 크기 싱크 */
     margin: 0;

package/dist/components/message/UMessage.styles.js

@@ -29,7 +29,7 @@ var styles = css`
   .body[variant="bubble"] {
     padding: 12px 18px;
     border-radius: 18px;
-    background-color: var(--u-neutral-200, #f3f4f6);
+    background-color: var(--u-neutral-200, #EEEEEE);
   }
   .body[variant="bubble"][position="left"] {
     border-bottom-left-radius: 4px;

package/dist/components/references/URefCard.styles.js

@@ -19,7 +19,7 @@ var styles = css`
     transition: all 0.2s ease;
   }
   a:hover {
-    color: var(--u-txt-color-hover, #1E88E5);
+    color: var(--u-txt-color-hover, #1565C0);
     background-color: var(--u-neutral-50);
   }
 
@@ -59,11 +59,11 @@ var styles = css`
     white-space: nowrap;
   }
   .badge[type="web"] {
-    color: var(--u-info-color-strong, #1976D2);
+    color: var(--u-info-color-strong, #1565C0);
     background: var(--u-blue-0);
   }
   .badge[type="document"] {
-    color: var(--u-success-color-strong, #388E3C);
+    color: var(--u-success-color-strong, #1B5E20);
     background: var(--u-green-0);
   }
   .badge u-icon {

package/dist/components-extra/UChartBlock.styles.js

@@ -72,13 +72,13 @@ var styles = css`
     background: var(--u-red-0);
     border: 1px solid var(--u-danger-color-weakest, #EF9A9A);
     border-radius: 6px;
-    color: var(--u-danger-color-strong, #D32F2F);
+    color: var(--u-danger-color-strong, #C62828);
     font-size: 12px;
     pointer-events: none;
   }
 
   .error-overlay u-icon {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color, #D32F2F);
     flex-shrink: 0;
   }
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [