photon-grid-core 2.0.4 → 2.0.6

package/styles/themes/theme-alpine.d.ts

@@ -1,2 +1,10 @@
-export declare const themeAlpineCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-alpine-theme variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-alpine-theme .pg-grid {\n  --pg-colors-border: #e5e7eb;\n  --pg-colors-header-background: #ffffff;\n  --pg-colors-header-border: #e5e7eb;\n  --pg-colors-header-text: #374151;\n  --pg-colors-row-background: #ffffff;\n  --pg-colors-row-alt-background: #fafafa;\n  --pg-colors-row-hover: #f0fdf4;\n  --pg-colors-row-selected: #dcfce7;\n  --pg-colors-row-selected-hover: #bbf7d0;\n  --pg-colors-text-primary: #111827;\n  --pg-colors-text-secondary: #6b7280;\n  --pg-colors-text-muted: #9ca3af;\n  --pg-colors-text-disabled: #d1d5db;\n  --pg-colors-primary: #16a34a;\n  --pg-colors-filter-background: #ffffff;\n  --pg-colors-scrollbar-bg: #f9fafb;\n  --pg-colors-badge-background: #dcfce7;\n  --pg-colors-badge-text: #166534;\n  --pg-colors-resize-handle-color: #d1d5db;\n\n  --pg-typography-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n  --pg-typography-font-size-md: 0.8rem;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0em;\n\n  --pg-header-row-height: 42px;\n  --pg-row-height: 40px;\n  --pg-borders-radius-md: 4px;\n  --pg-borders-radius-sm: 2px;\n  --pg-borders-radius-pill: 9999px;\n  --pg-transitions-duration-fast: 100ms;\n  --pg-sizing-checkbox-size: 15px;\n}\n\n/* Alpine header \u2014 no uppercase, clean weight */\n.pg-alpine-theme .pg-th {\n  text-transform: none;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0em;\n  color: #374151;\n}\n.pg-alpine-theme .pg-th--sorted { color: #16a34a; }\n.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid #e5e7eb; }\n\n/* Alpine rows \u2014 thin full-width divider */\n.pg-alpine-theme .pg-row { border-bottom: 1px solid #f3f4f6; }\n\n/* Alpine icon tones */\n.pg-alpine-theme .pg-icon { color: #6b7280; }\n.pg-alpine-theme .pg-th--sorted .pg-icon { color: #16a34a; }\n.pg-alpine-theme .pg-row-drag-handle { color: #9ca3af; }\n\n/* Alpine checkbox \u2014 15px, 2px-radius, slim green outline \u2192 fill */\n.pg-alpine-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 15px;\n  height: 15px;\n  border: 1.5px solid #d1d5db;\n  border-radius: 2px;\n  background: #fff;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 100ms linear, border-color 100ms linear;\n}\n.pg-alpine-theme .pg-checkbox:hover { border-color: #16a34a; }\n.pg-alpine-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(22,163,74,0.3);\n}\n.pg-alpine-theme .pg-checkbox:checked {\n  background: #16a34a;\n  border-color: #16a34a;\n}\n.pg-alpine-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 3px;\n  top: 1px;\n  width: 5px;\n  height: 8px;\n  border: 1.5px solid #fff;\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate {\n  background: #16a34a;\n  border-color: #16a34a;\n}\n.pg-alpine-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 7px;\n  height: 1.5px;\n  background: #fff;\n  transform: translateY(-50%);\n}\n\n/* Alpine selection \u2014 clean green underline */\n.pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 #16a34a; }\n\n/* Alpine row-drag animation \u2014 snappy, fast linear */\n.pg-alpine-theme .pg-grid--row-dragging .pg-row {\n  transition: background 100ms linear, top 100ms ease-out;\n}\n";
+/**
+ * pg-alpine-theme — clean, minimal (emerald accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent and motion; base colors come from the
+ * mode tokens so it works in both light and dark. See {@link themeQuartzCss}
+ * for the shared design rationale.
+ */
+export declare const themeAlpineCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-alpine-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-alpine-theme .pg-grid {\n  --pg-colors-primary: #16a34a;\n\n  --pg-typography-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n  --pg-typography-font-size-md: 0.8rem;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0em;\n\n  --pg-header-row-height: 42px;\n  --pg-row-height: 40px;\n\n  --pg-borders-radius-md: 4px;\n  --pg-borders-radius-sm: 2px;\n  --pg-borders-radius-pill: 9999px;\n  --pg-sizing-checkbox-size: 15px;\n\n  --pg-transitions-duration-fast: 100ms;\n}\n\n/* Alpine header \u2014 no uppercase, clean weight; color follows the mode. */\n.pg-alpine-theme .pg-th {\n  text-transform: none;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0em;\n  color: var(--pg-colors-header-text);\n}\n.pg-alpine-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }\n\n/* Alpine rows \u2014 thin full-width divider */\n.pg-alpine-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Alpine icon tones \u2014 mode-aware */\n.pg-alpine-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-alpine-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Alpine checkbox \u2014 15px, 2px-radius, slim accent outline \u2192 fill */\n.pg-alpine-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 15px;\n  height: 15px;\n  border: 1.5px solid var(--pg-colors-checkbox-border);\n  border-radius: 2px;\n  background: var(--pg-colors-checkbox-background);\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 100ms linear, border-color 100ms linear;\n}\n.pg-alpine-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pg-colors-primary) 30%, transparent);\n}\n.pg-alpine-theme .pg-checkbox:checked {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-alpine-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 3px;\n  top: 1px;\n  width: 5px;\n  height: 8px;\n  border: 1.5px solid var(--pg-colors-primary-text);\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 7px;\n  height: 1.5px;\n  background: var(--pg-colors-primary-text);\n  transform: translateY(-50%);\n}\n\n/* Alpine selection \u2014 clean accent left bar */\n// .pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 var(--pg-colors-primary); }\n\n/* Alpine row-drag animation \u2014 snappy, fast linear */\n.pg-alpine-theme .pg-grid--row-dragging .pg-row {\n  transition: background 100ms linear, top 100ms ease-out;\n}\n";
 //# sourceMappingURL=theme-alpine.d.ts.map

package/styles/themes/theme-alpine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-alpine.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,opHAqH1B,CAAC"}
+{"version":3,"file":"theme-alpine.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,45GAqG1B,CAAC"}

package/styles/themes/theme-alpine.js

@@ -1,27 +1,16 @@
-/* pg-alpine-theme — clean, minimal, emerald green */
+/**
+ * pg-alpine-theme — clean, minimal (emerald accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent and motion; base colors come from the
+ * mode tokens so it works in both light and dark. See {@link themeQuartzCss}
+ * for the shared design rationale.
+ */
 export const themeAlpineCss = `
 
-/* ──────────── pg-alpine-theme variables ──────────── */
+/* ──────────── pg-alpine-theme: structural + accent tokens ──────────── */
 .pg-alpine-theme .pg-grid {
-  --pg-colors-border: #e5e7eb;
-  --pg-colors-header-background: #ffffff;
-  --pg-colors-header-border: #e5e7eb;
-  --pg-colors-header-text: #374151;
-  --pg-colors-row-background: #ffffff;
-  --pg-colors-row-alt-background: #fafafa;
-  --pg-colors-row-hover: #f0fdf4;
-  --pg-colors-row-selected: #dcfce7;
-  --pg-colors-row-selected-hover: #bbf7d0;
-  --pg-colors-text-primary: #111827;
-  --pg-colors-text-secondary: #6b7280;
-  --pg-colors-text-muted: #9ca3af;
-  --pg-colors-text-disabled: #d1d5db;
   --pg-colors-primary: #16a34a;
-  --pg-colors-filter-background: #ffffff;
-  --pg-colors-scrollbar-bg: #f9fafb;
-  --pg-colors-badge-background: #dcfce7;
-  --pg-colors-badge-text: #166534;
-  --pg-colors-resize-handle-color: #d1d5db;
 
   --pg-typography-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
   --pg-typography-font-size-md: 0.8rem;
@@ -33,54 +22,56 @@ export const themeAlpineCss = `
 
   --pg-header-row-height: 42px;
   --pg-row-height: 40px;
+
   --pg-borders-radius-md: 4px;
   --pg-borders-radius-sm: 2px;
   --pg-borders-radius-pill: 9999px;
-  --pg-transitions-duration-fast: 100ms;
   --pg-sizing-checkbox-size: 15px;
+
+  --pg-transitions-duration-fast: 100ms;
 }
 
-/* Alpine header — no uppercase, clean weight */
+/* Alpine header — no uppercase, clean weight; color follows the mode. */
 .pg-alpine-theme .pg-th {
   text-transform: none;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0em;
-  color: #374151;
+  color: var(--pg-colors-header-text);
 }
-.pg-alpine-theme .pg-th--sorted { color: #16a34a; }
-.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid #e5e7eb; }
+.pg-alpine-theme .pg-th--sorted { color: var(--pg-colors-primary); }
+.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }
 
 /* Alpine rows — thin full-width divider */
-.pg-alpine-theme .pg-row { border-bottom: 1px solid #f3f4f6; }
+.pg-alpine-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }
 
-/* Alpine icon tones */
-.pg-alpine-theme .pg-icon { color: #6b7280; }
-.pg-alpine-theme .pg-th--sorted .pg-icon { color: #16a34a; }
-.pg-alpine-theme .pg-row-drag-handle { color: #9ca3af; }
+/* Alpine icon tones — mode-aware */
+.pg-alpine-theme .pg-icon { color: var(--pg-colors-text-secondary); }
+.pg-alpine-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }
+.pg-alpine-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }
 
-/* Alpine checkbox — 15px, 2px-radius, slim green outline → fill */
+/* Alpine checkbox — 15px, 2px-radius, slim accent outline → fill */
 .pg-alpine-theme .pg-checkbox {
   appearance: none;
   -webkit-appearance: none;
   width: 15px;
   height: 15px;
-  border: 1.5px solid #d1d5db;
+  border: 1.5px solid var(--pg-colors-checkbox-border);
   border-radius: 2px;
-  background: #fff;
+  background: var(--pg-colors-checkbox-background);
   cursor: pointer;
   position: relative;
   flex-shrink: 0;
   transition: background 100ms linear, border-color 100ms linear;
 }
-.pg-alpine-theme .pg-checkbox:hover { border-color: #16a34a; }
+.pg-alpine-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }
 .pg-alpine-theme .pg-checkbox:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(22,163,74,0.3);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pg-colors-primary) 30%, transparent);
 }
 .pg-alpine-theme .pg-checkbox:checked {
-  background: #16a34a;
-  border-color: #16a34a;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-alpine-theme .pg-checkbox:checked::after {
   content: '';
@@ -89,14 +80,14 @@ export const themeAlpineCss = `
   top: 1px;
   width: 5px;
   height: 8px;
-  border: 1.5px solid #fff;
+  border: 1.5px solid var(--pg-colors-primary-text);
   border-top: none;
   border-left: none;
   transform: rotate(45deg);
 }
 .pg-alpine-theme .pg-checkbox:indeterminate {
-  background: #16a34a;
-  border-color: #16a34a;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-alpine-theme .pg-checkbox:indeterminate::after {
   content: '';
@@ -105,12 +96,12 @@ export const themeAlpineCss = `
   top: 50%;
   width: 7px;
   height: 1.5px;
-  background: #fff;
+  background: var(--pg-colors-primary-text);
   transform: translateY(-50%);
 }
 
