Color Props

Color props control text color, background color, and opacity. Values reference the theme's colors scale.

Available Props

Prop	CSS Property	Theme Key
color	color	colors
bg	background-color	colors
opacity	opacity	none
fill	fill	colors
stroke	stroke	colors

Theme Scale

// Default colors scale in theme
{
  colors: {
    primary: '#0070f3',
    secondary: '#6b46c1',
    text: {
      primary: '#16161D',
      secondary: '#4A5568',
      disabled: '#A0AEC0'
    },
    background: {
      primary: '#FFFFFF',
      secondary: '#F7FAFC'
    },
    // ... other color tokens
  }
}

Usage

<Box 
  color="text.primary"
  bg="background.secondary"
  opacity={0.8}
/>