Token Optimization

Overview

In this lesson, we're taking our semantic tokens one step further by learning how to optimize them using the colorPalette prop.

Key Takeaways

The colorPalette prop simplifies consistent theming

Instead of manually setting bg and color on every Chakra component, you can now define a unified color palette that automatically applies consistent styles across your app.

Before: Manual color overrides

<Button
  bg="bg.accent"
  color="fg.accentInverted"
  size="sm"
  flex="1"
  _hover={{ bg: "bg.accentHover" }}
>
  Follow
</Button>

<Button
  variant="outline"
  borderColor="border"
  color="fg.outline"
  size="sm"
  flex="1"
  _hover={{
    bg: "bg.outlineHover",
    borderColor: "border.outlineHover",
  }}
>
  Message
</Button>

After: Simplified with colorPalette

<Button colorPalette="brand" size="sm" flex="1">
  Follow
</Button>

<Button variant="outline" colorPalette="brand" size="sm" flex="1">
  Message
</Button>

By using the colorPalette prop, you eliminate repetitive color definitions. Your components now automatically adapt to light and dark modes, remain consistent across variants, and are easier to maintain throughout your design system.