@iyulab/data-components 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [0.10.0] - 2026-08-03
+
+### Added
+
+- **표의 보조 전경을 «표 안에서만» 조절할 수 있다** — 파생 토큰 5단.
+
+  ```
+  --dc-empty-color      빈 상태 안내문              data-view · simple-sheet · rich-table
+  --dc-header-color     열 머리 · 행 머리           data-view · simple-sheet
+  --dc-muted-color      보조 텍스트 · 라벨          data-view · rich-table
+  --dc-icon-color       정렬 표시 · 확장 · 행 메뉴  rich-table
+  --dc-readonly-color   읽기 전용 셀                simple-sheet
+  ```
+
+  종전에는 세 컴포넌트가 보조 전경을 전부 `--u-txt-color-weak` 로 **섀도 안에서 직독**해,
+  문서 전체의 보조 텍스트를 바꾸지 않고는 표만 맞출 방법이 없었다(소비자 토큰 0 · `part` 0).
+
+  ⚠**기본 렌더는 변하지 않는다.** 다섯 단이 전부 `--u-txt-color-weak` 에서 파생되고
+  다크 대응도 그 역할 토큰이 이미 갖고 있다 — 다크 전용 선언을 더하지 않았다.
+
+  ★**한 토큰으로 접지 않았다.** 전 컬럼이 읽기 전용인 시트에서는 데이터가 통째로 흐려
+  보이는데, 단이 하나면 *"읽기 전용 셀만 진하게"* 가 원리적으로 불가능해진다.
+
+  ⚠**컴포넌트가 «읽는» 단만 선언한다** — 다섯을 어디서나 선언하면 소비자가 바꿔도 아무 일이
+  없는 자리가 생긴다. 어느 단이 어디에 있는지는 README 의 표가 정본이고,
+  `tests/consumer-tokens.test.ts` 가 **선언과 사용을 양방향으로** 대조한다.
+
 ## [0.9.1] - 2026-08-03
 
 ### Fixed

package/README.md

