CssVariables.liquid

Purpose

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.*
Theme/store settings required to generate CSS variables (palette colors, flags, etc.).

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

Output

The file is expected to output CSS variables, typically in one of these formats:

A <style> block with :root { --var: value; }

Optionally additional selectors, e.g. .dark { ... } for dark mode overrides

Typical output concept (example only):

:root {
  --color-primary: ...;
  --header-bg: ...;
}
.dark {
  --color-primary: ...;
}

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)#