@iyulab/data-components 0.1.2 → 0.1.4

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

@@ -0,0 +1,5 @@
+import { UDataView } from './UDataView.component.js';
+
+UDataView.define("u-data-view");
+
+export { UDataView };

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

@@ -175,6 +175,85 @@ const styles = css`
     color: var(--u-txt-color-weak);
     font-size: 1rem;
   }
+
+  /* ── Dark mode ──
+     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
+     제공되지 않으면 자체 dark fallback 값을 적용한다. */
+
+  :host-context([theme="dark"]) .toolbar {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .view-toggles u-button[active] {
+    background: var(--u-blue-600, #87B8F5);
+    color: var(--u-neutral-0, #000000);
+  }
+
+  :host-context([theme="dark"]) .info {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .card {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .card:hover {
+    border-color: var(--u-blue-600, #87B8F5);
+    box-shadow: 0 4px 12px var(--u-shadow-color-weak, rgba(0, 0, 0, 0.25));
+  }
+
+  :host-context([theme="dark"]) .card.selected {
+    border-color: var(--u-blue-600, #87B8F5);
+    background: var(--u-bg-color-active, #3D3D3D);
+    box-shadow: 0 0 0 3px var(--u-blue-200, #2B4F7E);
+  }
+
+  :host-context([theme="dark"]) .card-field .label {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
+
+  :host-context([theme="dark"]) .card-field .value {
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .table-wrapper {
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) table {
+    background: var(--u-bg-color, #121212);
+  }
+
+  :host-context([theme="dark"]) thead {
+    background: var(--u-neutral-50, #0A0A0A);
+  }
+
+  :host-context([theme="dark"]) th {
+    color: var(--u-txt-color-weak, #8A8A8A);
+    border-bottom-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) tbody tr:hover {
+    background: var(--u-bg-color-hover, #2A2A2A);
+  }
+
+  :host-context([theme="dark"]) tbody tr.selected {
+    background: var(--u-bg-color-active, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) tbody tr:not(:last-child) {
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
+  :host-context([theme="dark"]) td {
+    color: var(--u-txt-color, #D4D4D4);
+  }
+
+  :host-context([theme="dark"]) .empty {
+    color: var(--u-txt-color-weak, #8A8A8A);
+  }
 `;
 
 export { styles };

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

@@ -0,0 +1,5 @@
+import { USimpleSheet } from './USimpleSheet.component.js';
+
+USimpleSheet.define("u-simple-sheet");
+
+export { USimpleSheet };

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

@@ -203,30 +203,63 @@ const styles = css`
   }
 
   /* ── Dark mode ──
-     헤더/셀 배경·텍스트는 CSS 변수(--u-neutral-*, --u-txt-color 등)가
-     테마에 따라 자동 처리되므로 선택 상태와 포커스 효과만 재정의한다. */
+     외부에서 --u-* CSS 변수가 제공되면 그 값을 사용하고,
+     제공되지 않으면 자체 dark fallback 값을 적용한다. */
+
+  :host-context([theme="dark"]) .sheet-container {
+    background: var(--u-bg-color, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
 
   :host-context([theme="dark"]) .sheet-container:focus-within {
     border-color: var(--u-blue-500, #6ba3e3);
     box-shadow: 0 0 0 2px var(--u-blue-100, #1e3a5f);
   }
 
+  :host-context([theme="dark"]) .corner {
+    background: var(--u-neutral-100, #121212);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
+  :host-context([theme="dark"]) .corner:hover {
+    background: var(--u-neutral-200, #1E1E1E);
+  }
+
+  :host-context([theme="dark"]) .col-header {
+    background: var(--u-neutral-100, #121212);
+    color: var(--u-txt-color-weak, #8A8A8A);
+    border-color: var(--u-border-color, #3D3D3D);
+  }
+
   :host-context([theme="dark"]) .col-header.col-selected {
     background: var(--u-blue-100, #1e3a5f);
     color: var(--u-blue-800, #c2deff);
   }
 
+  :host-context([theme="dark"]) .row-num {
+    background: var(--u-neutral-50, #0A0A0A);
+    color: var(--u-txt-color-weak, #8A8A8A);
+    border-right-color: var(--u-border-color, #3D3D3D);
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
   :host-context([theme="dark"]) .row-num.row-selected {
     background: var(--u-blue-100, #1e3a5f);
     color: var(--u-blue-800, #c2deff);
   }
 
+  :host-context([theme="dark"]) .cell {
+    color: var(--u-txt-color, #D4D4D4);
+    border-right-color: var(--u-border-color-weak, #2A2A2A);
+    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
+  }
+
   :host-context([theme="dark"]) .cell.selected {
     background: var(--u-blue-0, #0a1e3d);
   }
 
   :host-context([theme="dark"]) .cell.anchor {
-    background: var(--u-bg-color);
+    background: var(--u-bg-color, #121212);
     outline-color: var(--u-blue-500, #6ba3e3);
   }
 
@@ -235,8 +268,8 @@ const styles = css`
   }
 
   :host-context([theme="dark"]) .cell-input {
-    background: var(--u-bg-color);
-    color: var(--u-txt-color);
+    background: var(--u-bg-color, #121212);
+    color: var(--u-txt-color, #D4D4D4);
     outline-color: var(--u-blue-500, #6ba3e3);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
   }

package/dist/index.js

@@ -1,3 +1,5 @@
 export { UDataGrid } from './components/data-grid/UDataGrid.js';
+import './components/data-view/UDataView.js';
+import './components/simple-sheet/USimpleSheet.js';
 export { UDataView } from './components/data-view/UDataView.component.js';
 export { USimpleSheet } from './components/simple-sheet/USimpleSheet.component.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "keywords": [
     "iyulab",
     "web-components",