feat(ui): lift the window-level roles into the shared tokens

Merged
CH
4d ago
+331-294

Phase 2, T1: the roles the desktop and web defined for themselves, which @luke/ui already read or which keep coming back, are now shared tokens. Every reader uses the shared name.

New tokens

Profiles (desktop and web set the same values for each)

  • --luke-z-menu 20, --luke-z-dialog 30, --luke-z-tooltip 30, --luke-z-toast 31. dialog.css and tooltip.css no longer read the app's own --z-* with a fallback.
  • --luke-focus-ring-width/offset/inset/reach/room. These were defined in the desktop's base.css and read by @luke/ui with a 2px fallback.
  • --luke-menu-glyph (16px, moved out of the .luke-menu scope) and --luke-menu-shadow. The menu, the tooltip card and the diff-settings popover now read the shadow token.
  • --luke-page-measure 720px, read by DetailPage, CollectionPage and the desktop's documents (was --reading-width). --luke-settings-measure 640px, read by SettingsPage and the desktop's --settings-width readers.
  • --luke-list-gap (space-2) and --luke-type-reading-leading 1.6. The reading leading is used by the web body text and the desktop's two code blocks.

Palettes (desktop light-dark(), web light and dark)

  • --luke-color-well, --luke-color-sidebar (light #f3f3f4, dark = overlay #111114), --luke-color-sidebar-ink
  • --luke-color-attention-fill and --luke-color-on-attention (was the attention mark's ground and ink)
  • --luke-color-ink-inverse (words on a text-coloured fill: the composer's submit button and the primary sign-in button)
  • --luke-color-identity-1..6 now come in light/dark pairs; the light values are the desktop's light workspace hues
  • --luke-color-chart-1 (was the web's --chart-1)

What moved

  • Workspace hues are now the identity roles, and the workspace tile's ink is --luke-color-on-identity.
  • --settings-row-height is now --luke-settings-row-min-height. --sidebar-row-line is now --luke-type-label-leading. Both had the same value.
  • Desktop --desktop-well / --desktop-sidebar / --sidebar-ink / --list-gap / --menu-* / --reading-width / --z-* / --focus-ring-*, and the web's --chart-1: every reader moved and every definition is deleted. No aliases remain.
  • The --actor-size ladder is left for S19 (it is more than a trivial swap).

Visible changes

  • Avatar discs in light appearance (desktop and web light pages): the six identity hues shift to the light workspace hues they now share, e.g. #4f63b8 ā†’ #4a5fc0. The difference is a few RGB steps. Dark appearance and workspace tiles look the same as before.

I added no screenshots because nothing else changes on screen. No layout changes.

Tests

  • tokens.test.ts already checks that both profiles and every palette set the same set of names and that every var(--luke-*) a sheet reads is defined. It passes with the new roles. CSS-only otherwise, so no new behaviour tests.
  • pnpm check:affected passes.

Not verified on a Mac.

šŸ¤– Generated with Claude Code

Open workspace in Conductor

Devin Review

Summary by cubic

Lifts the window-level roles the desktop and web defined locally into @luke/ui's shared profiles and palettes; every reader now uses the shared names, and the local definitions and aliases are deleted.

New tokens

  • Profiles: --luke-z-menu/dialog/tooltip/toast, --luke-focus-ring-*, --luke-menu-glyph and --luke-menu-shadow, --luke-page-measure and --luke-settings-measure, --luke-list-gap, --luke-type-reading-leading.
  • Palettes: --luke-color-well, --luke-color-sidebar and --luke-color-sidebar-ink, --luke-color-attention-fill and --luke-color-on-attention, --luke-color-ink-inverse, identity hues now in light/dark pairs, --luke-color-chart-1.

Side effects

  • The terminal's ground is now hard-coded per appearance because xterm cannot read a light-dark() value.
  • Avatar discs in light appearance shift a few RGB steps to the light identity hues; nothing else changes on screen.
  • All retired local names were removed, including the desktop alias block; no compatibility names remain.