I'm using Chakra v3.7.0 There are variables missing, for example: zIndex, borderWidths etc. Even I tried to define the tokens. It doesn't work.

export const tokens = defineTokens({
  borderWidths: {
    thin: { value: '1px' },
    thick: { value: '2px' },
    medium: { value: '1.5px' },
  },
  colors: colorsToken,
  fonts: fontsToken,
  fontSizes: fontSizesToken,
  fontWeights: fontWeightsToken,
  radii: radiiToken,
  sizes: sizesToken,
  spacing: spacingToken,
  zIndex: {
    hide: { value: -1 },
    base: { value: 0 },
    docked: { value: 10 },
    dropdown: { value: 1000 },
    sticky: { value: 1100 },
    banner: { value: 1200 },
    overlay: { value: 1300 },
    modal: { value: 1400 },
    popover: { value: 1500 },
    skipNav: { value: 1600 },
    toast: { value: 1700 },
    tooltip: { value: 1800 },
    max: { value: 2147483647 },
  },
const customConfig = defineConfig({
  theme: {
    tokens: tokens,
....

const system = createSystem(defaultConfig, customConfig)

All tokens work but zIndex and borderWidth.

--chakra-z-index-modal is undefined

How can I fix this?

I'm using Chakra v3.7.0 There are variables missing, for example: zIndex, borderWidths etc. Even I tried to define the tokens. It doesn't work.

export const tokens = defineTokens({
  borderWidths: {
    thin: { value: '1px' },
    thick: { value: '2px' },
    medium: { value: '1.5px' },
  },
  colors: colorsToken,
  fonts: fontsToken,
  fontSizes: fontSizesToken,
  fontWeights: fontWeightsToken,
  radii: radiiToken,
  sizes: sizesToken,
  spacing: spacingToken,
  zIndex: {
    hide: { value: -1 },
    base: { value: 0 },
    docked: { value: 10 },
    dropdown: { value: 1000 },
    sticky: { value: 1100 },
    banner: { value: 1200 },
    overlay: { value: 1300 },
    modal: { value: 1400 },
    popover: { value: 1500 },
    skipNav: { value: 1600 },
    toast: { value: 1700 },
    tooltip: { value: 1800 },
    max: { value: 2147483647 },
  },
const customConfig = defineConfig({
  theme: {
    tokens: tokens,
....

const system = createSystem(defaultConfig, customConfig)

All tokens work but zIndex and borderWidth.

--chakra-z-index-modal is undefined

How can I fix this?

• next.js
• chakra-ui

1 Answer 1

I did a workaround by creating slot recipe:

import { defineSlotRecipe } from '@chakra-ui/react'

export const drawerSlotRecipes = defineSlotRecipe({
  slots: ['root', 'backdrop', 'positioner', 'content'],

  base: {
    root: {},
    backdrop: {
      zIndex: 1000,
      backdropFilter: 'blur(10px)',
    },
    positioner: {
      zIndex: 1001,
    },
    content: {
      zIndex: 1002,
    },
  },
  variants: {},
})