Semantic Colors
Standard semantic colors used throughout the framework for status indication.
Success
Success
--pa-success-bg
Warning
Warning
--pa-warning-bg
Danger
Danger
--pa-danger-bg
Info
Info
--pa-info-bg
Accent
Accent
--pa-accent
Primary BG
Primary BG
--pa-primary-bg
Secondary BG
Secondary BG
--pa-secondary-bg
Theme Color Slots (1-9)
Custom theme colors that can be overridden per-theme. Use these for branded elements.
Color 1
Color 1
--pa-color-1
Color 2
Color 2
--pa-color-2
Color 3
Color 3
--pa-color-3
Color 4
Color 4
--pa-color-4
Color 5
Color 5
--pa-color-5
Color 6
Color 6
--pa-color-6
Color 7
Color 7
--pa-color-7
Color 8
Color 8
--pa-color-8
Color 9
Color 9
--pa-color-9
Color Utility Classes
Apply theme colors to any element using these utility classes.
Background Colors
.pa-bg-color-1 to .pa-bg-color-9
bg-color-1 bg-color-2 bg-color-3 bg-color-4 bg-color-5 bg-color-6 bg-color-7 bg-color-8 bg-color-9
Text Colors
.pa-text-color-1 to .pa-text-color-9
Text 1Text 2Text 3Text 4Text 5Text 6Text 7Text 8Text 9
Border Colors
.pa-border-color-1 to .pa-border-color-9
Border 1Border 2Border 3Border 4Border 5
Applied to Components
Examples of color utilities applied to various components.
Alerts with Theme Colors
Color 1 Alert: Using
.pa-bg-color-1 utility
class. Color 4 Alert: Using
.pa-bg-color-4 utility
class. Color 7 Alert: Using
.pa-bg-color-7 utility
class. Cards with Colored Headers
Color 1 Header
Card with
.pa-bg-color-1 on header.Color 5 Header
Card with
.pa-bg-color-5 on header.Color 8 Header
Card with
.pa-bg-color-8 on header.Mixed Badges
Success Warning Danger Info Color 1 Color 2 Color 6 Color 9