CssVariables.liquid

Purpose

CssVariables.liquid is rendered with GlobalData.Settings as Settings.

So inside this file you can expect to use:theme exposes values such as colors (palette), backgrounds, and other design tokens into CSS so that:

components can stay mostly "utility-class + variables" driven,

theming changes propagate globally without editing many templates,

dark mode and store-specific styling can be handled centrally.e

CssVariables.liquid outputs theme-level CSS variables (custom properties) that are used across Noir for consistent theming.

This is the main place where the theme exposes values such as colors (palette), backgrounds, and other design tokens into CSS so that:

components can stay mostly "utility-class + variables" driven,

theming changes propagate globally without editing many templates,

dark mode and store-specific styling can be handled centrally.

Where it's used

CssVariables.liquid is rendered inside the <head> of the main layout:

LayoutA.liquid

Example (from the layout):

{% render 'Structure\\CssVariables' with GlobalData.Settings as Settings %}

This means every page rendered with LayoutA.liquid will receive the same CSS variable setup.

Inputs

CssVariables.liquid is rendered with GlobalData.Settings as Settings.

So inside this file you can expect to use:

Settings.colors.*
Palette colors for light mode (e.g. primary, secondary, accent, backgroundPrimary, linkText, secondaryButton) including their *Hovered / *Selected / *Disabled states.

Settings.colors.dark*
Equivalent palette for dark mode (e.g. darkPrimary, darkBackgroundPrimary, …).

Settings.fontFamily
The theme font family.

Settings.siteStyle
Controls the global --border-radius token (see Output below).

Note
The specific settings keys depend on what the platform provides in GlobalData.Settings.

Output

The file outputs a single <style> block declaring CSS custom properties on :root.

Important: dark mode is not handled with a separate .dark { ... } selector here. Instead, both light and dark tokens are declared together on :root (the dark ones are prefixed with --dark-), and consumers choose which set to use.

Typical output concept (example only):

The --border-radius token is derived from Settings.siteStyle:

"Rounded" → 1.5rem

"Standard" → .5rem

otherwise → 0

How variables are used in Noir

Once variables are declared, they can be consumed by:

Tailwind arbitrary values (e.g. text-[var(--...)], bg-[var(--...)]) if the project uses that pattern

custom CSS inside scss

component templates when inline styles are required (prefer variables over hardcoded colors)

Do not change (by default)

In Noir, CssVariables.liquid should be treated as core infrastructure and a stable contract between the platform's theming settings and the theme.

Default rule: do not modify this file.

If you need styling changes, prefer (in this order):

Admin panel palette / theme settings (the intended way)

Custom CSS (small overrides)

Template-level adjustments (Tailwind classes / markup)

Allowed reasons (exception-only)

Only consider changing CssVariables.liquid when all of the below are true:

the required design cannot be achieved through Admin palette/settings, and

Custom CSS overrides are not sufficient, and

the change must be applied globally as a reusable token (affects many components consistently), and

you accept that CSS variables behave like a public API (changes can have broad impact)

If you're unsure, don't change it; document the requirement and escalate to core/theme owners.

CssVariables.liquid

Purpose#

Where it's used#

Inputs#

Output#

How variables are used in Noir#

Do not change (by default)#