Token-driven color palettes in SASS

Introduction

Token-driven color palettes help keep colors consistent and easy to change across a website or app.

When you want to use the same colors in many places on your site.

When you want to quickly update a color everywhere by changing it once.

When working with a team to keep design consistent.

When building themes that can switch colors easily.

When you want to avoid repeating color codes in your styles.

Syntax

SASS

$color-token-name: color-value;

Use $ to define a color token (variable) in Sass.

Refer to tokens by their name to apply colors in styles.

Examples

Defines a primary color token with a blue shade.

SASS

$primary-color: #3498db;

Defines a background color token with a light gray.

SASS

$background-color: #f0f0f0;

Uses the color tokens in CSS rules for body background and text color.

SASS

body {
  background-color: $background-color;
  color: $primary-color;
}

Sample Program

This example shows how to define color tokens in Sass and use them in styles for body, heading, and button. The button hover color is a darker shade of the secondary color using Sass's color functions.

SASS

@use 'sass:color';

// Define color tokens
$color-primary: #005f73;
$color-secondary: #0a9396;
$color-accent: #94d2bd;
$color-background: #e9d8a6;
$color-text: #001219;

// Use tokens in styles
body {
  background-color: $color-background;
  color: $color-text;
  font-family: Arial, sans-serif;
  padding: 2rem;
}

h1 {
  color: $color-primary;
}

button {
  background-color: $color-secondary;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background-color: color.scale($color-secondary, $lightness: -10%);
}

Important Notes

Using tokens makes it easy to update colors by changing just one place.

Sass color functions like color.scale() help create shades from tokens.

Keep token names clear and meaningful for easier use.

Summary

Color tokens are Sass variables that store colors for reuse.

They keep your design consistent and easy to update.

Use tokens in your styles instead of hard-coded colors.

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