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

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 (8) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/README.md +17 -49
  3. package/dist/blueDarkTheme.d.ts +6 -3
  4. package/dist/blueDarkTheme.js +17 -6
  5. package/dist/blueTheme.d.ts +6 -3
  6. package/dist/blueTheme.js +17 -6
  7. package/dist/shared.d.ts +3 -0
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Changelog
2
2
 
3
- ## v7.0.0 (Unreleased)
3
+ ## v7.0.0 (January 12, 2024)
4
4
 
5
5
  ### Changed
6
6
 
package/README.md CHANGED
@@ -55,66 +55,34 @@ import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
55
55
  </ThemeProvider>
56
56
  ```
57
57
 
58
- > When using either of these themes, you should use our React Native Paper wrapper components (see below).
59
58
 
60
- ### React Native Paper Wrapper Components
59
+ ### React Native Paper Components Style Override
61
60
 
62
- The default theme structure for React Native Paper components does not offer us enough control to make some components look exactly the way they should for Brightlayer UI applications. Because of this, we have extended the default theme type definition (see below) and created wrapper components with the correct styles to use in place of some of the standard React Native Paper components.
61
+ This Document contains a set of style overrides in components around various [React Native Paper](https://callstack.github.io/react-native-paper/index.html) components.
63
62
 
64
- In order for these components to look correct in your application, you should use the [Brightlayer UI wrapper components](https://github.com/etn-ccis/blui-react-native-component-library/blob/master/components/src/themed/README.md) in place of the respective components from React Native Paper.
63
+ By default, the theming mechanism provided by RNP is very minimal and does not allow us to style components precisely the way we want for Brightlayer UI applications. The theme does not cover all cases to circumvent this issue, for some components, you may need to add extra styles or theme overrides inline that can be used to bring them in alignment with Brightlayer UI applications
64
+
65
+ To style components listed in the document to look correct in the application, you should use the [Brightlayer UI Components Style Override](https://github.com/etn-ccis/blui-react-native-themes/blob/master/RNPComponents/RNPComponents.md) in place of the respective components from React Native Paper.
65
66
 
66
67
  ### TypeScript
67
68
 
68
- Our Brightlayer UI themes extend the themes provided by React Native Paper. If you are using these themes in a TypeScript project and want to access any of the properties that were added to the defaults, you need to add the following [global augmentation](https://callstack.github.io/react-native-paper/theming.html#typescript) in your project's index.tsx file:
69
+ Our Brightlayer UI themes extend the themes provided by React Native Paper. If you are using these themes in a TypeScript project and want to access any of the properties that were added to the defaults, you need to use useExtendedTheme hook in your project:
69
70
 
70
71
  ```tsx
