Color Themes

Overview

The color utility classes in @purpose make it easy to theme your website consistently and efficiently. These classes are automatically generated from the $tokens.colors SCSS map and can be applied to various CSS properties, including color, border-color, background-color, and more.

The $tokens.colors map is organized into three main categories:

System keywords

// tokens.scss

keyword: (
  "current": currentColor,
  "inherit": inherit,
  "transparent": transparent,
)

The code above produces responsive classes, for each key value pairing in the map:

// 04.utilities.min.css

.color-current {
  // Color utilities
  color: currentColor;
}

.bg-current {
  // Background color utilities
  background-color: currentColor;
}

.border-color-current {
  // Border color utilities
  border-color: currentColor;
}

...

Default color palette

Fully customizable color palette. Accepts any format of valid CSS colors.

// tokens.scss

default: (
  "white": #fff
)

The code above produces both CSS variables and responsive classes:

// 01.theme.min.css

:root {
  --color-white: #fff;
}

// 04.utilities.min.css

.color-white {
  // Color utilities
  color: rgb(from var(--color-white) r g b/var(--color-opacity, 1));
}

.bg-white {
  // Background color utilities
  background-color: rgb(from var(--color-white) r g b/var(--bg-opacity, 1));
}

.--from-white {
  // Gradient utilities (from)
  --from: rgb(from var(--color-white) r g b/var(--from-opacity, 1));
}

.--to-white {
  // Gradient utilities (to)
  --to: rgb(from var(--color-white) r g b/var(--to-opacity, 1));
}

.border-color-white {
  // Border color utilities
  border-color: rgb(from var(--color-white) r g b/var(--border-color-opacity, 1));
}

Color Themes

Color themes make it easy to manage multiple color schemes across the website without needing to modify class-based color definitions.

For consistency and optimal results, it's recommended that each theme includes the same number of color shades. Themes are defined as follows:

// tokens.scss

theme: (
  violet: (
    100: #7928ca,
    200: #4c1d95,
    300: #b794f4,
  ),
  orange: (
    100: #f97316,
    200: #ea580c,
    300: #fdba74,
  ),
)

The code above produces both CSS variables and responsive classes for various uses:

// 04.utilities.min.css

// globally available named variables
:root {
  --color-violet-100: #7928ca;
  --color-violet-200: #4c1d95;
  --color-violet-300: #b794f4;
  --color-orange-100: #f97316;
  --color-orange-200: #ea580c;
  --color-orange-300: #fdba74;
}

// theme-scoped variables
.theme-violet {
  --color-100: #7928ca;
  --color-200: #4c1d95;
  --color-300: #b794f4;
  --border-color-100: #7928ca;
  --border-color-200: #4c1d95;
  --border-color-300: #b794f4;
}

.theme-orange {
  --color-100: #f97316;
  --color-200: #ea580c;
  --color-300: #fdba74;
  --border-color-100: #f97316;
  --border-color-200: #ea580c;
  --border-color-300: #fdba74;
}

// globally available named classes
.color-violet-100 {
  color: rgb(from var(--color-violet-100) r g b/var(--color-opacity, 1));
}

// theme-scoped classes
.theme-violet .color-100 {
  color: rgb(from var(--color-100) r g b/var(--color-opacity, 1));
}

...

Usage

<div class="theme-violet">
  <p class="color-300">This text appears light violet

</div>

<div class="theme-orange">
  <p class="color-300">This text appears light orange

</div>