@toolbox-web/grid 0.0.1

package/themes/dg-theme-large.css

@@ -0,0 +1,54 @@
+/* Large / Accessible theme
+   Based on standard theme but increases font size, spacing, and hit targets
+   Focus: users with low vision / vision disorders.
+   Adjustments:
+   - +2px base font size relative inheritance (assumes root ~16px -> 18px)
+   - Increased header + row heights
+   - Increased horizontal & vertical cell padding
+   - Larger resize handle width for easier grabbing
+   - Stronger focus outline for visibility
+   - Slightly higher contrast for muted fg & borders (within WCAG AA)
+*/
+
+tbw-grid {
+  color-scheme: light dark;
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+}

package/themes/dg-theme-standard.css

@@ -0,0 +1,19 @@
+/* Standard balanced theme with light-dark() adaptive palette */
+tbw-grid {
+  color-scheme: light dark;
+  --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;
+}

package/themes/dg-theme-vibrant.css

@@ -0,0 +1,16 @@
+/* Vibrant colorful theme (keeps good contrast) */
+tbw-grid {
+  color-scheme: light dark;
+  --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);
+}