Skip to content

fix(react-ui): stop false "unknown key" warnings for valid *ChartPalette theme keys#721

Open
ankit-thesys wants to merge 1 commit into
mainfrom
ankit/fix-theme-chart-palette-unknown-key-warnings
Open

fix(react-ui): stop false "unknown key" warnings for valid *ChartPalette theme keys#721
ankit-thesys wants to merge 1 commit into
mainfrom
ankit/fix-theme-chart-palette-unknown-key-warnings

Conversation

@ankit-thesys

@ankit-thesys ankit-thesys commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Fixes #714

Background

Theming charts the typed way — createTheme({ defaultChartPalette: [...] }) passed to ThemeProvider's lightTheme/darkTheme — compiles cleanly but printed dev-console warnings on every boot, twice per palette key:

[OpenUI] Unknown theme key "defaultChartPalette".
[OpenUI] darkTheme contains unknown key "defaultChartPalette". It will be ignored. Use createTheme() for typo detection with suggestions.

The Theme type declares eight *ChartPalette keys (default/bar/line/area/pie/radar/radial/horizontalBar), but both validators derived their allow-list from Object.keys(defaultLightTheme) (ThemeProvider.tsx:112, utils.ts:70), and the default themes define none of those keys — so every valid palette key tripped "unknown key". A runtime probe through the real ThemeProvider → useTheme() → useChartPalette chain showed the warning text was wrong: the theme merge spreads user overrides wholesale, so the palettes were never ignored — charts applied them all along, including the fallback to defaultChartPalette for unset chart types. Dev-only noise, but convincing enough that a downstream consumer abandoned theme-level palettes for per-chart customPalette workarounds.

Goal

Make the typed chart-palette API usable without false warnings, keep typo detection for genuinely unknown keys, and ensure the type-vs-runtime drift that caused this cannot silently recur.

What this PR does

  • Introduces a single shared allow-list: KNOWN_THEME_KEYS = Object.keys(defaultLightTheme) + CHART_PALETTE_KEYS, consumed by both createTheme() and the ThemeProvider prop validator (previously two independent copies).
  • Guards CHART_PALETTE_KEYS with satisfies Record<keyof ChartColorPalette, true>, so adding or removing a palette key on the type without updating the allow-list is a compile error.
  • Deliberately adds no palette defaults to defaultTheme.ts: a default palette would shadow the per-chart theme prop fallback in useChartPalette, and themeToCssVars filters to string values, so array palettes never belonged in CSS vars anyway.
  • Adds regression tests (ThemeProvider/__tests__/ThemeProvider.test.tsx) plus tsconfig.test.json (required by the ESLint override for __tests__ files, mirroring react-headless), and updates the ThemeProvider AGENTS.md with the palette-key exception to the "adding a new token" recipe.

Outcome

Re-ran the exact pre-fix reproduction probe against this branch:

Before (main) After (this PR)
Warnings on mount 6 (2 per palette key) 0
theme.barChartPalette in context present present (unchanged)
Chart colors from theme palette applied applied (unchanged)
Typo detection (defaultChartPalete) warns still warns, now suggests defaultChartPalette

Verification:

  • pnpm --filter @openuidev/react-ui run test — 13/13 pass (7 new: allow-list covers every declared palette key + every default-theme key; createTheme silent for all 8 palette keys; ThemeProvider props silent for palette keys; genuine unknown keys still warn with suggestion; palettes flow theme → useTheme()useChartPalette incl. defaultChartPalette fallback)
  • pnpm --filter @openuidev/react-ui run typecheck — clean
  • pnpm --filter @openuidev/react-ui run lint:check — 0 errors (pre-existing warnings only)
  • pnpm --filter @openuidev/react-ui run format:check — clean

…eme keys

The Theme type declares eight *ChartPalette keys, but both theme validators
derived their allow-list from Object.keys(defaultLightTheme), which defines
none of them - so the typed chart-theming API warned "unknown key ... It will
be ignored" on every dev boot (twice per key), even though the palettes flow
through the merge and charts apply them.

Both validators now share one allow-list (default theme keys + a
CHART_PALETTE_KEYS constant guarded by `satisfies Record<keyof
ChartColorPalette, true>`), so type/runtime drift is a compile error.
Regression tests cover the allow-list, warning behavior, and palette flow.

Fixes #714

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ThemeProvider falsely warns "unknown key — it will be ignored" for valid *ChartPalette theme keys

1 participant