css · level 3 check

a themeable component set.

Time to ship. You are finishing the component set for Fern, a plant shop: a button, a badge and three cards, one with a photo, one without, and one inside a dark theme. Every colour and space comes from tokens, and the dark theme must work by swapping tokens alone.

Fill in each `____`. Rank the layers so `utilities` comes last, point `--action-bg` at the `--green-700` primitive, give `.theme-dark` the `--ink-900` surface, and give the badge `--green-200` as a fallback in case a page never sets `--badge-bg`.

Then mark cards with no image using `:not()` and `:has()`, draw the focus ring from the `--focus` token, and switch the button's animation off for visitors who asked for reduced motion. Run it after each blank.

the page you’re styling

<main class="shop">
  <button class="btn">Add to basket</button>
  <span class="badge">New</span>
  <div class="card">
    <img src="tree.svg" alt="An olive tree">
    <h3 class="title u-flush">Olive tree</h3>
  </div>
  <div class="card">
    <h3 class="title">Seed kit</h3>
  </div>
  <section class="theme-dark">
    <div class="card">
      <h3 class="title">Night orchid</h3>
    </div>
  </section>
</main>

Your code

@layer reset, components, ____;
:root {
  --green-700: #0f766e;
  --green-200: #a7f3d0;
  --ink-900: #111827;
  --ink-050: #f9fafb;
  --space: 4px;
  --surface: #ffffff;
  --text: var(--ink-900);
  --action-bg: var(____);
  --focus: #1d4ed8;
}
.theme-dark {
  --surface: ____;
  --text: var(--ink-050);
  --focus: #93c5fd;
}
@layer reset {
  :where(h3) {
    margin: 0;
  }
}
@layer components {
  .btn {
    padding: calc(var(--space) * 3) calc(var(--space) * 5);
    border: 0;
    color: white;
    background-color: var(--action-bg);
    animation: pop 0.3s ease-out both;
  }
  .btn:focus-visible {
    outline: 3px solid var(____);
    outline-offset: 2px;
  }
  .badge {
    padding-inline: calc(var(--space) * 2);
    background-color: var(--badge-bg, ____);
  }
  .card {
    padding: calc(var(--space) * 4);
    color: var(--text);
    background-color: var(--surface);
  }
  .card .title {
    margin-block: calc(var(--space) * 2);
  }
  .card:not(____) {
    border-top: 6px solid var(--action-bg);
  }
}
@layer utilities {
  .u-flush {
    margin: 0;
  }
}
@keyframes pop {
  from { scale: 0.9; }
  to { scale: 1; }
}
@media (prefers-reduced-motion: ____) {
  .btn {
    animation: none;
  }
}

Fill in every ____ then run the checks.

Run the checks to see your page here.

1 The button is built from tokensuses: custom properties
2 The dark theme swaps tokens, not rulesuses: themes
3 Utilities win because of the layer orderuses: cascade layers
4 Cards without a photo still look finisheduses: :has()
5 The badge survives a missing tokenuses: fallbacks
6 Keyboard and motion settings are respecteduses: accessibility

Take as long as you like and try as many times as you want.

a themeable component set.

level up.

playground