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

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

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

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
}

Hint

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

Practice

1. What is the main purpose of using token-driven color palettes in Sass?

easy

A. To store colors in variables for easy reuse and consistency

B. To write colors directly in CSS without variables

C. To create animations with colors

D. To import images as color backgrounds

Solution

1. Step 1: Understand what tokens are in Sass

   Tokens are variables that hold values, like colors, to reuse easily.

2. Step 2: Identify the benefit of using tokens

   Using tokens keeps colors consistent and easy to update across the project.

3. Final Answer:

   To store colors in variables for easy reuse and consistency -> Option A

4. Quick Check:

   Color tokens = variables for consistent colors [OK]

Hint: Tokens are variables holding colors for reuse [OK]

Common Mistakes:

• Thinking tokens are for animations
• Confusing tokens with direct CSS colors
• Assuming tokens import images

2. Which of the following is the correct way to define a color token in Sass?

easy

A. primary-color = #3498db;

B. $primary-color: #3498db;

C. var(--primary-color: #3498db);

D. color primary-color: #3498db;

Solution

1. Step 1: Recall Sass variable syntax

   Sass variables start with a dollar sign ($) followed by the name and value.

2. Step 2: Check each option

   $primary-color: #3498db; uses correct Sass syntax: $primary-color: #3498db;. Others use invalid syntax.

3. Final Answer:

   $primary-color: #3498db; -> Option B

4. Quick Check:

   Sass variables start with $ [OK]

Hint: Sass variables always start with $ [OK]

Common Mistakes:

• Using CSS variable syntax in Sass
• Omitting the $ sign
• Using equal sign instead of colon

3. Given the Sass code:

$color-primary: #ff0000;
.button {
  background-color: $color-primary;
}

What color will the button background be in the browser?

medium

A. Red

B. Green

C. Blue

D. Transparent

Solution

1. Step 1: Identify the token value

   The variable $color-primary is set to #ff0000, which is red.

2. Step 2: Check usage in CSS

   The button's background-color uses $color-primary, so it will be red.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   Variable $color-primary = #ff0000 (red) [OK]

Hint: Match hex code #ff0000 to red color [OK]

Common Mistakes:

• Confusing hex codes with other colors
• Ignoring variable usage
• Assuming default color

4. Identify the error in this Sass code snippet:

$accent-color #00ff00;
.text {
  color: $accent-color;
}

medium

A. Missing semicolon after color property

B. Variable name should not start with $

C. Color value is invalid

D. Missing colon after variable name

Solution

1. Step 1: Check variable declaration syntax

   Sass variables require a colon (:) between name and value.

2. Step 2: Locate the error

   The code has $accent-color #00ff00; missing the colon after $accent-color.

3. Final Answer:

   Missing colon after variable name -> Option D

4. Quick Check:

   Variable declaration needs colon : [OK]

Hint: Variable declarations need colon : after name [OK]

Common Mistakes:

• Forgetting colon in variable declaration
• Removing $ from variable name
• Assuming color value is wrong

5. You want to create a token-driven color palette with light and dark modes using Sass variables. Which approach correctly switches colors based on a data-theme attribute on the body, with light mode as the default?

hard

A. $color-bg-light: #ffffff;
$color-bg-dark: #000000;

body[data-theme='light'] {
background-color: $color-bg-light;
}
body[data-theme='dark'] {
background-color: $color-bg-dark;
}

B. $color-bg-light: #ffffff;
$color-bg-dark: #000000;

body {
background-color: $color-bg-light;
}
body[data-theme='dark'] {
background-color: $color-bg-light;
}

C. $color-bg-light: #ffffff;
$color-bg-dark: #000000;

body {
background-color: $color-bg-light;
&[data-theme='dark'] {
background-color: $color-bg-dark;
}
}

D. $color-bg-light: #ffffff;
$color-bg-dark: #000000;

body {
background-color: $color-bg-dark;
}
body[data-theme='light'] {
background-color: $color-bg-light;
}

Solution

1. Step 1: Understand how to nest selectors in Sass

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body {
     background-color: $color-bg-light;
     &[data-theme='dark'] {
       background-color: $color-bg-dark;
     }
   }

   uses nesting with &[data-theme='dark'] inside body, which is valid Sass syntax.

2. Step 2: Check color assignments for light and dark modes

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body {
     background-color: $color-bg-light;
     &[data-theme='dark'] {
       background-color: $color-bg-dark;
     }
   }

   sets light mode as default and overrides background for dark mode correctly.

3. Step 3: Compare other options

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body[data-theme='light'] {
     background-color: $color-bg-light;
   }
   body[data-theme='dark'] {
     background-color: $color-bg-dark;
   }

   is valid CSS but not Sass nesting style;

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body {
     background-color: $color-bg-light;
   }
   body[data-theme='dark'] {
     background-color: $color-bg-light;
   }

   sets dark mode to light color (wrong);

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body {
     background-color: $color-bg-dark;
   }
   body[data-theme='light'] {
     background-color: $color-bg-light;
   }

   sets dark mode as default and light mode override, which is less common.

4. Final Answer:

   Sass nested selectors with light default and dark override -> Option C

5. Quick Check:

   Sass nesting with & and tokens for themes [OK]

Hint: Use & to nest attribute selectors in Sass [OK]

Common Mistakes:

• Confusing CSS and Sass nesting syntax
• Assigning wrong colors to themes
• Not using tokens for colors