@xeonr/platform-ui 0.2.5 → 0.3.2
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/index.d.ts +12 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +16 -7
- package/dist/index.js.map +1 -1
- package/dist/kit/Badge.d.ts +2 -1
- package/dist/kit/Badge.d.ts.map +1 -1
- package/dist/kit/Badge.js +23 -0
- package/dist/kit/Badge.js.map +1 -1
- package/dist/kit/Blocks.d.ts +22 -2
- package/dist/kit/Blocks.d.ts.map +1 -1
- package/dist/kit/Blocks.js +108 -17
- package/dist/kit/Blocks.js.map +1 -1
- package/dist/kit/Card.d.ts +44 -0
- package/dist/kit/Card.d.ts.map +1 -0
- package/dist/kit/Card.js +95 -0
- package/dist/kit/Card.js.map +1 -0
- package/dist/kit/Charts.d.ts +44 -0
- package/dist/kit/Charts.d.ts.map +1 -0
- package/dist/kit/Charts.js +164 -0
- package/dist/kit/Charts.js.map +1 -0
- package/dist/kit/DataTable.d.ts +3 -1
- package/dist/kit/DataTable.d.ts.map +1 -1
- package/dist/kit/DataTable.js +8 -2
- package/dist/kit/DataTable.js.map +1 -1
- package/dist/kit/Facet.d.ts +37 -0
- package/dist/kit/Facet.d.ts.map +1 -0
- package/dist/kit/Facet.js +126 -0
- package/dist/kit/Facet.js.map +1 -0
- package/dist/kit/Form.d.ts +8 -0
- package/dist/kit/Form.d.ts.map +1 -1
- package/dist/kit/Form.js +17 -0
- package/dist/kit/Form.js.map +1 -1
- package/dist/kit/Icon.d.ts +17 -0
- package/dist/kit/Icon.d.ts.map +1 -1
- package/dist/kit/Icon.js +6 -1
- package/dist/kit/Icon.js.map +1 -1
- package/dist/kit/Range.d.ts +30 -0
- package/dist/kit/Range.d.ts.map +1 -0
- package/dist/kit/Range.js +137 -0
- package/dist/kit/Range.js.map +1 -0
- package/dist/kit/Search.d.ts +9 -0
- package/dist/kit/Search.d.ts.map +1 -0
- package/dist/kit/Search.js +59 -0
- package/dist/kit/Search.js.map +1 -0
- package/dist/kit/Secret.d.ts +10 -0
- package/dist/kit/Secret.d.ts.map +1 -1
- package/dist/kit/Secret.js +33 -0
- package/dist/kit/Secret.js.map +1 -1
- package/dist/kit/Skeleton.d.ts +6 -0
- package/dist/kit/Skeleton.d.ts.map +1 -1
- package/dist/kit/Skeleton.js +15 -0
- package/dist/kit/Skeleton.js.map +1 -1
- package/dist/kit/Toast.d.ts +10 -2
- package/dist/kit/Toast.d.ts.map +1 -1
- package/dist/kit/Toast.js +9 -2
- package/dist/kit/Toast.js.map +1 -1
- package/dist/theme/ThemeProvider.d.ts +15 -2
- package/dist/theme/ThemeProvider.d.ts.map +1 -1
- package/dist/theme/ThemeProvider.js +43 -53
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/tokens.d.ts +3 -0
- package/dist/theme/tokens.d.ts.map +1 -1
- package/dist/theme/tokens.js +59 -0
- package/dist/theme/tokens.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,10 +7,23 @@ interface ThemeCtx {
|
|
|
7
7
|
/** system → the opposite of what's resolved → … (the rail's theme button) */
|
|
8
8
|
cycle: () => void;
|
|
9
9
|
}
|
|
10
|
-
export
|
|
10
|
+
export interface AppThemeProviderProps {
|
|
11
11
|
children: ReactNode;
|
|
12
12
|
storageKey?: string | undefined;
|
|
13
|
-
|
|
13
|
+
/**
|
|
14
|
+
* The preference the server already rendered with (from the host's own
|
|
15
|
+
* cookie). Used as the first client value too, so hydration matches; an
|
|
16
|
+
* explicit localStorage choice on this host still wins.
|
|
17
|
+
*/
|
|
18
|
+
initialPref?: ThemePref | undefined;
|
|
19
|
+
/** Called on every change, for a host that mirrors the preference into a cookie. */
|
|
20
|
+
onPrefChange?: ((pref: ThemePref) => void) | undefined;
|
|
21
|
+
/** false when the host inlines `globalCss()` itself (SSR without a styled sheet). */
|
|
22
|
+
globalStyle?: boolean | undefined;
|
|
23
|
+
}
|
|
24
|
+
export declare function AppThemeProvider({ children, storageKey, initialPref, onPrefChange, globalStyle, }: AppThemeProviderProps): import("react").JSX.Element;
|
|
14
25
|
export declare function useTheme(): ThemeCtx;
|
|
26
|
+
/** Null outside a provider — for a component that may render in either place. */
|
|
27
|
+
export declare function useThemeMaybe(): ThemeCtx | null;
|
|
15
28
|
export {};
|
|
16
29
|
//# sourceMappingURL=ThemeProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB7G,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAMpD,UAAU,QAAQ;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,OAAO,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAChC,6EAA6E;IAC7E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AA0BD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACpC,oFAAoF;IACpF,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,qFAAqF;IACrF,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAgC,EAChC,WAAW,EACX,YAAY,EACZ,WAAkB,GACnB,EAAE,qBAAqB,+BAuDvB;AAED,wBAAgB,QAAQ,IAAI,QAAQ,CAInC;AAED,iFAAiF;AACjF,wBAAgB,aAAa,IAAI,QAAQ,GAAG,IAAI,CAE/C"}
|
|
@@ -1,25 +1,43 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
|
3
3
|
import { createGlobalStyle } from "styled-components";
|
|
4
|
-
import { cssVariables,
|
|
4
|
+
import { cssVariables, globalCss } from "./tokens.js";
|
|
5
5
|
// One preference for every console: the key is shared so a theme choice on
|
|
6
6
|
// one product host is picked up by the next (same-origin storage only — the
|
|
7
7
|
// cross-host copy rides the console context, see @xeonr/console-shell).
|
|
8
8
|
const DEFAULT_STORAGE_KEY = "xnr.theme";
|
|
9
9
|
const Ctx = createContext(null);
|
|
10
|
+
const hasDOM = typeof window !== "undefined" && typeof document !== "undefined";
|
|
11
|
+
function normalise(raw) {
|
|
12
|
+
return raw === "light" || raw === "dark" ? raw : "system";
|
|
13
|
+
}
|
|
10
14
|
function systemScheme() {
|
|
15
|
+
if (!hasDOM || typeof window.matchMedia !== "function")
|
|
16
|
+
return "dark";
|
|
11
17
|
return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
|
|
12
18
|
}
|
|
13
|
-
|
|
19
|
+
function storedPref(key) {
|
|
20
|
+
if (!hasDOM)
|
|
21
|
+
return undefined;
|
|
22
|
+
try {
|
|
23
|
+
const s = localStorage.getItem(key);
|
|
24
|
+
return s === "light" || s === "dark" ? s : undefined;
|
|
25
|
+
}
|
|
26
|
+
catch {
|
|
27
|
+
// Private mode / blocked storage: fall back to the caller's initial value.
|
|
28
|
+
return undefined;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
export function AppThemeProvider({ children, storageKey = DEFAULT_STORAGE_KEY, initialPref, onPrefChange, globalStyle = true, }) {
|
|
14
32
|
const STORAGE_KEY = storageKey;
|
|
15
|
-
const [pref, setPrefState] = useState(() =>
|
|
16
|
-
|
|
17
|
-
return s === "light" || s === "dark" ? s : "system";
|
|
18
|
-
});
|
|
19
|
-
const [sys, setSys] = useState(() => systemScheme());
|
|
33
|
+
const [pref, setPrefState] = useState(() => storedPref(STORAGE_KEY) ?? normalise(initialPref));
|
|
34
|
+
const [sys, setSys] = useState(() => (hasDOM ? systemScheme() : "dark"));
|
|
20
35
|
useEffect(() => {
|
|
36
|
+
if (!hasDOM || typeof window.matchMedia !== "function")
|
|
37
|
+
return;
|
|
21
38
|
const mq = window.matchMedia("(prefers-color-scheme: light)");
|
|
22
39
|
const on = () => setSys(systemScheme());
|
|
40
|
+
setSys(systemScheme());
|
|
23
41
|
mq.addEventListener("change", on);
|
|
24
42
|
return () => mq.removeEventListener("change", on);
|
|
25
43
|
}, []);
|
|
@@ -36,24 +54,29 @@ export function AppThemeProvider({ children, storageKey = DEFAULT_STORAGE_KEY })
|
|
|
36
54
|
const on = (e) => {
|
|
37
55
|
if (e.key !== STORAGE_KEY)
|
|
38
56
|
return;
|
|
39
|
-
|
|
40
|
-
setPrefState(s === "light" || s === "dark" ? s : "system");
|
|
57
|
+
setPrefState(normalise(e.newValue));
|
|
41
58
|
};
|
|
42
59
|
window.addEventListener("storage", on);
|
|
43
60
|
return () => window.removeEventListener("storage", on);
|
|
44
61
|
}, [STORAGE_KEY]);
|
|
45
62
|
const setPref = useCallback((p) => {
|
|
46
63
|
setPrefState(p);
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
64
|
+
try {
|
|
65
|
+
if (p === "system")
|
|
66
|
+
localStorage.removeItem(STORAGE_KEY);
|
|
67
|
+
else
|
|
68
|
+
localStorage.setItem(STORAGE_KEY, p);
|
|
69
|
+
}
|
|
70
|
+
catch {
|
|
71
|
+
/* storage may be unavailable; the in-memory preference still applies */
|
|
72
|
+
}
|
|
73
|
+
onPrefChange?.(p);
|
|
74
|
+
}, [STORAGE_KEY, onPrefChange]);
|
|
52
75
|
const cycle = useCallback(() => {
|
|
53
76
|
setPref(pref === "system" ? (resolved === "dark" ? "light" : "dark") : pref === "dark" ? "light" : "system");
|
|
54
77
|
}, [pref, resolved, setPref]);
|
|
55
78
|
const ctx = useMemo(() => ({ pref, resolved, setPref, cycle }), [pref, resolved, setPref, cycle]);
|
|
56
|
-
return (_jsxs(Ctx.Provider, { value: ctx, children: [_jsx(GlobalStyle, {}), children] }));
|
|
79
|
+
return (_jsxs(Ctx.Provider, { value: ctx, children: [globalStyle ? _jsx(GlobalStyle, {}) : null, children] }));
|
|
57
80
|
}
|
|
58
81
|
export function useTheme() {
|
|
59
82
|
const c = useContext(Ctx);
|
|
@@ -61,45 +84,12 @@ export function useTheme() {
|
|
|
61
84
|
throw new Error("useTheme outside AppThemeProvider");
|
|
62
85
|
return c;
|
|
63
86
|
}
|
|
87
|
+
/** Null outside a provider — for a component that may render in either place. */
|
|
88
|
+
export function useThemeMaybe() {
|
|
89
|
+
return useContext(Ctx);
|
|
90
|
+
}
|
|
64
91
|
const GlobalStyle = createGlobalStyle `
|
|
65
92
|
${cssVariables()}
|
|
66
|
-
|
|
67
|
-
*, *::before, *::after { box-sizing: border-box; }
|
|
68
|
-
html, body, #root { height: 100%; }
|
|
69
|
-
body {
|
|
70
|
-
margin: 0;
|
|
71
|
-
background: ${v.bg};
|
|
72
|
-
background-attachment: fixed;
|
|
73
|
-
color: ${v.text};
|
|
74
|
-
font-family: ${v.font};
|
|
75
|
-
font-size: 13px;
|
|
76
|
-
line-height: 1.55;
|
|
77
|
-
-webkit-font-smoothing: antialiased;
|
|
78
|
-
}
|
|
79
|
-
a { color: inherit; }
|
|
80
|
-
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
|
|
81
|
-
input, select, textarea { font: inherit; color: inherit; }
|
|
82
|
-
code, pre, kbd { font-family: ${v.mono}; }
|
|
83
|
-
|
|
84
|
-
/* Native <select> popups: macOS paints them with the system UI, but Windows
|
|
85
|
-
(and Linux) Chromium/Firefox render <option>s with page styles — unstyled,
|
|
86
|
-
that's a white UA list under our light-on-dark text. Solid surface tokens
|
|
87
|
-
keep the popup readable everywhere; macOS simply ignores these. */
|
|
88
|
-
select option, select optgroup {
|
|
89
|
-
background: ${v.surface};
|
|
90
|
-
color: ${v.text};
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
:focus-visible { outline: none; box-shadow: ${v.ring}; border-radius: 4px; }
|
|
94
|
-
::selection { background: ${v.brand22}; }
|
|
95
|
-
|
|
96
|
-
* { scrollbar-width: thin; scrollbar-color: ${v.line2} transparent; }
|
|
97
|
-
*::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
98
|
-
*::-webkit-scrollbar-thumb { background: ${v.line2}; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
|
|
99
|
-
*::-webkit-scrollbar-track { background: transparent; }
|
|
100
|
-
|
|
101
|
-
@media (prefers-reduced-motion: reduce) {
|
|
102
|
-
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
|
103
|
-
}
|
|
93
|
+
${globalCss()}
|
|
104
94
|
`;
|
|
105
95
|
//# sourceMappingURL=ThemeProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"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"}
|
package/dist/theme/tokens.d.ts
CHANGED
|
@@ -48,6 +48,8 @@ export declare const v: {
|
|
|
48
48
|
warningBg: string;
|
|
49
49
|
info: string;
|
|
50
50
|
infoBg: string;
|
|
51
|
+
data: string;
|
|
52
|
+
dataBg: string;
|
|
51
53
|
logBg: string;
|
|
52
54
|
logText: string;
|
|
53
55
|
logDim: string;
|
|
@@ -59,4 +61,5 @@ export declare const v: {
|
|
|
59
61
|
zPalette: string;
|
|
60
62
|
zToast: string;
|
|
61
63
|
};
|
|
64
|
+
export declare function globalCss(): string;
|
|
62
65
|
//# sourceMappingURL=tokens.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC;AAEF,eAAO,MAAM,IAAI,QAAwF,CAAC;AAC1G,eAAO,MAAM,OAAO,QAAuF,CAAC;AAG5G,wBAAgB,YAAY,IAAI,MAAM,
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC;AAEF,eAAO,MAAM,IAAI,QAAwF,CAAC;AAC1G,eAAO,MAAM,OAAO,QAAuF,CAAC;AAG5G,wBAAgB,YAAY,IAAI,MAAM,CA2IrC;AA0BD,eAAO,MAAM,CAAC,EAAkB;IAC9B,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAC7D,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IACpF,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IACtG,MAAM,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAC/E,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IACxE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAC7E,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IACrE,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IACjE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;CAC9F,CAAC;AAQF,wBAAgB,SAAS,IAAI,MAAM,CAwClC"}
|
package/dist/theme/tokens.js
CHANGED
|
@@ -69,6 +69,13 @@ export function cssVariables() {
|
|
|
69
69
|
--x-warning-bg: rgba(255, 196, 107, 0.13);
|
|
70
70
|
--x-info: #d8a3d7;
|
|
71
71
|
--x-info-bg: rgba(163, 84, 162, 0.16);
|
|
72
|
+
/* Data: the fourth accent, for what touches rows rather than shape or
|
|
73
|
+
severity. Success, danger and warning are spoken for, so a surface that
|
|
74
|
+
has to distinguish a fourth family — a DELETE among the ALTERs, a data
|
|
75
|
+
series next to three status series — needs a hue that is neither the
|
|
76
|
+
brand violet nor a verdict. */
|
|
77
|
+
--x-data: #7cc2ff;
|
|
78
|
+
--x-data-bg: rgba(124, 194, 255, 0.14);
|
|
72
79
|
--x-log-bg: #100d17;
|
|
73
80
|
--x-log-text: #c6bad8;
|
|
74
81
|
--x-log-dim: #6f6585;
|
|
@@ -104,6 +111,8 @@ export function cssVariables() {
|
|
|
104
111
|
--x-warning-bg: rgba(184, 116, 12, 0.10);
|
|
105
112
|
--x-info: #7a2bb8;
|
|
106
113
|
--x-info-bg: rgba(155, 62, 228, 0.10);
|
|
114
|
+
--x-data: #1d6bb8;
|
|
115
|
+
--x-data-bg: rgba(29, 107, 184, 0.10);
|
|
107
116
|
--x-log-bg: #100d17;
|
|
108
117
|
--x-log-text: #c6bad8;
|
|
109
118
|
--x-log-dim: #6f6585;
|
|
@@ -139,6 +148,8 @@ export function cssVariables() {
|
|
|
139
148
|
--x-warning-bg: rgba(184, 116, 12, 0.10);
|
|
140
149
|
--x-info: #7a2bb8;
|
|
141
150
|
--x-info-bg: rgba(155, 62, 228, 0.10);
|
|
151
|
+
--x-data: #1d6bb8;
|
|
152
|
+
--x-data-bg: rgba(29, 107, 184, 0.10);
|
|
142
153
|
--x-log-bg: #100d17;
|
|
143
154
|
--x-log-text: #c6bad8;
|
|
144
155
|
--x-log-dim: #6f6585;
|
|
@@ -155,6 +166,7 @@ const names = [
|
|
|
155
166
|
"canvas", "bg", "sidebar", "surface", "surface-2", "text", "muted", "faint",
|
|
156
167
|
"line", "line-2", "field", "field-line", "hover", "elev", "scrim",
|
|
157
168
|
"danger", "danger-bg", "success", "success-bg", "warning", "warning-bg", "info", "info-bg",
|
|
169
|
+
"data", "data-bg",
|
|
158
170
|
"log-bg", "log-text", "log-dim", "term-bg",
|
|
159
171
|
"z-nav", "z-pop", "z-scrim", "z-modal", "z-palette", "z-toast",
|
|
160
172
|
];
|
|
@@ -168,4 +180,51 @@ function buildVars() {
|
|
|
168
180
|
return out;
|
|
169
181
|
}
|
|
170
182
|
export const v = buildVars();
|
|
183
|
+
// globalCss() is the document-level reset the kit assumes: box sizing, the body
|
|
184
|
+
// surface and typography, focus rings, scrollbars and the native-<select> popup
|
|
185
|
+
// fix. AppThemeProvider injects it through createGlobalStyle; a server-rendered
|
|
186
|
+
// console inlines `cssVariables() + globalCss()` in a plain <style> in <head>
|
|
187
|
+
// instead (createGlobalStyle has no server sheet in every runtime) and passes
|
|
188
|
+
// `globalStyle={false}`.
|
|
189
|
+
export function globalCss() {
|
|
190
|
+
return `
|
|
191
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
192
|
+
html, body, #root { height: 100%; }
|
|
193
|
+
body {
|
|
194
|
+
margin: 0;
|
|
195
|
+
background: ${v.bg};
|
|
196
|
+
background-attachment: fixed;
|
|
197
|
+
color: ${v.text};
|
|
198
|
+
font-family: ${v.font};
|
|
199
|
+
font-size: 13px;
|
|
200
|
+
line-height: 1.55;
|
|
201
|
+
-webkit-font-smoothing: antialiased;
|
|
202
|
+
}
|
|
203
|
+
a { color: inherit; }
|
|
204
|
+
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
|
|
205
|
+
input, select, textarea { font: inherit; color: inherit; }
|
|
206
|
+
code, pre, kbd { font-family: ${v.mono}; }
|
|
207
|
+
|
|
208
|
+
/* Native <select> popups: macOS paints them with the system UI, but Windows
|
|
209
|
+
(and Linux) Chromium/Firefox render <option>s with page styles — unstyled,
|
|
210
|
+
that's a white UA list under our light-on-dark text. Solid surface tokens
|
|
211
|
+
keep the popup readable everywhere; macOS simply ignores these. */
|
|
212
|
+
select option, select optgroup {
|
|
213
|
+
background: ${v.surface};
|
|
214
|
+
color: ${v.text};
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
:focus-visible { outline: none; box-shadow: ${v.ring}; border-radius: 4px; }
|
|
218
|
+
::selection { background: ${v.brand22}; }
|
|
219
|
+
|
|
220
|
+
* { scrollbar-width: thin; scrollbar-color: ${v.line2} transparent; }
|
|
221
|
+
*::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
222
|
+
*::-webkit-scrollbar-thumb { background: ${v.line2}; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
|
|
223
|
+
*::-webkit-scrollbar-track { background: transparent; }
|
|
224
|
+
|
|
225
|
+
@media (prefers-reduced-motion: reduce) {
|
|
226
|
+
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
|
227
|
+
}
|
|
228
|
+
`;
|
|
229
|
+
}
|
|
171
230
|
//# sourceMappingURL=tokens.js.map
|
package/dist/theme/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,gFAAgF;AAChF,+EAA+E;AAC/E,iCAAiC;AACjC,EAAE;AACF,kFAAkF;AAClF,kFAAkF;AAClF,gFAAgF;AAChF,yCAAyC;AAEzC,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,OAAO,EAAE,SAAS;IAClB,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,2BAA2B,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,GAAG,CAAC;AAC1G,MAAM,CAAC,MAAM,OAAO,GAAG,0BAA0B,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,GAAG,CAAC;AAE5G,iEAAiE;AACjE,MAAM,UAAU,YAAY;IAC1B,OAAO;;eAEM,KAAK,CAAC,OAAO;YAChB,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE;cACrE,IAAI;iBACD,OAAO
|
|
1
|
+
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED