| author | ![gravatar for 269035359+t3-code[bot]@users.noreply.github.com](https://s.gravatar.com/avatar/c0d8176b1da14b8abdd5067ff3098cf6?d=identicon&s=14) t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> 2026-08-13 18:04:24-04:00 |
| committer |  GitHub <noreply@github.com> 2026-08-13 18:04:24-04:00 |
| log | 23d45d914eeecb2b4b33a3c7781cc02f4d73cbab |
| tree | 5872c8aed6735586bb78075a7c0973b2c3ce565e |
| parent | bad1143b02f7b585d1fe1335b3d9a97983ce8d8b |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(web): restore default stage artwork colors (#6535)
Co-authored-by: t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com>
Co-authored-by: maria <254055478+maria-rcks@users.noreply.github.com>2 files changed, 65 insertions(+), 37 deletions(-)
apps
web
src
components
- index.css
apps/web/src/components/SidebarStageBackdrop.tsx+8-8
| ... | @@ -144,10 +144,10 @@ function NightlySkyArt({ compact = false }: { compact?: boolean }) { | ... | @@ -144,10 +144,10 @@ function NightlySkyArt({ compact = false }: { compact?: boolean }) { |
| 144 | gradientTransform="translate(216 18) rotate(137) scale(120 84)" | 144 | gradientTransform="translate(216 18) rotate(137) scale(120 84)" |
| 145 | gradientUnits="userSpaceOnUse" | 145 | gradientUnits="userSpaceOnUse" |
| 146 | > | 146 | > |
| 147 | <stop style={{ stopColor: "var(--stage-night-highlight)" }} stopOpacity="0.4" /> | 147 | <stop style={{ stopColor: "var(--stage-night-glow-highlight)" }} stopOpacity="0.4" /> |
| 148 | <stop | 148 | <stop |
| 149 | offset="0.5" | 149 | offset="0.5" |
| 150 | style={{ stopColor: "var(--stage-night-secondary)" }} | 150 | style={{ stopColor: "var(--stage-night-glow-secondary)" }} |
| 151 | stopOpacity="0.16" | 151 | stopOpacity="0.16" |
| 152 | /> | 152 | /> |
| 153 | <stop offset="1" style={{ stopColor: "var(--stage-night-bottom)" }} stopOpacity="0" /> | 153 | <stop offset="1" style={{ stopColor: "var(--stage-night-bottom)" }} stopOpacity="0" /> |
| ... | @@ -177,7 +177,7 @@ function NightlySkyArt({ compact = false }: { compact?: boolean }) { | ... | @@ -177,7 +177,7 @@ function NightlySkyArt({ compact = false }: { compact?: boolean }) { |
| 177 | ))} | 177 | ))} |
| 178 | </g> | 178 | </g> |
| 179 | <g | 179 | <g |
| 180 | style={{ stroke: "var(--stage-night-line)" }} | 180 | style={{ stroke: "var(--stage-night-sparkle)" }} |
| 181 | strokeLinecap="round" | 181 | strokeLinecap="round" |
| 182 | strokeOpacity="0.7" | 182 | strokeOpacity="0.7" |
| 183 | strokeWidth="0.6" | 183 | strokeWidth="0.6" |
| ... | @@ -274,10 +274,10 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) { | ... | @@ -274,10 +274,10 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) { |
| 274 | gradientTransform="translate(474 44) rotate(166) scale(156 92)" | 274 | gradientTransform="translate(474 44) rotate(166) scale(156 92)" |
| 275 | gradientUnits="userSpaceOnUse" | 275 | gradientUnits="userSpaceOnUse" |
| 276 | > | 276 | > |
| 277 | <stop style={{ stopColor: "var(--stage-art-highlight)" }} stopOpacity="0.34" /> | 277 | <stop style={{ stopColor: "var(--stage-art-celeste-highlight)" }} stopOpacity="0.34" /> |
| 278 | <stop | 278 | <stop |
| 279 | offset="0.5" | 279 | offset="0.5" |
| 280 | style={{ stopColor: "var(--stage-art-secondary)" }} | 280 | style={{ stopColor: "var(--stage-art-celeste-secondary)" }} |
| 281 | stopOpacity="0.18" | 281 | stopOpacity="0.18" |
| 282 | /> | 282 | /> |
| 283 | <stop offset="1" style={{ stopColor: "var(--stage-art-bottom)" }} stopOpacity="0" /> | 283 | <stop offset="1" style={{ stopColor: "var(--stage-art-bottom)" }} stopOpacity="0" /> |
| ... | @@ -290,7 +290,7 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) { | ... | @@ -290,7 +290,7 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) { |
| 290 | gradientTransform="translate(704 18) rotate(145) scale(132 88)" | 290 | gradientTransform="translate(704 18) rotate(145) scale(132 88)" |
| 291 | gradientUnits="userSpaceOnUse" | 291 | gradientUnits="userSpaceOnUse" |
| 292 | > | 292 | > |
| 293 | <stop style={{ stopColor: "var(--stage-art-highlight)" }} stopOpacity="0.3" /> | 293 | <stop style={{ stopColor: "var(--stage-art-violet-highlight)" }} stopOpacity="0.3" /> |
| 294 | <stop | 294 | <stop |
| 295 | offset="0.52" | 295 | offset="0.52" |
| 296 | style={{ stopColor: "var(--stage-art-tertiary)" }} | 296 | style={{ stopColor: "var(--stage-art-tertiary)" }} |
| ... | @@ -301,7 +301,7 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) { | ... | @@ -301,7 +301,7 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) { |
| 301 | <pattern id={minorGridId} width="8" height="8" patternUnits="userSpaceOnUse"> | 301 | <pattern id={minorGridId} width="8" height="8" patternUnits="userSpaceOnUse"> |
| 302 | <path | 302 | <path |
| 303 | d="M8 0H0V8" | 303 | d="M8 0H0V8" |
| 304 | style={{ stroke: "var(--stage-art-line)" }} | 304 | style={{ stroke: "var(--stage-art-grid-line)" }} |
| 305 | strokeOpacity="0.14" | 305 | strokeOpacity="0.14" |
| 306 | strokeWidth="0.5" | 306 | strokeWidth="0.5" |
| 307 | /> | 307 | /> |
| ... | @@ -309,7 +309,7 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) { | ... | @@ -309,7 +309,7 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) { |
| 309 | <pattern id={majorGridId} width="32" height="32" patternUnits="userSpaceOnUse"> | 309 | <pattern id={majorGridId} width="32" height="32" patternUnits="userSpaceOnUse"> |
| 310 | <path | 310 | <path |
| 311 | d="M32 0H0V32" | 311 | d="M32 0H0V32" |
| 312 | style={{ stroke: "var(--stage-art-line)" }} | 312 | style={{ stroke: "var(--stage-art-grid-line)" }} |
| 313 | strokeOpacity="0.26" | 313 | strokeOpacity="0.26" |
| 314 | strokeWidth="0.6" | 314 | strokeWidth="0.6" |
| 315 | /> | 315 | /> |
apps/web/src/index.css+57-29
| ... | @@ -266,8 +266,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil | ... | @@ -266,8 +266,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 266 | 266 | ||
| 267 | @layer base { | 267 | @layer base { |
| 268 | :root { | 268 | :root { |
| 269 | /* Dev artwork defaults. Built-in themes override these seven pigments in | 269 | /* Keep the original T3 Code artwork palettes as the defaults. Built-in |
| 270 | the components layer; Nightly derives a darker matching palette. */ | 270 | themes override them with their own pigments in the components layer. */ |
| 271 | --stage-art-top: oklch(0.782169 0.123386 240.226); | 271 | --stage-art-top: oklch(0.782169 0.123386 240.226); |
| 272 | --stage-art-mid: oklch(0.616111 0.195824 259.735); | 272 | --stage-art-mid: oklch(0.616111 0.195824 259.735); |
| 273 | --stage-art-bottom: oklch(0.441553 0.232394 265.474); | 273 | --stage-art-bottom: oklch(0.441553 0.232394 265.474); |
| ... | @@ -275,33 +275,23 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil | ... | @@ -275,33 +275,23 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 275 | --stage-art-secondary: oklch(0.794668 0.12136 235.46); | 275 | --stage-art-secondary: oklch(0.794668 0.12136 235.46); |
| 276 | --stage-art-tertiary: oklch(0.678991 0.170261 275.365); | 276 | --stage-art-tertiary: oklch(0.678991 0.170261 275.365); |
| 277 | --stage-art-line: oklch(0.959666 0.029238 218.179); | 277 | --stage-art-line: oklch(0.959666 0.029238 218.179); |
| 278 | --stage-night-top: color-mix( | 278 | --stage-art-celeste-highlight: oklch(0.968763 0.045822 196.42); |
| 279 | in oklch, | 279 | --stage-art-celeste-secondary: oklch(0.827395 0.126071 211.26); |
| 280 | var(--stage-art-top) 38%, | 280 | --stage-art-violet-highlight: oklch(0.895381 0.053248 286.447); |
| 281 | oklch(0.283792 0.117327 297.201) | 281 | --stage-art-grid-line: oklch(0.966822 0.01757 239.99); |
| 282 | ); | 282 | --stage-night-base-top: oklch(0.283792 0.117327 297.201); |
| 283 | --stage-night-mid: color-mix( | 283 | --stage-night-base-mid: oklch(0.227147 0.086086 277.99); |
| 284 | in oklch, | 284 | --stage-night-base-bottom: oklch(0.200528 0.055699 261.216); |
| 285 | var(--stage-art-mid) 38%, | 285 | --stage-night-top: var(--stage-night-base-top); |
| 286 | oklch(0.227147 0.086086 277.99) | 286 | --stage-night-mid: var(--stage-night-base-mid); |
| 287 | ); | 287 | --stage-night-bottom: var(--stage-night-base-bottom); |
| 288 | --stage-night-bottom: color-mix( | 288 | --stage-night-highlight: oklch(0.707246 0.157418 252.091); |
| 289 | in oklch, | 289 | --stage-night-secondary: oklch(0.600473 0.182225 277.296); |
| 290 | var(--stage-art-bottom) 38%, | 290 | --stage-night-tertiary: oklch(0.62583 0.210886 305.994); |
| 291 | oklch(0.200528 0.055699 261.216) | 291 | --stage-night-line: oklch(0.938794 0.029114 273.103); |
| 292 | ); | 292 | --stage-night-glow-highlight: oklch(0.553749 0.176543 271.958); |
| 293 | --stage-night-highlight: var(--stage-art-highlight); | 293 | --stage-night-glow-secondary: oklch(0.345571 0.117466 273.568); |
| 294 | --stage-night-secondary: color-mix( | 294 | --stage-night-sparkle: oklch(0.880867 0.057747 269.011); |
| 295 | in oklch, | ||
| 296 | var(--stage-art-secondary) 55%, | ||
| 297 | var(--stage-night-mid) | ||
| 298 | ); | ||
| 299 | --stage-night-tertiary: color-mix( | ||
| 300 | in oklch, | ||
| 301 | var(--stage-art-tertiary) 60%, | ||
| 302 | var(--stage-night-top) | ||
| 303 | ); | ||
| 304 | --stage-night-line: color-mix(in oklch, var(--stage-art-line) 82%, oklch(1 0 0)); | ||
| 305 | } | 295 | } |
| 306 | 296 | ||
| 307 | .dark { | 297 | .dark { |
| ... | @@ -510,6 +500,44 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil | ... | @@ -510,6 +500,44 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 510 | --stage-art-line: oklch(0.940582 0.032921 299.076); | 500 | --stage-art-line: oklch(0.940582 0.032921 299.076); |
| 511 | } | 501 | } |
| 512 | 502 | ||
| 503 | :is(html[data-theme-id="t3-chat"], html[data-theme-id="ocean"], html[data-theme-id="iris"]) { | ||
| 504 | --stage-night-top: color-mix(in oklch, var(--stage-art-top) 38%, var(--stage-night-base-top)); | ||
| 505 | --stage-night-mid: color-mix(in oklch, var(--stage-art-mid) 38%, var(--stage-night-base-mid)); | ||
| 506 | --stage-night-bottom: color-mix( | ||
| 507 | in oklch, | ||
| 508 | var(--stage-art-bottom) 38%, | ||
| 509 | var(--stage-night-base-bottom) | ||
| 510 | ); | ||
| 511 | --stage-night-highlight: var(--stage-art-highlight); | ||
| 512 | --stage-night-secondary: color-mix( | ||
| 513 | in oklch, | ||
| 514 | var(--stage-art-secondary) 55%, | ||
| 515 | var(--stage-night-mid) | ||
| 516 | ); | ||
| 517 | --stage-night-tertiary: color-mix( | ||
| 518 | in oklch, | ||
| 519 | var(--stage-art-tertiary) 60%, | ||
| 520 | var(--stage-night-top) | ||
| 521 | ); | ||
| 522 | --stage-night-line: color-mix(in oklch, var(--stage-art-line) 82%, oklch(1 0 0)); | ||
| 523 | } | ||
| 524 | |||
| 525 | :is( | ||
| 526 | html[data-theme-id="t3-chat"], | ||
| 527 | html[data-theme-id="grove"], | ||
| 528 | html[data-theme-id="ocean"], | ||
| 529 | html[data-theme-id="ember"], | ||
| 530 | html[data-theme-id="iris"] | ||
| 531 | ) { | ||
| 532 | --stage-art-celeste-highlight: var(--stage-art-highlight); | ||
| 533 | --stage-art-celeste-secondary: var(--stage-art-secondary); | ||
| 534 | --stage-art-violet-highlight: var(--stage-art-highlight); | ||
| 535 | --stage-art-grid-line: var(--stage-art-line); | ||
| 536 | --stage-night-glow-highlight: var(--stage-night-highlight); | ||
| 537 | --stage-night-glow-secondary: var(--stage-night-secondary); | ||
| 538 | --stage-night-sparkle: var(--stage-night-line); | ||
| 539 | } | ||
| 540 | |||
| 513 | .workspace-topbar { | 541 | .workspace-topbar { |
| 514 | display: flex; | 542 | display: flex; |
| 515 | height: var(--workspace-topbar-height); | 543 | height: var(--workspace-topbar-height); |