@brightlayer-ui/react-native-themes 7.0.0-alpha.0 → 7.0.0-alpha.1

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.
Files changed (10) hide show
  1. package/LICENSES.json +145 -1
  2. package/dist/blueDarkTheme.d.ts +6 -53
  3. package/dist/blueDarkTheme.js +70 -8
  4. package/dist/blueTheme.d.ts +6 -53
  5. package/dist/blueTheme.js +70 -8
  6. package/dist/index.d.ts +1 -36
  7. package/dist/index.js +3 -1
  8. package/dist/shared.d.ts +123 -7
  9. package/dist/shared.js +6 -13
  10. package/package.json +2 -2
package/LICENSES.json CHANGED
@@ -1,14 +1,158 @@
1
1
  {
2
2
  "@brightlayer-ui/colors@3.0.1": {
3
+ "licenses": "BSD-3-Clause",
4
+ "repository": "https://github.com/brightlayer-ui/colors",
5
+ "licenseUrl": "https://github.com/brightlayer-ui/colors/raw/master/LICENSE",
6
+ "parents": "reactNativeShowcaseDemo"
7
+ },
8
+ "@brightlayer-ui/colors@4.0.0": {
3
9
  "licenses": "BSD-3-Clause",
4
10
  "repository": "https://github.com/etn-ccis/blui-colors",
5
11
  "licenseUrl": "https://github.com/etn-ccis/blui-colors/raw/master/LICENSE",
6
12
  "parents": "@brightlayer-ui/react-native-themes"
7
13
  },
8
- "color@3.1.3": {
14
+ "@brightlayer-ui/icons-svg@1.7.0": {
15
+ "licenses": "BSD-3-Clause",
16
+ "repository": "https://github.com/brightlayer-ui/icons",
17
+ "licenseUrl": "https://github.com/brightlayer-ui/icons",
18
+ "parents": "reactNativeShowcaseDemo"
19
+ },
20
+ "@brightlayer-ui/react-native-components@6.0.1": {
21
+ "licenses": "BSD-3-Clause",
22
+ "repository": "https://github.com/brightlayer-ui/react-native-component-library",
23
+ "licenseUrl": "https://github.com/brightlayer-ui/react-native-component-library/raw/master/LICENSE",
24
+ "parents": "reactNativeShowcaseDemo"
25
+ },
26
+ "@brightlayer-ui/react-native-progress-icons@1.0.2": {
27
+ "licenses": "BSD-3-Clause",
28
+ "repository": "https://github.com/brightlayer-ui/progress-icons",
29
+ "licenseUrl": "https://github.com/brightlayer-ui/progress-icons/raw/master/LICENSE",
30
+ "parents": "reactNativeShowcaseDemo"
31
+ },
32
+ "@brightlayer-ui/react-native-themes@7.0.0-alpha.0": {
33
+ "licenses": "BSD-3-Clause",
34
+ "repository": "https://github.com/etn-ccis/blui-react-native-themes",
35
+ "licenseUrl": "https://github.com/etn-ccis/blui-react-native-themes",
36
+ "parents": "reactNativeShowcaseDemo"
37
+ },
38
+ "@brightlayer-ui/react-native-vector-icons@1.3.1": {
39
+ "licenses": "BSD-3-Clause",
40
+ "repository": "https://github.com/brightlayer-ui/icons",
41
+ "licenseUrl": "https://github.com/brightlayer-ui/icons/raw/master/LICENSE",
42
+ "parents": "reactNativeShowcaseDemo"
43
+ },
44
+ "@react-native-community/masked-view@0.1.11": {
45
+ "licenses": "MIT",
46
+ "repository": "https://github.com/react-native-community/react-native-masked-view",
47
+ "licenseUrl": "https://github.com/react-native-community/react-native-masked-view",
48
+ "parents": "reactNativeShowcaseDemo"
49
+ },
50
+ "@react-navigation/drawer@5.12.9": {
51
+ "licenses": "MIT",
52
+ "repository": "https://github.com/react-navigation/react-navigation",
53
+ "licenseUrl": "https://github.com/react-navigation/react-navigation/raw/master/LICENSE",
54
+ "parents": "reactNativeShowcaseDemo"
55
+ },
56
+ "@react-navigation/native@5.9.8": {
57
+ "licenses": "MIT",
58
+ "repository": "https://github.com/react-navigation/react-navigation",
59
+ "licenseUrl": "https://github.com/react-navigation/react-navigation/raw/master/LICENSE",
60
+ "parents": "reactNativeShowcaseDemo"
61
+ },
62
+ "@react-navigation/stack@5.14.9": {
63
+ "licenses": "MIT",
64
+ "repository": "https://github.com/react-navigation/react-navigation",
65
+ "licenseUrl": "https://github.com/react-navigation/react-navigation/raw/master/LICENSE",
66
+ "parents": "reactNativeShowcaseDemo"
67
+ },
68
+ "color@3.2.1": {
69
+ "licenses": "MIT",
70
+ "repository": "https://github.com/Qix-/color",
71
+ "licenseUrl": "https://github.com/Qix-/color/raw/master/LICENSE",
72
+ "parents": "reactNativeShowcaseDemo"
73
+ },
74
+ "color@4.2.3": {
9
75
  "licenses": "MIT",
10
76
  "repository": "https://github.com/Qix-/color",
11
77
  "licenseUrl": "https://github.com/Qix-/color/raw/master/LICENSE",
12
78
  "parents": "@brightlayer-ui/react-native-themes"
79
+ },
80
+ "lodash.clonedeep@4.5.0": {
81
+ "licenses": "MIT",
82
+ "repository": "https://github.com/lodash/lodash",
83
+ "licenseUrl": "https://github.com/lodash/lodash/raw/master/LICENSE",
84
+ "parents": "reactNativeShowcaseDemo"
85
+ },
86
+ "react-native-collapsible@1.6.0": {
87
+ "licenses": "MIT",
88
+ "repository": "https://oblador@github.com/oblador/react-native-collapsible",
89
+ "licenseUrl": "https://oblador@github.com/oblador/react-native-collapsible/raw/master/LICENSE",
90
+ "parents": "reactNativeShowcaseDemo"
91
+ },
92
+ "react-native-gesture-handler@1.10.3": {
93
+ "licenses": "MIT",
94
+ "repository": "https://github.com/software-mansion/react-native-gesture-handler",
95
+ "licenseUrl": "https://github.com/software-mansion/react-native-gesture-handler/raw/master/LICENSE",
96
+ "parents": "reactNativeShowcaseDemo"
97
+ },
98
+ "react-native-modal@11.10.0": {
99
+ "licenses": "MIT",
100
+ "repository": "https://github.com/react-native-community/react-native-modal",
101
+ "licenseUrl": "https://github.com/react-native-community/react-native-modal/raw/master/LICENSE.md",
102
+ "parents": "reactNativeShowcaseDemo"
103
+ },
104
+ "react-native-paper@4.10.0": {
105
+ "licenses": "MIT",
106
+ "repository": "https://github.com/callstack/react-native-paper",
107
+ "licenseUrl": "https://github.com/callstack/react-native-paper/raw/master/LICENSE.md",
108
+ "parents": "reactNativeShowcaseDemo"
109
+ },
110
+ "react-native-reanimated@2.2.4": {
111
+ "licenses": "MIT",
112
+ "repository": "https://github.com/software-mansion/react-native-reanimated",
113
+ "licenseUrl": "https://github.com/software-mansion/react-native-reanimated/raw/master/LICENSE",
114
+ "parents": "reactNativeShowcaseDemo"
115
+ },
116
+ "react-native-restart@0.0.17": {
117
+ "licenses": "MIT",
118
+ "repository": "https://github.com/avishayil/react-native-restart",
119
+ "licenseUrl": "https://github.com/avishayil/react-native-restart/raw/master/LICENSE",
120
+ "parents": "reactNativeShowcaseDemo"
121
+ },
122
+ "react-native-safe-area-context@3.3.2": {
123
+ "licenses": "MIT",
124
+ "repository": "https://github.com/th3rdwave/react-native-safe-area-context",
125
+ "licenseUrl": "https://github.com/th3rdwave/react-native-safe-area-context/raw/master/LICENSE",
126
+ "parents": "reactNativeShowcaseDemo"
127
+ },
128
+ "react-native-screens@3.9.0": {
129
+ "licenses": "MIT",
130
+ "repository": "https://github.com/software-mansion/react-native-screens",
131
+ "licenseUrl": "https://github.com/software-mansion/react-native-screens/raw/master/LICENSE",
132
+ "parents": "reactNativeShowcaseDemo"
133
+ },
134
+ "react-native-svg@12.1.1": {
135
+ "licenses": "MIT",
136
+ "repository": "https://github.com/react-native-community/react-native-svg",
137
+ "licenseUrl": "https://github.com/react-native-community/react-native-svg/raw/master/LICENSE",
138
+ "parents": "reactNativeShowcaseDemo"
139
+ },
140
+ "react-native-vector-icons@8.1.0": {
141
+ "licenses": "MIT",
142
+ "repository": "https://github.com/oblador/react-native-vector-icons",
143
+ "licenseUrl": "https://github.com/oblador/react-native-vector-icons/raw/master/LICENSE",
144
+ "parents": "reactNativeShowcaseDemo"
145
+ },
146
+ "react-native@0.64.3": {
147
+ "licenses": "MIT",
148
+ "repository": "github:facebook/react-native",
149
+ "licenseUrl": "github:facebook/react-native",
150
+ "parents": "reactNativeShowcaseDemo"
151
+ },
152
+ "react@17.0.2": {
153
+ "licenses": "MIT",
154
+ "repository": "https://github.com/facebook/react",
155
+ "licenseUrl": "https://github.com/facebook/react/raw/master/LICENSE",
156
+ "parents": "reactNativeShowcaseDemo"
13
157
  }
14
158
  }
package/dist/blueDarkTheme.d.ts CHANGED
@@ -5,7 +5,6 @@ All rights reserved.
5
5
 
6
6
  This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
7
7
  **/
8
- import Color from 'color';
9
8
  export declare const MD3BluiDarkTheme: {
10
9
  fonts: import("react-native-paper/lib/typescript/types").MD3Typescale;
11
10
  colors: {
@@ -31,32 +30,10 @@ export declare const MD3BluiDarkTheme: {
31
30
  onSurface: string;
32
31
  surfaceVariant: string;
33
32
  onSurfaceVariant: string;
33
+ surfaceDisabled: string;
34
+ onSurfaceDisabled: string;
34
35
  outline: string;
35
- outlineVariant: Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | any | ArrayLike<number> | {
36
- [key: string]: any;
37
- }> | ArrayLike<number> | {
38
- [key: string]: any;
39
- }> | ArrayLike<number> | {
40
- [key: string]: any;
41
- }> | ArrayLike<number> | {
42
- [key: string]: any;
43
- }> | ArrayLike<number> | {
44
- [key: string]: any;
45
- }> | ArrayLike<number> | {
46
- [key: string]: any;
47
- }> | ArrayLike<number> | {
48
- [key: string]: any;
49
- }> | ArrayLike<number> | {
50
- [key: string]: any;
51
- }> | ArrayLike<number> | {
52
- [key: string]: any;
53
- }> | ArrayLike<number> | {
54
- [key: string]: any;
55
- }> | ArrayLike<number> | {
56
- [key: string]: any;
57
- }> | ArrayLike<number> | {
58
- [key: string]: any;
59
- }>;
36
+ outlineVariant: string;
60
37
  shadow: string;
61
38
  scrim: string;
62
39
  inverseSurface: string;
@@ -72,31 +49,7 @@ export declare const MD3BluiDarkTheme: {
72
49
  };
73
50
  primaryNonText: string;
74
51
  errorNonText: string;
75
- disabled: Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | any | ArrayLike<number> | {
76
- [key: string]: any;
77
- }> | ArrayLike<number> | {
78
- [key: string]: any;
79
- }> | ArrayLike<number> | {
80
- [key: string]: any;
81
- }> | ArrayLike<number> | {
82
- [key: string]: any;
83
- }> | ArrayLike<number> | {
84
- [key: string]: any;
85
- }> | ArrayLike<number> | {
86
- [key: string]: any;
87
- }> | ArrayLike<number> | {
88
- [key: string]: any;
89
- }> | ArrayLike<number> | {
90
- [key: string]: any;
91
- }> | ArrayLike<number> | {
92
- [key: string]: any;
93
- }> | ArrayLike<number> | {
94
- [key: string]: any;
95
- }> | ArrayLike<number> | {
96
- [key: string]: any;
97
- }> | ArrayLike<number> | {
98
- [key: string]: any;
99
- }>;
52
+ disabled: string;
100
53
  warning: string;
101
54
  warningNonText: string;
102
55
  onWarning: string;
@@ -122,8 +75,8 @@ export declare const MD3BluiDarkTheme: {
122
75
  surfaceContainer: string;
123
76
  surfaceContainerHigh: string;
124
77
  surfaceContainerHighest: string;
125
- surfaceDisabled: string;
126
- onSurfaceDisabled: string;
78
+ disabledContainer: string;
79
+ onDisabledContainer: string;
127
80
  backdrop: string;
128
81
  };
129
82
  dark: boolean;
package/dist/blueDarkTheme.js CHANGED
@@ -24,17 +24,79 @@ Object.defineProperty(exports, "__esModule", { value: true });
24
24
  exports.MD3BluiDarkTheme = void 0;
25
25
  var react_native_paper_1 = require("react-native-paper");
26
26
  var shared_1 = require("./shared");
27
- var colors_1 = require("@brightlayer-ui/colors");
27
+ var colors_1 = __importDefault(require("@brightlayer-ui/colors"));
28
28
  var color_1 = __importDefault(require("color"));
29
29
  exports.MD3BluiDarkTheme = __assign(__assign({}, react_native_paper_1.MD3DarkTheme), { fonts: (0, react_native_paper_1.configureFonts)({ config: shared_1.fontConfig }), colors: __assign(__assign({}, react_native_paper_1.MD3DarkTheme.colors), {
30
30
  // React Native Paper default theme color variants
31
- primary: colors_1.BLUIColors.primary[80], onPrimary: colors_1.BLUIColors.primary[20], primaryContainer: colors_1.BLUIColors.primary[30], onPrimaryContainer: colors_1.BLUIColors.primary[90], secondary: colors_1.BLUIColors.primary[80], onSecondary: colors_1.BLUIColors.primary[20], secondaryContainer: colors_1.BLUIColors.primary[30], onSecondaryContainer: colors_1.BLUIColors.primary[90], tertiary: colors_1.BLUIColors.primary[80], onTertiary: colors_1.BLUIColors.primary[20], tertiaryContainer: colors_1.BLUIColors.primary[30], onTertiaryContainer: colors_1.BLUIColors.primary[90], error: colors_1.BLUIColors.error[80], onError: colors_1.BLUIColors.error[20], errorContainer: colors_1.BLUIColors.error[30], onErrorContainer: colors_1.BLUIColors.error[90], background: colors_1.BLUIColors.neutral[6], onBackground: colors_1.BLUIColors.neutral[95], surface: colors_1.BLUIColors.neutral[6], onSurface: colors_1.BLUIColors.neutral[95], surfaceVariant: colors_1.BLUIColors.neutralVariant[30], onSurfaceVariant: colors_1.BLUIColors.neutralVariant[70], outline: colors_1.BLUIColors.neutralVariant[60], outlineVariant: (0, color_1.default)(colors_1.BLUIColors.neutralVariant[60]).alpha(0.25), shadow: colors_1.BLUIColors.primary[0], scrim: colors_1.BLUIColors.primary[0], inverseSurface: colors_1.BLUIColors.neutral[90], inverseOnSurface: colors_1.BLUIColors.neutral[10], inversePrimary: colors_1.BLUIColors.primary[40], elevation: {
31
+ primary: colors_1.default.primary[80], onPrimary: colors_1.default.primary[20], primaryContainer: colors_1.default.primary[30], onPrimaryContainer: colors_1.default.primary[90], secondary: colors_1.default.primary[80], onSecondary: colors_1.default.primary[20], secondaryContainer: colors_1.default.primary[30], onSecondaryContainer: colors_1.default.primary[90], tertiary: colors_1.default.primary[80], onTertiary: colors_1.default.primary[20], tertiaryContainer: colors_1.default.primary[30], onTertiaryContainer: colors_1.default.primary[90], error: colors_1.default.error[80], onError: colors_1.default.error[20], errorContainer: colors_1.default.error[30], onErrorContainer: colors_1.default.error[90], background: colors_1.default.neutral[6], onBackground: colors_1.default.neutral[95], surface: colors_1.default.neutral[6], onSurface: colors_1.default.neutral[95], surfaceVariant: colors_1.default.neutralVariant[30], onSurfaceVariant: colors_1.default.neutralVariant[70],
32
+ // surfaceDisabled is the same as disabledContainer in design files
33
+ surfaceDisabled: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.1).rgb().string(),
34
+ // onSurfaceDisabled is the same as onDisabledContainer in design files
35
+ onSurfaceDisabled: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.15).rgb().string(), outline: colors_1.default.neutralVariant[60], outlineVariant: (0, color_1.default)(colors_1.default.neutralVariant[60]).alpha(0.25).rgb().string(), shadow: colors_1.default.primary[0], scrim: colors_1.default.primary[0], inverseSurface: colors_1.default.neutral[90], inverseOnSurface: colors_1.default.neutral[10], inversePrimary: colors_1.default.primary[40], elevation: {
32
36
  level0: 'transparent',
33
- level1: colors_1.BLUIColors.neutral[4],
34
- level2: colors_1.BLUIColors.neutral[10],
35
- level3: colors_1.BLUIColors.neutral[12],
36
- level4: colors_1.BLUIColors.neutral[17],
37
- level5: colors_1.BLUIColors.neutral[20],
37
+ level1: colors_1.default.neutral[4],
38
+ level2: colors_1.default.neutral[10],
39
+ level3: colors_1.default.neutral[12],
40
+ level4: colors_1.default.neutral[17],
41
+ level5: colors_1.default.neutral[20],
38
42
  },
39
43
  // Custom color variants
40
- primaryNonText: colors_1.BLUIColors.primary[60], errorNonText: colors_1.BLUIColors.error[60], disabled: (0, color_1.default)(colors_1.BLUIColors.neutral[90]).alpha(0.2), warning: colors_1.BLUIColors.warning[90], warningNonText: colors_1.BLUIColors.warning[80], onWarning: colors_1.BLUIColors.warning[20], warningContainer: colors_1.BLUIColors.warning[30], onWarningContainer: colors_1.BLUIColors.warning[90], success: colors_1.BLUIColors.success[80], successNonText: colors_1.BLUIColors.success[70], onSuccess: colors_1.BLUIColors.success[20], successContainer: colors_1.BLUIColors.success[30], onSuccessContainer: colors_1.BLUIColors.success[90], orange: colors_1.BLUIColors.orange[80], orangeNonText: colors_1.BLUIColors.orange[70], onOrange: colors_1.BLUIColors.orange[20], orangeContainer: colors_1.BLUIColors.orange[30], onOrangeContainer: colors_1.BLUIColors.orange[90], purple: colors_1.BLUIColors.purple[80], purpleNonText: colors_1.BLUIColors.purple[60], onPurple: colors_1.BLUIColors.purple[20], purpleContainer: colors_1.BLUIColors.purple[30], onPurpleContainer: colors_1.BLUIColors.purple[90], surfaceContainerLowest: colors_1.BLUIColors.neutral[4], surfaceContainerLow: colors_1.BLUIColors.neutral[10], surfaceContainer: colors_1.BLUIColors.neutral[12], surfaceContainerHigh: colors_1.BLUIColors.neutral[17], surfaceContainerHighest: colors_1.BLUIColors.neutral[20] }) });
44
+ // High-emphasis primary non-text variant, can be used on non-text elements like icons
45
+ primaryNonText: colors_1.default.primary[60],
46
+ // Attention-grabbing error color can be used on non-text elements like icons, which communicate error states
47
+ errorNonText: colors_1.default.error[60],
48
+ // variant used to render disabled elements
49
+ disabled: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.25).rgb().string(),
50
+ // warning variant fills, texts, and icons which communicate warning states
51
+ warning: colors_1.default.warning[90],
52
+ // can be used on non-text warning elements like icons
53
+ warningNonText: colors_1.default.warning[80],
54
+ // can be used on warning text and icons against warning
55
+ onWarning: colors_1.default.warning[20],
56
+ // Standout fill warning color against surface
57
+ warningContainer: colors_1.default.warning[30],
58
+ // Text and icons against warning container
59
+ onWarningContainer: colors_1.default.warning[90],
60
+ // success color variant fills, texts, and icons which communicate success states
61
+ success: colors_1.default.success[80],
62
+ // can be used on non-text success elements like icons
63
+ successNonText: colors_1.default.success[70],
64
+ // can be used on success text and icons against success
65
+ onSuccess: colors_1.default.success[20],
66
+ // Standout fill success color against surface
67
+ successContainer: colors_1.default.success[30],
68
+ // Text and icons against success container
69
+ onSuccessContainer: colors_1.default.success[90],
70
+ // orange color variant fills, texts, and icons
71
+ orange: colors_1.default.orange[80],
72
+ // non-text orange variant can be used on non-text elements like icons
73
+ orangeNonText: colors_1.default.orange[70],
74
+ // can be used on text and icons against orange
75
+ onOrange: colors_1.default.orange[20],
76
+ // Standout fill orange color against surface
77
+ orangeContainer: colors_1.default.orange[30],
78
+ // Text and icons against orange container
79
+ onOrangeContainer: colors_1.default.orange[90],
80
+ // purple color variant fills, texts, and icons
81
+ purple: colors_1.default.purple[80],
82
+ // non-text purple variant can be used on non-text elements like icons
83
+ purpleNonText: colors_1.default.purple[60],
84
+ // can be used on text and icons against purple
85
+ onPurple: colors_1.default.purple[20],
86
+ // Standout fill purple color against surface
87
+ purpleContainer: colors_1.default.purple[30],
88
+ // Text and icons against purple container
89
+ onPurpleContainer: colors_1.default.purple[90],
90
+ // Surface container is the default role, but the others are especially helpful for creating hierarchy and nested containers
91
+ // Lowest-emphasis container color
92
+ surfaceContainerLowest: colors_1.default.neutral[4],
93
+ // Low-emphasis container color
94
+ surfaceContainerLow: colors_1.default.neutral[10],
95
+ // Default container color
96
+ surfaceContainer: colors_1.default.neutral[12],
97
+ // High-emphasis container color
98
+ surfaceContainerHigh: colors_1.default.neutral[17],
99
+ // Highest-emphasis container color
100
+ surfaceContainerHighest: colors_1.default.neutral[20],
101
+ // This is alias for surface disabled, used as disabled container background
102
+ disabledContainer: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.1).rgb().string(), onDisabledContainer: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.15).rgb().string() }) });
package/dist/blueTheme.d.ts CHANGED
@@ -5,7 +5,6 @@ All rights reserved.
5
5
 
