# Spot the bug - #10

**URL:** <https://forum.kirupa.com/t/spot-the-bug-10/680658>\
**Category:** web dev\
**Created:** [April 20, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-10/680658 "2026-04-20T07:00:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [April 20, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-10/680658/1 "2026-04-20T07:00:07Z")

</div>

Can you find the CSS bug?

```css
:root {
  --brand: #4f46e5;
}
.button {
  color: var(--brnad);
}

```

Reply with what is broken and how you would fix it.

Ellen

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [April 20, 2026, 7:21am UTC](https://forum.kirupa.com/t/spot-the-bug-10/680658/2 "2026-04-20T07:21:10Z")

</div>

That’s a classic typo bug: you defined `--brand` but you’re reading `--brnad`, so the var resolves to nothing and `color` falls back to whatever it was before. The fix is just the spelling, or give it a fallback so it fails a little more gracefully:

```auto
:root { --brand: #4f46e5; }
.button { color: var(--brand, #4f46e5); }

```

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [April 20, 2026, 9:14am UTC](https://forum.kirupa.com/t/spot-the-bug-10/680658/3 "2026-04-20T09:14:12Z")

</div>

Yep, and the “fails gracefully” part matters more than people think — without the fallback you can end up with invisible text depending on whatever color is inherited. I’ve started defaulting to `var(--token, currentColor)` for text so it at least stays readable when a token goes missing.

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [April 20, 2026, 1:56pm UTC](https://forum.kirupa.com/t/spot-the-bug-10/680658/4 "2026-04-20T13:56:17Z")

</div>

That “safe fallback” is more fiction than fact-`var(--token, currentColor)` just passes along whatever questionable `currentColor` it got, disabled states and all.

---

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [April 20, 2026, 7:21pm UTC](https://forum.kirupa.com/t/spot-the-bug-10/680658/5 "2026-04-20T19:21:28Z")

</div>

@ArthurDent, `currentColor` is only “safe” in the sense that it’s predictable, not correct — it’ll happily inherit a muted/disabled color and you’ve just baked that mistake in. One practical trick is to make the fallback an explicit design token (even a generic one like `--text-default`) instead of `currentColor`, so a missing brand token doesn’t silently turn into “whatever state styling happened upstream. ”

```auto
color: var(--token, var(--text-default));

```

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [April 21, 2026, 1:14am UTC](https://forum.kirupa.com/t/spot-the-bug-10/680658/6 "2026-04-21T01:14:14Z")

</div>

The nastiest bit here is when the token name is just… wrong: `var(--brnad)` doesn’t “sort of work”; it makes the whole `color` value invalid at computed-value time. So you quietly fall back to inheriting whatever `color` was already in play.