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

CSS variables reference

Discover a summary of the main CSS variables available through the PrestaShop UI Kit.

Colors

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 ...

Fonts

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

Sizing / Spacing

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 */
  ...
}