@toolbox-web/grid 0.4.2 → 0.6.0

package/themes/dg-theme-bootstrap.css

@@ -3,69 +3,71 @@
  * Matches the look of Bootstrap's .table component
  * https://getbootstrap.com/docs/5.3/content/tables/
  */
-tbw-grid {
-  /* Bootstrap surface colors */
-  --tbw-color-bg: light-dark(#ffffff, #212529);
-  --tbw-color-panel-bg: light-dark(#ffffff, #212529);
-  --tbw-color-fg: light-dark(#212529, #dee2e6);
-  --tbw-color-fg-muted: light-dark(#6c757d, #adb5bd);
+@layer tbw-theme {
+  tbw-grid {
+    /* Bootstrap surface colors */
+    --tbw-color-bg: light-dark(#ffffff, #212529);
+    --tbw-color-panel-bg: light-dark(#ffffff, #212529);
+    --tbw-color-fg: light-dark(#212529, #dee2e6);
+    --tbw-color-fg-muted: light-dark(#6c757d, #adb5bd);
 
-  /* Bootstrap border colors */
-  --tbw-color-border: light-dark(#dee2e6, #495057);
-  --tbw-color-border-strong: light-dark(#adb5bd, #6c757d);
-  --tbw-color-border-cell: light-dark(#dee2e6, #495057);
-  --tbw-color-border-header: light-dark(#dee2e6, #495057);
+    /* Bootstrap border colors */
+    --tbw-color-border: light-dark(#dee2e6, #495057);
+    --tbw-color-border-strong: light-dark(#adb5bd, #6c757d);
+    --tbw-color-border-cell: light-dark(#dee2e6, #495057);
+    --tbw-color-border-header: light-dark(#dee2e6, #495057);
 
-  /* Row divider */
-  --tbw-row-divider: 1px solid light-dark(#dee2e6, #495057);
+    /* Row divider */
+    --tbw-row-divider: 1px solid light-dark(#dee2e6, #495057);
 
-  /* Bootstrap primary (blue) */
-  --tbw-color-accent: light-dark(#0d6efd, #6ea8fe);
-  --tbw-color-accent-fg: #ffffff;
+    /* Bootstrap primary (blue) */
+    --tbw-color-accent: light-dark(#0d6efd, #6ea8fe);
+    --tbw-color-accent-fg: #ffffff;
 
-  /* Selection & interaction - Bootstrap's table-active */
-  --tbw-color-selection: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.075));
-  --tbw-color-row-alt: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); /* Striped rows */
-  --tbw-color-row-hover: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.075));
-  --tbw-color-active-row-bg: light-dark(rgba(13, 110, 253, 0.1), rgba(110, 168, 254, 0.15));
+    /* Selection & interaction - Bootstrap's table-active */
+    --tbw-color-selection: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.075));
+    --tbw-color-row-alt: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); /* Striped rows */
+    --tbw-color-row-hover: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.075));
+    --tbw-color-active-row-bg: light-dark(rgba(13, 110, 253, 0.1), rgba(110, 168, 254, 0.15));
 
-  /* Header - slightly darker background */
-  --tbw-color-header-bg: light-dark(#f8f9fa, #343a40);
-  --tbw-color-header-fg: light-dark(#212529, #dee2e6);
+    /* Header - slightly darker background */
+    --tbw-color-header-bg: light-dark(#f8f9fa, #343a40);
+    --tbw-color-header-fg: light-dark(#212529, #dee2e6);
 
-  /* No border radius - Bootstrap tables are rectangular */
-  --tbw-border-radius: 0;
+    /* No border radius - Bootstrap tables are rectangular */
+    --tbw-border-radius: 0;
 
-  /* Focus styling */
-  --tbw-focus-outline: 3px solid light-dark(rgba(13, 110, 253, 0.25), rgba(110, 168, 254, 0.5));
-  --tbw-focus-outline-offset: -3px;
-  --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+    /* Focus styling */
+    --tbw-focus-outline: 3px solid light-dark(rgba(13, 110, 253, 0.25), rgba(110, 168, 254, 0.5));
+    --tbw-focus-outline-offset: -3px;
+    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
 
-  /* Bootstrap typography */
-  --tbw-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --tbw-font-size: 1rem;
-  --tbw-font-size-header: 1rem;
-  --tbw-font-weight-header: bold;
-  --tbw-header-text-transform: none;
+    /* Bootstrap typography */
+    --tbw-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --tbw-font-size: 1rem;
+    --tbw-font-size-header: 1rem;
+    --tbw-font-weight-header: bold;
+    --tbw-header-text-transform: none;
 
-  /* Bootstrap table padding */
-  --tbw-cell-padding: 8px 8px;
-  --tbw-cell-padding-header: 8px 8px;
-  --tbw-row-height: 40px;
-  --tbw-header-height: 44px;
+    /* Bootstrap table padding */
+    --tbw-cell-padding: 8px 8px;
+    --tbw-cell-padding-header: 8px 8px;
+    --tbw-row-height: 40px;
+    --tbw-header-height: 44px;
 
-  /* Sort indicator */
-  --tbw-sort-indicator-color: light-dark(#6c757d, #adb5bd);
-  --tbw-sort-indicator-active-color: light-dark(#212529, #dee2e6);
+    /* Sort indicator */
+    --tbw-sort-indicator-color: light-dark(#6c757d, #adb5bd);
+    --tbw-sort-indicator-active-color: light-dark(#212529, #dee2e6);
 
-  /* Header border - thicker bottom border like Bootstrap */
-  --tbw-border-header: 2px solid light-dark(#212529, #dee2e6);
+    /* Header border - thicker bottom border like Bootstrap */
+    --tbw-border-header: 2px solid light-dark(#212529, #dee2e6);
 
-  /* Input styling */
-  --tbw-border-input: 1px solid light-dark(#ced4da, #495057);
-  --tbw-editing-bg: light-dark(#ffffff, #212529);
-  --tbw-editing-border: 1px solid var(--tbw-color-accent);
+    /* Input styling */
+    --tbw-border-input: 1px solid light-dark(#ced4da, #495057);
+    --tbw-editing-bg: light-dark(#ffffff, #212529);
+    --tbw-editing-border: 1px solid var(--tbw-color-accent);
 
-  /* Success color for checkmarks etc */
-  --tbw-color-success: light-dark(#198754, #75b798);
-}
+    /* Success color for checkmarks etc */
+    --tbw-color-success: light-dark(#198754, #75b798);
+  }
+} /* End @layer tbw-theme */

package/themes/dg-theme-contrast.css

@@ -1,42 +1,44 @@
 /* High contrast accessibility-focused theme */
-tbw-grid {
-  --tbw-color-bg: light-dark(#ffffff, #000000);
-  --tbw-color-fg: light-dark(#000000, #ffffff);
-  --tbw-color-fg-muted: light-dark(#222222, #dddddd);
-  --tbw-color-border: light-dark(#000000, #ffffff);
-  --tbw-color-border-strong: light-dark(#000000, #ffffff);
-  --tbw-color-accent: light-dark(#c00000, #ff4d4d);
-  --tbw-color-accent-fg: #ffffff;
-  --tbw-color-selection: light-dark(#ffe9a8, #333333);
-  --tbw-color-row-alt: light-dark(#f2f2f2, #111111);
-  --tbw-color-row-hover: light-dark(#e6f2ff, #1c1c1c);
-  --tbw-color-header-bg: light-dark(#e8e8e8, #141414);
-  --tbw-color-border-cell: light-dark(#333, #eee);
-  --tbw-color-border-header: light-dark(#444, #ccc);
-  --tbw-resize-handle-color-hover: var(--tbw-color-accent);
-  --tbw-focus-outline: 2px solid var(--tbw-color-accent);
+@layer tbw-theme {
+  tbw-grid {
+    --tbw-color-bg: light-dark(#ffffff, #000000);
+    --tbw-color-fg: light-dark(#000000, #ffffff);
+    --tbw-color-fg-muted: light-dark(#222222, #dddddd);
+    --tbw-color-border: light-dark(#000000, #ffffff);
+    --tbw-color-border-strong: light-dark(#000000, #ffffff);
+    --tbw-color-accent: light-dark(#c00000, #ff4d4d);
+    --tbw-color-accent-fg: #ffffff;
+    --tbw-color-selection: light-dark(#ffe9a8, #333333);
+    --tbw-color-row-alt: light-dark(#f2f2f2, #111111);
+    --tbw-color-row-hover: light-dark(#e6f2ff, #1c1c1c);
+    --tbw-color-header-bg: light-dark(#e8e8e8, #141414);
+    --tbw-color-border-cell: light-dark(#333, #eee);
+    --tbw-color-border-header: light-dark(#444, #ccc);
+    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+    --tbw-focus-outline: 2px solid var(--tbw-color-accent);
 
-  /* Typography & spacing */
-  --tbw-font-size: 14px;
-  --tbw-font-size-header: 17px;
-  --tbw-font-weight-header: bold;
-  --tbw-cell-padding-header: 15px 8px;
-  --tbw-cell-padding: 2px 8px;
-  --tbw-cell-padding-input: 2px 6px;
-  --tbw-row-height: 40px; /* taller rows */
-  --tbw-header-height: 44px;
-  --tbw-border-radius: 0;
-  --tbw-resize-handle-width: 6px;
-  --tbw-resize-handle-border-radius: 2px;
-  --tbw-checkbox-size: 20px;
-  --tbw-focus-outline-offset: 0;
-  --tbw-row-divider: 2px solid light-dark(#000000, #ffffff);
-  --tbw-border-header: 2px solid light-dark(#000000, #ffffff);
-  --tbw-editing-border: 2px solid var(--tbw-color-accent);
-  --tbw-active-row-outline: 2px solid var(--tbw-color-accent);
-  --tbw-row-hover-outline: 2px solid var(--tbw-color-accent);
-  --tbw-sort-indicator-color: var(--tbw-color-fg-muted);
-  --tbw-sort-indicator-active-color: var(--tbw-color-accent);
-  --tbw-transition-duration: 0ms; /* reduce motion */
-  --tbw-font-size-editor: 1rem;
-}
+    /* Typography & spacing */
+    --tbw-font-size: 14px;
+    --tbw-font-size-header: 17px;
+    --tbw-font-weight-header: bold;
+    --tbw-cell-padding-header: 15px 8px;
+    --tbw-cell-padding: 2px 8px;
+    --tbw-cell-padding-input: 2px 6px;
+    --tbw-row-height: 40px; /* taller rows */
+    --tbw-header-height: 44px;
+    --tbw-border-radius: 0;
+    --tbw-resize-handle-width: 6px;
+    --tbw-resize-handle-border-radius: 2px;
+    --tbw-checkbox-size: 20px;
+    --tbw-focus-outline-offset: 0;
+    --tbw-row-divider: 2px solid light-dark(#000000, #ffffff);
+    --tbw-border-header: 2px solid light-dark(#000000, #ffffff);
+    --tbw-editing-border: 2px solid var(--tbw-color-accent);
+    --tbw-active-row-outline: 2px solid var(--tbw-color-accent);
+    --tbw-row-hover-outline: 2px solid var(--tbw-color-accent);
+    --tbw-sort-indicator-color: var(--tbw-color-fg-muted);
+    --tbw-sort-indicator-active-color: var(--tbw-color-accent);
+    --tbw-transition-duration: 0ms; /* reduce motion */
+    --tbw-font-size-editor: 1rem;
+  }
+} /* End @layer tbw-theme */

package/themes/dg-theme-large.css

@@ -9,45 +9,46 @@
    - Stronger focus outline for visibility
    - Slightly higher contrast for muted fg & borders (within WCAG AA)
 */
+@layer tbw-theme {
+  tbw-grid {
+    /* Reuse core color tokens from standard theme with a few tweaks */
+    --tbw-color-bg: light-dark(#ffffff, #1f2125);
+    --tbw-color-fg: light-dark(#1b1e23, #e7e9ed); /* a bit darker/lighter */
+    --tbw-color-fg-muted: light-dark(#4c5660, #a3adb7); /* slightly higher contrast */
+    --tbw-color-border: light-dark(#c4c9cf, #444950);
+    --tbw-color-border-strong: light-dark(#7c828a, #5f646c);
+    --tbw-color-accent: light-dark(#1d4ed8, #3b82f6); /* slightly deeper blue in light */
+    --tbw-color-accent-fg: #ffffff;
+    --tbw-color-selection: light-dark(#fff3c2, #303640);
+    --tbw-color-row-alt: light-dark(#f5f7f9, #272c34);
+    --tbw-color-row-hover: light-dark(#e6f2ff, #313741);
+    --tbw-color-header-bg: light-dark(#eef1f5, #262a30);
+    --tbw-color-border-cell: light-dark(#e4e7eb, #363a41);
+    --tbw-color-border-header: light-dark(#bbbbc2, #454a52);
 
-tbw-grid {
-  /* Reuse core color tokens from standard theme with a few tweaks */
-  --tbw-color-bg: light-dark(#ffffff, #1f2125);
-  --tbw-color-fg: light-dark(#1b1e23, #e7e9ed); /* a bit darker/lighter */
-  --tbw-color-fg-muted: light-dark(#4c5660, #a3adb7); /* slightly higher contrast */
-  --tbw-color-border: light-dark(#c4c9cf, #444950);
-  --tbw-color-border-strong: light-dark(#7c828a, #5f646c);
-  --tbw-color-accent: light-dark(#1d4ed8, #3b82f6); /* slightly deeper blue in light */
-  --tbw-color-accent-fg: #ffffff;
-  --tbw-color-selection: light-dark(#fff3c2, #303640);
-  --tbw-color-row-alt: light-dark(#f5f7f9, #272c34);
-  --tbw-color-row-hover: light-dark(#e6f2ff, #313741);
-  --tbw-color-header-bg: light-dark(#eef1f5, #262a30);
-  --tbw-color-border-cell: light-dark(#e4e7eb, #363a41);
-  --tbw-color-border-header: light-dark(#bbbbc2, #454a52);
+    /* Typography & spacing overrides */
+    --tbw-font-size: 18px; /* larger base */
+    --tbw-font-size-header: 19px;
+    --tbw-cell-padding: 6px 14px; /* vertical horiz */
+    --tbw-cell-padding-header: 6px 14px;
+    --tbw-cell-padding-input: 4px 10px;
+    --tbw-row-height: 38px;
+    --tbw-header-height: 42px;
+    --tbw-checkbox-size: 20px;
 
-  /* Typography & spacing overrides */
-  --tbw-font-size: 18px; /* larger base */
-  --tbw-font-size-header: 19px;
-  --tbw-cell-padding: 6px 14px; /* vertical horiz */
-  --tbw-cell-padding-header: 6px 14px;
-  --tbw-cell-padding-input: 4px 10px;
-  --tbw-row-height: 38px;
-  --tbw-header-height: 42px;
-  --tbw-checkbox-size: 20px;
+    /* Focus enhancements */
+    --tbw-focus-outline: 3px solid var(--tbw-color-accent);
+    --tbw-focus-outline-offset: -3px;
 
-  /* Focus enhancements */
-  --tbw-focus-outline: 3px solid var(--tbw-color-accent);
-  --tbw-focus-outline-offset: -3px;
+    /* Editing */
+    --tbw-font-size-editor: 18px;
+    --tbw-padding-editing-input: 4px 10px;
 
-  /* Editing */
-  --tbw-font-size-editor: 18px;
-  --tbw-padding-editing-input: 4px 10px;
+    /* Resize handle larger */
+    --tbw-resize-handle-width: 6px;
+    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
 
-  /* Resize handle larger */
-  --tbw-resize-handle-width: 6px;
-  --tbw-resize-handle-color-hover: var(--tbw-color-accent);
-
-  /* Slightly longer transitions for comfort */
-  --tbw-transition-duration: 140ms;
-}
+    /* Slightly longer transitions for comfort */
+    --tbw-transition-duration: 140ms;
+  }
+} /* End @layer tbw-theme */

package/themes/dg-theme-material.css

@@ -3,67 +3,69 @@
  * Matches the clean, minimal look of Angular Material's mat-table
  * https://material.angular.io/components/table/overview
  */
-tbw-grid {
-  /* Clean white/dark surface - no tinting */
-  --tbw-color-bg: light-dark(#ffffff, #272727);
-  --tbw-color-panel-bg: light-dark(#ffffff, #272727);
-  --tbw-color-fg: light-dark(rgba(0, 0, 0, 0.87), #ffffff);
-  --tbw-color-fg-muted: light-dark(rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.7));
+@layer tbw-theme {
+  tbw-grid {
+    /* Clean white/dark surface - no tinting */
+    --tbw-color-bg: light-dark(#ffffff, #272727);
+    --tbw-color-panel-bg: light-dark(#ffffff, #272727);
+    --tbw-color-fg: light-dark(rgba(0, 0, 0, 0.87), #ffffff);
+    --tbw-color-fg-muted: light-dark(rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.7));
 
-  /* Minimal borders - only horizontal row dividers */
-  --tbw-color-border: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
-  --tbw-color-border-strong: light-dark(rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.5));
-  --tbw-color-border-cell: transparent; /* No vertical cell borders */
-  --tbw-color-border-header: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
+    /* Minimal borders - only horizontal row dividers */
+    --tbw-color-border: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
+    --tbw-color-border-strong: light-dark(rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.5));
+    --tbw-color-border-cell: transparent; /* No vertical cell borders */
+    --tbw-color-border-header: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
 
-  /* Row divider - thin horizontal line only */
-  --tbw-row-divider: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
+    /* Row divider - thin horizontal line only */
+    --tbw-row-divider: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
 
-  /* Angular Material accent colors */
-  --tbw-color-accent: light-dark(#3f51b5, #7986cb); /* Indigo primary */
-  --tbw-color-accent-fg: #ffffff;
+    /* Angular Material accent colors */
+    --tbw-color-accent: light-dark(#3f51b5, #7986cb); /* Indigo primary */
+    --tbw-color-accent-fg: #ffffff;
 
-  /* Selection & interaction */
-  --tbw-color-selection: light-dark(rgba(63, 81, 181, 0.08), rgba(121, 134, 203, 0.16));
-  --tbw-color-row-alt: transparent; /* No zebra striping in Material */
-  --tbw-color-row-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
-  --tbw-color-active-row-bg: light-dark(rgba(63, 81, 181, 0.08), rgba(121, 134, 203, 0.16));
+    /* Selection & interaction */
+    --tbw-color-selection: light-dark(rgba(63, 81, 181, 0.08), rgba(121, 134, 203, 0.16));
+    --tbw-color-row-alt: transparent; /* No zebra striping in Material */
+    --tbw-color-row-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
+    --tbw-color-active-row-bg: light-dark(rgba(63, 81, 181, 0.08), rgba(121, 134, 203, 0.16));
 
-  /* Header - same as body, no distinct background */
-  --tbw-color-header-bg: light-dark(#ffffff, #272727);
-  --tbw-color-header-fg: light-dark(rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.7));
+    /* Header - same as body, no distinct background */
+    --tbw-color-header-bg: light-dark(#ffffff, #272727);
+    --tbw-color-header-fg: light-dark(rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.7));
 
-  /* No outer border or radius - clean rectangular look */
-  --tbw-border-radius: 0;
+    /* No outer border or radius - clean rectangular look */
+    --tbw-border-radius: 0;
 
-  /* Focus styling */
-  --tbw-focus-outline: 2px solid var(--tbw-color-accent);
-  --tbw-focus-outline-offset: -2px;
-  --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+    /* Focus styling */
+    --tbw-focus-outline: 2px solid var(--tbw-color-accent);
+    --tbw-focus-outline-offset: -2px;
+    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
 
-  /* Roboto typography - Material standard */
-  --tbw-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
-  --tbw-font-size: 14px;
-  --tbw-font-size-header: 12px;
-  --tbw-font-weight-header: 500;
-  --tbw-header-text-transform: none;
-  --tbw-header-letter-spacing: normal;
+    /* Roboto typography - Material standard */
+    --tbw-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+    --tbw-font-size: 14px;
+    --tbw-font-size-header: 12px;
+    --tbw-font-weight-header: 500;
+    --tbw-header-text-transform: none;
+    --tbw-header-letter-spacing: normal;
 
-  /* Generous padding like Material tables */
-  --tbw-cell-padding: 4px 16px;
-  --tbw-cell-padding-header: 4px 16px;
-  --tbw-row-height: 48px;
-  --tbw-header-height: 56px;
+    /* Generous padding like Material tables */
+    --tbw-cell-padding: 4px 16px;
+    --tbw-cell-padding-header: 4px 16px;
+    --tbw-row-height: 48px;
+    --tbw-header-height: 56px;
 
-  /* Sort indicator styling */
-  --tbw-sort-indicator-color: light-dark(rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.7));
-  --tbw-sort-indicator-active-color: light-dark(rgba(0, 0, 0, 0.87), #ffffff);
+    /* Sort indicator styling */
+    --tbw-sort-indicator-color: light-dark(rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.7));
+    --tbw-sort-indicator-active-color: light-dark(rgba(0, 0, 0, 0.87), #ffffff);
 
-  /* Header border - only bottom */
-  --tbw-border-header: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
+    /* Header border - only bottom */
+    --tbw-border-header: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
 
-  /* Input styling for editing */
-  --tbw-border-input: 1px solid light-dark(rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.5));
-  --tbw-editing-bg: transparent;
-  --tbw-editing-border: 2px solid var(--tbw-color-accent);
-}
+    /* Input styling for editing */
+    --tbw-border-input: 1px solid light-dark(rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.5));
+    --tbw-editing-bg: transparent;
+    --tbw-editing-border: 2px solid var(--tbw-color-accent);
+  }
+} /* End @layer tbw-theme */

package/themes/dg-theme-standard.css

@@ -1,18 +1,20 @@
 /* Standard balanced theme with light-dark() adaptive palette */
-tbw-grid {
-  --tbw-color-bg: light-dark(#ffffff, #1f2125);
-  --tbw-color-fg: light-dark(#1f2329, #e5e7eb);
-  --tbw-color-fg-muted: light-dark(#586069, #9ca3af);
-  --tbw-color-border: light-dark(#d0d4d9, #3a3d44);
-  --tbw-color-border-strong: light-dark(#888d94, #5a5f66);
-  --tbw-color-accent: light-dark(#2563eb, #3b82f6);
-  --tbw-color-accent-fg: #ffffff;
-  --tbw-color-selection: light-dark(#fff7d6, #374151);
-  --tbw-color-row-alt: light-dark(#f8f9fa, #252830);
-  --tbw-color-row-hover: light-dark(#eef6ff, #2d313b);
-  --tbw-color-header-bg: light-dark(#f5f6f8, #262a30);
-  --tbw-color-border-cell: light-dark(#eee, #333);
-  --tbw-color-border-header: light-dark(#ccc, #444);
-  --tbw-resize-handle-color-hover: var(--tbw-color-accent);
-  --tbw-align-header-group: center;
-}
+@layer tbw-theme {
+  tbw-grid {
+    --tbw-color-bg: light-dark(#ffffff, #1f2125);
+    --tbw-color-fg: light-dark(#1f2329, #e5e7eb);
+    --tbw-color-fg-muted: light-dark(#586069, #9ca3af);
+    --tbw-color-border: light-dark(#d0d4d9, #3a3d44);
+    --tbw-color-border-strong: light-dark(#888d94, #5a5f66);
+    --tbw-color-accent: light-dark(#2563eb, #3b82f6);
+    --tbw-color-accent-fg: #ffffff;
+    --tbw-color-selection: light-dark(#fff7d6, #374151);
+    --tbw-color-row-alt: light-dark(#f8f9fa, #252830);
+    --tbw-color-row-hover: light-dark(#eef6ff, #2d313b);
+    --tbw-color-header-bg: light-dark(#f5f6f8, #262a30);
+    --tbw-color-border-cell: light-dark(#eee, #333);
+    --tbw-color-border-header: light-dark(#ccc, #444);
+    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+    --tbw-align-header-group: center;
+  }
+} /* End @layer tbw-theme */

package/themes/dg-theme-vibrant.css

@@ -1,15 +1,17 @@
 /* Vibrant colorful theme (keeps good contrast) */
-tbw-grid {
-  --tbw-color-bg: light-dark(#fcfcff, #1a1c24);
-  --tbw-color-fg: light-dark(#1e2430, #f1f5f9);
-  --tbw-color-fg-muted: light-dark(#5d6473, #9ba4b4);
-  --tbw-color-border: light-dark(#d6daf2, #3a4153);
-  --tbw-color-border-strong: light-dark(#8a93b5, #596380);
-  --tbw-color-accent: light-dark(#6366f1, #818cf8);
-  --tbw-color-accent-fg: #ffffff;
-  --tbw-color-selection: light-dark(#edeaff, #374062);
-  --tbw-color-row-alt: light-dark(#f4f3ff, #232a3a);
-  --tbw-color-row-hover: light-dark(#eef2ff, #2b3447);
-  --tbw-color-header-bg: light-dark(#eff1ff, #242b3b);
-  --tbw-resize-handle-color-hover: var(--tbw-color-accent);
-}
+@layer tbw-theme {
+  tbw-grid {
+    --tbw-color-bg: light-dark(#fcfcff, #1a1c24);
+    --tbw-color-fg: light-dark(#1e2430, #f1f5f9);
+    --tbw-color-fg-muted: light-dark(#5d6473, #9ba4b4);
+    --tbw-color-border: light-dark(#d6daf2, #3a4153);
+    --tbw-color-border-strong: light-dark(#8a93b5, #596380);
+    --tbw-color-accent: light-dark(#6366f1, #818cf8);
+    --tbw-color-accent-fg: #ffffff;
+    --tbw-color-selection: light-dark(#edeaff, #374062);
+    --tbw-color-row-alt: light-dark(#f4f3ff, #232a3a);
+    --tbw-color-row-hover: light-dark(#eef2ff, #2b3447);
+    --tbw-color-header-bg: light-dark(#eff1ff, #242b3b);
+    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+  }
+} /* End @layer tbw-theme */