# @affino/datagrid-theme

Theme tokens, presets, and utilities for Affino DataGrid.

## What belongs here

- `DataGridThemeTokens`
- preset style configs such as `defaultStyleConfig`, `industrialNeutralTheme`, and `sugarTheme`
- token helpers such as `applyGridTheme`, `resolveGridThemeTokens`, and `mergeThemeTokens`

## What does not belong here

- grid runtime logic
- renderer-specific DOM or canvas layout code
- sandbox-only legacy table CSS

## Styling direction

The preferred styling path is token-driven theming through `DataGridStyleConfig.tokens` and `tokenVariants`.

The built-in presets are intentionally distinct and each ships `light` and `dark` token variants:

- `defaultStyleConfig`: strict neutral baseline with white/gray surfaces, Arial-style typography, and a small blue interaction accent.
- `industrialNeutralTheme`: compact engineering preset with monospace typography, stronger grid lines, steel surfaces, and cyan operational accents.
- `sugarTheme`: warmer expressive preset with soft rose surfaces and a pink/violet accent system.

All presets set `inheritThemeFromDocument: true`; `resolveGridThemeTokens()` will select the `dark` variant when `document.documentElement` has `data-theme="dark"` or the configured dark class. Provide `activeTokenVariant` only when you need to force a specific variant.

`DataGridStyleConfig` is token-only. Class-slot styling hooks were removed; renderer-owned class names remain internal implementation details.

## CSS assets

- `datagrid-demo.css` is a demo-only stylesheet asset kept for legacy/demo use.
- Modern Vue app rendering should rely on token application plus renderer-owned styles instead of this demo stylesheet.