CS01 CSS Variables
Override colors, headers, and cells with 100+ CSS custom properties
Live Demo
Custom purple theme applied via CSS variables.
Code
Key Variables
Color Variables
--wg-accent-color - Primary accent
--wg-text-color-1 - Primary text
--wg-surface-1 - Background
Header Variables
--wg-header-bg
--wg-header-color
--wg-header-border
Cell Variables
--wg-cell-padding
--wg-cell-border
--wg-row-bg-hover
CS02 Theme Integration
Integrate with @keenmate/theme-designer via --base-* variable fallbacks
Explanation
Web Grid integrates with the @keenmate/theme-designer system through --base-* CSS variables.
When you set base variables on :root, all KeenMate components (web-grid, web-multiselect, etc.) automatically use them.
Each --wg-* variable falls back to a corresponding --base-* variable, then to a hardcoded default.
Code
Base Variables
Supported Base Variables
Colors:
--base-accent-color
--base-text-color-1
--base-surface-1
--base-border-color
Typography:
--base-font-family
--base-font-size-base
CS03 CSS Variables Manifest
Machine-readable JSON manifest of all 155 CSS variables with categories
What's Included
The package includes a machine-readable manifest documenting all 155 CSS variables:
- 34 base variables -
--base-*consumed from theme layer - 121 component variables -
--wg-*with category and usage
Each variable includes its category and a description of what it controls in the UI.
Code
Use Cases
Theme Designer
Build UI for customizing all variables
Documentation
Generate variable reference docs
Validation
Verify theme completeness
Tooling
IDE autocomplete, linting
CS04 Dynamic Cell Styling
Style cells and rows dynamically with cellClassCallback and rowClassCallback
Methods
Styling Options
cellClassCallback- Per-cell CSS classesrowClassCallback- Per-row CSS classescustomStylesCallback- Inject CSS into shadow DOM
Use these for conditional formatting like heatmaps, status indicators, or highlighting.
Code
Callbacks
cellClassCallback
Return CSS class name based on cell value and row.
rowClassCallback
Return CSS class for entire row.
customStylesCallback
Return CSS string to inject. Useful for defining the classes used by callbacks.
CS05 Global Scaling
Scale entire grid proportionally with --wg-rem base unit
How It Works
All sizes in web-grid are based on --wg-rem (default: 10px). This enables proportional scaling of the entire grid.
Font sizes, spacing, button sizes, and icons all scale together when you change this single variable.
The 10px base was chosen for clean math: 10 × 1.4 = 14px (no rounding errors).
Code
Benefits
Proportional Scaling
All sizes use calc(N × var(--wg-rem))
Clean Pixel Values
10px base avoids fractional pixels
Theme Designer
Pure Admin sets html { font-size: 10px } so 1rem = 10px
CS06 Labels / i18n
Translate pagination and UI labels with i18n placeholder syntax
Live Demo
Grid with Czech translations. Navigate pagination to see translated labels.
Code
Available Labels
UI Labels
rowActions - Toolbar trigger tooltip
inlineActionsHeader - Inline actions column header
keyboardShortcuts - Shortcuts help title
Pagination Labels
paginationFirst
paginationPrevious
paginationNext
paginationLast
paginationPageInfo
paginationItemCount
paginationPerPage
CSS Variables Reference
Colors
--wg-accent-color | Primary accent |
--wg-text-color-1 | Primary text |
--wg-text-color-2 | Secondary text |
--wg-surface-1 | Background |
--wg-surface-2 | Alternate background |
--wg-border-color | Borders |
--wg-danger-color | Error/danger |
Sizing
--wg-rem | Base unit (default: 10px) |
--wg-spacing-* | Spacing (xs, sm, md, lg, xl) |
--wg-font-size-* | Font sizes |
--wg-border-radius-* | Border radii |
Components
--wg-header-* | Header styling |
--wg-cell-* | Cell styling |
--wg-row-* | Row styling |
--wg-pagination-* | Pagination |
--wg-toolbar-* | Row toolbar |
--wg-editor-* | Editor/input styling |
--wg-focus-* | Focus states |