@iyulab/data-components 0.7.1 → 0.9.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, #212121);
+    border: 1px solid var(--u-border-color, #E0E0E0);
     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-bg-color-raised, #FAFAFA);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
 
   .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, #E0E0E0);
     border-radius: 4px;
     font-size: 12px;
     outline: none;
   }
 
   .toolbar .search-input:focus {
-    border-color: #3b82f6;
+    border-color: var(--u-input-border-color-focus, #1976D2);
     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, #1976D2); }
+  .toolbar .btn-primary:hover { background: var(--u-primary-color-strong, #1565C0); }
+  .toolbar .btn-success { background: var(--u-success-color, #2E7D32); }
+  .toolbar .btn-success:hover { background: var(--u-success-color-strong, #1B5E20); }
 
   table {
     width: 100%;
@@ -58,10 +62,10 @@ var richTableStyles = css`
 
   thead th {
     padding: 8px;
-    background: #f1f5f9;
+    background: var(--u-bg-color-raised, #FAFAFA);
     font-weight: 600;
     text-align: left;
-    border-bottom: 2px solid #e2e8f0;
+    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     user-select: none;
     position: relative;
   }
@@ -71,55 +75,55 @@ var richTableStyles = css`
   }
 
   thead th.sortable:hover {
-    background: #e2e8f0;
+    background: var(--u-bg-color-active, #EEEEEE);
   }
 
   .sort-indicator {
     font-size: 10px;
-    color: #94a3b8;
+    color: var(--u-txt-color-weak, #757575);
     margin-left: 4px;
   }
 
   .filter-row td {
     padding: 4px;
-    background: #fefce8;
-    border-bottom: 1px solid #e2e8f0;
+    background: var(--u-yellow-0, #FFFDE7);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
 
   .filter-row input,
   .filter-row select {
     width: 100%;
     padding: 2px 6px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 3px;
     font-size: 11px;
     outline: none;
   }
 
   tbody tr {
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
   }
 
   tbody tr:hover {
-    background: #f8fafc;
+    background: var(--u-bg-color-hover, #F5F5F5);
   }
 
   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, #1976D2);
     outline-offset: -2px;
   }
 
   tbody tr.editing {
-    background: #fefce8;
-    outline: 2px solid #eab308;
+    background: var(--u-yellow-0, #FFFDE7);
+    outline: 2px solid var(--u-warning-color-weak, #FFEB3B);
   }
 
   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, #1976D2);
     border-radius: 3px;
     font-size: 13px;
     outline: none;
   }
 
   tbody td .cell-edit-input.invalid {
-    border-color: #ef4444;
+    border-color: var(--u-danger-color, #D32F2F);
   }
 
   .validation-error {
     font-size: 10px;
-    color: #ef4444;
+    color: var(--u-danger-color, #D32F2F);
     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, #757575);
   }
 
   .expand-cell:hover {
-    color: #3b82f6;
+    color: var(--u-primary-color, #1976D2);
   }
 
   .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, #81C784);
     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, #2E7D32);
+    background: var(--u-bg-color, #FFFFFF);
     opacity: 1;
   }
 
   .detail-row td {
     padding: 8px 8px 8px 70px;
-    background: #f8fafc;
-    border-bottom: 2px solid #e2e8f0;
+    background: var(--u-bg-color-raised, #FAFAFA);
+    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
   }
 
   .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-bg-color-raised, #FAFAFA);
+    border-top: 1px solid var(--u-border-color, #E0E0E0);
     font-size: 12px;
-    color: #64748b;
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .pagination .page-buttons {
@@ -222,22 +226,24 @@ var richTableStyles = css`
 
   .pagination button {
     padding: 2px 8px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 3px;
-    background: white;
+    /* 크롬 면 위의 컨트롤이다 — 면과 같은 단이면 묻힌다. 입력 계열은 두 테마 모두
+       크롬 면보다 한 단 안쪽이라(라이트 흰색 / 다크 #1E1E1E) 자연히 구분된다. */
+    background: var(--u-input-bg-color, #FFFFFF);
     font-size: 11px;
     cursor: pointer;
   }
 
   .pagination button.active {
-    background: #3b82f6;
-    color: white;
-    border-color: #3b82f6;
+    background: var(--u-primary-color, #1976D2);
+    color: var(--u-txt-color-inverse, #FFFFFF);
+    border-color: var(--u-input-border-color-focus, #1976D2);
   }
 
   .pagination select {
     padding: 2px 4px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 3px;
     font-size: 11px;
     margin-left: 8px;
@@ -248,7 +254,7 @@ var richTableStyles = css`
     align-items: center;
     justify-content: center;
     padding: 40px;
-    color: #6b7280;
+    color: var(--u-txt-color-weak, #757575);
   }
 
   .empty-message {
@@ -256,178 +262,43 @@ 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);
-  }
-
-  :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);
+    color: var(--u-txt-color-weak, #757575);
   }
 
-  :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);
-  }
-
-  :host-context([theme="dark"]) tbody tr.editing {
-    background: var(--u-yellow-0, #2E2200);
-    outline-color: var(--u-yellow-500, #D4A712);
-  }
-
-  :host-context([theme="dark"]) tbody tr.error {
-    background: var(--u-red-0, #2E0A0A);
-  }
-
-  :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);
-  }
-
-  :host-context([theme="dark"]) tbody td .cell-edit-input.invalid {
-    border-color: var(--u-red-500, #D66060);
-  }
-
-  :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);
-  }
-
-  :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);
+  /* 종전에는 아래 셋이 템플릿 안에 style="…#94a3b8" 형태로 박혀 있었다.
+     .styles.ts 만 훑는 정리로는 보이지 않는 자리다. */
+  .row-menu {
+    cursor: pointer;
+    color: var(--u-txt-color-weak, #757575);
   }
 
-  :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);
+  .row-error-cell {
+    padding: 2px 8px;
+    background: var(--u-danger-bg-color, #FFEBEE);
+    color: var(--u-danger-color, #D32F2F);
+    font-size: 11px;
   }
 
-  :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);
+  .new-row-marker {
+    color: var(--u-success-color-weaker, #81C784);
   }
 
-  :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);
-  }
+     종전에는 여기 57개 선언이 있었고, base 레이어가 토큰을 전혀 쓰지 않아(하드코딩 hex)
+     다크를 통째로 재구현할 수밖에 없었다. base 를 역할 토큰으로 옮기며 대부분이 사라졌고,
+     마지막까지 남은 것은 **표면 높이 축의 부재** 하나였다 — 배경 역할 토큰이 상호작용
+     상태 이름(-hover/-active/-disabled)뿐이라 "바탕보다 한 단 올라온 면"을 뜻할 수단이
+     없었다. 라이트에서는 neutral-50/100 이 흰 바탕 위에서 읽히지만 다크에서는 그 단이
+     #0A0A0A/#121212 로 거의 검정이라 툴바·헤더·페이지네이션이 배경에 묻혔다.
 
-  :host-context([theme="dark"]) .loading-overlay {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
+     @iyulab/components 1.18.0 이 --u-bg-color-raised 를 신설해 그 자리를 채웠고,
+     base 규칙이 그것을 쓰므로 다크 전용 규칙이 필요 없다.
 
-  :host-context([theme="dark"]) .empty-message {
-    color: var(--u-txt-color-disabled, #525252);
-  }
+     ⇒ **부수 효과로 Firefox·Safari 의 다크가 완성된다.** :host-context 는 그 둘에서
+     미지원이라 이 블록의 색은 애초에 적용된 적이 없었다. 토큰 층은 브라우저를 가리지 않는다. */
 `;
 //#endregion
 export { richTableStyles };

package/dist/init.js

@@ -0,0 +1 @@
+import "./utilities/shadowDomProtection.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -58,7 +58,7 @@
     "lint:fix": "eslint src/ --fix"
   },
   "dependencies": {
-    "@iyulab/components": "^1.8.0",
+    "@iyulab/components": "^1.18.0",
     "lit": "^3.3.3"
   },
   "peerDependencies": {