Color
These are some color variable that are present in the
Posh UI. You can use these in your custom CSS files.
Use it like this,
.poshui-demo {
color: var(--COLOR-AMBER-500);
background: var(--COLOR-AMBER-200);
}
Amber & Blue
Variable Name |
Variable Value |
Color |
--COLOR-AMBER-200 |
#fde68a |
|
--COLOR-AMBER-400 |
#fbbf24 |
|
--COLOR-AMBER-500 |
#f59e0b |
|
--COLOR-AMBER-600 |
#d97706 |
|
Variable Name |
Variable Value |
Color |
--COLOR-BLUE-50 |
#eff6ff |
|
--COLOR-BLUE-300 |
#93c5fd |
|
--COLOR-BLUE-500 |
#3b82f6 |
|
--COLOR-BLUE-800 |
#1e40af |
|
Cyan & Red
Variable Name |
Variable Value |
Color |
--COLOR-CYAN-50 |
#ecfeff |
|
--COLOR-CYAN-200 |
#a5f3fc |
|
--COLOR-CYAN-500 |
#06b6d4 |
|
--COLOR-CYAN-600 |
#0891b2 |
|
Variable Name |
Variable Value |
Color |
--COLOR-RED-50 |
#fadddd |
|
--COLOR-RED-200 |
#fecaca |
|
--COLOR-RED-500 |
#ef4444 |
|
--COLOR-RED-600 |
#dc2626 |
|
Glossy Blue & Lime
Variable Name |
Variable Value |
Color |
--COLOR-GLOSSY-BLUE-100 |
#cfdef9 |
|
--COLOR-GLOSSY-BLUE-500 |
#0d5be1 |
|
--COLOR-GLOSSY-BLUE-700 |
#0a49b4 |
|
Variable Name |
Variable Value |
Color |
--COLOR-LIME-200 |
#d9f99d |
|
--COLOR-LIME-500 |
#84cc16 |
|
--COLOR-LIME-600 |
#65a30d |
|
Stone & Yellow
Variable Name |
Variable Value |
Color |
--COLOR-STONE-50 |
#454444 |
|
--COLOR-STONE |
#333 |
|
Variable Name |
Variable Value |
Color |
--COLOR-YELLOW |
#ffd814 |
|
--COLOR-YELLOW-600 |
#f4cf13 |
|
Gray & Overlay
Variable Name |
Variable Value |
Color |
--COLOR-GRAY-500 |
#6b7280 |
|
Variable Name |
Variable Value |
Color |
--COLOR-OVERLAY |
rgba(51, 65, 85, 0.5) |
|
Shadow Light & White
Variable Name |
Variable Value |
Color |
--COLOR-SHADOW-LIGHT |
rgba(149, 157, 165, 0.2) |
|
Variable Name |
Variable Value |
Color |
--COLOR-WHITE |
#fff |
|
Slate
Variable Name |
Variable Value |
Color |
--COLOR-SLATE-50 |
#f8fafc |
|
--COLOR-SLATE-300 |
#cbd5e1 |
|
--COLOR-SLATE-400 |
#94a3b8 |
|
--COLOR-SLATE-500 |
#64748b |
|
--COLOR-SLATE-600 |
#475569 |
|
--COLOR-SLATE-700 |
#334155 |
|
--COLOR-SLATE-800 |
#1e293b |
|