@geoffcox/sterling-svelte 2.0.3 → 2.0.4
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.
|
@@ -3,6 +3,7 @@ type Params = {
|
|
|
3
3
|
atDocumentRoot?: boolean;
|
|
4
4
|
mode?: Mode;
|
|
5
5
|
};
|
|
6
|
+
/** @deprecated Use colorScheme action instead with sterling-svelte-themes 2.x */
|
|
6
7
|
export declare const applyLightDarkMode: (node: HTMLElement, params?: Params) => {
|
|
7
8
|
destroy(): void;
|
|
8
9
|
update(params?: Params): void;
|
|
@@ -8,6 +8,7 @@ const addMode = (element, mode, prefersDark) => {
|
|
|
8
8
|
const clearModes = (element) => {
|
|
9
9
|
element.classList.remove(...modes);
|
|
10
10
|
};
|
|
11
|
+
/** @deprecated Use colorScheme action instead with sterling-svelte-themes 2.x */
|
|
11
12
|
export const applyLightDarkMode = (node, params) => {
|
|
12
13
|
let mode = params?.mode || 'auto';
|
|
13
14
|
let prefersDark = false;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
const getRootColorScheme = () => {
|
|
2
|
+
return globalThis.document?.documentElement?.style.getPropertyValue('color-scheme');
|
|
3
|
+
};
|
|
4
|
+
const setRootColorScheme = (value) => {
|
|
5
|
+
globalThis.document?.documentElement?.style.setProperty('color-scheme', value);
|
|
6
|
+
};
|
|
7
|
+
const clearRootColorScheme = () => {
|
|
8
|
+
globalThis.document?.documentElement?.style.removeProperty('color-scheme');
|
|
9
|
+
};
|
|
10
|
+
export const colorScheme = (_node, params) => {
|
|
11
|
+
const originalValue = getRootColorScheme();
|
|
12
|
+
setRootColorScheme(params?.value || 'light dark');
|
|
13
|
+
return {
|
|
14
|
+
destroy() {
|
|
15
|
+
if (originalValue) {
|
|
16
|
+
setRootColorScheme(originalValue);
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
clearRootColorScheme();
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
update(params) {
|
|
23
|
+
setRootColorScheme(params?.value || 'light dark');
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export type { ClickOutsideEvent, ClickOutsideEventDetail } from './@types/clickOutside';
|
|
2
2
|
export { applyLightDarkMode } from './actions/applyLightDarkMode';
|
|
3
3
|
export { clickOutside } from './actions/clickOutside';
|
|
4
|
+
export { colorScheme } from './actions/colorScheme';
|
|
4
5
|
export { extraClass } from './actions/extraClass';
|
|
5
6
|
export { forwardEvents } from './actions/forwardEvents';
|
|
6
7
|
export { portal } from './actions/portal';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// ----- actions ----- //
|
|
2
2
|
export { applyLightDarkMode } from './actions/applyLightDarkMode';
|
|
3
3
|
export { clickOutside } from './actions/clickOutside';
|
|
4
|
+
export { colorScheme } from './actions/colorScheme';
|
|
4
5
|
export { extraClass } from './actions/extraClass';
|
|
5
6
|
export { forwardEvents } from './actions/forwardEvents';
|
|
6
7
|
export { portal } from './actions/portal';
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geoffcox/sterling-svelte",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.4",
|
|
4
4
|
"author": "Geoff Cox",
|
|
5
|
-
"description": "A modern, accessible, and lightweight
|
|
5
|
+
"description": "A modern, accessible, and lightweight component library for Svelte.",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"bugs": {
|
|
8
8
|
"url": "https://github.com/GeoffCox/sterling-svelte/issues"
|
|
@@ -10,14 +10,15 @@
|
|
|
10
10
|
"homepage": "https://github.com/GeoffCox/sterling-svelte/blob/main/README.md",
|
|
11
11
|
"keywords": [
|
|
12
12
|
"svelte",
|
|
13
|
+
"svelte5",
|
|
13
14
|
"svelte 5",
|
|
14
|
-
"
|
|
15
|
-
"
|
|
15
|
+
"typescript",
|
|
16
|
+
"javascript",
|
|
17
|
+
"UI",
|
|
18
|
+
"UX",
|
|
16
19
|
"component",
|
|
17
20
|
"components",
|
|
18
21
|
"controls",
|
|
19
|
-
"typescript",
|
|
20
|
-
"javascript",
|
|
21
22
|
"button",
|
|
22
23
|
"callout",
|
|
23
24
|
"checkbox",
|
|
@@ -35,7 +36,9 @@
|
|
|
35
36
|
"select",
|
|
36
37
|
"slider",
|
|
37
38
|
"switch",
|
|
39
|
+
"tab",
|
|
38
40
|
"tabs",
|
|
41
|
+
"tab list",
|
|
39
42
|
"textarea",
|
|
40
43
|
"tooltip",
|
|
41
44
|
"tree"
|
|
@@ -71,7 +74,7 @@
|
|
|
71
74
|
"@eslint/js": "^9.18.0",
|
|
72
75
|
"@fontsource/atkinson-hyperlegible": "^5.1.1",
|
|
73
76
|
"@fontsource/source-code-pro": "^4.5.14",
|
|
74
|
-
"@geoffcox/sterling-svelte-themes": "^
|
|
77
|
+
"@geoffcox/sterling-svelte-themes": "^2.0.0",
|
|
75
78
|
"@sveltejs/adapter-static": "^3.0.8",
|
|
76
79
|
"@sveltejs/kit": "^2.16.0",
|
|
77
80
|
"@sveltejs/package": "^2.0.0",
|