-/* Alpine selection — clean green underline */
-.pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 #16a34a; }
+/* Alpine selection — clean accent left bar */
+// .pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 var(--pg-colors-primary); }
 
 /* Alpine row-drag animation — snappy, fast linear */
 .pg-alpine-theme .pg-grid--row-dragging .pg-row {

package/styles/themes/theme-alpine.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-alpine.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH7B,CAAC"}
+{"version":3,"file":"theme-alpine.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqG7B,CAAC"}

package/styles/themes/theme-balham.d.ts

@@ -1,2 +1,10 @@
-export declare const themeBalhamCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-balham-theme variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-balham-theme .pg-grid {\n  --pg-colors-border: #d1d5db;\n  --pg-colors-header-background: #f3f4f6;\n  --pg-colors-header-border: #d1d5db;\n  --pg-colors-header-text: #374151;\n  --pg-colors-row-background: #ffffff;\n  --pg-colors-row-alt-background: #f9fafb;\n  --pg-colors-row-hover: #fef3c7;\n  --pg-colors-row-selected: #fffbeb;\n  --pg-colors-row-selected-hover: #fef08a;\n  --pg-colors-text-primary: #111827;\n  --pg-colors-text-secondary: #6b7280;\n  --pg-colors-text-muted: #9ca3af;\n  --pg-colors-text-disabled: #d1d5db;\n  --pg-colors-primary: #d97706;\n  --pg-colors-filter-background: #ffffff;\n  --pg-colors-scrollbar-bg: #f3f4f6;\n  --pg-colors-badge-background: #fef3c7;\n  --pg-colors-badge-text: #92400e;\n  --pg-colors-resize-handle-color: #d1d5db;\n\n  --pg-typography-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n  --pg-typography-font-size-sm: 11px;\n  --pg-typography-font-size-xs: 10px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0.04em;\n\n  --pg-header-row-height: 36px;\n  --pg-row-height: 32px;\n  --pg-borders-radius-md: 2px;\n  --pg-borders-radius-sm: 0px;\n  --pg-borders-radius-pill: 2px;\n  --pg-transitions-duration-fast: 80ms;\n  --pg-sizing-checkbox-size: 14px;\n}\n\n/* Balham header \u2014 dense, uppercase, pronounced border */\n.pg-balham-theme .pg-th {\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: #374151;\n}\n.pg-balham-theme .pg-th--sorted { color: #d97706; }\n.pg-balham-theme .pg-grid__header { border-bottom: 2px solid #d1d5db; }\n\n/* Balham rows \u2014 full row border, classic spreadsheet look */\n.pg-balham-theme .pg-row { border-bottom: 1px solid #e5e7eb; }\n\n/* Balham icon tones \u2014 warmer grays */\n.pg-balham-theme .pg-icon { color: #6b7280; }\n.pg-balham-theme .pg-th--sorted .pg-icon { color: #d97706; }\n.pg-balham-theme .pg-row-drag-handle { color: #9ca3af; }\n\n/* Balham checkbox \u2014 14px, square (0 radius), flat amber fill */\n.pg-balham-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 14px;\n  height: 14px;\n  border: 1px solid #9ca3af;\n  border-radius: 0px;\n  background: #fff;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 80ms linear, border-color 80ms linear;\n}\n.pg-balham-theme .pg-checkbox:hover { border-color: #d97706; }\n.pg-balham-theme .pg-checkbox:focus-visible {\n  outline: 1px solid #d97706;\n  outline-offset: 1px;\n}\n.pg-balham-theme .pg-checkbox:checked {\n  background: #d97706;\n  border-color: #d97706;\n}\n.pg-balham-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 3px;\n  top: 1px;\n  width: 5px;\n  height: 8px;\n  border: 2px solid #fff;\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-balham-theme .pg-checkbox:indeterminate {\n  background: #d97706;\n  border-color: #d97706;\n}\n.pg-balham-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 8px;\n  height: 2px;\n  background: #fff;\n  transform: translateY(-50%);\n}\n\n/* Balham selection \u2014 amber left accent bar */\n.pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 #d97706; }\n\n/* Balham row-drag \u2014 very fast, minimal */\n.pg-balham-theme .pg-grid--row-dragging .pg-row {\n  transition: background 80ms linear, top 80ms linear;\n}\n";
+/**
+ * pg-balham-theme — compact, professional (amber accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent and motion; base colors come from the
+ * mode tokens so it works in both light and dark. See {@link themeQuartzCss}
+ * for the shared design rationale.
+ */
+export declare const themeBalhamCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-balham-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-balham-theme .pg-grid {\n  --pg-colors-primary: #d97706;\n\n  --pg-typography-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n  --pg-typography-font-size-sm: 11px;\n  --pg-typography-font-size-xs: 10px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0.04em;\n\n  --pg-header-row-height: 36px;\n  --pg-row-height: 32px;\n\n  --pg-borders-radius-md: 2px;\n  --pg-borders-radius-sm: 0px;\n  --pg-borders-radius-pill: 2px;\n  --pg-sizing-checkbox-size: 14px;\n\n  --pg-transitions-duration-fast: 80ms;\n}\n\n/* Balham header \u2014 dense, uppercase, pronounced border; color follows the mode. */\n.pg-balham-theme .pg-th {\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: var(--pg-colors-header-text);\n}\n.pg-balham-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }\n\n/* Balham rows \u2014 full row border, classic spreadsheet look */\n.pg-balham-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Balham icon tones \u2014 mode-aware */\n.pg-balham-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-balham-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Balham checkbox \u2014 14px, square (0 radius), flat accent fill */\n.pg-balham-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 14px;\n  height: 14px;\n  border: 1px solid var(--pg-colors-checkbox-border);\n  border-radius: 0px;\n  background: var(--pg-colors-checkbox-background);\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 80ms linear, border-color 80ms linear;\n}\n.pg-balham-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-checkbox:focus-visible {\n  outline: 1px solid var(--pg-colors-primary);\n  outline-offset: 1px;\n}\n.pg-balham-theme .pg-checkbox:checked {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-balham-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 3px;\n  top: 1px;\n  width: 5px;\n  height: 8px;\n  border: 2px solid var(--pg-colors-primary-text);\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-balham-theme .pg-checkbox:indeterminate {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-balham-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 8px;\n  height: 2px;\n  background: var(--pg-colors-primary-text);\n  transform: translateY(-50%);\n}\n\n/* Balham selection \u2014 amber left accent bar */\n// .pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }\n\n/* Balham row-drag \u2014 very fast, minimal */\n.pg-balham-theme .pg-grid--row-dragging .pg-row {\n  transition: background 80ms linear, top 80ms linear;\n}\n";
 //# sourceMappingURL=theme-balham.d.ts.map

package/styles/themes/theme-balham.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-balham.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,umHAoH1B,CAAC"}
+{"version":3,"file":"theme-balham.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,k0GAoG1B,CAAC"}

package/styles/themes/theme-balham.js

@@ -1,27 +1,16 @@
-/* pg-balham-theme — compact, professional, amber accent */
+/**
+ * pg-balham-theme — compact, professional (amber accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent and motion; base colors come from the
+ * mode tokens so it works in both light and dark. See {@link themeQuartzCss}
+ * for the shared design rationale.
+ */
 export const themeBalhamCss = `
 
-/* ──────────── pg-balham-theme variables ──────────── */
+/* ──────────── pg-balham-theme: structural + accent tokens ──────────── */
 .pg-balham-theme .pg-grid {
-  --pg-colors-border: #d1d5db;
-  --pg-colors-header-background: #f3f4f6;
-  --pg-colors-header-border: #d1d5db;
-  --pg-colors-header-text: #374151;
-  --pg-colors-row-background: #ffffff;
-  --pg-colors-row-alt-background: #f9fafb;
-  --pg-colors-row-hover: #fef3c7;
-  --pg-colors-row-selected: #fffbeb;
-  --pg-colors-row-selected-hover: #fef08a;
-  --pg-colors-text-primary: #111827;
-  --pg-colors-text-secondary: #6b7280;
-  --pg-colors-text-muted: #9ca3af;
-  --pg-colors-text-disabled: #d1d5db;
   --pg-colors-primary: #d97706;
-  --pg-colors-filter-background: #ffffff;
-  --pg-colors-scrollbar-bg: #f3f4f6;
-  --pg-colors-badge-background: #fef3c7;
-  --pg-colors-badge-text: #92400e;
-  --pg-colors-resize-handle-color: #d1d5db;
 
   --pg-typography-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
   --pg-typography-font-size-sm: 11px;
@@ -32,54 +21,56 @@ export const themeBalhamCss = `
 
   --pg-header-row-height: 36px;
   --pg-row-height: 32px;
+
   --pg-borders-radius-md: 2px;
   --pg-borders-radius-sm: 0px;
   --pg-borders-radius-pill: 2px;
-  --pg-transitions-duration-fast: 80ms;
   --pg-sizing-checkbox-size: 14px;
+
+  --pg-transitions-duration-fast: 80ms;
 }
 
-/* Balham header — dense, uppercase, pronounced border */
+/* Balham header — dense, uppercase, pronounced border; color follows the mode. */
 .pg-balham-theme .pg-th {
   text-transform: uppercase;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.06em;
-  color: #374151;
+  color: var(--pg-colors-header-text);
 }
-.pg-balham-theme .pg-th--sorted { color: #d97706; }
-.pg-balham-theme .pg-grid__header { border-bottom: 2px solid #d1d5db; }
+.pg-balham-theme .pg-th--sorted { color: var(--pg-colors-primary); }
+.pg-balham-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }
 
 /* Balham rows — full row border, classic spreadsheet look */
-.pg-balham-theme .pg-row { border-bottom: 1px solid #e5e7eb; }
+.pg-balham-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }
 
-/* Balham icon tones — warmer grays */
-.pg-balham-theme .pg-icon { color: #6b7280; }
-.pg-balham-theme .pg-th--sorted .pg-icon { color: #d97706; }
-.pg-balham-theme .pg-row-drag-handle { color: #9ca3af; }
+/* Balham icon tones — mode-aware */
+.pg-balham-theme .pg-icon { color: var(--pg-colors-text-secondary); }
+.pg-balham-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }
+.pg-balham-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }
 
-/* Balham checkbox — 14px, square (0 radius), flat amber fill */
+/* Balham checkbox — 14px, square (0 radius), flat accent fill */
 .pg-balham-theme .pg-checkbox {
   appearance: none;
   -webkit-appearance: none;
   width: 14px;
   height: 14px;
-  border: 1px solid #9ca3af;
+  border: 1px solid var(--pg-colors-checkbox-border);
   border-radius: 0px;
-  background: #fff;
+  background: var(--pg-colors-checkbox-background);
   cursor: pointer;
   position: relative;
   flex-shrink: 0;
   transition: background 80ms linear, border-color 80ms linear;
 }
-.pg-balham-theme .pg-checkbox:hover { border-color: #d97706; }
+.pg-balham-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }
 .pg-balham-theme .pg-checkbox:focus-visible {
-  outline: 1px solid #d97706;
+  outline: 1px solid var(--pg-colors-primary);
   outline-offset: 1px;
 }
 .pg-balham-theme .pg-checkbox:checked {
-  background: #d97706;
-  border-color: #d97706;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-balham-theme .pg-checkbox:checked::after {
   content: '';
@@ -88,14 +79,14 @@ export const themeBalhamCss = `
   top: 1px;
   width: 5px;
   height: 8px;
-  border: 2px solid #fff;
+  border: 2px solid var(--pg-colors-primary-text);
   border-top: none;
   border-left: none;
   transform: rotate(45deg);
 }
 .pg-balham-theme .pg-checkbox:indeterminate {
-  background: #d97706;
-  border-color: #d97706;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-balham-theme .pg-checkbox:indeterminate::after {
   content: '';
@@ -104,12 +95,12 @@ export const themeBalhamCss = `
   top: 50%;
   width: 8px;
   height: 2px;
-  background: #fff;
+  background: var(--pg-colors-primary-text);
   transform: translateY(-50%);
 }
 
 /* Balham selection — amber left accent bar */
-.pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 #d97706; }
+// .pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }
 
 /* Balham row-drag — very fast, minimal */
 .pg-balham-theme .pg-grid--row-dragging .pg-row {

package/styles/themes/theme-balham.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-balham.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH7B,CAAC"}
+{"version":3,"file":"theme-balham.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoG7B,CAAC"}

package/styles/themes/theme-material.d.ts

@@ -1,2 +1,10 @@
-export declare const themeMaterialCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-material-theme variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-material-theme .pg-grid {\n  border-radius: 4px;\n  border-color: transparent;\n  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n\n  --pg-colors-border: rgba(0,0,0,.12);\n  --pg-colors-header-background: #ffffff;\n  --pg-colors-header-border: transparent;\n  --pg-colors-header-text: rgba(0,0,0,.54);\n  --pg-colors-row-background: #ffffff;\n  --pg-colors-row-alt-background: #fafafa;\n  --pg-colors-row-hover: rgba(0,0,0,.04);\n  --pg-colors-row-selected: rgba(25,118,210,.10);\n  --pg-colors-row-selected-hover: rgba(25,118,210,.16);\n  --pg-colors-text-primary: rgba(0,0,0,.87);\n  --pg-colors-text-secondary: rgba(0,0,0,.54);\n  --pg-colors-text-muted: rgba(0,0,0,.38);\n  --pg-colors-text-disabled: rgba(0,0,0,.26);\n  --pg-colors-primary: #1976d2;\n  --pg-colors-filter-background: #ffffff;\n  --pg-colors-scrollbar-bg: #fafafa;\n  --pg-colors-badge-background: #e3f2fd;\n  --pg-colors-badge-text: #0d47a1;\n  --pg-colors-resize-handle-color: rgba(0,0,0,.20);\n\n  --pg-typography-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 500;\n  --pg-typography-letter-spacing-wide: 0.04em;\n\n  --pg-header-row-height: 56px;\n  --pg-row-height: 52px;\n  --pg-borders-radius-md: 4px;\n  --pg-borders-radius-sm: 2px;\n  --pg-borders-radius-pill: 4px;\n  --pg-transitions-duration-fast: 200ms;\n  --pg-sizing-checkbox-size: 18px;\n}\n\n/* Material header \u2014 no uppercase, medium weight, subdued */\n.pg-material-theme .pg-th {\n  text-transform: none;\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.04em;\n  color: rgba(0,0,0,.54);\n}\n.pg-material-theme .pg-th--sorted { color: #1976d2; }\n.pg-material-theme .pg-grid__header { border-bottom: 1px solid rgba(0,0,0,.12); }\n\n/* Material rows \u2014 thin divider lines */\n.pg-material-theme .pg-row { border-bottom: 1px solid rgba(0,0,0,.06); }\n.pg-material-theme .pg-cell--v-border { border-right-color: rgba(0,0,0,.06); }\n\n/* Material filter row */\n.pg-material-theme .pg-filter-row { border-top-color: rgba(0,0,0,.08); }\n\n/* Material icon tones */\n.pg-material-theme .pg-icon { color: rgba(0,0,0,.54); }\n.pg-material-theme .pg-th--sorted .pg-icon { color: #1976d2; }\n.pg-material-theme .pg-row-drag-handle { color: rgba(0,0,0,.38); }\n\n/* Material checkbox \u2014 18px, 2px radius, blue, Material motion */\n.pg-material-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 18px;\n  height: 18px;\n  border: 2px solid rgba(0,0,0,.38);\n  border-radius: 2px;\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n              border-color 200ms cubic-bezier(0.4,0,0.2,1),\n              box-shadow 200ms cubic-bezier(0.4,0,0.2,1);\n}\n.pg-material-theme .pg-checkbox:hover {\n  border-color: #1976d2;\n  box-shadow: 0 0 0 8px rgba(25,118,210,.1);\n}\n.pg-material-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 8px rgba(25,118,210,.2);\n}\n.pg-material-theme .pg-checkbox:checked {\n  background: #1976d2;\n  border-color: #1976d2;\n}\n.pg-material-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 4px;\n  top: 1px;\n  width: 7px;\n  height: 11px;\n  border: 2px solid #fff;\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-material-theme .pg-checkbox:indeterminate {\n  background: #1976d2;\n  border-color: #1976d2;\n}\n.pg-material-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 10px;\n  height: 2px;\n  background: #fff;\n  transform: translateY(-50%);\n}\n\n/* Material selection \u2014 no left bar, full-row tint only */\n.pg-material-theme .pg-row--selected { box-shadow: none; }\n\n/* Material row-drag animation \u2014 Material motion curve */\n.pg-material-theme .pg-grid--row-dragging .pg-row {\n  transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n              top 200ms cubic-bezier(0.4,0,0.2,1);\n}\n";
+/**
+ * pg-material-theme — Material Design 3 (indigo accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent, elevation and motion; base colors come
+ * from the mode tokens so it works in both light and dark. See
+ * {@link themeQuartzCss} for the shared design rationale.
+ */
+export declare const themeMaterialCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-material-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-material-theme .pg-grid {\n  /* Material uses elevation instead of a hard border. */\n  border-radius: 4px;\n  border-color: transparent;\n  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n\n  --pg-colors-primary: #1976d2;\n\n  --pg-typography-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 500;\n  --pg-typography-letter-spacing-wide: 0.04em;\n\n  --pg-header-row-height: 56px;\n  --pg-row-height: 52px;\n\n  --pg-borders-radius-md: 4px;\n  --pg-borders-radius-sm: 2px;\n  --pg-borders-radius-pill: 4px;\n  --pg-sizing-checkbox-size: 18px;\n\n  --pg-transitions-duration-fast: 200ms;\n}\n\n/* Material header \u2014 no uppercase, medium weight; color follows the mode. */\n.pg-material-theme .pg-th {\n  text-transform: none;\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-header-text);\n}\n.pg-material-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-material-theme .pg-grid__header { border-bottom: 1px solid var(--pg-colors-header-border); }\n\n/* Material rows \u2014 thin divider lines */\n.pg-material-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n.pg-material-theme .pg-cell--v-border { border-right-color: var(--pg-colors-border); }\n\n/* Material filter row */\n.pg-material-theme .pg-filter-row { border-top-color: var(--pg-colors-border); }\n\n/* Material icon tones \u2014 mode-aware */\n.pg-material-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-material-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-material-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Material checkbox \u2014 18px, 2px radius, accent, Material motion + ripple */\n.pg-material-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--pg-colors-checkbox-border);\n  border-radius: 2px;\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n              border-color 200ms cubic-bezier(0.4,0,0.2,1),\n              box-shadow 200ms cubic-bezier(0.4,0,0.2,1);\n}\n.pg-material-theme .pg-checkbox:hover {\n  border-color: var(--pg-colors-primary);\n  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 10%, transparent);\n}\n.pg-material-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 20%, transparent);\n}\n.pg-material-theme .pg-checkbox:checked {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-material-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 4px;\n  top: 1px;\n  width: 7px;\n  height: 11px;\n  border: 2px solid var(--pg-colors-primary-text);\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-material-theme .pg-checkbox:indeterminate {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-material-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 10px;\n  height: 2px;\n  background: var(--pg-colors-primary-text);\n  transform: translateY(-50%);\n}\n\n/* Material selection \u2014 no left bar, full-row tint only */\n// .pg-material-theme .pg-row--selected { box-shadow: none; }\n\n/* Material row-drag animation \u2014 Material motion curve */\n.pg-material-theme .pg-grid--row-dragging .pg-row {\n  transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n              top 200ms cubic-bezier(0.4,0,0.2,1);\n}\n";
 //# sourceMappingURL=theme-material.d.ts.map

package/styles/themes/theme-material.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-material.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-material.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,gBAAgB,0zIAkI5B,CAAC"}
+{"version":3,"file":"theme-material.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-material.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,y/HAmH5B,CAAC"}

package/styles/themes/theme-material.js

@@ -1,31 +1,21 @@
-/* pg-material-theme — Material Design 3, indigo blue */
+/**
+ * pg-material-theme — Material Design 3 (indigo accent).
+ *
+ * Cosmetic variant layered on the active mode (light/dark). Overrides only
+ * density, radii, typography, accent, elevation and motion; base colors come
+ * from the mode tokens so it works in both light and dark. See
+ * {@link themeQuartzCss} for the shared design rationale.
+ */
 export const themeMaterialCss = `
 
-/* ──────────── pg-material-theme variables ──────────── */
+/* ──────────── pg-material-theme: structural + accent tokens ──────────── */
 .pg-material-theme .pg-grid {
+  /* Material uses elevation instead of a hard border. */
   border-radius: 4px;
   border-color: transparent;
   box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
 
-  --pg-colors-border: rgba(0,0,0,.12);
-  --pg-colors-header-background: #ffffff;
-  --pg-colors-header-border: transparent;
-  --pg-colors-header-text: rgba(0,0,0,.54);
-  --pg-colors-row-background: #ffffff;
-  --pg-colors-row-alt-background: #fafafa;
-  --pg-colors-row-hover: rgba(0,0,0,.04);
-  --pg-colors-row-selected: rgba(25,118,210,.10);
-  --pg-colors-row-selected-hover: rgba(25,118,210,.16);
-  --pg-colors-text-primary: rgba(0,0,0,.87);
-  --pg-colors-text-secondary: rgba(0,0,0,.54);
-  --pg-colors-text-muted: rgba(0,0,0,.38);
-  --pg-colors-text-disabled: rgba(0,0,0,.26);
   --pg-colors-primary: #1976d2;
-  --pg-colors-filter-background: #ffffff;
-  --pg-colors-scrollbar-bg: #fafafa;
-  --pg-colors-badge-background: #e3f2fd;
-  --pg-colors-badge-text: #0d47a1;
-  --pg-colors-resize-handle-color: rgba(0,0,0,.20);
 
   --pg-typography-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
   --pg-typography-font-size-sm: 12px;
@@ -36,43 +26,45 @@ export const themeMaterialCss = `
 
   --pg-header-row-height: 56px;
   --pg-row-height: 52px;
+
   --pg-borders-radius-md: 4px;
   --pg-borders-radius-sm: 2px;
   --pg-borders-radius-pill: 4px;
-  --pg-transitions-duration-fast: 200ms;
   --pg-sizing-checkbox-size: 18px;
+
+  --pg-transitions-duration-fast: 200ms;
 }
 
-/* Material header — no uppercase, medium weight, subdued */
+/* Material header — no uppercase, medium weight; color follows the mode. */
 .pg-material-theme .pg-th {
   text-transform: none;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.04em;
-  color: rgba(0,0,0,.54);
+  color: var(--pg-colors-header-text);
 }
-.pg-material-theme .pg-th--sorted { color: #1976d2; }
-.pg-material-theme .pg-grid__header { border-bottom: 1px solid rgba(0,0,0,.12); }
+.pg-material-theme .pg-th--sorted { color: var(--pg-colors-primary); }
+.pg-material-theme .pg-grid__header { border-bottom: 1px solid var(--pg-colors-header-border); }
 
 /* Material rows — thin divider lines */
-.pg-material-theme .pg-row { border-bottom: 1px solid rgba(0,0,0,.06); }
-.pg-material-theme .pg-cell--v-border { border-right-color: rgba(0,0,0,.06); }
+.pg-material-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }
+.pg-material-theme .pg-cell--v-border { border-right-color: var(--pg-colors-border); }
 
 /* Material filter row */
-.pg-material-theme .pg-filter-row { border-top-color: rgba(0,0,0,.08); }
+.pg-material-theme .pg-filter-row { border-top-color: var(--pg-colors-border); }
 
-/* Material icon tones */
-.pg-material-theme .pg-icon { color: rgba(0,0,0,.54); }
-.pg-material-theme .pg-th--sorted .pg-icon { color: #1976d2; }
-.pg-material-theme .pg-row-drag-handle { color: rgba(0,0,0,.38); }
+/* Material icon tones — mode-aware */
+.pg-material-theme .pg-icon { color: var(--pg-colors-text-secondary); }
+.pg-material-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }
+.pg-material-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }
 
-/* Material checkbox — 18px, 2px radius, blue, Material motion */
+/* Material checkbox — 18px, 2px radius, accent, Material motion + ripple */
 .pg-material-theme .pg-checkbox {
   appearance: none;
   -webkit-appearance: none;
   width: 18px;
   height: 18px;
-  border: 2px solid rgba(0,0,0,.38);
+  border: 2px solid var(--pg-colors-checkbox-border);
   border-radius: 2px;
   background: transparent;
   cursor: pointer;
@@ -83,16 +75,16 @@ export const themeMaterialCss = `
               box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
 }
 .pg-material-theme .pg-checkbox:hover {
-  border-color: #1976d2;
-  box-shadow: 0 0 0 8px rgba(25,118,210,.1);
+  border-color: var(--pg-colors-primary);
+  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 10%, transparent);
 }
 .pg-material-theme .pg-checkbox:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 8px rgba(25,118,210,.2);
+  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 20%, transparent);
 }
 .pg-material-theme .pg-checkbox:checked {
-  background: #1976d2;
-  border-color: #1976d2;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-material-theme .pg-checkbox:checked::after {
   content: '';
@@ -101,14 +93,14 @@ export const themeMaterialCss = `
   top: 1px;
   width: 7px;
   height: 11px;
-  border: 2px solid #fff;
+  border: 2px solid var(--pg-colors-primary-text);
   border-top: none;
   border-left: none;
   transform: rotate(45deg);
 }
 .pg-material-theme .pg-checkbox:indeterminate {
-  background: #1976d2;
-  border-color: #1976d2;
+  background: var(--pg-colors-primary);
+  border-color: var(--pg-colors-primary);
 }
 .pg-material-theme .pg-checkbox:indeterminate::after {
   content: '';
@@ -117,12 +109,12 @@ export const themeMaterialCss = `
   top: 50%;
   width: 10px;
   height: 2px;
-  background: #fff;
+  background: var(--pg-colors-primary-text);
   transform: translateY(-50%);
 }
 
 /* Material selection — no left bar, full-row tint only */
-.pg-material-theme .pg-row--selected { box-shadow: none; }
+// .pg-material-theme .pg-row--selected { box-shadow: none; }
 
 /* Material row-drag animation — Material motion curve */
 .pg-material-theme .pg-grid--row-dragging .pg-row {

package/styles/themes/theme-material.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-material.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-material.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkI/B,CAAC"}
+{"version":3,"file":"theme-material.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-material.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmH/B,CAAC"}

package/styles/themes/theme-quartz.d.ts

@@ -1,2 +1,15 @@
-export declare const themeQuartzCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-quartz-theme variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-quartz-theme .pg-grid {\n  --pg-colors-border: #ddddde;\n  --pg-colors-header-background: #f8fafc;\n  --pg-colors-header-border: #ddddde;\n  --pg-colors-header-text: #475569;\n  --pg-colors-row-background: #ffffff;\n  --pg-colors-row-alt-background: #f8fafc;\n  --pg-colors-row-hover: #f1f5f9;\n  --pg-colors-row-selected: #eff6ff;\n  --pg-colors-row-selected-hover: #dbeafe;\n  --pg-colors-text-primary: #0f172a;\n  --pg-colors-text-secondary: #64748b;\n  --pg-colors-text-muted: #94a3b8;\n  --pg-colors-text-disabled: #cbd5e1;\n  --pg-colors-primary: #2563eb;\n  --pg-colors-filter-background: #ffffff;\n  --pg-colors-scrollbar-bg: #f8fafc;\n  --pg-colors-badge-background: #dbeafe;\n  --pg-colors-badge-text: #1e40af;\n\n  --pg-typography-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --pg-typography-font-size-md: 0.8rem;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0.06em;\n\n  --pg-header-row-height: 40px;\n  --pg-row-height: 44px;\n  --pg-borders-radius-md: 6px;\n  --pg-borders-radius-sm: 4px;\n  --pg-borders-radius-pill: 9999px;\n  --pg-transitions-duration-fast: 150ms;\n  --pg-sizing-checkbox-size: 16px;\n  --pg-colors-resize-handle-color: #ddddde;\n}\n\n/* Quartz header \u2014 title case, semi-bold */\n.pg-quartz-theme .pg-th {\n  text-transform: capitalize;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0;\n  color: #475569;\n}\n// .pg-quartz-theme .pg-th--sorted { color: #2563eb; }\n\n/* Quartz row \u2014 bottom divider uses the theme border color */\n.pg-quartz-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Quartz icon tones */\n.pg-quartz-theme .pg-icon { color: #64748b; }\n.pg-quartz-theme .pg-th--sorted .pg-icon { color: #2563eb; }\n.pg-quartz-theme .pg-row-drag-handle { color: #94a3b8; }\n.pg-quartz-theme .pg-th--no-group { background-color: #f8fafc; }\n\n/* Quartz checkbox \u2014 16px, 4px-radius square, solid blue on check */\n.pg-quartz-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #cbd5e1;\n  border-radius: 4px;\n  background: #fff;\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;\n}\n.pg-quartz-theme .pg-checkbox:hover { border-color: #2563eb; }\n.pg-quartz-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(37,99,235,0.25);\n}\n.pg-quartz-theme .pg-checkbox:checked {\n  background: #2563eb;\n  border-color: #2563eb;\n}\n.pg-quartz-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 4px;\n  top: 1px;\n  width: 5px;\n  height: 9px;\n  border: 2px solid #fff;\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-quartz-theme .pg-checkbox:indeterminate {\n  background: #2563eb;\n  border-color: #2563eb;\n}\n.pg-quartz-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 8px;\n  height: 2px;\n  background: #fff;\n  transform: translateY(-50%);\n}\n\n/* Quartz row selection highlight \u2014 blue left bar */\n.pg-quartz-theme .pg-row--selected { box-shadow: inset 3px 0 0 #2563eb; }\n\n/* Quartz row-drag animation \u2014 smooth cubic-bezier */\n.pg-quartz-theme .pg-grid--row-dragging .pg-row {\n  transition: background 150ms ease, top 130ms cubic-bezier(0.2, 0, 0, 1);\n}\n";
+/**
+ * pg-quartz-theme — clean, modern (blue accent).
+ *
+ * A cosmetic *variant* layered on top of the active color mode (light/dark).
+ * It only overrides structural / appearance concerns — density, radii,
+ * typography, accent color, checkbox shape, motion, and the distinctive quartz
+ * "chrome" tint. All base surface, text and border colors are inherited from
+ * the mode tokens (`var(--pg-colors-*)`), so this variant renders correctly in
+ * both light and dark.
+ *
+ * The container carries the `.pg-quartz-theme` class; `.pg-grid` is its child,
+ * hence the descendant selectors below.
+ */
+export declare const themeQuartzCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-quartz-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-quartz-theme .pg-grid {\n  /* Accent identity \u2014 drives sorted headers, selection, checkboxes, links. */\n  --pg-colors-primary: #2563eb;\n\n  /* Quartz \"chrome\" surface \u2014 the flat tint shared by every non-data surface\n     (header, footer/pagination, top grouping row, scrollbars, serial-number\n     column). Derived from the mode's alt background so it tints correctly in\n     both light and dark; defined once here so the look changes in one place. */\n  --pg-quartz-chrome-background: var(--pg-colors-background-alt);\n  --pg-colors-header-background: var(--pg-quartz-chrome-background);\n  --pg-colors-filter-background: var(--pg-quartz-chrome-background);\n  --pg-colors-footer-background: var(--pg-quartz-chrome-background);\n  --pg-colors-scrollbar-bg: var(--pg-quartz-chrome-background);\n  --pg-colors-scrollbar-track: var(--pg-quartz-chrome-background);\n\n  /* Typography identity */\n  --pg-typography-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --pg-typography-font-size-md: 0.8rem;\n  --pg-typography-font-size-sm: 12px;\n  --pg-typography-font-size-xs: 11px;\n  --pg-typography-font-weight-medium: 400;\n  --pg-typography-font-weight-semi-bold: 600;\n  --pg-typography-letter-spacing-wide: 0.06em;\n\n  /* Density */\n  --pg-header-row-height: 40px;\n  --pg-row-height: 44px;\n\n  /* Shape */\n  --pg-borders-radius-md: 6px;\n  --pg-borders-radius-sm: 4px;\n  --pg-borders-radius-pill: 9999px;\n  --pg-sizing-checkbox-size: 16px;\n\n  /* Motion */\n  --pg-transitions-duration-fast: 150ms;\n}\n\n/* Quartz header \u2014 capitalized, semi-bold; color follows the mode. */\n.pg-quartz-theme .pg-th {\n  text-transform: capitalize;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0;\n  color: var(--pg-colors-header-text);\n}\n\n/* Quartz row \u2014 bottom divider uses the mode border color */\n.pg-quartz-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Quartz icon tones \u2014 mode-aware */\n.pg-quartz-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-quartz-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-quartz-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n.pg-quartz-theme .pg-th--no-group { background: var(--pg-quartz-chrome-background); }\n\n/* Quartz checkbox \u2014 16px, 4px-radius square, solid accent on check */\n.pg-quartz-theme .pg-checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--pg-colors-checkbox-border);\n  border-radius: 4px;\n  background: var(--pg-colors-checkbox-background);\n  cursor: pointer;\n  position: relative;\n  flex-shrink: 0;\n  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;\n}\n.pg-quartz-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-quartz-theme .pg-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-colors-primary) 25%, transparent);\n}\n.pg-quartz-theme .pg-checkbox:checked {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-quartz-theme .pg-checkbox:checked::after {\n  content: '';\n  position: absolute;\n  left: 4px;\n  top: 1px;\n  width: 5px;\n  height: 9px;\n  border: 2px solid var(--pg-colors-primary-text);\n  border-top: none;\n  border-left: none;\n  transform: rotate(45deg);\n}\n.pg-quartz-theme .pg-checkbox:indeterminate {\n  background: var(--pg-colors-primary);\n  border-color: var(--pg-colors-primary);\n}\n.pg-quartz-theme .pg-checkbox:indeterminate::after {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  width: 8px;\n  height: 2px;\n  background: var(--pg-colors-primary-text);\n  transform: translateY(-50%);\n}\n\n/* Quartz row selection highlight \u2014 accent left bar */\n// .pg-quartz-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }\n\n/* Quartz row-drag animation \u2014 smooth cubic-bezier */\n.pg-quartz-theme .pg-grid--row-dragging .pg-row {\n  transition: background 150ms ease, top 130ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Quartz chrome tint \u2014 serial (row number) column \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Header, filter and body cells of the serial column share the chrome surface\n   so the number gutter reads as grid chrome rather than data. (Scrollbars and\n   the header/footer/grouping surfaces are driven by the tokens above.) */\n.pg-quartz-theme .pg-th--serial,\n.pg-quartz-theme .pg-filter-cell--serial,\n.pg-quartz-theme .pg-cell--serial {\n  background: var(--pg-quartz-chrome-background);\n}\n";
 //# sourceMappingURL=theme-quartz.d.ts.map

package/styles/themes/theme-quartz.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-quartz.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-quartz.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,stHAqH1B,CAAC"}
+{"version":3,"file":"theme-quartz.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-quartz.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,y2JA8H1B,CAAC"}