[docs] Invalid CSS output w/ pseudo classes in theme.vars about pigment-css HOT 6 OPEN

const theme = extendTheme({
  colorSchemes: {
    dark: {
       // these are the colorScheme-dependent tokens you want to use in mixins
      palette: {
        overlay: `black`,
        primary: {
          main: `#fafafa`,
        }
      }
    }
  },
  // then you want to define a reusable stylesheet within mixins
  mixins: {
    example: {
      /**
       * Pigment should have a function to make it type-safe.
       *   - you could also infer the type automatically from the theme.colorSchemes[string] and allow dot notation reference w/o a function (ex. `getVar`)
       *
       * If a function is your preference, then Pigment (`getVar` below) also needs to take into account the `cssVarPrefix` bundler's option see: https://github.com/mui/material-ui/tree/master/packages/pigment-css-react#adding-a-prefix-to-css-variables
       * 
       * In the example below, the function is named as `getVar`
       *     the type of the parameter can be
       *        import type { Paths } from "type-fest" // see: https://github.com/sindresorhus/type-fest/blob/main/source/paths.d.ts
       *        type getVar = (key: Paths<PigmentTheme["colorSchemes"][keyof PigmentTheme["colorSchemes"]]>) => `var(${string})`
       * 
       * @example how it would look like in the code
       * backgroundColor: getVar("palette.overlay")
       * "&:hover": {
       *   backgroundColor: getVar("palette.primary.main")
       * }
       * 
       * Below, how it's currently must be done.
       * It is not type-safe, but it works.
       */
      backgroundColor: `var(--palette-overlay)`,
      "&:hover": {
        backgroundColor: `var(--palette-primary-main)`,
      }
    }
  }
})

export const classNameWithMixin = pigment.css(({ theme }) => ({
  ...theme.mixins.example,
  display: `flex`
}))