@@ -157,6 +157,39 @@ import '@iyulab/components/styles/tokens.css';
 :root { --u-primary-color: #7B1FA2; }
 ```
 
+### 보조 전경 조절 (0.10.0~)
+
+표의 **보조 전경**(빈 상태 안내문·열 머리·읽기 전용 셀 등)은 역할 토큰
+`--u-txt-color-weak` 에서 파생된 단으로 그려집니다. 그 단을 **표 안에서만** 조절할 수
+있습니다 — 문서 전체의 보조 텍스트를 건드리지 않고 표만 맞출 때 씁니다.
+
+| 토큰 | 무엇을 칠하나 | `u-data-view` | `u-simple-sheet` | `u-rich-table` |
+|---|---|:---:|:---:|:---:|
+| `--dc-empty-color` | 빈 상태 안내문 | ● | ● | ● |
+| `--dc-header-color` | 열 머리 · 행 머리 | ● | ● | |
+| `--dc-muted-color` | 보조 텍스트 · 라벨 | ● | | ● |
+| `--dc-icon-color` | 정렬 표시 · 확장 · 행 메뉴 | | | ● |
+| `--dc-readonly-color` | 읽기 전용 셀 | | ● | |
+
+⚠**빈 칸은 그 컴포넌트가 그 단을 «읽지 않는다»는 뜻**입니다. 값을 줘도 아무 일이
+일어나지 않습니다 — 읽지 않는 토큰을 선언해 두지 않는 것이 이 패키지의 방침입니다.
+
+커스텀 프로퍼티는 상속되므로 **범위는 선택자로 정합니다**:
+
+```css
+/* 세 표를 한꺼번에 */
+:root { --dc-empty-color: #9AA0A6; }
+
+/* 한 컴포넌트만 */
+u-rich-table { --dc-icon-color: #B0B0B0; }
+```
+
+★**한 토큰으로 접지 않은 이유**: 전 컬럼이 읽기 전용인 시트에서는 데이터가 통째로
+흐려 보이는데, 단이 하나면 *"읽기 전용 셀만 진하게"* 가 원리적으로 불가능합니다.
+
+⚠**`0.10.0` 은 조절점만 엽니다 — 기본 렌더는 변하지 않습니다.** 다섯 단이 전부
+`--u-txt-color-weak` 에서 파생되며, 다크 대응도 그 역할 토큰이 이미 갖고 있습니다.
+
 ### 알려진 제약
 
 - **표면 높이를 뜻하는 토큰이 없습니다** — 배경 역할 토큰은 상호작용 상태 이름

package/dist/components/data-view/UDataView.styles.js

@@ -1,6 +1,22 @@
 import { css } from "lit";
 var styles = [css`
   :host {
+
+    /* ── 소비자 조절점 — 보조 전경 5단 ──
+       ★이 셋의 보조 전경이 전부 --u-txt-color-weak 직독이라 «표 안에서만» 조절할 방법이
+       없었다(소비자 토큰 0 · part 0). 소비앱은 한 제품 안에 표를 넷 두는데, 그중 업스트림
+       표만 조절되지 않으면 나머지에 맞출 수가 없다.
+       ⚠**한 토큰으로 접지 않는다** — 실측상 16곳의 역할이 갈리고, 접으면 "읽기 전용 셀만
+       진하게" 같은 요청이 원리적으로 불가능해진다. 그것이 이 요청의 발단이었다.
+       ⚠**다크 블록에 다시 선언하지 않는다.** --u-txt-color-weak 자체가 테마 변형이므로
+       시트가 있으면 따라온다. 이 패키지의 다크 블록이 «비어 있는 것»이 목표 상태다.
+       ⚠**폴백 리터럴은 라이트 시트 값의 복제다**(루트 tokens:sync 가 대조한다).
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다.** 다섯을 어디서나 선언하면 소비자가
+       바꿔도 아무 일이 없는 자리가 생긴다 — 이 리포가 반복해서 본 «토큰 존재 ≠ 배선»
+       이다. 어느 단이 어디에 있는지는 README 의 표가 정본이다. */
+    --dc-muted-color:    var(--u-txt-color-weak, #757575);   /* 보조 텍스트 · 라벨 */
+    --dc-header-color:   var(--u-txt-color-weak, #757575);   /* 열 머리 · 행 머리 */
+    --dc-empty-color:    var(--u-txt-color-weak, #757575);   /* 빈 상태 안내문 */
     display: block;
     width: 100%;
   }
@@ -40,7 +56,7 @@ var styles = [css`
 
   .info {
     font-size: 0.875rem;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
     font-weight: 500;
   }
 
@@ -95,7 +111,7 @@ var styles = [css`
   .card-field .label {
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
     min-width: 80px;
     flex-shrink: 0;
   }
@@ -147,7 +163,7 @@ var styles = [css`
     text-align: left;
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-header-color);
     border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     white-space: nowrap;
   }
@@ -181,7 +197,7 @@ var styles = [css`
     align-items: center;
     justify-content: center;
     min-height: 300px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-empty-color);
     font-size: 1rem;
   }
 `];

package/dist/components/simple-sheet/USimpleSheet.styles.js

@@ -2,6 +2,22 @@ import { css, unsafeCSS } from "lit";
 //#region src/components/simple-sheet/USimpleSheet.styles.ts
 var baseStyles = css`
   :host {
+
+    /* ── 소비자 조절점 — 보조 전경 5단 ──
+       ★이 셋의 보조 전경이 전부 --u-txt-color-weak 직독이라 «표 안에서만» 조절할 방법이
+       없었다(소비자 토큰 0 · part 0). 소비앱은 한 제품 안에 표를 넷 두는데, 그중 업스트림
+       표만 조절되지 않으면 나머지에 맞출 수가 없다.
+       ⚠**한 토큰으로 접지 않는다** — 실측상 16곳의 역할이 갈리고, 접으면 "읽기 전용 셀만
+       진하게" 같은 요청이 원리적으로 불가능해진다. 그것이 이 요청의 발단이었다.
+       ⚠**다크 블록에 다시 선언하지 않는다.** --u-txt-color-weak 자체가 테마 변형이므로
+       시트가 있으면 따라온다. 이 패키지의 다크 블록이 «비어 있는 것»이 목표 상태다.
+       ⚠**폴백 리터럴은 라이트 시트 값의 복제다**(루트 tokens:sync 가 대조한다).
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다.** 다섯을 어디서나 선언하면 소비자가
+       바꿔도 아무 일이 없는 자리가 생긴다 — 이 리포가 반복해서 본 «토큰 존재 ≠ 배선»
+       이다. 어느 단이 어디에 있는지는 README 의 표가 정본이다. */
+    --dc-header-color:   var(--u-txt-color-weak, #757575);   /* 열 머리 · 행 머리 */
+    --dc-empty-color:    var(--u-txt-color-weak, #757575);   /* 빈 상태 안내문 */
+    --dc-readonly-color: var(--u-txt-color-weak, #757575);   /* 읽기 전용 셀 */
     display: block;
     width: 100%;
     height: 400px;
@@ -64,7 +80,7 @@ var baseStyles = css`
     text-align: center;
     font-size: 12px;
     font-weight: 600;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-header-color);
     border-right: 1px solid var(--u-border-color, #E0E0E0);
     border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     white-space: nowrap;
@@ -124,7 +140,7 @@ var baseStyles = css`
     text-align: right;
     padding: 0 6px;
     font-size: 11px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-header-color);
     /* 예외 — 표면 높이 축이 없다. 행번호 여백은 "비활성"이 아니라 시트 바탕보다
        한 단 내려간 면이다. --u-bg-color-disabled 를 쓰면 다크에서 바탕(neutral-100)과
        같은 값이 되어 여백 구분이 사라진다 — 스냅샷이 그것을 잡았다. */
@@ -239,7 +255,7 @@ var baseStyles = css`
   .dropdown-empty {
     padding: 6px 8px;
     font-size: 12px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-empty-color);
     font-style: italic;
   }
 
@@ -251,7 +267,7 @@ var baseStyles = css`
   /* Readonly column/cell */
   .cell.cell-readonly {
     background: var(--u-bg-color-disabled, #FAFAFA);
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-readonly-color);
     cursor: default;
   }
 

package/dist/components/u-rich-table/styles.js

@@ -2,6 +2,20 @@ import { css } from "lit";
 //#region src/components/u-rich-table/styles.ts
 var richTableStyles = css`
   :host {
+    /* ── 소비자 조절점 — 보조 전경 ──
+       ★이 패키지 표 셋의 보조 전경이 전부 --u-txt-color-weak 직독이라 «표 안에서만»
+       조절할 방법이 없었다(소비자 토큰 0 · part 0). 소비앱은 한 제품 안에 표를 넷 두는데,
+       그중 업스트림 표만 조절되지 않으면 나머지에 맞출 수가 없다.
+       ⚠**한 토큰으로 접지 않는다** — 실측상 역할이 갈리고, 접으면 "읽기 전용 셀만 진하게"
+       같은 요청이 원리적으로 불가능해진다. 그것이 이 요청의 발단이었다.
+       ⚠**이 컴포넌트가 «읽는» 단만 선언한다.** 다섯을 어디서나 선언하면 소비자가 바꿔도
+       아무 일이 없는 자리가 생긴다 — 이 리포가 반복해서 본 «토큰 존재 ≠ 배선»이다.
+       ⚠**다크 블록에 다시 선언하지 않는다.** --u-txt-color-weak 자체가 테마 변형이므로
+       시트가 있으면 따라온다. 이 패키지의 다크 블록이 «비어 있는 것»이 목표 상태다.
+       ⚠**폴백 리터럴은 라이트 시트 값의 복제다**(루트 tokens:sync 가 대조한다). */
+    --dc-muted-color: var(--u-txt-color-weak, #757575);   /* 보조 텍스트 · 라벨 */
+    --dc-icon-color:  var(--u-txt-color-weak, #757575);   /* 정렬 표시 · 확장 · 행 메뉴 */
+    --dc-empty-color: var(--u-txt-color-weak, #757575);   /* 빈 상태 안내문 */
     display: block;
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 13px;
@@ -22,7 +36,7 @@ var richTableStyles = css`
 
   .toolbar .selection-info {
     font-size: 12px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
   }
 
   .toolbar .search-input {
@@ -80,7 +94,7 @@ var richTableStyles = css`
 
   .sort-indicator {
     font-size: 10px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-icon-color);
     margin-left: 4px;
   }
 
@@ -158,7 +172,7 @@ var richTableStyles = css`
     width: 30px;
     text-align: center;
     cursor: pointer;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-icon-color);
   }
 
   .expand-cell:hover {
@@ -183,7 +197,7 @@ var richTableStyles = css`
     border-radius: 3px;
     background: transparent;
     font-size: 12px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
     outline: none;
   }
 
@@ -215,7 +229,7 @@ var richTableStyles = css`
     background: var(--u-bg-color-raised, #FAFAFA);
     border-top: 1px solid var(--u-border-color, #E0E0E0);
     font-size: 12px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
   }
 
   .pagination .page-buttons {
@@ -254,7 +268,7 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-muted-color);
   }
 
   .empty-message {
@@ -262,7 +276,7 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-empty-color);
   }
 
 
@@ -270,7 +284,7 @@ var richTableStyles = css`
      .styles.ts 만 훑는 정리로는 보이지 않는 자리다. */
   .row-menu {
     cursor: pointer;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--dc-icon-color);
   }
 
   .row-error-cell {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -78,6 +78,7 @@
     "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
+    "@vitest/browser-playwright": "^4.1.10",
     "eslint": "^9.39.4",
     "glob": "^13.0.6",
     "globals": "^17.7.0",