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