@metamask-previews/design-system-react 0.30.0-preview.8308740 → 0.31.0-preview.a47b4942
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 +12 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.cjs +6 -8
- package/dist/components/PureBlackProvider/PureBlackProvider.cjs.map +1 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.d.cts +5 -4
- package/dist/components/PureBlackProvider/PureBlackProvider.d.cts.map +1 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.d.mts +5 -4
- package/dist/components/PureBlackProvider/PureBlackProvider.d.mts.map +1 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.mjs +6 -8
- package/dist/components/PureBlackProvider/PureBlackProvider.mjs.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.31.0]
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- Added `PureBlackProvider` and `usePureBlack` for OLED pure-black dark mode; on web, CSS token overrides come from `data-pure-black` on the document root while the provider supplies context for component logic ([#1305](https://github.com/MetaMask/metamask-design-system/pull/1305), [#1312](https://github.com/MetaMask/metamask-design-system/pull/1312))
|
|
15
|
+
|
|
16
|
+
### Changed
|
|
17
|
+
|
|
18
|
+
- Updated `ModalContent` to use `background.alternative` for the dialog surface when pure-black mode is active, giving modals visible elevation on OLED black backgrounds ([#1308](https://github.com/MetaMask/metamask-design-system/pull/1308))
|
|
19
|
+
|
|
10
20
|
## [0.30.0]
|
|
11
21
|
|
|
12
22
|
### Added
|
|
@@ -404,7 +414,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
404
414
|
- Full TypeScript support with type definitions and enums
|
|
405
415
|
- Tailwind CSS integration with design token support
|
|
406
416
|
|
|
407
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.
|
|
417
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.31.0...HEAD
|
|
418
|
+
[0.31.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.30.0...@metamask/design-system-react@0.31.0
|
|
408
419
|
[0.30.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.29.0...@metamask/design-system-react@0.30.0
|
|
409
420
|
[0.29.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.28.0...@metamask/design-system-react@0.29.0
|
|
410
421
|
[0.28.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.27.1...@metamask/design-system-react@0.28.0
|
|
@@ -27,23 +27,21 @@ exports.usePureBlack = exports.PureBlackProvider = void 0;
|
|
|
27
27
|
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
28
28
|
const react_1 = __importStar(require("react"));
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
30
|
+
* React context for pure-black (OLED) dark mode on web.
|
|
31
31
|
*
|
|
32
32
|
* Controlled component: the app owns when pure black is active (e.g. feature
|
|
33
|
-
* flag and resolved dark theme) and passes `isPureBlack`.
|
|
34
|
-
*
|
|
33
|
+
* flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
|
|
34
|
+
* come from `data-pure-black` on the document root (see extension `setTheme`);
|
|
35
|
+
* this provider supplies `usePureBlack()` for components that branch in JS.
|
|
35
36
|
*
|
|
36
37
|
* @param options - Component props
|
|
37
38
|
* @param options.children - Child components to render
|
|
38
|
-
* @param options.isPureBlack - When true,
|
|
39
|
+
* @param options.isPureBlack - When true, `usePureBlack()` returns true
|
|
39
40
|
* @returns React component that provides pure-black context to children
|
|
40
41
|
*/
|
|
41
42
|
const PureBlackProvider = ({ children, isPureBlack = false, }) => {
|
|
42
43
|
const value = (0, react_1.useMemo)(() => ({ isPureBlack }), [isPureBlack]);
|
|
43
|
-
return (react_1.default.createElement(design_system_shared_1.PureBlackContext.Provider, { value: value },
|
|
44
|
-
react_1.default.createElement("div", { "data-pure-black": isPureBlack ? 'true' : undefined,
|
|
45
|
-
// Carrier for data-pure-black only; children layout as if unwrapped.
|
|
46
|
-
className: "contents" }, children)));
|
|
44
|
+
return (react_1.default.createElement(design_system_shared_1.PureBlackContext.Provider, { value: value }, children));
|
|
47
45
|
};
|
|
48
46
|
exports.PureBlackProvider = PureBlackProvider;
|
|
49
47
|
exports.PureBlackProvider.displayName = 'PureBlackProvider';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PureBlackProvider.cjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA2E;AAE3E,+CAAmD;AAEnD
|
|
1
|
+
{"version":3,"file":"PureBlackProvider.cjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA2E;AAE3E,+CAAmD;AAEnD;;;;;;;;;;;;GAYG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,WAAW,GAAG,KAAK,GACI,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,8BAAC,uCAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACpC,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,iBAAiB,qBAW5B;AAEF,yBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACI,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,uCAAgB,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAHW,QAAA,YAAY,gBAGvB","sourcesContent":["import { PureBlackContext } from '@metamask-previews/design-system-shared';\nimport type { PureBlackProviderProps } from '@metamask-previews/design-system-shared';\nimport React, { useContext, useMemo } from 'react';\n\n/**\n * React context for pure-black (OLED) dark mode on web.\n *\n * Controlled component: the app owns when pure black is active (e.g. feature\n * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides\n * come from `data-pure-black` on the document root (see extension `setTheme`);\n * this provider supplies `usePureBlack()` for components that branch in JS.\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.isPureBlack - When true, `usePureBlack()` returns true\n * @returns React component that provides pure-black context to children\n */\nexport const PureBlackProvider = ({\n children,\n isPureBlack = false,\n}: PureBlackProviderProps) => {\n const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);\n\n return (\n <PureBlackContext.Provider value={value}>\n {children}\n </PureBlackContext.Provider>\n );\n};\n\nPureBlackProvider.displayName = 'PureBlackProvider';\n\n/**\n * Returns whether pure-black dark mode is active in the current subtree.\n *\n * Use for component logic that depends on the active dark palette (e.g. elevated\n * surfaces in Modal). On React Native, use `usePureBlack` from\n * `@metamask/design-system-twrnc-preset` instead.\n *\n * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled\n */\nexport const usePureBlack = (): boolean => {\n const { isPureBlack } = useContext(PureBlackContext);\n return isPureBlack;\n};\n"]}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import type { PureBlackProviderProps } from "@metamask-previews/design-system-shared";
|
|
2
2
|
import React from "react";
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* React context for pure-black (OLED) dark mode on web.
|
|
5
5
|
*
|
|
6
6
|
* Controlled component: the app owns when pure black is active (e.g. feature
|
|
7
|
-
* flag and resolved dark theme) and passes `isPureBlack`.
|
|
8
|
-
*
|
|
7
|
+
* flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
|
|
8
|
+
* come from `data-pure-black` on the document root (see extension `setTheme`);
|
|
9
|
+
* this provider supplies `usePureBlack()` for components that branch in JS.
|
|
9
10
|
*
|
|
10
11
|
* @param options - Component props
|
|
11
12
|
* @param options.children - Child components to render
|
|
12
|
-
* @param options.isPureBlack - When true,
|
|
13
|
+
* @param options.isPureBlack - When true, `usePureBlack()` returns true
|
|
13
14
|
* @returns React component that provides pure-black context to children
|
|
14
15
|
*/
|
|
15
16
|
export declare const PureBlackProvider: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PureBlackProvider.d.cts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAA8B,cAAc;AAEnD
|
|
1
|
+
{"version":3,"file":"PureBlackProvider.d.cts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAA8B,cAAc;AAEnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB;iCAG3B,sBAAsB;;CAQxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAAO,OAG/B,CAAC"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import type { PureBlackProviderProps } from "@metamask-previews/design-system-shared";
|
|
2
2
|
import React from "react";
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* React context for pure-black (OLED) dark mode on web.
|
|
5
5
|
*
|
|
6
6
|
* Controlled component: the app owns when pure black is active (e.g. feature
|
|
7
|
-
* flag and resolved dark theme) and passes `isPureBlack`.
|
|
8
|
-
*
|
|
7
|
+
* flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
|
|
8
|
+
* come from `data-pure-black` on the document root (see extension `setTheme`);
|
|
9
|
+
* this provider supplies `usePureBlack()` for components that branch in JS.
|
|
9
10
|
*
|
|
10
11
|
* @param options - Component props
|
|
11
12
|
* @param options.children - Child components to render
|
|
12
|
-
* @param options.isPureBlack - When true,
|
|
13
|
+
* @param options.isPureBlack - When true, `usePureBlack()` returns true
|
|
13
14
|
* @returns React component that provides pure-black context to children
|
|
14
15
|
*/
|
|
15
16
|
export declare const PureBlackProvider: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PureBlackProvider.d.mts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAA8B,cAAc;AAEnD
|
|
1
|
+
{"version":3,"file":"PureBlackProvider.d.mts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAA8B,cAAc;AAEnD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB;iCAG3B,sBAAsB;;CAQxB,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAAO,OAG/B,CAAC"}
|
|
@@ -8,23 +8,21 @@ import { PureBlackContext } from "@metamask-previews/design-system-shared";
|
|
|
8
8
|
import $React, { useContext, useMemo } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* React context for pure-black (OLED) dark mode on web.
|
|
12
12
|
*
|
|
13
13
|
* Controlled component: the app owns when pure black is active (e.g. feature
|
|
14
|
-
* flag and resolved dark theme) and passes `isPureBlack`.
|
|
15
|
-
*
|
|
14
|
+
* flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
|
|
15
|
+
* come from `data-pure-black` on the document root (see extension `setTheme`);
|
|
16
|
+
* this provider supplies `usePureBlack()` for components that branch in JS.
|
|
16
17
|
*
|
|
17
18
|
* @param options - Component props
|
|
18
19
|
* @param options.children - Child components to render
|
|
19
|
-
* @param options.isPureBlack - When true,
|
|
20
|
+
* @param options.isPureBlack - When true, `usePureBlack()` returns true
|
|
20
21
|
* @returns React component that provides pure-black context to children
|
|
21
22
|
*/
|
|
22
23
|
export const PureBlackProvider = ({ children, isPureBlack = false, }) => {
|
|
23
24
|
const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);
|
|
24
|
-
return (React.createElement(PureBlackContext.Provider, { value: value },
|
|
25
|
-
React.createElement("div", { "data-pure-black": isPureBlack ? 'true' : undefined,
|
|
26
|
-
// Carrier for data-pure-black only; children layout as if unwrapped.
|
|
27
|
-
className: "contents" }, children)));
|
|
25
|
+
return (React.createElement(PureBlackContext.Provider, { value: value }, children));
|
|
28
26
|
};
|
|
29
27
|
PureBlackProvider.displayName = 'PureBlackProvider';
|
|
30
28
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PureBlackProvider.mjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,gDAAgD;AAE3E,OAAO,QAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;;AAEnD
|
|
1
|
+
{"version":3,"file":"PureBlackProvider.mjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,gDAAgD;AAE3E,OAAO,QAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;;AAEnD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,WAAW,GAAG,KAAK,GACI,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACpC,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { PureBlackContext } from '@metamask-previews/design-system-shared';\nimport type { PureBlackProviderProps } from '@metamask-previews/design-system-shared';\nimport React, { useContext, useMemo } from 'react';\n\n/**\n * React context for pure-black (OLED) dark mode on web.\n *\n * Controlled component: the app owns when pure black is active (e.g. feature\n * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides\n * come from `data-pure-black` on the document root (see extension `setTheme`);\n * this provider supplies `usePureBlack()` for components that branch in JS.\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.isPureBlack - When true, `usePureBlack()` returns true\n * @returns React component that provides pure-black context to children\n */\nexport const PureBlackProvider = ({\n children,\n isPureBlack = false,\n}: PureBlackProviderProps) => {\n const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);\n\n return (\n <PureBlackContext.Provider value={value}>\n {children}\n </PureBlackContext.Provider>\n );\n};\n\nPureBlackProvider.displayName = 'PureBlackProvider';\n\n/**\n * Returns whether pure-black dark mode is active in the current subtree.\n *\n * Use for component logic that depends on the active dark palette (e.g. elevated\n * surfaces in Modal). On React Native, use `usePureBlack` from\n * `@metamask/design-system-twrnc-preset` instead.\n *\n * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled\n */\nexport const usePureBlack = (): boolean => {\n const { isPureBlack } = useContext(PureBlackContext);\n return isPureBlack;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask-previews/design-system-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.31.0-preview.a47b4942",
|
|
4
4
|
"description": "Design system react ui components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@floating-ui/react-dom": "^2.1.2",
|
|
51
|
-
"@metamask-previews/design-system-shared": "0.
|
|
51
|
+
"@metamask-previews/design-system-shared": "0.27.0-preview.a47b4942",
|
|
52
52
|
"@metamask/jazzicon": "^2.0.0",
|
|
53
53
|
"@radix-ui/react-slot": "^1.1.0",
|
|
54
54
|
"blo": "^2.0.0",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@figma/code-connect": "^1.4.8",
|
|
60
60
|
"@jest/globals": "^29.7.0",
|
|
61
|
-
"@metamask-previews/design-system-tailwind-preset": "0.10.0-preview.
|
|
61
|
+
"@metamask-previews/design-system-tailwind-preset": "0.10.0-preview.a47b4942",
|
|
62
62
|
"@metamask/auto-changelog": "^6.1.1",
|
|
63
63
|
"@metamask/utils": "^11.11.0",
|
|
64
64
|
"@svgr/cli": "^8.1.0",
|