Skip to content

fix(web): restore default stage artwork colors #6535

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 5 commits into from
Aug 13, 2026
+65 −37
Merged

fix(web): restore default stage artwork colors #6535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
11b06ac
fix(web): restore default stage artwork colors
t3-code[bot] Aug 13, 2026
11868a8
fix(web): restore stage glow endpoints
t3-code[bot] Aug 13, 2026
10518ca
refactor(web): express stage colors in oklch
t3-code[bot] Aug 13, 2026
3797f4c
refactor(web): trim stage artwork tokens
t3-code[bot] Aug 13, 2026
99a7dfc
refactor(web): reuse nightly base tokens
t3-code[bot] Aug 13, 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
16 changes: 8 additions & 8 deletions apps/web/src/components/SidebarStageBackdrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,10 +144,10 @@ function NightlySkyArt({ compact = false }: { compact?: boolean }) {
gradientTransform="translate(216 18) rotate(137) scale(120 84)"
gradientUnits="userSpaceOnUse"
>
<stop style={{ stopColor: "var(--stage-night-highlight)" }} stopOpacity="0.4" />
<stop style={{ stopColor: "var(--stage-night-glow-highlight)" }} stopOpacity="0.4" />
<stop
offset="0.5"
style={{ stopColor: "var(--stage-night-secondary)" }}
style={{ stopColor: "var(--stage-night-glow-secondary)" }}
stopOpacity="0.16"
/>
<stop offset="1" style={{ stopColor: "var(--stage-night-bottom)" }} stopOpacity="0" />
Expand Down Expand Up @@ -177,7 +177,7 @@ function NightlySkyArt({ compact = false }: { compact?: boolean }) {
))}
</g>
<g
style={{ stroke: "var(--stage-night-line)" }}
style={{ stroke: "var(--stage-night-sparkle)" }}
strokeLinecap="round"
strokeOpacity="0.7"
strokeWidth="0.6"
Expand Down Expand Up @@ -274,10 +274,10 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) {
gradientTransform="translate(474 44) rotate(166) scale(156 92)"
gradientUnits="userSpaceOnUse"
>
<stop style={{ stopColor: "var(--stage-art-highlight)" }} stopOpacity="0.34" />
<stop style={{ stopColor: "var(--stage-art-celeste-highlight)" }} stopOpacity="0.34" />
<stop
offset="0.5"
style={{ stopColor: "var(--stage-art-secondary)" }}
style={{ stopColor: "var(--stage-art-celeste-secondary)" }}
stopOpacity="0.18"
/>
<stop offset="1" style={{ stopColor: "var(--stage-art-bottom)" }} stopOpacity="0" />
Expand All @@ -290,7 +290,7 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) {
gradientTransform="translate(704 18) rotate(145) scale(132 88)"
gradientUnits="userSpaceOnUse"
>
<stop style={{ stopColor: "var(--stage-art-highlight)" }} stopOpacity="0.3" />
<stop style={{ stopColor: "var(--stage-art-violet-highlight)" }} stopOpacity="0.3" />
<stop
offset="0.52"
style={{ stopColor: "var(--stage-art-tertiary)" }}
Expand All @@ -301,15 +301,15 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) {
<pattern id={minorGridId} width="8" height="8" patternUnits="userSpaceOnUse">
<path
d="M8 0H0V8"
style={{ stroke: "var(--stage-art-line)" }}
style={{ stroke: "var(--stage-art-grid-line)" }}
strokeOpacity="0.14"
strokeWidth="0.5"
/>
</pattern>
<pattern id={majorGridId} width="32" height="32" patternUnits="userSpaceOnUse">
<path
d="M32 0H0V32"
style={{ stroke: "var(--stage-art-line)" }}
style={{ stroke: "var(--stage-art-grid-line)" }}
strokeOpacity="0.26"
strokeWidth="0.6"
/>
Expand Down
86 changes: 57 additions & 29 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,42 +266,32 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil

@layer base {
:root {
/* Dev artwork defaults. Built-in themes override these seven pigments in
the components layer; Nightly derives a darker matching palette. */
/* Keep the original T3 Code artwork palettes as the defaults. Built-in
themes override them with their own pigments in the components layer. */
--stage-art-top: oklch(0.782169 0.123386 240.226);
--stage-art-mid: oklch(0.616111 0.195824 259.735);
--stage-art-bottom: oklch(0.441553 0.232394 265.474);
--stage-art-highlight: oklch(0.951597 0.037289 215.482);
--stage-art-secondary: oklch(0.794668 0.12136 235.46);
--stage-art-tertiary: oklch(0.678991 0.170261 275.365);
--stage-art-line: oklch(0.959666 0.029238 218.179);
--stage-night-top: color-mix(
in oklch,
var(--stage-art-top) 38%,
oklch(0.283792 0.117327 297.201)
);
--stage-night-mid: color-mix(
in oklch,
var(--stage-art-mid) 38%,
oklch(0.227147 0.086086 277.99)
);
--stage-night-bottom: color-mix(
in oklch,
var(--stage-art-bottom) 38%,
oklch(0.200528 0.055699 261.216)
);
--stage-night-highlight: var(--stage-art-highlight);
--stage-night-secondary: color-mix(
in oklch,
var(--stage-art-secondary) 55%,
var(--stage-night-mid)
);
--stage-night-tertiary: color-mix(
in oklch,
var(--stage-art-tertiary) 60%,
var(--stage-night-top)
);
--stage-night-line: color-mix(in oklch, var(--stage-art-line) 82%, oklch(1 0 0));
--stage-art-celeste-highlight: oklch(0.968763 0.045822 196.42);
--stage-art-celeste-secondary: oklch(0.827395 0.126071 211.26);
--stage-art-violet-highlight: oklch(0.895381 0.053248 286.447);
--stage-art-grid-line: oklch(0.966822 0.01757 239.99);
--stage-night-base-top: oklch(0.283792 0.117327 297.201);
--stage-night-base-mid: oklch(0.227147 0.086086 277.99);
--stage-night-base-bottom: oklch(0.200528 0.055699 261.216);
--stage-night-top: var(--stage-night-base-top);
--stage-night-mid: var(--stage-night-base-mid);
--stage-night-bottom: var(--stage-night-base-bottom);
--stage-night-highlight: oklch(0.707246 0.157418 252.091);
--stage-night-secondary: oklch(0.600473 0.182225 277.296);
--stage-night-tertiary: oklch(0.62583 0.210886 305.994);
--stage-night-line: oklch(0.938794 0.029114 273.103);
--stage-night-glow-highlight: oklch(0.553749 0.176543 271.958);
--stage-night-glow-secondary: oklch(0.345571 0.117466 273.568);
--stage-night-sparkle: oklch(0.880867 0.057747 269.011);
}

.dark {
Expand Down Expand Up @@ -510,6 +500,44 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
--stage-art-line: oklch(0.940582 0.032921 299.076);
}

:is(html[data-theme-id="t3-chat"], html[data-theme-id="ocean"], html[data-theme-id="iris"]) {
--stage-night-top: color-mix(in oklch, var(--stage-art-top) 38%, var(--stage-night-base-top));
--stage-night-mid: color-mix(in oklch, var(--stage-art-mid) 38%, var(--stage-night-base-mid));
--stage-night-bottom: color-mix(
in oklch,
var(--stage-art-bottom) 38%,
var(--stage-night-base-bottom)
);
--stage-night-highlight: var(--stage-art-highlight);
--stage-night-secondary: color-mix(
in oklch,
var(--stage-art-secondary) 55%,
var(--stage-night-mid)
);
--stage-night-tertiary: color-mix(
in oklch,
var(--stage-art-tertiary) 60%,
var(--stage-night-top)
);
--stage-night-line: color-mix(in oklch, var(--stage-art-line) 82%, oklch(1 0 0));
}

:is(
html[data-theme-id="t3-chat"],
html[data-theme-id="grove"],
html[data-theme-id="ocean"],
html[data-theme-id="ember"],
html[data-theme-id="iris"]
) {
--stage-art-celeste-highlight: var(--stage-art-highlight);
--stage-art-celeste-secondary: var(--stage-art-secondary);
--stage-art-violet-highlight: var(--stage-art-highlight);
--stage-art-grid-line: var(--stage-art-line);
--stage-night-glow-highlight: var(--stage-night-highlight);
--stage-night-glow-secondary: var(--stage-night-secondary);
--stage-night-sparkle: var(--stage-night-line);
}

.workspace-topbar {
display: flex;
height: var(--workspace-topbar-height);
Expand Down
Loading