6
6
  This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
7
7
  **/
8
- import Color from 'color';
9
8
  export declare const MD3BluiLightTheme: {
10
9
  fonts: import("react-native-paper/lib/typescript/types").MD3Typescale;
11
10
  colors: {
@@ -29,34 +28,12 @@ export declare const MD3BluiLightTheme: {
29
28
  onBackground: string;
30
29
  surface: string;
31
30
  onSurface: string;
31
+ surfaceDisabled: string;
32
+ onSurfaceDisabled: string;
32
33
  surfaceVariant: string;
33
34
  onSurfaceVariant: string;
34
35
  outline: string;
35
- outlineVariant: Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | any | ArrayLike<number> | {
36
- [key: string]: any;
37
- }> | ArrayLike<number> | {
38
- [key: string]: any;
39
- }> | ArrayLike<number> | {
40
- [key: string]: any;
41
- }> | ArrayLike<number> | {
42
- [key: string]: any;
43
- }> | ArrayLike<number> | {
44
- [key: string]: any;
45
- }> | ArrayLike<number> | {
46
- [key: string]: any;
47
- }> | ArrayLike<number> | {
48
- [key: string]: any;
49
- }> | ArrayLike<number> | {
50
- [key: string]: any;
51
- }> | ArrayLike<number> | {
52
- [key: string]: any;
53
- }> | ArrayLike<number> | {
54
- [key: string]: any;
55
- }> | ArrayLike<number> | {
56
- [key: string]: any;
57
- }> | ArrayLike<number> | {
58
- [key: string]: any;
59
- }>;
36
+ outlineVariant: string;
60
37
  shadow: string;
61
38
  scrim: string;
62
39
  inverseSurface: string;
@@ -72,31 +49,7 @@ export declare const MD3BluiLightTheme: {
72
49
  };
73
50
  primaryNonText: string;
74
51
  errorNonText: string;
75
- disabled: Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | Color<string | number | any | ArrayLike<number> | {
76
- [key: string]: any;
77
- }> | ArrayLike<number> | {
78
- [key: string]: any;
79
- }> | ArrayLike<number> | {
80
- [key: string]: any;
81
- }> | ArrayLike<number> | {
82
- [key: string]: any;
83
- }> | ArrayLike<number> | {
84
- [key: string]: any;
85
- }> | ArrayLike<number> | {
86
- [key: string]: any;
87
- }> | ArrayLike<number> | {
88
- [key: string]: any;
89
- }> | ArrayLike<number> | {
90
- [key: string]: any;
91
- }> | ArrayLike<number> | {
92
- [key: string]: any;
93
- }> | ArrayLike<number> | {
94
- [key: string]: any;
95
- }> | ArrayLike<number> | {
96
- [key: string]: any;
97
- }> | ArrayLike<number> | {
98
- [key: string]: any;
99
- }>;
52
+ disabled: string;
100
53
  warning: string;
101
54
  warningNonText: string;
102
55
  onWarning: string;
@@ -122,8 +75,8 @@ export declare const MD3BluiLightTheme: {
122
75
  surfaceContainer: string;
123
76
  surfaceContainerHigh: string;
124
77
  surfaceContainerHighest: string;
125
- surfaceDisabled: string;
126
- onSurfaceDisabled: string;
78
+ disabledContainer: string;
79
+ onDisabledContainer: string;
127
80
  backdrop: string;
128
81
  };
129
82
  dark: boolean;
package/dist/blueTheme.js CHANGED
@@ -23,18 +23,80 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
23
23
  Object.defineProperty(exports, "__esModule", { value: true });
24
24
  exports.MD3BluiLightTheme = void 0;
25
25
  var react_native_paper_1 = require("react-native-paper");
26
- var colors_1 = require("@brightlayer-ui/colors");
26
+ var colors_1 = __importDefault(require("@brightlayer-ui/colors"));
27
27
  var shared_1 = require("./shared");
28
28
  var color_1 = __importDefault(require("color"));
29
29
  exports.MD3BluiLightTheme = __assign(__assign({}, react_native_paper_1.MD3LightTheme), { fonts: (0, react_native_paper_1.configureFonts)({ config: shared_1.fontConfig }), colors: __assign(__assign({}, react_native_paper_1.MD3LightTheme.colors), {
30
30
  // React Native Paper default theme color variants
31
- primary: colors_1.BLUIColors.primary[40], onPrimary: colors_1.BLUIColors.primary[100], primaryContainer: colors_1.BLUIColors.primary[80], onPrimaryContainer: colors_1.BLUIColors.primary[30], secondary: colors_1.BLUIColors.primary[40], onSecondary: colors_1.BLUIColors.primary[100], secondaryContainer: colors_1.BLUIColors.primary[80], onSecondaryContainer: colors_1.BLUIColors.primary[30], tertiary: colors_1.BLUIColors.primary[40], onTertiary: colors_1.BLUIColors.primary[100], tertiaryContainer: colors_1.BLUIColors.primary[80], onTertiaryContainer: colors_1.BLUIColors.primary[30], error: colors_1.BLUIColors.error[40], onError: colors_1.BLUIColors.primary[100], errorContainer: colors_1.BLUIColors.error[90], onErrorContainer: colors_1.BLUIColors.error[30], background: colors_1.BLUIColors.neutral[98], onBackground: colors_1.BLUIColors.neutral[10], surface: colors_1.BLUIColors.neutral[98], onSurface: colors_1.BLUIColors.neutral[10], surfaceVariant: colors_1.BLUIColors.neutralVariant[90], onSurfaceVariant: colors_1.BLUIColors.neutralVariant[30], outline: colors_1.BLUIColors.neutralVariant[50], outlineVariant: (0, color_1.default)(colors_1.BLUIColors.neutralVariant[50]).alpha(0.25), shadow: colors_1.BLUIColors.primary[0], scrim: colors_1.BLUIColors.primary[0], inverseSurface: colors_1.BLUIColors.neutral[20], inverseOnSurface: colors_1.BLUIColors.neutral[95], inversePrimary: colors_1.BLUIColors.primary[80], elevation: {
31
+ primary: colors_1.default.primary[40], onPrimary: colors_1.default.primary[100], primaryContainer: colors_1.default.primary[80], onPrimaryContainer: colors_1.default.primary[30], secondary: colors_1.default.primary[40], onSecondary: colors_1.default.primary[100], secondaryContainer: colors_1.default.primary[80], onSecondaryContainer: colors_1.default.primary[30], tertiary: colors_1.default.primary[40], onTertiary: colors_1.default.primary[100], tertiaryContainer: colors_1.default.primary[80], onTertiaryContainer: colors_1.default.primary[30], error: colors_1.default.error[40], onError: colors_1.default.primary[100], errorContainer: colors_1.default.error[90], onErrorContainer: colors_1.default.error[30], background: colors_1.default.neutral[98], onBackground: colors_1.default.neutral[10], surface: colors_1.default.neutral[98], onSurface: colors_1.default.neutral[10],
32
+ // surfaceDisabled is the same as disabledContainer in design files
33
+ surfaceDisabled: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.05).rgb().string(),
34
+ // onSurfaceDisabled is the same as onDisabledContainer in design files
35
+ onSurfaceDisabled: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.25).rgb().string(), surfaceVariant: colors_1.default.neutralVariant[90], onSurfaceVariant: colors_1.default.neutralVariant[30], outline: colors_1.default.neutralVariant[50], outlineVariant: (0, color_1.default)(colors_1.default.neutralVariant[50]).alpha(0.25).rgb().string(), shadow: colors_1.default.primary[0], scrim: colors_1.default.primary[0], inverseSurface: colors_1.default.neutral[20], inverseOnSurface: colors_1.default.neutral[95], inversePrimary: colors_1.default.primary[80], elevation: {
32
36
  level0: 'transparent',
33
- level1: colors_1.BLUIColors.primary[100],
34
- level2: colors_1.BLUIColors.neutral[97],
35
- level3: colors_1.BLUIColors.neutral[94],
36
- level4: colors_1.BLUIColors.neutral[92],
37
- level5: colors_1.BLUIColors.neutral[90],
37
+ level1: colors_1.default.primary[100],
38
+ level2: colors_1.default.neutral[97],
39
+ level3: colors_1.default.neutral[94],
40
+ level4: colors_1.default.neutral[92],
41
+ level5: colors_1.default.neutral[90],
38
42
  },
39
43
  // Custom color variants
40
- primaryNonText: colors_1.BLUIColors.primary[50], errorNonText: colors_1.BLUIColors.error[50], disabled: (0, color_1.default)(colors_1.BLUIColors.neutral[10]).alpha(0.2), warning: colors_1.BLUIColors.warning[40], warningNonText: colors_1.BLUIColors.warning[60], onWarning: colors_1.BLUIColors.primary[100], warningContainer: colors_1.BLUIColors.warning[90], onWarningContainer: colors_1.BLUIColors.warning[30], success: colors_1.BLUIColors.success[40], successNonText: colors_1.BLUIColors.success[50], onSuccess: colors_1.BLUIColors.primary[100], successContainer: colors_1.BLUIColors.success[90], onSuccessContainer: colors_1.BLUIColors.success[30], orange: colors_1.BLUIColors.orange[40], orangeNonText: colors_1.BLUIColors.orange[50], onOrange: colors_1.BLUIColors.primary[100], orangeContainer: colors_1.BLUIColors.orange[90], onOrangeContainer: colors_1.BLUIColors.orange[30], purple: colors_1.BLUIColors.purple[40], purpleNonText: colors_1.BLUIColors.purple[50], onPurple: colors_1.BLUIColors.primary[100], purpleContainer: colors_1.BLUIColors.purple[90], onPurpleContainer: colors_1.BLUIColors.purple[30], surfaceContainerLowest: colors_1.BLUIColors.primary[100], surfaceContainerLow: colors_1.BLUIColors.neutral[97], surfaceContainer: colors_1.BLUIColors.neutral[94], surfaceContainerHigh: colors_1.BLUIColors.neutral[92], surfaceContainerHighest: colors_1.BLUIColors.neutral[90] }) });
44
+ // High-emphasis primary non-text variant, can be used on non-text elements like icons
45
+ primaryNonText: colors_1.default.primary[50],
46
+ // Attention-grabbing error color can be used on non-text elements like icons, which communicate error states
47
+ errorNonText: colors_1.default.error[50],
48
+ // variant used to render disabled elements
49
+ disabled: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.2).rgb().string(),
50
+ // warning variant fills, texts, and icons which communicate warning states
51
+ warning: colors_1.default.warning[40],
52
+ // can be used on non-text warning elements like icons
53
+ warningNonText: colors_1.default.warning[60],
54
+ // can be used on warning text and icons against warning
55
+ onWarning: colors_1.default.primary[100],
56
+ // Standout fill warning color against surface
57
+ warningContainer: colors_1.default.warning[90],
58
+ // Text and icons against warning container
59
+ onWarningContainer: colors_1.default.warning[30],
60
+ // success color variant fills, texts, and icons which communicate success states
61
+ success: colors_1.default.success[40],
62
+ // can be used on non-text success elements like icons
63
+ successNonText: colors_1.default.success[50],
64
+ // can be used on success text and icons against success
65
+ onSuccess: colors_1.default.primary[100],
66
+ // Standout fill success color against surface
67
+ successContainer: colors_1.default.success[90],
68
+ // Text and icons against success container
69
+ onSuccessContainer: colors_1.default.success[30],
70
+ // orange color variant fills, texts, and icons
71
+ orange: colors_1.default.orange[40],
72
+ // non-text orange variant can be used on non-text elements like icons
73
+ orangeNonText: colors_1.default.orange[50],
74
+ // can be used on text and icons against orange
75
+ onOrange: colors_1.default.primary[100],
76
+ // Standout fill orange color against surface
77
+ orangeContainer: colors_1.default.orange[90],
78
+ // Text and icons against orange container
79
+ onOrangeContainer: colors_1.default.orange[30],
80
+ // purple color variant fills, texts, and icons
81
+ purple: colors_1.default.purple[40],
82
+ // non-text purple variant can be used on non-text elements like icons
83
+ purpleNonText: colors_1.default.purple[50],
84
+ // can be used on text and icons against purple
85
+ onPurple: colors_1.default.primary[100],
86
+ // Standout fill purple color against surface
87
+ purpleContainer: colors_1.default.purple[90],
88
+ // Text and icons against purple container
89
+ onPurpleContainer: colors_1.default.purple[30],
90
+ // Surface container is the default role, but the others are especially helpful for creating hierarchy and nested containers
91
+ // Lowest-emphasis container color
92
+ surfaceContainerLowest: colors_1.default.primary[100],
93
+ // Low-emphasis container color
94
+ surfaceContainerLow: colors_1.default.neutral[97],
95
+ // Default container color
96
+ surfaceContainer: colors_1.default.neutral[94],
97
+ // High-emphasis container color
98
+ surfaceContainerHigh: colors_1.default.neutral[92],
99
+ // Highest-emphasis container color
100
+ surfaceContainerHighest: colors_1.default.neutral[90],
101
+ // This is alias for surface disabled, used as disabled container background
102
+ disabledContainer: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.05).rgb().string(), onDisabledContainer: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.25).rgb().string() }) });
package/dist/index.d.ts CHANGED
@@ -7,39 +7,4 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r
7
7
  **/
