@brightlayer-ui/react-native-themes 7.0.0-alpha.1 → 7.0.0-alpha.3
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.
- package/dist/blueDarkTheme.d.ts +44 -0
- package/dist/blueDarkTheme.js +91 -1
- package/dist/blueTheme.d.ts +44 -0
- package/dist/blueTheme.js +91 -1
- package/dist/shared.d.ts +3 -5
- package/package.json +1 -1
package/dist/blueDarkTheme.d.ts
CHANGED
|
@@ -77,6 +77,50 @@ export declare const MD3BluiDarkTheme: {
|
|
|
77
77
|
surfaceContainerHighest: string;
|
|
78
78
|
disabledContainer: string;
|
|
79
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;
|
|
80
124
|
backdrop: string;
|
|
81
125
|
};
|
|
82
126
|
dark: boolean;
|
package/dist/blueDarkTheme.js
CHANGED
|
@@ -99,4 +99,94 @@ exports.MD3BluiDarkTheme = __assign(__assign({}, react_native_paper_1.MD3DarkThe
|
|
|
99
99
|
// Highest-emphasis container color
|
|
100
100
|
surfaceContainerHighest: colors_1.default.neutral[20],
|
|
101
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(),
|
|
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
|
@@ -77,6 +77,50 @@ export declare const MD3BluiLightTheme: {
|
|
|
77
77
|
surfaceContainerHighest: string;
|
|
78
78
|
disabledContainer: string;
|
|
79
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;
|
|
80
124
|
backdrop: string;
|
|
81
125
|
};
|
|
82
126
|
dark: boolean;
|
package/dist/blueTheme.js
CHANGED
|
@@ -99,4 +99,94 @@ exports.MD3BluiLightTheme = __assign(__assign({}, react_native_paper_1.MD3LightT
|
|
|
99
99
|
// Highest-emphasis container color
|
|
100
100
|
surfaceContainerHighest: colors_1.default.neutral[90],
|
|
101
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(),
|
|
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/shared.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { MD3Theme } from 'react-native-paper';
|
|
2
|
-
import { MD3Type, MD3Typescale } from 'react-native-paper/lib/typescript/types';
|
|
3
2
|
import { $DeepPartial } from '@callstack/react-theme-provider';
|
|
4
3
|
export declare const fontConfig: {
|
|
5
4
|
displaySmall: {
|
|
@@ -100,7 +99,7 @@ export declare const fontConfig: {
|
|
|
100
99
|
letterSpacing: number;
|
|
101
100
|
};
|
|
102
101
|
};
|
|
103
|
-
export type ExtendedTheme = Omit<MD3Theme, 'colors'
|
|
102
|
+
export type ExtendedTheme = Omit<MD3Theme, 'colors'> & {
|
|
104
103
|
colors: {
|
|
105
104
|
primary: string;
|
|
106
105
|
primaryContainer: string;
|
|
@@ -172,6 +171,8 @@ export type ExtendedTheme = Omit<MD3Theme, 'colors' | 'fonts'> & {
|
|
|
172
171
|
surfaceContainerHighest: string;
|
|
173
172
|
disabledContainer: string;
|
|
174
173
|
onDisabledContainer: string;
|
|
174
|
+
sliderTrack: string;
|
|
175
|
+
sliderTrackDisabled: string;
|
|
175
176
|
errorFilledContainer: string;
|
|
176
177
|
onErrorFilledContainer: string;
|
|
177
178
|
errorShadedContainer: string;
|
|
@@ -215,8 +216,5 @@ export type ExtendedTheme = Omit<MD3Theme, 'colors' | 'fonts'> & {
|
|
|
215
216
|
neutralOutlinedContainerOutline: string;
|
|
216
217
|
onNeutralOutlinedContainer: string;
|
|
217
218
|
};
|
|
218
|
-
fonts: MD3Typescale & {
|
|
219
|
-
customVariant: MD3Type;
|
|
220
|
-
};
|
|
221
219
|
};
|
|
222
220
|
export declare const useExtendedTheme: (overrides?: $DeepPartial<ExtendedTheme>) => ExtendedTheme;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@brightlayer-ui/react-native-themes",
|
|
3
3
|
"author": "Brightlayer UI <brightlayer-ui@eaton.com>",
|
|
4
4
|
"license": "BSD-3-Clause",
|
|
5
|
-
"version": "7.0.0-alpha.
|
|
5
|
+
"version": "7.0.0-alpha.3",
|
|
6
6
|
"description": "React Native themes for Brightlayer UI applications",
|
|
7
7
|
"main": "./dist/index.js",
|
|
8
8
|
"scripts": {
|