What do the numeric labels represent when extending themes in Chakra? (e.g 50:, 100:, 200:, etc)

HardlyNoticeable 0
Viewed 22

I'm following a Chakra/React tutorial and encountered the following:

const theme = extendTheme({
  colors: {
    brand: {
      50: "#f0e4ff",
      100: "#cbb2ff",
      200: "#a480ff",
      300: "#7a4dff",
      400: "#641bfe",
      500: "#5a01e5",
      600: "#5200b3",
      700: "#430081",
      800: "#2d004f",
      900: "#14001f",
    },
  },
  fonts: {
    heading: `'Inter', sans-serif`,
    body: `'Inter', sans-serif`,
  },
});

See https://www.saasbase.dev/build-a-landing-page-using-chakra-ui/

What do the numeric labels represent?

chakra-ui reactjs
1 Answers

The numeric labels are a color scale steps, each step can be used in a specific case, for your case:

Step Use Case
50 UI element background
100 Hovered UI element background
200 Active / Selected UI element background
300 Subtle borders and separators
400 UI element border and focus rings
500 Hovered UI element border
600 Solid backgrounds
700 Hovered solid backgrounds
800 Low-contrast text
900 High-contrast text

this page from Radix UI Colors documentation has a good explanation of colors scale and when to use each one

mocherfaoui0
Related