thread-ui 0.2.0 → 0.3.0
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/dist/components/form-elements/form-label/form-label.d.ts.map +1 -1
- package/dist/components/form-elements/form-label/form-label.js +2 -2
- package/dist/components/form-elements/form-label/form-label.js.map +1 -1
- package/dist/components/form-elements/number-input/number-input.d.ts +1 -1
- package/dist/components/form-elements/number-input/number-input.d.ts.map +1 -1
- package/dist/components/form-elements/number-input/number-input.js +67 -21
- package/dist/components/form-elements/number-input/number-input.js.map +1 -1
- package/dist/components/form-elements/styles/index.d.ts.map +1 -1
- package/dist/components/form-elements/styles/index.js +2 -1
- package/dist/components/form-elements/styles/index.js.map +1 -1
- package/dist/components/form-elements/text-input/text-input.d.ts +1 -1
- package/dist/components/form-elements/text-input/text-input.d.ts.map +1 -1
- package/dist/components/form-elements/text-input/text-input.js +2 -2
- package/dist/components/form-elements/text-input/text-input.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/layouts/column-layout/column-skeleton/column-skeleton.js +1 -1
- package/dist/components/layouts/column-layout/column-skeleton/column-skeleton.js.map +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.js +3 -3
- package/dist/components/layouts/masonry-layout/masonry-layout.js.map +1 -1
- package/dist/components/media/image-panel/image-panel.d.ts.map +1 -1
- package/dist/components/media/image-panel/image-panel.js +1 -1
- package/dist/components/media/image-panel/image-panel.js.map +1 -1
- package/dist/components/media/info-card/info-card.d.ts.map +1 -1
- package/dist/components/media/info-card/info-card.js +2 -2
- package/dist/components/media/info-card/info-card.js.map +1 -1
- package/dist/components/media/media-card/media-card.js +6 -6
- package/dist/components/media/media-card/media-card.js.map +1 -1
- package/dist/styled-system/styles.css +1949 -554
- package/dist/styled-system/tokens/index.mjs +9 -9
- package/dist/styles/panda.css +227 -50
- package/dist/styles/thread.css +15 -2
- package/dist/theme/default-theme.js +3 -3
- package/dist/theme/default-theme.js.map +1 -1
- package/dist/theme/generate-override-css.d.ts +7 -0
- package/dist/theme/generate-override-css.d.ts.map +1 -0
- package/dist/theme/generate-override-css.js +66 -0
- package/dist/theme/generate-override-css.js.map +1 -0
- package/dist/theme/index.d.ts +2 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +2 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/theme-mode.d.ts +6 -0
- package/dist/theme/theme-mode.d.ts.map +1 -0
- package/dist/theme/theme-mode.js +17 -0
- package/dist/theme/theme-mode.js.map +1 -0
- package/dist/theme/theme-provider.d.ts +16 -0
- package/dist/theme/theme-provider.d.ts.map +1 -0
- package/dist/theme/theme-provider.js +57 -0
- package/dist/theme/theme-provider.js.map +1 -0
- package/dist/theme/thread-script.d.ts +25 -0
- package/dist/theme/thread-script.d.ts.map +1 -0
- package/dist/theme/thread-script.js +46 -0
- package/dist/theme/thread-script.js.map +1 -0
- package/dist/utils/get-utility-size-value/get-utility-size-value.d.ts +1 -1
- package/package.json +4 -2
- package/dist/client/index.d.ts +0 -2
- package/dist/client/index.d.ts.map +0 -1
- package/dist/client/index.js +0 -2
- package/dist/client/index.js.map +0 -1
- package/dist/client/theme-provider/index.d.ts +0 -3
- package/dist/client/theme-provider/index.d.ts.map +0 -1
- package/dist/client/theme-provider/index.js +0 -2
- package/dist/client/theme-provider/index.js.map +0 -1
- package/dist/client/theme-provider/set-theme.d.ts +0 -8
- package/dist/client/theme-provider/set-theme.d.ts.map +0 -1
- package/dist/client/theme-provider/set-theme.js +0 -60
- package/dist/client/theme-provider/set-theme.js.map +0 -1
- package/dist/client/theme-provider/theme-provider.d.ts +0 -21
- package/dist/client/theme-provider/theme-provider.d.ts.map +0 -1
- package/dist/client/theme-provider/theme-provider.js +0 -196
- package/dist/client/theme-provider/theme-provider.js.map +0 -1
- package/dist/client/theme-provider/theme-provider.types.d.ts +0 -13
- package/dist/client/theme-provider/theme-provider.types.d.ts.map +0 -1
- package/dist/client/theme-provider/theme-provider.types.js +0 -2
- package/dist/client/theme-provider/theme-provider.types.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-mode.js","sourceRoot":"","sources":["../../src/theme/theme-mode.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAsB,CAAC;AAE9D,MAAM,CAAC,MAAM,WAAW,GAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AAErE,MAAM,UAAU,WAAW,CAAC,KAAc;IACzC,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,KAAmB,CAAC,CAAC;AAC/E,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAgB;IACnD,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACrB,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAC7D,CAAC;SAAM,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;IAC9D,CAAC;SAAM,CAAC;QACP,QAAQ,CAAC,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IACxD,CAAC;AACF,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ThemeConfig } from '../types';
|
|
3
|
+
import { ThreadMode } from './theme-mode';
|
|
4
|
+
interface ThreadContextValue {
|
|
5
|
+
mode: ThreadMode;
|
|
6
|
+
setMode: (mode: ThreadMode) => void;
|
|
7
|
+
toggleMode: () => void;
|
|
8
|
+
}
|
|
9
|
+
interface ThemeProviderProps {
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
theme?: ThemeConfig;
|
|
12
|
+
}
|
|
13
|
+
export declare function ThemeProvider({ children, theme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function useThreadContext(): ThreadContextValue;
|
|
15
|
+
export {};
|
|
16
|
+
//# sourceMappingURL=theme-provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+E,MAAM,OAAO,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,OAAO,EAAuB,UAAU,EAA2B,MAAM,cAAc,CAAC;AAIxF,UAAU,kBAAkB;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB;AAMD,UAAU,kBAAkB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CA2DpE;AAGD,wBAAgB,gBAAgB,IAAI,kBAAkB,CAMrD"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
|
4
|
+
import { generateOverrideCss } from './generate-override-css';
|
|
5
|
+
import { applyModeToDocument, THREAD_MODE_STORAGE_KEY } from './theme-mode';
|
|
6
|
+
const ThreadContext = createContext(null);
|
|
7
|
+
export function ThemeProvider({ children, theme }) {
|
|
8
|
+
const [mode, setModeState] = useState('system'); // Init as 'system' — sync to applied value on mount
|
|
9
|
+
// On mount: read the data-theme attribute ThreadScript already set on <html>.
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const attr = document.documentElement.getAttribute('data-theme');
|
|
12
|
+
if (attr === 'dark' || attr === 'light') {
|
|
13
|
+
setModeState(attr);
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
// No attribute -> ThreadScript left it unset — 'system' mode
|
|
17
|
+
setModeState('system');
|
|
18
|
+
}
|
|
19
|
+
}, []);
|
|
20
|
+
const setMode = useCallback((newMode) => {
|
|
21
|
+
setModeState(newMode);
|
|
22
|
+
try {
|
|
23
|
+
localStorage.setItem(THREAD_MODE_STORAGE_KEY, newMode);
|
|
24
|
+
}
|
|
25
|
+
catch {
|
|
26
|
+
// localStorage unavailable — mode still applies for this session
|
|
27
|
+
}
|
|
28
|
+
applyModeToDocument(newMode);
|
|
29
|
+
}, []);
|
|
30
|
+
const toggleMode = useCallback(() => {
|
|
31
|
+
// If currently 'system', resolve the actual rendered mode first
|
|
32
|
+
// then toggle to the opposite explicit mode
|
|
33
|
+
const resolvedCurrent = mode === 'system'
|
|
34
|
+
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
35
|
+
? 'dark'
|
|
36
|
+
: 'light'
|
|
37
|
+
: mode;
|
|
38
|
+
setMode(resolvedCurrent === 'dark' ? 'light' : 'dark');
|
|
39
|
+
}, [mode, setMode]);
|
|
40
|
+
// Only re-computed when the theme prop reference changes.
|
|
41
|
+
const overrideCss = useMemo(() => {
|
|
42
|
+
if (!theme)
|
|
43
|
+
return null;
|
|
44
|
+
return generateOverrideCss(theme);
|
|
45
|
+
}, [theme]);
|
|
46
|
+
const contextValue = useMemo(() => ({ mode, setMode, toggleMode }), [mode, setMode, toggleMode]);
|
|
47
|
+
return (_jsxs(ThreadContext.Provider, { value: contextValue, children: [overrideCss && (_jsx("style", { id: "thread-theme-overrides", dangerouslySetInnerHTML: { __html: overrideCss } })), children] }));
|
|
48
|
+
}
|
|
49
|
+
// ─── Internal context accessor (used by useThreadTheme) ───────────────────────
|
|
50
|
+
export function useThreadContext() {
|
|
51
|
+
const context = useContext(ThreadContext);
|
|
52
|
+
if (!context) {
|
|
53
|
+
throw new Error('useThreadTheme must be used within a <ThemeProvider>');
|
|
54
|
+
}
|
|
55
|
+
return context;
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=theme-provider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ThreadMode } from './theme-mode';
|
|
2
|
+
export type { ThreadMode };
|
|
3
|
+
interface ThreadScriptProps {
|
|
4
|
+
defaultMode?: ThreadMode;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Inject this component into your <head> to prevent a flash of unstyled/wrong-mode content.
|
|
8
|
+
* It runs synchronously before the first paint, reading the user's saved mode preference
|
|
9
|
+
* from localStorage, falling back to defaultMode, and setting data-theme on :root.
|
|
10
|
+
*
|
|
11
|
+
* For 'system' mode (either saved or default), no data-theme is set and the CSS
|
|
12
|
+
* media query (prefers-color-scheme) handles the correct mode natively.
|
|
13
|
+
*
|
|
14
|
+
* Add suppressHydrationWarning to your <html> tag — the inline script mutates
|
|
15
|
+
* data-theme before React hydrates, which causes an expected mismatch warning.
|
|
16
|
+
*
|
|
17
|
+
* Next.js App Router:
|
|
18
|
+
* <html suppressHydrationWarning>
|
|
19
|
+
* <head><ThreadScript defaultMode="system" /></head>
|
|
20
|
+
*
|
|
21
|
+
* Next.js Pages Router:
|
|
22
|
+
* // _document.tsx <Head><ThreadScript defaultMode="system" /></Head>
|
|
23
|
+
*/
|
|
24
|
+
export declare function ThreadScript({ defaultMode }: ThreadScriptProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
//# sourceMappingURL=thread-script.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"thread-script.d.ts","sourceRoot":"","sources":["../../src/theme/thread-script.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwC,MAAM,cAAc,CAAC;AAEhF,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,UAAU,iBAAiB;IAC1B,WAAW,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAAE,WAAsB,EAAE,EAAE,iBAAiB,2CAIzE"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { THREAD_MODE_STORAGE_KEY, VALID_MODES } from './theme-mode';
|
|
3
|
+
/**
|
|
4
|
+
* Inject this component into your <head> to prevent a flash of unstyled/wrong-mode content.
|
|
5
|
+
* It runs synchronously before the first paint, reading the user's saved mode preference
|
|
6
|
+
* from localStorage, falling back to defaultMode, and setting data-theme on :root.
|
|
7
|
+
*
|
|
8
|
+
* For 'system' mode (either saved or default), no data-theme is set and the CSS
|
|
9
|
+
* media query (prefers-color-scheme) handles the correct mode natively.
|
|
10
|
+
*
|
|
11
|
+
* Add suppressHydrationWarning to your <html> tag — the inline script mutates
|
|
12
|
+
* data-theme before React hydrates, which causes an expected mismatch warning.
|
|
13
|
+
*
|
|
14
|
+
* Next.js App Router:
|
|
15
|
+
* <html suppressHydrationWarning>
|
|
16
|
+
* <head><ThreadScript defaultMode="system" /></head>
|
|
17
|
+
*
|
|
18
|
+
* Next.js Pages Router:
|
|
19
|
+
* // _document.tsx <Head><ThreadScript defaultMode="system" /></Head>
|
|
20
|
+
*/
|
|
21
|
+
export function ThreadScript({ defaultMode = 'system' }) {
|
|
22
|
+
const scriptContent = buildScriptContent(defaultMode);
|
|
23
|
+
return _jsx("script", { dangerouslySetInnerHTML: { __html: scriptContent } });
|
|
24
|
+
}
|
|
25
|
+
const buildScriptContent = (defaultMode) => {
|
|
26
|
+
// Serialized as an IIFE so it doesn't pollute the global scope.
|
|
27
|
+
// defaultMode and the storage key are interpolated at render time on the server.
|
|
28
|
+
return `(function(){
|
|
29
|
+
try {
|
|
30
|
+
var stored = localStorage.getItem('${THREAD_MODE_STORAGE_KEY}');
|
|
31
|
+
var validModes = ${JSON.stringify(VALID_MODES)};
|
|
32
|
+
var mode = validModes.indexOf(stored) !== -1 ? stored : '${defaultMode}';
|
|
33
|
+
|
|
34
|
+
if (mode === 'dark') {
|
|
35
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
36
|
+
} else if (mode === 'light') {
|
|
37
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
38
|
+
} else {
|
|
39
|
+
document.documentElement.removeAttribute('data-theme');
|
|
40
|
+
}
|
|
41
|
+
} catch (e) {
|
|
42
|
+
// localStorage unavailable — CSS default (light mode) applies
|
|
43
|
+
}
|
|
44
|
+
})();`;
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=thread-script.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"thread-script.js","sourceRoot":"","sources":["../../src/theme/thread-script.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,uBAAuB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAQhF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,WAAW,GAAG,QAAQ,EAAqB;IACzE,MAAM,aAAa,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAEtD,OAAO,iBAAQ,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,GAAI,CAAC;AACvE,CAAC;AAED,MAAM,kBAAkB,GAAG,CAAC,WAAuB,EAAU,EAAE;IAC9D,gEAAgE;IAChE,iFAAiF;IACjF,OAAO;;yCAEiC,uBAAuB;uBACzC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;+DACa,WAAW;;;;;;;;;;;;MAYpE,CAAC;AACP,CAAC,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { UtilitySizeOptions } from '../../types';
|
|
2
|
-
export declare const getUtilitySizeValue: (size: UtilitySizeOptions) =>
|
|
2
|
+
export declare const getUtilitySizeValue: (size: UtilitySizeOptions) => 8 | 12 | 4;
|
|
3
3
|
//# sourceMappingURL=get-utility-size-value.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "thread-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "UI Library for React Applications.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
},
|
|
31
31
|
"keywords": [
|
|
32
32
|
"React",
|
|
33
|
-
"UI"
|
|
33
|
+
"UI",
|
|
34
|
+
"Thread",
|
|
35
|
+
"UX"
|
|
34
36
|
],
|
|
35
37
|
"author": "Andrew Fisher",
|
|
36
38
|
"license": "MIT",
|
package/dist/client/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
|
package/dist/client/index.js
DELETED
package/dist/client/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/theme-provider/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/client/theme-provider/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ThemeConfig } from '../../types';
|
|
2
|
-
/**
|
|
3
|
-
* Override default Thread Theme with custom inputs
|
|
4
|
-
* @param userTheme Partial of Theme Object
|
|
5
|
-
* @returns CSS String
|
|
6
|
-
*/
|
|
7
|
-
export declare const setTheme: (userTheme: ThemeConfig) => string;
|
|
8
|
-
//# sourceMappingURL=set-theme.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"set-theme.d.ts","sourceRoot":"","sources":["../../../src/client/theme-provider/set-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,WAAW,WAAW,WA2D9C,CAAC"}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { DarkModeVariables } from '../../theme/css-name-configurations/theme-css-names';
|
|
2
|
-
import { ThreadTheme } from '../../theme';
|
|
3
|
-
/**
|
|
4
|
-
* Override default Thread Theme with custom inputs
|
|
5
|
-
* @param userTheme Partial of Theme Object
|
|
6
|
-
* @returns CSS String
|
|
7
|
-
*/
|
|
8
|
-
export const setTheme = (userTheme) => {
|
|
9
|
-
const lightVariables = [];
|
|
10
|
-
const darkVariables = [];
|
|
11
|
-
const collectCSSVariables = (userObject, themeObject, targetArray) => {
|
|
12
|
-
if (!userObject)
|
|
13
|
-
return;
|
|
14
|
-
Object.entries(userObject).forEach(([key, value]) => {
|
|
15
|
-
const themeValue = themeObject?.[key];
|
|
16
|
-
if (!themeValue)
|
|
17
|
-
return;
|
|
18
|
-
if (value && typeof value === 'object' && typeof themeValue === 'object') {
|
|
19
|
-
collectCSSVariables(value, themeValue, targetArray);
|
|
20
|
-
}
|
|
21
|
-
else if (value !== undefined && typeof themeValue === 'string') {
|
|
22
|
-
targetArray.push(`${themeValue}: ${value}`);
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
const { darkMode, ...lightMode } = userTheme;
|
|
27
|
-
// Collect light mode variables
|
|
28
|
-
collectCSSVariables(lightMode, ThreadTheme, lightVariables);
|
|
29
|
-
// FIXED: Collect dark mode variables with correct theme object
|
|
30
|
-
if (darkMode) {
|
|
31
|
-
collectCSSVariables(darkMode, DarkModeVariables, darkVariables);
|
|
32
|
-
}
|
|
33
|
-
// Create CSS string with proper selectors
|
|
34
|
-
let cssString = '';
|
|
35
|
-
if (lightVariables.length > 0) {
|
|
36
|
-
cssString += `:root { ${lightVariables.join('; ')} }\n`;
|
|
37
|
-
}
|
|
38
|
-
if (darkVariables.length > 0) {
|
|
39
|
-
cssString += `:root[data-theme="dark"] { ${darkVariables.join('; ')} }\n`;
|
|
40
|
-
}
|
|
41
|
-
// Apply the CSS
|
|
42
|
-
if (typeof document !== 'undefined') {
|
|
43
|
-
let styleElement = document.getElementById('thread-ui-custom-theme');
|
|
44
|
-
if (!styleElement) {
|
|
45
|
-
styleElement = document.createElement('style');
|
|
46
|
-
styleElement.id = 'thread-ui-custom-theme';
|
|
47
|
-
document.head.appendChild(styleElement);
|
|
48
|
-
}
|
|
49
|
-
styleElement.textContent = cssString;
|
|
50
|
-
// Persist theme config
|
|
51
|
-
try {
|
|
52
|
-
localStorage.setItem('thread-ui-theme-config', JSON.stringify(userTheme));
|
|
53
|
-
}
|
|
54
|
-
catch (e) {
|
|
55
|
-
console.warn('Failed to persist theme:', e);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
return cssString;
|
|
59
|
-
};
|
|
60
|
-
//# sourceMappingURL=set-theme.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/client/theme-provider/set-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAsB,EAAE,EAAE;IAClD,MAAM,cAAc,GAAa,EAAE,CAAC;IACpC,MAAM,aAAa,GAAa,EAAE,CAAC;IAEnC,MAAM,mBAAmB,GAAG,CAAC,UAAe,EAAE,WAAgB,EAAE,WAAqB,EAAE,EAAE;QACxF,IAAI,CAAC,UAAU;YAAE,OAAO;QAExB,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YACnD,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC;YACtC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAExB,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE,CAAC;gBAC1E,mBAAmB,CAAC,KAAK,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;YACrD,CAAC;iBAAM,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE,CAAC;gBAClE,WAAW,CAAC,IAAI,CAAC,GAAG,UAAU,KAAK,KAAK,EAAE,CAAC,CAAC;YAC7C,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,SAAS,CAAC;IAE7C,+BAA+B;IAC/B,mBAAmB,CAAC,SAAS,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC;IAE5D,+DAA+D;IAC/D,IAAI,QAAQ,EAAE,CAAC;QACd,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,EAAE,aAAa,CAAC,CAAC;IACjE,CAAC;IAED,0CAA0C;IAC1C,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC/B,SAAS,IAAI,WAAW,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IACzD,CAAC;IAED,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC9B,SAAS,IAAI,8BAA8B,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAC3E,CAAC;IAED,gBAAgB;IAChB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACrC,IAAI,YAAY,GAAG,QAAQ,CAAC,cAAc,CAAC,wBAAwB,CAAC,CAAC;QACrE,IAAI,CAAC,YAAY,EAAE,CAAC;YACnB,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC/C,YAAY,CAAC,EAAE,GAAG,wBAAwB,CAAC;YAC3C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACzC,CAAC;QACD,YAAY,CAAC,WAAW,GAAG,SAAS,CAAC;QAErC,uBAAuB;QACvB,IAAI,CAAC;YACJ,YAAY,CAAC,OAAO,CAAC,wBAAwB,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;QAC3E,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACZ,OAAO,CAAC,IAAI,CAAC,0BAA0B,EAAE,CAAC,CAAC,CAAC;QAC7C,CAAC;IACF,CAAC;IAED,OAAO,SAAS,CAAC;AAClB,CAAC,CAAC"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { ThemeConfig } from '../../types';
|
|
3
|
-
type ThemeContextType = {
|
|
4
|
-
mode: 'light' | 'dark' | 'system';
|
|
5
|
-
setMode: (mode: 'light' | 'dark' | 'system') => void;
|
|
6
|
-
toggleMode: () => void;
|
|
7
|
-
};
|
|
8
|
-
interface ThemeProviderProps {
|
|
9
|
-
children: ReactNode;
|
|
10
|
-
theme?: ThemeConfig;
|
|
11
|
-
defaultMode?: 'light' | 'dark' | 'system';
|
|
12
|
-
}
|
|
13
|
-
export declare function ThemeProvider({ children, theme, defaultMode }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export declare function useTheme(): ThemeContextType;
|
|
15
|
-
export declare function useThemeToggle(): () => void;
|
|
16
|
-
export declare function useThemeConfig(): {
|
|
17
|
-
updateTheme: (newTheme: ThemeConfig) => void;
|
|
18
|
-
resetTheme: () => void;
|
|
19
|
-
};
|
|
20
|
-
export {};
|
|
21
|
-
//# sourceMappingURL=theme-provider.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/client/theme-provider/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkD,SAAS,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,KAAK,gBAAgB,GAAG;IACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAClC,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,KAAK,IAAI,CAAC;IACrD,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAyEF,UAAU,kBAAkB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC1C;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAsB,EAAE,EAAE,kBAAkB,2CAoG5F;AAGD,wBAAgB,QAAQ,qBAMvB;AAGD,wBAAgB,cAAc,UAhMX,IAAI,CAmMtB;AAGD,wBAAgB,cAAc;4BAEJ,WAAW;;EAkBpC"}
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { createContext, useContext, useEffect, useState } from 'react';
|
|
4
|
-
import { setTheme } from './set-theme';
|
|
5
|
-
const ThemeContext = createContext({
|
|
6
|
-
mode: 'system',
|
|
7
|
-
setMode: () => { },
|
|
8
|
-
toggleMode: () => { },
|
|
9
|
-
});
|
|
10
|
-
// No-flash script as a string (will be injected)
|
|
11
|
-
// Enhanced no-flash script for ThemeProvider
|
|
12
|
-
const NO_FLASH_SCRIPT = `
|
|
13
|
-
(function() {
|
|
14
|
-
try {
|
|
15
|
-
const getSystemTheme = () => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
16
|
-
const stored = localStorage.getItem('thread-ui-mode');
|
|
17
|
-
const mode = stored || 'system';
|
|
18
|
-
const actualMode = mode === 'system' ? getSystemTheme() : mode;
|
|
19
|
-
|
|
20
|
-
// Apply theme class to prevent flash
|
|
21
|
-
document.documentElement.setAttribute('data-theme', actualMode);
|
|
22
|
-
document.documentElement.style.colorScheme = actualMode;
|
|
23
|
-
|
|
24
|
-
// ENHANCED: Also restore custom theme CSS immediately
|
|
25
|
-
try {
|
|
26
|
-
const storedThemeConfig = localStorage.getItem('thread-ui-theme-config');
|
|
27
|
-
if (storedThemeConfig) {
|
|
28
|
-
const themeConfig = JSON.parse(storedThemeConfig);
|
|
29
|
-
|
|
30
|
-
// Quick and dirty CSS variable application
|
|
31
|
-
const applyThemeVariables = (config, selector = ':root') => {
|
|
32
|
-
const styles = [];
|
|
33
|
-
|
|
34
|
-
const flatten = (obj, prefix = '--thread-') => {
|
|
35
|
-
Object.entries(obj).forEach(([key, value]) => {
|
|
36
|
-
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
|
37
|
-
flatten(value, prefix + key + '-');
|
|
38
|
-
} else if (typeof value === 'string') {
|
|
39
|
-
styles.push(prefix + key + ': ' + value);
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
flatten(config);
|
|
45
|
-
|
|
46
|
-
if (styles.length > 0) {
|
|
47
|
-
const styleEl = document.createElement('style');
|
|
48
|
-
styleEl.id = 'thread-ui-no-flash-theme';
|
|
49
|
-
styleEl.textContent = selector + ' { ' + styles.join('; ') + ' }';
|
|
50
|
-
document.head.appendChild(styleEl);
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
// Apply light mode variables
|
|
55
|
-
const { darkMode, ...lightMode } = themeConfig;
|
|
56
|
-
if (Object.keys(lightMode).length > 0) {
|
|
57
|
-
applyThemeVariables(lightMode, ':root');
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// Apply dark mode variables if in dark mode
|
|
61
|
-
if (darkMode && actualMode === 'dark') {
|
|
62
|
-
applyThemeVariables(darkMode, ':root[data-theme="dark"]');
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
} catch (themeError) {
|
|
66
|
-
console.warn('Failed to restore theme in no-flash script:', themeError);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
} catch (e) {
|
|
70
|
-
document.documentElement.setAttribute('data-theme', 'light');
|
|
71
|
-
}
|
|
72
|
-
})();
|
|
73
|
-
`;
|
|
74
|
-
export function ThemeProvider({ children, theme, defaultMode = 'system' }) {
|
|
75
|
-
const [mode, setModeState] = useState(defaultMode);
|
|
76
|
-
const [mounted, setMounted] = useState(false);
|
|
77
|
-
// Inject no-flash script on first mount
|
|
78
|
-
useEffect(() => {
|
|
79
|
-
// Only inject if not already present
|
|
80
|
-
if (typeof document !== 'undefined' && !document.getElementById('thread-ui-no-flash')) {
|
|
81
|
-
const script = document.createElement('script');
|
|
82
|
-
script.id = 'thread-ui-no-flash';
|
|
83
|
-
script.innerHTML = NO_FLASH_SCRIPT;
|
|
84
|
-
document.head.insertBefore(script, document.head.firstChild);
|
|
85
|
-
}
|
|
86
|
-
setMounted(true);
|
|
87
|
-
}, []);
|
|
88
|
-
// Initialize theme and mode from localStorage
|
|
89
|
-
useEffect(() => {
|
|
90
|
-
if (!mounted)
|
|
91
|
-
return;
|
|
92
|
-
const initializeTheme = () => {
|
|
93
|
-
try {
|
|
94
|
-
// Get stored mode preference
|
|
95
|
-
const storedMode = localStorage.getItem('thread-ui-mode');
|
|
96
|
-
const initialMode = storedMode || defaultMode;
|
|
97
|
-
setModeState(initialMode);
|
|
98
|
-
// FIXED: Restore custom theme from localStorage first
|
|
99
|
-
let appliedTheme;
|
|
100
|
-
try {
|
|
101
|
-
const storedThemeConfig = localStorage.getItem('thread-ui-theme-config');
|
|
102
|
-
if (storedThemeConfig) {
|
|
103
|
-
appliedTheme = JSON.parse(storedThemeConfig);
|
|
104
|
-
setTheme(appliedTheme);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
catch (e) {
|
|
108
|
-
console.warn('Failed to restore stored theme config:', e);
|
|
109
|
-
}
|
|
110
|
-
// Apply theme prop if provided (this overrides stored theme)
|
|
111
|
-
if (theme) {
|
|
112
|
-
setTheme(theme);
|
|
113
|
-
appliedTheme = theme;
|
|
114
|
-
}
|
|
115
|
-
// Set up system theme listener for 'system' mode
|
|
116
|
-
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
117
|
-
const handleSystemChange = () => {
|
|
118
|
-
if (initialMode === 'system') {
|
|
119
|
-
const systemMode = mediaQuery.matches ? 'dark' : 'light';
|
|
120
|
-
document.documentElement.setAttribute('data-theme', systemMode);
|
|
121
|
-
document.documentElement.style.colorScheme = systemMode;
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
mediaQuery.addEventListener('change', handleSystemChange);
|
|
125
|
-
// Initial application
|
|
126
|
-
handleSystemChange();
|
|
127
|
-
return () => mediaQuery.removeEventListener('change', handleSystemChange);
|
|
128
|
-
}
|
|
129
|
-
catch (e) {
|
|
130
|
-
console.warn('Theme initialization failed:', e);
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
const cleanup = initializeTheme();
|
|
134
|
-
return cleanup;
|
|
135
|
-
}, [mounted, theme, defaultMode]);
|
|
136
|
-
const setMode = (newMode) => {
|
|
137
|
-
setModeState(newMode);
|
|
138
|
-
try {
|
|
139
|
-
localStorage.setItem('thread-ui-mode', newMode);
|
|
140
|
-
}
|
|
141
|
-
catch (e) {
|
|
142
|
-
console.warn('Failed to save theme mode:', e);
|
|
143
|
-
}
|
|
144
|
-
// Apply theme immediately
|
|
145
|
-
const actualMode = newMode === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : newMode;
|
|
146
|
-
document.documentElement.setAttribute('data-theme', actualMode);
|
|
147
|
-
document.documentElement.style.colorScheme = actualMode;
|
|
148
|
-
};
|
|
149
|
-
const toggleMode = () => {
|
|
150
|
-
const currentActualMode = mode === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : mode;
|
|
151
|
-
setMode(currentActualMode === 'light' ? 'dark' : 'light');
|
|
152
|
-
};
|
|
153
|
-
// Don't render until mounted to prevent hydration issues
|
|
154
|
-
if (!mounted) {
|
|
155
|
-
return _jsx(_Fragment, { children: children });
|
|
156
|
-
}
|
|
157
|
-
return _jsx(ThemeContext.Provider, { value: { mode, setMode, toggleMode }, children: children });
|
|
158
|
-
}
|
|
159
|
-
// Hook to access theme controls
|
|
160
|
-
export function useTheme() {
|
|
161
|
-
const context = useContext(ThemeContext);
|
|
162
|
-
if (!context) {
|
|
163
|
-
throw new Error('useTheme must be used within a ThemeProvider');
|
|
164
|
-
}
|
|
165
|
-
return context;
|
|
166
|
-
}
|
|
167
|
-
// Hook for simple theme toggling
|
|
168
|
-
export function useThemeToggle() {
|
|
169
|
-
const { toggleMode } = useTheme();
|
|
170
|
-
return toggleMode;
|
|
171
|
-
}
|
|
172
|
-
// Optional: Hook to update the theme configuration
|
|
173
|
-
export function useThemeConfig() {
|
|
174
|
-
return {
|
|
175
|
-
updateTheme: (newTheme) => {
|
|
176
|
-
setTheme(newTheme);
|
|
177
|
-
try {
|
|
178
|
-
localStorage.setItem('thread-ui-theme-config', JSON.stringify(newTheme));
|
|
179
|
-
}
|
|
180
|
-
catch (e) {
|
|
181
|
-
console.warn('Failed to save theme config:', e);
|
|
182
|
-
}
|
|
183
|
-
},
|
|
184
|
-
resetTheme: () => {
|
|
185
|
-
try {
|
|
186
|
-
localStorage.removeItem('thread-ui-theme-config');
|
|
187
|
-
// Apply default theme
|
|
188
|
-
setTheme({});
|
|
189
|
-
}
|
|
190
|
-
catch (e) {
|
|
191
|
-
console.warn('Failed to reset theme:', e);
|
|
192
|
-
}
|
|
193
|
-
},
|
|
194
|
-
};
|
|
195
|
-
}
|
|
196
|
-
//# sourceMappingURL=theme-provider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../../../src/client/theme-provider/theme-provider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ThemeConfig } from '../../types';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
export type ThemeContextType = {
|
|
4
|
-
mode: 'light' | 'dark' | 'system';
|
|
5
|
-
setMode: (mode: 'light' | 'dark' | 'system') => void;
|
|
6
|
-
toggleMode: () => void;
|
|
7
|
-
};
|
|
8
|
-
export type ThemeProviderProps = {
|
|
9
|
-
children: ReactNode;
|
|
10
|
-
theme?: ThemeConfig;
|
|
11
|
-
defaultMode?: 'light' | 'dark' | 'system';
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=theme-provider.types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme-provider.types.d.ts","sourceRoot":"","sources":["../../../src/client/theme-provider/theme-provider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAClC,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,KAAK,IAAI,CAAC;IACrD,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC1C,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme-provider.types.js","sourceRoot":"","sources":["../../../src/client/theme-provider/theme-provider.types.ts"],"names":[],"mappings":""}
|