Skip to content

fix(web): darken neutral control surfaces #9064

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maria-rcks merged 3 commits into from
Sep 2, 2026
Merged

fix(web): darken neutral control surfaces #9064

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d67ca80
fix(web): darken neutral control surfaces
maria-rcks Sep 1, 2026
4f47b34
fix(web): preserve stock code surfaces
maria-rcks Sep 1, 2026
adac728
fix(web): align portaled composer surfaces
maria-rcks Sep 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web/src/components/chat/ComposerSurface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function Shell({
className={cn(
"group/composer-surface relative isolate mx-auto w-full max-w-3xl",
"[--chat-composer-drawer-inset:1.375rem] [--chat-composer-glass-surface:var(--card)] [--chat-composer-outline:rgb(0_0_0/8%)]",
"dark:[--chat-composer-glass-surface:color-mix(in_srgb,var(--background)_96%,var(--color-white))] dark:[--chat-composer-highlight:rgb(255_255_255/3%)] dark:[--chat-composer-outline:color-mix(in_srgb,var(--color-white)_5%,transparent)]",
"dark:[--chat-composer-glass-surface:var(--surface-raised)] dark:[--chat-composer-highlight:rgb(255_255_255/3%)] dark:[--chat-composer-outline:color-mix(in_srgb,var(--color-white)_5%,transparent)]",
Comment thread
maria-rcks marked this conversation as resolved.
Comment thread
macroscopeapp[bot] marked this conversation as resolved.
"[html[data-theme-id]_&]:[--chat-composer-glass-surface:var(--app-theme-surface-raised)] [html[data-theme-id]_&]:[--chat-composer-outline:var(--app-theme-toolbar-border)]",
"dark:[html[data-theme-id]:not([data-theme-id=t3-chat])_&]:[--chat-composer-highlight:color-mix(in_srgb,var(--app-theme-input)_12%,transparent)] dark:[html[data-theme-id]:not([data-theme-id=t3-chat])_&]:[--chat-composer-outline:color-mix(in_srgb,var(--app-theme-input)_30%,var(--background))]",
"dark:[html[data-theme-id=t3-chat]_&]:[--chat-composer-highlight:color-mix(in_srgb,#432d48_12%,transparent)] dark:[html[data-theme-id=t3-chat]_&]:[--chat-composer-outline:#241e28]",
Expand Down Expand Up @@ -86,7 +86,7 @@ function ContextStrip({ className, ...props }: ComponentProps<"div">) {
className={cn(
"group/composer-context relative isolate mx-auto -mt-4 flex w-[calc(100%-2*var(--chat-composer-drawer-inset))] items-center gap-2 overflow-x-clip overflow-y-visible ps-1 pe-2 pt-5 pb-1",
"before:absolute before:inset-0 before:-z-1 before:rounded-b-[16px] before:border before:border-(--chat-composer-outline) before:mask-[linear-gradient(to_bottom,transparent_0_1rem,black_1rem)] before:shadow-[0_12px_28px_-18px_rgb(0_0_0/40%)]",
"dark:before:border-white/7 dark:before:bg-[linear-gradient(to_bottom,transparent_0_1rem,rgb(0_0_0/18%)_1rem,transparent_calc(1rem+10px)),linear-gradient(rgb(255_255_255/2%),rgb(255_255_255/2%))] dark:before:shadow-[0_14px_32px_-18px_rgb(0_0_0/75%)]",
"dark:before:border-white/7 dark:before:bg-[linear-gradient(to_bottom,transparent_0_1rem,rgb(0_0_0/18%)_1rem,transparent_calc(1rem+10px)),linear-gradient(rgb(255_255_255/1%),rgb(255_255_255/1%))] dark:before:shadow-[0_14px_32px_-18px_rgb(0_0_0/75%)]",
"group-has-data-[composer-banner-surface=attached]/composer-surface:before:bg-[color-mix(in_srgb,var(--chat-composer-glass-surface)_var(--glass-opacity),transparent)] group-has-data-[composer-banner-surface=attached]/composer-surface:before:backdrop-blur-(--glass-blur) group-has-data-[composer-banner-surface=attached]/composer-surface:before:backdrop-saturate-(--glass-saturation)",
"not-supports-[clip-path:shape(from_0_0,line_to_1px_1px)]:before:bg-[color-mix(in_srgb,var(--chat-composer-glass-surface)_var(--glass-opacity),transparent)] not-supports-[clip-path:shape(from_0_0,line_to_1px_1px)]:before:backdrop-blur-(--glass-blur) not-supports-[clip-path:shape(from_0_0,line_to_1px_1px)]:before:backdrop-saturate-(--glass-saturation)",
className,
Expand Down
14 changes: 7 additions & 7 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -980,19 +980,19 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil

@variant dark {
color-scheme: dark;
/* Keep the workspace in the same neutral-black family as sidebar v2.
Surfaces lift from this base instead of starting from a milky gray. */
/* Keep controls and floating surfaces close to the neutral-black canvas.
Borders and hover states provide separation without milky gray fills. */
--background: var(--color-neutral-950);
--surface-raised: var(--secondary);
--surface-raised: color-mix(in srgb, var(--background) 97%, var(--color-white));
--foreground: var(--color-neutral-100);
--card: color-mix(in srgb, var(--background) 97%, var(--color-white));
--card: color-mix(in srgb, var(--background) 98%, var(--color-white));
Comment thread
maria-rcks marked this conversation as resolved.
Outdated
--card-foreground: var(--color-neutral-100);
--popover: color-mix(in srgb, var(--background) 94%, var(--color-white));
--popover: color-mix(in srgb, var(--background) 97%, var(--color-white));
--popover-foreground: var(--color-neutral-100);
--primary: oklch(0.571 0.21 264);
--secondary: --alpha(var(--color-white) / 4%);
--secondary: --alpha(var(--color-white) / 3%);
--secondary-foreground: var(--color-neutral-100);
--muted: --alpha(var(--color-white) / 4%);
--muted: --alpha(var(--color-white) / 3%);
--muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white));
--accent: --alpha(var(--color-white) / 4%);
--accent-foreground: var(--color-neutral-100);
Expand Down
14 changes: 14 additions & 0 deletions apps/web/src/themePalette.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
getThemePreferenceMode,
isKnownThemePreference,
getCustomThemes,
getStandardThemeColors,
getStoredCustomThemeCollection,
invalidateCustomThemes,
installCustomTheme,
Expand Down Expand Up @@ -134,6 +135,19 @@ describe("theme files", () => {
expect(asHex(dark.error)).not.toBe(asHex(darkDefaults.error));
});

it("keeps stock dark controls in the neutral-black surface hierarchy", () => {
expectThemeColors(getStandardThemeColors("dark"), {
canvas: "#0a0a0a",
surface: "#0f0f0f",
surfaceRaised: "#111111",
surfaceOverlay: "#111111",
toolbarControl: "#111111",
secondary: "#111111",
muted: "#111111",
accentSurface: "#141414",
});
});

it("derives readable, distinctive vivid palettes from exact seeds", () => {
const seeds: ReadonlyArray<["light" | "dark", string, string]> = [
["light", "#f4f9f2", "#1d8a4e"],
Expand Down
12 changes: 6 additions & 6 deletions apps/web/src/themePalette.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,22 +402,22 @@ const T3_CODE_DARK_THEME_COLORS: ThemeColors = {
toolbar: "#0a0a0a",
toolbarForeground: "#f5f5f5",
toolbarBorder: "#191919",
toolbarControl: "#191919",
toolbarControl: "#111111",
toolbarControlForeground: "#f5f5f5",
toolbarControlHover: "#141414",
surface: "#111111",
surfaceRaised: "#141414",
surfaceOverlay: "#191919",
surface: "#0f0f0f",
surfaceRaised: "#111111",
surfaceOverlay: "#111111",
text: "#f5f5f5",
textMuted: "#818181",
border: "#191919",
input: "#1e1e1e",
focus: "#346bf1",
accent: "#346bf1",
accentForeground: "#ffffff",
secondary: "#141414",
secondary: "#111111",
secondaryForeground: "#f5f5f5",
muted: "#141414",
muted: "#111111",
mutedForeground: "#818181",
placeholder: "#818181",
secondaryLabel: "#818181",
Expand Down
Loading