@kupola/kupola 1.4.5 → 1.4.7

package/dist/kupola.css

@@ -464,7 +464,7 @@
   --text-secondary-hover: #374151;
   --text-secondary-active: #374151;
   --text-tertiary: #5B6370;
-  --text-disabled: #6B7280;
+  --text-disabled: #525A68;
   --text-onbrand: #FFFFFF;
   --text-onaccent: #FFFFFF;
 
@@ -475,7 +475,7 @@
   --icon-secondary-hover: #374151;
   --icon-secondary-active: #374151;
   --icon-tertiary: #5B6370;
-  --icon-disabled: #6B7280;
+  --icon-disabled: #525A68;
   --icon-onbrand: #FFFFFF;
   --icon-onaccent: #FFFFFF;
 
@@ -753,25 +753,25 @@
   --bg-invert-active: #E5E5E5;
   --bg-invert-disabled: rgba(255, 255, 255, 0.2);
 
-  --text-default: #D1D3DB;
+  --text-default: #E5E7EB;
   --text-default-hover: #FFFFFF;
   --text-default-active: #FFFFFF;
-  --text-secondary: #A0A5B2;
-  --text-secondary-hover: #D1D3DB;
-  --text-secondary-active: #D1D3DB;
-  --text-tertiary: #7D8493;
-  --text-disabled: #7D8493;
+  --text-secondary: #B8BDCA;
+  --text-secondary-hover: #E5E7EB;
+  --text-secondary-active: #E5E7EB;
+  --text-tertiary: #9CA3AF;
+  --text-disabled: #8B93A1;
   --text-onbrand: #FFFFFF;
   --text-onaccent: #FFFFFF;
 
-  --icon-default: #D1D3DB;
+  --icon-default: #E5E7EB;
   --icon-default-hover: #FFFFFF;
   --icon-default-active: #FFFFFF;
-  --icon-secondary: #9599A6;
-  --icon-secondary-hover: #D1D3DB;
-  --icon-secondary-active: #D1D3DB;
-  --icon-tertiary: #7D8493;
-  --icon-disabled: #7D8493;
+  --icon-secondary: #B8BDCA;
+  --icon-secondary-hover: #E5E7EB;
+  --icon-secondary-active: #E5E7EB;
+  --icon-tertiary: #9CA3AF;
+  --icon-disabled: #8B93A1;
   --icon-onbrand: #FFFFFF;
   --icon-onaccent: #FFFFFF;
 
