Notice: You are browsing the documentation for PrestaShop 9, which is currently in development.
You might want to look at the current version, PrestaShop 8. Read the current version of the documentation
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 */
...
}