95 lines
6.2 KiB
TypeScript
95 lines
6.2 KiB
TypeScript
import { themeQuartz, colorSchemeVariable } from 'ag-grid-community';
|
|
|
|
/**
|
|
* AG Grid theme built on **Quartz** that inherits 100% of its visual
|
|
* identity from Mantine CSS custom properties.
|
|
*
|
|
* ┌─────────────────────────────────────────────────────────────────┐
|
|
* │ DESIGN PRINCIPLE — "Single door" theming │
|
|
* │ │
|
|
* │ Every color, font, radius and spacing value below is a │
|
|
* │ `var(--mantine-*)` reference, never a hardcoded hex/rgb. │
|
|
* │ Changing the Mantine theme (brand color, dark palette, font) │
|
|
* │ automatically propagates into AG Grid with zero extra work. │
|
|
* └─────────────────────────────────────────────────────────────────┘
|
|
*
|
|
* How dark/light mode works:
|
|
* - `colorSchemeVariable` reads the `data-ag-theme-mode` attribute
|
|
* from a parent element (set by `<AgGridProvider>`).
|
|
* - Light-mode params are the defaults; dark-mode overrides are
|
|
* passed via `.withParams({…}, 'dark')`.
|
|
* - Mantine itself swaps the values behind `--mantine-color-body`,
|
|
* `--mantine-color-text`, etc., so the grid follows automatically.
|
|
*/
|
|
export const agGridMantineTheme = themeQuartz
|
|
.withPart(colorSchemeVariable)
|
|
|
|
/* ═══════════════════════════════════════════════════════════════
|
|
* LIGHT MODE (default)
|
|
* ═══════════════════════════════════════════════════════════════ */
|
|
.withParams({
|
|
/* ── Typography ─────────────────────────────────────────────── */
|
|
fontFamily: 'var(--mantine-font-family)',
|
|
fontSize: 'var(--mantine-font-size-md)',
|
|
|
|
/* ── Accent / Brand ─────────────────────────────────────────── */
|
|
accentColor: 'var(--mantine-primary-color-filled)',
|
|
|
|
/* ── Base Surfaces ──────────────────────────────────────────── */
|
|
backgroundColor: 'var(--mantine-color-body)',
|
|
foregroundColor: 'var(--mantine-color-text)',
|
|
textColor: 'var(--mantine-color-text)',
|
|
chromeBackgroundColor: 'var(--mantine-color-default-element-bg)',
|
|
|
|
/* ── Borders ────────────────────────────────────────────────── */
|
|
borderColor: 'var(--mantine-color-default-border)',
|
|
|
|
/* ── Header ─────────────────────────────────────────────────── */
|
|
headerBackgroundColor: 'var(--mantine-color-default-element-bg)',
|
|
headerTextColor: 'var(--mantine-color-text)',
|
|
headerFontFamily: 'var(--mantine-font-family)',
|
|
headerFontWeight: 600,
|
|
|
|
/* ── Row Styling ────────────────────────────────────────────── */
|
|
oddRowBackgroundColor: 'var(--mantine-color-default-hover)',
|
|
rowHoverColor: 'var(--mantine-primary-color-light)',
|
|
selectedRowBackgroundColor: 'var(--mantine-primary-color-light)',
|
|
|
|
/* ── Radius ─────────────────────────────────────────────────── */
|
|
borderRadius: 'var(--mantine-radius-sm)',
|
|
wrapperBorderRadius: 'var(--mantine-radius-sm)',
|
|
|
|
/* ── Spacing ────────────────────────────────────────────────── */
|
|
spacing: 'var(--mantine-spacing-sm)',
|
|
})
|
|
|
|
/* ═══════════════════════════════════════════════════════════════
|
|
* DARK MODE overrides
|
|
*
|
|
* Only the values that differ from light mode need to be listed.
|
|
* Most `--mantine-color-*` vars already swap values in dark mode,
|
|
* but surface/border vars often need explicit dark palette refs.
|
|
* ═══════════════════════════════════════════════════════════════ */
|
|
.withParams(
|
|
{
|
|
/* ── Base Surfaces ────────────────────────────────────────── */
|
|
backgroundColor: 'var(--mantine-color-dark-7)',
|
|
foregroundColor: 'var(--mantine-color-dark-0)',
|
|
textColor: 'var(--mantine-color-dark-0)',
|
|
chromeBackgroundColor: 'var(--mantine-color-dark-6)',
|
|
|
|
/* ── Borders ──────────────────────────────────────────────── */
|
|
borderColor: 'var(--mantine-color-dark-4)',
|
|
|
|
/* ── Header ───────────────────────────────────────────────── */
|
|
headerBackgroundColor: 'var(--mantine-color-dark-6)',
|
|
headerTextColor: 'var(--mantine-color-dark-0)',
|
|
|
|
/* ── Row Styling ──────────────────────────────────────────── */
|
|
oddRowBackgroundColor: 'var(--mantine-color-dark-6)',
|
|
rowHoverColor: 'color-mix(in srgb, var(--mantine-primary-color-filled) 12%, transparent)',
|
|
selectedRowBackgroundColor: 'color-mix(in srgb, var(--mantine-primary-color-filled) 18%, transparent)',
|
|
},
|
|
'dark',
|
|
);
|