For theme layouts created from 2022 onwards, you have access to .css variables to use in the Scripts & Styles .css editor.
Using .css variables cuts down human errors, especially if you're trying to remember the specific colour value of your Primary / Secondary / Alternate style guide colour scheme or font stack.
Here's a guide to using .css variables: https://www.w3schools.com/css/css3_variables.asp
Example of .css variable usage
|
Standard Variables Available:
.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 |
With your browser's Dev Tools, you can see them displayed for your site theme. Here's an example:
