CSS tokens

The defaults listed below are the schema defaults in config/settings_schema.json. Each preset sets its own values in config/settings_data.json.

Each color scheme in Theme settings > Colors becomes a class, .color-<scheme id>. The first scheme is also applied to :root. Sections apply a scheme with that class.

Each scheme also sets color-scheme: dark when its background lightness is below 45, and light otherwise.

The -rgb tokens work with the space-separated rgb() syntax:

1.my-overlay {
2  background: rgb(var(--color-foreground-rgb) / 0.08);
3}

Dark mode#

Dark mode uses the Dark mode setting (dark_mode: off, auto, toggle) and the Dark scheme setting (dark_scheme). When dark mode is not off, the dark scheme's values are applied to :root and to every light scheme (background lightness 80 or above) in two cases:

• :root[data-theme='dark'] is set.
• The device prefers dark (@media (prefers-color-scheme: dark)) and :root does not have data-theme='light'.

Dark mode also sets --media-bg to the dark scheme's panel background and color-scheme: dark. Darker or colored schemes keep their own colors.

With toggle, a [data-theme-toggle] button in the header sets data-theme on <html> and stores the choice in localStorage under tangent:theme. An inline script in layout/theme.liquid restores it before the page renders.

--section-space scales section padding in base.css: calc(96px var(--section-space)) on desktop and calc(64px var(--section-space)) below 750 px.

--card-ratio and --card-fit are emitted but not read by any stylesheet on this branch. Product cards set their own --ratio and the media--contain class in snippets/product-card.liquid.

1:root {
2  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
3  --duration: 0.34s;
4}

These are the only global motion tokens. base.css uses var(--ease) and var(--duration) for transitions, for example the scroll reveal (opacity and transform over 0.8 s with var(--ease)).

The Motion settings control which effects are on:

Motion effects in base.css sit inside @media (prefers-reduced-motion: no-preference). For shoppers who prefer reduced motion, base.css shortens all animations and transitions:

1/* assets/base.css */
2@media (prefers-reduced-motion: reduce) {
3  *:not(.marquee__track),
4  *::before,
5  *::after {
6    animation-duration: 0.01ms !important;
7    animation-iteration-count: 1 !important;
8    transition-duration: 0.01ms !important;
9    scroll-behavior: auto !important;
10  }
11}

The JavaScript checks the same preference through window.Tangent.prefersReducedMotion(): smooth scrolling becomes instant, view transitions are skipped, slider autoplay does not start, and <video-media> does not autoplay.

Component-level properties such as --overlay (hero, slideshow, collage), --pos (<compare-slider>) and --from / --to (<price-range>) are set inline on their elements.

Override a token on :root or on a scheme class in your own stylesheet, loaded after base.css:

1:root {
2  --ease: cubic-bezier(0.4, 0, 0.2, 1);
3}
4.color-scheme-2 {
5  --color-border: #d6d6d6;
6}

Values set in theme settings are regenerated on every page load, so change them in the theme editor where a setting exists.