Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jpachecox/setup-gulp/llms.txt

Use this file to discover all available pages before exploring further.

_colors.scss defines the entire design palette as CSS custom properties declared on :root. Because these are native CSS variables rather than Sass variables, they cascade at runtime — a Shopify theme can override any token by re-declaring it in a later :root block or on a scoped selector without recompiling the Sass. This makes the color system equally useful in CSS-in-JS contexts, Liquid templates, and JavaScript (via getComputedStyle).

​
Base colors

Every base color is defined as a CSS custom property. The hex values below are the compiled output; the raw source stores the R, G, B channel values via hex-to-rgb() (see How hex values are stored).
VariableHexSwatch
--black#000Pure black
--near-black#111Near black
--dark-gray#333Dark gray
--mid-gray#555Mid gray
--gray#777Gray
--silver#999Silver
--light-silver#aaaLight silver
--moon-gray#cccMoon gray
--light-gray#eeeLight gray
--near-white#f4f4f4Near white
--white#fffPure white
--red#b91933Red
--orange#f97316Orange
--yellow#eab308Yellow
--purple#a855f7Purple
--green#22c55eGreen
--blue#3b82f6Blue

​
Opacity variants

Eight colors ship with a full set of pre-computed opacity variants: --black, --gray, --red, --orange, --yellow, --purple, --green, and --blue. The grayscale neutrals (--near-black through --light-gray, --near-white, --white) and --transparent are available as base tokens only. The opacity variants follow the naming pattern: 
--{color}-{opacity}
where {opacity} corresponds to the following alpha levels:
SuffixAlpha value
-900.9
-800.8
-700.7
-600.6
-500.5
-400.4
-300.3
-200.2
-100.1
-050.05
-0250.025
-01250.0125
This gives you twelve opacity steps for every color — from nearly opaque to barely visible — all available as first-class CSS variables: 
// Usage in SCSS
.element {
  background: var(--purple-50); // rgba(#a855f7, 0.5)
  color: var(--black-80);
}

/* Usage in plain CSS or Liquid */
.overlay {
  background-color: var(--black-60);
  border: 1px solid var(--gray-30);
}

​
How hex values are stored

Rather than storing hex strings directly, _colors.scss uses the hex-to-rgb() function from _functions.scss to decompose each hex color into its raw R, G, B channel values. These channel values are what the custom property actually holds. The opacity variants then wrap those channels in rgba(): 
// _colors.scss (source pattern)
:root {
  --purple: #{hex-to-rgb(#a855f7)};  // stored as "168, 85, 247"
  --purple-90: rgba(var(--purple), 0.9);
  --purple-80: rgba(var(--purple), 0.8);
  // … down to --purple-0125
}

/* Compiled CSS output */
:root {
  --purple: 168, 85, 247;
  --purple-90: rgba(168, 85, 247, 0.9);
  --purple-80: rgba(168, 85, 247, 0.8);
  /* … */
}
Because --purple stores bare channel values (168, 85, 247), you cannot use it directly in a CSS color or background property without wrapping it: color: var(--purple) will not work. Always use either the base hex (e.g. #a855f7) or an opacity variant (e.g. var(--purple-90)). For full opacity, use var(--purple-90) or the rgba() wrapper directly.

​
Using colors in SCSS mixins

The color tokens slot directly into the Setup Gulp mixin library. The examples below are taken from app.scss: 
// Solid white background at full opacity
.base {
  @include mixins.background-opacity(var(--white), 1);
}

// Soft drop shadow using a gray opacity variant
.card {
  @include mixins.box-shadow(0, 10px, 10px, -15px, var(--gray-60));
}

// Subtle border using a light gray opacity variant
.panel {
  @include mixins.border('', thin, solid, var(--gray-30));
}

// Page background using a very light gray token
body {
  background-color: var(--gray-10);
}
Because the tokens are CSS custom properties, any value you pass to a mixin remains as a var(--…) reference in the compiled CSS — the browser resolves the actual color at paint time, which means theme overrides work without recompilation.

Build docs developers (and LLMs) love

Get started for freeTalk to us