@trebired/frontend 12.12.3 → 12.12.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +42 -0
- package/dist/src/theme/apply.d.ts +16 -0
- package/dist/src/theme/apply.d.ts.map +1 -1
- package/dist/src/theme/apply.js +119 -6
- package/dist/src/theme/apply.js.map +1 -1
- package/dist/src/theme/constants.d.ts +2 -1
- package/dist/src/theme/constants.d.ts.map +1 -1
- package/dist/src/theme/constants.js +2 -1
- package/dist/src/theme/constants.js.map +1 -1
- package/dist/styles/utils/base.scss +33 -5
- package/dist/theme/apply.d.ts +16 -0
- package/dist/theme/apply.d.ts.map +1 -1
- package/dist/theme/apply.js +119 -6
- package/dist/theme/apply.js.map +1 -1
- package/dist/theme/constants.d.ts +2 -1
- package/dist/theme/constants.d.ts.map +1 -1
- package/dist/theme/constants.js +2 -1
- package/dist/theme/constants.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,48 @@ All notable changes to `@trebired/frontend` will be documented here.
|
|
|
4
4
|
|
|
5
5
|
This project follows semantic versioning once published.
|
|
6
6
|
|
|
7
|
+
## 12.12.5
|
|
8
|
+
|
|
9
|
+
### Fixed
|
|
10
|
+
|
|
11
|
+
- Theme switching is now one page-level cross-fade instead of a transition per element,
|
|
12
|
+
superseding 12.12.4's approach, which did not fix the stagger and made the switch slow and
|
|
13
|
+
laggy. Forcing a shared duration onto `*` meant a page's worth of simultaneous
|
|
14
|
+
`background-color`/`box-shadow` transitions — all main-thread paint work, so the switch janked
|
|
15
|
+
and the stagger came back as paint landed in chunks — while a root `transitionend` listener took
|
|
16
|
+
one bubbled event per element per property (8012 of them on a 4000-element page). It also could
|
|
17
|
+
never be complete: anything without a transitionable property (gradients, images, native
|
|
18
|
+
scrollbars) still snapped instantly while everything else animated. `applyTheme()` now runs the
|
|
19
|
+
switch through the View Transitions API, cross-fading the whole page as a single
|
|
20
|
+
compositor-driven animation with per-element transitions suppressed underneath — uniform by
|
|
21
|
+
construction, since there is one animation rather than thousands. On the same 4000-element page
|
|
22
|
+
this takes bubbled `transitionend` events from 8012 to 0 and roughly halves the worst frame
|
|
23
|
+
time. Browsers without the API fall back to one shared duration across the color-affecting
|
|
24
|
+
properties (`box-shadow` excluded, being the expensive one). `prefers-reduced-motion` switches
|
|
25
|
+
instantly, as before.
|
|
26
|
+
- `getEffectiveTheme()`/`currentDomTheme()` now report the theme a switch has already committed to
|
|
27
|
+
while that switch is still in flight. A view transition applies the DOM change from a callback
|
|
28
|
+
the browser runs a frame later, so without this a second toggle click landing inside that window
|
|
29
|
+
read the old value and computed `nextTheme()` back to where it started.
|
|
30
|
+
|
|
31
|
+
## 12.12.4
|
|
32
|
+
|
|
33
|
+
### Fixed
|
|
34
|
+
|
|
35
|
+
- Switching theme mode (light/dark) transitioned every element at its own locally-configured
|
|
36
|
+
color/background/border-color duration — tuned per component for hover/focus feedback (120ms on
|
|
37
|
+
the sidebar, 180ms on surfaces, undeclared and instant elsewhere) — because a theme switch just
|
|
38
|
+
changes the CSS vars those same properties read, and the browser can't tell "this changed from a
|
|
39
|
+
theme switch" from "this changed from a hover." The result looked staggered: some elements
|
|
40
|
+
settled into the new colors well before others. `styles/utils/base.scss` already had a
|
|
41
|
+
`[data-theme-switching="true"]` rule scaffolded for this, but nothing ever set that attribute,
|
|
42
|
+
and the rule itself disabled transitions entirely (`transition: none !important`) rather than
|
|
43
|
+
unifying them — trading "staggered" for "no transition," not a fix. `theme/apply.ts`'s
|
|
44
|
+
`applyTheme()` now sets `data-tbf-theme-switching="true"` for the duration of a switch (cleared
|
|
45
|
+
on `transitionend`, debounced, with a fallback timeout for e.g. `prefers-reduced-motion` where
|
|
46
|
+
nothing transitions at all), and the CSS rule forces one shared `transition-normal` duration for
|
|
47
|
+
every color-affecting property instead of disabling transitions.
|
|
48
|
+
|
|
7
49
|
## 12.12.3
|
|
8
50
|
|
|
9
51
|
### Fixed
|
|
@@ -22,6 +22,22 @@ declare function systemThemeKey(options?: ThemeRuntimeOptions): ThemeValue;
|
|
|
22
22
|
declare function currentDomTheme(options?: ThemeRuntimeOptions): ThemeValue;
|
|
23
23
|
declare function getEffectiveTheme(value?: unknown, options?: ThemeRuntimeOptions): ThemeValue;
|
|
24
24
|
declare function themeScheme(key: unknown, options?: ThemeRuntimeOptions): ThemeModeScheme;
|
|
25
|
+
/**
|
|
26
|
+
* A theme switch changes the CSS vars every element reads at once, and the
|
|
27
|
+
* browser cannot tell that from a hover — so each element animated on its own
|
|
28
|
+
* locally tuned duration and the switch looked staggered. Animating them
|
|
29
|
+
* together instead is not the fix either: a page's worth of `background-color`
|
|
30
|
+
* /`box-shadow` transitions are main-thread paint work, which janks (and the
|
|
31
|
+
* stagger comes back, since paint lands in chunks) and still leaves out
|
|
32
|
+
* everything that has no transitionable property at all — gradients, images,
|
|
33
|
+
* native scrollbars.
|
|
34
|
+
*
|
|
35
|
+
* So the whole page cross-fades as a single compositor-driven animation via
|
|
36
|
+
* the View Transitions API, with per-element transitions suppressed
|
|
37
|
+
* underneath. That is uniform by construction: one animation, not thousands.
|
|
38
|
+
* Browsers without the API fall back to one shared duration for the
|
|
39
|
+
* color-affecting properties, which is the best a per-element approach can do.
|
|
40
|
+
*/
|
|
25
41
|
declare function applyTheme(theme: ThemeValue, options?: ThemeRuntimeOptions): ThemeValue;
|
|
26
42
|
declare function readPersistedTheme(adapter?: ThemePersistenceAdapter, options?: ThemeRuntimeOptions): Promise<ThemeValue>;
|
|
27
43
|
declare function setTheme(theme: ThemeValue, options?: ThemeRuntimeOptions): Promise<ThemeValue>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"apply.d.ts","sourceRoot":"","sources":["../../../src/theme/apply.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"apply.d.ts","sourceRoot":"","sources":["../../../src/theme/apply.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEpE,KAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,KAAK,uBAAuB,GAAG;IAC7B,GAAG,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAC,IAAI,GAAC,SAAS,CAAC,GAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,OAAO,CAAC,GAAC,OAAO,CAAC;CACvD,CAAC;AAEF,KAAK,mBAAmB,GAAG,gBAAgB,GAAE;IAC3C,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,IAAI,CAAC,EAAE,uBAAuB,CAAC;CAChC,CAAC;AAEF,KAAK,iBAAiB,GAAG,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;AAIlD,iBAAS,iBAAiB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAE5D;AAED,iBAAS,YAAY,CAAC,IAAI,GAAE,QAAmB,GAAG,IAAI,CAErD;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAGrF;AAUD,iBAAS,YAAY,IAAI,eAAe,CAEvC;AAED,iBAAS,iBAAiB,IAAI,eAAe,CAM5C;AAED,iBAAS,oBAAoB,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAa7D;AAED,iBAAS,cAAc,CAAC,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAGrE;AAWD,iBAAS,eAAe,CAAC,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAItE;AAED,iBAAS,iBAAiB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAEzF;AAED,iBAAS,WAAW,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,GAAE,mBAAwB,GAAG,eAAe,CAErF;AAyFD;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,GAAE,mBAAwB,GAAG,UAAU,CA8BpF;AAED,iBAAe,kBAAkB,CAC/B,OAAO,CAAC,EAAE,uBAAuB,EACjC,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,UAAU,CAAC,CAOrB;AAED,iBAAe,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,GAAE,mBAAwB,GAAG,OAAO,CAAC,UAAU,CAAC,CASjG;AAED,iBAAS,SAAS,CAAC,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAIhE;AAED,OAAO,EACL,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,WAAW,GACZ,CAAC;AACF,YAAY,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/src/theme/apply.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { frontendCssVar } from "../../namespace/index.js";
|
|
2
|
+
import { THEME_ATTR, THEME_CHANGE_EVENT, THEME_SWITCHING_ATTR } from "./constants.js";
|
|
2
3
|
import { findThemeMode, getThemeModes, themeModeKeyOf } from "./modes.js";
|
|
3
4
|
const themeSyncListeners = new Set();
|
|
4
5
|
function registerThemeSync(listener) {
|
|
@@ -48,9 +49,19 @@ function systemThemeKey(options = {}) {
|
|
|
48
49
|
const registry = getThemeModes(options);
|
|
49
50
|
return systemPrefersLight() ? registry.light : registry.dark;
|
|
50
51
|
}
|
|
52
|
+
/**
|
|
53
|
+
* A view-transition switch commits the attribute from its callback, which the
|
|
54
|
+
* browser runs a frame later — so between `applyTheme()` and that commit the
|
|
55
|
+
* DOM still reads the old theme. `pendingTheme` holds the value already
|
|
56
|
+
* decided on, otherwise a second toggle click landing inside that window
|
|
57
|
+
* computes `nextTheme()` from the stale one and switches back.
|
|
58
|
+
*/
|
|
59
|
+
let pendingTheme = "";
|
|
51
60
|
function currentDomTheme(options = {}) {
|
|
52
61
|
if (typeof document === "undefined")
|
|
53
62
|
return "";
|
|
63
|
+
if (pendingTheme)
|
|
64
|
+
return pendingTheme;
|
|
54
65
|
return normalizeTheme(document.documentElement.getAttribute(THEME_ATTR), options);
|
|
55
66
|
}
|
|
56
67
|
function getEffectiveTheme(value, options = {}) {
|
|
@@ -66,18 +77,120 @@ function dispatchThemeChange(theme, themeKey) {
|
|
|
66
77
|
detail: { theme, themeKey },
|
|
67
78
|
}));
|
|
68
79
|
}
|
|
69
|
-
|
|
80
|
+
const THEME_SWITCH_BUFFER_MS = 120;
|
|
81
|
+
const THEME_SWITCH_DEFAULT_MS = 240;
|
|
82
|
+
let themeSwitchTimer = null;
|
|
83
|
+
function endThemeSwitch() {
|
|
70
84
|
if (typeof document === "undefined")
|
|
71
|
-
return
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
85
|
+
return;
|
|
86
|
+
document.documentElement.removeAttribute(THEME_SWITCHING_ATTR);
|
|
87
|
+
if (themeSwitchTimer)
|
|
88
|
+
clearTimeout(themeSwitchTimer);
|
|
89
|
+
themeSwitchTimer = null;
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Suppresses (`"instant"`) or unifies (`"uniform"`) per-element transitions
|
|
93
|
+
* for the length of a switch — see `styles/utils/base.scss`. The hold is a
|
|
94
|
+
* plain timer: a `transitionend` listener would receive one bubbled event per
|
|
95
|
+
* element per property, which on a real page is tens of thousands of events.
|
|
96
|
+
*/
|
|
97
|
+
function beginThemeSwitch(mode, holdMs) {
|
|
98
|
+
if (typeof document === "undefined")
|
|
99
|
+
return;
|
|
100
|
+
document.documentElement.setAttribute(THEME_SWITCHING_ATTR, mode);
|
|
101
|
+
if (themeSwitchTimer)
|
|
102
|
+
clearTimeout(themeSwitchTimer);
|
|
103
|
+
themeSwitchTimer = setTimeout(endThemeSwitch, holdMs);
|
|
104
|
+
}
|
|
105
|
+
function themeSwitchDurationMs() {
|
|
106
|
+
try {
|
|
107
|
+
const raw = getComputedStyle(document.documentElement)
|
|
108
|
+
.getPropertyValue(frontendCssVar("transition-normal"))
|
|
109
|
+
.trim();
|
|
110
|
+
if (raw.endsWith("ms"))
|
|
111
|
+
return Number.parseFloat(raw) || THEME_SWITCH_DEFAULT_MS;
|
|
112
|
+
if (raw.endsWith("s"))
|
|
113
|
+
return (Number.parseFloat(raw) || 0.24) * 1000;
|
|
114
|
+
}
|
|
115
|
+
catch {
|
|
116
|
+
// an unreadable token just means the default hold below
|
|
117
|
+
}
|
|
118
|
+
return THEME_SWITCH_DEFAULT_MS;
|
|
119
|
+
}
|
|
120
|
+
function prefersReducedMotion() {
|
|
121
|
+
try {
|
|
122
|
+
return Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
|
|
123
|
+
}
|
|
124
|
+
catch {
|
|
125
|
+
return false;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
function startViewTransition(run) {
|
|
129
|
+
const start = document.startViewTransition;
|
|
130
|
+
if (typeof start !== "function")
|
|
131
|
+
return null;
|
|
132
|
+
try {
|
|
133
|
+
return start.call(document, run);
|
|
134
|
+
}
|
|
135
|
+
catch {
|
|
136
|
+
return null;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
function commitTheme(next, normalized, previous, options) {
|
|
140
|
+
pendingTheme = "";
|
|
75
141
|
document.documentElement.setAttribute(THEME_ATTR, next);
|
|
76
142
|
applyDeviceScheme();
|
|
77
143
|
document.body?.setAttribute(THEME_ATTR, next);
|
|
78
144
|
if (previous !== next)
|
|
79
145
|
dispatchThemeChange(normalized, next);
|
|
80
146
|
runThemeSync(document);
|
|
147
|
+
void options;
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* A theme switch changes the CSS vars every element reads at once, and the
|
|
151
|
+
* browser cannot tell that from a hover — so each element animated on its own
|
|
152
|
+
* locally tuned duration and the switch looked staggered. Animating them
|
|
153
|
+
* together instead is not the fix either: a page's worth of `background-color`
|
|
154
|
+
* /`box-shadow` transitions are main-thread paint work, which janks (and the
|
|
155
|
+
* stagger comes back, since paint lands in chunks) and still leaves out
|
|
156
|
+
* everything that has no transitionable property at all — gradients, images,
|
|
157
|
+
* native scrollbars.
|
|
158
|
+
*
|
|
159
|
+
* So the whole page cross-fades as a single compositor-driven animation via
|
|
160
|
+
* the View Transitions API, with per-element transitions suppressed
|
|
161
|
+
* underneath. That is uniform by construction: one animation, not thousands.
|
|
162
|
+
* Browsers without the API fall back to one shared duration for the
|
|
163
|
+
* color-affecting properties, which is the best a per-element approach can do.
|
|
164
|
+
*/
|
|
165
|
+
function applyTheme(theme, options = {}) {
|
|
166
|
+
if (typeof document === "undefined")
|
|
167
|
+
return getEffectiveTheme(theme, options);
|
|
168
|
+
const normalized = normalizeTheme(theme, options);
|
|
169
|
+
const next = normalized || systemThemeKey(options);
|
|
170
|
+
const previous = currentDomTheme(options);
|
|
171
|
+
const commit = () => commitTheme(next, normalized, previous, options);
|
|
172
|
+
if (previous === next) {
|
|
173
|
+
commit();
|
|
174
|
+
return next;
|
|
175
|
+
}
|
|
176
|
+
const hold = themeSwitchDurationMs() + THEME_SWITCH_BUFFER_MS;
|
|
177
|
+
if (prefersReducedMotion()) {
|
|
178
|
+
beginThemeSwitch("instant", THEME_SWITCH_BUFFER_MS);
|
|
179
|
+
commit();
|
|
180
|
+
return next;
|
|
181
|
+
}
|
|
182
|
+
pendingTheme = next;
|
|
183
|
+
const transition = startViewTransition(() => {
|
|
184
|
+
beginThemeSwitch("instant", hold);
|
|
185
|
+
commit();
|
|
186
|
+
});
|
|
187
|
+
if (transition) {
|
|
188
|
+
void Promise.resolve(transition.finished).then(endThemeSwitch, endThemeSwitch);
|
|
189
|
+
return next;
|
|
190
|
+
}
|
|
191
|
+
pendingTheme = "";
|
|
192
|
+
beginThemeSwitch("uniform", hold);
|
|
193
|
+
commit();
|
|
81
194
|
return next;
|
|
82
195
|
}
|
|
83
196
|
async function readPersistedTheme(adapter, options = {}) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"apply.js","sourceRoot":"","sources":["../../../src/theme/apply.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"apply.js","sourceRoot":"","sources":["../../../src/theme/apply.ts"],"names":[],"mappings":"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"}
|
|
@@ -8,7 +8,8 @@ declare const THEME_MODES_CSS_VAR: `--${string}`;
|
|
|
8
8
|
declare const THEME_MODES_GLOBAL_KEY = "tbf.frontend.theme.modes";
|
|
9
9
|
declare const THEME_TOGGLE_SELECTOR: string;
|
|
10
10
|
declare const THEME_SELECT_SELECTOR: string;
|
|
11
|
+
declare const THEME_SWITCHING_ATTR: `data-${string}`;
|
|
11
12
|
declare const THEME_OPTION_SELECTOR: string;
|
|
12
13
|
declare const THEME_LABEL_SELECTOR: string;
|
|
13
|
-
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_DEFAULT_CSS_VAR, THEME_LABEL_SELECTOR, THEME_MODES_CSS_VAR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
14
|
+
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_DEFAULT_CSS_VAR, THEME_LABEL_SELECTOR, THEME_MODES_CSS_VAR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_SWITCHING_ATTR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
14
15
|
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,UAAU,kBAA4B,CAAC;AAC7C,QAAA,MAAM,gBAAgB,kBAAkC,CAAC;AACzD,QAAA,MAAM,kBAAkB,kBAAoC,CAAC;AAC7D,QAAA,MAAM,gBAAgB,kBAAkC,CAAC;AACzD,QAAA,MAAM,kBAAkB,QAAmC,CAAC;AAC5D,QAAA,MAAM,qBAAqB,eAAkC,CAAC;AAC9D,QAAA,MAAM,mBAAmB,eAAgC,CAAC;AAC1D,QAAA,MAAM,sBAAsB,6BAA4C,CAAC;AACzE,QAAA,MAAM,qBAAqB,QAAuC,CAAC;AACnE,QAAA,MAAM,qBAAqB,QAAuC,CAAC;AACnE,QAAA,MAAM,qBAAqB,QAAsC,CAAC;AAClE,QAAA,MAAM,oBAAoB,QAAsC,CAAC;AAEjE,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,UAAU,kBAA4B,CAAC;AAC7C,QAAA,MAAM,gBAAgB,kBAAkC,CAAC;AACzD,QAAA,MAAM,kBAAkB,kBAAoC,CAAC;AAC7D,QAAA,MAAM,gBAAgB,kBAAkC,CAAC;AACzD,QAAA,MAAM,kBAAkB,QAAmC,CAAC;AAC5D,QAAA,MAAM,qBAAqB,eAAkC,CAAC;AAC9D,QAAA,MAAM,mBAAmB,eAAgC,CAAC;AAC1D,QAAA,MAAM,sBAAsB,6BAA4C,CAAC;AACzE,QAAA,MAAM,qBAAqB,QAAuC,CAAC;AACnE,QAAA,MAAM,qBAAqB,QAAuC,CAAC;AACnE,QAAA,MAAM,oBAAoB,kBAAsC,CAAC;AACjE,QAAA,MAAM,qBAAqB,QAAsC,CAAC;AAClE,QAAA,MAAM,oBAAoB,QAAsC,CAAC;AAEjE,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
|
@@ -9,7 +9,8 @@ const THEME_MODES_CSS_VAR = frontendCssVar("theme-modes");
|
|
|
9
9
|
const THEME_MODES_GLOBAL_KEY = `${FRONTEND_PREFIX}.frontend.theme.modes`;
|
|
10
10
|
const THEME_TOGGLE_SELECTOR = frontendDataSelector("theme-button");
|
|
11
11
|
const THEME_SELECT_SELECTOR = frontendDataSelector("theme-select");
|
|
12
|
+
const THEME_SWITCHING_ATTR = frontendDataAttr("theme-switching");
|
|
12
13
|
const THEME_OPTION_SELECTOR = frontendDataSelector("theme-value");
|
|
13
14
|
const THEME_LABEL_SELECTOR = frontendDataSelector("theme-label");
|
|
14
|
-
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_DEFAULT_CSS_VAR, THEME_LABEL_SELECTOR, THEME_MODES_CSS_VAR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
15
|
+
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_DEFAULT_CSS_VAR, THEME_LABEL_SELECTOR, THEME_MODES_CSS_VAR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_SWITCHING_ATTR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
15
16
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE3H,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAC7C,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AACzD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAC7D,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AACzD,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;AAC5D,MAAM,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAC9D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AAC1D,MAAM,sBAAsB,GAAG,GAAG,eAAe,uBAAuB,CAAC;AACzE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;AACnE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;AACnE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAClE,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAEjE,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE3H,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAC7C,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AACzD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAC7D,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AACzD,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;AAC5D,MAAM,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAC9D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AAC1D,MAAM,sBAAsB,GAAG,GAAG,eAAe,uBAAuB,CAAC;AACzE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;AACnE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;AACnE,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AACjE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAClE,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAEjE,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
|
@@ -61,15 +61,43 @@ body {
|
|
|
61
61
|
box-shadow 0.3s ease;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Theme switching animates the whole page as one cross-fade rather than
|
|
66
|
+
* per element — see the comment on `applyTheme()` in theme/apply.ts for
|
|
67
|
+
* why per-element transitions cannot be made uniform. Here the live DOM
|
|
68
|
+
* only has to stop animating underneath the cross-fade, so it snaps
|
|
69
|
+
* straight to the new theme while the snapshot fades over it.
|
|
70
|
+
*/
|
|
71
|
+
#{ns.data("theme-switching", "instant")},
|
|
72
|
+
#{ns.data("theme-switching", "instant")} *,
|
|
73
|
+
#{ns.data("theme-switching", "instant")} *::before,
|
|
74
|
+
#{ns.data("theme-switching", "instant")} *::after {
|
|
69
75
|
transition: none !important;
|
|
70
76
|
animation: none !important;
|
|
71
77
|
}
|
|
72
78
|
|
|
79
|
+
::view-transition-old(root),
|
|
80
|
+
::view-transition-new(root) {
|
|
81
|
+
animation-duration: var(#{ns.css-var("transition-normal")}, 240ms);
|
|
82
|
+
animation-timing-function: ease;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Fallback for browsers without the View Transitions API: one shared
|
|
87
|
+
* duration for the color-affecting properties. `box-shadow` is deliberately
|
|
88
|
+
* left out — animating it on every element is expensive enough to jank the
|
|
89
|
+
* switch, which reintroduces the very stagger this is fixing.
|
|
90
|
+
*/
|
|
91
|
+
#{ns.data("theme-switching", "uniform")},
|
|
92
|
+
#{ns.data("theme-switching", "uniform")} *,
|
|
93
|
+
#{ns.data("theme-switching", "uniform")} *::before,
|
|
94
|
+
#{ns.data("theme-switching", "uniform")} *::after {
|
|
95
|
+
transition-property: background-color, border-color, color, fill, stroke, outline-color !important;
|
|
96
|
+
transition-duration: var(#{ns.css-var("transition-normal")}, 240ms) !important;
|
|
97
|
+
transition-timing-function: ease !important;
|
|
98
|
+
animation: none !important;
|
|
99
|
+
}
|
|
100
|
+
|
|
73
101
|
body {
|
|
74
102
|
display: flex;
|
|
75
103
|
min-height: 100vh;
|
package/dist/theme/apply.d.ts
CHANGED
|
@@ -22,6 +22,22 @@ declare function systemThemeKey(options?: ThemeRuntimeOptions): ThemeValue;
|
|
|
22
22
|
declare function currentDomTheme(options?: ThemeRuntimeOptions): ThemeValue;
|
|
23
23
|
declare function getEffectiveTheme(value?: unknown, options?: ThemeRuntimeOptions): ThemeValue;
|
|
24
24
|
declare function themeScheme(key: unknown, options?: ThemeRuntimeOptions): ThemeModeScheme;
|
|
25
|
+
/**
|
|
26
|
+
* A theme switch changes the CSS vars every element reads at once, and the
|
|
27
|
+
* browser cannot tell that from a hover — so each element animated on its own
|
|
28
|
+
* locally tuned duration and the switch looked staggered. Animating them
|
|
29
|
+
* together instead is not the fix either: a page's worth of `background-color`
|
|
30
|
+
* /`box-shadow` transitions are main-thread paint work, which janks (and the
|
|
31
|
+
* stagger comes back, since paint lands in chunks) and still leaves out
|
|
32
|
+
* everything that has no transitionable property at all — gradients, images,
|
|
33
|
+
* native scrollbars.
|
|
34
|
+
*
|
|
35
|
+
* So the whole page cross-fades as a single compositor-driven animation via
|
|
36
|
+
* the View Transitions API, with per-element transitions suppressed
|
|
37
|
+
* underneath. That is uniform by construction: one animation, not thousands.
|
|
38
|
+
* Browsers without the API fall back to one shared duration for the
|
|
39
|
+
* color-affecting properties, which is the best a per-element approach can do.
|
|
40
|
+
*/
|
|
25
41
|
declare function applyTheme(theme: ThemeValue, options?: ThemeRuntimeOptions): ThemeValue;
|
|
26
42
|
declare function readPersistedTheme(adapter?: ThemePersistenceAdapter, options?: ThemeRuntimeOptions): Promise<ThemeValue>;
|
|
27
43
|
declare function setTheme(theme: ThemeValue, options?: ThemeRuntimeOptions): Promise<ThemeValue>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"apply.d.ts","sourceRoot":"","sources":["../../../src/theme/apply.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"apply.d.ts","sourceRoot":"","sources":["../../../src/theme/apply.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEpE,KAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,KAAK,uBAAuB,GAAG;IAC7B,GAAG,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAC,IAAI,GAAC,SAAS,CAAC,GAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,OAAO,CAAC,GAAC,OAAO,CAAC;CACvD,CAAC;AAEF,KAAK,mBAAmB,GAAG,gBAAgB,GAAE;IAC3C,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,IAAI,CAAC,EAAE,uBAAuB,CAAC;CAChC,CAAC;AAEF,KAAK,iBAAiB,GAAG,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;AAIlD,iBAAS,iBAAiB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAE5D;AAED,iBAAS,YAAY,CAAC,IAAI,GAAE,QAAmB,GAAG,IAAI,CAErD;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAGrF;AAUD,iBAAS,YAAY,IAAI,eAAe,CAEvC;AAED,iBAAS,iBAAiB,IAAI,eAAe,CAM5C;AAED,iBAAS,oBAAoB,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAa7D;AAED,iBAAS,cAAc,CAAC,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAGrE;AAWD,iBAAS,eAAe,CAAC,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAItE;AAED,iBAAS,iBAAiB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAEzF;AAED,iBAAS,WAAW,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,GAAE,mBAAwB,GAAG,eAAe,CAErF;AAyFD;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,GAAE,mBAAwB,GAAG,UAAU,CA8BpF;AAED,iBAAe,kBAAkB,CAC/B,OAAO,CAAC,EAAE,uBAAuB,EACjC,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,UAAU,CAAC,CAOrB;AAED,iBAAe,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,GAAE,mBAAwB,GAAG,OAAO,CAAC,UAAU,CAAC,CASjG;AAED,iBAAS,SAAS,CAAC,OAAO,GAAE,mBAAwB,GAAG,UAAU,CAIhE;AAED,OAAO,EACL,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,WAAW,GACZ,CAAC;AACF,YAAY,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/theme/apply.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { frontendCssVar } from "../namespace/index.js";
|
|
2
|
+
import { THEME_ATTR, THEME_CHANGE_EVENT, THEME_SWITCHING_ATTR } from "./constants.js";
|
|
2
3
|
import { findThemeMode, getThemeModes, themeModeKeyOf } from "./modes.js";
|
|
3
4
|
const themeSyncListeners = new Set();
|
|
4
5
|
function registerThemeSync(listener) {
|
|
@@ -48,9 +49,19 @@ function systemThemeKey(options = {}) {
|
|
|
48
49
|
const registry = getThemeModes(options);
|
|
49
50
|
return systemPrefersLight() ? registry.light : registry.dark;
|
|
50
51
|
}
|
|
52
|
+
/**
|
|
53
|
+
* A view-transition switch commits the attribute from its callback, which the
|
|
54
|
+
* browser runs a frame later — so between `applyTheme()` and that commit the
|
|
55
|
+
* DOM still reads the old theme. `pendingTheme` holds the value already
|
|
56
|
+
* decided on, otherwise a second toggle click landing inside that window
|
|
57
|
+
* computes `nextTheme()` from the stale one and switches back.
|
|
58
|
+
*/
|
|
59
|
+
let pendingTheme = "";
|
|
51
60
|
function currentDomTheme(options = {}) {
|
|
52
61
|
if (typeof document === "undefined")
|
|
53
62
|
return "";
|
|
63
|
+
if (pendingTheme)
|
|
64
|
+
return pendingTheme;
|
|
54
65
|
return normalizeTheme(document.documentElement.getAttribute(THEME_ATTR), options);
|
|
55
66
|
}
|
|
56
67
|
function getEffectiveTheme(value, options = {}) {
|
|
@@ -66,18 +77,120 @@ function dispatchThemeChange(theme, themeKey) {
|
|
|
66
77
|
detail: { theme, themeKey },
|
|
67
78
|
}));
|
|
68
79
|
}
|
|
69
|
-
|
|
80
|
+
const THEME_SWITCH_BUFFER_MS = 120;
|
|
81
|
+
const THEME_SWITCH_DEFAULT_MS = 240;
|
|
82
|
+
let themeSwitchTimer = null;
|
|
83
|
+
function endThemeSwitch() {
|
|
70
84
|
if (typeof document === "undefined")
|
|
71
|
-
return
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
85
|
+
return;
|
|
86
|
+
document.documentElement.removeAttribute(THEME_SWITCHING_ATTR);
|
|
87
|
+
if (themeSwitchTimer)
|
|
88
|
+
clearTimeout(themeSwitchTimer);
|
|
89
|
+
themeSwitchTimer = null;
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Suppresses (`"instant"`) or unifies (`"uniform"`) per-element transitions
|
|
93
|
+
* for the length of a switch — see `styles/utils/base.scss`. The hold is a
|
|
94
|
+
* plain timer: a `transitionend` listener would receive one bubbled event per
|
|
95
|
+
* element per property, which on a real page is tens of thousands of events.
|
|
96
|
+
*/
|
|
97
|
+
function beginThemeSwitch(mode, holdMs) {
|
|
98
|
+
if (typeof document === "undefined")
|
|
99
|
+
return;
|
|
100
|
+
document.documentElement.setAttribute(THEME_SWITCHING_ATTR, mode);
|
|
101
|
+
if (themeSwitchTimer)
|
|
102
|
+
clearTimeout(themeSwitchTimer);
|
|
103
|
+
themeSwitchTimer = setTimeout(endThemeSwitch, holdMs);
|
|
104
|
+
}
|
|
105
|
+
function themeSwitchDurationMs() {
|
|
106
|
+
try {
|
|
107
|
+
const raw = getComputedStyle(document.documentElement)
|
|
108
|
+
.getPropertyValue(frontendCssVar("transition-normal"))
|
|
109
|
+
.trim();
|
|
110
|
+
if (raw.endsWith("ms"))
|
|
111
|
+
return Number.parseFloat(raw) || THEME_SWITCH_DEFAULT_MS;
|
|
112
|
+
if (raw.endsWith("s"))
|
|
113
|
+
return (Number.parseFloat(raw) || 0.24) * 1000;
|
|
114
|
+
}
|
|
115
|
+
catch {
|
|
116
|
+
// an unreadable token just means the default hold below
|
|
117
|
+
}
|
|
118
|
+
return THEME_SWITCH_DEFAULT_MS;
|
|
119
|
+
}
|
|
120
|
+
function prefersReducedMotion() {
|
|
121
|
+
try {
|
|
122
|
+
return Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
|
|
123
|
+
}
|
|
124
|
+
catch {
|
|
125
|
+
return false;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
function startViewTransition(run) {
|
|
129
|
+
const start = document.startViewTransition;
|
|
130
|
+
if (typeof start !== "function")
|
|
131
|
+
return null;
|
|
132
|
+
try {
|
|
133
|
+
return start.call(document, run);
|
|
134
|
+
}
|
|
135
|
+
catch {
|
|
136
|
+
return null;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
function commitTheme(next, normalized, previous, options) {
|
|
140
|
+
pendingTheme = "";
|
|
75
141
|
document.documentElement.setAttribute(THEME_ATTR, next);
|
|
76
142
|
applyDeviceScheme();
|
|
77
143
|
document.body?.setAttribute(THEME_ATTR, next);
|
|
78
144
|
if (previous !== next)
|
|
79
145
|
dispatchThemeChange(normalized, next);
|
|
80
146
|
runThemeSync(document);
|
|
147
|
+
void options;
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* A theme switch changes the CSS vars every element reads at once, and the
|
|
151
|
+
* browser cannot tell that from a hover — so each element animated on its own
|
|
152
|
+
* locally tuned duration and the switch looked staggered. Animating them
|
|
153
|
+
* together instead is not the fix either: a page's worth of `background-color`
|
|
154
|
+
* /`box-shadow` transitions are main-thread paint work, which janks (and the
|
|
155
|
+
* stagger comes back, since paint lands in chunks) and still leaves out
|
|
156
|
+
* everything that has no transitionable property at all — gradients, images,
|
|
157
|
+
* native scrollbars.
|
|
158
|
+
*
|
|
159
|
+
* So the whole page cross-fades as a single compositor-driven animation via
|
|
160
|
+
* the View Transitions API, with per-element transitions suppressed
|
|
161
|
+
* underneath. That is uniform by construction: one animation, not thousands.
|
|
162
|
+
* Browsers without the API fall back to one shared duration for the
|
|
163
|
+
* color-affecting properties, which is the best a per-element approach can do.
|
|
164
|
+
*/
|
|
165
|
+
function applyTheme(theme, options = {}) {
|
|
166
|
+
if (typeof document === "undefined")
|
|
167
|
+
return getEffectiveTheme(theme, options);
|
|
168
|
+
const normalized = normalizeTheme(theme, options);
|
|
169
|
+
const next = normalized || systemThemeKey(options);
|
|
170
|
+
const previous = currentDomTheme(options);
|
|
171
|
+
const commit = () => commitTheme(next, normalized, previous, options);
|
|
172
|
+
if (previous === next) {
|
|
173
|
+
commit();
|
|
174
|
+
return next;
|
|
175
|
+
}
|
|
176
|
+
const hold = themeSwitchDurationMs() + THEME_SWITCH_BUFFER_MS;
|
|
177
|
+
if (prefersReducedMotion()) {
|
|
178
|
+
beginThemeSwitch("instant", THEME_SWITCH_BUFFER_MS);
|
|
179
|
+
commit();
|
|
180
|
+
return next;
|
|
181
|
+
}
|
|
182
|
+
pendingTheme = next;
|
|
183
|
+
const transition = startViewTransition(() => {
|
|
184
|
+
beginThemeSwitch("instant", hold);
|
|
185
|
+
commit();
|
|
186
|
+
});
|
|
187
|
+
if (transition) {
|
|
188
|
+
void Promise.resolve(transition.finished).then(endThemeSwitch, endThemeSwitch);
|
|
189
|
+
return next;
|
|
190
|
+
}
|
|
191
|
+
pendingTheme = "";
|
|
192
|
+
beginThemeSwitch("uniform", hold);
|
|
193
|
+
commit();
|
|
81
194
|
return next;
|
|
82
195
|
}
|
|
83
196
|
async function readPersistedTheme(adapter, options = {}) {
|
package/dist/theme/apply.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"apply.js","sourceRoot":"","sources":["../../../src/theme/apply.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"apply.js","sourceRoot":"","sources":["../../../src/theme/apply.ts"],"names":[],"mappings":"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"}
|
|
@@ -8,7 +8,8 @@ declare const THEME_MODES_CSS_VAR: `--${string}`;
|
|
|
8
8
|
declare const THEME_MODES_GLOBAL_KEY = "tbf.frontend.theme.modes";
|
|
9
9
|
declare const THEME_TOGGLE_SELECTOR: string;
|
|
10
10
|
declare const THEME_SELECT_SELECTOR: string;
|
|
11
|
+
declare const THEME_SWITCHING_ATTR: `data-${string}`;
|
|
11
12
|
declare const THEME_OPTION_SELECTOR: string;
|
|
12
13
|
declare const THEME_LABEL_SELECTOR: string;
|
|
13
|
-
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_DEFAULT_CSS_VAR, THEME_LABEL_SELECTOR, THEME_MODES_CSS_VAR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
14
|
+
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_DEFAULT_CSS_VAR, THEME_LABEL_SELECTOR, THEME_MODES_CSS_VAR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_SWITCHING_ATTR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
14
15
|
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,UAAU,kBAA4B,CAAC;AAC7C,QAAA,MAAM,gBAAgB,kBAAkC,CAAC;AACzD,QAAA,MAAM,kBAAkB,kBAAoC,CAAC;AAC7D,QAAA,MAAM,gBAAgB,kBAAkC,CAAC;AACzD,QAAA,MAAM,kBAAkB,QAAmC,CAAC;AAC5D,QAAA,MAAM,qBAAqB,eAAkC,CAAC;AAC9D,QAAA,MAAM,mBAAmB,eAAgC,CAAC;AAC1D,QAAA,MAAM,sBAAsB,6BAA4C,CAAC;AACzE,QAAA,MAAM,qBAAqB,QAAuC,CAAC;AACnE,QAAA,MAAM,qBAAqB,QAAuC,CAAC;AACnE,QAAA,MAAM,qBAAqB,QAAsC,CAAC;AAClE,QAAA,MAAM,oBAAoB,QAAsC,CAAC;AAEjE,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,UAAU,kBAA4B,CAAC;AAC7C,QAAA,MAAM,gBAAgB,kBAAkC,CAAC;AACzD,QAAA,MAAM,kBAAkB,kBAAoC,CAAC;AAC7D,QAAA,MAAM,gBAAgB,kBAAkC,CAAC;AACzD,QAAA,MAAM,kBAAkB,QAAmC,CAAC;AAC5D,QAAA,MAAM,qBAAqB,eAAkC,CAAC;AAC9D,QAAA,MAAM,mBAAmB,eAAgC,CAAC;AAC1D,QAAA,MAAM,sBAAsB,6BAA4C,CAAC;AACzE,QAAA,MAAM,qBAAqB,QAAuC,CAAC;AACnE,QAAA,MAAM,qBAAqB,QAAuC,CAAC;AACnE,QAAA,MAAM,oBAAoB,kBAAsC,CAAC;AACjE,QAAA,MAAM,qBAAqB,QAAsC,CAAC;AAClE,QAAA,MAAM,oBAAoB,QAAsC,CAAC;AAEjE,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
package/dist/theme/constants.js
CHANGED
|
@@ -9,7 +9,8 @@ const THEME_MODES_CSS_VAR = frontendCssVar("theme-modes");
|
|
|
9
9
|
const THEME_MODES_GLOBAL_KEY = `${FRONTEND_PREFIX}.frontend.theme.modes`;
|
|
10
10
|
const THEME_TOGGLE_SELECTOR = frontendDataSelector("theme-button");
|
|
11
11
|
const THEME_SELECT_SELECTOR = frontendDataSelector("theme-select");
|
|
12
|
+
const THEME_SWITCHING_ATTR = frontendDataAttr("theme-switching");
|
|
12
13
|
const THEME_OPTION_SELECTOR = frontendDataSelector("theme-value");
|
|
13
14
|
const THEME_LABEL_SELECTOR = frontendDataSelector("theme-label");
|
|
14
|
-
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_DEFAULT_CSS_VAR, THEME_LABEL_SELECTOR, THEME_MODES_CSS_VAR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
15
|
+
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_DEFAULT_CSS_VAR, THEME_LABEL_SELECTOR, THEME_MODES_CSS_VAR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_SWITCHING_ATTR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
15
16
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE3H,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAC7C,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AACzD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAC7D,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AACzD,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;AAC5D,MAAM,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAC9D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AAC1D,MAAM,sBAAsB,GAAG,GAAG,eAAe,uBAAuB,CAAC;AACzE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;AACnE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;AACnE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAClE,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAEjE,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE3H,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAC7C,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AACzD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAC7D,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AACzD,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;AAC5D,MAAM,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAC9D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AAC1D,MAAM,sBAAsB,GAAG,GAAG,eAAe,uBAAuB,CAAC;AACzE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;AACnE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;AACnE,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AACjE,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAClE,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAEjE,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
package/package.json
CHANGED