8
8
  export { MD3BluiLightTheme as blue } from './blueTheme';
9
9
  export { MD3BluiDarkTheme as blueDark } from './blueDarkTheme';
10
- declare global {
11
- namespace ReactNativePaper {
12
- interface ThemeColors {
13
- colors: {
14
- primaryNonText: string;
15
- errorNonText: string;
16
- disabled: string;
17
- warning: string;
18
- warningNonText: string;
19
- onWarning: string;
20
- warningContainer: string;
21
- onWarningContainer: string;
22
- success: string;
23
- successNonText: string;
24
- onSuccess: string;
25
- successContainer: string;
26
- onSuccessContainer: string;
27
- orange: string;
28
- orangeNonText: string;
29
- onOrange: string;
30
- orangeContainer: string;
31
- onOrangeContainer: string;
32
- purple: string;
33
- purpleNonText: string;
34
- onPurple: string;
35
- purpleContainer: string;
36
- onPurpleContainer: string;
37
- surfaceContainerLowest: string;
38
- surfaceContainerLow: string;
39
- surfaceContainer: string;
40
- surfaceContainerHigh: string;
41
- surfaceContainerHighest: string;
42
- };
43
- }
44
- }
45
- }
10
+ export { ExtendedTheme, useExtendedTheme } from './shared';
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.blueDark = exports.blue = void 0;
3
+ exports.useExtendedTheme = exports.blueDark = exports.blue = void 0;
4
4
  /**
5
5
  Copyright (c) 2021-present, Eaton
6
6
 
@@ -12,3 +12,5 @@ var blueTheme_1 = require("./blueTheme");
12
12
  Object.defineProperty(exports, "blue", { enumerable: true, get: function () { return blueTheme_1.MD3BluiLightTheme; } });
13
13
  var blueDarkTheme_1 = require("./blueDarkTheme");
14
14
  Object.defineProperty(exports, "blueDark", { enumerable: true, get: function () { return blueDarkTheme_1.MD3BluiDarkTheme; } });
15
+ var shared_1 = require("./shared");
16
+ Object.defineProperty(exports, "useExtendedTheme", { enumerable: true, get: function () { return shared_1.useExtendedTheme; } });
package/dist/shared.d.ts CHANGED
@@ -1,11 +1,7 @@
1
+ import { MD3Theme } from 'react-native-paper';
2
+ import { MD3Type, MD3Typescale } from 'react-native-paper/lib/typescript/types';
3
+ import { $DeepPartial } from '@callstack/react-theme-provider';
1
4
  export declare const fontConfig: {
2
- customVariant: {
3
- fontFamily: string;
4
- fontWeight: "400";
5
- letterSpacing: number;
6
- lineHeight: number;
7
- fontSize: number;
8
- };
9
5
  displaySmall: {
10
6
  fontFamily: string;
11
7
  fontWeight: "400";
@@ -104,3 +100,123 @@ export declare const fontConfig: {
104
100
  letterSpacing: number;
105
101
  };
106
102
  };
103
+ export type ExtendedTheme = Omit<MD3Theme, 'colors' | 'fonts'> & {
104
+ colors: {
105
+ primary: string;
106
+ primaryContainer: string;
107
+ secondary: string;
108
+ secondaryContainer: string;
109
+ tertiary: string;
110
+ tertiaryContainer: string;
111
+ surface: string;
112
+ surfaceVariant: string;
113
+ surfaceDisabled: string;
114
+ background: string;
115
+ error: string;
116
+ errorContainer: string;
117
+ onPrimary: string;
118
+ onPrimaryContainer: string;
119
+ onSecondary: string;
120
+ onSecondaryContainer: string;
121
+ onTertiary: string;
122
+ onTertiaryContainer: string;
123
+ onSurface: string;
124
+ onSurfaceVariant: string;
125
+ onSurfaceDisabled: string;
126
+ onError: string;
127
+ onErrorContainer: string;
128
+ onBackground: string;
129
+ outline: string;
130
+ outlineVariant: string;
131
+ inverseSurface: string;
132
+ inverseOnSurface: string;
133
+ inversePrimary: string;
134
+ shadow: string;
135
+ scrim: string;
136
+ backdrop: string;
137
+ elevation: {
138
+ level0: string;
139
+ level1: string;
140
+ level2: string;
141
+ level3: string;
142
+ level4: string;
143
+ level5: string;
144
+ };
145
+ primaryNonText: string;
146
+ errorNonText: string;
147
+ disabled: string;
148
+ warning: string;
149
+ warningNonText: string;
150
+ onWarning: string;
151
+ warningContainer: string;
152
+ onWarningContainer: string;
153
+ success: string;
154
+ successNonText: string;
155
+ onSuccess: string;
156
+ successContainer: string;
157
+ onSuccessContainer: string;
158
+ orange: string;
159
+ orangeNonText: string;
160
+ onOrange: string;
161
+ orangeContainer: string;
162
+ onOrangeContainer: string;
163
+ purple: string;
164
+ purpleNonText: string;
165
+ onPurple: string;
166
+ purpleContainer: string;
167
+ onPurpleContainer: string;
168
+ surfaceContainerLowest: string;
169
+ surfaceContainerLow: string;
170
+ surfaceContainer: string;
171
+ surfaceContainerHigh: string;
172
+ surfaceContainerHighest: string;
173
+ disabledContainer: string;
174
+ onDisabledContainer: string;
175
+ errorFilledContainer: string;
176
+ onErrorFilledContainer: string;
177
+ errorShadedContainer: string;
178
+ onErrorShadedContainer: string;
179
+ errorOutlinedContainerOutline: string;
180
+ onErrorOutlinedContainerOutline: string;
181
+ orangeFilledContainer: string;
182
+ onOrangeFilledContainer: string;
183
+ orangeShadedContainer: string;
184
+ onOrangeShadedContainer: string;
185
+ orangeOutlinedContainer: string;
186
+ onOrangeOutlinedContainer: string;
187
+ warningFilledContainer: string;
188
+ onWarningFilledContainer: string;
189
+ warningShadedContainer: string;
190
+ onWarningShadedContainer: string;
191
+ warningOutlinedContainerOutline: string;
192
+ onWarningOutlinedContainer: string;
193
+ successFilledContainer: string;
194
+ onSuccessFilledContainer: string;
195
+ successShadedContainer: string;
196
+ successShadedLabel: string;
197
+ successOutlinedContainerOutline: string;
198
+ onSuccessOutlinedContainer: string;
199
+ primaryFilledContainer: string;
200
+ onPrimaryFilledContainer: string;
201
+ primaryShadedContainer: string;
202
+ onPrimaryShadedContainer: string;
203
+ primaryOutlinedContainerOutline: string;
204
+ onPrimaryOutlinedContainer: string;
205
+ purpleFilledContainer: string;
206
+ onPurpleFilledContainer: string;
207
+ purpleShadedContainer: string;
208
+ onPurpleShadedContainer: string;
209
+ purpleOutlinedContainerOutline: string;
210
+ onPurpleOutlinedContainer: string;
211
+ neutralFilledContainer: string;
212
+ onNeutralFilledContainer: string;
213
+ neutralShadedContainer: string;
214
+ onNeutralShadedContainer: string;
215
+ neutralOutlinedContainerOutline: string;
216
+ onNeutralOutlinedContainer: string;
217
+ };
218
+ fonts: MD3Typescale & {
219
+ customVariant: MD3Type;
220
+ };
221
+ };
222
+ export declare const useExtendedTheme: (overrides?: $DeepPartial<ExtendedTheme>) => ExtendedTheme;
package/dist/shared.js CHANGED
@@ -1,19 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.fontConfig = void 0;
4
- var react_native_1 = require("react-native");
3
+ exports.useExtendedTheme = exports.fontConfig = void 0;
4
+ var react_native_paper_1 = require("react-native-paper");
5
5
  exports.fontConfig = {
6
- customVariant: {
7
- fontFamily: react_native_1.Platform.select({
8
- web: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
9
- ios: 'System',
10
- default: 'OpenSans-Regular',
11
- }),
12
- fontWeight: '400',
13
- letterSpacing: 0.5,
14
- lineHeight: 22,
15
- fontSize: 20,
16
- },
17
6
  displaySmall: {
18
7
  fontFamily: 'OpenSans-Regular',
19
8
  fontWeight: '400',
@@ -112,3 +101,7 @@ exports.fontConfig = {
112
101
  letterSpacing: 0.15,
113
102
  },
114
103
  };
104
+ var useExtendedTheme = function (overrides) {
105
+ return (0, react_native_paper_1.useTheme)(overrides);
106
+ };
107
+ exports.useExtendedTheme = useExtendedTheme;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@brightlayer-ui/react-native-themes",
3
3
  "author": "Brightlayer UI <brightlayer-ui@eaton.com>",
4
4
  "license": "BSD-3-Clause",
5
- "version": "7.0.0-alpha.0",
5
+ "version": "7.0.0-alpha.1",
6
6
  "description": "React Native themes for Brightlayer UI applications",
7
7
  "main": "./dist/index.js",
8
8
  "scripts": {
@@ -39,7 +39,7 @@
39
39
  "React Native"
40
40
  ],
41
41
  "dependencies": {
42
- "@brightlayer-ui/colors": "4.0.0-alpha.0",
42
+ "@brightlayer-ui/colors": "4.0.0",
43
43
  "color": "^4.2.3"
44
44
  },
45
45
  "peerDependencies": {