# GridCSSVar

> _Since v0.1.1_

CSS custom property names for theming.
Use these when programmatically setting styles.

Union of all CSS custom property names (`--tbw-*`) available for theming.
Use `GridCSSVars` to access individual values by key.

```ts
type GridCSSVar = typeof GridCSSVars[keyof typeof GridCSSVars]
```

## Runtime Values

Use `GridCSSVars` to reference these values from runtime code:

```ts
const GridCSSVars = {
  COLOR_BG: '--tbw-color-bg',
  COLOR_FG: '--tbw-color-fg',
  COLOR_FG_MUTED: '--tbw-color-fg-muted',
  COLOR_BORDER: '--tbw-color-border',
  COLOR_ACCENT: '--tbw-color-accent',
  COLOR_HEADER_BG: '--tbw-color-header-bg',
  COLOR_HEADER_FG: '--tbw-color-header-fg',
  COLOR_SELECTION: '--tbw-color-selection',
  COLOR_ROW_HOVER: '--tbw-color-row-hover',
  COLOR_ROW_ALT: '--tbw-color-row-alt',
  ROW_HEIGHT: '--tbw-row-height',
  HEADER_HEIGHT: '--tbw-header-height',
  CELL_PADDING: '--tbw-cell-padding',
  FONT_FAMILY: '--tbw-font-family',
  FONT_SIZE: '--tbw-font-size',
  BORDER_RADIUS: '--tbw-border-radius',
  FOCUS_OUTLINE: '--tbw-focus-outline',
} as const;
```

| Key | Value |
| --- | ----- |
| `COLOR_BG` | `'--tbw-color-bg'` |
| `COLOR_FG` | `'--tbw-color-fg'` |
| `COLOR_FG_MUTED` | `'--tbw-color-fg-muted'` |
| `COLOR_BORDER` | `'--tbw-color-border'` |
| `COLOR_ACCENT` | `'--tbw-color-accent'` |
| `COLOR_HEADER_BG` | `'--tbw-color-header-bg'` |
| `COLOR_HEADER_FG` | `'--tbw-color-header-fg'` |
| `COLOR_SELECTION` | `'--tbw-color-selection'` |
| `COLOR_ROW_HOVER` | `'--tbw-color-row-hover'` |
| `COLOR_ROW_ALT` | `'--tbw-color-row-alt'` |
| `ROW_HEIGHT` | `'--tbw-row-height'` |
| `HEADER_HEIGHT` | `'--tbw-header-height'` |
| `CELL_PADDING` | `'--tbw-cell-padding'` |
| `FONT_FAMILY` | `'--tbw-font-family'` |
| `FONT_SIZE` | `'--tbw-font-size'` |
| `BORDER_RADIUS` | `'--tbw-border-radius'` |
| `FOCUS_OUTLINE` | `'--tbw-focus-outline'` |