History

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

t3-code[bot] committed 3 months ago

Commit 23d45d91 parent bad11432 files · +65 −37Browse files

Unified · Split

2 files
  1. apps/web/src/components/SidebarStageBackdrop.tsx +8 −8
  2. apps/web/src/index.css +57 −29
apps/web/src/components/SidebarStageBackdrop.tsx+8−8
@@ -144,10 +144,10 @@ function NightlySkyArt({ compact = false }: { compact?: boolean }) { · 143 unmodified lines
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 <stop148 <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 }) { · 23 unmodified lines
177 ))}177 ))}
178 </g>178 </g>
179 <g179 <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 }) { · 90 unmodified lines
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 <stop278 <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 }) { · 6 unmodified lines
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 <stop294 <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 }) { · 4 unmodified lines
301 <pattern id={minorGridId} width="8" height="8" patternUnits="userSpaceOnUse">301 <pattern id={minorGridId} width="8" height="8" patternUnits="userSpaceOnUse">
302 <path302 <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 }) { · 1 unmodified line
309 <pattern id={majorGridId} width="32" height="32" patternUnits="userSpaceOnUse">309 <pattern id={majorGridId} width="32" height="32" patternUnits="userSpaceOnUse">
310 <path310 <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 · 265 unmodified lines
266 266
267@layer base {267@layer base {
268 :root {268 :root {
269 /* Dev artwork defaults. Built-in themes override these seven pigments in269 /* 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 · 1 unmodified line
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 · 202 unmodified lines
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);