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