Skip to content

Commit dacdfae

Browse files
adrcotfasadrcotfas
committed
fix: update the color schema for LightTheme and DarkTheme
* see: https://m3.material.io/styles/color/roles
1 parent b49a6ff commit dacdfae

15 files changed

Lines changed: 229 additions & 118 deletions

‎example/src/index.native.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,11 @@ export default function PaperExample() {
5757
}
5858

5959
return isDarkMode
60-
? { ...MD3DarkTheme, colors: mdTheme.dark }
61-
: { ...MD3LightTheme, colors: mdTheme.light };
60+
? { ...MD3DarkTheme, colors: { ...MD3DarkTheme.colors, ...mdTheme.dark } }
61+
: {
62+
...MD3LightTheme,
63+
colors: { ...MD3LightTheme.colors, ...mdTheme.light },
64+
};
6265
}, [isDarkMode, mdTheme, shouldUseDeviceColors]);
6366

6467
React.useEffect(() => {

‎example/utils/index.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1162,71 +1162,71 @@ export const colorThemes = {
11621162
pink: {
11631163
light: {
11641164
...MD3LightTheme,
1165-
...lightPinkColors,
1165+
colors: { ...MD3LightTheme.colors, ...lightPinkColors.colors },
11661166
},
11671167
dark: {
11681168
...MD3DarkTheme,
1169-
...darkPinkColors,
1169+
colors: { ...MD3DarkTheme.colors, ...darkPinkColors.colors },
11701170
},
11711171
},
11721172
green: {
11731173
light: {
11741174
...MD3LightTheme,
1175-
...lightGreenColors,
1175+
colors: { ...MD3LightTheme.colors, ...lightGreenColors.colors },
11761176
},
11771177
dark: {
11781178
...MD3DarkTheme,
1179-
...darkGreenColors,
1179+
colors: { ...MD3DarkTheme.colors, ...darkGreenColors.colors },
11801180
},
11811181
},
11821182
blue: {
11831183
light: {
11841184
...MD3LightTheme,
1185-
...lightBlueColors,
1185+
colors: { ...MD3LightTheme.colors, ...lightBlueColors.colors },
11861186
},
11871187
dark: {
11881188
...MD3DarkTheme,
1189-
...darkBlueColors,
1189+
colors: { ...MD3DarkTheme.colors, ...darkBlueColors.colors },
11901190
},
11911191
},
11921192
orange: {
11931193
light: {
11941194
...MD3LightTheme,
1195-
...lightOrangeColors,
1195+
colors: { ...MD3LightTheme.colors, ...lightOrangeColors.colors },
11961196
},
11971197
dark: {
11981198
...MD3DarkTheme,
1199-
...darkOrangeColors,
1199+
colors: { ...MD3DarkTheme.colors, ...darkOrangeColors.colors },
12001200
},
12011201
},
12021202
red: {
12031203
light: {
12041204
...MD3LightTheme,
1205-
...lightRedColors,
1205+
colors: { ...MD3LightTheme.colors, ...lightRedColors.colors },
12061206
},
12071207
dark: {
12081208
...MD3DarkTheme,
1209-
...darkRedColors,
1209+
colors: { ...MD3DarkTheme.colors, ...darkRedColors.colors },
12101210
},
12111211
},
12121212
yellow: {
12131213
light: {
12141214
...MD3LightTheme,
1215-
...lightYellowColors,
1215+
colors: { ...MD3LightTheme.colors, ...lightYellowColors.colors },
12161216
},
12171217
dark: {
12181218
...MD3DarkTheme,
1219-
...darkYellowColors,
1219+
colors: { ...MD3DarkTheme.colors, ...darkYellowColors.colors },
12201220
},
12211221
},
12221222
cyan: {
12231223
light: {
12241224
...MD3LightTheme,
1225-
...lightCyanColors,
1225+
colors: { ...MD3LightTheme.colors, ...lightCyanColors.colors },
12261226
},
12271227
dark: {
12281228
...MD3DarkTheme,
1229-
...darkCyanColors,
1229+
colors: { ...MD3DarkTheme.colors, ...darkCyanColors.colors },
12301230
},
12311231
},
12321232
} as { [key: string]: { light: MD3Theme; dark: MD3Theme } };

‎src/components/__tests__/Appbar/Appbar.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -303,13 +303,13 @@ describe('getAppbarColors', () => {
303303

304304
it('should return v3 light color if theme version is 3', () => {
305305
expect(getAppbarBackgroundColor(getTheme(), elevation)).toBe(
306-
tokens.md.ref.palette.neutral99
306+
tokens.md.ref.palette.neutral98
307307
);
308308
});
309309

310310
it('should return v3 dark color if theme version is 3', () => {
311311
expect(getAppbarBackgroundColor(getTheme(true), elevation)).toBe(
312-
tokens.md.ref.palette.neutral10
312+
tokens.md.ref.palette.neutral6
313313
);
314314
});
315315
});

‎src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
55
collapsable={false}
66
style={
77
{
8-
"backgroundColor": "rgba(255, 251, 255, 1)",
8+
"backgroundColor": "rgba(254, 247, 255, 1)",
99
"height": 64,
1010
"shadowColor": "#000",
1111
"shadowOffset": {
@@ -23,7 +23,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
2323
style={
2424
{
2525
"alignItems": "center",
26-
"backgroundColor": "rgba(255, 251, 255, 1)",
26+
"backgroundColor": "rgba(254, 247, 255, 1)",
2727
"flex": 1,
2828
"flexDirection": "row",
2929
"paddingBottom": undefined,
@@ -46,7 +46,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
4646
collapsable={false}
4747
style={
4848
{
49-
"backgroundColor": "rgb(238, 232, 244)",
49+
"backgroundColor": "rgba(243, 237, 247, 1)",
5050
"borderRadius": 28,
5151
"shadowColor": "#000",
5252
"shadowOffset": {
@@ -64,7 +64,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
6464
style={
6565
{
6666
"alignItems": "center",
67-
"backgroundColor": "rgb(238, 232, 244)",
67+
"backgroundColor": "rgba(243, 237, 247, 1)",
6868
"borderRadius": 28,
6969
"flex": undefined,
7070
"flexDirection": "row",
@@ -409,7 +409,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
409409
collapsable={false}
410410
style={
411411
{
412-
"backgroundColor": "rgba(255, 251, 255, 1)",
412+
"backgroundColor": "rgba(254, 247, 255, 1)",
413413
"height": 64,
414414
"shadowColor": "#000",
415415
"shadowOffset": {
@@ -427,7 +427,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
427427
style={
428428
{
429429
"alignItems": "center",
430-
"backgroundColor": "rgba(255, 251, 255, 1)",
430+
"backgroundColor": "rgba(254, 247, 255, 1)",
431431
"flex": 1,
432432
"flexDirection": "row",
433433
"paddingBottom": undefined,

‎src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`Card renders an outlined card 1`] = `
55
collapsable={false}
66
style={
77
{
8-
"backgroundColor": "rgba(255, 251, 255, 1)",
8+
"backgroundColor": "rgba(254, 247, 255, 1)",
99
"borderRadius": 12,
1010
"shadowColor": "#000",
1111
"shadowOffset": {
@@ -22,7 +22,7 @@ exports[`Card renders an outlined card 1`] = `
2222
collapsable={false}
2323
style={
2424
{
25-
"backgroundColor": "rgba(255, 251, 255, 1)",
25+
"backgroundColor": "rgba(254, 247, 255, 1)",
2626
"borderRadius": 12,
2727
"flex": undefined,
2828
"shadowColor": "#000",

‎src/components/__tests__/__snapshots__/Banner.test.tsx.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`render visible banner, with custom theme 1`] = `
55
collapsable={false}
66
style={
77
{
8-
"backgroundColor": "rgb(247, 243, 249)",
8+
"backgroundColor": "rgba(255, 255, 255, 1)",
99
"opacity": 1,
1010
"shadowColor": "#000",
1111
"shadowOffset": {
@@ -22,7 +22,7 @@ exports[`render visible banner, with custom theme 1`] = `
2222
collapsable={false}
2323
style={
2424
{
25-
"backgroundColor": "rgb(247, 243, 249)",
25+
"backgroundColor": "rgba(255, 255, 255, 1)",
2626
"flex": undefined,
2727
"shadowColor": "#000",
2828
"shadowOffset": {
@@ -278,7 +278,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
278278
collapsable={false}
279279
style={
280280
{
281-
"backgroundColor": "rgb(247, 243, 249)",
281+
"backgroundColor": "rgba(255, 255, 255, 1)",
282282
"opacity": 0,
283283
"shadowColor": "#000",
284284
"shadowOffset": {
@@ -295,7 +295,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
295295
collapsable={false}
296296
style={
297297
{
298-
"backgroundColor": "rgb(247, 243, 249)",
298+
"backgroundColor": "rgba(255, 255, 255, 1)",
299299
"flex": undefined,
300300
"shadowColor": "#000",
301301
"shadowOffset": {
@@ -413,7 +413,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
413413
collapsable={false}
414414
style={
415415
{
416-
"backgroundColor": "rgb(247, 243, 249)",
416+
"backgroundColor": "rgba(255, 255, 255, 1)",
417417
"opacity": 1,
418418
"shadowColor": "#000",
419419
"shadowOffset": {
@@ -430,7 +430,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
430430
collapsable={false}
431431
style={
432432
{
433-
"backgroundColor": "rgb(247, 243, 249)",
433+
"backgroundColor": "rgba(255, 255, 255, 1)",
434434
"flex": undefined,
435435
"shadowColor": "#000",
436436
"shadowOffset": {
@@ -708,7 +708,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
708708
collapsable={false}
709709
style={
710710
{
711-
"backgroundColor": "rgb(247, 243, 249)",
711+
"backgroundColor": "rgba(255, 255, 255, 1)",
712712
"opacity": 1,
713713
"shadowColor": "#000",
714714
"shadowOffset": {
@@ -725,7 +725,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
725725
collapsable={false}
726726
style={
727727
{
728-
"backgroundColor": "rgb(247, 243, 249)",
728+
"backgroundColor": "rgba(255, 255, 255, 1)",
729729
"flex": undefined,
730730
"shadowColor": "#000",
731731
"shadowOffset": {
@@ -1130,7 +1130,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
11301130
collapsable={false}
11311131
style={
11321132
{
1133-
"backgroundColor": "rgb(247, 243, 249)",
1133+
"backgroundColor": "rgba(255, 255, 255, 1)",
11341134
"opacity": 1,
11351135
"shadowColor": "#000",
11361136
"shadowOffset": {
@@ -1147,7 +1147,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
11471147
collapsable={false}
11481148
style={
11491149
{
1150-
"backgroundColor": "rgb(247, 243, 249)",
1150+
"backgroundColor": "rgba(255, 255, 255, 1)",
11511151
"flex": undefined,
11521152
"shadowColor": "#000",
11531153
"shadowOffset": {
@@ -1275,7 +1275,7 @@ exports[`renders visible banner, without action buttons and without image 1`] =
12751275
collapsable={false}
12761276
style={
12771277
{
1278-
"backgroundColor": "rgb(247, 243, 249)",
1278+
"backgroundColor": "rgba(255, 255, 255, 1)",
12791279
"opacity": 1,
12801280
"shadowColor": "#000",
12811281
"shadowOffset": {
@@ -1292,7 +1292,7 @@ exports[`renders visible banner, without action buttons and without image 1`] =
12921292
collapsable={false}
12931293
style={
12941294
{
1295-
"backgroundColor": "rgb(247, 243, 249)",
1295+
"backgroundColor": "rgba(255, 255, 255, 1)",
12961296
"flex": undefined,
12971297
"shadowColor": "#000",
12981298
"shadowOffset": {

0 commit comments

Comments
 (0)