@brightlayer-ui/react-native-themes 6.0.0 → 7.0.0-alpha.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 (12) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/LICENSES.json +14 -0
  3. package/README.md +4 -4
  4. package/dist/blueDarkTheme.d.ts +131 -1
  5. package/dist/blueDarkTheme.js +14 -52
  6. package/dist/blueTheme.d.ts +131 -1
  7. package/dist/blueTheme.js +13 -51
  8. package/dist/index.d.ts +30 -40
  9. package/dist/index.js +3 -2
  10. package/dist/shared.d.ts +102 -91
  11. package/dist/shared.js +102 -14
  12. package/package.json +18 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Changelog
2
2
 
3
+ ## v7.0.0 (Unreleased)
4
+
5
+ ### Changed
6
+
7
+ - Updated themes to use Material Design 3 styled palettes and React Native Paper v5 theme structure.
8
+
3
9
  ## v6.0.0 (November 9, 2021)
4
10
 
5
11
  ### Changed
@@ -19,6 +25,7 @@ Previous versions listed after this indicator refer to our deprecated `@pxblue`
19
25
  - Many new theme color properties to give greater control over the styles of various components. Note that the global ReactNativePaper namespace will need to be updated in your application to use these properties.
20
26
 
21
27
  ### Removed
28
+
22
29
  - The `blueDarkAlt` theme has been consolidated into the `blueDark` theme and a selection of wrapper components in the `@pxblue/react-native-components` library. This eliminates the need for using two theme providers and writing your own wrappers for these components.
23
30
  - `theme.colors.textSecondary` — use `theme.colors.textPalette.secondary` instead.
24
31
 
package/LICENSES.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "@brightlayer-ui/colors@3.0.1": {
3
+ "licenses": "BSD-3-Clause",
4
+ "repository": "https://github.com/etn-ccis/blui-colors",
5
+ "licenseUrl": "https://github.com/etn-ccis/blui-colors/raw/master/LICENSE",
6
+ "parents": "@brightlayer-ui/react-native-themes"
7
+ },
8
+ "color@3.1.3": {
9
+ "licenses": "MIT",
10
+ "repository": "https://github.com/Qix-/color",
11
+ "licenseUrl": "https://github.com/Qix-/color/raw/master/LICENSE",
12
+ "parents": "@brightlayer-ui/react-native-themes"
13
+ }
14
+ }
package/README.md CHANGED
@@ -1,9 +1,9 @@
1
1
  # Brightlayer UI themes for React Native applications
2
2
 
