@iyulab/data-components 0.7.0 → 0.8.0

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

@@ -5,7 +5,8 @@ var richTableStyles = css`
     display: block;
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 13px;
-    border: 1px solid #e2e8f0;
+    color: var(--u-txt-color, #0f172a);
+    border: 1px solid var(--u-border-color, #e2e8f0);
     border-radius: 8px;
     overflow: hidden;
   }
@@ -15,25 +16,25 @@ var richTableStyles = css`
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
-    background: #f8fafc;
-    border-bottom: 1px solid #e2e8f0;
+    background: var(--u-neutral-50, #f8fafc);
+    border-bottom: 1px solid var(--u-border-color, #e2e8f0);
   }
 
   .toolbar .selection-info {
     font-size: 12px;
-    color: #64748b;
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .toolbar .search-input {
     padding: 4px 10px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #d1d5db);
     border-radius: 4px;
     font-size: 12px;
     outline: none;
   }
 
   .toolbar .search-input:focus {
-    border-color: #3b82f6;
+    border-color: var(--u-input-border-color-focus, #3b82f6);
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
   }
 
@@ -43,13 +44,16 @@ var richTableStyles = css`
     border-radius: 4px;
     font-size: 12px;
     cursor: pointer;
+    /* 예외 — "색 배경 위의 글자" 역할 토큰이 없다. --u-txt-color-inverse 는
+       다크에서 neutral-100(#121212) 이라 파랑/초록 버튼 위에서 읽히지 않는다.
+       버튼 배경은 두 테마 모두 유채색이므로 흰 글자가 맞다. */
     color: white;
   }
 
-  .toolbar .btn-primary { background: #3b82f6; }
-  .toolbar .btn-primary:hover { background: #2563eb; }
-  .toolbar .btn-success { background: #10b981; }
-  .toolbar .btn-success:hover { background: #059669; }
+  .toolbar .btn-primary { background: var(--u-primary-color, #3b82f6); }
+  .toolbar .btn-primary:hover { background: var(--u-primary-color-strong, #2563eb); }
+  .toolbar .btn-success { background: var(--u-success-color, #10b981); }
+  .toolbar .btn-success:hover { background: var(--u-success-color-strong, #059669); }
 
   table {
     width: 100%;
@@ -58,10 +62,10 @@ var richTableStyles = css`
 
   thead th {
     padding: 8px;
-    background: #f1f5f9;
+    background: var(--u-neutral-100, #f1f5f9);
     font-weight: 600;
     text-align: left;
-    border-bottom: 2px solid #e2e8f0;
+    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
     user-select: none;
     position: relative;
   }
@@ -71,55 +75,55 @@ var richTableStyles = css`
   }
 
   thead th.sortable:hover {
-    background: #e2e8f0;
+    background: var(--u-bg-color-active, #e2e8f0);
   }
 
   .sort-indicator {
     font-size: 10px;
-    color: #94a3b8;
+    color: var(--u-txt-color-weak, #94a3b8);
     margin-left: 4px;
   }
 
   .filter-row td {
     padding: 4px;
-    background: #fefce8;
-    border-bottom: 1px solid #e2e8f0;
+    background: var(--u-yellow-0, #fefce8);
+    border-bottom: 1px solid var(--u-border-color, #e2e8f0);
   }
 
   .filter-row input,
   .filter-row select {
     width: 100%;
     padding: 2px 6px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #d1d5db);
     border-radius: 3px;
     font-size: 11px;
     outline: none;
   }
 
   tbody tr {
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid var(--u-border-color-weak, #e2e8f0);
   }
 
   tbody tr:hover {
-    background: #f8fafc;
+    background: var(--u-bg-color-hover, #f8fafc);
   }
 
   tbody tr.selected {
-    background: #eff6ff;
+    background: var(--u-primary-bg-color, #E3F2FD);
   }
 
   tbody tr.focused td.focused-cell {
-    outline: 2px solid #3b82f6;
+    outline: 2px solid var(--u-primary-color, #3b82f6);
     outline-offset: -2px;
   }
 
   tbody tr.editing {
-    background: #fefce8;
-    outline: 2px solid #eab308;
+    background: var(--u-yellow-0, #fefce8);
+    outline: 2px solid var(--u-warning-color-weak, #eab308);
   }
 
   tbody tr.error {
-    background: #fef2f2;
+    background: var(--u-danger-bg-color, #FFEBEE);
   }
 
   tbody td {
@@ -129,19 +133,19 @@ var richTableStyles = css`
   tbody td .cell-edit-input {
     width: 100%;
     padding: 4px 6px;
-    border: 1px solid #3b82f6;
+    border: 1px solid var(--u-primary-color, #3b82f6);
     border-radius: 3px;
     font-size: 13px;
     outline: none;
   }
 
   tbody td .cell-edit-input.invalid {
-    border-color: #ef4444;
+    border-color: var(--u-danger-color, #ef4444);
   }
 
   .validation-error {
     font-size: 10px;
-    color: #ef4444;
+    color: var(--u-danger-color, #ef4444);
     margin-top: 2px;
   }
 
@@ -154,11 +158,11 @@ var richTableStyles = css`
     width: 30px;
     text-align: center;
     cursor: pointer;
-    color: #94a3b8;
+    color: var(--u-txt-color-weak, #94a3b8);
   }
 
   .expand-cell:hover {
-    color: #3b82f6;
+    color: var(--u-primary-color, #3b82f6);
   }
 
   .actions-cell {
@@ -168,31 +172,31 @@ var richTableStyles = css`
 
   .new-row td {
     padding: 4px 8px;
-    background: #f0fdf4;
+    background: var(--u-success-bg-color, #E8F5E9);
     opacity: 0.8;
   }
 
   .new-row input {
     width: 100%;
     padding: 4px 6px;
-    border: 1px dashed #86efac;
+    border: 1px dashed var(--u-success-color-weaker, #86efac);
     border-radius: 3px;
     background: transparent;
     font-size: 12px;
-    color: #6b7280;
+    color: var(--u-txt-color-weak, #757575);
     outline: none;
   }
 
   .new-row input:focus {
-    border-color: #10b981;
-    background: white;
+    border-color: var(--u-success-color, #10b981);
+    background: var(--u-bg-color, white);
     opacity: 1;
   }
 
   .detail-row td {
     padding: 8px 8px 8px 70px;
-    background: #f8fafc;
-    border-bottom: 2px solid #e2e8f0;
+    background: var(--u-neutral-50, #f8fafc);
+    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
   }
 
   .badge {
@@ -208,10 +212,10 @@ var richTableStyles = css`
     justify-content: space-between;
     align-items: center;
     padding: 8px 12px;
-    background: #f8fafc;
-    border-top: 1px solid #e2e8f0;
+    background: var(--u-neutral-50, #f8fafc);
+    border-top: 1px solid var(--u-border-color, #e2e8f0);
     font-size: 12px;
-    color: #64748b;
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .pagination .page-buttons {
@@ -222,22 +226,22 @@ var richTableStyles = css`
 
   .pagination button {
     padding: 2px 8px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #d1d5db);
     border-radius: 3px;
-    background: white;
+    background: var(--u-bg-color, white);
     font-size: 11px;
     cursor: pointer;
   }
 
   .pagination button.active {
-    background: #3b82f6;
-    color: white;
-    border-color: #3b82f6;
+    background: var(--u-primary-color, #3b82f6);
+    color: var(--u-txt-color-inverse, white);
+    border-color: var(--u-input-border-color-focus, #3b82f6);
   }
 
   .pagination select {
     padding: 2px 4px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #d1d5db);
     border-radius: 3px;
     font-size: 11px;
     margin-left: 8px;
@@ -248,7 +252,7 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: #6b7280;
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .empty-message {
@@ -256,177 +260,59 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: #9ca3af;
-  }
-
-  /* ── Dark mode ──
-     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
-     제공되지 않으면 자체 dark fallback 값을 적용한다. */
-
-  :host-context([theme="dark"]) {
-    border-color: var(--u-border-color, #3D3D3D);
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  :host-context([theme="dark"]) .toolbar {
-    background: var(--u-neutral-200, #1E1E1E);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .toolbar .selection-info {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .toolbar .search-input {
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-input-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .toolbar .search-input:focus {
-    border-color: var(--u-blue-500, #6ba3e3);
-    box-shadow: 0 0 0 2px rgba(107, 163, 227, 0.2);
-  }
-
-  :host-context([theme="dark"]) .toolbar .btn-primary {
-    background: var(--u-blue-500, #6ba3e3);
-  }
-
-  :host-context([theme="dark"]) .toolbar .btn-primary:hover {
-    background: var(--u-blue-600, #87B8F5);
-  }
-
-  :host-context([theme="dark"]) .toolbar .btn-success {
-    background: var(--u-green-500, #66B584);
-  }
-
-  :host-context([theme="dark"]) .toolbar .btn-success:hover {
-    background: var(--u-green-600, #81D19D);
-  }
-
-  :host-context([theme="dark"]) thead th {
-    background: var(--u-neutral-200, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
+    color: var(--u-txt-color-weak, #9ca3af);
   }
 
-  :host-context([theme="dark"]) thead th.sortable:hover {
-    background: var(--u-neutral-300, #2A2A2A);
-  }
-
-  :host-context([theme="dark"]) .sort-indicator {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .filter-row td {
-    background: var(--u-yellow-0, #2E2200);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .filter-row input,
-  :host-context([theme="dark"]) .filter-row select {
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-input-border-color, #3D3D3D);
-  }
 
-  :host-context([theme="dark"]) tbody tr {
-    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
-  }
-
-  :host-context([theme="dark"]) tbody tr:hover {
-    background: var(--u-neutral-200, #1E1E1E);
-  }
-
-  :host-context([theme="dark"]) tbody tr.selected {
-    background: var(--u-blue-0, #0a1e3d);
-  }
-
-  :host-context([theme="dark"]) tbody tr.focused td.focused-cell {
-    outline-color: var(--u-blue-500, #6ba3e3);
+  /* 종전에는 아래 셋이 템플릿 안에 style="…#94a3b8" 형태로 박혀 있었다.
+     .styles.ts 만 훑는 정리로는 보이지 않는 자리다. */
+  .row-menu {
+    cursor: pointer;
+    color: var(--u-txt-color-weak, #94a3b8);
   }
 
-  :host-context([theme="dark"]) tbody tr.editing {
-    background: var(--u-yellow-0, #2E2200);
-    outline-color: var(--u-yellow-500, #D4A712);
+  .row-error-cell {
+    padding: 2px 8px;
+    background: var(--u-danger-bg-color, #FFEBEE);
+    color: var(--u-danger-color, #ef4444);
+    font-size: 11px;
   }
 
-  :host-context([theme="dark"]) tbody tr.error {
-    background: var(--u-red-0, #2E0A0A);
+  .new-row-marker {
+    color: var(--u-success-color-weaker, #86efac);
   }
 
-  :host-context([theme="dark"]) tbody td .cell-edit-input {
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-blue-500, #6ba3e3);
-  }
+  /* ── 다크 보정 ──
+     ⚠**여기 남은 규칙은 "다크 테마 구현"이 아니다.** 역할 토큰의 중립 계열은 두 테마에서
+     서로 다른 팔레트 단에 매핑돼 있어(--u-bg-color = neutral-0 라이트 / neutral-100 다크,
+     --u-border-color = neutral-300 / neutral-400) 테마 보정이 토큰 층에 이미 들어 있다.
+     그래서 base 규칙 하나로 두 테마가 성립한다.
 
-  :host-context([theme="dark"]) tbody td .cell-edit-input.invalid {
-    border-color: var(--u-red-500, #D66060);
-  }
+     종전에는 이 자리에 57개 선언이 있었고, base 레이어가 토큰을 전혀 쓰지 않았기 때문에
+     (Tailwind 계열 hex 하드코딩) 다크를 통째로 재구현할 수밖에 없었다. base 를 역할 토큰으로
+     옮기면서 그 대부분이 불필요해졌다.
 
-  :host-context([theme="dark"]) .validation-error {
-    color: var(--u-red-500, #D66060);
-  }
+     남긴 것은 역할 층에 자리가 없는 하나뿐이다:
 
-  :host-context([theme="dark"]) .expand-cell {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
+     **표면 높이 축이 없다.** 배경 역할 토큰은 상호작용 상태 이름(-hover/-active/
+        -disabled)뿐이라 "바탕보다 한 단 올라온 면"을 뜻하는 토큰이 없다. 라이트에서는
+        neutral-50/100 이 흰 바탕 위에서 충분히 읽히지만, 다크에서는 그 단이 각각
+        #0A0A0A/#121212 로 거의 검정이라 툴바·헤더·페이지네이션이 배경에 묻힌다.
 
-  :host-context([theme="dark"]) .expand-cell:hover {
-    color: var(--u-blue-500, #6ba3e3);
-  }
 
-  :host-context([theme="dark"]) .new-row td {
-    background: var(--u-green-0, #0D2818);
-  }
-
-  :host-context([theme="dark"]) .new-row input {
-    border-color: var(--u-green-500, #66B584);
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .new-row input:focus {
-    border-color: var(--u-green-600, #81D19D);
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  :host-context([theme="dark"]) .detail-row td {
-    background: var(--u-neutral-200, #1E1E1E);
-    border-bottom-color: var(--u-border-color, #3D3D3D);
-  }
+     ⚠:host-context 는 Firefox/Safari 미지원이다. 그러나 위 base 마이그레이션으로
+     **색의 대부분이 이제 토큰 층에서 테마를 따르므로**, 그 브라우저에서도 다크가
+     동작한다 — 종전에는 이 블록이 전부였기 때문에 다크가 아예 없었다. */
 
+  :host-context([theme="dark"]) .toolbar,
+  :host-context([theme="dark"]) thead th,
+  :host-context([theme="dark"]) .detail-row td,
   :host-context([theme="dark"]) .pagination {
     background: var(--u-neutral-200, #1E1E1E);
-    border-top-color: var(--u-border-color, #3D3D3D);
-    color: var(--u-txt-color-weak, #8A8A8A);
   }
 
   :host-context([theme="dark"]) .pagination button {
     background: var(--u-neutral-300, #2A2A2A);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .pagination button.active {
-    background: var(--u-blue-500, #6ba3e3);
-    color: var(--u-neutral-1000, #FFFFFF);
-    border-color: var(--u-blue-500, #6ba3e3);
-  }
-
-  :host-context([theme="dark"]) .pagination select {
-    background: var(--u-input-bg-color, #1E1E1E);
-    color: var(--u-txt-color, #D4D4D4);
-    border-color: var(--u-input-border-color, #3D3D3D);
-  }
-
-  :host-context([theme="dark"]) .loading-overlay {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
-
-  :host-context([theme="dark"]) .empty-message {
-    color: var(--u-txt-color-disabled, #525252);
   }
 `;
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -58,7 +58,7 @@
     "lint:fix": "eslint src/ --fix"
   },
   "dependencies": {
-    "@iyulab/components": "^1.5.1",
+    "@iyulab/components": "^1.15.0",
     "lit": "^3.3.3"
   },
   "peerDependencies": {