photon-grid-core 2.0.1 → 2.0.5

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,7 +109,7 @@ export const themeMaterialCss = `
   top: 50%;
   width: 10px;
   height: 2px;
-  background: #fff;
+  background: var(--pg-colors-primary-text);
   transform: translateY(-50%);
 }
 

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-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,gyJA6H1B,CAAC"}

package/styles/themes/theme-quartz.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"theme-quartz.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-quartz.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH7B,CAAC"}
+{"version":3,"file":"theme-quartz.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-quartz.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6H7B,CAAC"}

package/theme/theme-manager.d.ts

@@ -1,20 +1,68 @@
-import type { Theme, BuiltInThemeName } from '../types/theme.types';
+import type { Theme, BuiltInThemeName, ThemeMode, ThemeVariant } from '../types/theme.types';
 import type { EventBus } from '../event-bus/event-bus';
+/**
+ * Coordinates the two independent theming axes:
+ *
+ * 1. **Mode** (`light` / `dark`) — the full color palette, injected as design
+ *    tokens (CSS custom properties) scoped to the grid's container element.
+ * 2. **Variant** (`quartz` / `alpine` / …) — a cosmetic skin applied as a CSS
+ *    class on that same container. Variant stylesheets only override structural
+ *    and accent concerns, so any variant composes with either mode.
+ *
+ * Mode tokens are additionally mirrored onto `:root` so fixed/portal elements
+ * (menus, dropdowns, overlays appended to `<body>`) inherit the palette.
+ */
 export declare class ThemeManager {
-    private eventBus;
-    private injector;
-    private rootInjector;
-    private registry;
-    private activeTheme;
+    private readonly eventBus;
+    /** Per-instance stylesheet carrying the active mode's tokens. */
+    private readonly injector;
+    /** Mirrors mode tokens onto `:root` for portaled elements. */
+    private readonly rootInjector;
+    private readonly registry;
+    private activeMode;
+    private activeVariant;
     private scopeEl;
+    /** Monotonic source for unique per-instance scope ids. */
+    private static scopeSeq;
     constructor(eventBus: EventBus);
+    /** Register (or replace) a mode theme so it can be resolved by name. */
     registerTheme(theme: Theme): void;
+    /**
+     * Apply a color mode (light/dark) by injecting its tokens. Colors cascade
+     * from the container down to every cell; the same tokens are mirrored to
+     * `:root` for portaled UI. Does not touch the active variant.
+     */
+    applyMode(modeOrTheme: ThemeMode | Theme, scopeEl?: HTMLElement): void;
+    /**
+     * Apply (or clear) the cosmetic variant skin. Swaps the `pg-<variant>-theme`
+     * class on the scope container; passing `'none'` removes any active variant.
+     */
+    applyVariant(variant: ThemeVariant | 'none', scopeEl?: HTMLElement): void;
+    /**
+     * Backward-compatible entry point for the deprecated `theme` option / API.
+     * Normalizes a legacy value (e.g. `'dark'`, `'quartz'`, `'pg-quartz-theme'`,
+     * `'quartz-dark'`) onto the mode/variant axes and applies it.
+     *
+     * @deprecated Prefer {@link applyMode} + {@link applyVariant}.
+     */
     applyTheme(nameOrTheme: BuiltInThemeName | string | Theme, scopeEl?: HTMLElement): void;
-    getActiveTheme(): Theme | null;
+    /** The active mode theme (light/dark). Never null after construction. */
+    getActiveTheme(): Theme;
+    /** The active mode as a plain string. */
+    getActiveMode(): ThemeMode;
+    /** The active variant, or `'none'` when no skin is applied. */
+    getActiveVariant(): ThemeVariant | 'none';
     getTheme(name: string): Theme | undefined;
     getAllThemes(): Theme[];
+    /** Toggle between light and dark mode, preserving the active variant. */
     toggleDarkMode(): void;
     isDarkMode(): boolean;
     destroy(): void;
+    /** Resolve a mode name or Theme object to a concrete light/dark Theme. */
+    private resolveModeTheme;
+    /** Ensure the scope element carries a stable id used to target its tokens. */
+    private ensureScopeId;
+    /** Map a legacy `theme` string onto the mode/variant axes. */
+    private static parseLegacyTheme;
 }
 //# sourceMappingURL=theme-manager.d.ts.map

package/theme/theme-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-manager.d.ts","sourceRoot":"","sources":["../../src/theme/theme-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAMvD,qBAAa,YAAY;IASX,OAAO,CAAC,QAAQ;IAR5B,OAAO,CAAC,QAAQ,CAAwB;IAGxC,OAAO,CAAC,YAAY,CAAwB;IAC5C,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,WAAW,CAAsB;IACzC,OAAO,CAAC,OAAO,CAA4B;gBAEvB,QAAQ,EAAE,QAAQ;IAKtC,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAIjC,UAAU,CACR,WAAW,EAAE,gBAAgB,GAAG,MAAM,GAAG,KAAK,EAC9C,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI;IAoCP,cAAc,IAAI,KAAK,GAAG,IAAI;IAI9B,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS;IAIzC,YAAY,IAAI,KAAK,EAAE;IAIvB,cAAc,IAAI,IAAI;IAQtB,UAAU,IAAI,OAAO;IAIrB,OAAO,IAAI,IAAI;CAKhB"}
+{"version":3,"file":"theme-manager.d.ts","sourceRoot":"","sources":["../../src/theme/theme-manager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE7F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAoBvD;;;;;;;;;;;GAWG;AACH,qBAAa,YAAY;IAcX,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAbrC,iEAAiE;IACjE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAwB;IACjD,8DAA8D;IAC9D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAwB;IACrD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA4B;IAErD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,OAAO,CAA4B;IAE3C,0DAA0D;IAC1D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;gBAEC,QAAQ,EAAE,QAAQ;IAM/C,wEAAwE;IACxE,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAIjC;;;;OAIG;IACH,SAAS,CAAC,WAAW,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI;IA2BtE;;;OAGG;IACH,YAAY,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI;IAkBzE;;;;;;OAMG;IACH,UAAU,CAAC,WAAW,EAAE,gBAAgB,GAAG,MAAM,GAAG,KAAK,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI;IAmBvF,yEAAyE;IACzE,cAAc,IAAI,KAAK;IAIvB,yCAAyC;IACzC,aAAa,IAAI,SAAS;IAI1B,+DAA+D;IAC/D,gBAAgB,IAAI,YAAY,GAAG,MAAM;IAIzC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS;IAIzC,YAAY,IAAI,KAAK,EAAE;IAIvB,yEAAyE;IACzE,cAAc,IAAI,IAAI;IAItB,UAAU,IAAI,OAAO;IAIrB,OAAO,IAAI,IAAI;IAOf,0EAA0E;IAC1E,OAAO,CAAC,gBAAgB;IAKxB,8EAA8E;IAC9E,OAAO,CAAC,aAAa;IASrB,8DAA8D;IAC9D,OAAO,CAAC,MAAM,CAAC,gBAAgB;CAuBhC"}