/** * `pg-ion-theme` — **crisp enterprise**. * * The register of a dense internal tool: a tinted chrome gutter separating * structure from data, hairline rules on every axis, an electric-blue accent * that only ever marks state, and 6px radii. Nothing decorative — the grid * should read as an instrument. * * ## How a variant is built * * A variant is a *cosmetic skin* layered over the active colour mode, so it must * be **mode-agnostic**: every colour below either resolves a mode token * (`var(--pg-colors-*)`) or is `color-mix`ed against one, and the same rules * therefore produce a correct light and dark rendering. The accent hue is the * only literal, and it is re-derived into the accent ramp so every tint, state * layer and focus ring moves with it. * * Two selector roots are in play, and the difference matters: * * - `.pg-ion-theme .pg-…` — scoped to the grid container. Correct per instance, * so two grids on one page can wear different skins. * - `[data-pg-variant="ion"] .pg-…` — matches from the document root. Required * for context menus, dropdown panels, the column chooser and toasts, which are * portaled to `` and are therefore *outside* the container. Without it, * overlays keep the unskinned base look. * * Body row height is deliberately absent: rows are positioned with inline * `top`/`height`, so density comes from `THEME_VARIANT_ROW_HEIGHT` in * `types/theme.types.ts`. Header height is CSS-driven and does live here. */ export declare const themeIonCss = "\n\n/* \u2500\u2500 Tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-grid,\n[data-pg-variant=\"ion\"] .pg-context-menu,\n[data-pg-variant=\"ion\"] .pg-column-context-menu,\n[data-pg-variant=\"ion\"] .pg-col-chooser__overlay,\n[data-pg-variant=\"ion\"] .pg-dropdown-editor__panel,\n[data-pg-variant=\"ion\"] .pg-toast-layer {\n /* Accent identity. The ramp is derived from one hue, so re-pitching the theme\n is a single-line change rather than a search across every component rule. */\n --pg-colors-primary: #2563eb;\n --pg-colors-primary-hover: #1d4ed8;\n --pg-colors-primary-active: #1e40af;\n --pg-colors-primary-subtle: color-mix(in srgb, #2563eb 7%, transparent);\n --pg-colors-primary-subtle-hover: color-mix(in srgb, #2563eb 12%, transparent);\n --pg-colors-primary-soft: color-mix(in srgb, #2563eb 18%, transparent);\n\n /* The \"chrome\" surface: one tint shared by every non-data region \u2014 header,\n filter row, footer, scrollbars, grouping bar and the serial gutter. Defined\n once so the structure/data boundary can be re-pitched from a single line. */\n --pg-ion-chrome: var(--pg-colors-background-alt);\n --pg-colors-header-background: var(--pg-ion-chrome);\n --pg-colors-filter-background: var(--pg-ion-chrome);\n --pg-colors-footer-background: var(--pg-ion-chrome);\n --pg-colors-scrollbar-bg: var(--pg-ion-chrome);\n --pg-colors-scrollbar-track: var(--pg-ion-chrome);\n --pg-colors-group-row-background: var(--pg-ion-chrome);\n --pg-colors-group-footer-background: var(--pg-ion-chrome);\n\n --pg-colors-row-hover: var(--pg-colors-primary-subtle);\n --pg-colors-row-selected: var(--pg-colors-primary-subtle-hover);\n --pg-colors-chip-background: var(--pg-colors-primary-soft);\n --pg-colors-chip-text: var(--pg-colors-primary);\n --pg-colors-group-zone-over: var(--pg-colors-primary-subtle);\n\n /* Typography \u2014 system UI, tight sizes, no tracking games. */\n --pg-typography-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --pg-typography-font-size-md: 13px;\n --pg-typography-font-size-sm: 12px;\n --pg-typography-font-size-xs: 11px;\n --pg-typography-header-font-weight: 600;\n --pg-typography-letter-spacing-wide: 0.01em;\n\n --pg-header-row-height: 40px;\n\n --pg-borders-radius-lg: 8px;\n --pg-borders-radius-md: 6px;\n --pg-borders-radius-sm: 4px;\n --pg-borders-radius-pill: 9999px;\n --pg-borders-width-focus: 3px;\n --pg-sizing-checkbox-size: 16px;\n\n --pg-transitions-duration-fast: 130ms;\n --pg-transitions-duration-base: 160ms;\n\n /* Chart palette \u2014 a cool, evenly-spaced sequence that holds its ordering in\n both modes. Read at runtime by resolveChartTheme(). */\n --pg-chart-series-1: #2563eb;\n --pg-chart-series-2: #0891b2;\n --pg-chart-series-3: #7c3aed;\n --pg-chart-series-4: #0d9488;\n --pg-chart-series-5: #db2777;\n --pg-chart-series-6: #ca8a04;\n}\n\n/* \u2500\u2500 Shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-grid {\n border: 1px solid var(--pg-colors-border);\n border-radius: var(--pg-borders-radius-lg);\n overflow: hidden;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-th {\n text-transform: capitalize;\n font-size: 13px;\n font-weight: var(--pg-typography-header-font-weight);\n letter-spacing: 0;\n color: var(--pg-colors-header-text);\n}\n\n.pg-ion-theme .pg-grid__header {\n border-bottom: 1px solid var(--pg-colors-header-border);\n}\n\n/* A sorted column is marked on the cell, not only its icon \u2014 at a glance the\n whole column reads as active. */\n.pg-ion-theme .pg-th--sorted {\n color: var(--pg-colors-primary);\n background: var(--pg-colors-primary-subtle);\n}\n\n.pg-ion-theme .pg-th--sortable:hover {\n background: var(--pg-colors-header-hover);\n}\n\n/* \u2500\u2500 Rows and cells \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-row {\n border-bottom: 1px solid var(--pg-colors-border);\n}\n\n/* Selection is a 2px accent rail over the row wash: legible instantly without\n fighting the row's own background, and it survives alternate-row shading. */\n.pg-ion-theme .pg-row--selected {\n box-shadow: inset 2px 0 0 var(--pg-colors-primary);\n}\n\n/* The number gutter reads as chrome rather than data. */\n.pg-ion-theme .pg-cell--serial,\n.pg-ion-theme .pg-th--serial,\n.pg-ion-theme .pg-filter-cell--serial,\n.pg-ion-theme .pg-th--no-group {\n background: var(--pg-ion-chrome);\n}\n\n/* \u2500\u2500 Focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-th:focus-visible,\n.pg-ion-theme .pg-cell:focus-visible,\n.pg-ion-theme .pg-pagination__btn:focus-visible {\n outline: none;\n box-shadow: 0 0 0 var(--pg-borders-width-focus)\n color-mix(in srgb, var(--pg-colors-primary) 25%, transparent);\n}\n\n/* \u2500\u2500 Checkbox \u2014 4px square, solid accent on check \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: var(--pg-sizing-checkbox-size);\n height: var(--pg-sizing-checkbox-size);\n border: 2px solid var(--pg-colors-checkbox-border);\n border-radius: var(--pg-borders-radius-sm);\n background: var(--pg-colors-checkbox-background);\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition:\n background var(--pg-transitions-duration-fast) ease,\n border-color var(--pg-transitions-duration-fast) ease,\n box-shadow var(--pg-transitions-duration-fast) ease;\n}\n.pg-ion-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-ion-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-ion-theme .pg-checkbox:checked,\n.pg-ion-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-ion-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-on-primary);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-ion-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-on-primary);\n transform: translateY(-50%);\n}\n\n/* \u2500\u2500 Grouping bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-group-drop-zone {\n background: var(--pg-ion-chrome);\n border-bottom: 1px solid var(--pg-colors-border);\n}\n\n.pg-ion-theme .pg-group-chip {\n background: var(--pg-colors-chip-background);\n color: var(--pg-colors-chip-text);\n border-radius: var(--pg-borders-radius-pill);\n border: 1px solid color-mix(in srgb, var(--pg-colors-primary) 28%, transparent);\n font-weight: 500;\n}\n\n/* \u2500\u2500 Footer / pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-grid__footer {\n border-top: 1px solid var(--pg-colors-footer-border);\n}\n\n.pg-ion-theme .pg-pagination__btn {\n border-radius: var(--pg-borders-radius-sm);\n transition: background var(--pg-transitions-duration-fast) ease;\n}\n.pg-ion-theme .pg-pagination__btn:hover:not(:disabled) {\n background: var(--pg-colors-primary-subtle);\n color: var(--pg-colors-primary);\n}\n\n/* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-ion-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-ion-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* \u2500\u2500 Overlays \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Portaled to , so these are rooted at [data-pg-variant] rather than at\n the container class \u2014 see the module doc. Without this block the menus keep\n the base look while the grid behind them is skinned. */\n\n[data-pg-variant=\"ion\"] .pg-context-menu,\n[data-pg-variant=\"ion\"] .pg-column-context-menu,\n[data-pg-variant=\"ion\"] .pg-dropdown-editor__panel {\n border-radius: var(--pg-borders-radius-md);\n border: 1px solid var(--pg-colors-border-ctxt-menu);\n box-shadow: var(--pg-shadows-dropdown);\n}\n\n[data-pg-variant=\"ion\"] .pg-context-menu__item,\n[data-pg-variant=\"ion\"] .pg-col-ctx-menu__item {\n border-radius: var(--pg-borders-radius-sm);\n margin: 0 4px;\n}\n[data-pg-variant=\"ion\"] .pg-context-menu__item:hover,\n[data-pg-variant=\"ion\"] .pg-col-ctx-menu__item:hover {\n background: var(--pg-colors-primary-subtle);\n color: var(--pg-colors-primary);\n}\n\n[data-pg-variant=\"ion\"] .pg-toast {\n border-radius: var(--pg-borders-radius-md);\n}\n\n/* \u2500\u2500 Motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pg-ion-theme .pg-grid--row-dragging .pg-row {\n transition:\n background var(--pg-transitions-duration-fast) ease,\n top 130ms cubic-bezier(0.2, 0, 0, 1);\n}\n"; //# sourceMappingURL=theme-ion.d.ts.map