Color Utilities

Control text and background colors with our semantic color system.

Theme Colors

Core semantic colors for your application.

Background colors:

• sb-bg-primary: Primary brand color
• sb-bg-secondary: Secondary brand color
• sb-bg-accent: Accent highlights
• sb-bg-neutral: Neutral/base color
• sb-bg-error: Error states
• sb-bg-warning: Warning states
• sb-bg-success: Success states
• sb-bg-info: Information states

Text colors:

• sb-primary: Primary text
• sb-secondary: Secondary text
• sb-accent: Accent text
• sb-neutral: Neutral text
• sb-error: Error text
• sb-warning: Warning text
• sb-success: Success text
• sb-info: Info text

Border colors:

• sb-border-primary: Primary border color
• sb-border-secondary: Secondary border color
• sb-border-accent: Accent border color
• sb-border-neutral: Neutral border color
• sb-border-error: Error border color
• sb-border-warning: Warning border color
• sb-border-success: Success border color
• sb-border-info: Info border color

Opacity Variants

Semi-transparent versions of colors.

Theme color opacities:

• -25: 25% opacity
• -50: 50% opacity
• -75: 75% opacity

Example:

<div class="sb-bg-primary-50">
    50% opacity primary background
</div>

Black/White opacities:

• sb-bg-black-25: 25% black
• sb-bg-black-50: 50% black
• sb-bg-black-75: 75% black
• sb-bg-white-25: 25% white
• sb-bg-white-50: 50% white
• sb-bg-white-75: 75% white

Special Values

Additional utility colors.

• sb-bg-transparent: Transparent background
• sb-bg-black: Pure black
• sb-bg-white: Pure white