Type safe colors

As discussed in #13875, there is currently support for specifying the colors, based on the configuration in the theme in the following format: “common.white”. For example:

<Typography color="common.white">text</Typography>

This works great, but it is not type safe. With the introduction of Template Literal Types in TypeScript, I believe that this should now be possible to ensure the type-safety.

[eps1lon]

I don’t see that it is currently possible in typescript right?

It should be with template literal types but we would need to experiment if we can cover every possible color and if that’s viable. Better autocomplete would already be a good first step.

import React from 'react';

type NamedColor = 'primary' | 'secondary'
type ColorVariant = 'main' | 300 | 400 | 500

// too complex to represent
// type HexNumber = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | number
// type HexColorTriplet = `${HexNumber}${HexNumber}${HexNumber}${HexNumber}${HexNumber}${HexNumber}`
type HexColorTriplet = string

type PaletteColor = `#${HexColorTriplet}` | `${NamedColor}.${ColorVariant}`

type ColorProp = PaletteColor

function Typography(props: { color: ColorProp }) {
    return <div />
}

<>
    <Typography color="#f5f5f5" />
    <Typography color="primary.main" />

    <Typography
        // @ts-expect-error
        color="tertiary.main" />
</>

Playground Link

[eps1lon]

With the introduction of Template Literal Types in TypeScript, I believe that this should now be possible to ensure the type-safety.

This is definitely the plan. But we have to wait for TypeScript 4.0 to reach end-of-life. Until then we still have to support TypeScript 4.0 and the additional effort of shipping types for multiple TypeScript versions is probably not worth the effort. If people are interested in it, they can upvote the issue.