@iyulab/components 1.21.0 → 1.22.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 +26 -0
- package/dist/components/button/UButton.styles.js +17 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.22.0] - 2026-08-03
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
|
|
7
|
+
- **`u-button` 의 `variant="ghost"` 가 `color` 축을 따른다.** 종전에는 `color` 를 무엇으로
|
|
8
|
+
주든 같은 중립색이 나왔다 — `solid`·`outlined`·`link` 셋은 따르는데 **`ghost` 한 자리에서만
|
|
9
|
+
축이 끊겨** 있었다.
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<u-button variant="ghost" color="danger">삭제</u-button> <!-- 이제 위험색 -->
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
★**`ghost` 는 색이 «필요 없는» variant 가 아니라 색이 «유일한 신호»인 variant 다.** 면도
|
|
16
|
+
테두리도 없으므로 글자색이 사라지면 남는 구분이 없다 — 파괴적 액션을 `ghost` 로 두는
|
|
17
|
+
화면에서 위험 신호가 통째로 없어진다.
|
|
18
|
+
|
|
19
|
+
`link` 와 같은 이유로 면 슬롯(`--btn-color`)이 아니라 **`--btn-color-strong`**(바탕 위 글자
|
|
20
|
+
단)을 읽는다. 실측 대비: primary **5.75** · danger **5.62**(흰 바탕).
|
|
21
|
+
|
|
22
|
+
⚠**`color` 를 주지 않은 `ghost` 는 변화 없다** — 가산 변경이다.
|
|
23
|
+
|
|
24
|
+
⚠**축이 한 자리에서만 끊기면 개별 확인으로는 보이지 않는다.** `ghost` 를 혼자 보면
|
|
25
|
+
*"원래 수수한 것"* 으로 읽힌다. `tests/browser/button-variant-color-grid.browser.test.ts`
|
|
26
|
+
가 **variant × color 를 격자로** 놓고 행 사이를 비교한다 — variant 마다 축이 나타나는
|
|
27
|
+
자리가 다르므로(면·테두리·글자) 그 자리를 각각 잰다.
|
|
28
|
+
|
|
3
29
|
## [1.21.0] - 2026-08-03
|
|
4
30
|
|
|
5
31
|
> **디자인 파운데이션 릴리스.** 이 패키지에는 **글자 크기·굵기·행간·자간 토큰이 하나도
|
|
@@ -223,6 +223,23 @@ var styles = css`
|
|
|
223
223
|
:host([variant="ghost"]:active) {
|
|
224
224
|
background-color: var(--u-bg-color-active, #EEEEEE);
|
|
225
225
|
}
|
|
226
|
+
/* ghost + 명시적 non-neutral color: 글자색이 색 축을 따른다 (link 와 같은 어법)
|
|
227
|
+
★**ghost 는 색이 «필요 없는» variant 가 아니라 색이 «유일한 신호»인 variant 다.**
|
|
228
|
+
면도 테두리도 없으므로 글자색이 사라지면 남는 구분이 없다 — 파괴적 액션을 ghost 로
|
|
229
|
+
두는 화면에서 위험 신호가 통째로 없어진다.
|
|
230
|
+
⚠종전에는 이 세 줄이 없어 color 속성을 무엇으로 주든 중립색이 나왔다. solid·outlined
|
|
231
|
+
는 따르고 link 도 아래에서 따르는데 여기만 빠져 있었다 — 축이 **한 자리에서만**
|
|
232
|
+
끊긴 형태라, 12조합을 격자로 대조하기 전에는 드러나지 않는다.
|
|
233
|
+
link 와 같은 이유로 면 슬롯(--btn-color)이 아니라 --btn-color-strong 을 읽는다. */
|
|
234
|
+
:host([variant="ghost"][color]:not([color="neutral"])) {
|
|
235
|
+
color: var(--btn-color-strong);
|
|
236
|
+
}
|
|
237
|
+
:host([variant="ghost"][color]:not([color="neutral"]):hover) {
|
|
238
|
+
color: var(--btn-color-strong-hover);
|
|
239
|
+
}
|
|
240
|
+
:host([variant="ghost"][color]:not([color="neutral"]):active) {
|
|
241
|
+
color: var(--btn-color-strong-active);
|
|
242
|
+
}
|
|
226
243
|
|
|
227
244
|
/* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존)
|
|
228
245
|
★종전 3단(weak → color → strong)은 쉬는 상태가 --u-primary-color-weak (흰 바탕 3.12)라
|