Skip to content

Commit 709325e

Browse files
adrcotfasadrcotfas
authored
fix(MD3): update color schema and tokens (#4900)
* fix: update colors as per material-components color tokens * see https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/color/res/values/tokens.xml * fix: update the color schema for LightTheme and DarkTheme * see: https://m3.material.io/styles/color/roles
1 parent 1369526 commit 709325e

31 files changed

Lines changed: 544 additions & 417 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: 10 additions & 10 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, 254, 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, 254, 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",
@@ -217,7 +217,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
217217
accessibilityRole="search"
218218
keyboardAppearance="light"
219219
placeholder="Search"
220-
placeholderTextColor="rgba(28, 27, 31, 1)"
220+
placeholderTextColor="rgba(29, 27, 32, 1)"
221221
returnKeyType="search"
222222
selectionColor="rgba(103, 80, 164, 1)"
223223
style={
@@ -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, 254, 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, 254, 1)",
430+
"backgroundColor": "rgba(254, 247, 255, 1)",
431431
"flex": 1,
432432
"flexDirection": "row",
433433
"paddingBottom": undefined,
@@ -614,7 +614,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
614614
},
615615
{
616616
"height": 21,
617-
"tintColor": "rgba(28, 27, 31, 1)",
617+
"tintColor": "rgba(29, 27, 32, 1)",
618618
"width": 21,
619619
},
620620
]
@@ -659,7 +659,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
659659
"textAlign": "left",
660660
},
661661
{
662-
"color": "rgba(28, 27, 31, 1)",
662+
"color": "rgba(29, 27, 32, 1)",
663663
"writingDirection": "ltr",
664664
},
665665
[
@@ -672,7 +672,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
672672
},
673673
[
674674
{
675-
"color": "rgba(28, 27, 31, 1)",
675+
"color": "rgba(29, 27, 32, 1)",
676676
"fontFamily": "System",
677677
"fontSize": 22,
678678
"fontWeight": "400",

‎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, 254, 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, 254, 1)",
25+
"backgroundColor": "rgba(254, 247, 255, 1)",
2626
"borderRadius": 12,
2727
"flex": undefined,
2828
"shadowColor": "#000",

‎src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ exports[`can render leading checkbox control 1`] = `
147147
"textAlign": "left",
148148
},
149149
{
150-
"color": "rgba(28, 27, 31, 1)",
150+
"color": "rgba(29, 27, 32, 1)",
151151
"writingDirection": "ltr",
152152
},
153153
[
@@ -164,7 +164,7 @@ exports[`can render leading checkbox control 1`] = `
164164
"flexShrink": 1,
165165
},
166166
{
167-
"color": "rgba(28, 27, 31, 1)",
167+
"color": "rgba(29, 27, 32, 1)",
168168
"textAlign": "right",
169169
},
170170
undefined,
@@ -244,7 +244,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
244244
"textAlign": "left",
245245
},
246246
{
247-
"color": "rgba(28, 27, 31, 1)",
247+
"color": "rgba(29, 27, 32, 1)",
248248
"writingDirection": "ltr",
249249
},
250250
[
@@ -261,7 +261,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
261261
"flexShrink": 1,
262262
},
263263
{
264-
"color": "rgba(28, 27, 31, 1)",
264+
"color": "rgba(29, 27, 32, 1)",
265265
"textAlign": "left",
266266
},
267267
undefined,
@@ -460,7 +460,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
460460
"textAlign": "left",
461461
},
462462
{
463-
"color": "rgba(28, 27, 31, 1)",
463+
"color": "rgba(29, 27, 32, 1)",
464464
"writingDirection": "ltr",
465465
},
466466
[
@@ -477,7 +477,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
477477
"flexShrink": 1,
478478
},
479479
{
480-
"color": "rgba(28, 27, 31, 1)",
480+
"color": "rgba(29, 27, 32, 1)",
481481
"textAlign": "left",
482482
},
483483
undefined,
@@ -640,7 +640,7 @@ exports[`renders unchecked 1`] = `
640640
"textAlign": "left",
641641
},
642642
{
643-
"color": "rgba(28, 27, 31, 1)",
643+
"color": "rgba(29, 27, 32, 1)",
644644
"writingDirection": "ltr",
645645
},
646646
[
@@ -657,7 +657,7 @@ exports[`renders unchecked 1`] = `
657657
"flexShrink": 1,
658658
},
659659
{
660-
"color": "rgba(28, 27, 31, 1)",
660+
"color": "rgba(29, 27, 32, 1)",
661661
"textAlign": "left",
662662
},
663663
undefined,

‎src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ exports[`can render leading radio button control 1`] = `
145145
"textAlign": "left",
146146
},
147147
{
148-
"color": "rgba(28, 27, 31, 1)",
148+
"color": "rgba(29, 27, 32, 1)",
149149
"writingDirection": "ltr",
150150
},
151151
[
@@ -162,7 +162,7 @@ exports[`can render leading radio button control 1`] = `
162162
"flexShrink": 1,
163163
},
164164
{
165-
"color": "rgba(28, 27, 31, 1)",
165+
"color": "rgba(29, 27, 32, 1)",
166166
"textAlign": "right",
167167
},
168168
undefined,
@@ -239,7 +239,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
239239
"textAlign": "left",
240240
},
241241
{
242-
"color": "rgba(28, 27, 31, 1)",
242+
"color": "rgba(29, 27, 32, 1)",
243243
"writingDirection": "ltr",
244244
},
245245
[
@@ -256,7 +256,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
256256
"flexShrink": 1,
257257
},
258258
{
259-
"color": "rgba(28, 27, 31, 1)",
259+
"color": "rgba(29, 27, 32, 1)",
260260
"textAlign": "left",
261261
},
262262
undefined,
@@ -390,7 +390,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
390390
"textAlign": "left",
391391
},
392392
{
393-
"color": "rgba(28, 27, 31, 1)",
393+
"color": "rgba(29, 27, 32, 1)",
394394
"writingDirection": "ltr",
395395
},
396396
[
@@ -407,7 +407,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
407407
"flexShrink": 1,
408408
},
409409
{
410-
"color": "rgba(28, 27, 31, 1)",
410+
"color": "rgba(29, 27, 32, 1)",
411411
"textAlign": "left",
412412
},
413413
undefined,
@@ -567,7 +567,7 @@ exports[`renders unchecked 1`] = `
567567
"textAlign": "left",
568568
},
569569
{
570-
"color": "rgba(28, 27, 31, 1)",
570+
"color": "rgba(29, 27, 32, 1)",
571571
"writingDirection": "ltr",
572572
},
573573
[
@@ -584,7 +584,7 @@ exports[`renders unchecked 1`] = `
584584
"flexShrink": 1,
585585
},
586586
{
587-
"color": "rgba(28, 27, 31, 1)",
587+
"color": "rgba(29, 27, 32, 1)",
588588
"textAlign": "left",
589589
},
590590
undefined,

0 commit comments

Comments
 (0)