The token set in theme.css (lines 7-103) is missing whole categories, and app.css works around it with literals:
Hover/selected:--surface-hover is rgba(66,71,78,0.08) - about 3 RGB levels on the sidebar, practically invisible. --surface-pressed/--surface-selected are defined but used 0 times. Hover is done three different ways.
No red:--error is pale pink; reds are hard-coded as #c9403c, #da373c, #f23f43, #a12828.
Secondary text (.muted #c2c7cf) is nearly as bright as body text (#e0e2e8); Discord's timestamps are ~#949ba4.
No motion tokens: 17 transitions with 9 different durations; 7 separate reduced-motion blocks that miss several animations.
No shadow tokens: 28 distinct shadow recipes. No z-index scale: 13 values (e.g. .modal-scrim 60 sits below .verification-dialog 70 and .lightbox-backdrop 200).
Literals: 22 border-radius values (10 literal px), 19 font sizes (12 literal px, including 12/14/16/20 that have tokens), 11 off-scale spacing values, 22 hex + 14 rgba colours (the call stage uses Discord's palette directly), 14 duplicate selectors, dead rules (.account-header, .group-header, .bufferlist-footer, .footer-button, .settings-rail-item.soon).
Icons: --icon-size* unused; about 10 literal icon sizes; opsz fixed at 24, so small glyphs render thin.
Fix: add --danger, --mention, --mention-row (amber), visible --surface-hover/--surface-selected, --text-muted, --motion-fast/--motion/--motion-slow/--ease, --shadow-1..3, a --z-* scale, --radius-pill, --font-size-xs, weight tokens; one global reduced-motion rule; replace literals; remove duplicates and dead CSS; a global :focus-visible ring; Icon matches opsz to size.
Part of the v1.0 UI pass.
The token set in `theme.css` (lines 7-103) is missing whole categories, and `app.css` works around it with literals:
- **Hover/selected:** `--surface-hover` is `rgba(66,71,78,0.08)` - about 3 RGB levels on the sidebar, practically invisible. `--surface-pressed`/`--surface-selected` are defined but used 0 times. Hover is done three different ways.
- **No red:** `--error` is pale pink; reds are hard-coded as `#c9403c`, `#da373c`, `#f23f43`, `#a12828`.
- **Secondary text** (`.muted` #c2c7cf) is nearly as bright as body text (#e0e2e8); Discord's timestamps are ~#949ba4.
- **No motion tokens:** 17 transitions with 9 different durations; 7 separate reduced-motion blocks that miss several animations.
- **No shadow tokens:** 28 distinct shadow recipes. **No z-index scale:** 13 values (e.g. `.modal-scrim` 60 sits below `.verification-dialog` 70 and `.lightbox-backdrop` 200).
- **Literals:** 22 border-radius values (10 literal px), 19 font sizes (12 literal px, including 12/14/16/20 that have tokens), 11 off-scale spacing values, 22 hex + 14 rgba colours (the call stage uses Discord's palette directly), 14 duplicate selectors, dead rules (`.account-header`, `.group-header`, `.bufferlist-footer`, `.footer-button`, `.settings-rail-item.soon`).
- Icons: `--icon-size*` unused; about 10 literal icon sizes; `opsz` fixed at 24, so small glyphs render thin.
**Fix:** add `--danger`, `--mention`, `--mention-row` (amber), visible `--surface-hover`/`--surface-selected`, `--text-muted`, `--motion-fast/--motion/--motion-slow/--ease`, `--shadow-1..3`, a `--z-*` scale, `--radius-pill`, `--font-size-xs`, weight tokens; one global reduced-motion rule; replace literals; remove duplicates and dead CSS; a global `:focus-visible` ring; `Icon` matches `opsz` to size.
_Part of the v1.0 UI pass._
Salastil
added this to the v1.0 milestone 2026-10-07 20:43:01 -04:00
Before and after, captured by scripts/ui-shots.mjs from an isolated copy of the app (before = 88375ba, after = 3cdfe37). The token work is 9db25c8 (theme.css) and 3cdfe37 (the stylesheet pass).
Hover over a channel
--surface-hover was about 3 RGB levels off the sidebar; the pointer over dev is now clearly visible, and the selected row (general) is unchanged.
Hover over a member
Same fill on the member list.
Whole IRC channel, Comfy
Timestamps and the join/part lines use the quieter muted colour; everything else looks the same, which is the intent of a token pass.
Discord-shaped guild
Same screen with the new tokens; the mention badge is still blue here because switching it to red is #284.
What changed:theme.css gained visible hover/pressed/selected fills, a real red and an amber mention tint, a quieter text colour, motion, shadow, z-index, radius, font-size and weight tokens, a keyboard focus ring and one reduced-motion rule. app.css now uses them for colours (35 shadows collapsed to 4, 16 layers named, 18 transitions on 3 durations, 55+ font-weights, radii and sizes), the status dot / voice level classes no longer collide with the avatar dot and the voice recorder, dead rules are gone, and Icon draws glyphs at their own optical size.
Not done: the call stage's Discord-brand colours (#5865f2, #2b2d31, ...) are left as they are - they are that screen's own look. Duplicate rules whose order matters (.message-row, .emoji-empty) were left alone rather than risk changing the cascade; they are harmless.
Motion: the transitions now use the shared durations but nothing new animates yet; that is #283.
Before and after, captured by `scripts/ui-shots.mjs` from an isolated copy of the app (before = `88375ba`, after = `3cdfe37`). The token work is `9db25c8` (theme.css) and `3cdfe37` (the stylesheet pass).
**Hover over a channel**
`--surface-hover` was about 3 RGB levels off the sidebar; the pointer over `dev` is now clearly visible, and the selected row (`general`) is unchanged.
**Hover over a member**
Same fill on the member list.
**Whole IRC channel, Comfy**
Timestamps and the join/part lines use the quieter muted colour; everything else looks the same, which is the intent of a token pass.
**Discord-shaped guild**
Same screen with the new tokens; the mention badge is still blue here because switching it to red is #284.
**What changed:** `theme.css` gained visible hover/pressed/selected fills, a real red and an amber mention tint, a quieter text colour, motion, shadow, z-index, radius, font-size and weight tokens, a keyboard focus ring and one reduced-motion rule. `app.css` now uses them for colours (35 shadows collapsed to 4, 16 layers named, 18 transitions on 3 durations, 55+ font-weights, radii and sizes), the status dot / voice level classes no longer collide with the avatar dot and the voice recorder, dead rules are gone, and `Icon` draws glyphs at their own optical size.
**Not done:** the call stage's Discord-brand colours (`#5865f2`, `#2b2d31`, ...) are left as they are - they are that screen's own look. Duplicate rules whose order matters (`.message-row`, `.emoji-empty`) were left alone rather than risk changing the cascade; they are harmless.
**Motion:** the transitions now use the shared durations but nothing new animates yet; that is #283.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
The token set in
theme.css(lines 7-103) is missing whole categories, andapp.cssworks around it with literals:--surface-hoverisrgba(66,71,78,0.08)- about 3 RGB levels on the sidebar, practically invisible.--surface-pressed/--surface-selectedare defined but used 0 times. Hover is done three different ways.--erroris pale pink; reds are hard-coded as#c9403c,#da373c,#f23f43,#a12828..muted#c2c7cf) is nearly as bright as body text (#e0e2e8); Discord's timestamps are ~#949ba4..modal-scrim60 sits below.verification-dialog70 and.lightbox-backdrop200)..account-header,.group-header,.bufferlist-footer,.footer-button,.settings-rail-item.soon).--icon-size*unused; about 10 literal icon sizes;opszfixed at 24, so small glyphs render thin.Fix: add
--danger,--mention,--mention-row(amber), visible--surface-hover/--surface-selected,--text-muted,--motion-fast/--motion/--motion-slow/--ease,--shadow-1..3, a--z-*scale,--radius-pill,--font-size-xs, weight tokens; one global reduced-motion rule; replace literals; remove duplicates and dead CSS; a global:focus-visiblering;Iconmatchesopszto size.Part of the v1.0 UI pass.
Before and after, captured by
scripts/ui-shots.mjsfrom an isolated copy of the app (before =88375ba, after =3cdfe37). The token work is9db25c8(theme.css) and3cdfe37(the stylesheet pass).Hover over a channel
--surface-hoverwas about 3 RGB levels off the sidebar; the pointer overdevis now clearly visible, and the selected row (general) is unchanged.Hover over a member
Same fill on the member list.
Whole IRC channel, Comfy
Timestamps and the join/part lines use the quieter muted colour; everything else looks the same, which is the intent of a token pass.
Discord-shaped guild
Same screen with the new tokens; the mention badge is still blue here because switching it to red is #284.
What changed:
theme.cssgained visible hover/pressed/selected fills, a real red and an amber mention tint, a quieter text colour, motion, shadow, z-index, radius, font-size and weight tokens, a keyboard focus ring and one reduced-motion rule.app.cssnow uses them for colours (35 shadows collapsed to 4, 16 layers named, 18 transitions on 3 durations, 55+ font-weights, radii and sizes), the status dot / voice level classes no longer collide with the avatar dot and the voice recorder, dead rules are gone, andIcondraws glyphs at their own optical size.Not done: the call stage's Discord-brand colours (
#5865f2,#2b2d31, ...) are left as they are - they are that screen's own look. Duplicate rules whose order matters (.message-row,.emoji-empty) were left alone rather than risk changing the cascade; they are harmless.Motion: the transitions now use the shared durations but nothing new animates yet; that is #283.
Finished: 9db25c8, 3cdfe37. Before/after above.