Yes in themes created in 2022 onwards you have access to .css variables to use in the Scripts & Styles .css editor.
Using .css variables cuts down human in error, especially if you are trying to remember exactly what the specific colour value is for your Primary / Secondary / Alternate style guide colour scheme or font stack in use.
How to use .css variables:
https://www.w3schools.com/css/css3_variables.asp
Example of .css variable usage
|
Standard Variables Available:
.css Variable | Purpose |
|---|---|
.css Variable | Purpose |
--color-default: | Default style guide colour |
--color-default-light: | Default style guide colour (light variation) |
--color-default-dark: | Default style guide colour (dark variation) |
--color-primary: | Primary style guide colour |
--color-primary-light: | Primary style guide colour (light variation) |
--color-primary-dark: | Primary style guide colour (dark variation) |
--color-secondary: | Secondary style guide colour |
--color-secondary-light: | Secondary style guide colour (light variation) |
--color-secondary-dark: | Secondary style guide colour (dark variation) |
--color-alternate: | Alternate style guide colour |
--color-alternate-light: | Alternate style guide colour (light variation) |
--color-alternate-dark: | Alternate style guide colour (dark variation) |
--color-black: | Black style guide colour |
--color-black-light: | Black style guide colour (light variation) |
--color-black-dark: | Black style guide colour (dark variation) |
--color-grey: | Grey generic colour |
--color-grey-light: | Grey generic colour (light version) |
--color-grey-dark: | Grey generic colour (dark version) |
--font-stack-system: | Framework default font stack |
--font-stack: | Your font stack in use |
--font-stack-bold: | Bold Font Family |
--font-stack-headings: | Heading Font Family |
--font-size-core: | Default core font size of theme |
--font-stack-alternate: | Alternate Font Family |
--mobile-first-breakpoint-small: | Mobile First responsive breakpoint small |
--mobile-first-breakpoint-medium: | Mobile First responsive breakpoint medium |
--mobile-first-breakpoint-regular: | Mobile First responsive breakpoint regular |
--mobile-first-breakpoint-large: | Mobile First responsive breakpoint large |
--mobile-first-breakpoint-xlarge: | Mobile First responsive breakpoint xlarge |
--mobile-first-breakpoint-xxlarge: | Mobile First responsive breakpoint xxlarge |
--mobile-first-breakpoint-xxxlarge: | Mobile First responsive breakpoint xxxlarge |
--mobile-first-breakpoint-full: | Mobile First responsive breakpoint Full Width |
Using your browsers Dev Tools, you can see them displayed for your site theme, for example:
On this page:
Additional Information
| Minimum Version Requirements | 4.13.02 |
|---|---|
| Prerequisites | Upgrade to version 4.13.02 |
| Self Configurable | Yes |
| Business Function | Content |
| BPD Only? | Yes |
| B2B/B2C/Both | Both |
| Third Party Costs | N/A |
Related help
