feat: BooCode 2.0 UI — Ember theme, brand banner, coder tabs, model-attribution chips
- Ember theme (Obsidian charcoal + #ff7a18 orange), now DEFAULT_THEME_ID; server theme_id whitelist gains 'ember' - Brand banner: transparent Westie mascot + >_BooCode wordmark, big/edge-to-edge (flood-filled to transparency + cropped) - Coder panes are multi-tab: + opens a BooCode tab, split opens a pane (shared ChatTabBar via tabKind + createCoderTab; closeOtherTabs/tab-numbering extended to coder) - Model-attribution: new messages.model column stamped at finalizeCompletion (BooChat/native coder) + dispatcher assistant-row creation (external coder); surfaced via view + wire types + live frame; rendered as a subtle shortened-name chip (shortenModelName) - Composer Web toggle moved into a boxed focus-ringed input; glowing accent dot on tool rows - Claude SDK follow-ups (1M context, follow-up-message fix, collapsed thinking/tool chips) + CLAUDE_SDK_BACKEND=1 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -25,6 +25,7 @@
|
||||
@import "./themes/chalk.css";
|
||||
@import "./themes/cobalt.css";
|
||||
@import "./themes/midnight-sapphire.css";
|
||||
@import "./themes/ember.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
|
||||
76
apps/web/src/styles/themes/ember.css
Normal file
76
apps/web/src/styles/themes/ember.css
Normal file
@@ -0,0 +1,76 @@
|
||||
/* BooCode Ember (family: Amber) — the signature brand theme. Mirrors the
|
||||
Obsidian theme's flat charcoal structure (same neutrals, flat hairline
|
||||
borders), with ember orange (--accent #ff7a18) swapped in for Obsidian's
|
||||
purple. Dark anchors: #0c0c0e #15151a #1f1f23 #6b6b75 #ff7a18. */
|
||||
.theme-ember {
|
||||
--background: #fafafa;
|
||||
--foreground: #18181b;
|
||||
--card: #f4f4f5;
|
||||
--card-foreground: #18181b;
|
||||
--popover: #f4f4f5;
|
||||
--popover-foreground: #18181b;
|
||||
--primary: #e25f00;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e4e4e7;
|
||||
--secondary-foreground: #18181b;
|
||||
--muted: #e4e4e7;
|
||||
--muted-foreground: #71717a;
|
||||
--accent: #e25f00;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e4e4e7;
|
||||
--input: #e4e4e7;
|
||||
--ring: #e25f00;
|
||||
--sidebar: #f4f4f5;
|
||||
--sidebar-foreground: #18181b;
|
||||
--sidebar-primary: #e25f00;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #e4e4e7;
|
||||
--sidebar-accent-foreground: #18181b;
|
||||
--sidebar-border: #e4e4e7;
|
||||
--sidebar-ring: #e25f00;
|
||||
}
|
||||
.theme-ember.dark {
|
||||
--background: #0c0c0e;
|
||||
--foreground: #ece9f0;
|
||||
--card: #15151a;
|
||||
--card-foreground: #ece9f0;
|
||||
--popover: #15151a;
|
||||
--popover-foreground: #ece9f0;
|
||||
--primary: #ff7a18;
|
||||
--primary-foreground: #120a04;
|
||||
--secondary: #1f1f23;
|
||||
--secondary-foreground: #ece9f0;
|
||||
--muted: #1f1f23;
|
||||
--muted-foreground: #6b6b75;
|
||||
--accent: #ff7a18;
|
||||
--accent-foreground: #120a04;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #1f1f23;
|
||||
--input: #1f1f23;
|
||||
--ring: #ff7a18;
|
||||
--sidebar: #15151a;
|
||||
--sidebar-foreground: #ece9f0;
|
||||
--sidebar-primary: #ff7a18;
|
||||
--sidebar-primary-foreground: #120a04;
|
||||
/* Softened selected/hover surface — a faint accent tint, NOT the solid bright
|
||||
accent Obsidian uses (per your earlier "selected button shouldn't be solid
|
||||
orange"). Set --sidebar-accent: #ff7a18 + foreground #120a04 for parity. */
|
||||
--sidebar-accent: color-mix(in oklab, #ff7a18 16%, transparent);
|
||||
--sidebar-accent-foreground: #ece9f0;
|
||||
--sidebar-border: #1f1f23;
|
||||
--sidebar-ring: #ff7a18;
|
||||
}
|
||||
|
||||
/* User message bubble: a dark surface card with a 2px accent right-edge — not
|
||||
the solid-orange fill (per your earlier preference). Remove this block to get
|
||||
the Obsidian-style solid-accent bubble. */
|
||||
.theme-ember.dark .boo-user-bubble {
|
||||
background: var(--popover);
|
||||
color: var(--foreground);
|
||||
border: 1px solid var(--border);
|
||||
border-right: 2px solid var(--primary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
Reference in New Issue
Block a user