Course outline
Full-Stack course / Tools and the web

Status badges with one shared token

Lab

How to fetch and submit this exercise

Once: install the tool and connect your account.

curl -fsSL https://gonomicon.com/install.sh | sh
gonomicon login

Each exercise: download it, edit the file named in the instructions, then submit.

gonomicon fetch fs-week-1/05-04-badge-variant-tokens
cd 05-04-badge-variant-tokens
gonomicon submit

The runner depends on the exercise: JavaScript/TypeScript/React labs run with Vitest, Python labs with pytest, and config-file labs (Docker, CI, Terraform, Nginx) are checked by parsing your file. gonomicon test runs the visible checks on your computer first; submitting also runs the hidden checks on our server.

Status badges with one shared token

Build three status badges that share one style and display distinct background colors.

Worked example: The badge--ok, badge--warn, and badge--error badges each compute to a different RGB background color, and none matches the page’s default badge color.

Rules and constraints

  • Link styles.css from index.html.
  • Put exactly three status <span> elements inside <div id="badges">, using the required classes.
  • Define a default color and give each status a distinct color.
  • Use the same custom property for the badge background and the status colors. Each modifier rule should declare only that custom property.
  • Keep hex and hsl color values in the four custom-property declarations; do not add JavaScript.

What you'll practice

  • Defining and using a CSS custom property.
  • Overriding a shared value with modifier classes.
  • Checking the DOM and computed colors.

Run it

gonomicon fetch fs-week-1/05-04-badge-variant-tokens
cd 05-04-badge-variant-tokens
gonomicon test
gonomicon submit

Hints

  1. Compare the computed background colors of all three badges with one another and with the page default.
  2. Check whether the base badge rule reads the same custom property that the status classes change.
  3. Keep the four color values in the root default and the three modifier declarations; use the shared token for the badge background.
PreviousNext lesson