@@ -2500,6 +2500,7 @@ code, kbd, samp, pre {
     .ds-table__pagination { display: flex; align-items: center; gap: var(--spacer-8); }
 
     /* Table variants (IMP-001) */
+    .ds-table tbody tr { background: var(--bg-base-default); }
     .ds-table--striped tbody tr:nth-child(even) { background: var(--bg-base-secondary); }
     .ds-table--hover tbody tr:hover { background: var(--bg-overlay-l1); cursor: default; }
     .ds-table--compact th,
@@ -3506,15 +3507,15 @@ code, kbd, samp, pre {
 }
 
 .ds-titlebar__traffic-btn--close {
-  background-color: #FF5F57;
+  background-color: var(--status-error-default);
 }
 
 .ds-titlebar__traffic-btn--minimize {
-  background-color: #FEBC2E;
+  background-color: var(--status-warning-default);
 }
 
 .ds-titlebar__traffic-btn--maximize {
-  background-color: #28C840;
+  background-color: var(--status-success-default);
 }
 
 .ds-titlebar__project {
@@ -5266,7 +5267,7 @@ code, kbd, samp, pre {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background-color: #33b9c1;
+  background-color: var(--status-info-default);
 }
 
 .ds-calendar__day.is-selected {
@@ -6976,15 +6977,15 @@ code, kbd, samp, pre {
 }
 
 .ds-heatmap__cell--level-0 {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--bg-overlay-l1);
 }
 
 .ds-heatmap__cell--level-1 {
-  background-color: rgba(34, 197, 94, 0.2);
+  background-color: var(--status-success-surface-l2);
 }
 
 .ds-heatmap__cell--level-2 {
-  background-color: rgba(34, 197, 94, 0.4);
+  background-color: var(--status-success-surface-l3);
 }
 
 .ds-heatmap__cell--level-3 {
@@ -6996,7 +6997,7 @@ code, kbd, samp, pre {
 }
 
 .ds-heatmap__cell--level-5 {
-  background-color: #22c55e;
+  background-color: var(--status-success-default);
 }
 
 .ds-heatmap__labels {
@@ -9068,58 +9069,59 @@ code, kbd, samp, pre {
 .kupola-table-wrapper { width: 100%; }
 .kupola-table-container { overflow-x: auto; }
 .kupola-table { width: 100%; border-collapse: collapse; font-size: 14px; }
-.kupola-table th, .kupola-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e8e8e8; }
-.kupola-table th { background: #fafafa; font-weight: 600; color: #333; white-space: nowrap; }
-.kupola-table-striped tbody tr:nth-child(even) { background: #fafafa; }
-.kupola-table-hover tbody tr:hover { background: #f0f7ff; }
-.kupola-table-bordered { border: 1px solid #e8e8e8; }
-.kupola-table-bordered th, .kupola-table-bordered td { border: 1px solid #e8e8e8; }
+.kupola-table th, .kupola-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-neutral-l1); }
+.kupola-table th { background: var(--bg-base-secondary); font-weight: 600; color: var(--text-default); white-space: nowrap; }
+.kupola-table tbody tr { background: var(--bg-base-default); }
+.kupola-table-striped tbody tr:nth-child(even) { background: var(--bg-base-secondary); }
+.kupola-table-hover tbody tr:hover { background: var(--status-primary-surface-l2); }
+.kupola-table-bordered { border: 1px solid var(--border-neutral-l1); }
+.kupola-table-bordered th, .kupola-table-bordered td { border: 1px solid var(--border-neutral-l1); }
 .kupola-table-compact th, .kupola-table-compact td { padding: 8px 12px; }
 .kupola-table-sortable { cursor: pointer; user-select: none; position: relative; }
-.kupola-table-sortable:hover { background: #f0f0f0; }
+.kupola-table-sortable:hover { background: var(--bg-base-tertiary); }
 .kupola-table-sort-icon { font-size: 12px; opacity: 0.5; margin-left: 4px; }
 .kupola-table-sort-asc .kupola-table-sort-icon,
-.kupola-table-sort-desc .kupola-table-sort-icon { opacity: 1; color: #1890ff; }
-.kupola-table-empty, .kupola-table-loading { text-align: center; padding: 40px 16px !important; color: #999; }
+.kupola-table-sort-desc .kupola-table-sort-icon { opacity: 1; color: var(--status-primary-default); }
+.kupola-table-empty, .kupola-table-loading { text-align: center; padding: 40px 16px !important; color: var(--text-tertiary); }
 .kupola-table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
 .kupola-table-toolbar-right { display: flex; align-items: center; gap: 8px; }
-.kupola-table-filter-input { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; width: 240px; }
-.kupola-table-filter-input:focus { outline: none; border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24,144,255,0.1); }
-.kupola-table-info { color: #999; font-size: 13px; }
-.kupola-table-selection-info { color: #1890ff; font-size: 13px; font-weight: 500; }
+.kupola-table-filter-input { padding: 6px 12px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; font-size: 14px; width: 240px; }
+.kupola-table-filter-input:focus { outline: none; border-color: var(--status-primary-default); box-shadow: 0 0 0 2px var(--status-primary-surface-l2); }
+.kupola-table-info { color: var(--text-tertiary); font-size: 13px; }
+.kupola-table-selection-info { color: var(--status-primary-default); font-size: 13px; font-weight: 500; }
 .kupola-table-col-selection { width: 40px; text-align: center; }
 .kupola-table-col-expand { width: 40px; text-align: center; }
-.kupola-table-expand-btn { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px; color: #666; }
-.kupola-table-expand-btn:hover { color: #1890ff; }
-.kupola-table-expand-row td { background: #fafafa; padding: 16px; }
-.kupola-table-row-selected { background: #e6f7ff !important; }
-.kupola-table-row-selected:hover { background: #bae7ff !important; }
+.kupola-table-expand-btn { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px; color: var(--text-secondary); }
+.kupola-table-expand-btn:hover { color: var(--status-primary-default); }
+.kupola-table-expand-row td { background: var(--bg-base-secondary); padding: 16px; }
+.kupola-table-row-selected { background: var(--status-primary-surface-l1) !important; }
+.kupola-table-row-selected:hover { background: var(--status-primary-surface-l2) !important; }
 
 /* Resize */
 .kupola-table-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; background: transparent; }
-.kupola-table-resize-handle:hover { background: #1890ff; opacity: 0.3; }
+.kupola-table-resize-handle:hover { background: var(--status-primary-default); opacity: 0.3; }
 
 /* Drag */
 .kupola-table-draggable { transition: opacity 0.2s; }
 .kupola-table-dragging { opacity: 0.4; }
-.kupola-table-drag-over { border-top: 2px solid #1890ff !important; }
+.kupola-table-drag-over { border-top: 2px solid var(--status-primary-default) !important; }
 
 /* Edit */
 .kupola-table-editable-cell { cursor: text; }
-.kupola-table-editable-cell:hover { background: #e6f7ff; }
+.kupola-table-editable-cell:hover { background: var(--status-primary-surface-l1); }
 .kupola-table-edit-cell { display: flex; gap: 4px; align-items: center; }
 .kupola-table-edit-input { flex: 1; padding: 2px 6px; font-size: 13px; }
 .kupola-table-edit-actions { display: flex; gap: 2px; }
-.kupola-table-edit-save, .kupola-table-edit-cancel { background: none; border: 1px solid #d9d9d9; border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 12px; }
-.kupola-table-edit-save { color: #52c41a; border-color: #52c41a; }
-.kupola-table-edit-cancel { color: #ff4d4f; border-color: #ff4d4f; }
-.kupola-table-edit-save:hover { background: #f6ffed; }
-.kupola-table-edit-cancel:hover { background: #fff2f0; }
+.kupola-table-edit-save, .kupola-table-edit-cancel { background: none; border: 1px solid var(--border-neutral-l2); border-radius: 3px; cursor: pointer; padding: 2px 6px; font-size: 12px; }
+.kupola-table-edit-save { color: var(--status-success-default); border-color: var(--status-success-default); }
+.kupola-table-edit-cancel { color: var(--status-error-default); border-color: var(--status-error-default); }
+.kupola-table-edit-save:hover { background: var(--status-success-surface-l1); }
+.kupola-table-edit-cancel:hover { background: var(--status-error-surface-l1); }
 
 /* Tree */
 .kupola-table-tree-indent { display: inline-block; }
-.kupola-table-tree-toggle { background: none; border: none; cursor: pointer; font-size: 10px; padding: 0 4px; color: #666; }
-.kupola-table-tree-toggle:hover { color: #1890ff; }
+.kupola-table-tree-toggle { background: none; border: none; cursor: pointer; font-size: 10px; padding: 0 4px; color: var(--text-secondary); }
+.kupola-table-tree-toggle:hover { color: var(--status-primary-default); }
 .kupola-table-tree-toggle-placeholder { display: inline-block; width: 18px; }
 
 /* Virtual */
@@ -9128,10 +9130,10 @@ code, kbd, samp, pre {
 /* Pagination */
 .kupola-table-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; padding: 8px 0; }
 .kupola-table-pages { display: flex; gap: 4px; align-items: center; }
-.kupola-table-page-btn { min-width: 32px; height: 32px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
-.kupola-table-page-btn:hover:not(:disabled):not(.active) { border-color: #1890ff; color: #1890ff; }
-.kupola-table-page-btn.active { background: #1890ff; color: #fff; border-color: #1890ff; }
+.kupola-table-page-btn { min-width: 32px; height: 32px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; background: var(--bg-base-default); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
+.kupola-table-page-btn:hover:not(:disabled):not(.active) { border-color: var(--status-primary-default); color: var(--status-primary-default); }
+.kupola-table-page-btn.active { background: var(--status-primary-default); color: var(--text-onbrand); border-color: var(--status-primary-default); }
 .kupola-table-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-.kupola-table-page-ellipsis { padding: 0 4px; color: #999; }
-.kupola-table-page-size { padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; }
-.kupola-table-page-info { color: #999; font-size: 13px; }
+.kupola-table-page-ellipsis { padding: 0 4px; color: var(--text-tertiary); }
+.kupola-table-page-size { padding: 4px 8px; border: 1px solid var(--border-neutral-l2); border-radius: 4px; font-size: 13px; }
+.kupola-table-page-info { color: var(--text-tertiary); font-size: 13px; }

package/dist/kupola.esm.js

@@ -1935,11 +1935,14 @@ function Qn() {
   const t = U();
   it(t);
   const e = document.querySelector("[data-theme-toggle]");
-  e && (e.onclick = function(o) {
-    o.preventDefault();
-    const c = Y() === "dark" ? "light" : "dark";
-    st(c);
-  });
+  if (e) {
+    const o = e.onclick;
+    e.onclick = function(l) {
+      l.preventDefault();
+      const h = Y() === "dark" ? "light" : "dark";
+      st(h), typeof o == "function" && o.call(this, l);
+    };
+  }
   let s = document.getElementById("brand-picker");
   s || (s = document.createElement("div"), s.id = "brand-picker", s.style.position = "fixed", s.style.top = "64px", s.style.right = "16px", s.style.zIndex = "9998", s.style.display = "none", s.style.padding = "12px", s.style.width = "200px", s.style.gridTemplateColumns = "repeat(3, 1fr)", s.style.gap = "6px", s.style.backgroundColor = "var(--bg-base-secondary)", s.style.border = "1px solid var(--border-neutral-l1)", s.style.borderRadius = "8px", s.style.boxShadow = "0 4px 20px rgba(0, 0, 0, 0.2)", s.style.overflow = "hidden", W.forEach((o) => {
     const l = document.createElement("button");