Colors support
The Pillar UI color theme provides a set of default colors that can be easily applied to different UI elements.
| Color Category | Variable | Description |
|---|---|---|
| Primary Colors | --pri-* | Highlight important elements; range from light to dark. |
| Secondary Colors | --sec-* | Complement primary colors; offer visual variation. |
| Danger Colors | --dan-* | Signal critical or error-related elements in your UI. |
| Warning Colors | --war-* | Convey cautionary information or warnings. |
| Success Colors | --suc-* | Represent successful or positive elements in your UI. |
| Opacity Colors | --opa-* | Provide varying transparency levels to UI elements. |
| bg Colors | --bg-* | Serve as background colors for bgs or containers. |
Note: The Pillar UI color system supports a range of 1 to 12 colors within each category.
Dark Mode
Pillar UI also provides a dark mode color scheme. In the dark mode, the colors have a different set of variables prefixed with --dark. These variables allow you to define specific colors for the dark mode, ensuring a consistent appearance across light and dark themes.
By leveraging the predefined color variables in the Pillar UI color theme, you can easily create visually cohesive and harmonious user interfaces while maintaining flexibility and customization options.
Please note that the provided color theme is based on the code snippet you provided, and additional colors or variations might be available depending on the specific implementation of the Pillar UI framework.
red
1
2
3
4
5
6
7
8
9
10
11
12
tomato
1
2
3
4
5
6
7
8
9
10
11
12
crimson
1
2
3
4
5
6
7
8
9
10
11
12
pink
1
2
3
4
5
6
7
8
9
10
11
12
plum
1
2
3
4
5
6
7
8
9
10
11
12
purple
1
2
3
4
5
6
7
8
9
10
11
12
secondary
1
2
3
4
5
6
7
8
9
10
11
12
primary
1
2
3
4
5
6
7
8
9
10
11
12
blue
1
2
3
4
5
6
7
8
9
10
11
12
cyan
1
2
3
4
5
6
7
8
9
10
11
12
teal
1
2
3
4
5
6
7
8
9
10
11
12
green
1
2
3
4
5
6
7
8
9
10
11
12
grass
1
2
3
4
5
6
7
8
9
10
11
12
orange
1
2
3
4
5
6
7
8
9
10
11
12
brown
1
2
3
4
5
6
7
8
9
10
11
12
sky
1
2
3
4
5
6
7
8
9
10
11
12
mint
1
2
3
4
5
6
7
8
9
10
11
12
lime
1
2
3
4
5
6
7
8
9
10
11
12
yellow
1
2
3
4
5
6
7
8
9
10
11
12
amber
1
2
3
4
5
6
7
8
9
10
11
12
gray
1
2
3
4
5
6
7
8
9
10
11
12
mauve
1
2
3
4
5
6
7
8
9
10
11
12
bg
1
2
3
4
5
6
7
8
9
10
11
12
sage
1
2
3
4
5
6
7
8
9
10
11
12
olive
1
2
3
4
5
6
7
8
9
10
11
12
sand
1
2
3
4
5
6
7
8
9
10
11
12
bronze
1
2
3
4
5
6
7
8
9
10
11
12
gold
1
2
3
4
5
6
7
8
9
10
11
12