Files

T

jpmschweitzerandClaude 29ac9b3caf consolidate theme-ui into ui-design skill (T-85)

Replaces the single-file theme-ui skill with a routed ui-design skill
backed by four references:

- theme.md      — token system, identity rule, palette layers, type
- surface.md    — token selection per surface (chrome, panels, tabs,
                  buttons, status, overlays)
- geometry.md   — control spacing/alignment principles distilled from
                  the MultitabPane work: uniform inner spacing rule,
                  no double-edge padding, two-column control pattern,
                  perceived mass over measured pixels
- icons.md      — Phosphor icons + clide-owned painters

SKILL.md routes to the right reference and holds the universal rules.
The trigger description widens to cover spacing/alignment questions
in addition to token selection.

geometry.md references T-86 (codify spacing constants); the doc uses
literal pixel values until those constants land.

Co-Authored-By: Claude <noreply@anthropic.com>

2026-05-06 15:38:19 +02:00

3.5 KiB

Raw Blame History

Surface — token selection per surface type

Pick tokens based on where the widget lives, not what it does.

Chrome (hat bar, status bar, sidebar, context panel, spines, drag handles)

background   → chromeBackground
text         → chromeForeground
border       → chromeBorder (1px)
active text  → globalForeground

Side panels (sidebar, context panel)

background   → chromeBackground (both sides — they're chrome frame)
text         → sidebarForeground
hover        → sidebarItemHover
selected     → sidebarItemSelected
section head → sidebarSectionHeader (muted, used for "START", "FILES", etc.)

Padding: 2px on outer edges, 0px on divider edge.

Center column (workspace, Claude pane, editor)

background   → panelBackground
text         → globalForeground

No padding — content fills edge to edge.

Pane headers (`ClidePaneChrome`)

background   → panelHeader
text (title) → panelHeaderForeground
text (sub)   → globalTextMuted

Tabs (`MultitabPane`, `ClideTabBar`)

strip bg     → tabBarBackground
strip border → bottom: dividerColor (anchors strip to body)
active fg    → tabActiveForeground
inactive fg  → tabInactiveForeground
active bg    → panelHeader (elevated chrome)
inactive bg  → tabBarBackground (blends with strip)
active border→ panelActiveBorder (top accent, 1.5px)
side border  → panelBorder

For control geometry inside tabs (close button placement, padding, two-column title+action layout) see geometry.md.

List items (decisions, tickets, file rows, backlinks)

background   → (none / transparent)
hover bg     → listItemHoverBackground
selected bg  → listItemSelectedBackground
text         → listItemForeground / sidebarForeground (in sidebar)
selected txt → listItemSelectedForeground

In sidebar context, use sidebarItemHover not listItemHoverBackground.

Buttons

normal       → buttonBackground / buttonForeground / buttonBorder
hover        → buttonHoverBackground
active       → buttonActiveBackground
primary      → buttonActiveBackground bg + globalBackground text
subtle       → listItemBackground / listItemHoverBackground (no border)

Dividers and separators

line         → dividerColor (always, everywhere)
drag handle  → 8px hit area, 1px visible line, panel bg fill
hover line   → panelActiveBorder

Status indicators

success/ok   → statusSuccess (green: done, added, connected)
warning      → statusWarning (amber: question, modified, missing)
error        → statusError   (red:   deleted, rejected, cancelled)
info         → statusInfo    (blue:  in_progress, modified)

Map semantic states, not visual styles:

done / added / ok → statusSuccess
in_progress / modified → statusInfo
question / warning → statusWarning
cancelled / deleted / error → statusError

Overlays (dialogs, palette, tooltips)

dialog bg    → modalSurfaceBackground
dialog border→ modalSurfaceBorder
backdrop     → modalOverlayBackground
tooltip      → tooltipBackground / tooltipForeground / tooltipBorder
dropdown     → dropdownBackground / dropdownForeground / dropdownBorder

Anti-patterns

globalBackground for panel fill → use panelBackground
listItemHoverBackground in sidebar → use sidebarItemHover
Tab active bg = panelBackground → use panelHeader (elevated chrome)
Tab active border = globalFocus → use panelActiveBorder

3.5 KiB Raw Blame History