starred/orca
1
0
Fork 0
mirror of https://github.com/stablyai/orca.git synced 2026-10-30 08:37:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(native-chat): one set of rules for chat text size, colour, hover and focus (#26685)

Browse Source 
* fix(native-chat): put chat text on one type scale that follows Text size

Sizes were picked per component, so the same kind of row came out 12, 13 or
14px and the Text size setting reached only a few of them.

* fix(native-chat): scale chat spacing and icons with Text size

Icons and gaps stayed fixed while text grew, so at larger sizes they looked
undersized and sat off-centre.

* fix(native-chat): implement PR #26685 review fixes

- Scale row gap with text size so controls don't overlap
- Clamp 'Match terminal interface' to 12-20 for labels/controls
- Use existing --status-warning token for warning color
- Rewrite stale test for scaled typography tokens
- Use app colors for in-progress tasks in composer dock

* fix(native-chat): leave the task list's dock colour as it was

* fix(native-chat): message text follows the terminal size; controls and spacing stay in 12-20

* test(native-chat): labels and spacing follow the bounded chat size; main's new notice test uses the chat colour

---------

Co-authored-by: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
This commit is contained in:
Kelvin Amoaba
2026-10-11 20:00:31 -07:00
committed by GitHub
co-authored by Brennan Benson
parent 1a1a2a165e
commit 53bf77682c
55 changed files with 438 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/STYLEGUIDE.md
+23
View File
@@ -91,6 +91,29 @@ This keeps light/dark parity automatic.
- 12px (sub-text, paths, secondary content)
- 13px (sidebar items, dense list rows)
- 14px (default body, button text in `default` size)
- **Named small steps:** `text-2xs` (11px) and `text-3xs` (10px) are theme steps in `main.css`. Use them instead of `text-[11px]` / `text-[10px]`.
### Chat type scale
The native chat uses four steps and no others. Never write an arbitrary size (`text-[13px]`) inside `components/native-chat/`. `pnpm lint` enforces this, along with the softened-foreground and focus-ring rules below (`config/oxlint-plugins/native-chat-design-tokens.mjs`).
| Step | Default | Use it for |
| ---------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| `text-sm` | 14px | Anything the user reads: message prose, tool and agent activity rows, card titles and bodies, the composer |
| `text-xs` | 12px | Labels, timestamps, counters, secondary lines under a row |
| `text-2xs` | 11px | Captions, attribution, uppercase category labels |
| `text-3xs` | 10px | Badges and mono pills |
| `text-chat-code` | 12px | Code blocks, diffs, commands and tool output |
The chat root (`.native-chat-appearance`) redefines these steps as ratios of the Text size setting, so every tier scales together; `text-chat-code` follows the Code text size setting. The chat root also ties the spacing unit to the text size (4px at the default 14px), so icons, gaps, padding and row heights grow with the text. Use spacing-scale utilities (`size-3.5`, `min-h-6.5`, `pl-3.25`), not pixel lengths (`min-h-[26px]`), or the element stays fixed while the rest scales. Size an element with one of these utilities only: a CSS rule that sets `font-size` outside a layer silently overrides them.
### Chat text colour, hover and focus
- **Primary text on the chat canvas** uses `text-chat-foreground`, and `text-chat-foreground-strong` for titles and emphasis; both follow the Contrast setting. Don't soften `text-foreground` by hand (`text-foreground/85`). `text-foreground` is for text on a lifted surface inside the chat.
- **Secondary text on the chat canvas** (transcript rows, notices, labels between messages) uses `text-chat-foreground-faint`. `text-muted-foreground` is for text on a lifted surface inside the chat: cards, menus, popovers and the docks above the composer.
- **Row hover** in the transcript is `hover:bg-accent/20`. Buttons, menu items and card controls use `hover:bg-accent`.
- **Focus rings:** full-width transcript rows use the inset ring (`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring`) so it isn't clipped by the scroll container; standalone controls use `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`. Inside the chat `--ring` is `--chat-focus-ring`, which clears 3:1 on the canvas; don't lower its opacity.
- **State colours in the chat:** warnings use `text-chat-warning`; diff lines use `text-chat-diff-added` / `text-chat-diff-removed`. They are mixed toward the foreground so they pass text contrast in light and dark. Don't use raw palette colours (`text-yellow-500`) or the git decoration tokens for text on a tinted row.
## Radius