Token-driven color palettes in SASS - Browser Rendering Trace

Render Flow - Token-driven color palettes

[Define color tokens] -> [Assign tokens to CSS variables] -> [Use variables in styles] -> [Browser applies colors] -> [Visual color palette appears]

The browser reads the CSS variables defined from tokens, applies them to elements, and renders the colors visually on the page.

Render Steps - 5 Steps

Code Added:$color-primary: #005f73;

Before

[No colors defined]
[Empty white background]

→

After

[Token $color-primary defined]
[No visible change yet]

We define a primary color token in Sass, but it does not affect the page yet.

🔧 Browser Action:Sass compiles variable, no CSS output yet

Code Sample

This code shows three colored boxes using tokens defined in Sass, assigned to CSS variables, and used as background colors.

SASS

<section class="palette">
  <div class="color-box primary">Primary</div>
  <div class="color-box secondary">Secondary</div>
  <div class="color-box accent">Accent</div>
</section>

SASS

$color-primary: #005f73;
$color-secondary: #0a9396;
$color-accent: #94d2bd;

:root {
  --color-primary: #{$color-primary};
  --color-secondary: #{$color-secondary};
  --color-accent: #{$color-accent};
}

.palette {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}
.color-box {
  flex: 1 1 0;
  color: white;
  font-weight: bold;
  padding: 2rem;
  border-radius: 0.5rem;
  text-align: center;
}
.primary {
  background-color: var(--color-primary);
}
.secondary {
  background-color: var(--color-secondary);
}
.accent {
  background-color: var(--color-accent);
  color: black;
}

Render Quiz - 3 Questions

After applying render_step 3, what color does the primary box background show?

A Dark teal (#005f73)

B Light mint (#94d2bd)

C White

D Transparent

Common Confusions - 3 Topics

Why doesn't changing the Sass token color immediately change the page color?

Because Sass variables are compiled once to CSS variables. You must recompile Sass and reload the page to see changes. Also, CSS variables must be used in styles to affect visuals (see render_steps 2 and 3).

💡 Sass tokens define colors but only affect visuals when assigned to CSS variables and used in styles.

Why do I need CSS variables if I already have Sass variables?

Sass variables exist only during compilation and can't change at runtime. CSS variables live in the browser and can be reused and updated dynamically, making the palette flexible (see render_steps 2 and 3).

💡 Use Sass tokens to set CSS variables, then use CSS variables in styles for live color application.

Why is the text color white on some boxes and black on others?

Text color is chosen for good contrast against the background color for readability. Dark backgrounds get white text, light backgrounds get black text (see render_step 5).

💡 Always pick text color that contrasts well with background for accessibility.

Property Reference

Property	Value Applied	Visual Effect	Common Use
$color-primary	#005f73	Dark teal background	Main brand color
$color-secondary	#0a9396	Teal background	Secondary brand color
$color-accent	#94d2bd	Light mint background	Accent highlights
--color-primary	#005f73	Used as background-color	Connect Sass tokens to CSS
background-color	var(--color-primary)	Colors the element background	Apply token colors visually

Concept Snapshot

Token-driven color palettes use Sass variables to define colors. These tokens are assigned to CSS variables in :root. CSS variables are used in styles for backgrounds and text colors. This approach separates design tokens from usage. It allows easy updates and consistent color usage. Text colors must contrast backgrounds for readability.

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