mirror of
https://github.com/stablyai/orca.git
synced 2026-11-13 17:37:40 +00:00
Neil
26741256dc
* fix(sidebar): keep the selected card's host pill outline visible in dim themes #38841 tinted the host pill outline 40% of the sidebar text into the sidebar. A theme whose sidebar text is only 4.5:1 leaves that outline at about 1.6:1 against the selected wash, which matches the pill's fill, so the pill loses its shape. When an app theme is painted, its colors are now concrete, so compute once per theme the smallest mix (from 40%) that gives the outline 2:1 against the selected wash, the same floor focus rings use, and paint it as --worktree-host-pill-outline-mix. main.css falls back to 40%, so Orca's built-in themes and any theme bright enough keep today's look. The tinted sidebar resets it, like the row wash. The wash's CSS fallback joins the fallback table so the check (and the token reference) read what main.css paints. Refs #38641 * fix(sidebar): floor the host pill outline in the tinted left sidebar too The tinted sidebar paints the app's text on its tint mixed into the app background, so the theme's measured outline mix doesn't apply there and it fell back to 40%: a dim theme (#919191 on #2a2a2a) at the default 8% tint left the outline at 1.6:1 on the selected wash. Measure the tinted colors once whenever the app theme or tint settings change, paint the result as a root variable, and have the tinted sidebar read it. Share the measurement (hostPillOutlineMixOver) with the theme path, and make its comment name the actual invariant instead of the pill label's contrast. Refs #38641
102 lines
7.6 KiB
Markdown
102 lines
7.6 KiB
Markdown
# Orca app theme tokens
|
|
|
|
<!-- Generated by `pnpm generate:plugin-schemas` from src/shared/plugins. Do not edit. -->
|
|
|
|
Every key an app theme may set in `tokens` (see [plugin themes](plugin-themes.md)). Any other key is refused. An omitted token falls back as listed; when that source is omitted too, it falls back the same way in turn.
|
|
|
|
| Token | Paints | Required | When omitted |
|
|
| --- | --- | --- | --- |
|
|
| `--background` | App canvas | yes | |
|
|
| `--editor-surface` | Code editor and notebook background | no | same as `--background` |
|
|
| `--foreground` | Body text | yes | |
|
|
| `--card` | Cards and panels | no | same as `--background` |
|
|
| `--card-foreground` | Text on `--card` | no | same as `--foreground` |
|
|
| `--popover` | Menus, popovers and dialogs | no | same as `--card` |
|
|
| `--popover-foreground` | Text on `--popover` | no | same as `--card-foreground` |
|
|
| `--primary` | Primary buttons | no | same as `--foreground` |
|
|
| `--primary-foreground` | Text on `--primary` | no | same as `--background` |
|
|
| `--secondary` | Secondary buttons | no | same as `--muted` |
|
|
| `--secondary-foreground` | Text on `--secondary` | no | same as `--foreground` |
|
|
| `--muted` | Quiet fills | no | same as `--secondary` |
|
|
| `--muted-foreground` | Secondary text | no | `--foreground` mixed 70% into `--background` |
|
|
| `--accent` | Hover and selected fills | no | `--foreground` mixed 12% into `--background` |
|
|
| `--accent-foreground` | Text on `--accent` | no | same as `--foreground` |
|
|
| `--border` | Borders and separators | no | `--foreground` mixed 16% into `--background` |
|
|
| `--input` | Input borders | no | same as `--border` |
|
|
| `--ring` | Focus rings | no | same as `--primary` |
|
|
| `--chart-1` | Chart series 1 | no | same as `--primary` |
|
|
| `--chart-2` | Chart series 2 | no | Orca's built-in color |
|
|
| `--chart-3` | Chart series 3 | no | Orca's built-in color |
|
|
| `--chart-4` | Chart series 4 | no | Orca's built-in color |
|
|
| `--chart-5` | Chart series 5 | no | Orca's built-in color |
|
|
| `--sidebar` | Right sidebar and settings navigation | no | `--foreground` mixed 8% into `--background` |
|
|
| `--sidebar-foreground` | Text on `--sidebar` | no | same as `--foreground` |
|
|
| `--sidebar-primary` | Primary controls in sidebars | no | same as `--primary` |
|
|
| `--sidebar-primary-foreground` | Text on `--sidebar-primary` | no | same as `--primary-foreground` |
|
|
| `--sidebar-accent` | Hover and selected rows in sidebars | no | same as `--accent` |
|
|
| `--sidebar-accent-foreground` | Text on `--sidebar-accent` | no | same as `--accent-foreground` |
|
|
| `--sidebar-border` | Sidebar borders | no | same as `--border` |
|
|
| `--sidebar-ring` | Focus rings in sidebars | no | same as `--ring` |
|
|
| `--worktree-sidebar` | Left workspace sidebar | no | same as `--sidebar` |
|
|
| `--worktree-sidebar-foreground` | Text on `--worktree-sidebar` | no | same as `--sidebar-foreground` |
|
|
| `--worktree-sidebar-accent` | Hover and multi-selected rows in the workspace sidebar | no | same as `--sidebar-accent` |
|
|
| `--worktree-sidebar-accent-foreground` | Text on `--worktree-sidebar-accent` | no | same as `--sidebar-accent-foreground` |
|
|
| `--worktree-sidebar-border` | Workspace sidebar borders | no | same as `--sidebar-border` |
|
|
| `--worktree-sidebar-ring` | Focus rings in the workspace sidebar | no | same as `--sidebar-ring` |
|
|
| `--worktree-sidebar-active` | The current workspace row; may be translucent, it paints over `--worktree-sidebar` | no | light: `--worktree-sidebar-foreground` at 8% opacity; dark: `--worktree-sidebar-foreground` at 10% opacity |
|
|
| `--worktree-sidebar-active-border` | Border of the current workspace row | no | a mix of `--worktree-sidebar-border` |
|
|
| `--host-badge` | Execution-host badge on workspaces (for example `Local`, an SSH host) | no | light: same as `--accent`; dark: `--accent` at 80% opacity |
|
|
| `--host-badge-foreground` | Text on `--host-badge` | no | same as `--muted-foreground` |
|
|
| `--tab-bar` | Strip behind tabs, including the title bar when tabs sit in it | no | same as `--card` |
|
|
| `--tab-active` | Active tab | no | light: same as `--tab-bar`; dark: `--foreground` mixed 6% into `--tab-bar` |
|
|
| `--tab-active-foreground` | Active tab text, and inactive tab text on hover | no | same as `--foreground` |
|
|
| `--tab-active-indicator` | Line under the active tab | no | same as `--tab-active-foreground` |
|
|
| `--tab-inactive` | Inactive tabs | no | light: `--foreground` mixed 4% into `--tab-bar`; dark: same as `--tab-bar` |
|
|
| `--tab-inactive-foreground` | Inactive tab text | no | same as `--muted-foreground` |
|
|
| `--split-divider` | Divider between split tab groups | no | Orca's built-in color |
|
|
| `--split-divider-hover` | Split divider while hovered or dragged | no | Orca's built-in color |
|
|
| `--chat-user-message` | Your messages in chat; may be translucent, it paints over the chat | no | `--foreground` mixed lightly into the chat background |
|
|
| `--text-link` | Links in Markdown previews, editors and agent chat | no | Orca's built-in color |
|
|
| `--diff-added` | Added-line hue: Monaco overview ruler and chat diff text | no | same as `--git-decoration-added` |
|
|
| `--diff-added-background` | Added lines in diffs | no | light: `--diff-added` at 13% opacity; dark: `--diff-added` at 16% opacity |
|
|
| `--diff-added-emphasis` | Added characters within a changed line | no | light: `--diff-added` at 15% opacity; dark: `--diff-added` at 20% opacity |
|
|
| `--diff-added-gutter` | Gutter beside added lines | no | light: `--diff-added` at 26% opacity; dark: `--diff-added` at 30% opacity |
|
|
| `--diff-removed` | Removed-line hue: Monaco overview ruler and chat diff text | no | same as `--git-decoration-deleted` |
|
|
| `--diff-removed-background` | Removed lines in diffs | no | light: `--diff-removed` at 11% opacity; dark: `--diff-removed` at 18% opacity |
|
|
| `--diff-removed-emphasis` | Removed characters within a changed line | no | light: `--diff-removed` at 15% opacity; dark: `--diff-removed` at 20% opacity |
|
|
| `--diff-removed-gutter` | Gutter beside removed lines | no | light: `--diff-removed` at 22% opacity; dark: `--diff-removed` at 32% opacity |
|
|
| `--git-decoration-added` | Added files in the file explorer and source control | no | Orca's built-in color |
|
|
| `--git-decoration-modified` | Modified files | no | Orca's built-in color |
|
|
| `--git-decoration-deleted` | Deleted files | no | Orca's built-in color |
|
|
| `--git-decoration-renamed` | Renamed files | no | Orca's built-in color |
|
|
| `--git-decoration-untracked` | Untracked files | no | Orca's built-in color |
|
|
| `--git-decoration-copied` | Copied files | no | Orca's built-in color |
|
|
| `--git-decoration-ignored` | Git-ignored files | no | Orca's built-in color |
|
|
|
|
## Frame CSS variables
|
|
|
|
Panel and custom editor frames get these stable variables, set from Orca's active theme and updated in place when it changes. Other tokens are not exposed to frames.
|
|
|
|
| Variable | Orca token |
|
|
| --- | --- |
|
|
| `--orca-background` | `--background` |
|
|
| `--orca-foreground` | `--foreground` |
|
|
| `--orca-card` | `--card` |
|
|
| `--orca-card-foreground` | `--card-foreground` |
|
|
| `--orca-popover` | `--popover` |
|
|
| `--orca-popover-foreground` | `--popover-foreground` |
|
|
| `--orca-primary` | `--primary` |
|
|
| `--orca-primary-foreground` | `--primary-foreground` |
|
|
| `--orca-secondary` | `--secondary` |
|
|
| `--orca-secondary-foreground` | `--secondary-foreground` |
|
|
| `--orca-muted` | `--muted` |
|
|
| `--orca-muted-foreground` | `--muted-foreground` |
|
|
| `--orca-accent` | `--accent` |
|
|
| `--orca-accent-foreground` | `--accent-foreground` |
|
|
| `--orca-destructive` | `--destructive` |
|
|
| `--orca-destructive-foreground` | `--destructive-foreground` |
|
|
| `--orca-border` | `--border` |
|
|
| `--orca-input` | `--input` |
|
|
| `--orca-ring` | `--ring` |
|
|
| `--orca-radius` | `--radius` |
|