StylesOptions' zIndex should accept string values

[AndreSilva1993]

🐛 Bug Report

Not necessarily a bug but would like to propose that the zIndex prop under the StylesOptions takes in a string as well.

export interface StylesOptions {
  arrowColor: string;
  backgroundColor: string;
  beaconSize: number;
  overlayColor: string;
  primaryColor: string;
  spotlightShadow: string;
  textColor: string;
  width?: string | number;
  zIndex: number; <--------
}

In our project we're using MUI and adopting their newly CSS variables. Before using this API, the theme object would contain the actual numeric values which then we could do something like zIndex: theme.zIndex.drawer + 1.

Since now the new theme.vars gives us something like var(--mui-zIndex-drawer) our idea was to use the following which is valid CSS calc(${theme.vars.zIndex.drawer} + 1) but the StylesOptions forces us to pass numeric values.

[gilbarbara]

Hey @AndreSilva1993

Did you try to set the zIndex as a string and ts-ignore the error? Does it work?

The problem with accepting plain strings is that users can set 1000px and break it.
A template string would be acceptable, and I can still validate it in the code.

zIndex: number | `var(---${string})`;