@brightlayer-ui/react-native-themes 7.0.3-alpha.0 → 7.0.3-alpha.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.
Files changed (6) hide show
  1. package/blueDarkTheme.js +119 -94
  2. package/blueTheme.js +119 -94
  3. package/index.d.ts +3 -3
  4. package/index.js +3 -3
  5. package/package.json +19 -12
  6. package/shared.js +4 -4
package/blueDarkTheme.js CHANGED
@@ -5,24 +5,46 @@ 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
- var __assign = (this && this.__assign) || function () {
9
- __assign = Object.assign || function(t) {
10
- for (var s, i = 1, n = arguments.length; i < n; i++) {
11
- s = arguments[i];
12
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
13
- t[p] = s[p];
14
- }
15
- return t;
16
- };
17
- return __assign.apply(this, arguments);
18
- };
19
8
  import { MD3DarkTheme, configureFonts } from 'react-native-paper';
20
- import { fontConfig } from './shared';
9
+ import { fontConfig } from './shared.js';
21
10
  import BLUIColors from '@brightlayer-ui/colors';
22
11
  import Color from 'color';
23
- export var MD3BluiDarkTheme = __assign(__assign({}, MD3DarkTheme), { fonts: configureFonts({ config: fontConfig }), colors: __assign(__assign({}, MD3DarkTheme.colors), {
12
+ export const MD3BluiDarkTheme = {
13
+ ...MD3DarkTheme,
14
+ fonts: configureFonts({ config: fontConfig }),
15
+ colors: {
16
+ ...MD3DarkTheme.colors,
24
17
  // React Native Paper default theme color variants
25
- primary: BLUIColors.primary[80], onPrimary: BLUIColors.primary[20], primaryContainer: BLUIColors.primary[30], onPrimaryContainer: BLUIColors.primary[90], secondary: BLUIColors.primary[80], onSecondary: BLUIColors.primary[20], secondaryContainer: BLUIColors.primary[30], onSecondaryContainer: BLUIColors.primary[90], tertiary: BLUIColors.primary[80], onTertiary: BLUIColors.primary[20], tertiaryContainer: BLUIColors.primary[30], onTertiaryContainer: BLUIColors.primary[90], error: BLUIColors.error[80], onError: BLUIColors.error[20], errorContainer: BLUIColors.error[30], onErrorContainer: BLUIColors.error[90], background: BLUIColors.neutral[6], onBackground: BLUIColors.neutral[95], surface: BLUIColors.neutral[6], onSurface: BLUIColors.neutral[95], surfaceVariant: BLUIColors.neutralVariant[30], onSurfaceVariant: BLUIColors.neutralVariant[70], outline: BLUIColors.neutralVariant[60], outlineVariant: Color(BLUIColors.neutralVariant[60]).alpha(0.25).rgb().string(), shadow: BLUIColors.primary[0], scrim: BLUIColors.primary[0], inverseSurface: BLUIColors.neutral[90], inverseOnSurface: BLUIColors.neutral[10], inversePrimary: BLUIColors.primary[40], elevation: {
18
+ primary: BLUIColors.primary[80],
19
+ onPrimary: BLUIColors.primary[20],
20
+ primaryContainer: BLUIColors.primary[30],
21
+ onPrimaryContainer: BLUIColors.primary[90],
22
+ secondary: BLUIColors.primary[80],
23
+ onSecondary: BLUIColors.primary[20],
24
+ secondaryContainer: BLUIColors.primary[30],
25
+ onSecondaryContainer: BLUIColors.primary[90],
26
+ tertiary: BLUIColors.primary[80],
27
+ onTertiary: BLUIColors.primary[20],
28
+ tertiaryContainer: BLUIColors.primary[30],
29
+ onTertiaryContainer: BLUIColors.primary[90],
30
+ error: BLUIColors.error[80],
31
+ onError: BLUIColors.error[20],
32
+ errorContainer: BLUIColors.error[30],
33
+ onErrorContainer: BLUIColors.error[90],
34
+ background: BLUIColors.neutral[6],
35
+ onBackground: BLUIColors.neutral[95],
36
+ surface: BLUIColors.neutral[6],
37
+ onSurface: BLUIColors.neutral[95],
38
+ surfaceVariant: BLUIColors.neutralVariant[30],
39
+ onSurfaceVariant: BLUIColors.neutralVariant[70],
40
+ outline: BLUIColors.neutralVariant[60],
41
+ outlineVariant: Color(BLUIColors.neutralVariant[60]).alpha(0.25).rgb().string(),
42
+ shadow: BLUIColors.primary[0],
43
+ scrim: BLUIColors.primary[0],
44
+ inverseSurface: BLUIColors.neutral[90],
45
+ inverseOnSurface: BLUIColors.neutral[10],
46
+ inversePrimary: BLUIColors.primary[40],
47
+ elevation: {
26
48
  level0: 'transparent',
27
49
  // level1 is the same as surfaceContainerLowest in design files
28
50
  level1: BLUIColors.neutral[4],
@@ -34,164 +56,167 @@ export var MD3BluiDarkTheme = __assign(__assign({}, MD3DarkTheme), { fonts: conf
34
56
  level4: BLUIColors.neutral[17],
35
57
  // level5 is the same as surfaceContainerHighest in design files
36
58
  level5: BLUIColors.neutral[20],
37
- },
59
+ },
38
60
  // surfaceDisabled is the same as disabledContainer in design files
39
- surfaceDisabled: Color(BLUIColors.neutral[95]).alpha(0.1).rgb().string(),
61
+ surfaceDisabled: Color(BLUIColors.neutral[95]).alpha(0.1).rgb().string(),
40
62
  // onSurfaceDisabled is the same as onDisabledContainer in design files
41
- onSurfaceDisabled: Color(BLUIColors.neutral[95]).alpha(0.15).rgb().string(), backdrop: Color(BLUIColors.primary[0]).alpha(0.32).rgb().string(),
63
+ onSurfaceDisabled: Color(BLUIColors.neutral[95]).alpha(0.15).rgb().string(),
64
+ backdrop: Color(BLUIColors.primary[0]).alpha(0.32).rgb().string(),
42
65
  // Custom color variants
43
66
  // High-emphasis primary non-text variant, can be used on non-text elements like icons
44
- primaryNonText: BLUIColors.primary[60],
67
+ primaryNonText: BLUIColors.primary[60],
45
68
  // Attention-grabbing error color can be used on non-text elements like icons, which communicate error states
46
- errorNonText: BLUIColors.error[60],
69
+ errorNonText: BLUIColors.error[60],
47
70
  // variant used to render disabled elements
48
- disabled: Color(BLUIColors.neutral[95]).alpha(0.25).rgb().string(),
71
+ disabled: Color(BLUIColors.neutral[95]).alpha(0.25).rgb().string(),
49
72
  // warning variant fills, texts, and icons which communicate warning states
50
- warning: BLUIColors.warning[90],
73
+ warning: BLUIColors.warning[90],
51
74
  // can be used on non-text warning elements like icons
52
- warningNonText: BLUIColors.warning[80],
75
+ warningNonText: BLUIColors.warning[80],
53
76
  // can be used on warning text and icons against warning
54
- onWarning: BLUIColors.warning[20],
77
+ onWarning: BLUIColors.warning[20],
55
78
  // Standout fill warning color against surface
56
- warningContainer: BLUIColors.warning[30],
79
+ warningContainer: BLUIColors.warning[30],
57
80
  // Text and icons against warning container
58
- onWarningContainer: BLUIColors.warning[90],
81
+ onWarningContainer: BLUIColors.warning[90],
59
82
  // success color variant fills, texts, and icons which communicate success states
60
- success: BLUIColors.success[80],
83
+ success: BLUIColors.success[80],
61
84
  // can be used on non-text success elements like icons
62
- successNonText: BLUIColors.success[70],
85
+ successNonText: BLUIColors.success[70],
63
86
  // can be used on success text and icons against success
64
- onSuccess: BLUIColors.success[20],
87
+ onSuccess: BLUIColors.success[20],
65
88
  // Standout fill success color against surface
66
- successContainer: BLUIColors.success[30],
89
+ successContainer: BLUIColors.success[30],
67
90
  // Text and icons against success container
68
- onSuccessContainer: BLUIColors.success[90],
91
+ onSuccessContainer: BLUIColors.success[90],
69
92
  // orange color variant fills, texts, and icons
70
- orange: BLUIColors.orange[80],
93
+ orange: BLUIColors.orange[80],
71
94
  // non-text orange variant can be used on non-text elements like icons
72
- orangeNonText: BLUIColors.orange[70],
95
+ orangeNonText: BLUIColors.orange[70],
73
96
  // can be used on text and icons against orange
74
- onOrange: BLUIColors.orange[20],
97
+ onOrange: BLUIColors.orange[20],
75
98
  // Standout fill orange color against surface
76
- orangeContainer: BLUIColors.orange[30],
99
+ orangeContainer: BLUIColors.orange[30],
77
100
  // Text and icons against orange container
78
- onOrangeContainer: BLUIColors.orange[90],
101
+ onOrangeContainer: BLUIColors.orange[90],
79
102
  // purple color variant fills, texts, and icons
80
- purple: BLUIColors.purple[80],
103
+ purple: BLUIColors.purple[80],
81
104
  // non-text purple variant can be used on non-text elements like icons
82
- purpleNonText: BLUIColors.purple[60],
105
+ purpleNonText: BLUIColors.purple[60],
83
106
  // can be used on text and icons against purple
84
- onPurple: BLUIColors.purple[20],
107
+ onPurple: BLUIColors.purple[20],
85
108
  // Standout fill purple color against surface
86
- purpleContainer: BLUIColors.purple[30],
109
+ purpleContainer: BLUIColors.purple[30],
87
110
  // Text and icons against purple container
88
- onPurpleContainer: BLUIColors.purple[90],
111
+ onPurpleContainer: BLUIColors.purple[90],
89
112
  // Surface container is the default role, but the others are especially helpful for creating hierarchy and nested containers
90
113
  // Lowest-emphasis container color
91
- surfaceContainerLowest: BLUIColors.neutral[4],
114
+ surfaceContainerLowest: BLUIColors.neutral[4],
92
115
  // Low-emphasis container color
93
- surfaceContainerLow: BLUIColors.neutral[10],
116
+ surfaceContainerLow: BLUIColors.neutral[10],
94
117
  // Default container color
95
- surfaceContainer: BLUIColors.neutral[12],
118
+ surfaceContainer: BLUIColors.neutral[12],
96
119
  // High-emphasis container color
97
- surfaceContainerHigh: BLUIColors.neutral[17],
120
+ surfaceContainerHigh: BLUIColors.neutral[17],
98
121
  // Highest-emphasis container color
99
- surfaceContainerHighest: BLUIColors.neutral[20],
122
+ surfaceContainerHighest: BLUIColors.neutral[20],
100
123
  // This is alias for surface disabled, used as disabled container background
101
- disabledContainer: Color(BLUIColors.neutral[95]).alpha(0.1).rgb().string(),
124
+ disabledContainer: Color(BLUIColors.neutral[95]).alpha(0.1).rgb().string(),
102
125
  // Text and icons against disable container
103
- onDisabledContainer: Color(BLUIColors.neutral[95]).alpha(0.15).rgb().string(),
126
+ onDisabledContainer: Color(BLUIColors.neutral[95]).alpha(0.15).rgb().string(),
104
127
  // Can be used on slider and range selector track
105
- sliderTrack: BLUIColors.neutral[30],
128
+ sliderTrack: BLUIColors.neutral[30],
106
129
  // Disabled version of slider track color variant
107
- sliderTrackDisabled: Color(BLUIColors.neutral[30]).alpha(0.5).rgb().string(),
130
+ sliderTrackDisabled: Color(BLUIColors.neutral[30]).alpha(0.5).rgb().string(),
108
131
  // Attention-grabbing color against error filled surface
109
- errorFilledContainer: BLUIColors.error[40],
132
+ errorFilledContainer: BLUIColors.error[40],
110
133
  // Text and icons against error filled container
111
- onErrorFilledContainer: BLUIColors.error[100],
134
+ onErrorFilledContainer: BLUIColors.error[100],
112
135
  // Attention-grabbing color against error shaded surface
113
- errorShadedContainer: Color(BLUIColors.error[40]).alpha(0.3).rgb().string(),
136
+ errorShadedContainer: Color(BLUIColors.error[40]).alpha(0.3).rgb().string(),
114
137
  // Text and icons against error shaded container
115
- onErrorShadedContainer: BLUIColors.error[80],
138
+ onErrorShadedContainer: BLUIColors.error[80],
116
139
  // Attention-grabbing color against error outlined container
117
- errorOutlinedContainerOutline: BLUIColors.error[60],
140
+ errorOutlinedContainerOutline: BLUIColors.error[60],
118
141
  // Text and icons against error outlined container
119
- onErrorOutlinedContainerOutline: BLUIColors.error[80],
142
+ onErrorOutlinedContainerOutline: BLUIColors.error[80],
120
143
  // Orange color against orange filled surface
121
- orangeFilledContainer: BLUIColors.orange[70],
144
+ orangeFilledContainer: BLUIColors.orange[70],
122
145
  // Text and icons against orange filled container
123
- onOrangeFilledContainer: BLUIColors.orange[20],
146
+ onOrangeFilledContainer: BLUIColors.orange[20],
124
147
  // Orange color against orange shaded surface
125
- orangeShadedContainer: Color(BLUIColors.orange[70]).alpha(0.15).rgb().string(),
148
+ orangeShadedContainer: Color(BLUIColors.orange[70]).alpha(0.15).rgb().string(),
126
149
  // Text and icons against orange shaded container
127
- onOrangeShadedContainer: BLUIColors.orange[80],
150
+ onOrangeShadedContainer: BLUIColors.orange[80],
128
151
  // Orange color against orange outlined surface
129
- orangeOutlinedContainer: BLUIColors.orange[70],
152
+ orangeOutlinedContainer: BLUIColors.orange[70],
130
153
  // Text and icons against orange outlined container
131
- onOrangeOutlinedContainer: BLUIColors.orange[80],
154
+ onOrangeOutlinedContainer: BLUIColors.orange[80],
132
155
  // Warning color against warning filled surface
133
- warningFilledContainer: BLUIColors.warning[80],
156
+ warningFilledContainer: BLUIColors.warning[80],
134
157
  // Text and icons against warning filled container
135
- onWarningFilledContainer: BLUIColors.warning[30],
158
+ onWarningFilledContainer: BLUIColors.warning[30],
136
159
  // Warning color against warning shaded surface
137
- warningShadedContainer: Color(BLUIColors.warning[90]).alpha(0.1).rgb().string(),
160
+ warningShadedContainer: Color(BLUIColors.warning[90]).alpha(0.1).rgb().string(),
138
161
  // Text and icons against warning shaded container
139
- onWarningShadedContainer: BLUIColors.warning[90],
162
+ onWarningShadedContainer: BLUIColors.warning[90],
140
163
  // Warning color against warning outlined container surface
141
- warningOutlinedContainerOutline: BLUIColors.warning[90],
164
+ warningOutlinedContainerOutline: BLUIColors.warning[90],
142
165
  // Text and icons against warning outlined container surface
143
- onWarningOutlinedContainer: BLUIColors.warning[90],
166
+ onWarningOutlinedContainer: BLUIColors.warning[90],
144
167
  // Attention-grabbing color against success filled container
145
- successFilledContainer: BLUIColors.success[50],
168
+ successFilledContainer: BLUIColors.success[50],
146
169
  // Text and icons against success filled container
147
- onSuccessFilledContainer: BLUIColors.success[100],
170
+ onSuccessFilledContainer: BLUIColors.success[100],
148
171
  // Attention-grabbing color against success shaded surface
149
- successShadedContainer: Color(BLUIColors.success[40]).alpha(0.3).rgb().string(),
172
+ successShadedContainer: Color(BLUIColors.success[40]).alpha(0.3).rgb().string(),
150
173
  // Attention-grabbing label color against success shaded surface
151
- successShadedLabel: BLUIColors.success[90],
174
+ successShadedLabel: BLUIColors.success[90],
152
175
  // Attention-grabbing color against success container
153
- successOutlinedContainerOutline: BLUIColors.success[70],
176
+ successOutlinedContainerOutline: BLUIColors.success[70],
154
177
  // Text and icons against success outlined container
155
- onSuccessOutlinedContainer: BLUIColors.success[80],
178
+ onSuccessOutlinedContainer: BLUIColors.success[80],
156
179
  // Primary color against primary filled surface
157
- primaryFilledContainer: BLUIColors.primary[50],
180
+ primaryFilledContainer: BLUIColors.primary[50],
158
181
  // Text and icons against primary filled container
159
- onPrimaryFilledContainer: BLUIColors.primary[100],
182
+ onPrimaryFilledContainer: BLUIColors.primary[100],
160
183
  // Primary color against primary shaded surface
161
- primaryShadedContainer: Color(BLUIColors.primary[40]).alpha(0.4).rgb().string(),
184
+ primaryShadedContainer: Color(BLUIColors.primary[40]).alpha(0.4).rgb().string(),
162
185
  // Text and icons against primary shaded container
163
- onPrimaryShadedContainer: BLUIColors.primary[80],
186
+ onPrimaryShadedContainer: BLUIColors.primary[80],
164
187
  // Primary color against primary outlined container
165
- primaryOutlinedContainerOutline: BLUIColors.primary[60],
188
+ primaryOutlinedContainerOutline: BLUIColors.primary[60],
166
189
  // Text and icons against primary outlined container
167
- onPrimaryOutlinedContainer: BLUIColors.primary[70],
190
+ onPrimaryOutlinedContainer: BLUIColors.primary[70],
168
191
  // Purple color against purple filled surface
169
- purpleFilledContainer: BLUIColors.purple[50],
192
+ purpleFilledContainer: BLUIColors.purple[50],
170
193
  // Text and icons against purple filled container
171
- onPurpleFilledContainer: BLUIColors.purple[100],
194
+ onPurpleFilledContainer: BLUIColors.purple[100],
172
195
  // Purple color against purple shaded surface
173
- purpleShadedContainer: Color(BLUIColors.purple[40]).alpha(0.4).rgb().string(),
196
+ purpleShadedContainer: Color(BLUIColors.purple[40]).alpha(0.4).rgb().string(),
174
197
  // Text and icons against purple shaded container
175
- onPurpleShadedContainer: BLUIColors.purple[80],
198
+ onPurpleShadedContainer: BLUIColors.purple[80],
176
199
  // Purple color against purple outlined container
177
- purpleOutlinedContainerOutline: BLUIColors.purple[50],
200
+ purpleOutlinedContainerOutline: BLUIColors.purple[50],
178
201
  // Text and icons against purple outlined container
179
- onPurpleOutlinedContainer: BLUIColors.purple[70],
202
+ onPurpleOutlinedContainer: BLUIColors.purple[70],
180
203
  // Neutral color against neutral filled surface
181
- neutralFilledContainer: BLUIColors.neutral[50],
204
+ neutralFilledContainer: BLUIColors.neutral[50],
182
205
  // Text and icons against neutral filled container
183
- onNeutralFilledContainer: BLUIColors.neutral[100],
206
+ onNeutralFilledContainer: BLUIColors.neutral[100],
184
207
  // Neutral color against neutral shaded surface
185
- neutralShadedContainer: Color(BLUIColors.neutral[50]).alpha(0.4).rgb().string(),
208
+ neutralShadedContainer: Color(BLUIColors.neutral[50]).alpha(0.4).rgb().string(),
186
209
  // Text and icons against neutral shaded container
187
- onNeutralShadedContainer: BLUIColors.neutral[80],
210
+ onNeutralShadedContainer: BLUIColors.neutral[80],
188
211
  // Neutral color against neutral outlined container
189
- neutralOutlinedContainerOutline: BLUIColors.neutralVariant[60],
212
+ neutralOutlinedContainerOutline: BLUIColors.neutralVariant[60],
190
213
  // Text and icons against Neutral outlined container
191
- onNeutralOutlinedContainer: BLUIColors.neutralVariant[70],
214
+ onNeutralOutlinedContainer: BLUIColors.neutralVariant[70],
192
215
  // Standout fill text field color against surface
193
- textFieldContainer: Color(BLUIColors.neutral[80]).alpha(0.2).rgb().string(),
216
+ textFieldContainer: Color(BLUIColors.neutral[80]).alpha(0.2).rgb().string(),
194
217
  // Progress bar track on status color against filled surface
195
- progressBarTrackOnStatusFilledContainer: Color(BLUIColors.primary[0]).alpha(0.25).rgb().string(),
218
+ progressBarTrackOnStatusFilledContainer: Color(BLUIColors.primary[0]).alpha(0.25).rgb().string(),
196
219
  // Text outline color variant
197
- mapTextOutline: Color(BLUIColors.primary[0]).alpha(0.7).rgb().string() }) });
220
+ mapTextOutline: Color(BLUIColors.primary[0]).alpha(0.7).rgb().string(),
221
+ },
222
+ };
package/blueTheme.js CHANGED
@@ -5,24 +5,46 @@ 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
- var __assign = (this && this.__assign) || function () {
9
- __assign = Object.assign || function(t) {
10
- for (var s, i = 1, n = arguments.length; i < n; i++) {
11
- s = arguments[i];
12
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
13
- t[p] = s[p];
14
- }
15
- return t;
16
- };
17
- return __assign.apply(this, arguments);
18
- };
19
8
  import { MD3LightTheme, configureFonts } from 'react-native-paper';
20
9
  import BLUIColors from '@brightlayer-ui/colors';
21
- import { fontConfig } from './shared';
10
+ import { fontConfig } from './shared.js';
22
11
  import Color from 'color';
23
- export var MD3BluiLightTheme = __assign(__assign({}, MD3LightTheme), { fonts: configureFonts({ config: fontConfig }), colors: __assign(__assign({}, MD3LightTheme.colors), {
12
+ export const MD3BluiLightTheme = {
13
+ ...MD3LightTheme,
14
+ fonts: configureFonts({ config: fontConfig }),
15
+ colors: {
16
+ ...MD3LightTheme.colors,
24
17
  // React Native Paper default theme color variants
25
- primary: BLUIColors.primary[40], onPrimary: BLUIColors.primary[100], primaryContainer: BLUIColors.primary[80], onPrimaryContainer: BLUIColors.primary[30], secondary: BLUIColors.primary[40], onSecondary: BLUIColors.primary[100], secondaryContainer: BLUIColors.primary[80], onSecondaryContainer: BLUIColors.primary[30], tertiary: BLUIColors.primary[40], onTertiary: BLUIColors.primary[100], tertiaryContainer: BLUIColors.primary[80], onTertiaryContainer: BLUIColors.primary[30], error: BLUIColors.error[40], onError: BLUIColors.primary[100], errorContainer: BLUIColors.error[90], onErrorContainer: BLUIColors.error[30], background: BLUIColors.neutral[98], onBackground: BLUIColors.neutral[10], surface: BLUIColors.neutral[98], onSurface: BLUIColors.neutral[10], surfaceVariant: BLUIColors.neutralVariant[90], onSurfaceVariant: BLUIColors.neutralVariant[30], outline: BLUIColors.neutralVariant[50], outlineVariant: Color(BLUIColors.neutralVariant[50]).alpha(0.25).rgb().string(), shadow: BLUIColors.primary[0], scrim: BLUIColors.primary[0], inverseSurface: BLUIColors.neutral[20], inverseOnSurface: BLUIColors.neutral[95], inversePrimary: BLUIColors.primary[80], elevation: {
18
+ primary: BLUIColors.primary[40],
19
+ onPrimary: BLUIColors.primary[100],
20
+ primaryContainer: BLUIColors.primary[80],
21
+ onPrimaryContainer: BLUIColors.primary[30],
22
+ secondary: BLUIColors.primary[40],
23
+ onSecondary: BLUIColors.primary[100],
24
+ secondaryContainer: BLUIColors.primary[80],
25
+ onSecondaryContainer: BLUIColors.primary[30],
26
+ tertiary: BLUIColors.primary[40],
27
+ onTertiary: BLUIColors.primary[100],
28
+ tertiaryContainer: BLUIColors.primary[80],
29
+ onTertiaryContainer: BLUIColors.primary[30],
30
+ error: BLUIColors.error[40],
31
+ onError: BLUIColors.primary[100],
32
+ errorContainer: BLUIColors.error[90],
33
+ onErrorContainer: BLUIColors.error[30],
34
+ background: BLUIColors.neutral[98],
35
+ onBackground: BLUIColors.neutral[10],
36
+ surface: BLUIColors.neutral[98],
37
+ onSurface: BLUIColors.neutral[10],
38
+ surfaceVariant: BLUIColors.neutralVariant[90],
39
+ onSurfaceVariant: BLUIColors.neutralVariant[30],
40
+ outline: BLUIColors.neutralVariant[50],
41
+ outlineVariant: Color(BLUIColors.neutralVariant[50]).alpha(0.25).rgb().string(),
42
+ shadow: BLUIColors.primary[0],
43
+ scrim: BLUIColors.primary[0],
44
+ inverseSurface: BLUIColors.neutral[20],
45
+ inverseOnSurface: BLUIColors.neutral[95],
46
+ inversePrimary: BLUIColors.primary[80],
47
+ elevation: {
26
48
  level0: 'transparent',
27
49
  // level1 is the same as surfaceContainerLowest in design files
28
50
  level1: BLUIColors.primary[100],
@@ -34,164 +56,167 @@ export var MD3BluiLightTheme = __assign(__assign({}, MD3LightTheme), { fonts: co
34
56
  level4: BLUIColors.neutral[92],
35
57
  // level5 is the same as surfaceContainerHighest in design files
36
58
  level5: BLUIColors.neutral[90],
37
- },
59
+ },
38
60
  // surfaceDisabled is the same as disabledContainer in design files
39
- surfaceDisabled: Color(BLUIColors.neutral[10]).alpha(0.05).rgb().string(),
61
+ surfaceDisabled: Color(BLUIColors.neutral[10]).alpha(0.05).rgb().string(),
40
62
  // onSurfaceDisabled is the same as onDisabledContainer in design files
41
- onSurfaceDisabled: Color(BLUIColors.neutral[10]).alpha(0.25).rgb().string(), backdrop: Color(BLUIColors.primary[0]).alpha(0.32).rgb().string(),
63
+ onSurfaceDisabled: Color(BLUIColors.neutral[10]).alpha(0.25).rgb().string(),
64
+ backdrop: Color(BLUIColors.primary[0]).alpha(0.32).rgb().string(),
42
65
  // Custom color variants
43
66
  // High-emphasis primary non-text variant, can be used on non-text elements like icons
44
- primaryNonText: BLUIColors.primary[50],
67
+ primaryNonText: BLUIColors.primary[50],
45
68
  // Attention-grabbing error color can be used on non-text elements like icons, which communicate error states
46
- errorNonText: BLUIColors.error[50],
69
+ errorNonText: BLUIColors.error[50],
47
70
  // variant used to render disabled elements
48
- disabled: Color(BLUIColors.neutral[10]).alpha(0.2).rgb().string(),
71
+ disabled: Color(BLUIColors.neutral[10]).alpha(0.2).rgb().string(),
49
72
  // warning variant fills, texts, and icons which communicate warning states
50
- warning: BLUIColors.warning[40],
73
+ warning: BLUIColors.warning[40],
51
74
  // can be used on non-text warning elements like icons
52
- warningNonText: BLUIColors.warning[60],
75
+ warningNonText: BLUIColors.warning[60],
53
76
  // can be used on warning text and icons against warning
54
- onWarning: BLUIColors.primary[100],
77
+ onWarning: BLUIColors.primary[100],
55
78
  // Standout fill warning color against surface
56
- warningContainer: BLUIColors.warning[90],
79
+ warningContainer: BLUIColors.warning[90],
57
80
  // Text and icons against warning container
58
- onWarningContainer: BLUIColors.warning[30],
81
+ onWarningContainer: BLUIColors.warning[30],
59
82
  // success color variant fills, texts, and icons which communicate success states
60
- success: BLUIColors.success[40],
83
+ success: BLUIColors.success[40],
61
84
  // can be used on non-text success elements like icons
62
- successNonText: BLUIColors.success[50],
85
+ successNonText: BLUIColors.success[50],
63
86
  // can be used on success text and icons against success
64
- onSuccess: BLUIColors.primary[100],
87
+ onSuccess: BLUIColors.primary[100],
65
88
  // Standout fill success color against surface
66
- successContainer: BLUIColors.success[90],
89
+ successContainer: BLUIColors.success[90],
67
90
  // Text and icons against success container
68
- onSuccessContainer: BLUIColors.success[30],
91
+ onSuccessContainer: BLUIColors.success[30],
69
92
  // orange color variant fills, texts, and icons
70
- orange: BLUIColors.orange[40],
93
+ orange: BLUIColors.orange[40],
71
94
  // non-text orange variant can be used on non-text elements like icons
72
- orangeNonText: BLUIColors.orange[50],
95
+ orangeNonText: BLUIColors.orange[50],
73
96
  // can be used on text and icons against orange
74
- onOrange: BLUIColors.primary[100],
97
+ onOrange: BLUIColors.primary[100],
75
98
  // Standout fill orange color against surface
76
- orangeContainer: BLUIColors.orange[90],
99
+ orangeContainer: BLUIColors.orange[90],
77
100
  // Text and icons against orange container
78
- onOrangeContainer: BLUIColors.orange[30],
101
+ onOrangeContainer: BLUIColors.orange[30],
79
102
  // purple color variant fills, texts, and icons
80
- purple: BLUIColors.purple[40],
103
+ purple: BLUIColors.purple[40],
81
104
  // non-text purple variant can be used on non-text elements like icons
82
- purpleNonText: BLUIColors.purple[50],
105
+ purpleNonText: BLUIColors.purple[50],
83
106
  // can be used on text and icons against purple
84
- onPurple: BLUIColors.primary[100],
107
+ onPurple: BLUIColors.primary[100],
85
108
  // Standout fill purple color against surface
86
- purpleContainer: BLUIColors.purple[90],
109
+ purpleContainer: BLUIColors.purple[90],
87
110
  // Text and icons against purple container
88
- onPurpleContainer: BLUIColors.purple[30],
111
+ onPurpleContainer: BLUIColors.purple[30],
89
112
  // Surface container is the default role, but the others are especially helpful for creating hierarchy and nested containers
90
113
  // Lowest-emphasis container color
91
- surfaceContainerLowest: BLUIColors.primary[100],
114
+ surfaceContainerLowest: BLUIColors.primary[100],
92
115
  // Low-emphasis container color
93
- surfaceContainerLow: BLUIColors.neutral[97],
116
+ surfaceContainerLow: BLUIColors.neutral[97],
94
117
  // Default container color
95
- surfaceContainer: BLUIColors.neutral[94],
118
+ surfaceContainer: BLUIColors.neutral[94],
96
119
  // High-emphasis container color
97
- surfaceContainerHigh: BLUIColors.neutral[92],
120
+ surfaceContainerHigh: BLUIColors.neutral[92],
98
121
  // Highest-emphasis container color
99
- surfaceContainerHighest: BLUIColors.neutral[90],
122
+ surfaceContainerHighest: BLUIColors.neutral[90],
100
123
  // This is alias for surface disabled, used as disabled container background
101
- disabledContainer: Color(BLUIColors.neutral[10]).alpha(0.05).rgb().string(),
124
+ disabledContainer: Color(BLUIColors.neutral[10]).alpha(0.05).rgb().string(),
102
125
  // Text and icons against disable container
103
- onDisabledContainer: Color(BLUIColors.neutral[10]).alpha(0.25).rgb().string(),
126
+ onDisabledContainer: Color(BLUIColors.neutral[10]).alpha(0.25).rgb().string(),
104
127
  // Can be used on slider and range selector track
105
- sliderTrack: BLUIColors.neutral[80],
128
+ sliderTrack: BLUIColors.neutral[80],
106
129
  // Disabled version of slider track color variant
107
- sliderTrackDisabled: Color(BLUIColors.neutral[80]).alpha(0.3).rgb().string(),
130
+ sliderTrackDisabled: Color(BLUIColors.neutral[80]).alpha(0.3).rgb().string(),
108
131
  // Attention-grabbing color against error filled surface
109
- errorFilledContainer: BLUIColors.error[40],
132
+ errorFilledContainer: BLUIColors.error[40],
110
133
  // Text and icons against error filled container
111
- onErrorFilledContainer: BLUIColors.error[100],
134
+ onErrorFilledContainer: BLUIColors.error[100],
112
135
  // Attention-grabbing color against error shaded surface
113
- errorShadedContainer: Color(BLUIColors.error[40]).alpha(0.15).rgb().string(),
136
+ errorShadedContainer: Color(BLUIColors.error[40]).alpha(0.15).rgb().string(),
114
137
  // Text and icons against error shaded container
115
- onErrorShadedContainer: BLUIColors.error[30],
138
+ onErrorShadedContainer: BLUIColors.error[30],
116
139
  // Attention-grabbing color against error outlined container
117
- errorOutlinedContainerOutline: BLUIColors.error[40],
140
+ errorOutlinedContainerOutline: BLUIColors.error[40],
118
141
  // Text and icons against error outlined container
119
- onErrorOutlinedContainer: BLUIColors.error[40],
142
+ onErrorOutlinedContainer: BLUIColors.error[40],
120
143
  // Orange color against orange filled surface
121
- orangeFilledContainer: BLUIColors.orange[70],
144
+ orangeFilledContainer: BLUIColors.orange[70],
122
145
  // Text and icons against orange filled container
123
- onOrangeFilledContainer: BLUIColors.orange[20],
146
+ onOrangeFilledContainer: BLUIColors.orange[20],
124
147
  // Orange color against orange shaded surface
125
- orangeShadedContainer: Color(BLUIColors.orange[70]).alpha(0.2).rgb().string(),
148
+ orangeShadedContainer: Color(BLUIColors.orange[70]).alpha(0.2).rgb().string(),
126
149
  // Text and icons against orange shaded container
127
- onOrangeShadedContainer: BLUIColors.orange[30],
150
+ onOrangeShadedContainer: BLUIColors.orange[30],
128
151
  // Orange color against orange outlined surface
129
- orangeOutlinedContainer: BLUIColors.orange[70],
152
+ orangeOutlinedContainer: BLUIColors.orange[70],
130
153
  // Text and icons against orange outlined container
131
- onOrangeOutlinedContainer: BLUIColors.orange[40],
154
+ onOrangeOutlinedContainer: BLUIColors.orange[40],
132
155
  // Warning color against warning filled surface
133
- warningFilledContainer: BLUIColors.warning[90],
156
+ warningFilledContainer: BLUIColors.warning[90],
134
157
  // Text and icons against warning filled container
135
- onWarningFilledContainer: BLUIColors.warning[30],
158
+ onWarningFilledContainer: BLUIColors.warning[30],
136
159
  // Warning color against warning shaded surface
137
- warningShadedContainer: Color(BLUIColors.warning[90]).alpha(0.5).rgb().string(),
160
+ warningShadedContainer: Color(BLUIColors.warning[90]).alpha(0.5).rgb().string(),
138
161
  // Text and icons against warning shaded container
139
- onWarningShadedContainer: BLUIColors.warning[30],
162
+ onWarningShadedContainer: BLUIColors.warning[30],
140
163
  // Warning color against warning outlined container
141
- warningOutlinedContainerOutline: BLUIColors.warning[80],
164
+ warningOutlinedContainerOutline: BLUIColors.warning[80],
142
165
  // Text and icons against warning outlined container
143
- onWarningOutlinedContainer: BLUIColors.warning[40],
166
+ onWarningOutlinedContainer: BLUIColors.warning[40],
144
167
  // Attention-grabbing color against success filled container
145
- successFilledContainer: BLUIColors.success[50],
168
+ successFilledContainer: BLUIColors.success[50],
146
169
  // Text and icons against success filled container
147
- onSuccessFilledContainer: BLUIColors.success[100],
170
+ onSuccessFilledContainer: BLUIColors.success[100],
148
171
  // Attention-grabbing color against success shaded surface
149
- successShadedContainer: Color(BLUIColors.success[40]).alpha(0.15).rgb().string(),
172
+ successShadedContainer: Color(BLUIColors.success[40]).alpha(0.15).rgb().string(),
150
173
  // Attention-grabbing label color against success shaded surface
151
- successShadedLabel: BLUIColors.success[30],
174
+ successShadedLabel: BLUIColors.success[30],
152
175
  // Attention-grabbing color against success container
153
- successOutlinedContainerOutline: BLUIColors.success[50],
176
+ successOutlinedContainerOutline: BLUIColors.success[50],
154
177
  // Text and icons against success outlined container
155
- onSuccessOutlinedContainer: BLUIColors.success[40],
178
+ onSuccessOutlinedContainer: BLUIColors.success[40],
156
179
  // Primary color against primary filled surface
157
- primaryFilledContainer: BLUIColors.primary[50],
180
+ primaryFilledContainer: BLUIColors.primary[50],
158
181
  // Text and icons against primary filled container
159
- onPrimaryFilledContainer: BLUIColors.primary[100],
182
+ onPrimaryFilledContainer: BLUIColors.primary[100],
160
183
  // Primary color against primary shaded surface
161
- primaryShadedContainer: Color(BLUIColors.primary[40]).alpha(0.15).rgb().string(),
184
+ primaryShadedContainer: Color(BLUIColors.primary[40]).alpha(0.15).rgb().string(),
162
185
  // Text and icons against primary shaded container
163
- onPrimaryShadedContainer: BLUIColors.primary[30],
186
+ onPrimaryShadedContainer: BLUIColors.primary[30],
164
187
  // Primary color against primary outlined container
165
- primaryOutlinedContainerOutline: BLUIColors.primary[50],
188
+ primaryOutlinedContainerOutline: BLUIColors.primary[50],
166
189
  // Text and icons against primary outlined container
167
- onPrimaryOutlinedContainer: BLUIColors.primary[40],
190
+ onPrimaryOutlinedContainer: BLUIColors.primary[40],
168
191
  // Purple color against purple filled surface
169
- purpleFilledContainer: BLUIColors.purple[50],
192
+ purpleFilledContainer: BLUIColors.purple[50],
170
193
  // Text and icons against purple filled container
171
- onPurpleFilledContainer: BLUIColors.purple[100],
194
+ onPurpleFilledContainer: BLUIColors.purple[100],
172
195
  // Purple color against purple shaded surface
173
- purpleShadedContainer: Color(BLUIColors.purple[40]).alpha(0.15).rgb().string(),
196
+ purpleShadedContainer: Color(BLUIColors.purple[40]).alpha(0.15).rgb().string(),
174
197
  // Text and icons against purple shaded container
175
- onPurpleShadedContainer: BLUIColors.purple[30],
198
+ onPurpleShadedContainer: BLUIColors.purple[30],
176
199
  // Purple color against purple outlined container
177
- purpleOutlinedContainerOutline: BLUIColors.purple[50],
200
+ purpleOutlinedContainerOutline: BLUIColors.purple[50],
178
201
  // Text and icons against purple outlined container
179
- onPurpleOutlinedContainer: BLUIColors.purple[40],
202
+ onPurpleOutlinedContainer: BLUIColors.purple[40],
180
203
  // Neutral color against neutral filled surface
181
- neutralFilledContainer: BLUIColors.neutral[50],
204
+ neutralFilledContainer: BLUIColors.neutral[50],
182
205
  // Text and icons against neutral filled container
183
- onNeutralFilledContainer: BLUIColors.neutral[100],
206
+ onNeutralFilledContainer: BLUIColors.neutral[100],
184
207
  // Neutral color against neutral shaded surface
185
- neutralShadedContainer: Color(BLUIColors.neutral[50]).alpha(0.2).rgb().string(),
208
+ neutralShadedContainer: Color(BLUIColors.neutral[50]).alpha(0.2).rgb().string(),
186
209
  // Text and icons against neutral shaded container
187
- onNeutralShadedContainer: BLUIColors.neutral[30],
210
+ onNeutralShadedContainer: BLUIColors.neutral[30],
188
211
  // Neutral color against neutral outlined container
189
- neutralOutlinedContainerOutline: BLUIColors.neutralVariant[50],
212
+ neutralOutlinedContainerOutline: BLUIColors.neutralVariant[50],
190
213
  // Text and icons against Neutral outlined container
191
- onNeutralOutlinedContainer: BLUIColors.neutralVariant[30],
214
+ onNeutralOutlinedContainer: BLUIColors.neutralVariant[30],
192
215
  // Standout fill text field color against surface
193
- textFieldContainer: Color(BLUIColors.neutral[80]).alpha(0.4).rgb().string(),
216
+ textFieldContainer: Color(BLUIColors.neutral[80]).alpha(0.4).rgb().string(),
194
217
  // Progress bar track on status color against filled surface
195
- progressBarTrackOnStatusFilledContainer: Color(BLUIColors.primary[0]).alpha(0.25).rgb().string(),
218
+ progressBarTrackOnStatusFilledContainer: Color(BLUIColors.primary[0]).alpha(0.25).rgb().string(),
196
219
  // Text outline color variant
197
- mapTextOutline: Color(BLUIColors.primary[100]).alpha(0.7).rgb().string() }) });
220
+ mapTextOutline: Color(BLUIColors.primary[100]).alpha(0.7).rgb().string(),
221
+ },
222
+ };
package/index.d.ts CHANGED
@@ -5,6 +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
- export { MD3BluiLightTheme as blue } from './blueTheme';
9
- export { MD3BluiDarkTheme as blueDark } from './blueDarkTheme';
10
- export { ExtendedTheme, useExtendedTheme, useFontWeight } from './shared';
8
+ export { MD3BluiLightTheme as blue } from './blueTheme.js';
9
+ export { MD3BluiDarkTheme as blueDark } from './blueDarkTheme.js';
10
+ export { ExtendedTheme, useExtendedTheme, useFontWeight } from './shared.js';
package/index.js CHANGED
@@ -5,6 +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
- export { MD3BluiLightTheme as blue } from './blueTheme';
9
- export { MD3BluiDarkTheme as blueDark } from './blueDarkTheme';
10
- export { useExtendedTheme, useFontWeight } from './shared';
8
+ export { MD3BluiLightTheme as blue } from './blueTheme.js';
9
+ export { MD3BluiDarkTheme as blueDark } from './blueDarkTheme.js';
10
+ export { useExtendedTheme, useFontWeight } from './shared.js';
package/package.json CHANGED
@@ -2,15 +2,19 @@
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.3-alpha.0",
5
+ "version": "7.0.3-alpha.2",
6
6
  "description": "React Native themes for Brightlayer UI applications",
7
7
  "main": "./index.js",
8
- "module": "./dist/index.js",
9
- "types": "./dist/index.d.ts",
8
+ "type": "module",
9
+ "publishConfig": {
10
+ "main": "./index.js"
11
+ },
12
+ "module": "./index.js",
13
+ "types": "./index.d.ts",
10
14
  "exports": {
11
15
  ".": {
12
- "import": "./dist/index.js",
13
- "require": "./dist/index.js"
16
+ "import": "./index.js",
17
+ "require": "./index.js"
14
18
  }
15
19
  },
16
20
  "scripts": {
@@ -36,20 +40,23 @@
36
40
  ],
37
41
  "dependencies": {
38
42
  "@brightlayer-ui/colors": "4.0.0",
39
- "color": "^4.2.3"
43
+ "@callstack/react-theme-provider": "^3.0.9",
44
+ "color": "^4.2.3",
45
+ "react-native-safe-area-context": "5.4.1"
40
46
  },
41
47
  "peerDependencies": {
42
- "react-native-paper": "^5.0.0"
48
+ "react-native-paper": "^5.14.5"
43
49
  },
44
50
  "devDependencies": {
45
51
  "@brightlayer-ui/prettier-config": "^1.0.3",
46
52
  "@types/color": "^4.2.0",
47
53
  "npm-license-crawler": "^0.2.1",
48
- "prettier": "^3.0.0",
49
- "react": "^18.2.0",
50
- "react-native": "0.76.7",
51
- "react-native-paper": "^5.0.0",
52
- "typescript": "^5.0.4"
54
+ "prettier": "^3.5.3",
55
+ "react": "^19.1.0",
56
+ "react-native": "0.79.3",
57
+ "react-native-paper": "^5.14.5",
58
+ "tsc-esm-fix": "^3.1.2",
59
+ "typescript": "^5.8.3"
53
60
  },
54
61
  "prettier": "@brightlayer-ui/prettier-config"
55
62
  }
package/shared.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useTheme } from 'react-native-paper';
2
- export var fontConfig = {
2
+ export const fontConfig = {
3
3
  displaySmall: {
4
4
  fontFamily: 'OpenSans-Regular',
5
5
  fontWeight: '400',
@@ -98,8 +98,8 @@ export var fontConfig = {
98
98
  letterSpacing: 0.15,
99
99
  },
100
100
  };
101
- export var useExtendedTheme = (useTheme);
102
- export var useFontWeight = function (weight) {
101
+ export const useExtendedTheme = (useTheme);
102
+ export const useFontWeight = (weight) => {
103
103
  switch (weight) {
104
104
  case '300':
105
105
  return {
@@ -127,6 +127,6 @@ export var useFontWeight = function (weight) {
127
127
  fontWeight: '800',
128
128
  };
129
129
  default:
130
- throw new Error("Invalid font weight: ".concat(weight));
130
+ throw new Error(`Invalid font weight: ${weight}`);
131
131
  }
132
132
  };