starred/orca
1
0
Fork 0
mirror of https://github.com/stablyai/orca.git synced 2026-11-15 10:27:33 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
738aca59367ba1cd1ff75367bb0abbfd391a6d5d
orca/docs/reference/plugin-theme-tokens.md
T
Adarsh KumarandNeil c3a163add6 fix(theme): respect theme accents on the active sidebar tool and keep selected titles at full contrast (#36881) 
* Use theme colors for active workspace selections

* Check dedicated upstream selection token overrides

* fix(theme): keep active sidebar accents legible

* fix(sidebar): preserve selected title contrast in card templates

* test(sidebar): require both active tool layouts in contrast fixture

* fix(theme): keep built-in sidebar colors and mark active tools with the tab indicator token

- Active right-sidebar tools keep the foreground icon; their top/side line uses
  --tab-active-indicator, so plugin theme accents show while built-in themes
  paint exactly as before.
- Restore main's tinted sidebar resolver: 0% tint is the app background again.
  Themes that want their own sidebar colors use the Default appearance.
- Drop the resolver tests (main removed this file as low value) and keep the
  fixture presentational.

* fix(theme): gate the active tool line on the sidebar and fall back to the foreground

- Check --tab-active-indicator against --sidebar too, since the same line now
  marks the active right sidebar tool.
- The tool line falls back to --foreground (never --tab-active-foreground), so
  themes without an indicator paint exactly as before.
- Mark the active tool with aria-current like the overflow menu; it selects a
  view rather than toggling one.

* fix(fixtures): follow the activity bar move in the theme selection fixture

* docs(plugins): note the tool line's own fallback for the tab indicator token

---------

Co-authored-by: Neil <neil@stably.ai>
2026-11-14 15:53:38 -08:00

110 lines
8.9 KiB
Markdown
Raw Blame History

# 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 marking the active tab and the active right sidebar tool | no | tab line: same as `--tab-active-foreground`; right sidebar tool line: same as `--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 |
| `--chat-bold-foreground` | Bold text in chat messages | no | the chat text color around it |
| `--chat-muted-foreground` | Secondary chat text: tool rows, status lines, timestamps and hunk headers | no | `--muted-foreground` as chat paints it |
| `--chat-inline-code` | Inline code in chat; may be translucent, it paints over the chat | no | `--foreground` mixed lightly into the chat background |
| `--chat-inline-code-foreground` | Inline code text in chat | no | `--foreground` mixed 85% into the chat background |
| `--chat-code-block` | Code blocks, tool output and diffs in chat; may be translucent, it paints over the chat | no | `--foreground` mixed lightly into the chat background |
| `--chat-selection` | Selected text in chat; may be translucent, it paints over the chat | no | `--text-link` (else Orca's link blue) mixed into the chat background, up to 30% light and 40% dark, as deep as keeps selected text 4.5:1 (never under 15%) |
| `--chat-selection-foreground` | Text inside a chat selection | no | same as `--foreground` |
| `--text-link` | Links in Markdown previews, editors and agent chat | no | Orca's built-in color |
| `--editor-selection` | Selected text in the code editor; keep it translucent so find matches show through. An unfocused editor shows it at half its opacity | no | `--ring` at 30% opacity |
| `--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` |
Reference in New Issue View Git Blame Copy Permalink