ChakraUI/V3/Remove Theme Tools

Last update

Oct 26, 2024

Theme tools has been removed, so this codemod transforms it, to use CSS color mix.

Example

defineStyle({
  bg: transparentize('blue.200', 0.16)(theme),
  // -> rgba(0, 0, 255, 0.16)
});

defineStyle({
  bg: 'blue.200/16',
  // -> color-mix(in srgb, var(--chakra-colors-200), transparent 16%)
});

Theme tools has been removed, so this codemod transforms it, to use CSS color mix.

defineStyle({
  bg: transparentize('blue.200', 0.16)(theme),
  // -> rgba(0, 0, 255, 0.16)
});

defineStyle({
  bg: 'blue.200/16',
  // -> color-mix(in srgb, var(--chakra-colors-200), transparent 16%)
});

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community