@alveole/theme 0.29.0 → 0.29.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/ThemeProvider.d.ts.map +1 -1
- package/dist/ThemeProvider.js +3 -35
- package/dist/constants/Color.d.ts +6 -5
- package/dist/constants/Color.d.ts.map +1 -1
- package/dist/constants/Color.js +6 -5
- package/dist/constants/Palette.d.ts +5 -5
- package/dist/helpers/injectVariableCSS.d.ts +2 -2
- package/dist/helpers/injectVariableCSS.d.ts.map +1 -1
- package/dist/helpers/useThemeBuilder.d.ts +2 -2
- package/dist/helpers/useThemeBuilder.d.ts.map +1 -1
- package/dist/type/Theme.d.ts +1 -11
- package/dist/type/Theme.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAc,EAA6B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,aAAa,EAAmB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAc,EAA6B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,aAAa,EAAmB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAKpC,eAAO,MAAM,aAAa,GAAI,OAAO,iBAAiB,CAAC,aAAa,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,4CAkB3F,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,KAI3B,CAAC"}
|
package/dist/ThemeProvider.js
CHANGED
|
@@ -1,60 +1,28 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as SystemUI from 'expo-system-ui';
|
|
3
3
|
import React, { createContext, useContext } from 'react';
|
|
4
|
-
import { Platform
|
|
4
|
+
import { Platform } from 'react-native';
|
|
5
5
|
import { injectVariableCSS } from './helpers/injectVariableCSS';
|
|
6
6
|
import { useThemeBuilder } from './helpers/useThemeBuilder';
|
|
7
7
|
import { ThemeProviderLoader } from './ThemeProviderLoader';
|
|
8
8
|
const ThemeContext = createContext(null);
|
|
9
9
|
const MIN_LOADING_DELAY = 0;
|
|
10
|
-
const DEFAULT_STATUS_BAR = {
|
|
11
|
-
barStyle: 'dark-content',
|
|
12
|
-
backgroundColor: 'white',
|
|
13
|
-
};
|
|
14
|
-
const applyStatusBar = (options) => {
|
|
15
|
-
if (Platform.OS !== 'web') {
|
|
16
|
-
StatusBar.setBarStyle(options.barStyle);
|
|
17
|
-
if (Platform.OS === 'android')
|
|
18
|
-
StatusBar.setBackgroundColor(options.backgroundColor);
|
|
19
|
-
}
|
|
20
|
-
void SystemUI.setBackgroundColorAsync(options.backgroundColor);
|
|
21
|
-
};
|
|
22
10
|
export const ThemeProvider = (props) => {
|
|
23
11
|
const { loader = true, ...builder } = props;
|
|
24
12
|
const theme = useThemeBuilder(builder);
|
|
25
13
|
const [showLoader, setShowLoader] = React.useState(true);
|
|
26
|
-
const currentStatusBarRef = React.useRef(DEFAULT_STATUS_BAR);
|
|
27
|
-
const statusBarStackRef = React.useRef([]);
|
|
28
|
-
const setStatusBar = React.useCallback((options) => {
|
|
29
|
-
const nextStatusBar = { ...currentStatusBarRef.current, ...options };
|
|
30
|
-
statusBarStackRef.current.push(currentStatusBarRef.current);
|
|
31
|
-
currentStatusBarRef.current = nextStatusBar;
|
|
32
|
-
applyStatusBar(nextStatusBar);
|
|
33
|
-
}, []);
|
|
34
|
-
const resetStatusBar = React.useCallback(() => {
|
|
35
|
-
const nextStatusBar = statusBarStackRef.current.pop() ?? DEFAULT_STATUS_BAR;
|
|
36
|
-
currentStatusBarRef.current = nextStatusBar;
|
|
37
|
-
applyStatusBar(nextStatusBar);
|
|
38
|
-
}, []);
|
|
39
14
|
React.useEffect(() => {
|
|
40
15
|
const timeout = setTimeout(() => setShowLoader(false), MIN_LOADING_DELAY);
|
|
41
16
|
return () => clearTimeout(timeout);
|
|
42
17
|
}, []);
|
|
43
18
|
React.useEffect(() => {
|
|
19
|
+
void SystemUI.setBackgroundColorAsync('white');
|
|
44
20
|
if (Platform.OS === 'web')
|
|
45
21
|
injectVariableCSS(theme);
|
|
46
22
|
}, []);
|
|
47
|
-
React.useEffect(() => {
|
|
48
|
-
applyStatusBar(DEFAULT_STATUS_BAR);
|
|
49
|
-
}, []);
|
|
50
|
-
const contextValue = React.useMemo(() => ({
|
|
51
|
-
...theme,
|
|
52
|
-
setStatusBar,
|
|
53
|
-
resetStatusBar,
|
|
54
|
-
}), [resetStatusBar, setStatusBar, theme]);
|
|
55
23
|
if ((!theme.isReady || showLoader) && loader !== false)
|
|
56
24
|
return _jsx(ThemeProviderLoader, {});
|
|
57
|
-
return _jsx(ThemeContext.Provider, { value:
|
|
25
|
+
return _jsx(ThemeContext.Provider, { value: theme, children: props.children });
|
|
58
26
|
};
|
|
59
27
|
export const useTheme = () => {
|
|
60
28
|
const ctx = useContext(ThemeContext);
|
|
@@ -203,12 +203,13 @@ export declare const Colors: {
|
|
|
203
203
|
readonly 525: "#0A76F6";
|
|
204
204
|
};
|
|
205
205
|
readonly OrangeWarning: {
|
|
206
|
-
readonly 975: "#
|
|
207
|
-
readonly 950: "#
|
|
208
|
-
readonly 925: "#
|
|
209
|
-
readonly 850: "#
|
|
206
|
+
readonly 975: "#FFF5F0";
|
|
207
|
+
readonly 950: "#FFEEE5";
|
|
208
|
+
readonly 925: "#FFE2D4";
|
|
209
|
+
readonly 850: "#FFC6AA";
|
|
210
|
+
readonly 625: "#F96B24";
|
|
210
211
|
readonly 'main-525': "#D64D00";
|
|
211
|
-
readonly 425: "#
|
|
212
|
+
readonly 425: "#BC4401";
|
|
212
213
|
};
|
|
213
214
|
readonly RougeErreur: {
|
|
214
215
|
readonly 975: "#FEF5F4";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../src/constants/Color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;QAEf,kBAAkB;;;;;;QAMlB,kBAAkB;;QAElB,kBAAkB
|
|
1
|
+
{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../src/constants/Color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;QAEf,kBAAkB;;;;;;QAMlB,kBAAkB;;QAElB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA6TlB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkClB,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CzB,CAAC;AAGX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;AAC1D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC;AAC/D,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC"}
|
package/dist/constants/Color.js
CHANGED
|
@@ -203,12 +203,13 @@ export const Colors = {
|
|
|
203
203
|
525: '#0A76F6',
|
|
204
204
|
},
|
|
205
205
|
OrangeWarning: {
|
|
206
|
-
975: '#
|
|
207
|
-
950: '#
|
|
208
|
-
925: '#
|
|
209
|
-
850: '#
|
|
206
|
+
975: '#FFF5F0',
|
|
207
|
+
950: '#FFEEE5',
|
|
208
|
+
925: '#FFE2D4',
|
|
209
|
+
850: '#FFC6AA',
|
|
210
|
+
625: '#F96B24',
|
|
210
211
|
'main-525': '#D64D00',
|
|
211
|
-
425: '#
|
|
212
|
+
425: '#BC4401',
|
|
212
213
|
},
|
|
213
214
|
RougeErreur: {
|
|
214
215
|
975: '#FEF5F4',
|
|
@@ -13,7 +13,7 @@ export declare const CustomPalette: {
|
|
|
13
13
|
readonly 'contrast-success': "#B9FDD5";
|
|
14
14
|
readonly 'contrast-error': "#FDEAE8";
|
|
15
15
|
readonly 'contrast-info': "#E5F1FE";
|
|
16
|
-
readonly 'contrast-warning': "#
|
|
16
|
+
readonly 'contrast-warning': "#FFEEE5";
|
|
17
17
|
readonly 'default-grey': "#FFFFFF";
|
|
18
18
|
readonly 'default-grey-hover': "#F6F6F8";
|
|
19
19
|
readonly 'default-grey-active': "#E6EAF1";
|
|
@@ -27,7 +27,7 @@ export declare const CustomPalette: {
|
|
|
27
27
|
readonly 'flat-error': "#C62416";
|
|
28
28
|
readonly 'flat-info': "#0264C7";
|
|
29
29
|
readonly 'flat-success': "#1B7440";
|
|
30
|
-
readonly 'flat-warning': "#
|
|
30
|
+
readonly 'flat-warning': "#BC4401";
|
|
31
31
|
readonly 'open-primary': "#D2E8FE";
|
|
32
32
|
};
|
|
33
33
|
readonly border: {
|
|
@@ -43,7 +43,7 @@ export declare const CustomPalette: {
|
|
|
43
43
|
readonly 'plain-grey': "#373A3F";
|
|
44
44
|
readonly 'plain-success': "#1B7440";
|
|
45
45
|
readonly 'plain-error': "#C62416";
|
|
46
|
-
readonly 'plain-warning': "#
|
|
46
|
+
readonly 'plain-warning': "#BC4401";
|
|
47
47
|
readonly 'plain-info': "#0264C7";
|
|
48
48
|
readonly 'action-low-primary': "#B4D9FE";
|
|
49
49
|
};
|
|
@@ -56,7 +56,7 @@ export declare const CustomPalette: {
|
|
|
56
56
|
readonly 'action-high-primary': "#012B53";
|
|
57
57
|
readonly 'action-high-grey': "#151617";
|
|
58
58
|
readonly 'action-high-info': "#0264C7";
|
|
59
|
-
readonly 'action-high-warning': "#
|
|
59
|
+
readonly 'action-high-warning': "#BC4401";
|
|
60
60
|
readonly 'action-high-error': "#C62416";
|
|
61
61
|
readonly 'inverted-grey': "#FFFFFF";
|
|
62
62
|
readonly 'inverted-primary': "#F2F9FF";
|
|
@@ -65,7 +65,7 @@ export declare const CustomPalette: {
|
|
|
65
65
|
readonly 'disabled-grey': "#8D97AC";
|
|
66
66
|
readonly 'default-success': "#1B7440";
|
|
67
67
|
readonly 'default-error': "#C62416";
|
|
68
|
-
readonly 'default-warning': "#
|
|
68
|
+
readonly 'default-warning': "#BC4401";
|
|
69
69
|
readonly 'default-info': "#0264C7";
|
|
70
70
|
};
|
|
71
71
|
readonly system: {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare const injectVariableCSS: (theme:
|
|
1
|
+
import { Theme } from '../type';
|
|
2
|
+
export declare const injectVariableCSS: (theme: Theme) => void;
|
|
3
3
|
//# sourceMappingURL=injectVariableCSS.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"injectVariableCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/injectVariableCSS.ts"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"injectVariableCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/injectVariableCSS.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAoBhC,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,SAY7C,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Theme } from '../type';
|
|
2
2
|
import { DeepPartial, Palette } from '../constants';
|
|
3
3
|
export type CustomBuilder = {
|
|
4
4
|
color?: DeepPartial<Palette>;
|
|
5
5
|
};
|
|
6
|
-
export declare function useThemeBuilder(params: CustomBuilder):
|
|
6
|
+
export declare function useThemeBuilder(params: CustomBuilder): Theme & {
|
|
7
7
|
isReady: boolean;
|
|
8
8
|
};
|
|
9
9
|
//# sourceMappingURL=useThemeBuilder.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeBuilder.d.ts","sourceRoot":"","sources":["../../src/helpers/useThemeBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"useThemeBuilder.d.ts","sourceRoot":"","sources":["../../src/helpers/useThemeBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAKrC,OAAO,EAKL,WAAW,EAKX,OAAO,EAGR,MAAM,cAAc,CAAC;AAMtB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,GAAG,KAAK,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAkDnF"}
|
package/dist/type/Theme.d.ts
CHANGED
|
@@ -1,18 +1,9 @@
|
|
|
1
|
-
import type { StatusBarStyle } from 'react-native';
|
|
2
1
|
import type { Colors, CustomPalette, CustomTypography, Fonts, Grilles, Spacing, SpacingKey, Variant } from '../constants';
|
|
3
2
|
import { Radius, RadiusKey } from '../constants/Radius';
|
|
4
3
|
import { alpha } from '../helpers/alphaColor';
|
|
5
4
|
import { elevationStyle } from '../helpers/elevationStyle';
|
|
6
5
|
import type { Typography } from './Typography';
|
|
7
|
-
export
|
|
8
|
-
barStyle: StatusBarStyle;
|
|
9
|
-
backgroundColor: string;
|
|
10
|
-
};
|
|
11
|
-
export type ThemeStatusBarApi = {
|
|
12
|
-
setStatusBar: (options: Partial<ThemeStatusBarOptions>) => void;
|
|
13
|
-
resetStatusBar: () => void;
|
|
14
|
-
};
|
|
15
|
-
export interface ThemeBase {
|
|
6
|
+
export interface Theme {
|
|
16
7
|
spacing: (key: SpacingKey) => Spacing;
|
|
17
8
|
/** Padding externe responsive : 100 sur mobile, 150 sur desktop */
|
|
18
9
|
externalPadding: () => Spacing;
|
|
@@ -30,5 +21,4 @@ export interface ThemeBase {
|
|
|
30
21
|
alpha: typeof alpha;
|
|
31
22
|
};
|
|
32
23
|
}
|
|
33
|
-
export type Theme = ThemeBase & ThemeStatusBarApi;
|
|
34
24
|
//# sourceMappingURL=Theme.d.ts.map
|
package/dist/type/Theme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/type/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/type/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACR,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,KAAK;IAEpB,OAAO,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;IACtC,mEAAmE;IACnE,eAAe,EAAE,MAAM,OAAO,CAAC;IAG/B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IAGzC,OAAO,EAAE,OAAO,cAAc,CAAC;IAG/B,MAAM,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,MAAM,CAAC;IAGnC,OAAO,EAAE,OAAO,OAAO,CAAC;IAGxB,IAAI,EAAE,UAAU,GAAG,OAAO,gBAAgB,CAAC;IAG3C,IAAI,EAAE,OAAO,KAAK,CAAC;IAGnB,KAAK,EAAE;QACL,sCAAsC;QACtC,UAAU,EAAE,OAAO,MAAM,CAAC;KAC3B,GAAG,OAAO,aAAa,GAAG;QACvB,KAAK,EAAE,OAAO,KAAK,CAAC;KACrB,CAAC;CACL"}
|