+
Sign in
diff --git a/apps/web/app/team-chat.css b/apps/web/app/team-chat.css index d155aced7..997901dd3 100644 --- a/apps/web/app/team-chat.css +++ b/apps/web/app/team-chat.css @@ -12,7 +12,7 @@ .team-rail { --team-line: rgba(237, 238, 240, 0.09); --team-line-strong: rgba(237, 238, 240, 0.16); - --team-accent: #1b63b3; + --team-accent: var(--gold, #1b63b3); --team-online: #3fbf7a; display: flex; flex-direction: column; @@ -57,7 +57,7 @@ .team-rail-expand:hover { border-color: var(--team-accent); - background: rgba(27, 99, 179, 0.16); + background: rgba(var(--accent-rgb), 0.16); } .team-rail-expand-badge { @@ -68,7 +68,7 @@ padding: 0 4px; border-radius: 999px; background: var(--team-accent); - color: #f7f3e8; + color: var(--codev-on-gold); font-size: 10px; font-weight: 700; line-height: 16px; @@ -135,9 +135,9 @@ .team-rail-error { margin: 0; padding: 6px 8px; - border: 1px solid rgba(27, 99, 179, 0.35); + border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 7px; - background: rgba(27, 99, 179, 0.1); + background: rgba(var(--accent-rgb), 0.1); color: #f2c3a6; font-size: 11px; } @@ -221,7 +221,7 @@ .team-status-emoji-option.is-selected { border-color: var(--team-accent); - background: rgba(27, 99, 179, 0.18); + background: rgba(var(--accent-rgb), 0.18); } .team-status-row { @@ -246,7 +246,7 @@ .team-composer textarea:focus-visible { border-color: var(--team-accent); outline: none; - box-shadow: 0 0 0 2px rgba(27, 99, 179, 0.2); + box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2); } .team-status-save { @@ -331,9 +331,9 @@ place-items: center; width: 26px; height: 26px; - border: 1px solid rgba(27, 99, 179, 0.4); + border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: 50%; - background: rgba(27, 99, 179, 0.16); + background: rgba(var(--accent-rgb), 0.16); color: #f0b28c; } @@ -437,8 +437,8 @@ } .team-channel.is-active { - border-color: rgba(27, 99, 179, 0.45); - background: rgba(27, 99, 179, 0.14); + border-color: rgba(var(--accent-rgb), 0.45); + background: rgba(var(--accent-rgb), 0.14); } .team-channel-name { @@ -465,7 +465,7 @@ padding: 0 5px; border-radius: 999px; background: var(--team-accent); - color: #f7f3e8; + color: var(--codev-on-gold); font-size: 9.5px; font-weight: 700; line-height: 15px; @@ -540,7 +540,7 @@ border: none; border-radius: 6px; background: var(--team-accent); - color: #f7f3e8; + color: var(--codev-on-gold); cursor: pointer; font-size: 10px; font-weight: 700; @@ -562,7 +562,7 @@ .team-rail-foot code { padding: 0 3px; border-radius: 4px; - background: rgba(27, 99, 179, 0.18); + background: rgba(var(--accent-rgb), 0.18); color: #f0b28c; font-size: 9.5px; } @@ -639,9 +639,9 @@ align-items: center; gap: 4px; padding: 1px 6px; - border: 1px solid rgba(27, 99, 179, 0.35); + border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 999px; - background: rgba(27, 99, 179, 0.12); + background: rgba(var(--accent-rgb), 0.12); color: #f0b28c; font-size: 9.5px; font-weight: 600; @@ -687,7 +687,7 @@ .team-conversation-notice code { padding: 0 3px; border-radius: 4px; - background: rgba(27, 99, 179, 0.18); + background: rgba(var(--accent-rgb), 0.18); color: #f0b28c; } @@ -729,7 +729,7 @@ .team-message-tag { padding: 0 5px; border-radius: 999px; - background: rgba(27, 99, 179, 0.2); + background: rgba(var(--accent-rgb), 0.2); color: #f0b28c; font-size: 8.5px; font-weight: 700; @@ -747,9 +747,9 @@ .team-message.is-agent .team-message-body { padding: 7px 9px; - border-left: 2px solid rgba(27, 99, 179, 0.5); + border-left: 2px solid rgba(var(--accent-rgb), 0.5); border-radius: 0 8px 8px 0; - background: rgba(27, 99, 179, 0.08); + background: rgba(var(--accent-rgb), 0.08); } .team-mention { @@ -761,7 +761,7 @@ } .team-mention.is-agent { - background: rgba(27, 99, 179, 0.22); + background: rgba(var(--accent-rgb), 0.22); color: #f4bd99; } @@ -810,9 +810,9 @@ align-items: center; gap: 5px; padding: 4px 8px; - border: 1px solid rgba(27, 99, 179, 0.35); + border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 999px; - background: rgba(27, 99, 179, 0.1); + background: rgba(var(--accent-rgb), 0.1); color: #f0b28c; cursor: pointer; font-size: 10.5px; @@ -820,7 +820,7 @@ } .team-composer-mention:hover { - background: rgba(27, 99, 179, 0.2); + background: rgba(var(--accent-rgb), 0.2); } .team-composer-send { @@ -831,7 +831,7 @@ border: none; border-radius: 8px; background: var(--team-accent); - color: #f7f3e8; + color: var(--codev-on-gold); cursor: pointer; transition: opacity 0.15s ease; } diff --git a/apps/web/app/theme-tokens.css b/apps/web/app/theme-tokens.css new file mode 100644 index 000000000..bf918cc44 --- /dev/null +++ b/apps/web/app/theme-tokens.css @@ -0,0 +1,125 @@ +/* + * CoDev's single source of truth for color. Every other product theme file + * -- app-theme.css (plain CSS custom properties for gen2/sign-in/AppChrome), + * product-theme.css (Tailwind @theme for Rooms + dashboard), and + * settings/orca-theme.css (Tailwind @theme for Settings) -- derives its + * tokens from the raw swatches declared here via var(), instead of each + * holding its own copy of the same hex codes under its own role names. That + * duplication is exactly what let three separate redesign passes drift out + * of sync and left Rooms stuck in light mode after everything else went + * dark: fixing the shared source here is what makes that class of bug + * impossible to reintroduce, rather than just fixing today's instance of it. + * + * Names are raw swatches, not roles -- each consumer still decides which + * swatch plays which role for its own surface (e.g. Settings uses opaque + * cards while Rooms/dashboard use translucent glass cards over a gradient + * backdrop; both are legitimate, so both stay expressed differently even + * though they now share the same underlying color values). + * + * Deliberately NOT covered here: `.workspace-page` in globals.css (the + * embedded IDE surface, permanently dark by design, its own palette) and + * `.lp-page` in landing.css (the marketing page, its own richer multi-hue + * palette, not meant to follow light/dark at all). Both stay independent on + * purpose -- this file is the authenticated product's shared palette only. + * + * Dark mode ("Midnight Blueprint") applies automatically via + * prefers-color-scheme; [data-theme="dark"] / [data-theme="light"] are + * prepared for a manual toggle (see components/shell/theme-toggle.tsx). + */ +:root { + --brand-paper: #f2e9d6; + --brand-paper-bright: #fffdf7; + --brand-paper-tan: #e8dcc0; + --brand-paper-deep: #ddd0b0; + --brand-ink: #0e2f7e; + --brand-ink-2: #3d5a9e; + --brand-ink-muted: #5a73a8; + --brand-ink-faint: #7a8bb0; + --brand-accent: #1b63b3; + --brand-accent-bright: #2a7fd4; + --brand-on-accent: #f7f3e8; + --brand-teal: #2a6d62; + --brand-orange: #9e4a2a; + --brand-violet: #5b4fa8; + --brand-destructive: #b3261e; + + /* RGB channel triplets (no alpha), for rgba()/rgb() call sites that need + to flip a translucent wash or glass-panel tint with the theme -- borders, + hover states, badges. Never used for box-shadows, which stay a dark + navy wash in both themes rather than inverting to a light glow when + --brand-ink-rgb becomes cream. --brand-paper-rgb is --brand-paper-bright + as channels, since that's the tier every glass panel tints from. */ + --brand-paper-rgb: 255, 253, 247; + --brand-ink-rgb: 14, 47, 126; + --brand-accent-rgb: 27, 99, 179; + --brand-teal-rgb: 42, 109, 98; + + /* A var, not just a bare `color-scheme: light` here, so every consumer + (app-theme.css, product-theme.css, orca-theme.css) can write + `color-scheme: var(--brand-color-scheme);` on its own scoped element + and inherit the flip, instead of each needing its own dark override + just for this one property. */ + --brand-color-scheme: light; + color-scheme: light; + + /* The wordmark logo asset is recolored from a black source via filter + rather than a mask, so it needs its own chain per theme instead of + inheriting a color directly. Approximate; may want a visual tweak once + seen against the real asset. */ + --brand-logo-filter: brightness(0) saturate(100%) invert(16%) sepia(80%) + saturate(2200%) hue-rotate(210deg) brightness(0.95) contrast(1.05); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --brand-paper: #070c1a; + --brand-paper-bright: #0b1226; + --brand-paper-tan: #101a35; + --brand-paper-deep: #172244; + --brand-ink: #f2e9d6; + --brand-ink-2: #c9ba95; + --brand-ink-muted: #96918a; + --brand-ink-faint: #726d64; + --brand-accent: #3d8fe0; + --brand-accent-bright: #5aa6ec; + --brand-on-accent: #070c1a; + --brand-teal: #3fae9c; + --brand-orange: #e08a54; + --brand-violet: #a08cf0; + --brand-destructive: #e0574a; + --brand-paper-rgb: 16, 26, 53; + --brand-ink-rgb: 242, 233, 214; + --brand-accent-rgb: 61, 143, 224; + --brand-teal-rgb: 63, 174, 156; + --brand-color-scheme: dark; + color-scheme: dark; + --brand-logo-filter: brightness(0) saturate(100%) invert(92%) sepia(24%) + saturate(320%) hue-rotate(345deg) brightness(1.02) contrast(0.94); + } +} + +:root[data-theme="dark"] { + --brand-paper: #070c1a; + --brand-paper-bright: #0b1226; + --brand-paper-tan: #101a35; + --brand-paper-deep: #172244; + --brand-ink: #f2e9d6; + --brand-ink-2: #c9ba95; + --brand-ink-muted: #96918a; + --brand-ink-faint: #726d64; + --brand-accent: #3d8fe0; + --brand-accent-bright: #5aa6ec; + --brand-on-accent: #070c1a; + --brand-teal: #3fae9c; + --brand-orange: #e08a54; + --brand-violet: #a08cf0; + --brand-destructive: #e0574a; + --brand-paper-rgb: 16, 26, 53; + --brand-ink-rgb: 242, 233, 214; + --brand-accent-rgb: 61, 143, 224; + --brand-teal-rgb: 63, 174, 156; + --brand-color-scheme: dark; + color-scheme: dark; + --brand-logo-filter: brightness(0) saturate(100%) invert(92%) sepia(24%) + saturate(320%) hue-rotate(345deg) brightness(1.02) contrast(0.94); +} diff --git a/apps/web/app/workspaces/[workspaceId]/activity/layout.tsx b/apps/web/app/workspaces/[workspaceId]/activity/layout.tsx index 9d63030dd..5840efaae 100644 --- a/apps/web/app/workspaces/[workspaceId]/activity/layout.tsx +++ b/apps/web/app/workspaces/[workspaceId]/activity/layout.tsx @@ -2,8 +2,9 @@ import "../../../settings/orca-theme.css"; /** * The activity feed is built entirely from the Orca design-system components - * (`OrcaPageShell`, `OrcaPageHeader`, `OrcaCard`) and the Tailwind utilities - * they expect โ but it lives under `/workspaces`, which is plain-CSS territory + * (`OrcaPageShell`, `OrcaPageHeader`) plus the shared `Card` from + * components/ui/card and the Tailwind utilities they expect โ but it lives + * under `/workspaces`, which is plain-CSS territory * and loads none of them. Every utility class on the page was inert, so it * rendered as unstyled markup at default browser sizes. * diff --git a/apps/web/app/workspaces/[workspaceId]/session-imports/page.tsx b/apps/web/app/workspaces/[workspaceId]/session-imports/page.tsx index f6a9ab760..c4483bf02 100644 --- a/apps/web/app/workspaces/[workspaceId]/session-imports/page.tsx +++ b/apps/web/app/workspaces/[workspaceId]/session-imports/page.tsx @@ -14,7 +14,8 @@ import { SessionImportTranscript, sessionMessagePreview, } from "@/components/workspace/session-import-transcript"; -import { OrcaCard, OrcaPageShell } from "@/components/settings/orca-style"; +import { OrcaPageShell } from "@/components/settings/orca-style"; +import { Card } from "@/components/ui/card"; import { listStoredSessionImports, readStoredSessionImportView, @@ -125,10 +126,10 @@ export default async function WorkspaceSessionImportsPage({ Recent imports {imports.length === 0 ? ( --
{imports.map((item) => (
@@ -321,9 +322,9 @@ export default async function WorkspaceSessionImportsPage({
- {children}
-
- );
-}
-
export function OrcaSubsectionHeader({
title,
description,
diff --git a/apps/web/components/settings/provider-account-card.tsx b/apps/web/components/settings/provider-account-card.tsx
index 355aa26d0..ef5f5336f 100644
--- a/apps/web/components/settings/provider-account-card.tsx
+++ b/apps/web/components/settings/provider-account-card.tsx
@@ -11,10 +11,10 @@ import {
import { Check, ChevronDown, Copy, KeyRound, Terminal } from "lucide-react";
import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { ClaudeHostedConnect } from "@/components/settings/claude-hosted-connect";
import { CodexHostedConnect } from "@/components/settings/codex-hosted-connect";
-import { OrcaCard } from "@/components/settings/orca-style";
import type {
ClaudeCliTokenRecord,
CliSubscriptionRecord,
@@ -512,7 +512,7 @@ export function ProviderAccountCard({
: "Connect with an API key or the CoDev CLI below";
return (
-
{logo}
@@ -797,6 +797,6 @@ export function ProviderAccountCard({
{message}
) : null}
-
+
);
}
diff --git a/apps/web/components/shell/app-chrome.tsx b/apps/web/components/shell/app-chrome.tsx
index 52e9d914f..48ba01159 100644
--- a/apps/web/components/shell/app-chrome.tsx
+++ b/apps/web/components/shell/app-chrome.tsx
@@ -7,6 +7,7 @@ import { isGitHubAuthConfigured } from "@codev/config";
import { AppSidebarNav } from "@/components/shell/app-sidebar-nav";
import { FeedbackWidget } from "@/components/shell/feedback-widget";
import { ProfileMenu } from "@/components/shell/profile-menu";
+import { ThemeToggle } from "@/components/shell/theme-toggle";
import { isUserAdmin } from "@/lib/admin/admin";
import { isAdminHostname, publicAppHref } from "@/lib/platform/site-hosts";
@@ -59,6 +60,7 @@ export async function AppChrome({
+
+ {
+ it("keeps every actual color literal in one file: theme-tokens.css", () => {
+ // app-theme.css, product-theme.css and settings/orca-theme.css each used
+ // to hold their own copy of this palette under their own token names,
+ // which is exactly what let Rooms stay light after everything else went
+ // dark. Now only this file has a real hex/rgba value; everything else is
+ // a var() reference into it, checked in the tests below.
+ expect(themeTokens).toContain("--brand-paper: #f2e9d6;");
+ expect(themeTokens).toContain("--brand-ink: #0e2f7e;");
+ expect(themeTokens).toContain("--brand-accent: #1b63b3;");
+ expect(themeTokens).toContain("@media (prefers-color-scheme: dark) {");
+ expect(themeTokens).toContain('[data-theme="dark"] {');
+ expect(themeTokens).toContain("--brand-paper: #070c1a;");
+ expect(themeTokens).toContain("--brand-ink: #f2e9d6;");
+ expect(themeTokens).toContain("--brand-accent: #3d8fe0;");
+ });
+
it("sets one cream/navy palette for every AppChrome product page", () => {
expect(appTheme).toContain(".app-page,\n.auth-page {");
expect(appTheme).toContain("--surface: var(--codev-black-950);");
expect(appTheme).toContain("--ink: var(--codev-beige-100);");
- expect(appTheme).toContain("--codev-gold-500: #1b63b3;");
- expect(appTheme).toContain("--codev-black-950: #f2e9d6;");
- expect(appTheme).toContain("--codev-beige-100: #0e2f7e;");
- expect(appTheme).toContain("color-scheme: light;");
+ expect(appTheme).toContain("--codev-gold-500: var(--brand-accent);");
+ expect(appTheme).toContain("--codev-black-950: var(--brand-paper);");
+ expect(appTheme).toContain("--codev-beige-100: var(--brand-ink);");
+ expect(appTheme).toContain(
+ "color-scheme: var(--brand-color-scheme, light);",
+ );
expect(appTheme).toContain("--orange: var(--codev-terracotta);");
+ // No hex/rgba literal for this palette should remain in app-theme.css --
+ // everything routes through theme-tokens.css's --brand-* swatches now.
+ expect(appTheme).not.toContain("#f2e9d6");
+ expect(appTheme).not.toContain("#0e2f7e");
+ expect(appTheme).not.toContain("#1b63b3");
});
it("uses the same light surfaces for the dashboard workspace browser", () => {
expect(appTheme).toContain(".workspace-browser {");
- expect(appTheme).toContain("background: rgba(255, 253, 247, 0.72);");
+ // The glass-panel translucency is a --paper-rgb reference (itself an
+ // alias onto theme-tokens.css's --brand-paper-rgb) rather than a bare
+ // literal, so it flips with the theme instead of staying stuck light
+ // everywhere else .workspace-browser is used.
+ expect(appTheme).toContain("background: rgba(var(--paper-rgb), 0.72);");
expect(appTheme).toContain(".workspace-card:hover {");
});
it("ships a shared shadcn product theme for Rooms and the dashboard", () => {
- const productTheme = readCss("product-theme.css");
expect(productTheme).toContain(".product-scope,");
expect(productTheme).toContain(".rooms-scope {");
- expect(productTheme).toContain("--color-background: #f2e9d6;");
- expect(productTheme).toContain("--color-primary: #1b63b3;");
+ expect(productTheme).toContain("--color-background: var(--brand-paper);");
+ expect(productTheme).toContain("--color-primary: var(--brand-accent);");
+ // Glass panels over the animated gradient backdrop, unlike Settings'
+ // opaque cards -- a real design difference, kept as its own alpha wash
+ // rather than forced to match settings/orca-theme.css.
+ expect(productTheme).toContain(
+ "--color-card: rgba(var(--brand-paper-rgb), 0.62);",
+ );
+ // No separate dark-mode block needed: every value above already flips
+ // because theme-tokens.css's swatches do.
+ expect(productTheme).not.toContain("@media (prefers-color-scheme: dark)");
+ expect(productTheme).not.toContain("#070c1a");
+ });
+
+ it("gives Settings the same shared theme, with its own opaque surfaces", () => {
+ expect(orcaTheme).toContain(".orca-settings-scope {");
+ expect(orcaTheme).toContain("--color-background: var(--brand-paper);");
+ expect(orcaTheme).toContain("--color-primary: var(--brand-accent);");
+ // Solid surfaces, not glass -- Settings has no gradient backdrop behind
+ // it for a translucent card to let show through.
+ expect(orcaTheme).toContain("--color-card: var(--brand-paper-bright);");
+ expect(orcaTheme).not.toContain("@media (prefers-color-scheme: dark)");
+ expect(orcaTheme).not.toContain("#070c1a");
});
it("keeps every profile menu action legible on the light product surface", () => {
diff --git a/apps/web/components/shell/theme-toggle.tsx b/apps/web/components/shell/theme-toggle.tsx
new file mode 100644
index 000000000..15d4626a4
--- /dev/null
+++ b/apps/web/components/shell/theme-toggle.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+
+export const THEME_STORAGE_KEY = "codev-theme";
+
+/**
+ * Inline, blocking script for the root layout's . Reads a stored
+ * explicit preference and stamps `data-theme` before first paint, so a
+ * returning visitor who chose dark never sees a light flash. When nothing is
+ * stored (the common case), this does nothing and the CSS's own
+ * `prefers-color-scheme` media query decides -- that path is already
+ * synchronous with paint and needs no script at all.
+ */
+export const THEME_INIT_SCRIPT = `(function(){try{var t=localStorage.getItem(${JSON.stringify(
+ THEME_STORAGE_KEY,
+)});if(t==="light"||t==="dark"){document.documentElement.setAttribute("data-theme",t);}}catch(e){}})();`;
+
+type Theme = "light" | "dark";
+
+function readInitialTheme(): Theme {
+ const stamped = document.documentElement.getAttribute("data-theme");
+ if (stamped === "light" || stamped === "dark") return stamped;
+ return window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? "dark"
+ : "light";
+}
+
+/**
+ * A visible light/dark switch, not a menu item -- discoverability was the
+ * point, so it sits in the nav next to the profile menu rather than inside
+ * it. Once clicked it pins an explicit choice to `data-theme` + localStorage;
+ * until then, the theme just follows the OS via CSS alone.
+ */
+export function ThemeToggle({ compact = false }: { compact?: boolean }) {
+ // Starts `null` so the server-rendered and first-client-render markup
+ // match (the real theme is only knowable in the browser); the real icon
+ // appears a tick later without ever showing the wrong one.
+ const [theme, setTheme] = useState(null);
+
+ useEffect(() => {
+ // Reads `document`/`window`, which don't exist during SSR -- the value
+ // can only ever be known once mounted in the browser.
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ setTheme(readInitialTheme());
+ }, []);
+
+ function toggle() {
+ const next: Theme = theme === "dark" ? "light" : "dark";
+ document.documentElement.setAttribute("data-theme", next);
+ try {
+ localStorage.setItem(THEME_STORAGE_KEY, next);
+ } catch {
+ /* Private browsing or a blocked store -- the toggle still works for
+ this page load, it just won't be remembered next visit. */
+ }
+ setTheme(next);
+ }
+
+ const label =
+ theme === null
+ ? "Toggle color theme"
+ : theme === "dark"
+ ? "Switch to light theme"
+ : "Switch to dark theme";
+
+ return (
+
+ );
+}
diff --git a/apps/web/components/workspace/workspace-activity-feed.tsx b/apps/web/components/workspace/workspace-activity-feed.tsx
index ad1be5bf6..840c4eff8 100644
--- a/apps/web/components/workspace/workspace-activity-feed.tsx
+++ b/apps/web/components/workspace/workspace-activity-feed.tsx
@@ -15,10 +15,10 @@ import {
} from "lucide-react";
import {
- OrcaCard,
OrcaPageHeader,
OrcaPageShell,
} from "@/components/settings/orca-style";
+import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import type { ActivityAuditSnapshot } from "@/lib/workspaces/activity-audit-server";
import {
@@ -218,7 +218,7 @@ export function WorkspaceActivityFeed({
) : null}
-
+
+
+
+
+
+
{cursor == null ? "Complete history loaded" : "Most recent events"}
- -{categories} activity {categories === 1 ? "area" : "areas"}
- -