Harden theme system with validation, extension, scoped overrides, and contrast checks#67
Conversation
|
CI follow-up pushed in cd70d3a to resolve lint/typecheck regressions introduced by unsafe lint autofix. What changed:
Validation run locally:
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ca6001b29b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| // ThemeDefinition has no spacing scale; reuse the default spacing for determinism. | ||
| return Object.freeze({ colors, spacing: defaultTheme.spacing }); | ||
| const legacyTheme = Object.freeze({ colors, spacing: defaultTheme.spacing }); |
There was a problem hiding this comment.
After this change, ThemeDefinition includes spacing tokens and extendTheme() can override them, but coerceToLegacyTheme() still hard-codes defaultTheme.spacing when building the runtime Theme. Any app that calls setTheme() with a semantic theme containing custom spacing will silently lose those overrides, so spacing-dependent props (e.g. numeric spacing scale usage in layout/render paths) keep using defaults instead of the provided theme.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in de9f959. coerceToLegacyTheme() now maps semantic spacing tokens (xs..2xl) into legacy spacing and preserves custom ThemeDefinition spacing instead of hard-coding defaults. Added regression coverage in packages/core/src/theme/__tests__/theme.interop.test.ts.
| const colors = coerceToLegacyTheme(override as ThemeDefinition).colors; | ||
| return mergeLegacyTheme(parentTheme, colors, undefined); |
There was a problem hiding this comment.
The scoped override branch for ThemeDefinition only merges colors and explicitly passes undefined for spacing, so container-level theme overrides drop spacing customizations even when the override is a full semantic theme. In practice, passing an extended ThemeDefinition to box/row/column updates colors but descendants still resolve spacing from the parent theme, which makes scoped theme behavior inconsistent for users relying on spacing tokens.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in de9f959. Scoped ThemeDefinition overrides now apply spacing as well as colors by forwarding parsed semantic spacing into mergeLegacyTheme(). Added regression tests in packages/core/src/theme/__tests__/theme.interop.test.ts.
1 participant
Summary
validateTheme()for semantic themes with path-specific errors for missing tokens and invalid RGB channelsextendTheme()with deep merge inheritance, non-mutation guarantees, and post-merge validationcontrastRatio()(WCAG 2.1) and preset compliance tests (AA for all built-ins, AAA for high-contrast)setTheme()a no-op when effective theme identity is unchangedbox/row/column) with parent inheritance and nested override supportTesting
npm run buildnpm run typechecknode scripts/run-tests.mjsAll commands pass locally; full suite passes with 2046 tests.