Skip to content

Commit cc1e19a

Browse files
justramjustram
committed
Refine example theme transition continuity balance
1 parent fb03429 commit cc1e19a

2 files changed

Lines changed: 56 additions & 49 deletions

File tree

‎example/app.css‎

Lines changed: 50 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -319,33 +319,31 @@ body {
319319

320320
:root[data-theme-animating] {
321321
transition:
322-
--background var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
323-
--foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
324-
--card var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
325-
--card-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
326-
--popover var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
327-
--popover-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
328-
--primary var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
329-
--primary-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
330-
--secondary var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
331-
--secondary-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
332-
--muted var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
333-
--muted-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
334-
--accent var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
335-
--accent-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
336-
--destructive var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
337-
--destructive-foreground var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
338-
--border var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
339-
--input var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1),
340-
--ring var(--theme-skin-transition-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1);
322+
--background var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
323+
--foreground var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
324+
--card var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
325+
--card-foreground var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
326+
--popover var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
327+
--popover-foreground var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
328+
--primary var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
329+
--primary-foreground var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
330+
--secondary var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
331+
--secondary-foreground var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
332+
--muted var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
333+
--muted-foreground var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
334+
--accent var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
335+
--accent-foreground var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
336+
--border var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
337+
--input var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1),
338+
--ring var(--theme-skin-transition-duration, 760ms) cubic-bezier(0.18, 1, 0.3, 1);
341339
}
342340

