Token-driven color palettes in SASS - Mini Project: Build & Apply

Token-driven color palettes

📖 Scenario: You are creating a simple style system for a website. You want to use color tokens to keep your colors organized and easy to change later.

🎯 Goal: Build a Sass file that defines color tokens, sets a threshold for light or dark colors, creates a map of colors filtered by that threshold, and finally applies these colors to CSS custom properties for easy use in your styles.

📋 What You'll Learn

Define a Sass map called $color-tokens with specific color names and hex values.

Create a variable $light-threshold to decide which colors are considered light.

Use a Sass @each loop and @if condition to create a new map $light-colors containing only colors lighter than the threshold.

Output CSS custom properties for each color in $light-colors inside the :root selector.

💡 Why This Matters

🌍 Real World

Token-driven color palettes help keep website colors consistent and easy to update by changing values in one place.

💼 Career

Understanding how to manage design tokens with Sass maps and output CSS variables is useful for frontend developers working on scalable and maintainable stylesheets.

1

Define the color tokens map

Create a Sass map called $color-tokens with these exact entries: primary: #3498db, secondary: #2ecc71, danger: #e74c3c, warning: #f1c40f, dark: #34495e.

SASS

# Create the $color-tokens map with the given colors
# Your code here

Need a hint?

Use parentheses to create a Sass map and separate each key-value pair with commas.

2

Set the light color threshold

Create a variable called $light-threshold and set it to 50% to represent the minimum lightness for colors to be considered light.

SASS

$color-tokens: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c,
  warning: #f1c40f,
  dark: #34495e
);

// Define $light-threshold variable
# Your code here

Need a hint?

Use a simple variable assignment with a percentage value.

3

Create a map of light colors

Use a Sass @each loop with variables $name and $color to iterate over $color-tokens. Inside the loop, use an @if condition to check if lightness($color) is greater than $light-threshold. If true, add the color to a new map called $light-colors.

SASS

$color-tokens: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c,
  warning: #f1c40f,
  dark: #34495e
);

$light-threshold: 50%;

// Create $light-colors map with colors lighter than $light-threshold
$light-colors: ();
# Your code here

Need a hint?

Initialize $light-colors as an empty map. Use map-merge() to add entries inside the loop.

4

Output CSS custom properties for light colors

Write a :root selector and inside it use a Sass @each loop with variables $name and $color to iterate over $light-colors. For each color, output a CSS custom property named --color-#{$name} with the value #{$color}.

SASS

$color-tokens: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c,
  warning: #f1c40f,
  dark: #34495e
);

$light-threshold: 50%;

$light-colors: ();
@each $name, $color in $color-tokens {
  @if lightness($color) > $light-threshold {
    $light-colors: map-merge($light-colors, ($name: $color));
  }
}

// Output CSS custom properties for each light color
:root {
  // Your code here
}

Need a hint?

Use interpolation #{$name} and #{$color} to insert variable values inside CSS.