Skip to content

Commit 23d45d9

Browse files
t3-code[bot]maria-rcks
t3-code[bot]
and
maria-rcks
authored
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>
1 parent bad1143 commit 23d45d9

2 files changed

Lines changed: 65 additions & 37 deletions

File tree

‎apps/web/src/components/SidebarStageBackdrop.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -144,10 +144,10 @@ function NightlySkyArt({ compact = false }: { compact?: boolean }) {
144144
gradientTransform="translate(216 18) rotate(137) scale(120 84)"
145145
gradientUnits="userSpaceOnUse"
146146
>
147-
<stop style={{ stopColor: "var(--stage-night-highlight)" }} stopOpacity="0.4" />
147+
<stop style={{ stopColor: "var(--stage-night-glow-highlight)" }} stopOpacity="0.4" />
148148
<stop
149149
offset="0.5"
150-
style={{ stopColor: "var(--stage-night-secondary)" }}
150+
style={{ stopColor: "var(--stage-night-glow-secondary)" }}
151151
stopOpacity="0.16"
152152
/>
153153
<stop offset="1" style={{ stopColor: "var(--stage-night-bottom)" }} stopOpacity="0" />
@@ -177,7 +177,7 @@ function NightlySkyArt({ compact = false }: { compact?: boolean }) {
177177
))}
178178
</g>
179179
<g
180-
style={{ stroke: "var(--stage-night-line)" }}
180+
style={{ stroke: "var(--stage-night-sparkle)" }}
181181
strokeLinecap="round"
182182
strokeOpacity="0.7"
183183
strokeWidth="0.6"
@@ -274,10 +274,10 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) {
274274
gradientTransform="translate(474 44) rotate(166) scale(156 92)"
275275
gradientUnits="userSpaceOnUse"
276276
>
277-
<stop style={{ stopColor: "var(--stage-art-highlight)" }} stopOpacity="0.34" />
277+
<stop style={{ stopColor: "var(--stage-art-celeste-highlight)" }} stopOpacity="0.34" />
278278
<stop
279279
offset="0.5"
280-
style={{ stopColor: "var(--stage-art-secondary)" }}
280+
style={{ stopColor: "var(--stage-art-celeste-secondary)" }}
281281
stopOpacity="0.18"
282282
/>
283283
<stop offset="1" style={{ stopColor: "var(--stage-art-bottom)" }} stopOpacity="0" />
@@ -290,7 +290,7 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) {
290290
gradientTransform="translate(704 18) rotate(145) scale(132 88)"
291291
gradientUnits="userSpaceOnUse"
292292
>
293-
<stop style={{ stopColor: "var(--stage-art-highlight)" }} stopOpacity="0.3" />
293+
<stop style={{ stopColor: "var(--stage-art-violet-highlight)" }} stopOpacity="0.3" />
294294
<stop
295295
offset="0.52"
296296
style={{ stopColor: "var(--stage-art-tertiary)" }}
@@ -301,15 +301,15 @@ function DevBlueprintArt({ compact = false }: { compact?: boolean }) {
301301
<pattern id={minorGridId} width="8" height="8" patternUnits="userSpaceOnUse">
302302
<path
303303
d="M8 0H0V8"
304-
style={{ stroke: "var(--stage-art-line)" }}
304+
style={{ stroke: "var(--stage-art-grid-line)" }}
305305
strokeOpacity="0.14"
306306
strokeWidth="0.5"
307307
/>
308308
</pattern>
309309
<pattern id={majorGridId} width="32" height="32" patternUnits="userSpaceOnUse">
310310
<path
311311
d="M32 0H0V32"
312-
style={{ stroke: "var(--stage-art-line)" }}
312+
style={{ stroke: "var(--stage-art-grid-line)" }}
313313
strokeOpacity="0.26"
314314
strokeWidth="0.6"
315315
/>

‎apps/web/src/index.css‎

Lines changed: 57 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -266,42 +266,32 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
266266

267267
@layer base {
268268
:root {
269-
/* Dev artwork defaults. Built-in themes override these seven pigments in
270-
the components layer; Nightly derives a darker matching palette. */
269+
/* Keep the original T3 Code artwork palettes as the defaults. Built-in
270+
themes override them with their own pigments in the components layer. */
271271
--stage-art-top: oklch(0.782169 0.123386 240.226);
272272
--stage-art-mid: oklch(0.616111 0.195824 259.735);
273273
--stage-art-bottom: oklch(0.441553 0.232394 265.474);
274274
--stage-art-highlight: oklch(0.951597 0.037289 215.482);
275275
--stage-art-secondary: oklch(0.794668 0.12136 235.46);
276276
--stage-art-tertiary: oklch(0.678991 0.170261 275.365);
277277
--stage-art-line: oklch(0.959666 0.029238 218.179);
278-
--stage-night-top: color-mix(
279-
in oklch,
280-
var(--stage-art-top) 38%,
281-
oklch(0.283792 0.117327 297.201)
282-
);
283-
--stage-night-mid: color-mix(
284-
in oklch,
285-
var(--stage-art-mid) 38%,
286-
oklch(0.227147 0.086086 277.99)
287-
);
288-
--stage-night-bottom: color-mix(
289-
in oklch,
290-
var(--stage-art-bottom) 38%,
291-
oklch(0.200528 0.055699 261.216)
292-
);
293-
--stage-night-highlight: var(--stage-art-highlight);
294-
--stage-night-secondary: color-mix(
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));
278+
--stage-art-celeste-highlight: oklch(0.968763 0.045822 196.42);
279+
--stage-art-celeste-secondary: oklch(0.827395 0.126071 211.26);
280+
--stage-art-violet-highlight: oklch(0.895381 0.053248 286.447);
281+
--stage-art-grid-line: oklch(0.966822 0.01757 239.99);
282+
--stage-night-base-top: oklch(0.283792 0.117327 297.201);
283+
--stage-night-base-mid: oklch(0.227147 0.086086 277.99);
284+
--stage-night-base-bottom: oklch(0.200528 0.055699 261.216);
285+
--stage-night-top: var(--stage-night-base-top);
286+
--stage-night-mid: var(--stage-night-base-mid);
287+
--stage-night-bottom: var(--stage-night-base-bottom);
288+
--stage-night-highlight: oklch(0.707246 0.157418 252.091);
289+
--stage-night-secondary: oklch(0.600473 0.182225 277.296);
290+
--stage-night-tertiary: oklch(0.62583 0.210886 305.994);
291+
--stage-night-line: oklch(0.938794 0.029114 273.103);
292+
--stage-night-glow-highlight: oklch(0.553749 0.176543 271.958);
293+
--stage-night-glow-secondary: oklch(0.345571 0.117466 273.568);
294+
--stage-night-sparkle: oklch(0.880867 0.057747 269.011);
305295
}
306296

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

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+
513541
.workspace-topbar {
514542
display: flex;
515543
height: var(--workspace-topbar-height);

0 commit comments

Comments
 (0)