@imfusion/web-ui 0.6.4-dev.27.gda42e9c3 → 0.6.4-dev.30.g1907865c
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.js
CHANGED
|
@@ -1927,10 +1927,13 @@ function Zi({ value: e } = {}) {
|
|
|
1927
1927
|
document.documentElement.setAttribute(W.colorScheme.attr, i), o(i);
|
|
1928
1928
|
return;
|
|
1929
1929
|
}
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1930
|
+
let e = window.matchMedia("(prefers-color-scheme: dark)"), t = (e) => {
|
|
1931
|
+
document.documentElement.setAttribute(W.colorScheme.attr, e), o(e);
|
|
1932
|
+
};
|
|
1933
|
+
t(Ji());
|
|
1934
|
+
let n = (e) => t(e.matches ? "dark" : "light");
|
|
1935
|
+
return e.addEventListener("change", n), function() {
|
|
1936
|
+
e.removeEventListener("change", n);
|
|
1934
1937
|
};
|
|
1935
1938
|
}, [i]);
|
|
1936
1939
|
function s(e) {
|
|
@@ -2891,8 +2894,8 @@ function Vo({ children: e, value: t }) {
|
|
|
2891
2894
|
Vo.displayName = "IconConfig.Provider";
|
|
2892
2895
|
//#endregion
|
|
2893
2896
|
//#region src/provider/web-ui-provider.tsx
|
|
2894
|
-
function Ho({ children: e, icons: t }) {
|
|
2895
|
-
return /* @__PURE__ */ _(Vo, {
|
|
2897
|
+
function Ho({ children: e, icons: t, colorScheme: n }) {
|
|
2898
|
+
return Zi({ value: n }), /* @__PURE__ */ _(Vo, {
|
|
2896
2899
|
value: t,
|
|
2897
2900
|
children: /* @__PURE__ */ v(Ja, { children: [e, " "] })
|
|
2898
2901
|
});
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import { ColorSchemePreference } from '../types/theme';
|
|
2
3
|
import * as IconConfig from '../icons/icon-config';
|
|
3
4
|
interface Props {
|
|
4
5
|
children: ReactNode;
|
|
5
6
|
/** SVG defaults for icons in this provider's subtree; omitted fields use the defaults from icon-config.tsx. */
|
|
6
7
|
icons?: React.ComponentProps<typeof IconConfig.Provider>["value"];
|
|
8
|
+
/** Color scheme preference; omit to follow the OS and persist a choice in localStorage. A value pins the scheme and bypasses localStorage. */
|
|
9
|
+
colorScheme?: ColorSchemePreference;
|
|
7
10
|
}
|
|
8
|
-
export declare function WebUIProvider({ children, icons }: Props): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function WebUIProvider({ children, icons, colorScheme }: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
12
|
export {};
|
package/package.json
CHANGED
|
@@ -22,9 +22,18 @@ export function App() {
|
|
|
22
22
|
Components outside the provider do not receive the library's provider context. Keep upstream imports behind the library; see
|
|
23
23
|
[library-boundary.md](library-boundary.md).
|
|
24
24
|
|
|
25
|
+
The provider follows the OS color scheme by default. An app that paints its own surfaces from a fixed palette pins the scheme
|
|
26
|
+
instead, so component colors cannot resolve against the opposite scheme:
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
<WebUIProvider colorScheme="dark">
|
|
30
|
+
```
|
|
31
|
+
|
|
25
32
|
## Symptoms of broken setup
|
|
26
33
|
|
|
27
34
|
- Unstyled components usually mean the `styles.css` import is missing.
|
|
28
|
-
-
|
|
35
|
+
- Unresolved variables usually mean the component is outside `WebUIProvider`.
|
|
36
|
+
- Light component colors inside a dark app (or the reverse) mean the scheme is following the OS against a fixed palette. Pin
|
|
37
|
+
`colorScheme` on the provider.
|
|
29
38
|
- An integration import error usually means its optional peer is missing. Check the component entry in
|
|
30
39
|
`imf-web-ui-components` for the package to install.
|
|
@@ -56,7 +56,7 @@ Use surface roles (`main`, `support`, `minor`), the separate `brand` and `primar
|
|
|
56
56
|
slots. Override a high-level control when a whole family should change; consume a semantic token in a component.
|
|
57
57
|
|
|
58
58
|
Foreground roles are for text, icons, borders, and focus rings. Background roles are for fills. The provider sets
|
|
59
|
-
`data-imf-ui-color-scheme="light" | "dark"` on `<html
|
|
59
|
+
`data-imf-ui-color-scheme="light" | "dark"` on `<html>`, from the OS preference unless its `colorScheme` prop pins one.
|
|
60
60
|
|
|
61
61
|
## Browser floor
|
|
62
62
|
|