@react-xp/design-system 1.0.0-beta.4 → 1.0.0-beta.6
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/cjs/helpers/styles.js +6 -2
- package/dist/cjs/showcase/themeWrapper.native.js +1 -18
- package/dist/cjs/showcase/themeWrapper.web.js +1 -19
- package/dist/cjs/theme/themeProvider.js +19 -1
- package/dist/esm/helpers/styles.js +6 -2
- package/dist/esm/showcase/themeWrapper.native.js +1 -18
- package/dist/esm/showcase/themeWrapper.web.js +1 -19
- package/dist/esm/theme/themeProvider.js +19 -1
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/dist/types/components/button/button.styles.d.ts +3 -3
- package/dist/types/helpers/styles.d.ts +5 -5
- package/dist/types/helpers/styles.d.ts.map +1 -1
- package/dist/types/showcase/themeWrapper.native.d.ts.map +1 -1
- package/dist/types/showcase/themeWrapper.web.d.ts.map +1 -1
- package/dist/types/theme/themeProvider.d.ts.map +1 -1
- package/dist/types/theme/useTokens.d.ts +90 -1
- package/dist/types/theme/useTokens.d.ts.map +1 -1
- package/dist/types/types/tokens.d.ts +3 -4
- package/dist/types/types/tokens.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -31,8 +31,12 @@ exports.toPx = toPx;
|
|
|
31
31
|
const normalizeValueForPlatform = (platform, value) => {
|
|
32
32
|
// Recomendação: RN -> number; Web -> string (se vier "px")
|
|
33
33
|
if (platform === 'native')
|
|
34
|
-
return (0, exports.toNumber)(value);
|
|
35
|
-
return typeof value === 'string'
|
|
34
|
+
return value === undefined ? undefined : (0, exports.toNumber)(value);
|
|
35
|
+
return typeof value === 'string'
|
|
36
|
+
? value
|
|
37
|
+
: value === undefined
|
|
38
|
+
? undefined
|
|
39
|
+
: (0, exports.toPx)(value);
|
|
36
40
|
};
|
|
37
41
|
exports.normalizeValueForPlatform = normalizeValueForPlatform;
|
|
38
42
|
const getBorderWidthDefault = (t, platform) => (0, exports.normalizeValueForPlatform)(platform, (0, types_1.tok)(t, 'border-width-default'));
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ThemeWrapper = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const styleguide_1 = require("@react-xp/styleguide");
|
|
6
5
|
const react_1 = require("react");
|
|
7
6
|
const button_native_1 = require("../components/button/button.native");
|
|
8
7
|
const theme_1 = require("../theme");
|
|
@@ -19,22 +18,6 @@ const ThemeWrapper = ({ children }) => {
|
|
|
19
18
|
: corporate_1.themeCorporateColors.dark;
|
|
20
19
|
}
|
|
21
20
|
})();
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(theme_1.ThemeProvider, { tokens: {
|
|
23
|
-
...styleguide_1.styleguideBreakpoints,
|
|
24
|
-
...styleguide_1.styleguideComponentPadding,
|
|
25
|
-
...styleguide_1.styleguideLayoutGrid,
|
|
26
|
-
...styleguide_1.styleguideMotionDuration,
|
|
27
|
-
...styleguide_1.styleguideMotionEasing,
|
|
28
|
-
...styleguide_1.styleguideMotionPreset,
|
|
29
|
-
...styleguide_1.styleguideRadius,
|
|
30
|
-
...styleguide_1.styleguideShadows,
|
|
31
|
-
...styleguide_1.styleguideSpaceX,
|
|
32
|
-
...styleguide_1.styleguideSpaceY,
|
|
33
|
-
...styleguide_1.styleguideSpacing,
|
|
34
|
-
...styleguide_1.styleguideTypography,
|
|
35
|
-
...styleguide_1.styleguideUtils,
|
|
36
|
-
...styleguide_1.styleguideZIndex,
|
|
37
|
-
...themeTokens,
|
|
38
|
-
}, children: [(0, jsx_runtime_1.jsx)(button_native_1.Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }));
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)(theme_1.ThemeProvider, { tokens: themeTokens, children: [(0, jsx_runtime_1.jsx)(button_native_1.Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }));
|
|
39
22
|
};
|
|
40
23
|
exports.ThemeWrapper = ThemeWrapper;
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ThemeWrapper = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const styleguide_1 = require("@react-xp/styleguide");
|
|
6
5
|
const react_1 = require("react");
|
|
7
6
|
const button_web_1 = require("../components/button/button.web");
|
|
8
7
|
const theme_1 = require("../theme");
|
|
@@ -20,23 +19,6 @@ const ThemeWrapper = ({ children }) => {
|
|
|
20
19
|
})();
|
|
21
20
|
console.log('themeTokens', themeTokens);
|
|
22
21
|
console.log('currentThemeMode', currentThemeMode);
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { tokens: {
|
|
24
|
-
...styleguide_1.styleguideBreakpoints,
|
|
25
|
-
...styleguide_1.styleguideComponentPadding,
|
|
26
|
-
...styleguide_1.styleguideLayoutGrid,
|
|
27
|
-
...styleguide_1.styleguideMotionDuration,
|
|
28
|
-
...styleguide_1.styleguideMotionEasing,
|
|
29
|
-
...styleguide_1.styleguideMotionPreset,
|
|
30
|
-
...styleguide_1.styleguideRadius,
|
|
31
|
-
...styleguide_1.styleguideShadows,
|
|
32
|
-
...styleguide_1.styleguideSpaceX,
|
|
33
|
-
...styleguide_1.styleguideSpaceY,
|
|
34
|
-
...styleguide_1.styleguideSpacing,
|
|
35
|
-
...styleguide_1.styleguideTypography,
|
|
36
|
-
...styleguide_1.styleguideUtils,
|
|
37
|
-
...styleguide_1.styleguideZIndex,
|
|
38
|
-
...themeTokens,
|
|
39
|
-
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
|
|
40
|
-
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex m-4", style: { backgroundColor: themeTokens['color-bg-default'] }, children: [(0, jsx_runtime_1.jsx)(button_web_1.Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }) }));
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { tokens: themeTokens, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex m-4", style: { backgroundColor: themeTokens['color-bg-default'] }, children: [(0, jsx_runtime_1.jsx)(button_web_1.Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }) }));
|
|
41
23
|
};
|
|
42
24
|
exports.ThemeWrapper = ThemeWrapper;
|
|
@@ -2,8 +2,26 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ThemeProvider = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const styleguide_1 = require("@react-xp/styleguide");
|
|
5
6
|
const themeContext_1 = require("./themeContext");
|
|
6
7
|
const ThemeProvider = ({ children, tokens, }) => {
|
|
7
|
-
|
|
8
|
+
const masterTokens = {
|
|
9
|
+
...styleguide_1.styleguideBreakpoints,
|
|
10
|
+
...styleguide_1.styleguideComponentPadding,
|
|
11
|
+
...styleguide_1.styleguideLayoutGrid,
|
|
12
|
+
...styleguide_1.styleguideMotionDuration,
|
|
13
|
+
...styleguide_1.styleguideMotionEasing,
|
|
14
|
+
...styleguide_1.styleguideMotionPreset,
|
|
15
|
+
...styleguide_1.styleguideRadius,
|
|
16
|
+
...styleguide_1.styleguideShadows,
|
|
17
|
+
...styleguide_1.styleguideSpaceX,
|
|
18
|
+
...styleguide_1.styleguideSpaceY,
|
|
19
|
+
...styleguide_1.styleguideSpacing,
|
|
20
|
+
...styleguide_1.styleguideTypography,
|
|
21
|
+
...styleguide_1.styleguideUtils,
|
|
22
|
+
...styleguide_1.styleguideZIndex,
|
|
23
|
+
...tokens,
|
|
24
|
+
};
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)(themeContext_1.ThemeContext.Provider, { value: { tokens: masterTokens }, children: children }));
|
|
8
26
|
};
|
|
9
27
|
exports.ThemeProvider = ThemeProvider;
|
|
@@ -26,8 +26,12 @@ export const toPx = (value) => {
|
|
|
26
26
|
export const normalizeValueForPlatform = (platform, value) => {
|
|
27
27
|
// Recomendação: RN -> number; Web -> string (se vier "px")
|
|
28
28
|
if (platform === 'native')
|
|
29
|
-
return toNumber(value);
|
|
30
|
-
return typeof value === 'string'
|
|
29
|
+
return value === undefined ? undefined : toNumber(value);
|
|
30
|
+
return typeof value === 'string'
|
|
31
|
+
? value
|
|
32
|
+
: value === undefined
|
|
33
|
+
? undefined
|
|
34
|
+
: toPx(value);
|
|
31
35
|
};
|
|
32
36
|
export const getBorderWidthDefault = (t, platform) => normalizeValueForPlatform(platform, tok(t, 'border-width-default'));
|
|
33
37
|
export const getBorderWidthFocus = (t, platform) => normalizeValueForPlatform(platform, tok(t, 'border-width-focus'));
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { styleguideBreakpoints, styleguideComponentPadding, styleguideLayoutGrid, styleguideMotionDuration, styleguideMotionEasing, styleguideMotionPreset, styleguideRadius, styleguideShadows, styleguideSpaceX, styleguideSpaceY, styleguideSpacing, styleguideTypography, styleguideUtils, styleguideZIndex, } from '@react-xp/styleguide';
|
|
3
2
|
import { useState } from 'react';
|
|
4
3
|
import { Button } from '../components/button/button.native';
|
|
5
4
|
import { ThemeProvider } from '../theme';
|
|
@@ -16,21 +15,5 @@ export const ThemeWrapper = ({ children }) => {
|
|
|
16
15
|
: themeCorporateColors.dark;
|
|
17
16
|
}
|
|
18
17
|
})();
|
|
19
|
-
return (_jsxs(ThemeProvider, { tokens: {
|
|
20
|
-
...styleguideBreakpoints,
|
|
21
|
-
...styleguideComponentPadding,
|
|
22
|
-
...styleguideLayoutGrid,
|
|
23
|
-
...styleguideMotionDuration,
|
|
24
|
-
...styleguideMotionEasing,
|
|
25
|
-
...styleguideMotionPreset,
|
|
26
|
-
...styleguideRadius,
|
|
27
|
-
...styleguideShadows,
|
|
28
|
-
...styleguideSpaceX,
|
|
29
|
-
...styleguideSpaceY,
|
|
30
|
-
...styleguideSpacing,
|
|
31
|
-
...styleguideTypography,
|
|
32
|
-
...styleguideUtils,
|
|
33
|
-
...styleguideZIndex,
|
|
34
|
-
...themeTokens,
|
|
35
|
-
}, children: [_jsx(Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }));
|
|
18
|
+
return (_jsxs(ThemeProvider, { tokens: themeTokens, children: [_jsx(Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }));
|
|
36
19
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { styleguideBreakpoints, styleguideComponentPadding, styleguideLayoutGrid, styleguideMotionDuration, styleguideMotionEasing, styleguideMotionPreset, styleguideRadius, styleguideShadows, styleguideSpaceX, styleguideSpaceY, styleguideSpacing, styleguideTypography, styleguideUtils, styleguideZIndex, } from '@react-xp/styleguide';
|
|
3
2
|
import { useState } from 'react';
|
|
4
3
|
import { Button } from '../components/button/button.web';
|
|
5
4
|
import { ThemeProvider } from '../theme';
|
|
@@ -17,22 +16,5 @@ export const ThemeWrapper = ({ children }) => {
|
|
|
17
16
|
})();
|
|
18
17
|
console.log('themeTokens', themeTokens);
|
|
19
18
|
console.log('currentThemeMode', currentThemeMode);
|
|
20
|
-
return (_jsx(ThemeProvider, { tokens: {
|
|
21
|
-
...styleguideBreakpoints,
|
|
22
|
-
...styleguideComponentPadding,
|
|
23
|
-
...styleguideLayoutGrid,
|
|
24
|
-
...styleguideMotionDuration,
|
|
25
|
-
...styleguideMotionEasing,
|
|
26
|
-
...styleguideMotionPreset,
|
|
27
|
-
...styleguideRadius,
|
|
28
|
-
...styleguideShadows,
|
|
29
|
-
...styleguideSpaceX,
|
|
30
|
-
...styleguideSpaceY,
|
|
31
|
-
...styleguideSpacing,
|
|
32
|
-
...styleguideTypography,
|
|
33
|
-
...styleguideUtils,
|
|
34
|
-
...styleguideZIndex,
|
|
35
|
-
...themeTokens,
|
|
36
|
-
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
|
|
37
|
-
}, children: _jsxs("div", { className: "flex m-4", style: { backgroundColor: themeTokens['color-bg-default'] }, children: [_jsx(Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }) }));
|
|
19
|
+
return (_jsx(ThemeProvider, { tokens: themeTokens, children: _jsxs("div", { className: "flex m-4", style: { backgroundColor: themeTokens['color-bg-default'] }, children: [_jsx(Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }) }));
|
|
38
20
|
};
|
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { styleguideBreakpoints, styleguideComponentPadding, styleguideLayoutGrid, styleguideMotionDuration, styleguideMotionEasing, styleguideMotionPreset, styleguideRadius, styleguideShadows, styleguideSpaceX, styleguideSpaceY, styleguideSpacing, styleguideTypography, styleguideUtils, styleguideZIndex, } from '@react-xp/styleguide';
|
|
2
3
|
import { ThemeContext } from './themeContext';
|
|
3
4
|
export const ThemeProvider = ({ children, tokens, }) => {
|
|
4
|
-
|
|
5
|
+
const masterTokens = {
|
|
6
|
+
...styleguideBreakpoints,
|
|
7
|
+
...styleguideComponentPadding,
|
|
8
|
+
...styleguideLayoutGrid,
|
|
9
|
+
...styleguideMotionDuration,
|
|
10
|
+
...styleguideMotionEasing,
|
|
11
|
+
...styleguideMotionPreset,
|
|
12
|
+
...styleguideRadius,
|
|
13
|
+
...styleguideShadows,
|
|
14
|
+
...styleguideSpaceX,
|
|
15
|
+
...styleguideSpaceY,
|
|
16
|
+
...styleguideSpacing,
|
|
17
|
+
...styleguideTypography,
|
|
18
|
+
...styleguideUtils,
|
|
19
|
+
...styleguideZIndex,
|
|
20
|
+
...tokens,
|
|
21
|
+
};
|
|
22
|
+
return (_jsx(ThemeContext.Provider, { value: { tokens: masterTokens }, children: children }));
|
|
5
23
|
};
|