Strict type tokens for other theme variables

Description

https://github.com/chakra-ui/chakra-ui/pull/5243 added support for generating strict types for variants and sizes

I’d like to be able to extend that to other properties (e.g. colors, space etc.)

Problem Statement/Justification

We’d like to ensure that only known colours/sizes etc are used in the app to ensure consistency.

For example, colors supports | (string & {}), so any colour can be provided. This includes HTML named colours, which make it hard to tell from looking at some code whether it is using known theme values or just arbitrary values.

<Text color="red">Hello world</Text>

This would display as red, but if I don’t have a red colour defined in my theme it is doing it based on the HTML colour, which undermines using the theme for consistency.

Proposed Solution or API

A new flag for Chakra CLI, maybe --strict-theme-tokens.

When provided, the unions in the output wouldn’t include | (string & {}).

At runtime, custom strings would still be allowed, but the typechecker would enforce correctness.

Alternatives

No response

Additional Information

I can look at doing a PR for this if it would be likely to get merged.

[lexanth]

@TimKolberger Anything I can do to get the attached PR moving forward?

[lexanth]

Not stale - attached PR is approved