Discover a summary of the main CSS variables available through the PrestaShop UI Kit.
These variables should be used when you want to apply a color on the BO.
Main | Variable name | Used for (non-exhaustive list) |
---|---|---|
Primary | --cdk-primary-900 | ... |
--cdk-primary-800 | Header background / Primary button background | |
--cdk-primary-700 | Buttons states | |
--cdk-primary-600 | UI elements / On login page | |
--cdk-primary-500 | Some icons / Buttons states | |
--cdk-primary-400 | Borders color | |
--cdk-primary-300 | Nav bar / Buttons states / Tables | |
--cdk-primary-200 | Disabled form elements / Tables | |
--cdk-primary-100 | Tables | |
Red | --cdk-red-700 | Alert, Destructive, Danger elements |
--cdk-red-500 | ||
--cdk-red-300 | ||
--cdk-red-100 | ||
--cdk-red-50 | ||
Purple | --cdk-purple-700 | New branding color |
--cdk-purple-500 | ||
--cdk-purple-50 | ||
Blue | --cdk-blue-700 | UI / States, Infos elements |
--cdk-blue-500 | ||
--cdk-blue-300 | ||
--cdk-blue-100 | ||
--cdk-blue-50 | ||
Ocean blue | --cdk-ocean-blue-700 | New branding color |
--cdk-ocean-blue-500 | ||
--cdk-ocean-blue-50 | ||
Yellow | --cdk-yellow-500 | Warning elements |
--cdk-yellow-300 | ||
--cdk-yellow-100 | ||
--cdk-yellow-50 | ||
Amber | --cdk-amber-500 | New branding color |
--cdk-amber-100 | ||
Green | --cdk-green-500 | Success elements |
--cdk-green-300 | ||
--cdk-green-100 | ||
--cdk-green-50 | ||
Black | --cdk-black | ... |
White | --cdk-white | ... |
These variables should be used for fonts family in the BO.
Variable name | Value | Used for |
---|---|---|
--cdk-font-family-primary | "IBM Plex Sans", "Verdana", "Arial", "sans-serif" | Primary font |
--cdk-font-family-secondary | "IBM Plex Sans", "Verdana", "Arial", "sans-serif" | Secondary font (currently the same as primary) |
--cdk-font-family-material-icons | "Material Symbols Outlined", "sans-serif" | Font icons |
These variables can be used when you want to apply sizing or spacing on the BO.
Explanation:
.alert {
font-size: var(--cdk-size-16); /* = 1rem -> size-16 stand for 16px and variables values are in rem */
margin-bottom: var(--cdk-size-32); /* = 2rem -> size-32 stand for 32px and variables values are in rem */
...
}