343341
.theme-transition-overlay {
344342
--theme-transition-origin-x: calc(100% - 24px);
345343
--theme-transition-origin-y: 24px;
346344
--theme-transition-overlay-color: var(--background);
347345
--theme-transition-overlay-contrast-color: var(--foreground);
348-
--theme-transition-duration: 620ms;
346+
--theme-transition-duration: 760ms;
349347

350348
position: fixed;
351349
inset: 0;
@@ -358,73 +356,80 @@ body {
358356
.theme-transition-overlay::after {
359357
content: "";
360358
position: absolute;
361-
inset: -24vmax;
359+
inset: -28vmax;
362360
transform-origin: var(--theme-transition-origin-x) var(--theme-transition-origin-y);
363361
will-change: transform, opacity;
364362
}
365363

366364
.theme-transition-overlay::before {
367365
background: radial-gradient(
368-
circle 8rem at var(--theme-transition-origin-x) var(--theme-transition-origin-y),
369-
color-mix(in oklab, var(--theme-transition-overlay-color) 20%, transparent) 0%,
370-
color-mix(in oklab, var(--theme-transition-overlay-color) 12%, transparent) 20%,
371-
color-mix(in oklab, var(--theme-transition-overlay-color) 6%, transparent) 38%,
372-
transparent 72%
366+
circle 10rem at var(--theme-transition-origin-x) var(--theme-transition-origin-y),
367+
color-mix(in oklab, var(--theme-transition-overlay-color) 10%, transparent) 0%,
368+
color-mix(in oklab, var(--theme-transition-overlay-color) 6%, transparent) 28%,
369+
color-mix(in oklab, var(--theme-transition-overlay-color) 2%, transparent) 46%,
370+
transparent 78%
373371
);
374372
opacity: 0;
375-
transform: scale(0.55);
373+
transform: scale(0.7);
374+
filter: blur(18px);
376375
}
377376

378377
.theme-transition-overlay::after {
379378
background: radial-gradient(
380-
circle 7rem at var(--theme-transition-origin-x) var(--theme-transition-origin-y),
381-
color-mix(in oklab, var(--theme-transition-overlay-contrast-color) 10%, transparent) 0%,
382-
color-mix(in oklab, var(--theme-transition-overlay-contrast-color) 6%, transparent) 16%,
383-
transparent 66%
379+
circle 8.5rem at var(--theme-transition-origin-x) var(--theme-transition-origin-y),
380+
color-mix(in oklab, var(--theme-transition-overlay-contrast-color) 4%, transparent) 0%,
381+
color-mix(in oklab, var(--theme-transition-overlay-contrast-color) 2%, transparent) 20%,
382+
transparent 72%
384383
);
385384
opacity: 0;
386-
transform: scale(0.6);
385+
transform: scale(0.78);
386+
filter: blur(20px);
387387
}
388388

389389
.theme-transition-overlay.is-running::before {
390-
animation: example-theme-fog var(--theme-transition-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
390+
animation: example-theme-fog var(--theme-transition-duration) cubic-bezier(0.18, 1, 0.3, 1) forwards;
391391
}
392392

393393
.theme-transition-overlay.is-running::after {
394-
animation: example-theme-ring var(--theme-transition-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
394+
animation: example-theme-ring var(--theme-transition-duration) cubic-bezier(0.18, 1, 0.3, 1) forwards;
395395
}
396396

397397
@keyframes example-theme-fog {
398398
0% {
399399
opacity: 0.06;
400-
transform: scale(0.55);
400+
transform: scale(0.7);
401401
}
402402

403-
24% {
404-
opacity: 0.22;
405-
transform: scale(1.02);
403+
20% {
404+
opacity: 0.13;
405+
transform: scale(0.95);
406+
}
407+
408+
60% {
409+
opacity: 0.08;
410+
transform: scale(1.48);
406411
}
407412

408413
100% {
409414
opacity: 0;
410-
transform: scale(2.25);
415+
transform: scale(2.45);
411416
}
412417
}
413418

414419
@keyframes example-theme-ring {
415420
0% {
416-
opacity: 0.04;
417-
transform: scale(0.6);
421+
opacity: 0.015;
422+
transform: scale(0.78);
418423
}
419424

420-
28% {
421-
opacity: 0.14;
422-
transform: scale(1.04);
425+
24% {
426+
opacity: 0.045;
427+
transform: scale(1.02);
423428
}
424429

425430
100% {
426431
opacity: 0;
427-
transform: scale(2.05);
432+
transform: scale(2.18);
428433
}
429434
}
430435

‎example/runtime/theme.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ type MiniToolUiExampleThemeToggleElements = {
55
label?: Element | null;
66
};
77

8-
const THEME_TRANSITION_DURATION_MS = 620;
8+
const THEME_TRANSITION_DURATION_MS = 760;
99

1010
const TRANSITIONABLE_THEME_COLOR_PROPERTIES = [
1111
["--background", "oklch(1 0 0)"],
@@ -22,8 +22,6 @@ const TRANSITIONABLE_THEME_COLOR_PROPERTIES = [
2222
["--muted-foreground", "oklch(0.556 0 0)"],
2323
["--accent", "oklch(0.97 0 0)"],
2424
["--accent-foreground", "oklch(0.205 0 0)"],
25-
["--destructive", "oklch(0.577 0.245 27.325)"],
26-
["--destructive-foreground", "oklch(0.577 0.245 27.325)"],
2725
["--border", "oklch(0.922 0 0)"],
2826
["--input", "oklch(0.922 0 0)"],
2927
["--ring", "oklch(0.708 0 0)"],
@@ -194,7 +192,9 @@ export function applyTheme(
194192
}
195193

196194
function removeExistingThemeTransitionOverlay(): void {
197-
document.documentElement.removeAttribute("data-theme-animating");
195+
const root = document.documentElement;
196+
root.removeAttribute("data-theme-animating");
197+
root.style.removeProperty("--theme-skin-transition-duration");
198198
document.querySelector(".theme-transition-overlay")?.remove();
199199
}
200200

@@ -242,6 +242,7 @@ export function changeThemeWithTransition(
242242

243243
const root = document.documentElement;
244244
root.setAttribute("data-theme-animating", "");
245+
root.style.setProperty("--theme-skin-transition-duration", `${THEME_TRANSITION_DURATION_MS}ms`);
245246

246247
const overlay = appendThemeTransitionOverlay(theme, elements.button ?? null);
247248
applyTheme(theme, elements);
@@ -254,6 +255,7 @@ export function changeThemeWithTransition(
254255

255256
cleanedUp = true;
256257
root.removeAttribute("data-theme-animating");
258+
root.style.removeProperty("--theme-skin-transition-duration");
257259
overlay.remove();
258260
};
259261

0 commit comments

Comments
 (0)