3
- [![](https://img.shields.io/circleci/project/github/brightlayer-ui/react-native-themes/master.svg?style=flat)](https://circleci.com/gh/brightlayer-ui/react-native-themes/tree/master)
3
+ [![](https://img.shields.io/circleci/project/github/etn-ccis/blui-react-native-themes/master.svg?style=flat)](https://circleci.com/gh/etn-ccis/blui-react-native-themes/tree/master)
4
4
  [![](https://img.shields.io/npm/v/@brightlayer-ui/react-native-themes.svg?label=@brightlayer-ui/react-native-themes&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-native-themes)
5
5
 
6
- This package provides theming support for Eaton applications using the Brightlayer UI design system. It includes resources for developers using React Native with [react-native-paper](https://www.npmjs.com/package/react-native-paper). This package comes with two theme options: a Blue theme (standard) and a Dark theme.
6
+ This package provides [theming](https://brightlayer-ui.github.io/style/themes) support for Eaton applications using the Brightlayer UI design system. It includes resources for developers using React Native with [react-native-paper](https://www.npmjs.com/package/react-native-paper). This package comes with two theme options: a Blue theme (standard) and a Dark theme.
7
7
 
8
8
  For other frameworks, check out our related packages:
9
9
 
@@ -61,7 +61,7 @@ import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
61
61
 
62
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.
63
63
 
64
- In order for these components to look correct in your application, you should use the [Brightlayer UI wrapper components](https://github.com/brightlayer-ui/react-native-component-library/blob/master/components/src/themed/README.md) in place of the respective components from React Native Paper.
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.
65
65
 
66
66
  ### TypeScript
67
67
 
@@ -116,5 +116,5 @@ declare global {
116
116
  <!--
117
117
  ## Demo
118
118
 
119
- [Check it out](https://github.com/brightlayer-ui/react-native-showcase-demo/tree/master)
119
+ [Check it out](https://github.com/etn-ccis/blui-react-native-showcase-demo/tree/master)
120
120
  -->
package/dist/blueDarkTheme.d.ts CHANGED
@@ -5,4 +5,134 @@ 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 declare const blueDarkTheme: ReactNativePaper.Theme;
8
+ import Color from 'color';
9
+ export declare const MD3BluiDarkTheme: {
10
+ fonts: import("react-native-paper/lib/typescript/types").MD3Typescale;
11
+ colors: {
12
+ primary: string;
13
+ onPrimary: string;
14
+ primaryContainer: string;
15
+ onPrimaryContainer: string;
16
+ secondary: string;
17
+ onSecondary: string;
18
+ secondaryContainer: string;
19
+ onSecondaryContainer: string;
20
+ tertiary: string;
21
+ onTertiary: string;
22
+ tertiaryContainer: string;
23
+ onTertiaryContainer: string;
24
+ error: string;
25
+ onError: string;
26
+ errorContainer: string;
27
+ onErrorContainer: string;
28
+ background: string;
29
+ onBackground: string;
30
+ surface: string;
31
+ onSurface: string;
32
+ surfaceVariant: string;
33
+ onSurfaceVariant: string;
34
+ 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
+ }>;
60
+ shadow: string;
61
+ scrim: string;
62
+ inverseSurface: string;
63
+ inverseOnSurface: string;
64
+ inversePrimary: string;
65
+ elevation: {
66
+ level0: string;
67
+ level1: string;
68
+ level2: string;
69
+ level3: string;
70
+ level4: string;
71
+ level5: string;
72
+ };
73
+ primaryNonText: string;
74
+ 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
+ }>;
100
+ warning: string;
101
+ warningNonText: string;
102
+ onWarning: string;
103
+ warningContainer: string;
104
+ onWarningContainer: string;
105
+ success: string;
106
+ successNonText: string;
107
+ onSuccess: string;
108
+ successContainer: string;
109
+ onSuccessContainer: string;
110
+ orange: string;
111
+ orangeNonText: string;
112
+ onOrange: string;
113
+ orangeContainer: string;
114
+ onOrangeContainer: string;
115
+ purple: string;
116
+ purpleNonText: string;
117
+ onPurple: string;
118
+ purpleContainer: string;
119
+ onPurpleContainer: string;
120
+ surfaceContainerLowest: string;
121
+ surfaceContainerLow: string;
122
+ surfaceContainer: string;
123
+ surfaceContainerHigh: string;
124
+ surfaceContainerHighest: string;
125
+ surfaceDisabled: string;
126
+ onSurfaceDisabled: string;
127
+ backdrop: string;
128
+ };
129
+ dark: boolean;
130
+ mode?: ("adaptive" | "exact") | undefined;
131
+ roundness: number;
132
+ animation: {
133
+ scale: number;
134
+ defaultAnimationDuration?: number | undefined;
135
+ };
136
+ version: 3;
137
+ isV3: true;
138
+ };
package/dist/blueDarkTheme.js CHANGED
@@ -21,58 +21,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
21
21
  return (mod && mod.__esModule) ? mod : { "default": mod };
22
22
  };
23
23
  Object.defineProperty(exports, "__esModule", { value: true });
24
- exports.blueDarkTheme = void 0;
24
+ exports.MD3BluiDarkTheme = void 0;
25
25
  var react_native_paper_1 = require("react-native-paper");
26
- var colors_1 = require("@brightlayer-ui/colors");
27
26
  var shared_1 = require("./shared");
27
+ var colors_1 = require("@brightlayer-ui/colors");
28
28
  var color_1 = __importDefault(require("color"));
29
- var themeOpacity = {
30
- disabled: 0.36,
31
- divider: 0.36,
32
- disabledBackground: 0.24,
33
- actionOpacity: 0.1,
34
- };
35
- exports.blueDarkTheme = __assign(__assign({}, react_native_paper_1.DefaultTheme), { dark: true, roundness: 4, fonts: __assign(__assign({}, react_native_paper_1.configureFonts(shared_1.fontConfig)), { bold: {
36
- fontFamily: 'OpenSans-Bold',
37
- fontWeight: '700',
38
- } }), colors: __assign(__assign({}, react_native_paper_1.DefaultTheme.colors), { primary: colors_1.blue[200], primaryPalette: {
39
- light: colors_1.blue[50],
40
- main: colors_1.blue[200],
41
- dark: colors_1.blue[500],
42
- }, accent: colors_1.lightBlue[200], accentPalette: {
43
- light: colors_1.lightBlue[50],
44
- main: colors_1.lightBlue[200],
45
- dark: colors_1.lightBlue[500],
46
- }, error: colors_1.red[200], errorPalette: {
47
- light: colors_1.red[50],
48
- main: colors_1.red[200],
49
- dark: colors_1.red[500],
50
- }, divider: color_1.default(colors_1.black[200]).alpha(themeOpacity.divider).string(), background: colors_1.darkBlack[800], surface: colors_1.black[900], text: colors_1.black[50], placeholder: colors_1.black[200], onSurface: colors_1.black[50], textPalette: {
51
- primary: colors_1.black[50],
52
- secondary: colors_1.black[200],
53
- onPrimary: {
54
- light: colors_1.black[500],
55
- main: colors_1.black[500],
56
- dark: colors_1.white[50],
57
- },
58
- disabled: colors_1.black[400],
59
- }, actionPalette: {
60
- active: colors_1.black[500],
61
- background: colors_1.black[800],
62
- disabled: color_1.default(colors_1.black[300]).alpha(themeOpacity.disabled).string(),
63
- disabledBackground: color_1.default(colors_1.black[200]).alpha(themeOpacity.disabledBackground).string(),
64
- }, disabled: color_1.default(colors_1.black[300]).alpha(themeOpacity.disabled).string(), notification: colors_1.lightBlue[200], opacity: themeOpacity, overrides: {
65
- avatar: {
66
- background: color_1.default(colors_1.black[50]).alpha(themeOpacity.actionOpacity).string(),
67
- },
68
- chip: {
69
- flat: {
70
- background: colors_1.black[500],
71
- },
72
- },
73
- toggleButtonGroup: {
74
- checked: {
75
- background: color_1.default(colors_1.blue[500]).alpha(0.36).string(),
76
- },
77
- },
78
- } }) });
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
+ // 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: {
32
+ 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],
38
+ },
39
+ // 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] }) });
package/dist/blueTheme.d.ts CHANGED
@@ -5,4 +5,134 @@ 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 declare const blueTheme: ReactNativePaper.Theme;
8
+ import Color from 'color';
9
+ export declare const MD3BluiLightTheme: {
10
+ fonts: import("react-native-paper/lib/typescript/types").MD3Typescale;
11
+ colors: {
12
+ primary: string;
13
+ onPrimary: string;
14
+ primaryContainer: string;
15
+ onPrimaryContainer: string;
16
+ secondary: string;
17
+ onSecondary: string;
18
+ secondaryContainer: string;
19
+ onSecondaryContainer: string;
20
+ tertiary: string;
21
+ onTertiary: string;
22
+ tertiaryContainer: string;
23
+ onTertiaryContainer: string;
24
+ error: string;
25
+ onError: string;
26
+ errorContainer: string;
27
+ onErrorContainer: string;
28
+ background: string;
29
+ onBackground: string;
30
+ surface: string;
31
+ onSurface: string;
32
+ surfaceVariant: string;
33
+ onSurfaceVariant: string;
34
+ 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
+ }>;
60
+ shadow: string;
61
+ scrim: string;
62
+ inverseSurface: string;
63
+ inverseOnSurface: string;
64
+ inversePrimary: string;
65
+ elevation: {
66
+ level0: string;
67
+ level1: string;
68
+ level2: string;
69
+ level3: string;
70
+ level4: string;
71
+ level5: string;
72
+ };
73
+ primaryNonText: string;
74
+ 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
+ }>;
100
+ warning: string;
101
+ warningNonText: string;
102
+ onWarning: string;
103
+ warningContainer: string;
104
+ onWarningContainer: string;
105
+ success: string;
106
+ successNonText: string;
107
+ onSuccess: string;
108
+ successContainer: string;
109
+ onSuccessContainer: string;
110
+ orange: string;
111
+ orangeNonText: string;
112
+ onOrange: string;
113
+ orangeContainer: string;
114
+ onOrangeContainer: string;
115
+ purple: string;
116
+ purpleNonText: string;
117
+ onPurple: string;
118
+ purpleContainer: string;
119
+ onPurpleContainer: string;
120
+ surfaceContainerLowest: string;
121
+ surfaceContainerLow: string;
122
+ surfaceContainer: string;
123
+ surfaceContainerHigh: string;
124
+ surfaceContainerHighest: string;
125
+ surfaceDisabled: string;
126
+ onSurfaceDisabled: string;
127
+ backdrop: string;
128
+ };
129
+ dark: boolean;
130
+ mode?: ("adaptive" | "exact") | undefined;
131
+ roundness: number;
132
+ animation: {
133
+ scale: number;
134
+ defaultAnimationDuration?: number | undefined;
135
+ };
136
+ version: 3;
137
+ isV3: true;
138
+ };
package/dist/blueTheme.js CHANGED
@@ -21,58 +21,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
21
21
  return (mod && mod.__esModule) ? mod : { "default": mod };
22
22
  };
23
23
  Object.defineProperty(exports, "__esModule", { value: true });
24
- exports.blueTheme = void 0;
24
+ exports.MD3BluiLightTheme = void 0;
25
25
  var react_native_paper_1 = require("react-native-paper");
26
26
  var colors_1 = require("@brightlayer-ui/colors");
27
27
  var shared_1 = require("./shared");
28
28
  var color_1 = __importDefault(require("color"));
29
- var themeOpacity = {
30
- disabled: 0.3,
31
- divider: 0.36,
32
- disabledBackground: 0.24,
33
- actionOpacity: 1,
34
- };
35
- exports.blueTheme = __assign(__assign({}, react_native_paper_1.DefaultTheme), { dark: false, roundness: 4, fonts: __assign(__assign({}, react_native_paper_1.configureFonts(shared_1.fontConfig)), { bold: {
36
- fontFamily: 'OpenSans-Bold',
37
- fontWeight: '700',
38
- } }), colors: __assign(__assign({}, react_native_paper_1.DefaultTheme.colors), { primary: colors_1.blue[500], primaryPalette: {
39
- light: colors_1.blue[50],
40
- main: colors_1.blue[500],
41
- dark: colors_1.blue[700],
42
- }, accent: colors_1.lightBlue[500], accentPalette: {
43
- light: colors_1.lightBlue[50],
44
- main: colors_1.lightBlue[500],
45
- dark: colors_1.lightBlue[700],
46
- }, error: colors_1.red[500], errorPalette: {
47
- light: colors_1.red[50],
48
- main: colors_1.red[500],
49
- dark: colors_1.red[700],
50
- }, divider: color_1.default(colors_1.black[200]).alpha(themeOpacity.divider).string(), background: colors_1.white[200], surface: colors_1.white[50], text: colors_1.black[500], placeholder: colors_1.gray[500], onSurface: colors_1.black[500], textPalette: {
51
- primary: colors_1.black[500],
52
- secondary: colors_1.gray[500],
53
- onPrimary: {
54
- light: colors_1.black[500],
55
- main: colors_1.white[50],
56
- dark: colors_1.white[50],
57
- },
58
- disabled: color_1.default(colors_1.black[500]).alpha(themeOpacity.disabled).string(),
59
- }, actionPalette: {
60
- active: colors_1.gray[500],
61
- background: colors_1.white[500],
62
- disabled: color_1.default(colors_1.black[500]).alpha(themeOpacity.disabled).string(),
63
- disabledBackground: color_1.default(colors_1.black[200]).alpha(themeOpacity.disabledBackground).string(),
64
- }, disabled: color_1.default(colors_1.black[500]).alpha(themeOpacity.disabled).string(), notification: colors_1.lightBlue[500], opacity: themeOpacity, overrides: {
65
- snackbar: {
66
- accent: colors_1.blue[200],
67
- },
68
- bottomNavigation: {
69
- inactive: colors_1.blue[200],
70
- },
71
- button: {
72
- contained: {
73
- text: {
74
- disabled: colors_1.blue[200],
75
- },
76
- },
77
- },
78
- } }) });
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
+ // 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: {
32
+ 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],
38
+ },
39
+ // 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] }) });
package/dist/index.d.ts CHANGED
@@ -5,51 +5,41 @@ 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 { blueTheme as blue } from './blueTheme';
9
- export { blueDarkTheme as blueDark } from './blueDarkTheme';
10
- export { ThemeOpacity, ThemeOverrides } from './shared';
11
- import { $DeepPartial } from '@callstack/react-theme-provider';
12
- import { ThemeOpacity, ThemeOverrides } from './shared';
8
+ export { MD3BluiLightTheme as blue } from './blueTheme';
9
+ export { MD3BluiDarkTheme as blueDark } from './blueDarkTheme';
13
10
  declare global {
14
11
  namespace ReactNativePaper {
15
12
  interface ThemeColors {
16
- primaryPalette: {
17
- light: string;
18
- main: string;
19
- dark: string;
20
- };
21
- accentPalette: {
22
- light: string;
23
- main: string;
24
- dark: string;
25
- };
26
- errorPalette: {
27
- light: string;
28
- main: string;
29
- dark: string;
30
- };
31
- divider: string;
32
- textPalette: {
33
- primary: string;
34
- secondary: string;
35
- onPrimary: {
36
- light: string;
37
- main: string;
38
- dark: string;
39
- };
13
+ colors: {
14
+ primaryNonText: string;
15
+ errorNonText: string;
40
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;
41
42
  };
42
- actionPalette: {
43
- active: string;
44
- background: string;
45
- disabled: string;
46
- disabledBackground: string;
47
- };
48
- overrides: $DeepPartial<ThemeOverrides>;
49
- opacity: Partial<ThemeOpacity>;
50
- }
51
- interface ThemeFonts {
52
- bold: ThemeFont;
53
43
  }
54
44
  }
55
45
  }
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.blueDark = exports.blue = void 0;
3
4
  /**
4
5
  Copyright (c) 2021-present, Eaton
5
6
 
@@ -8,6 +9,6 @@ All rights reserved.
8
9
  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.
9
10
  **/
10
11
  var blueTheme_1 = require("./blueTheme");
11
- Object.defineProperty(exports, "blue", { enumerable: true, get: function () { return blueTheme_1.blueTheme; } });
12
+ Object.defineProperty(exports, "blue", { enumerable: true, get: function () { return blueTheme_1.MD3BluiLightTheme; } });
12
13
  var blueDarkTheme_1 = require("./blueDarkTheme");
13
- Object.defineProperty(exports, "blueDark", { enumerable: true, get: function () { return blueDarkTheme_1.blueDarkTheme; } });
14
+ Object.defineProperty(exports, "blueDark", { enumerable: true, get: function () { return blueDarkTheme_1.MD3BluiDarkTheme; } });
package/dist/shared.d.ts CHANGED
@@ -1,95 +1,106 @@
1
- declare type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
2
1
  export declare const fontConfig: {
3
- default: {
4
- regular: {
5
- fontFamily: string;
6
- fontWeight: FontWeight;
7
- };
8
- medium: {
9
- fontFamily: string;
10
- fontWeight: FontWeight;
11
- };
12
- light: {
13
- fontFamily: string;
14
- fontWeight: FontWeight;
15
- };
16
- thin: {
17
- fontFamily: string;
18
- fontWeight: FontWeight;
19
- };
20
- };
21
- ios: {
22
- regular: {
23
- fontFamily: string;
24
- fontWeight: FontWeight;
25
- };
26
- medium: {
27
- fontFamily: string;
28
- fontWeight: FontWeight;
29
- };
30
- light: {
31
- fontFamily: string;
32
- fontWeight: FontWeight;
33
- };
34
- thin: {
35
- fontFamily: string;
36
- fontWeight: FontWeight;
37
- };
38
- };
39
- android: {
40
- regular: {
41
- fontFamily: string;
42
- fontWeight: FontWeight;
43
- };
44
- medium: {
45
- fontFamily: string;
46
- fontWeight: FontWeight;
47
- };
48
- light: {
49
- fontFamily: string;
50
- fontWeight: FontWeight;
51
- };
52
- thin: {
53
- fontFamily: string;
54
- fontWeight: FontWeight;
55
- };
2
+ customVariant: {
3
+ fontFamily: string;
4
+ fontWeight: "400";
5
+ letterSpacing: number;
6
+ lineHeight: number;
7
+ fontSize: number;
56
8
  };
57
- };
58
- export declare type ThemeOverrides = {
59
- avatar: {
60
- background: string;
61
- };
62
- bottomNavigation: {
63
- inactive: string;
64
- };
65
- button: {
66
- contained: {
67
- text: {
68
- disabled: string;
69
- };
70
- };
71
- };
72
- chip: {
73
- outlined: {
74
- background: string;
75
- };
76
- flat: {
77
- background: string;
78
- };
79
- };
80
- snackbar: {
81
- accent: string;
82
- };
83
- toggleButtonGroup: {
84
- checked: {
85
- background: string;
86
- };
9
+ displaySmall: {
10
+ fontFamily: string;
11
+ fontWeight: "400";
12
+ fontSize: number;
13
+ lineHeight: number;
14
+ };
15
+ displayMedium: {
16
+ fontFamily: string;
17
+ fontWeight: "400";
18
+ fontSize: number;
19
+ lineHeight: number;
20
+ };
21
+ displayLarge: {
22
+ fontFamily: string;
23
+ fontWeight: "400";
24
+ fontSize: number;
25
+ lineHeight: number;
26
+ letterSpacing: number;
27
+ };
28
+ headlineSmall: {
29
+ fontFamily: string;
30
+ fontWeight: "500";
31
+ fontSize: number;
32
+ lineHeight: number;
33
+ };
34
+ headlineMedium: {
35
+ fontFamily: string;
36
+ fontWeight: "500";
37
+ fontSize: number;
38
+ lineHeight: number;
39
+ };
40
+ headlineLarge: {
41
+ fontFamily: string;
42
+ fontWeight: "500";
43
+ fontSize: number;
44
+ lineHeight: number;
45
+ };
46
+ titleSmall: {
47
+ fontFamily: string;
48
+ fontWeight: "600";
49
+ fontSize: number;
50
+ lineHeight: number;
51
+ letterSpacing: number;
52
+ };
53
+ titleMedium: {
54
+ fontFamily: string;
55
+ fontWeight: "600";
56
+ fontSize: number;
57
+ lineHeight: number;
58
+ letterSpacing: number;
59
+ };
60
+ titleLarge: {
61
+ fontFamily: string;
62
+ fontWeight: "400";
63
+ fontSize: number;
64
+ lineHeight: number;
65
+ };
66
+ labelSmall: {
67
+ fontFamily: string;
68
+ fontWeight: "600";
69
+ fontSize: number;
70
+ lineHeight: number;
71
+ letterSpacing: number;
72
+ };
73
+ labelMedium: {
74
+ fontFamily: string;
75
+ fontWeight: "600";
76
+ fontSize: number;
77
+ lineHeight: number;
78
+ letterSpacing: number;
79
+ };
80
+ labelLarge: {
81
+ fontFamily: string;
82
+ fontWeight: "600";
83
+ fontSize: number;
84
+ lineHeight: number;
85
+ letterSpacing: number;
86
+ };
87
+ bodySmall: {
88
+ fontFamily: string;
89
+ fontWeight: "400";
90
+ fontSize: number;
91
+ lineHeight: number;
92
+ };
93
+ bodyMedium: {
94
+ fontFamily: string;
95
+ fontWeight: "400";
96
+ fontSize: number;
97
+ lineHeight: number;
98
+ };
99
+ bodyLarge: {
100
+ fontFamily: string;
101
+ fontWeight: "400";
102
+ fontSize: number;
103
+ lineHeight: number;
104
+ letterSpacing: number;
87
105
  };
88
106
  };
89
- export declare type ThemeOpacity = {
90
- disabled: number;
91
- divider: number;
92
- disabledBackground: number;
93
- actionOpacity: number;
94
- };
95
- export {};
package/dist/shared.js CHANGED
@@ -1,26 +1,114 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.fontConfig = void 0;
4
- var defaultFontConfig = {
5
- regular: {
4
+ var react_native_1 = require("react-native");
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
+ displaySmall: {
18
+ fontFamily: 'OpenSans-Regular',
19
+ fontWeight: '400',
20
+ fontSize: 36,
21
+ lineHeight: 45,
22
+ },
23
+ displayMedium: {
6
24
  fontFamily: 'OpenSans-Regular',
7
25
  fontWeight: '400',
26
+ fontSize: 45,
27
+ lineHeight: 56,
28
+ },
29
+ displayLarge: {
30
+ fontFamily: 'OpenSans-Regular',
31
+ fontWeight: '400',
32
+ fontSize: 54,
33
+ lineHeight: 68,
34
+ letterSpacing: 1,
35
+ },
36
+ headlineSmall: {
37
+ fontFamily: 'OpenSans-Regular',
38
+ fontWeight: '500',
39
+ fontSize: 24,
40
+ lineHeight: 32,
41
+ },
42
+ headlineMedium: {
43
+ fontFamily: 'OpenSans-Regular',
44
+ fontWeight: '500',
45
+ fontSize: 27,
46
+ lineHeight: 40,
47
+ },
48
+ headlineLarge: {
49
+ fontFamily: 'OpenSans-Regular',
50
+ fontWeight: '500',
51
+ fontSize: 32,
52
+ lineHeight: 40,
8
53
  },
9
- medium: {
54
+ titleSmall: {
55
+ fontFamily: 'OpenSans-Regular',
56
+ fontWeight: '600',
57
+ fontSize: 14,
58
+ lineHeight: 20,
59
+ letterSpacing: 0.1,
60
+ },
61
+ titleMedium: {
62
+ fontFamily: 'OpenSans-Regular',
63
+ fontWeight: '600',
64
+ fontSize: 16,
65
+ lineHeight: 24,
66
+ letterSpacing: 0.15,
67
+ },
68
+ titleLarge: {
69
+ fontFamily: 'OpenSans-Regular',
70
+ fontWeight: '400',
71
+ fontSize: 22,
72
+ lineHeight: 28,
73
+ },
74
+ labelSmall: {
10
75
  fontFamily: 'OpenSans-SemiBold',
11
76
  fontWeight: '600',
77
+ fontSize: 11,
78
+ lineHeight: 16,
79
+ letterSpacing: 0.5,
12
80
  },
13
- light: {
14
- fontFamily: 'OpenSans-Light',
15
- fontWeight: '300',
81
+ labelMedium: {
82
+ fontFamily: 'OpenSans-SemiBold',
83
+ fontWeight: '600',
84
+ fontSize: 12,
85
+ lineHeight: 16,
86
+ letterSpacing: 0.2,
16
87
  },
17
- thin: {
18
- fontFamily: 'OpenSans-Light',
19
- fontWeight: '100',
88
+ labelLarge: {
89
+ fontFamily: 'OpenSans-SemiBold',
90
+ fontWeight: '600',
91
+ fontSize: 14,
92
+ lineHeight: 20,
93
+ letterSpacing: 0.1,
94
+ },
95
+ bodySmall: {
96
+ fontFamily: 'OpenSans-Regular',
97
+ fontWeight: '400',
98
+ fontSize: 12,
99
+ lineHeight: 16,
100
+ },
101
+ bodyMedium: {
102
+ fontFamily: 'OpenSans-Regular',
103
+ fontWeight: '400',
104
+ fontSize: 14,
105
+ lineHeight: 20,
106
+ },
107
+ bodyLarge: {
108
+ fontFamily: 'OpenSans-Regular',
109
+ fontWeight: '400',
110
+ fontSize: 16,
111
+ lineHeight: 24,
112
+ letterSpacing: 0.15,
20
113
  },
21
- };
22
- exports.fontConfig = {
23
- default: defaultFontConfig,
24
- ios: defaultFontConfig,
25
- android: defaultFontConfig,
26
114
  };
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": "6.0.0",
5
+ "version": "7.0.0-alpha.0",
6
6
  "description": "React Native themes for Brightlayer UI applications",
7
7
  "main": "./dist/index.js",
8
8
  "scripts": {
@@ -17,19 +17,21 @@
17
17
  "link:themes": "bash ./scripts/linkThemes.sh",
18
18
  "test": "bash ./scripts/buildTest.sh",
19
19
  "publish:package": "set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish",
20
- "tag:package": "npx -p @brightlayer-ui/tag blui-tag",
20
+ "tag:package": "npx -p @brightlayer-ui/tag blui-tag -s -blui-react-native-themes",
21
21
  "update:submodule": "git submodule update --remote",
22
22
  "prettier": "prettier \"src/**/**.{ts,tsx,js,jsx,json,css,scss,html}\" --write",
23
- "prettier:check": "prettier \"src/**/**.{ts,tsx,js,jsx,json,css,scss,html}\" --check"
23
+ "prettier:check": "prettier \"src/**/**.{ts,tsx,js,jsx,json,css,scss,html}\" --check",
24
+ "generate:licenses": "npm-license-crawler -onlyDirectDependencies -json LICENSES.json",
25
+ "precommit": "yarn build && yarn generate:licenses && yarn prettier && yarn test"
24
26
  },
25
27
  "repository": {
26
28
  "type": "git",
27
- "url": "git+https://github.com/brightlayer-ui/react-native-themes.git"
29
+ "url": "git+https://github.com/etn-ccis/blui-react-native-themes.git"
28
30
  },
29
31
  "bugs": {
30
- "url": "https://github.com/brightlayer-ui/react-native-themes/issues"
32
+ "url": "https://github.com/etn-ccis/blui-react-native-themes/issues"
31
33
  },
32
- "homepage": "https://github.com/brightlayer-ui/react-native-themes/tree/master",
34
+ "homepage": "https://github.com/etn-ccis/blui-react-native-themes/tree/master",
33
35
  "keywords": [
34
36
  "Brightlayer UI",
35
37
  "themes",
@@ -37,24 +39,28 @@
37
39
  "React Native"
38
40
  ],
39
41
  "dependencies": {
40
- "@brightlayer-ui/colors": "^3.0.0",
41
- "color": "^3.1.3"
42
+ "@brightlayer-ui/colors": "4.0.0-alpha.0",
43
+ "color": "^4.2.3"
42
44
  },
43
45
  "peerDependencies": {
44
- "react-native-paper": "^3.0.0 || ^4.0.0"
46
+ "react-native-paper": "^5.0.0"
45
47
  },
46
48
  "devDependencies": {
47
49
  "@brightlayer-ui/prettier-config": "^1.0.3",
48
50
  "@types/color": "^3.0.1",
49
- "prettier": "^2.4.1",
50
- "react-native-paper": "^4.0.0",
51
- "typescript": "^3.7.2"
51
+ "npm-license-crawler": "^0.2.1",
52
+ "prettier": "^3.0.0",
53
+ "react-native-paper": "^5.0.0",
54
+ "typescript": "^5.0.4",
55
+ "react-native": "~0.72.6",
56
+ "react": "^18.2.0"
52
57
  },
53
58
  "prettier": "@brightlayer-ui/prettier-config",
54
59
  "files": [
55
60
  "package.json",
56
61
  "README.md",
57
62
  "LICENSE",
63
+ "LICENSES.json",
58
64
  "CHANGELOG.md",
59
65
  "/dist"
60
66
  ]