CSS variables in Checkout extensions

Reference for the CSS variables available to style Checkout extensions consistently with the core visual design.

This feature is only available for stores using B2B Buyer Portal, which is currently available to selected accounts.

CSS variables are standardized values for styling that help maintain visual consistency across Checkout extensions. These variables allow you to easily align with the core visual design of the Checkout application.

For more information on how to apply CSS to your extensions, see Using CSS in Checkout extensions.

Available CSS variables

Here are the variables currently available for use in your CSS:

--fc-colors-brand-primary: Represents the primary brand color used throughout the Checkout. You can use this variable to ensure your extension matches the core branding.


_10.custom-button {
_10  background-color: var(--fc-colors-brand-primary);
_10}

You can also use the following variations of the primary color:

--fc-colors-brand-primary-40
--fc-colors-brand-primary-60
--fc-colors-brand-primary-80
--fc-colors-brand-primary-darker


_12.custom-button-40 {
_12  background-color: var(--fc-colors-brand-primary-40);
_12}
_12.custom-button-60 {
_12  background-color: var(--fc-colors-brand-primary-60);
_12}
_12.custom-button-80 {
_12  background-color: var(--fc-colors-brand-primary-80);
_12}
_12.custom-button-darker {
_12  background-color: var(--fc-colors-brand-primary-darker);
_12}

--fc-colors-light-gray-100, --fc-colors-light-gray-300, --fc-colors-light-gray-400, and --fc-colors-dark-gray-1000: Represent the gray variations used throughout the Checkout. You can use these variables to ensure your extension matches the core branding.


_10.custom-text {
_10  background-color: var(--fc-colors-light-gray-100);
_10}

--fc-fonts-sans: Represents the default sans-serif font used in the Checkout. Use this variable to ensure your text aligns with the core font styles.


_10.custom-text {
_10  font-family: var(--fc-fonts-sans);
_10}

--fc-button-font-size: Represents the font size used in buttons throughout the Checkout.


_10.button {
_10  font-size: var(--fc-button-font-size);
_10}

--fc-button-line-height: Represents the line height used in buttons throughout the Checkout.


_10.button {
_10  line-height: var(--fc-button-line-height);
_10}

--fc-button-font-weight: Represents the font weight used in buttons throughout the Checkout.


_10.button {
_10  font-weight: var(--fc-button-font-weight);
_10}

These CSS variables help keep your extensions consistent with the core design while allowing flexibility for custom styles.

In future releases, we will add support for more tokens and CSS variables to maintain visual consistency between the extensions and the Checkout core.