71
- declare global {
72
- namespace ReactNativePaper {
73
- interface ThemeColors {
74
- primaryPalette: {
75
- light: string;
76
- main: string;
77
- dark: string;
78
- };
79
- accentPalette: {
80
- light: string;
81
- main: string;
82
- dark: string;
83
- };
84
- errorPalette: {
85
- light: string;
86
- main: string;
87
- dark: string;
88
- };
89
- divider: string;
90
- textPalette: {
91
- primary: string;
92
- secondary: string;
93
- onPrimary: {
94
- light: string;
95
- main: string;
96
- dark: string;
97
- };
98
- disabled: string;
99
- };
100
- actionPalette: {
101
- active: string;
102
- background: string;
103
- disabled: string;
104
- disabledBackground: string;
105
- };
106
- overrides: $DeepPartial<ThemeOverrides>;
107
- opacity: Partial<ThemeOpacity>;
108
- }
109
- interface ThemeFonts {
110
- bold: ThemeFont;
111
- }
112
- }
113
- }
72
+ import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
73
+ ...
74
+ const theme = useExtendedTheme();
75
+ <Button mode="contained" style={{ backgroundColor: theme.colors.onOrangeFilledContainer }}>
76
+ Label
77
+ </Button>
114
78
  ```
115
79
 
80
+ ### Upgrading from version 6 -> 7
81
+
82
+ In the version 7, the library has been updated to use [React Native Paper](https://callstack.github.io/react-native-paper/) v5, which is adopting [Material Design 3](https://m3.material.io/). The themes have now been updated to use Material Design 3 Themes.
83
+
116
84
  <!--
117
85
  ## Demo
118
86
 
119
87
  [Check it out](https://github.com/etn-ccis/blui-react-native-showcase-demo/tree/master)
120
- -->
88
+ -->
package/dist/blueDarkTheme.d.ts CHANGED
@@ -30,8 +30,6 @@ export declare const MD3BluiDarkTheme: {
30
30
  onSurface: string;
31
31
  surfaceVariant: string;
32
32
  onSurfaceVariant: string;
33
- surfaceDisabled: string;
34
- onSurfaceDisabled: string;
35
33
  outline: string;
36
34
  outlineVariant: string;
37
35
  shadow: string;
@@ -47,6 +45,9 @@ export declare const MD3BluiDarkTheme: {
47
45
  level4: string;
48
46
  level5: string;
49
47
  };
48
+ surfaceDisabled: string;
49
+ onSurfaceDisabled: string;
50
+ backdrop: string;
50
51
  primaryNonText: string;
51
52
  errorNonText: string;
52
53
  disabled: string;
@@ -121,7 +122,9 @@ export declare const MD3BluiDarkTheme: {
121
122
  onNeutralShadedContainer: string;
122
123
  neutralOutlinedContainerOutline: string;
123
124
  onNeutralOutlinedContainer: string;
124
- backdrop: string;
125
+ textFieldContainer: string;
126
+ progressBarTrackOnStatusFilledContainer: string;
127
+ mapTextOutline: string;
125
128
  };
126
129
  dark: boolean;
127
130
  mode?: ("adaptive" | "exact") | undefined;
package/dist/blueDarkTheme.js CHANGED
@@ -28,18 +28,23 @@ 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.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: {
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], 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: {
36
32
  level0: 'transparent',
33
+ // level1 is the same as surfaceContainerLowest in design files
37
34
  level1: colors_1.default.neutral[4],
35
+ // level2 is the same as surfaceContainerLow in design files
38
36
  level2: colors_1.default.neutral[10],
37
+ // level3 is the same as surfaceContainer in design files
39
38
  level3: colors_1.default.neutral[12],
39
+ // level4 is the same as surfaceContainerHigh in design files
40
40
  level4: colors_1.default.neutral[17],
41
+ // level5 is the same as surfaceContainerHighest in design files
41
42
  level5: colors_1.default.neutral[20],
42
43
  },
44
+ // surfaceDisabled is the same as disabledContainer in design files
45
+ surfaceDisabled: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.1).rgb().string(),
46
+ // onSurfaceDisabled is the same as onDisabledContainer in design files
47
+ onSurfaceDisabled: (0, color_1.default)(colors_1.default.neutral[95]).alpha(0.15).rgb().string(), backdrop: (0, color_1.default)(colors_1.default.primary[0]).alpha(0.32).rgb().string(),
43
48
  // Custom color variants
44
49
  // High-emphasis primary non-text variant, can be used on non-text elements like icons
45
50
  primaryNonText: colors_1.default.primary[60],
@@ -189,4 +194,10 @@ exports.MD3BluiDarkTheme = __assign(__assign({}, react_native_paper_1.MD3DarkThe
189
194
  // Neutral color against neutral outlined container
190
195
  neutralOutlinedContainerOutline: colors_1.default.neutralVariant[60],
191
196
  // Text and icons against Neutral outlined container
192
- onNeutralOutlinedContainer: colors_1.default.neutralVariant[70] }) });
197
+ onNeutralOutlinedContainer: colors_1.default.neutralVariant[70],
198
+ // Standout fill text field color against surface
199
+ textFieldContainer: (0, color_1.default)(colors_1.default.neutral[80]).alpha(0.2).rgb().string(),
200
+ // Progress bar track on status color against filled surface
201
+ progressBarTrackOnStatusFilledContainer: (0, color_1.default)(colors_1.default.primary[0]).alpha(0.25).rgb().string(),
202
+ // Text outline color variant
203
+ mapTextOutline: (0, color_1.default)(colors_1.default.primary[0]).alpha(0.7).rgb().string() }) });
package/dist/blueTheme.d.ts CHANGED
@@ -28,8 +28,6 @@ export declare const MD3BluiLightTheme: {
28
28
  onBackground: string;
29
29
  surface: string;
30
30
  onSurface: string;
31
- surfaceDisabled: string;
32
- onSurfaceDisabled: string;
33
31
  surfaceVariant: string;
34
32
  onSurfaceVariant: string;
35
33
  outline: string;
@@ -47,6 +45,9 @@ export declare const MD3BluiLightTheme: {
47
45
  level4: string;
48
46
  level5: string;
49
47
  };
48
+ surfaceDisabled: string;
49
+ onSurfaceDisabled: string;
50
+ backdrop: string;
50
51
  primaryNonText: string;
51
52
  errorNonText: string;
52
53
  disabled: string;
@@ -121,7 +122,9 @@ export declare const MD3BluiLightTheme: {
121
122
  onNeutralShadedContainer: string;
122
123
  neutralOutlinedContainerOutline: string;
123
124
  onNeutralOutlinedContainer: string;
124
- backdrop: string;
125
+ textFieldContainer: string;
126
+ progressBarTrackOnStatusFilledContainer: string;
127
+ mapTextOutline: string;
125
128
  };
126
129
  dark: boolean;
127
130
  mode?: ("adaptive" | "exact") | undefined;
package/dist/blueTheme.js CHANGED
@@ -28,18 +28,23 @@ 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.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: {
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], 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: {
36
32
  level0: 'transparent',
33
+ // level1 is the same as surfaceContainerLowest in design files
37
34
  level1: colors_1.default.primary[100],
35
+ // level2 is the same as surfaceContainerLow in design files
38
36
  level2: colors_1.default.neutral[97],
37
+ // level3 is the same as surfaceContainer in design files
39
38
  level3: colors_1.default.neutral[94],
39
+ // level4 is the same as surfaceContainerHigh in design files
40
40
  level4: colors_1.default.neutral[92],
41
+ // level5 is the same as surfaceContainerHighest in design files
41
42
  level5: colors_1.default.neutral[90],
42
43
  },
44
+ // surfaceDisabled is the same as disabledContainer in design files
45
+ surfaceDisabled: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.05).rgb().string(),
46
+ // onSurfaceDisabled is the same as onDisabledContainer in design files
47
+ onSurfaceDisabled: (0, color_1.default)(colors_1.default.neutral[10]).alpha(0.25).rgb().string(), backdrop: (0, color_1.default)(colors_1.default.primary[0]).alpha(0.32).rgb().string(),
43
48
  // Custom color variants
44
49
  // High-emphasis primary non-text variant, can be used on non-text elements like icons
45
50
  primaryNonText: colors_1.default.primary[50],
@@ -189,4 +194,10 @@ exports.MD3BluiLightTheme = __assign(__assign({}, react_native_paper_1.MD3LightT
189
194
  // Neutral color against neutral outlined container
190
195
  neutralOutlinedContainerOutline: colors_1.default.neutralVariant[50],
191
196
  // Text and icons against Neutral outlined container
192
- onNeutralOutlinedContainer: colors_1.default.neutralVariant[30] }) });
197
+ onNeutralOutlinedContainer: colors_1.default.neutralVariant[30],
198
+ // Standout fill text field color against surface
199
+ textFieldContainer: (0, color_1.default)(colors_1.default.neutral[80]).alpha(0.4).rgb().string(),
200
+ // Progress bar track on status color against filled surface
201
+ progressBarTrackOnStatusFilledContainer: (0, color_1.default)(colors_1.default.primary[0]).alpha(0.25).rgb().string(),
202
+ // Text outline color variant
203
+ mapTextOutline: (0, color_1.default)(colors_1.default.primary[100]).alpha(0.7).rgb().string() }) });
package/dist/shared.d.ts CHANGED
@@ -215,6 +215,9 @@ export type ExtendedTheme = Omit<MD3Theme, 'colors'> & {
215
215
  onNeutralShadedContainer: string;
216
216
  neutralOutlinedContainerOutline: string;
217
217
  onNeutralOutlinedContainer: string;
218
+ textFieldContainer: string;
219
+ progressBarTrackOnStatusFilledContainer: string;
220
+ mapTextOutline: string;
218
221
  };
219
222
  };
220
223
  export declare const useExtendedTheme: (overrides?: $DeepPartial<ExtendedTheme>) => ExtendedTheme;
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.3",
5
+ "version": "7.0.0",
6
6
  "description": "React Native themes for Brightlayer UI applications",
7
7
  "main": "./dist/index.js",
8
8
  "scripts": {