@iyulab/chat-components 0.9.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.10.0] - 2026-08-03
|
|
4
|
+
|
|
5
|
+
### Fixed
|
|
6
|
+
|
|
7
|
+
- ★**Firefox·Safari 에서 다크 코드블록·다크 마크다운이 적용된 적이 없던 문제.**
|
|
8
|
+
|
|
9
|
+
두 컴포넌트의 다크 팔레트(구문 강조 15색 · 마크다운 11색)가
|
|
10
|
+
`:host-context([theme="dark"])` **단독**으로 선언돼 있었다. 그 선택자는 크로미움
|
|
11
|
+
전용이라, 나머지 두 엔진에서는 어두운 코드블록 위에 **라이트용 색이 그대로** 남았다.
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
u-code-block 구문 강조 15색
|
|
15
|
+
u-marked-block 본문·테두리·강조 11색
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
섀도 루트 안에서 문서 루트의 테마를 읽는 수단 중 **상속되는 것은 `color-scheme`** 이고,
|
|
19
|
+
`light-dark()` 가 그 값을 따른다. 테마 시트가 `:root[theme="dark"] { color-scheme: dark }`
|
|
20
|
+
를 이미 선언하므로 별도 배선이 필요 없다.
|
|
21
|
+
|
|
22
|
+
⚠**소비자 조치**: 테마 시트를 로드하지 않고 `theme` 속성만 세우고 있다면 다크가
|
|
23
|
+
적용되지 않는다 — 문서 루트에 `color-scheme: dark` 를 함께 선언할 것.
|
|
24
|
+
`@supports` 가드가 있어 `light-dark()` 미지원 브라우저는 **라이트로 떨어진다**
|
|
25
|
+
(종전 Firefox·Safari 와 같은 결과 — 회귀가 아니다).
|
|
26
|
+
|
|
27
|
+
- **참조 카드 헤더의 포커스 링이 팔레트에 없는 색이었다** — `rgba(100, 150, 250, .6)`
|
|
28
|
+
를 굽고 있었다. 다른 컴포넌트의 포커스 링과 색이 달랐고 브랜드를 따라오지 않았다.
|
|
29
|
+
역할 토큰(`--u-primary-color-strong`)을 읽도록 고쳤다 — 디자인 시스템의 전역 포커스 링과
|
|
30
|
+
같은 값이다.
|
|
31
|
+
|
|
32
|
+
### Added
|
|
33
|
+
|
|
34
|
+
- **섀도 안 테마 해석 회귀 테스트** — 실제 크로미움에서 `color-scheme` 을 뒤집어
|
|
35
|
+
구문색·본문색이 따라오는지 확인한다. 커스텀 프로퍼티를 직접 읽지 않고 **그것을 소비하는
|
|
36
|
+
선언의 계산색**을 재는데, `getComputedStyle().getPropertyValue()` 는 해석된 색이 아니라
|
|
37
|
+
`light-dark(...)` 문자열 그대로를 돌려주기 때문이다.
|
|
38
|
+
|
|
3
39
|
## [0.9.1] - 2026-08-02
|
|
4
40
|
|
|
5
41
|
### Fixed
|
|
@@ -18,22 +18,40 @@ var styles = css`
|
|
|
18
18
|
--hljs-deletion-color: #b31d28;
|
|
19
19
|
--hljs-deletion-bg-color: #ffeef0;
|
|
20
20
|
}
|
|
21
|
-
:host-context([theme="dark"])
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
21
|
+
/* ★다크 팔레트는 light-dark() 로 싣는다 — 종전에는 :host-context([theme="dark"]) 였고,
|
|
22
|
+
그 선택자는 **Firefox·Safari 에서 미지원**이라 두 브라우저에서 다크 구문 강조가 적용된
|
|
23
|
+
적이 없다(라이트용 색이 어두운 코드블록 위에 그대로 남았다).
|
|
24
|
+
|
|
25
|
+
왜 light-dark() 인가: 테마 표시(theme 속성)는 문서 루트에 있고 이 팔레트는 섀도 루트
|
|
26
|
+
안에 있다. 그 경계를 넘는 수단 중 상속되는 것은 color-scheme 뿐이고, 토큰 시트가
|
|
27
|
+
:root[theme="dark"] { color-scheme: dark } 로 이미 선언한다 — 상속 프로퍼티라
|
|
28
|
+
섀도 안까지 닿는다.
|
|
29
|
+
|
|
30
|
+
⚠**:host 에 color-scheme 을 선언하지 말 것.** 선언하면 루트에서 상속받은 값을 덮어
|
|
31
|
+
OS 선호를 따르게 되어, 앱이 라이트인데 OS 가 다크면 코드블록만 어두워진다.
|
|
32
|
+
|
|
33
|
+
⚠**이 방식을 --u-* 디자인 토큰으로 확대하지 말 것.** getComputedStyle 로 읽는 소비자
|
|
34
|
+
(같은 패키지의 UChartBlock 이 Chart.js 기본값을 그렇게 세팅한다)에게는 해석된 색이
|
|
35
|
+
아니라 light-dark(...) **문자열 그대로** 돌아온다. 여기 팔레트는 CSS 안에서만 쓰이므로
|
|
36
|
+
안전하다. */
|
|
37
|
+
@supports (color: light-dark(#000, #fff)) {
|
|
38
|
+
:host {
|
|
39
|
+
--hljs-text-color: light-dark(#24292e, #c9d1d9);
|
|
40
|
+
--hljs-background-color: light-dark(#ffffff, #0d1117);
|
|
41
|
+
--hljs-keyword-color: light-dark(#d73a49, #ff7b72);
|
|
42
|
+
--hljs-entity-color: light-dark(#6f42c1, #d2a8ff);
|
|
43
|
+
--hljs-constant-color: light-dark(#005cc5, #79c0ff);
|
|
44
|
+
--hljs-string-color: light-dark(#032f62, #a5d6ff);
|
|
45
|
+
--hljs-variable-color: light-dark(#e36209, #ffa657);
|
|
46
|
+
--hljs-comment-color: light-dark(#6a737d, #8b949e);
|
|
47
|
+
--hljs-entity-tag-color: light-dark(#22863a, #7ee787);
|
|
48
|
+
--hljs-markup-heading-color: light-dark(#005cc5, #1f6feb);
|
|
49
|
+
--hljs-markup-list-color: light-dark(#735c0f, #f2cc60);
|
|
50
|
+
--hljs-addition-color: light-dark(#22863a, #aff5b4);
|
|
51
|
+
--hljs-addition-bg-color: light-dark(#f0fff4, #033a16);
|
|
52
|
+
--hljs-deletion-color: light-dark(#b31d28, #ffdcd7);
|
|
53
|
+
--hljs-deletion-bg-color: light-dark(#ffeef0, #67060c);
|
|
54
|
+
}
|
|
37
55
|
}
|
|
38
56
|
|
|
39
57
|
:host {
|
|
@@ -25,18 +25,23 @@ var styles = css`
|
|
|
25
25
|
--borderColor-muted: #d1d9e0b3;
|
|
26
26
|
--borderColor-neutral-muted: #d1d9e0b3;
|
|
27
27
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
28
|
+
/* ★다크 팔레트는 light-dark() 로 — 근거는 UCodeBlock.styles.ts 의 같은 자리 주석 참조.
|
|
29
|
+
:host-context() 가 Firefox·Safari 미지원이라 두 브라우저에서 마크다운 본문의 다크가
|
|
30
|
+
적용된 적이 없다. */
|
|
31
|
+
@supports (color: light-dark(#000, #fff)) {
|
|
32
|
+
:host {
|
|
33
|
+
--focus-outlineColor: light-dark(#0969da, #1f6feb);
|
|
34
|
+
--fgColor-default: light-dark(#1f2328, #f0f6fc);
|
|
35
|
+
--fgColor-muted: light-dark(#59636e, #9198a1);
|
|
36
|
+
--fgColor-accent: light-dark(#0969da, #4493f8);
|
|
37
|
+
--bgColor-default: light-dark(#ffffff, #0d1117);
|
|
38
|
+
--bgColor-muted: light-dark(#f6f8fa, #151b23);
|
|
39
|
+
--bgColor-neutral-muted: light-dark(#818b981f, #656c7633);
|
|
40
|
+
--bgColor-attention-muted: light-dark(#fff8c5, #bb800926);
|
|
41
|
+
--borderColor-default: light-dark(#d1d9e0, #3d444d);
|
|
42
|
+
--borderColor-muted: light-dark(#d1d9e0b3, #3d444db3);
|
|
43
|
+
--borderColor-neutral-muted: light-dark(#d1d9e0b3, #3d444db3);
|
|
44
|
+
}
|
|
40
45
|
}
|
|
41
46
|
|
|
42
47
|
:host {
|