Type '"dialog"' is not assignable to type 'StylePropertyValue<ZIndex>'.

[aaronadamsCA]

Describe the bug Similar to #1861, but different enough to be worth a bug.

TypeScript 4.4.2, Theme UI 0.11.1.

This interface:

import type { Property } from "csstype";
import type { BoxProps, StylePropertyValue } from "theme-ui";

interface ModalDialogProps extends BoxProps {
  zIndex?: StylePropertyValue<Property.ZIndex>;
}

Is refusing to accept a string value for the zIndex prop:

<ModalDialog zIndex="dialog" />

Error message reads:

Type '"dialog"' is not assignable to type 'StylePropertyValue<ZIndex>'. ts(2322) modal-dialog.tsx(18, 3): The expected type comes from property 'zIndex' which is declared here on type 'IntrinsicAttributes & ModalDialogProps'

I did recently re-implement my theme using makeTheme, here's the relevant part:

import { makeTheme } from "@theme-ui/css/utils";

export const theme = makeTheme({
  zIndices: {
    header: 10,
    footer: 10,
    cart: 20,
    dialog: 30,
  },
});

I am going to work around this by updating my type to StylePropertyValue<Property.ZIndex | TLengthStyledSystem>, but this feels like it should probably be unnecessary, right?

[hasparus]

I'm working on a PR that will expose Property.ZIndex from Theme UI with the knowledge of your theme (so "dialog" will be autocompleted). My first attempts led to a really unperformant TypeScript compilation, so that's taking some time, but it's coming. Sorry for tardiness :)

[aaronadamsCA]

All good, the workaround took a while to figure out but works well enough! Will keep an eye for a fix so I can remove it though. Thanks 👍