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.

type GridCSSVar = typeof GridCSSVars[keyof typeof GridCSSVars]

Runtime Values

Use GridCSSVars to reference these values from runtime code:

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'