From acb861e7b735ff6e54a64c45c2559b1135b9e34d Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Tue, 31 Mar 2026 16:07:01 +0300 Subject: [PATCH 01/14] fix(tokens): 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 --- src/styles/themes/v3/tokens.tsx | 38 +++++++++++++++++++++++---------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/src/styles/themes/v3/tokens.tsx b/src/styles/themes/v3/tokens.tsx index d008944d86..6eb27445fd 100644 --- a/src/styles/themes/v3/tokens.tsx +++ b/src/styles/themes/v3/tokens.tsx @@ -6,6 +6,7 @@ const ref = { palette: { primary100: 'rgba(255, 255, 255, 1)', primary99: 'rgba(255, 251, 254, 1)', + primary98: 'rgba(254, 247, 255, 1)', primary95: 'rgba(246, 237, 255, 1)', primary90: 'rgba(234, 221, 255, 1)', primary80: 'rgba(208, 188, 255, 1)', @@ -19,6 +20,7 @@ const ref = { primary0: 'rgba(0, 0, 0, 1)', secondary100: 'rgba(255, 255, 255, 1)', secondary99: 'rgba(255, 251, 254, 1)', + secondary98: 'rgba(254, 247, 255, 1)', secondary95: 'rgba(246, 237, 255, 1)', secondary90: 'rgba(232, 222, 248, 1)', secondary80: 'rgba(204, 194, 220, 1)', @@ -32,6 +34,7 @@ const ref = { secondary0: 'rgba(0, 0, 0, 1)', tertiary100: 'rgba(255, 255, 255, 1)', tertiary99: 'rgba(255, 251, 250, 1)', + tertiary98: 'rgba(255, 248, 248, 1)', tertiary95: 'rgba(255, 236, 241, 1)', tertiary90: 'rgba(255, 216, 228, 1)', tertiary80: 'rgba(239, 184, 200, 1)', @@ -44,20 +47,32 @@ const ref = { tertiary10: 'rgba(49, 17, 29, 1)', tertiary0: 'rgba(0, 0, 0, 1)', neutral100: 'rgba(255, 255, 255, 1)', - neutral99: 'rgba(255, 251, 254, 1)', - neutral95: 'rgba(244, 239, 244, 1)', - neutral90: 'rgba(230, 225, 229, 1)', - neutral80: 'rgba(201, 197, 202, 1)', - neutral70: 'rgba(174, 170, 174, 1)', - neutral60: 'rgba(147, 144, 148, 1)', - neutral50: 'rgba(120, 117, 121, 1)', - neutral40: 'rgba(96, 93, 98, 1)', - neutral30: 'rgba(72, 70, 73, 1)', - neutral20: 'rgba(49, 48, 51, 1)', - neutral10: 'rgba(28, 27, 31, 1)', + neutral99: 'rgba(255, 251, 255, 1)', + neutral98: 'rgba(254, 247, 255, 1)', + neutral96: 'rgba(247, 242, 250, 1)', + neutral95: 'rgba(245, 239, 247, 1)', + neutral94: 'rgba(243, 237, 247, 1)', + neutral92: 'rgba(236, 230, 240, 1)', + neutral90: 'rgba(230, 224, 233, 1)', + neutral87: 'rgba(222, 216, 225, 1)', + neutral80: 'rgba(202, 197, 205, 1)', + neutral70: 'rgba(174, 169, 177, 1)', + neutral60: 'rgba(147, 143, 150, 1)', + neutral50: 'rgba(121, 118, 125, 1)', + neutral40: 'rgba(96, 93, 100, 1)', + neutral30: 'rgba(72, 70, 76, 1)', + neutral24: 'rgba(59, 56, 62, 1)', + neutral22: 'rgba(54, 52, 59, 1)', + neutral20: 'rgba(50, 47, 53, 1)', + neutral17: 'rgba(43, 41, 48, 1)', + neutral12: 'rgba(33, 31, 38, 1)', + neutral10: 'rgba(29, 27, 32, 1)', + neutral6: 'rgba(20, 18, 24, 1)', + neutral4: 'rgba(15, 13, 19, 1)', neutral0: 'rgba(0, 0, 0, 1)', neutralVariant100: 'rgba(255, 255, 255, 1)', neutralVariant99: 'rgba(255, 251, 254, 1)', + neutralVariant98: 'rgba(253, 247, 255, 1)', neutralVariant95: 'rgba(245, 238, 250, 1)', neutralVariant90: 'rgba(231, 224, 236, 1)', neutralVariant80: 'rgba(202, 196, 208, 1)', @@ -71,6 +86,7 @@ const ref = { neutralVariant0: 'rgba(0, 0, 0, 1)', error100: 'rgba(255, 255, 255, 1)', error99: 'rgba(255, 251, 249, 1)', + error98: 'rgba(255, 248, 247, 1)', error95: 'rgba(252, 238, 238, 1)', error90: 'rgba(249, 222, 220, 1)', error80: 'rgba(242, 184, 181, 1)', From 9aad14cc0038f33558cd37d1773384df25aa0f64 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Tue, 31 Mar 2026 16:17:46 +0300 Subject: [PATCH 02/14] feat: update the color schema for MD3LightTheme and MD3DarkTheme * see: https://m3.material.io/styles/color/roles --- src/styles/themes/v3/DarkTheme.tsx | 38 +++++++++++++++++-------- src/styles/themes/v3/LightTheme.tsx | 44 ++++++++++++++++++++--------- src/types.tsx | 44 +++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+), 25 deletions(-) diff --git a/src/styles/themes/v3/DarkTheme.tsx b/src/styles/themes/v3/DarkTheme.tsx index 9823e677bd..271e9950f9 100644 --- a/src/styles/themes/v3/DarkTheme.tsx +++ b/src/styles/themes/v3/DarkTheme.tsx @@ -19,13 +19,20 @@ export const MD3DarkTheme: MD3Theme = { secondaryContainer: palette.secondary30, tertiary: palette.tertiary80, tertiaryContainer: palette.tertiary30, - surface: palette.neutral10, + surface: palette.neutral6, + surfaceDim: palette.neutral6, + surfaceBright: palette.neutral24, + surfaceContainerLowest: palette.neutral4, + surfaceContainerLow: palette.neutral10, + surfaceContainer: palette.neutral12, + surfaceContainerHigh: palette.neutral17, + surfaceContainerHighest: palette.neutral22, surfaceVariant: palette.neutralVariant30, surfaceDisabled: color(palette.neutral90) .alpha(opacity.level2) .rgb() .string(), - background: palette.neutral10, + background: palette.neutral6, error: palette.error80, errorContainer: palette.error30, onPrimary: palette.primary20, @@ -41,26 +48,35 @@ export const MD3DarkTheme: MD3Theme = { .rgb() .string(), onError: palette.error20, - onErrorContainer: palette.error80, + onErrorContainer: palette.error90, onBackground: palette.neutral90, outline: palette.neutralVariant60, outlineVariant: palette.neutralVariant30, inverseSurface: palette.neutral90, inverseOnSurface: palette.neutral20, inversePrimary: palette.primary40, + primaryFixed: palette.primary90, + primaryFixedDim: palette.primary80, + onPrimaryFixed: palette.primary10, + onPrimaryFixedVariant: palette.primary30, + secondaryFixed: palette.secondary90, + secondaryFixedDim: palette.secondary80, + onSecondaryFixed: palette.secondary10, + onSecondaryFixedVariant: palette.secondary30, + tertiaryFixed: palette.tertiary90, + tertiaryFixedDim: palette.tertiary80, + onTertiaryFixed: palette.tertiary10, + onTertiaryFixedVariant: palette.tertiary30, shadow: palette.neutral0, scrim: palette.neutral0, backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(), elevation: { level0: 'transparent', - // Note: Color values with transparency cause RN to transfer shadows to children nodes - // instead of View component in Surface. Providing solid background fixes the issue. - // Opaque color values generated with `palette.primary80` used as background - level1: 'rgb(37, 35, 42)', // palette.primary80, alpha 0.05 - level2: 'rgb(44, 40, 49)', // palette.primary80, alpha 0.08 - level3: 'rgb(49, 44, 56)', // palette.primary80, alpha 0.11 - level4: 'rgb(51, 46, 58)', // palette.primary80, alpha 0.12 - level5: 'rgb(52, 49, 63)', // palette.primary80, alpha 0.14 + level1: palette.neutral4, + level2: palette.neutral10, + level3: palette.neutral12, + level4: palette.neutral17, + level5: palette.neutral22, }, }, }; diff --git a/src/styles/themes/v3/LightTheme.tsx b/src/styles/themes/v3/LightTheme.tsx index 99e0d11ab4..5100f27bcd 100644 --- a/src/styles/themes/v3/LightTheme.tsx +++ b/src/styles/themes/v3/LightTheme.tsx @@ -18,21 +18,28 @@ export const MD3LightTheme: MD3Theme = { secondaryContainer: palette.secondary90, tertiary: palette.tertiary40, tertiaryContainer: palette.tertiary90, - surface: palette.neutral99, + surface: palette.neutral98, + surfaceDim: palette.neutral87, + surfaceBright: palette.neutral98, + surfaceContainerLowest: palette.neutral100, + surfaceContainerLow: palette.neutral96, + surfaceContainer: palette.neutral94, + surfaceContainerHigh: palette.neutral92, + surfaceContainerHighest: palette.neutral90, surfaceVariant: palette.neutralVariant90, surfaceDisabled: color(palette.neutral10) .alpha(opacity.level2) .rgb() .string(), - background: palette.neutral99, + background: palette.neutral98, error: palette.error40, errorContainer: palette.error90, onPrimary: palette.primary100, - onPrimaryContainer: palette.primary10, + onPrimaryContainer: palette.primary30, onSecondary: palette.secondary100, - onSecondaryContainer: palette.secondary10, + onSecondaryContainer: palette.secondary30, onTertiary: palette.tertiary100, - onTertiaryContainer: palette.tertiary10, + onTertiaryContainer: palette.tertiary30, onSurface: palette.neutral10, onSurfaceVariant: palette.neutralVariant30, onSurfaceDisabled: color(palette.neutral10) @@ -40,26 +47,35 @@ export const MD3LightTheme: MD3Theme = { .rgb() .string(), onError: palette.error100, - onErrorContainer: palette.error10, + onErrorContainer: palette.error30, onBackground: palette.neutral10, outline: palette.neutralVariant50, outlineVariant: palette.neutralVariant80, inverseSurface: palette.neutral20, inverseOnSurface: palette.neutral95, inversePrimary: palette.primary80, + primaryFixed: palette.primary90, + primaryFixedDim: palette.primary80, + onPrimaryFixed: palette.primary10, + onPrimaryFixedVariant: palette.primary30, + secondaryFixed: palette.secondary90, + secondaryFixedDim: palette.secondary80, + onSecondaryFixed: palette.secondary10, + onSecondaryFixedVariant: palette.secondary30, + tertiaryFixed: palette.tertiary90, + tertiaryFixedDim: palette.tertiary80, + onTertiaryFixed: palette.tertiary10, + onTertiaryFixedVariant: palette.tertiary30, shadow: palette.neutral0, scrim: palette.neutral0, backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(), elevation: { level0: 'transparent', - // Note: Color values with transparency cause RN to transfer shadows to children nodes - // instead of View component in Surface. Providing solid background fixes the issue. - // Opaque color values generated with `palette.primary99` used as background - level1: 'rgb(247, 243, 249)', // palette.primary40, alpha 0.05 - level2: 'rgb(243, 237, 246)', // palette.primary40, alpha 0.08 - level3: 'rgb(238, 232, 244)', // palette.primary40, alpha 0.11 - level4: 'rgb(236, 230, 243)', // palette.primary40, alpha 0.12 - level5: 'rgb(233, 227, 241)', // palette.primary40, alpha 0.14 + level1: palette.neutral100, + level2: palette.neutral96, + level3: palette.neutral94, + level4: palette.neutral92, + level5: palette.neutral90, }, }, fonts: configureFonts(), diff --git a/src/types.tsx b/src/types.tsx index 175131cab3..eee7059b0f 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -51,8 +51,17 @@ export type MD3Colors = { tertiary: string; tertiaryContainer: string; surface: string; + surfaceDim: string; + surfaceBright: string; + surfaceContainerLowest: string; + surfaceContainerLow: string; + surfaceContainer: string; + surfaceContainerHigh: string; + surfaceContainerHighest: string; + /** @deprecated Use surfaceContainerHighest instead */ surfaceVariant: string; surfaceDisabled: string; + /** @deprecated Use surface instead */ background: string; error: string; errorContainer: string; @@ -67,12 +76,25 @@ export type MD3Colors = { onSurfaceDisabled: string; onError: string; onErrorContainer: string; + /** @deprecated Use onSurface instead */ onBackground: string; outline: string; outlineVariant: string; inverseSurface: string; inverseOnSurface: string; inversePrimary: string; + primaryFixed: string; + primaryFixedDim: string; + onPrimaryFixed: string; + onPrimaryFixedVariant: string; + secondaryFixed: string; + secondaryFixedDim: string; + onSecondaryFixed: string; + onSecondaryFixedVariant: string; + tertiaryFixed: string; + tertiaryFixedDim: string; + onTertiaryFixed: string; + onTertiaryFixedVariant: string; shadow: string; scrim: string; backdrop: string; @@ -87,7 +109,16 @@ export type MD3AndroidColors = { tertiary: number; tertiaryContainer: number; surface: number; + surfaceDim: number; + surfaceBright: number; + surfaceContainerLowest: number; + surfaceContainerLow: number; + surfaceContainer: number; + surfaceContainerHigh: number; + surfaceContainerHighest: number; + /** @deprecated Use surfaceContainerHighest instead */ surfaceVariant: number; + /** @deprecated Use surface instead */ background: number; error: number; errorContainer: number; @@ -101,12 +132,25 @@ export type MD3AndroidColors = { onSurfaceVariant: number; onError: number; onErrorContainer: number; + /** @deprecated Use onSurface instead */ onBackground: number; outline: number; outlineVariant: number; inverseSurface: number; inverseOnSurface: number; inversePrimary: number; + primaryFixed: number; + primaryFixedDim: number; + onPrimaryFixed: number; + onPrimaryFixedVariant: number; + secondaryFixed: number; + secondaryFixedDim: number; + onSecondaryFixed: number; + onSecondaryFixedVariant: number; + tertiaryFixed: number; + tertiaryFixedDim: number; + onTertiaryFixed: number; + onTertiaryFixedVariant: number; shadow: number; scrim: number; }; From 02cb6c6f9f51b452fea8028e92e6c19110222ec8 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Tue, 31 Mar 2026 16:18:33 +0300 Subject: [PATCH 03/14] test: update snapshots --- .../__tests__/Appbar/Appbar.test.tsx | 4 +- .../Appbar/__snapshots__/Appbar.test.tsx.snap | 20 +- .../__tests__/BottomNavigation.test.tsx | 2 +- .../Card/__snapshots__/Card.test.tsx.snap | 4 +- .../__snapshots__/CheckboxItem.test.tsx.snap | 16 +- .../RadioButtonItem.test.tsx.snap | 16 +- .../__snapshots__/Caption.test.tsx.snap | 8 +- .../__snapshots__/Text.test.tsx.snap | 32 +-- .../__snapshots__/AnimatedFAB.test.tsx.snap | 12 +- .../__snapshots__/Avatar.test.tsx.snap | 8 +- .../__snapshots__/Banner.test.tsx.snap | 56 ++--- .../BottomNavigation.test.tsx.snap | 192 +++++++++--------- .../__snapshots__/Button.test.tsx.snap | 28 +-- .../__snapshots__/Chip.test.tsx.snap | 30 +-- .../__snapshots__/DataTable.test.tsx.snap | 70 +++---- .../__snapshots__/DrawerItem.test.tsx.snap | 10 +- .../__tests__/__snapshots__/FAB.test.tsx.snap | 38 ++-- .../__snapshots__/IconButton.test.tsx.snap | 4 +- .../__snapshots__/ListAccordion.test.tsx.snap | 36 ++-- .../__snapshots__/ListItem.test.tsx.snap | 40 ++-- .../__snapshots__/ListSection.test.tsx.snap | 187 +++++++++++------ .../__snapshots__/Menu.test.tsx.snap | 30 +-- .../__snapshots__/MenuItem.test.tsx.snap | 24 +-- .../__snapshots__/Searchbar.test.tsx.snap | 18 +- .../SegmentedButton.test.tsx.snap | 8 +- .../__snapshots__/Snackbar.test.tsx.snap | 26 +-- .../__snapshots__/TextInput.test.tsx.snap | 22 +- .../__snapshots__/ToggleButton.test.tsx.snap | 12 +- 28 files changed, 505 insertions(+), 448 deletions(-) diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx index 6f76dab75b..7a136e8b22 100644 --- a/src/components/__tests__/Appbar/Appbar.test.tsx +++ b/src/components/__tests__/Appbar/Appbar.test.tsx @@ -401,13 +401,13 @@ describe('getAppbarColors', () => { it('should return v3 light color if theme version is 3', () => { expect(getAppbarBackgroundColor(getTheme(), elevation)).toBe( - tokens.md.ref.palette.neutral99 + tokens.md.ref.palette.neutral98 ); }); it('should return v3 dark color if theme version is 3', () => { expect(getAppbarBackgroundColor(getTheme(true), elevation)).toBe( - tokens.md.ref.palette.neutral10 + tokens.md.ref.palette.neutral6 ); }); diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 4a62c376d8..4ac36a0189 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "height": 64, "shadowColor": "#000", "shadowOffset": { @@ -23,7 +23,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "flex": 1, "flexDirection": "row", "paddingBottom": undefined, @@ -46,7 +46,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -64,7 +64,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -217,7 +217,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` accessibilityRole="search" keyboardAppearance="light" placeholder="Search" - placeholderTextColor="rgba(28, 27, 31, 1)" + placeholderTextColor="rgba(29, 27, 32, 1)" returnKeyType="search" selectionColor="rgba(103, 80, 164, 1)" style={ @@ -409,7 +409,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A collapsable={false} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "height": 64, "shadowColor": "#000", "shadowOffset": { @@ -427,7 +427,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A style={ { "alignItems": "center", - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "flex": 1, "flexDirection": "row", "paddingBottom": undefined, @@ -614,7 +614,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A }, { "height": 21, - "tintColor": "rgba(28, 27, 31, 1)", + "tintColor": "rgba(29, 27, 32, 1)", "width": 21, }, ] @@ -659,7 +659,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -672,7 +672,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A }, [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 22, "fontWeight": "400", diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx index 43c1e9383b..11a213eebc 100644 --- a/src/components/__tests__/BottomNavigation.test.tsx +++ b/src/components/__tests__/BottomNavigation.test.tsx @@ -481,7 +481,7 @@ describe('getActiveTintColor', () => { it.each` activeColor | defaultColor | useV3 | expected ${'#FBF7DB'} | ${'#fff'} | ${true} | ${'#FBF7DB'} - ${undefined} | ${'#fff'} | ${true} | ${MD3Colors.secondary10} + ${undefined} | ${'#fff'} | ${true} | ${getTheme(false, true).colors.onSecondaryContainer} ${undefined} | ${'#fff'} | ${false} | ${'#fff'} `( 'returns $expected when activeColor: $activeColor and useV3: $useV3', diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap index 301eea942c..a5a8abd1ac 100644 --- a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap +++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Card renders an outlined card 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "borderRadius": 12, "shadowColor": "#000", "shadowOffset": { @@ -22,7 +22,7 @@ exports[`Card renders an outlined card 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "borderRadius": 12, "flex": undefined, "shadowColor": "#000", diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index b5f1d87e77..f8b992bcbb 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -147,7 +147,7 @@ exports[`can render leading checkbox control 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -165,7 +165,7 @@ exports[`can render leading checkbox control 1`] = ` }, false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "textAlign": "right", }, undefined, @@ -245,7 +245,7 @@ exports[`can render the Android checkbox on different platforms 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -263,7 +263,7 @@ exports[`can render the Android checkbox on different platforms 1`] = ` }, false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "textAlign": "left", }, undefined, @@ -462,7 +462,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -480,7 +480,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` }, false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "textAlign": "left", }, undefined, @@ -643,7 +643,7 @@ exports[`renders unchecked 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -661,7 +661,7 @@ exports[`renders unchecked 1`] = ` }, false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "textAlign": "left", }, undefined, diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index dfbe5fa131..75d34f5545 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -145,7 +145,7 @@ exports[`can render leading radio button control 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -163,7 +163,7 @@ exports[`can render leading radio button control 1`] = ` }, false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "textAlign": "right", }, undefined, @@ -240,7 +240,7 @@ exports[`can render the Android radio button on different platforms 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -258,7 +258,7 @@ exports[`can render the Android radio button on different platforms 1`] = ` }, false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "textAlign": "left", }, undefined, @@ -392,7 +392,7 @@ exports[`can render the iOS radio button on different platforms 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -410,7 +410,7 @@ exports[`can render the iOS radio button on different platforms 1`] = ` }, false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "textAlign": "left", }, undefined, @@ -570,7 +570,7 @@ exports[`renders unchecked 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -588,7 +588,7 @@ exports[`renders unchecked 1`] = ` }, false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "textAlign": "left", }, undefined, diff --git a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap index 1120e943ca..8433f85658 100644 --- a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap +++ b/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap @@ -5,7 +5,7 @@ exports[`renders caption applying style 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, { "textAlign": "left", @@ -15,7 +15,7 @@ exports[`renders caption applying style 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 0.54)", + "color": "rgba(29, 27, 32, 0.54)", "writingDirection": "ltr", }, [ @@ -43,7 +43,7 @@ exports[`renders caption with children as content 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, { "textAlign": "left", @@ -53,7 +53,7 @@ exports[`renders caption with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 0.54)", + "color": "rgba(29, 27, 32, 0.54)", "writingDirection": "ltr", }, [ diff --git a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap index a47cd14611..5b87989124 100644 --- a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap +++ b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap @@ -9,7 +9,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -34,7 +34,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -59,7 +59,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -84,7 +84,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -109,7 +109,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -134,7 +134,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -159,7 +159,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -184,7 +184,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -209,7 +209,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -234,7 +234,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -259,7 +259,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -284,7 +284,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -309,7 +309,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -334,7 +334,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -359,7 +359,7 @@ exports[`renders every variant of Text with children as content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -386,7 +386,7 @@ exports[`renders v3 Text component with custom variant correctly 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap index eea7087336..fa124295a5 100644 --- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap @@ -228,7 +228,7 @@ exports[`renders animated fab 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -260,7 +260,7 @@ exports[`renders animated fab 1`] = ` onTextLayout={[Function]} style={ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -515,7 +515,7 @@ exports[`renders animated fab with label on the left 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -547,7 +547,7 @@ exports[`renders animated fab with label on the left 1`] = ` onTextLayout={[Function]} style={ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -804,7 +804,7 @@ exports[`renders animated fab with label on the right by default 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -836,7 +836,7 @@ exports[`renders animated fab with label on the right by default 1`] = ` onTextLayout={[Function]} style={ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", diff --git a/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap index c73f2ae180..9e55666cef 100644 --- a/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -158,7 +158,7 @@ exports[`renders avatar with text 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -212,7 +212,7 @@ exports[`renders avatar with text and custom background color 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -266,7 +266,7 @@ exports[`renders avatar with text and custom colors 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -320,7 +320,7 @@ exports[`renders avatar with text and custom size 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index b1aaff7ab0..bebf3b8726 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -5,7 +5,7 @@ exports[`render visible banner, with custom theme 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -22,7 +22,7 @@ exports[`render visible banner, with custom theme 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -81,7 +81,7 @@ exports[`render visible banner, with custom theme 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -95,7 +95,7 @@ exports[`render visible banner, with custom theme 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] @@ -217,7 +217,7 @@ exports[`render visible banner, with custom theme 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -275,7 +275,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 0, "shadowColor": "#000", "shadowOffset": { @@ -292,7 +292,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -363,7 +363,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -377,7 +377,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] @@ -406,7 +406,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -423,7 +423,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -504,7 +504,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -518,7 +518,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] @@ -640,7 +640,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -698,7 +698,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -715,7 +715,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -774,7 +774,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -788,7 +788,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] @@ -910,7 +910,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1060,7 +1060,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1118,7 +1118,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -1135,7 +1135,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -1216,7 +1216,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1230,7 +1230,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] @@ -1259,7 +1259,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -1276,7 +1276,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = collapsable={false} style={ { - "backgroundColor": "rgb(247, 243, 249)", + "backgroundColor": "rgba(255, 255, 255, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -1335,7 +1335,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1349,7 +1349,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = "margin": 8, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, ], ] diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap index cc788ce0b9..afbb5be850 100644 --- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap @@ -20,7 +20,7 @@ exports[`allows customizing Route's type via generics 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -113,7 +113,7 @@ exports[`allows customizing Route's type via generics 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -313,7 +313,7 @@ exports[`allows customizing Route's type via generics 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -332,7 +332,7 @@ exports[`allows customizing Route's type via generics 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 12, "fontWeight": "500", @@ -369,7 +369,7 @@ exports[`allows customizing Route's type via generics 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -388,7 +388,7 @@ exports[`allows customizing Route's type via generics 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 12, "fontWeight": "500", @@ -567,7 +567,7 @@ exports[`allows customizing Route's type via generics 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -623,7 +623,7 @@ exports[`allows customizing Route's type via generics 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -687,7 +687,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -780,7 +780,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -908,7 +908,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -1102,7 +1102,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -1296,7 +1296,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -1428,7 +1428,7 @@ exports[`hides labels in shifting bottom navigation 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -1521,7 +1521,7 @@ exports[`hides labels in shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -1649,7 +1649,7 @@ exports[`hides labels in shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -1843,7 +1843,7 @@ exports[`hides labels in shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -2037,7 +2037,7 @@ exports[`hides labels in shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -2169,7 +2169,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -2394,7 +2394,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -2521,7 +2521,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -2654,7 +2654,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -2673,7 +2673,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 12, "fontWeight": "500", @@ -2710,7 +2710,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -2729,7 +2729,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 12, "fontWeight": "500", @@ -2835,7 +2835,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -2968,7 +2968,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -3024,7 +3024,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -3149,7 +3149,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -3282,7 +3282,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -3338,7 +3338,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -3463,7 +3463,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -3596,7 +3596,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -3652,7 +3652,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -3777,7 +3777,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -3910,7 +3910,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -3966,7 +3966,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -4030,7 +4030,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -4123,7 +4123,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -4255,7 +4255,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -4388,7 +4388,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -4407,7 +4407,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 12, "fontWeight": "500", @@ -4518,7 +4518,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -4651,7 +4651,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -4781,7 +4781,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -4914,7 +4914,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -5044,7 +5044,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -5177,7 +5177,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -5307,7 +5307,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -5440,7 +5440,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -5504,7 +5504,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -5597,7 +5597,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -5790,7 +5790,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` } > Route: 0 @@ -5809,7 +5809,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` } > Route: 0 @@ -6206,7 +6206,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -6299,7 +6299,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -6497,7 +6497,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` } > Route: 0 @@ -7200,7 +7200,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -7293,7 +7293,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -7553,7 +7553,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -7609,7 +7609,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -7867,7 +7867,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -7923,7 +7923,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -8181,7 +8181,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -8237,7 +8237,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -8301,7 +8301,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -8394,7 +8394,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -8659,7 +8659,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -8922,7 +8922,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -9185,7 +9185,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -9249,7 +9249,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -9342,7 +9342,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -9469,7 +9469,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -9602,7 +9602,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -9621,7 +9621,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 12, "fontWeight": "500", @@ -9658,7 +9658,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -9677,7 +9677,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 12, "fontWeight": "500", @@ -9783,7 +9783,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -9916,7 +9916,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -9972,7 +9972,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -10097,7 +10097,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -10230,7 +10230,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -10286,7 +10286,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -10350,7 +10350,7 @@ exports[`renders shifting bottom navigation 1`] = ` "flex": 1, }, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", }, ] } @@ -10443,7 +10443,7 @@ exports[`renders shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "overflow": "hidden", } } @@ -10575,7 +10575,7 @@ exports[`renders shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -10708,7 +10708,7 @@ exports[`renders shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -10727,7 +10727,7 @@ exports[`renders shifting bottom navigation 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 12, "fontWeight": "500", @@ -10838,7 +10838,7 @@ exports[`renders shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -10971,7 +10971,7 @@ exports[`renders shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -11101,7 +11101,7 @@ exports[`renders shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -11234,7 +11234,7 @@ exports[`renders shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -11364,7 +11364,7 @@ exports[`renders shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -11497,7 +11497,7 @@ exports[`renders shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -11627,7 +11627,7 @@ exports[`renders shifting bottom navigation 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -11760,7 +11760,7 @@ exports[`renders shifting bottom navigation 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap index db8e187690..c3325b3262 100644 --- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -105,7 +105,7 @@ exports[`renders button with an accessibility hint 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -256,7 +256,7 @@ exports[`renders button with an accessibility label 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -406,7 +406,7 @@ exports[`renders button with button color 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -556,7 +556,7 @@ exports[`renders button with color 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -706,7 +706,7 @@ exports[`renders button with custom testID 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -905,7 +905,7 @@ exports[`renders button with icon 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1106,7 +1106,7 @@ exports[`renders button with icon in reverse order 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1256,7 +1256,7 @@ exports[`renders contained contained with mode 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1407,7 +1407,7 @@ exports[`renders disabled button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1431,7 +1431,7 @@ exports[`renders disabled button 1`] = ` undefined, false, { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -1765,7 +1765,7 @@ exports[`renders loading button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1915,7 +1915,7 @@ exports[`renders outlined button with mode 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -2066,7 +2066,7 @@ exports[`renders text button by default 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -2216,7 +2216,7 @@ exports[`renders text button with mode 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap index 2994761722..309367bac0 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap @@ -160,7 +160,7 @@ exports[`renders chip with close button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -177,7 +177,7 @@ exports[`renders chip with close button 1`] = ` "textAlignVertical": "center", }, { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -267,7 +267,7 @@ exports[`renders chip with close button 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 18, }, [ @@ -455,7 +455,7 @@ exports[`renders chip with custom close button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -472,7 +472,7 @@ exports[`renders chip with custom close button 1`] = ` "textAlignVertical": "center", }, { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -562,7 +562,7 @@ exports[`renders chip with custom close button 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 18, }, [ @@ -750,7 +750,7 @@ exports[`renders chip with icon 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -767,7 +767,7 @@ exports[`renders chip with icon 1`] = ` "textAlignVertical": "center", }, { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -907,7 +907,7 @@ exports[`renders chip with onPress 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -924,7 +924,7 @@ exports[`renders chip with onPress 1`] = ` "textAlignVertical": "center", }, { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -1064,7 +1064,7 @@ exports[`renders outlined disabled chip 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1081,7 +1081,7 @@ exports[`renders outlined disabled chip 1`] = ` "textAlignVertical": "center", }, { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -1235,7 +1235,7 @@ exports[`renders selected chip 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 18, }, [ @@ -1266,7 +1266,7 @@ exports[`renders selected chip 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1283,7 +1283,7 @@ exports[`renders selected chip 1`] = ` "textAlignVertical": "center", }, { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap index a6ffbfcb06..0953a8257a 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -54,7 +54,7 @@ exports[`DataTable.Cell renders data table cell 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -128,7 +128,7 @@ exports[`DataTable.Cell renders right aligned data table cell 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -213,7 +213,7 @@ exports[`DataTable.Header renders data table header 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -233,7 +233,7 @@ exports[`DataTable.Header renders data table header 1`] = ` }, {}, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(29, 27, 32, 0.6)", }, undefined, ], @@ -294,7 +294,7 @@ exports[`DataTable.Header renders data table header 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -314,7 +314,7 @@ exports[`DataTable.Header renders data table header 1`] = ` }, {}, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(29, 27, 32, 0.6)", }, undefined, ], @@ -352,7 +352,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -366,7 +366,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` "marginRight": 16, }, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(29, 27, 32, 0.6)", }, ], ] @@ -489,7 +489,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -623,7 +623,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -676,7 +676,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -690,7 +690,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu "marginRight": 16, }, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(29, 27, 32, 0.6)", }, ], ] @@ -815,7 +815,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -949,7 +949,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -1083,7 +1083,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -1217,7 +1217,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -1270,7 +1270,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1284,7 +1284,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` "marginRight": 16, }, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(29, 27, 32, 0.6)", }, ], ] @@ -1409,7 +1409,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -1543,7 +1543,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -1606,7 +1606,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1620,7 +1620,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginRight": 16, }, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(29, 27, 32, 0.6)", }, ], ] @@ -1784,7 +1784,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1840,7 +1840,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1854,7 +1854,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginRight": 16, }, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(29, 27, 32, 0.6)", }, ], ] @@ -1979,7 +1979,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -2113,7 +2113,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -2247,7 +2247,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -2381,7 +2381,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 24, }, [ @@ -2475,7 +2475,7 @@ exports[`DataTable.Title renders data table title with press handler 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 16, }, [ @@ -2505,7 +2505,7 @@ exports[`DataTable.Title renders data table title with press handler 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -2603,7 +2603,7 @@ exports[`DataTable.Title renders data table title with sort icon 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontSize": 16, }, [ @@ -2633,7 +2633,7 @@ exports[`DataTable.Title renders data table title with sort icon 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -2719,7 +2719,7 @@ exports[`DataTable.Title renders right aligned data table title 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -2739,7 +2739,7 @@ exports[`DataTable.Title renders right aligned data table title 1`] = ` }, {}, { - "color": "rgba(28, 27, 31, 0.6)", + "color": "rgba(29, 27, 32, 0.6)", }, undefined, ], diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap index 78e3ed8612..b57cd51ac0 100644 --- a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap @@ -122,7 +122,7 @@ exports[`renders DrawerItem with icon 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -251,7 +251,7 @@ exports[`renders active DrawerItem 1`] = ` style={ [ { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontSize": 24, }, [ @@ -281,7 +281,7 @@ exports[`renders active DrawerItem 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -297,7 +297,7 @@ exports[`renders active DrawerItem 1`] = ` "marginRight": 32, }, { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -411,7 +411,7 @@ exports[`renders basic DrawerItem 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap index b4a42c20fa..5780dc385e 100644 --- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap @@ -145,7 +145,7 @@ exports[`renders FAB with custom size prop 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 50, }, [ @@ -493,7 +493,7 @@ exports[`renders default FAB 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -527,7 +527,7 @@ exports[`renders disabled FAB 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(28, 27, 31, 0.12)", + "backgroundColor": "rgba(29, 27, 32, 0.12)", "borderRadius": 16, "opacity": 1, "shadowColor": "#000", @@ -551,7 +551,7 @@ exports[`renders disabled FAB 1`] = ` pointerEvents="auto" style={ { - "backgroundColor": "rgba(28, 27, 31, 0.12)", + "backgroundColor": "rgba(29, 27, 32, 0.12)", "borderRadius": 16, "flex": undefined, "shadowColor": "#000", @@ -667,7 +667,7 @@ exports[`renders disabled FAB 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontSize": 24, }, [ @@ -842,7 +842,7 @@ exports[`renders extended FAB 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -873,7 +873,7 @@ exports[`renders extended FAB 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -890,7 +890,7 @@ exports[`renders extended FAB 1`] = ` }, false, { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -1056,7 +1056,7 @@ exports[`renders extended FAB with custom size prop 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 50, }, [ @@ -1087,7 +1087,7 @@ exports[`renders extended FAB with custom size prop 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1104,7 +1104,7 @@ exports[`renders extended FAB with custom size prop 1`] = ` }, false, { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -1270,7 +1270,7 @@ exports[`renders large FAB 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 36, }, [ @@ -1500,7 +1500,7 @@ exports[`renders loading FAB 1`] = ` collapsable={false} style={ { - "borderColor": "rgba(33, 0, 93, 1)", + "borderColor": "rgba(79, 55, 139, 1)", "borderRadius": 9, "borderWidth": 1.8, "height": 18, @@ -1583,7 +1583,7 @@ exports[`renders loading FAB 1`] = ` collapsable={false} style={ { - "borderColor": "rgba(33, 0, 93, 1)", + "borderColor": "rgba(79, 55, 139, 1)", "borderRadius": 9, "borderWidth": 1.8, "height": 18, @@ -1805,7 +1805,7 @@ exports[`renders loading FAB with custom size prop 1`] = ` collapsable={false} style={ { - "borderColor": "rgba(33, 0, 93, 1)", + "borderColor": "rgba(79, 55, 139, 1)", "borderRadius": 25, "borderWidth": 5, "height": 50, @@ -1888,7 +1888,7 @@ exports[`renders loading FAB with custom size prop 1`] = ` collapsable={false} style={ { - "borderColor": "rgba(33, 0, 93, 1)", + "borderColor": "rgba(79, 55, 139, 1)", "borderRadius": 25, "borderWidth": 5, "height": 50, @@ -2054,7 +2054,7 @@ exports[`renders not visible FAB 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -2228,7 +2228,7 @@ exports[`renders small FAB 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ @@ -2402,7 +2402,7 @@ exports[`renders visible FAB 1`] = ` style={ [ { - "color": "rgba(33, 0, 93, 1)", + "color": "rgba(79, 55, 139, 1)", "fontSize": 24, }, [ diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap index 1fe2b72a3d..82bcdbac24 100644 --- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap @@ -26,7 +26,7 @@ exports[`renders disabled icon button 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(28, 27, 31, 0.12)", + "borderColor": "rgba(29, 27, 32, 0.12)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -115,7 +115,7 @@ exports[`renders disabled icon button 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontSize": 24, }, [ diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index 0857e59773..ec3393cb29 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -5,7 +5,7 @@ exports[`renders expanded accordion 1`] = ` @@ -90,7 +90,7 @@ exports[`renders expanded accordion 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -237,7 +237,7 @@ exports[`renders expanded accordion 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -250,7 +250,7 @@ exports[`renders expanded accordion 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -270,7 +270,7 @@ exports[`renders list accordion with children 1`] = ` @@ -402,7 +402,7 @@ exports[`renders list accordion with children 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -415,7 +415,7 @@ exports[`renders list accordion with children 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -477,7 +477,7 @@ exports[`renders list accordion with custom title and description styles 1`] = ` @@ -562,7 +562,7 @@ exports[`renders list accordion with custom title and description styles 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -575,7 +575,7 @@ exports[`renders list accordion with custom title and description styles 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, { "color": "#f44336", @@ -596,7 +596,7 @@ exports[`renders list accordion with custom title and description styles 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -677,7 +677,7 @@ exports[`renders list accordion with left items 1`] = ` @@ -809,7 +809,7 @@ exports[`renders list accordion with left items 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -822,7 +822,7 @@ exports[`renders list accordion with left items 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -884,7 +884,7 @@ exports[`renders multiline list accordion 1`] = ` @@ -969,7 +969,7 @@ exports[`renders multiline list accordion 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -982,7 +982,7 @@ exports[`renders multiline list accordion 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -1001,7 +1001,7 @@ exports[`renders multiline list accordion 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap index 1f8c683d3a..85ba0c3ce1 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -82,7 +82,7 @@ exports[`renders list item with custom description 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -95,7 +95,7 @@ exports[`renders list item with custom description 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -276,7 +276,7 @@ exports[`renders list item with custom description 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -293,7 +293,7 @@ exports[`renders list item with custom description 1`] = ` "textAlignVertical": "center", }, { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -405,7 +405,7 @@ exports[`renders list item with custom title and description styles 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -418,7 +418,7 @@ exports[`renders list item with custom title and description styles 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, { "fontSize": 20, @@ -439,7 +439,7 @@ exports[`renders list item with custom title and description styles 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -553,7 +553,7 @@ exports[`renders list item with left and right items 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -566,7 +566,7 @@ exports[`renders list item with left and right items 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -585,7 +585,7 @@ exports[`renders list item with left and right items 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -787,7 +787,7 @@ exports[`renders list item with left item 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -800,7 +800,7 @@ exports[`renders list item with left item 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -896,7 +896,7 @@ exports[`renders list item with right item 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -909,7 +909,7 @@ exports[`renders list item with right item 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -1008,7 +1008,7 @@ exports[`renders list item with title and description 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1021,7 +1021,7 @@ exports[`renders list item with title and description 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -1040,7 +1040,7 @@ exports[`renders list item with title and description 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1149,7 +1149,7 @@ exports[`renders with a description with typeof number 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1162,7 +1162,7 @@ exports[`renders with a description with typeof number 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, { "fontSize": 20, @@ -1183,7 +1183,7 @@ exports[`renders with a description with typeof number 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index b5bc07c4b8..903cc68c41 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -17,45 +17,64 @@ exports[`renders list section with custom title style 1`] = ` }, "colors": { "backdrop": "rgba(50, 47, 55, 0.4)", - "background": "rgba(255, 251, 254, 1)", + "background": "rgba(254, 247, 255, 1)", "elevation": { "level0": "transparent", - "level1": "rgb(247, 243, 249)", - "level2": "rgb(243, 237, 246)", - "level3": "rgb(238, 232, 244)", - "level4": "rgb(236, 230, 243)", - "level5": "rgb(233, 227, 241)", + "level1": "rgba(255, 255, 255, 1)", + "level2": "rgba(247, 242, 250, 1)", + "level3": "rgba(243, 237, 247, 1)", + "level4": "rgba(236, 230, 240, 1)", + "level5": "rgba(230, 224, 233, 1)", }, "error": "rgba(179, 38, 30, 1)", "errorContainer": "rgba(249, 222, 220, 1)", - "inverseOnSurface": "rgba(244, 239, 244, 1)", + "inverseOnSurface": "rgba(245, 239, 247, 1)", "inversePrimary": "rgba(208, 188, 255, 1)", - "inverseSurface": "rgba(49, 48, 51, 1)", - "onBackground": "rgba(28, 27, 31, 1)", + "inverseSurface": "rgba(50, 47, 53, 1)", + "onBackground": "rgba(29, 27, 32, 1)", "onError": "rgba(255, 255, 255, 1)", - "onErrorContainer": "rgba(65, 14, 11, 1)", + "onErrorContainer": "rgba(140, 29, 24, 1)", "onPrimary": "rgba(255, 255, 255, 1)", - "onPrimaryContainer": "rgba(33, 0, 93, 1)", + "onPrimaryContainer": "rgba(79, 55, 139, 1)", + "onPrimaryFixed": "rgba(33, 0, 93, 1)", + "onPrimaryFixedVariant": "rgba(79, 55, 139, 1)", "onSecondary": "rgba(255, 255, 255, 1)", - "onSecondaryContainer": "rgba(29, 25, 43, 1)", - "onSurface": "rgba(28, 27, 31, 1)", - "onSurfaceDisabled": "rgba(28, 27, 31, 0.38)", + "onSecondaryContainer": "rgba(74, 68, 88, 1)", + "onSecondaryFixed": "rgba(29, 25, 43, 1)", + "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)", + "onSurface": "rgba(29, 27, 32, 1)", + "onSurfaceDisabled": "rgba(29, 27, 32, 0.38)", "onSurfaceVariant": "rgba(73, 69, 79, 1)", "onTertiary": "rgba(255, 255, 255, 1)", - "onTertiaryContainer": "rgba(49, 17, 29, 1)", + "onTertiaryContainer": "rgba(99, 59, 72, 1)", + "onTertiaryFixed": "rgba(49, 17, 29, 1)", + "onTertiaryFixedVariant": "rgba(99, 59, 72, 1)", "outline": "rgba(121, 116, 126, 1)", "outlineVariant": "rgba(202, 196, 208, 1)", "primary": "rgba(103, 80, 164, 1)", "primaryContainer": "rgba(234, 221, 255, 1)", + "primaryFixed": "rgba(234, 221, 255, 1)", + "primaryFixedDim": "rgba(208, 188, 255, 1)", "scrim": "rgba(0, 0, 0, 1)", "secondary": "rgba(98, 91, 113, 1)", "secondaryContainer": "rgba(232, 222, 248, 1)", + "secondaryFixed": "rgba(232, 222, 248, 1)", + "secondaryFixedDim": "rgba(204, 194, 220, 1)", "shadow": "rgba(0, 0, 0, 1)", - "surface": "rgba(255, 251, 254, 1)", - "surfaceDisabled": "rgba(28, 27, 31, 0.12)", + "surface": "rgba(254, 247, 255, 1)", + "surfaceBright": "rgba(254, 247, 255, 1)", + "surfaceContainer": "rgba(243, 237, 247, 1)", + "surfaceContainerHigh": "rgba(236, 230, 240, 1)", + "surfaceContainerHighest": "rgba(230, 224, 233, 1)", + "surfaceContainerLow": "rgba(247, 242, 250, 1)", + "surfaceContainerLowest": "rgba(255, 255, 255, 1)", + "surfaceDim": "rgba(222, 216, 225, 1)", + "surfaceDisabled": "rgba(29, 27, 32, 0.12)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", + "tertiaryFixed": "rgba(255, 216, 228, 1)", + "tertiaryFixedDim": "rgba(239, 184, 200, 1)", }, "dark": false, "fonts": { @@ -184,7 +203,7 @@ exports[`renders list section with custom title style 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -346,7 +365,7 @@ exports[`renders list section with custom title style 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -359,7 +378,7 @@ exports[`renders list section with custom title style 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -499,7 +518,7 @@ exports[`renders list section with custom title style 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -512,7 +531,7 @@ exports[`renders list section with custom title style 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -544,45 +563,64 @@ exports[`renders list section with subheader 1`] = ` }, "colors": { "backdrop": "rgba(50, 47, 55, 0.4)", - "background": "rgba(255, 251, 254, 1)", + "background": "rgba(254, 247, 255, 1)", "elevation": { "level0": "transparent", - "level1": "rgb(247, 243, 249)", - "level2": "rgb(243, 237, 246)", - "level3": "rgb(238, 232, 244)", - "level4": "rgb(236, 230, 243)", - "level5": "rgb(233, 227, 241)", + "level1": "rgba(255, 255, 255, 1)", + "level2": "rgba(247, 242, 250, 1)", + "level3": "rgba(243, 237, 247, 1)", + "level4": "rgba(236, 230, 240, 1)", + "level5": "rgba(230, 224, 233, 1)", }, "error": "rgba(179, 38, 30, 1)", "errorContainer": "rgba(249, 222, 220, 1)", - "inverseOnSurface": "rgba(244, 239, 244, 1)", + "inverseOnSurface": "rgba(245, 239, 247, 1)", "inversePrimary": "rgba(208, 188, 255, 1)", - "inverseSurface": "rgba(49, 48, 51, 1)", - "onBackground": "rgba(28, 27, 31, 1)", + "inverseSurface": "rgba(50, 47, 53, 1)", + "onBackground": "rgba(29, 27, 32, 1)", "onError": "rgba(255, 255, 255, 1)", - "onErrorContainer": "rgba(65, 14, 11, 1)", + "onErrorContainer": "rgba(140, 29, 24, 1)", "onPrimary": "rgba(255, 255, 255, 1)", - "onPrimaryContainer": "rgba(33, 0, 93, 1)", + "onPrimaryContainer": "rgba(79, 55, 139, 1)", + "onPrimaryFixed": "rgba(33, 0, 93, 1)", + "onPrimaryFixedVariant": "rgba(79, 55, 139, 1)", "onSecondary": "rgba(255, 255, 255, 1)", - "onSecondaryContainer": "rgba(29, 25, 43, 1)", - "onSurface": "rgba(28, 27, 31, 1)", - "onSurfaceDisabled": "rgba(28, 27, 31, 0.38)", + "onSecondaryContainer": "rgba(74, 68, 88, 1)", + "onSecondaryFixed": "rgba(29, 25, 43, 1)", + "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)", + "onSurface": "rgba(29, 27, 32, 1)", + "onSurfaceDisabled": "rgba(29, 27, 32, 0.38)", "onSurfaceVariant": "rgba(73, 69, 79, 1)", "onTertiary": "rgba(255, 255, 255, 1)", - "onTertiaryContainer": "rgba(49, 17, 29, 1)", + "onTertiaryContainer": "rgba(99, 59, 72, 1)", + "onTertiaryFixed": "rgba(49, 17, 29, 1)", + "onTertiaryFixedVariant": "rgba(99, 59, 72, 1)", "outline": "rgba(121, 116, 126, 1)", "outlineVariant": "rgba(202, 196, 208, 1)", "primary": "rgba(103, 80, 164, 1)", "primaryContainer": "rgba(234, 221, 255, 1)", + "primaryFixed": "rgba(234, 221, 255, 1)", + "primaryFixedDim": "rgba(208, 188, 255, 1)", "scrim": "rgba(0, 0, 0, 1)", "secondary": "rgba(98, 91, 113, 1)", "secondaryContainer": "rgba(232, 222, 248, 1)", + "secondaryFixed": "rgba(232, 222, 248, 1)", + "secondaryFixedDim": "rgba(204, 194, 220, 1)", "shadow": "rgba(0, 0, 0, 1)", - "surface": "rgba(255, 251, 254, 1)", - "surfaceDisabled": "rgba(28, 27, 31, 0.12)", + "surface": "rgba(254, 247, 255, 1)", + "surfaceBright": "rgba(254, 247, 255, 1)", + "surfaceContainer": "rgba(243, 237, 247, 1)", + "surfaceContainerHigh": "rgba(236, 230, 240, 1)", + "surfaceContainerHighest": "rgba(230, 224, 233, 1)", + "surfaceContainerLow": "rgba(247, 242, 250, 1)", + "surfaceContainerLowest": "rgba(255, 255, 255, 1)", + "surfaceDim": "rgba(222, 216, 225, 1)", + "surfaceDisabled": "rgba(29, 27, 32, 0.12)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", + "tertiaryFixed": "rgba(255, 216, 228, 1)", + "tertiaryFixedDim": "rgba(239, 184, 200, 1)", }, "dark": false, "fonts": { @@ -711,7 +749,7 @@ exports[`renders list section with subheader 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -871,7 +909,7 @@ exports[`renders list section with subheader 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -884,7 +922,7 @@ exports[`renders list section with subheader 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -1024,7 +1062,7 @@ exports[`renders list section with subheader 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1037,7 +1075,7 @@ exports[`renders list section with subheader 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -1069,45 +1107,64 @@ exports[`renders list section without subheader 1`] = ` }, "colors": { "backdrop": "rgba(50, 47, 55, 0.4)", - "background": "rgba(255, 251, 254, 1)", + "background": "rgba(254, 247, 255, 1)", "elevation": { "level0": "transparent", - "level1": "rgb(247, 243, 249)", - "level2": "rgb(243, 237, 246)", - "level3": "rgb(238, 232, 244)", - "level4": "rgb(236, 230, 243)", - "level5": "rgb(233, 227, 241)", + "level1": "rgba(255, 255, 255, 1)", + "level2": "rgba(247, 242, 250, 1)", + "level3": "rgba(243, 237, 247, 1)", + "level4": "rgba(236, 230, 240, 1)", + "level5": "rgba(230, 224, 233, 1)", }, "error": "rgba(179, 38, 30, 1)", "errorContainer": "rgba(249, 222, 220, 1)", - "inverseOnSurface": "rgba(244, 239, 244, 1)", + "inverseOnSurface": "rgba(245, 239, 247, 1)", "inversePrimary": "rgba(208, 188, 255, 1)", - "inverseSurface": "rgba(49, 48, 51, 1)", - "onBackground": "rgba(28, 27, 31, 1)", + "inverseSurface": "rgba(50, 47, 53, 1)", + "onBackground": "rgba(29, 27, 32, 1)", "onError": "rgba(255, 255, 255, 1)", - "onErrorContainer": "rgba(65, 14, 11, 1)", + "onErrorContainer": "rgba(140, 29, 24, 1)", "onPrimary": "rgba(255, 255, 255, 1)", - "onPrimaryContainer": "rgba(33, 0, 93, 1)", + "onPrimaryContainer": "rgba(79, 55, 139, 1)", + "onPrimaryFixed": "rgba(33, 0, 93, 1)", + "onPrimaryFixedVariant": "rgba(79, 55, 139, 1)", "onSecondary": "rgba(255, 255, 255, 1)", - "onSecondaryContainer": "rgba(29, 25, 43, 1)", - "onSurface": "rgba(28, 27, 31, 1)", - "onSurfaceDisabled": "rgba(28, 27, 31, 0.38)", + "onSecondaryContainer": "rgba(74, 68, 88, 1)", + "onSecondaryFixed": "rgba(29, 25, 43, 1)", + "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)", + "onSurface": "rgba(29, 27, 32, 1)", + "onSurfaceDisabled": "rgba(29, 27, 32, 0.38)", "onSurfaceVariant": "rgba(73, 69, 79, 1)", "onTertiary": "rgba(255, 255, 255, 1)", - "onTertiaryContainer": "rgba(49, 17, 29, 1)", + "onTertiaryContainer": "rgba(99, 59, 72, 1)", + "onTertiaryFixed": "rgba(49, 17, 29, 1)", + "onTertiaryFixedVariant": "rgba(99, 59, 72, 1)", "outline": "rgba(121, 116, 126, 1)", "outlineVariant": "rgba(202, 196, 208, 1)", "primary": "rgba(103, 80, 164, 1)", "primaryContainer": "rgba(234, 221, 255, 1)", + "primaryFixed": "rgba(234, 221, 255, 1)", + "primaryFixedDim": "rgba(208, 188, 255, 1)", "scrim": "rgba(0, 0, 0, 1)", "secondary": "rgba(98, 91, 113, 1)", "secondaryContainer": "rgba(232, 222, 248, 1)", + "secondaryFixed": "rgba(232, 222, 248, 1)", + "secondaryFixedDim": "rgba(204, 194, 220, 1)", "shadow": "rgba(0, 0, 0, 1)", - "surface": "rgba(255, 251, 254, 1)", - "surfaceDisabled": "rgba(28, 27, 31, 0.12)", + "surface": "rgba(254, 247, 255, 1)", + "surfaceBright": "rgba(254, 247, 255, 1)", + "surfaceContainer": "rgba(243, 237, 247, 1)", + "surfaceContainerHigh": "rgba(236, 230, 240, 1)", + "surfaceContainerHighest": "rgba(230, 224, 233, 1)", + "surfaceContainerLow": "rgba(247, 242, 250, 1)", + "surfaceContainerLowest": "rgba(255, 255, 255, 1)", + "surfaceDim": "rgba(222, 216, 225, 1)", + "surfaceDisabled": "rgba(29, 27, 32, 0.12)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", + "tertiaryFixed": "rgba(255, 216, 228, 1)", + "tertiaryFixedDim": "rgba(239, 184, 200, 1)", }, "dark": false, "fonts": { @@ -1356,7 +1413,7 @@ exports[`renders list section without subheader 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1369,7 +1426,7 @@ exports[`renders list section without subheader 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], @@ -1509,7 +1566,7 @@ exports[`renders list section without subheader 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontWeight": "400", "letterSpacing": 0, @@ -1522,7 +1579,7 @@ exports[`renders list section without subheader 1`] = ` "fontSize": 16, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", }, undefined, ], diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap index fc3ac61473..b09ccb36ec 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap @@ -117,7 +117,7 @@ exports[`renders menu with content styles 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -260,7 +260,7 @@ exports[`renders menu with content styles 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "borderRadius": 4, "borderTopLeftRadius": 0, "borderTopRightRadius": 0, @@ -289,7 +289,7 @@ exports[`renders menu with content styles 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "borderRadius": 4, "borderTopLeftRadius": 0, "borderTopRightRadius": 0, @@ -396,7 +396,7 @@ exports[`renders menu with content styles 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -410,7 +410,7 @@ exports[`renders menu with content styles 1`] = ` [ false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -519,7 +519,7 @@ exports[`renders menu with content styles 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -533,7 +533,7 @@ exports[`renders menu with content styles 1`] = ` [ false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -676,7 +676,7 @@ exports[`renders not visible menu 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -842,7 +842,7 @@ exports[`renders visible menu 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -985,7 +985,7 @@ exports[`renders visible menu 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "borderRadius": 4, "opacity": 0, "shadowColor": "#000", @@ -1012,7 +1012,7 @@ exports[`renders visible menu 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgb(243, 237, 246)", + "backgroundColor": "rgba(247, 242, 250, 1)", "borderRadius": 4, "flex": undefined, "paddingVertical": 8, @@ -1117,7 +1117,7 @@ exports[`renders visible menu 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1131,7 +1131,7 @@ exports[`renders visible menu 1`] = ` [ false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -1240,7 +1240,7 @@ exports[`renders visible menu 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -1254,7 +1254,7 @@ exports[`renders visible menu 1`] = ` [ false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index e16c6134f4..cd444c05b5 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -133,7 +133,7 @@ exports[`Menu Item renders menu item 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -147,7 +147,7 @@ exports[`Menu Item renders menu item 1`] = ` [ false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -297,7 +297,7 @@ exports[`Menu Item renders menu item 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -311,7 +311,7 @@ exports[`Menu Item renders menu item 1`] = ` [ false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -410,7 +410,7 @@ exports[`Menu Item renders menu item 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontSize": 24, }, [ @@ -461,7 +461,7 @@ exports[`Menu Item renders menu item 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -475,7 +475,7 @@ exports[`Menu Item renders menu item 1`] = ` [ false, { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -574,7 +574,7 @@ exports[`Menu Item renders menu item 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontSize": 24, }, [ @@ -625,7 +625,7 @@ exports[`Menu Item renders menu item 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -639,7 +639,7 @@ exports[`Menu Item renders menu item 1`] = ` [ false, { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -748,7 +748,7 @@ exports[`Menu Item renders menu item 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -762,7 +762,7 @@ exports[`Menu Item renders menu item 1`] = ` [ false, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap index f30e19f3f8..bbf1c420f7 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap @@ -5,7 +5,7 @@ exports[`activity indicator snapshot test 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -23,7 +23,7 @@ exports[`activity indicator snapshot test 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -176,7 +176,7 @@ exports[`activity indicator snapshot test 1`] = ` accessibilityRole="search" keyboardAppearance="light" placeholder="" - placeholderTextColor="rgba(28, 27, 31, 1)" + placeholderTextColor="rgba(29, 27, 32, 1)" returnKeyType="search" selectionColor="rgba(103, 80, 164, 1)" style={ @@ -415,7 +415,7 @@ exports[`renders with placeholder 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -433,7 +433,7 @@ exports[`renders with placeholder 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -586,7 +586,7 @@ exports[`renders with placeholder 1`] = ` accessibilityRole="search" keyboardAppearance="light" placeholder="Search" - placeholderTextColor="rgba(28, 27, 31, 1)" + placeholderTextColor="rgba(29, 27, 32, 1)" returnKeyType="search" selectionColor="rgba(103, 80, 164, 1)" style={ @@ -776,7 +776,7 @@ exports[`renders with text 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -794,7 +794,7 @@ exports[`renders with text 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgb(238, 232, 244)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -947,7 +947,7 @@ exports[`renders with text 1`] = ` accessibilityRole="search" keyboardAppearance="light" placeholder="Search" - placeholderTextColor="rgba(28, 27, 31, 1)" + placeholderTextColor="rgba(29, 27, 32, 1)" returnKeyType="search" selectionColor="rgba(103, 80, 164, 1)" style={ diff --git a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap index 83f1541397..e4200203b9 100644 --- a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap @@ -105,7 +105,7 @@ exports[`renders segmented button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -121,7 +121,7 @@ exports[`renders segmented button 1`] = ` "textAlign": "center", }, { - "color": "rgba(29, 25, 43, 1)", + "color": "rgba(74, 68, 88, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -230,7 +230,7 @@ exports[`renders segmented button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -246,7 +246,7 @@ exports[`renders segmented button 1`] = ` "textAlign": "center", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index 9fdd75d4dc..c681d7a2b8 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap @@ -24,7 +24,7 @@ exports[`renders snackbar with Text as a child 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "margin": 8, "opacity": 0, @@ -50,7 +50,7 @@ exports[`renders snackbar with Text as a child 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "flex": undefined, "flexDirection": "row", @@ -112,7 +112,7 @@ exports[`renders snackbar with View & Text as a child 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "margin": 8, "opacity": 0, @@ -138,7 +138,7 @@ exports[`renders snackbar with View & Text as a child 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "flex": undefined, "flexDirection": "row", @@ -226,7 +226,7 @@ exports[`renders snackbar with action button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "margin": 8, "opacity": 0, @@ -252,7 +252,7 @@ exports[`renders snackbar with action button 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "flex": undefined, "flexDirection": "row", @@ -276,7 +276,7 @@ exports[`renders snackbar with action button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -294,7 +294,7 @@ exports[`renders snackbar with action button 1`] = ` "marginVertical": 14, }, { - "color": "rgba(244, 239, 244, 1)", + "color": "rgba(245, 239, 247, 1)", }, ], ], @@ -423,7 +423,7 @@ exports[`renders snackbar with action button 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -495,7 +495,7 @@ exports[`renders snackbar with content 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "margin": 8, "opacity": 0, @@ -521,7 +521,7 @@ exports[`renders snackbar with content 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(49, 48, 51, 1)", + "backgroundColor": "rgba(50, 47, 53, 1)", "borderRadius": 4, "flex": undefined, "flexDirection": "row", @@ -545,7 +545,7 @@ exports[`renders snackbar with content 1`] = ` "textAlign": "left", }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "writingDirection": "ltr", }, [ @@ -563,7 +563,7 @@ exports[`renders snackbar with content 1`] = ` "marginVertical": 14, }, { - "color": "rgba(244, 239, 244, 1)", + "color": "rgba(245, 239, 247, 1)", }, ], ], diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index 76ad8d4e54..090fdaec66 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -199,7 +199,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -513,7 +513,7 @@ exports[`correctly applies a component as the text label 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -739,7 +739,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -965,7 +965,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -1009,7 +1009,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` }, false, { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 1, @@ -1086,7 +1086,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` numberOfLines={1} style={ { - "backgroundColor": "rgba(255, 251, 254, 1)", + "backgroundColor": "rgba(254, 247, 255, 1)", "color": "transparent", "fontFamily": "System", "fontSize": 16, @@ -1225,7 +1225,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -1450,7 +1450,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -1678,7 +1678,7 @@ exports[`correctly applies textAlign center 1`] = ` "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -1904,7 +1904,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -2323,7 +2323,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "paddingTop": 24, }, { - "color": "rgba(28, 27, 31, 1)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 456c0402fa..192912f020 100644 --- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -5,7 +5,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(74, 68, 88, 0.12)", "borderRadius": 4, "height": 42, "margin": 0, @@ -25,7 +25,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(74, 68, 88, 0.12)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -113,7 +113,7 @@ exports[`renders disabled toggle button 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontSize": 24, }, [ @@ -144,7 +144,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(74, 68, 88, 0.12)", "borderRadius": 4, "height": 42, "margin": 0, @@ -164,7 +164,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(74, 68, 88, 0.12)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -386,7 +386,7 @@ exports[`renders unchecked toggle button 1`] = ` style={ [ { - "color": "rgba(28, 27, 31, 0.38)", + "color": "rgba(29, 27, 32, 0.38)", "fontSize": 24, }, [ From 83a18df3e3b1048846e168d330d83969d35aaa18 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Tue, 31 Mar 2026 16:19:51 +0300 Subject: [PATCH 04/14] fix: update example app --- example/src/index.native.tsx | 10 +++++++--- example/utils/index.ts | 14 ++++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index 0878a1f13b..34dbe61c9b 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -19,9 +19,9 @@ import { import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; +import { PreferencesContext } from './PreferencesContext'; import App from './RootNavigator'; import { deviceColorsSupported } from '../utils'; -import { PreferencesContext } from './PreferencesContext'; import { CombinedDefaultTheme, CombinedDarkTheme, @@ -57,6 +57,7 @@ export default function PaperExample() { const [customFontLoaded, setCustomFont] = React.useState(false); const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); + //TODO: remove usage of @pchmn/expo-material3-theme const { theme: mdTheme } = useMaterial3Theme(); const theme = React.useMemo(() => { if (themeVersion === 2) { @@ -68,8 +69,11 @@ export default function PaperExample() { } return isDarkMode - ? { ...MD3DarkTheme, colors: mdTheme.dark } - : { ...MD3LightTheme, colors: mdTheme.light }; + ? { ...MD3DarkTheme, colors: { ...MD3DarkTheme.colors, ...mdTheme.dark } } + : { + ...MD3LightTheme, + colors: { ...MD3LightTheme.colors, ...mdTheme.light }, + }; }, [isDarkMode, mdTheme, shouldUseDeviceColors, themeVersion]); React.useEffect(() => { diff --git a/example/utils/index.ts b/example/utils/index.ts index 5c15917644..68bb02a96e 100644 --- a/example/utils/index.ts +++ b/example/utils/index.ts @@ -526,6 +526,7 @@ export const teamsList = [ const lightPinkColors = { colors: { + ...MD3LightTheme.colors, primary: 'rgb(154, 64, 87)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(255, 217, 223)', @@ -571,6 +572,7 @@ const lightPinkColors = { const darkPinkColors = { colors: { + ...MD3DarkTheme.colors, primary: 'rgb(255, 177, 192)', onPrimary: 'rgb(95, 17, 42)', primaryContainer: 'rgb(124, 41, 64)', @@ -616,6 +618,7 @@ const darkPinkColors = { const lightGreenColors = { colors: { + ...MD3LightTheme.colors, primary: 'rgb(0, 110, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(141, 251, 119)', @@ -661,6 +664,7 @@ const lightGreenColors = { const darkGreenColors = { colors: { + ...MD3DarkTheme.colors, primary: 'rgb(114, 222, 94)', onPrimary: 'rgb(0, 58, 0)', primaryContainer: 'rgb(0, 83, 0)', @@ -706,6 +710,7 @@ const darkGreenColors = { const lightBlueColors = { colors: { + ...MD3LightTheme.colors, primary: 'rgb(52, 61, 255)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(224, 224, 255)', @@ -751,6 +756,7 @@ const lightBlueColors = { const darkBlueColors = { colors: { + ...MD3DarkTheme.colors, primary: 'rgb(190, 194, 255)', onPrimary: 'rgb(0, 1, 172)', primaryContainer: 'rgb(0, 0, 239)', @@ -796,6 +802,7 @@ const darkBlueColors = { const lightOrangeColors = { colors: { + ...MD3LightTheme.colors, primary: 'rgb(133, 84, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(255, 221, 183)', @@ -841,6 +848,7 @@ const lightOrangeColors = { const darkOrangeColors = { colors: { + ...MD3DarkTheme.colors, primary: 'rgb(255, 185, 92)', onPrimary: 'rgb(70, 42, 0)', primaryContainer: 'rgb(101, 62, 0)', @@ -886,6 +894,7 @@ const darkOrangeColors = { const lightRedColors = { colors: { + ...MD3LightTheme.colors, primary: 'rgb(192, 1, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(255, 218, 212)', @@ -931,6 +940,7 @@ const lightRedColors = { const darkRedColors = { colors: { + ...MD3DarkTheme.colors, primary: 'rgb(255, 180, 168)', onPrimary: 'rgb(105, 1, 0)', primaryContainer: 'rgb(147, 1, 0)', @@ -976,6 +986,7 @@ const darkRedColors = { const lightYellowColors = { colors: { + ...MD3LightTheme.colors, primary: 'rgb(98, 98, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(234, 234, 0)', @@ -1021,6 +1032,7 @@ const lightYellowColors = { const darkYellowColors = { colors: { + ...MD3DarkTheme.colors, primary: 'rgb(205, 205, 0)', onPrimary: 'rgb(50, 50, 0)', primaryContainer: 'rgb(73, 73, 0)', @@ -1066,6 +1078,7 @@ const darkYellowColors = { const lightCyanColors = { colors: { + ...MD3LightTheme.colors, primary: 'rgb(0, 106, 106)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(0, 251, 251)', @@ -1111,6 +1124,7 @@ const lightCyanColors = { const darkCyanColors = { colors: { + ...MD3DarkTheme.colors, primary: 'rgb(0, 221, 221)', onPrimary: 'rgb(0, 55, 55)', primaryContainer: 'rgb(0, 79, 79)', From 4b82bb33fa68888a4b95c00543b8c6e8c43a55b8 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Wed, 1 Apr 2026 11:59:37 +0300 Subject: [PATCH 05/14] feat: add DynamicTheme * Known limitation: surface/container roles on API 31-33 use * @color/m3_ref_palette_dynamic_neutral_variant* (MCL resources that require a * native DynamicColors setup). No @android:color/ equivalent exists for those * slots. Reference palette values are used as fallback on API 31-33. --- src/styles/themes/v3/DynamicTheme.android.tsx | 502 ++++++++++++++++++ src/styles/themes/v3/DynamicTheme.tsx | 2 + 2 files changed, 504 insertions(+) create mode 100644 src/styles/themes/v3/DynamicTheme.android.tsx create mode 100644 src/styles/themes/v3/DynamicTheme.tsx diff --git a/src/styles/themes/v3/DynamicTheme.android.tsx b/src/styles/themes/v3/DynamicTheme.android.tsx new file mode 100644 index 0000000000..2a5453c540 --- /dev/null +++ b/src/styles/themes/v3/DynamicTheme.android.tsx @@ -0,0 +1,502 @@ +import { Platform, PlatformColor } from 'react-native'; + +import { MD3DarkTheme } from './DarkTheme'; +import { MD3LightTheme } from './LightTheme'; +import type { MD3Theme } from '../../../types'; + +const isApi34 = (Platform.Version as number) >= 34; +const isApi31 = (Platform.Version as number) >= 31; + +const ac = (name: string) => + PlatformColor(`@android:color/${name}`) as unknown as string; + +/** + * Picks the correct color value for the current Android API level. + * - API 34+: uses the named role resource (system_*_light/dark) + * - API 31-33: uses the tonal accent resource (system_accent*_NNN), or ref if null + * - API < 31: uses the reference palette string from the base theme + * @see https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md + */ +const pick = (api34: string, api31: string, ref: string): string => + isApi34 ? ac(api34) : isApi31 && api31 != null ? ac(api31) : ref; + +// Known limitation: surface/container roles on API 31-33 use +// @color/m3_ref_palette_dynamic_neutral_variant* (MCL resources that require a +// native DynamicColors setup). No @android:color/ equivalent exists for those +// slots. Reference palette values are used as fallback on API 31-33. + +const lightColors = { + primary: pick( + 'system_primary_light', + 'system_accent1_600', + MD3LightTheme.colors.primary + ), + onPrimary: pick( + 'system_on_primary_light', + 'system_accent1_0', + MD3LightTheme.colors.onPrimary + ), + primaryContainer: pick( + 'system_primary_container_light', + 'system_accent1_100', + MD3LightTheme.colors.primaryContainer + ), + onPrimaryContainer: pick( + 'system_on_primary_container_light', + 'system_accent1_900', + MD3LightTheme.colors.onPrimaryContainer + ), + inversePrimary: pick( + 'system_primary_dark', + 'system_accent1_200', + MD3LightTheme.colors.inversePrimary + ), + secondary: pick( + 'system_secondary_light', + 'system_accent2_600', + MD3LightTheme.colors.secondary + ), + onSecondary: pick( + 'system_on_secondary_light', + 'system_accent2_0', + MD3LightTheme.colors.onSecondary + ), + secondaryContainer: pick( + 'system_secondary_container_light', + 'system_accent2_100', + MD3LightTheme.colors.secondaryContainer + ), + onSecondaryContainer: pick( + 'system_on_secondary_container_light', + 'system_accent2_900', + MD3LightTheme.colors.onSecondaryContainer + ), + tertiary: pick( + 'system_tertiary_light', + 'system_accent3_600', + MD3LightTheme.colors.tertiary + ), + onTertiary: pick( + 'system_on_tertiary_light', + 'system_accent3_0', + MD3LightTheme.colors.onTertiary + ), + tertiaryContainer: pick( + 'system_tertiary_container_light', + 'system_accent3_100', + MD3LightTheme.colors.tertiaryContainer + ), + onTertiaryContainer: pick( + 'system_on_tertiary_container_light', + 'system_accent3_900', + MD3LightTheme.colors.onTertiaryContainer + ), + error: pick( + 'system_error_light', + MD3LightTheme.colors.error, + MD3LightTheme.colors.error + ), + onError: pick( + 'system_on_error_light', + MD3LightTheme.colors.onError, + MD3LightTheme.colors.onError + ), + errorContainer: pick( + 'system_error_container_light', + MD3LightTheme.colors.errorContainer, + MD3LightTheme.colors.errorContainer + ), + onErrorContainer: pick( + 'system_on_error_container_light', + MD3LightTheme.colors.errorContainer, + MD3LightTheme.colors.onErrorContainer + ), + onSurface: pick( + 'system_on_surface_light', + 'system_neutral1_900', + MD3LightTheme.colors.onSurface + ), + onBackground: pick( + 'system_on_background_light', + 'system_neutral1_900', + MD3LightTheme.colors.onBackground + ), + onSurfaceVariant: pick( + 'system_on_surface_variant_light', + 'system_neutral2_700', + MD3LightTheme.colors.onSurfaceVariant + ), + outline: pick( + 'system_outline_light', + 'system_neutral2_500', + MD3LightTheme.colors.outline + ), + outlineVariant: pick( + 'system_outline_variant_light', + 'system_neutral2_200', + MD3LightTheme.colors.outlineVariant + ), + inverseSurface: pick( + 'system_surface_dark', + 'system_neutral1_800', + MD3LightTheme.colors.inverseSurface + ), + inverseOnSurface: pick( + 'system_on_surface_dark', + 'system_neutral1_50', + MD3LightTheme.colors.inverseOnSurface + ), + surfaceContainerLowest: pick( + 'system_surface_container_lowest_light', + 'system_neutral2_0', + MD3LightTheme.colors.surfaceContainerLowest + ), + surfaceContainerLow: pick( + 'system_surface_container_low_light', + MD3LightTheme.colors.surfaceContainerLow, + MD3LightTheme.colors.surfaceContainerLow + ), + surfaceContainerHighest: pick( + 'system_surface_container_highest_light', + 'system_neutral2_100', + MD3LightTheme.colors.surfaceContainerHighest + ), + surface: pick( + 'system_surface_light', + MD3LightTheme.colors.surface, + MD3LightTheme.colors.surface + ), + surfaceDim: pick( + 'system_surface_dim_light', + MD3LightTheme.colors.surfaceDim, + MD3LightTheme.colors.surfaceDim + ), + surfaceBright: pick( + 'system_surface_bright_light', + MD3LightTheme.colors.surfaceBright, + MD3LightTheme.colors.surfaceBright + ), + surfaceContainer: pick( + 'system_surface_container_light', + MD3LightTheme.colors.surfaceContainer, + MD3LightTheme.colors.surfaceContainer + ), + surfaceContainerHigh: pick( + 'system_surface_container_high_light', + MD3LightTheme.colors.surfaceContainerHigh, + MD3LightTheme.colors.surfaceContainerHigh + ), + background: pick( + 'system_background_light', + MD3LightTheme.colors.background, + MD3LightTheme.colors.background + ), + surfaceVariant: pick( + 'system_surface_variant_light', + MD3LightTheme.colors.surfaceVariant, + MD3LightTheme.colors.surfaceVariant + ), + primaryFixed: pick( + 'system_primary_fixed', + 'system_accent1_100', + MD3LightTheme.colors.primaryFixed + ), + primaryFixedDim: pick( + 'system_primary_fixed_dim', + 'system_accent1_200', + MD3LightTheme.colors.primaryFixedDim + ), + onPrimaryFixed: pick( + 'system_on_primary_fixed', + 'system_accent1_900', + MD3LightTheme.colors.onPrimaryFixed + ), + onPrimaryFixedVariant: pick( + 'system_on_primary_fixed_variant', + 'system_accent1_700', + MD3LightTheme.colors.onPrimaryFixedVariant + ), + secondaryFixed: pick( + 'system_secondary_fixed', + 'system_accent2_100', + MD3LightTheme.colors.secondaryFixed + ), + secondaryFixedDim: pick( + 'system_secondary_fixed_dim', + 'system_accent2_200', + MD3LightTheme.colors.secondaryFixedDim + ), + onSecondaryFixed: pick( + 'system_on_secondary_fixed', + 'system_accent2_900', + MD3LightTheme.colors.onSecondaryFixed + ), + onSecondaryFixedVariant: pick( + 'system_on_secondary_fixed_variant', + 'system_accent2_700', + MD3LightTheme.colors.onSecondaryFixedVariant + ), + tertiaryFixed: pick( + 'system_tertiary_fixed', + 'system_accent3_100', + MD3LightTheme.colors.tertiaryFixed + ), + tertiaryFixedDim: pick( + 'system_tertiary_fixed_dim', + 'system_accent3_200', + MD3LightTheme.colors.tertiaryFixedDim + ), + onTertiaryFixed: pick( + 'system_on_tertiary_fixed', + 'system_accent3_900', + MD3LightTheme.colors.onTertiaryFixed + ), + onTertiaryFixedVariant: pick( + 'system_on_tertiary_fixed_variant', + 'system_accent3_700', + MD3LightTheme.colors.onTertiaryFixedVariant + ), +}; + +const darkColors = { + primary: pick( + 'system_primary_dark', + 'system_accent1_200', + MD3DarkTheme.colors.primary + ), + onPrimary: pick( + 'system_on_primary_dark', + 'system_accent1_800', + MD3DarkTheme.colors.onPrimary + ), + primaryContainer: pick( + 'system_primary_container_dark', + 'system_accent1_700', + MD3DarkTheme.colors.primaryContainer + ), + onPrimaryContainer: pick( + 'system_on_primary_container_dark', + 'system_accent1_100', + MD3DarkTheme.colors.onPrimaryContainer + ), + inversePrimary: pick( + 'system_primary_light', + 'system_accent1_600', + MD3DarkTheme.colors.inversePrimary + ), + secondary: pick( + 'system_secondary_dark', + 'system_accent2_200', + MD3DarkTheme.colors.secondary + ), + onSecondary: pick( + 'system_on_secondary_dark', + 'system_accent2_800', + MD3DarkTheme.colors.onSecondary + ), + secondaryContainer: pick( + 'system_secondary_container_dark', + 'system_accent2_700', + MD3DarkTheme.colors.secondaryContainer + ), + onSecondaryContainer: pick( + 'system_on_secondary_container_dark', + 'system_accent2_100', + MD3DarkTheme.colors.onSecondaryContainer + ), + tertiary: pick( + 'system_tertiary_dark', + 'system_accent3_200', + MD3DarkTheme.colors.tertiary + ), + onTertiary: pick( + 'system_on_tertiary_dark', + 'system_accent3_800', + MD3DarkTheme.colors.onTertiary + ), + tertiaryContainer: pick( + 'system_tertiary_container_dark', + 'system_accent3_700', + MD3DarkTheme.colors.tertiaryContainer + ), + onTertiaryContainer: pick( + 'system_on_tertiary_container_dark', + 'system_accent3_100', + MD3DarkTheme.colors.onTertiaryContainer + ), + error: pick( + 'system_error_dark', + MD3DarkTheme.colors.error, + MD3DarkTheme.colors.error + ), + onError: pick( + 'system_on_error_dark', + MD3DarkTheme.colors.onError, + MD3DarkTheme.colors.onError + ), + errorContainer: pick( + 'system_error_container_dark', + MD3DarkTheme.colors.errorContainer, + MD3DarkTheme.colors.errorContainer + ), + onErrorContainer: pick( + 'system_on_error_container_dark', + MD3DarkTheme.colors.onErrorContainer, + MD3DarkTheme.colors.onErrorContainer + ), + onSurface: pick( + 'system_on_surface_dark', + 'system_neutral1_100', + MD3DarkTheme.colors.onSurface + ), + onBackground: pick( + 'system_on_background_dark', + 'system_neutral1_100', + MD3DarkTheme.colors.onBackground + ), + onSurfaceVariant: pick( + 'system_on_surface_variant_dark', + 'system_neutral2_200', + MD3DarkTheme.colors.onSurfaceVariant + ), + outline: pick( + 'system_outline_dark', + 'system_neutral2_400', + MD3DarkTheme.colors.outline + ), + outlineVariant: pick( + 'system_outline_variant_dark', + 'system_neutral2_700', + MD3DarkTheme.colors.outlineVariant + ), + inverseSurface: pick( + 'system_surface_light', + 'system_neutral1_100', + MD3DarkTheme.colors.inverseSurface + ), + inverseOnSurface: pick( + 'system_on_surface_light', + 'system_neutral1_800', + MD3DarkTheme.colors.inverseOnSurface + ), + surfaceContainerLowest: pick( + 'system_surface_container_lowest_dark', + MD3DarkTheme.colors.surfaceContainerLowest, + MD3DarkTheme.colors.surfaceContainerLowest + ), + surfaceContainerLow: pick( + 'system_surface_container_low_dark', + 'system_neutral2_900', + MD3DarkTheme.colors.surfaceContainerLow + ), + surfaceContainerHighest: pick( + 'system_surface_container_highest_dark', + MD3DarkTheme.colors.surfaceContainerHighest, + MD3DarkTheme.colors.surfaceContainerHighest + ), + surface: pick( + 'system_surface_dark', + MD3DarkTheme.colors.surface, + MD3DarkTheme.colors.surface + ), + surfaceDim: pick( + 'system_surface_dim_dark', + MD3DarkTheme.colors.surfaceDim, + MD3DarkTheme.colors.surfaceDim + ), + surfaceBright: pick( + 'system_surface_bright_dark', + MD3DarkTheme.colors.surfaceBright, + MD3DarkTheme.colors.surfaceBright + ), + surfaceContainer: pick( + 'system_surface_container_dark', + MD3DarkTheme.colors.surfaceContainer, + MD3DarkTheme.colors.surfaceContainer + ), + surfaceContainerHigh: pick( + 'system_surface_container_high_dark', + MD3DarkTheme.colors.surfaceContainerHigh, + MD3DarkTheme.colors.surfaceContainerHigh + ), + background: pick( + 'system_background_dark', + MD3DarkTheme.colors.background, + MD3DarkTheme.colors.background + ), + surfaceVariant: pick( + 'system_surface_variant_dark', + MD3DarkTheme.colors.surfaceVariant, + MD3DarkTheme.colors.surfaceVariant + ), + primaryFixed: pick( + 'system_primary_fixed', + 'system_accent1_100', + MD3DarkTheme.colors.primaryFixed + ), + primaryFixedDim: pick( + 'system_primary_fixed_dim', + 'system_accent1_200', + MD3DarkTheme.colors.primaryFixedDim + ), + onPrimaryFixed: pick( + 'system_on_primary_fixed', + 'system_accent1_900', + MD3DarkTheme.colors.onPrimaryFixed + ), + onPrimaryFixedVariant: pick( + 'system_on_primary_fixed_variant', + 'system_accent1_700', + MD3DarkTheme.colors.onPrimaryFixedVariant + ), + secondaryFixed: pick( + 'system_secondary_fixed', + 'system_accent2_100', + MD3DarkTheme.colors.secondaryFixed + ), + secondaryFixedDim: pick( + 'system_secondary_fixed_dim', + 'system_accent2_200', + MD3DarkTheme.colors.secondaryFixedDim + ), + onSecondaryFixed: pick( + 'system_on_secondary_fixed', + 'system_accent2_900', + MD3DarkTheme.colors.onSecondaryFixed + ), + onSecondaryFixedVariant: pick( + 'system_on_secondary_fixed_variant', + 'system_accent2_700', + MD3DarkTheme.colors.onSecondaryFixedVariant + ), + tertiaryFixed: pick( + 'system_tertiary_fixed', + 'system_accent3_100', + MD3DarkTheme.colors.tertiaryFixed + ), + tertiaryFixedDim: pick( + 'system_tertiary_fixed_dim', + 'system_accent3_200', + MD3DarkTheme.colors.tertiaryFixedDim + ), + onTertiaryFixed: pick( + 'system_on_tertiary_fixed', + 'system_accent3_900', + MD3DarkTheme.colors.onTertiaryFixed + ), + onTertiaryFixedVariant: pick( + 'system_on_tertiary_fixed_variant', + 'system_accent3_700', + MD3DarkTheme.colors.onTertiaryFixedVariant + ), +}; + +export const MD3DynamicLightTheme: MD3Theme = { + ...MD3LightTheme, + colors: { ...MD3LightTheme.colors, ...lightColors }, +}; + +export const MD3DynamicDarkTheme: MD3Theme = { + ...MD3DarkTheme, + colors: { ...MD3DarkTheme.colors, ...darkColors }, +}; diff --git a/src/styles/themes/v3/DynamicTheme.tsx b/src/styles/themes/v3/DynamicTheme.tsx new file mode 100644 index 0000000000..b2091929d5 --- /dev/null +++ b/src/styles/themes/v3/DynamicTheme.tsx @@ -0,0 +1,2 @@ +export { MD3DarkTheme as MD3DynamicDarkTheme } from './DarkTheme'; +export { MD3LightTheme as MD3DynamicLightTheme } from './LightTheme'; From 5193480a9ecdc3f22a30cc8cca6014971527248b Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Wed, 1 Apr 2026 12:00:54 +0300 Subject: [PATCH 06/14] chore: cleanup types.tsx * revert previously marked @deprecated --- src/types.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/types.tsx b/src/types.tsx index eee7059b0f..92fb4801a9 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -58,10 +58,8 @@ export type MD3Colors = { surfaceContainer: string; surfaceContainerHigh: string; surfaceContainerHighest: string; - /** @deprecated Use surfaceContainerHighest instead */ surfaceVariant: string; surfaceDisabled: string; - /** @deprecated Use surface instead */ background: string; error: string; errorContainer: string; @@ -76,7 +74,6 @@ export type MD3Colors = { onSurfaceDisabled: string; onError: string; onErrorContainer: string; - /** @deprecated Use onSurface instead */ onBackground: string; outline: string; outlineVariant: string; @@ -116,9 +113,7 @@ export type MD3AndroidColors = { surfaceContainer: number; surfaceContainerHigh: number; surfaceContainerHighest: number; - /** @deprecated Use surfaceContainerHighest instead */ surfaceVariant: number; - /** @deprecated Use surface instead */ background: number; error: number; errorContainer: number; @@ -132,7 +127,6 @@ export type MD3AndroidColors = { onSurfaceVariant: number; onError: number; onErrorContainer: number; - /** @deprecated Use onSurface instead */ onBackground: number; outline: number; outlineVariant: number; @@ -155,8 +149,6 @@ export type MD3AndroidColors = { scrim: number; }; -export type MD3Palette = {}; - export type ThemeProp = $DeepPartial; export type ThemeBase = { From c6af83b19c98854b7e99fd0e4a6d065de1057d01 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Wed, 1 Apr 2026 17:03:57 +0300 Subject: [PATCH 07/14] refactor: remove MD2 theme --- example/src/DrawerItems.tsx | 70 ++--- example/src/ExampleList.tsx | 6 +- .../src/Examples/ActivityIndicatorExample.tsx | 12 +- .../AnimatedFABExample/AnimatedFABExample.tsx | 40 +-- .../Examples/AnimatedFABExample/CustomFAB.tsx | 5 +- .../AnimatedFABExample/CustomFABControls.tsx | 13 +- example/src/Examples/AppbarExample.tsx | 131 ++++----- example/src/Examples/AvatarExample.tsx | 12 +- example/src/Examples/BadgeExample.tsx | 11 +- example/src/Examples/BannerExample.tsx | 31 +-- .../src/Examples/BottomNavigationExample.tsx | 18 +- example/src/Examples/ButtonExample.tsx | 214 ++++++++------- example/src/Examples/CardExample.tsx | 39 ++- example/src/Examples/CheckboxExample.tsx | 15 +- example/src/Examples/CheckboxItemExample.tsx | 17 +- example/src/Examples/ChipExample.tsx | 159 +++++------ example/src/Examples/DialogExample.tsx | 28 +- .../Examples/Dialogs/DialogTextComponent.tsx | 26 +- .../Dialogs/DialogWithCustomColors.tsx | 26 +- .../DialogWithDismissableBackButton.tsx | 6 +- .../Dialogs/DialogWithLoadingIndicator.tsx | 6 +- .../Examples/Dialogs/UndismissableDialog.tsx | 6 +- example/src/Examples/FABExample.tsx | 88 +++---- example/src/Examples/IconButtonExample.tsx | 36 +-- example/src/Examples/ListSectionExample.tsx | 4 +- example/src/Examples/MenuExample.tsx | 26 +- example/src/Examples/ProgressBarExample.tsx | 8 +- example/src/Examples/RadioButtonExample.tsx | 8 +- .../src/Examples/RadioButtonGroupExample.tsx | 6 +- .../src/Examples/RadioButtonItemExample.tsx | 19 +- example/src/Examples/SearchbarExample.tsx | 248 +++++++++--------- example/src/Examples/SnackbarExample.tsx | 22 +- example/src/Examples/SurfaceExample.tsx | 16 +- example/src/Examples/SwitchExample.tsx | 21 +- example/src/Examples/TextExample.tsx | 122 ++++----- example/src/Examples/TextInputExample.tsx | 29 +- example/src/PreferencesContext.tsx | 5 +- example/src/hooks/useExampleTheme.ts | 4 +- example/src/index.native.tsx | 23 +- example/src/index.tsx | 21 +- .../__fixtures__/rewrite-imports/code.js | 1 - .../__fixtures__/rewrite-imports/output.js | 1 - src/components/Appbar/Appbar.tsx | 45 +--- src/components/Appbar/AppbarAction.tsx | 10 +- src/components/Appbar/AppbarContent.tsx | 40 +-- src/components/Appbar/AppbarHeader.tsx | 13 +- src/components/Appbar/utils.ts | 35 +-- src/components/Avatar/AvatarIcon.tsx | 2 +- src/components/Avatar/AvatarText.tsx | 2 +- src/components/Badge.tsx | 17 +- src/components/Banner.tsx | 16 +- .../BottomNavigation/BottomNavigation.tsx | 15 +- .../BottomNavigation/BottomNavigationBar.tsx | 174 +++--------- src/components/BottomNavigation/utils.ts | 29 +- src/components/Button/Button.tsx | 49 ++-- src/components/Button/utils.tsx | 116 +++----- src/components/Card/Card.tsx | 75 +----- src/components/Card/CardActions.tsx | 18 +- src/components/Card/CardCover.tsx | 3 +- src/components/Card/CardTitle.tsx | 14 +- src/components/Card/utils.tsx | 62 +---- src/components/Checkbox/CheckboxItem.tsx | 16 +- src/components/Checkbox/utils.ts | 42 +-- src/components/Chip/Chip.tsx | 61 ++--- src/components/Chip/helpers.tsx | 164 +++--------- src/components/DataTable/DataTableHeader.tsx | 10 +- .../DataTable/DataTablePagination.tsx | 9 +- src/components/DataTable/DataTableRow.tsx | 10 +- src/components/DataTable/DataTableTitle.tsx | 2 +- src/components/Dialog/Dialog.tsx | 31 +-- src/components/Dialog/DialogActions.tsx | 17 +- src/components/Dialog/DialogIcon.tsx | 4 - src/components/Dialog/DialogScrollArea.tsx | 15 +- src/components/Dialog/DialogTitle.tsx | 17 +- src/components/Divider.tsx | 25 +- src/components/Drawer/DrawerCollapsedItem.tsx | 7 +- src/components/Drawer/DrawerItem.tsx | 30 +-- src/components/Drawer/DrawerSection.tsx | 18 +- src/components/FAB/AnimatedFAB.tsx | 40 +-- src/components/FAB/FAB.tsx | 10 +- src/components/FAB/FABGroup.tsx | 28 +- src/components/FAB/utils.ts | 150 +++-------- src/components/HelperText/utils.ts | 19 +- src/components/Icon.tsx | 3 +- src/components/IconButton/IconButton.tsx | 11 +- src/components/IconButton/utils.ts | 112 ++++---- src/components/List/ListAccordion.tsx | 51 +--- src/components/List/ListIcon.tsx | 12 +- src/components/List/ListImage.tsx | 18 +- src/components/List/ListItem.tsx | 38 +-- src/components/List/ListSubheader.tsx | 7 +- src/components/List/utils.ts | 30 +-- src/components/MaterialCommunityIcon.tsx | 2 +- src/components/Menu/Menu.tsx | 5 +- src/components/Menu/MenuItem.tsx | 36 +-- src/components/Menu/utils.ts | 54 +--- src/components/ProgressBar.tsx | 6 +- .../RadioButton/RadioButtonItem.tsx | 16 +- src/components/Searchbar.tsx | 56 ++-- .../SegmentedButtons/SegmentedButtonItem.tsx | 13 +- src/components/SegmentedButtons/utils.ts | 64 ++--- src/components/Snackbar.tsx | 18 +- src/components/Surface.tsx | 35 +-- src/components/Switch/utils.ts | 21 +- src/components/TextInput/Addons/Outline.tsx | 6 +- src/components/TextInput/Addons/Underline.tsx | 16 +- .../Adornment/TextInputAdornment.tsx | 9 +- .../TextInput/Adornment/TextInputAffix.tsx | 2 +- .../TextInput/Adornment/TextInputIcon.tsx | 5 +- src/components/TextInput/Adornment/utils.ts | 18 +- src/components/TextInput/Label/InputLabel.tsx | 3 +- src/components/TextInput/TextInputFlat.tsx | 10 +- .../TextInput/TextInputOutlined.tsx | 12 +- src/components/TextInput/constants.tsx | 29 +- src/components/TextInput/helpers.tsx | 150 ++--------- src/components/TextInput/types.tsx | 1 - src/components/ToggleButton/ToggleButton.tsx | 10 +- src/components/ToggleButton/utils.ts | 14 +- src/components/Tooltip/Tooltip.tsx | 4 +- src/components/TouchableRipple/utils.ts | 16 +- src/components/Typography/AnimatedText.tsx | 6 +- src/components/Typography/Text.tsx | 11 +- src/components/Typography/v2/Caption.tsx | 50 ---- src/components/Typography/v2/Headline.tsx | 53 ---- src/components/Typography/v2/Paragraph.tsx | 50 ---- src/components/Typography/v2/StyledText.tsx | 56 ---- src/components/Typography/v2/Subheading.tsx | 51 ---- src/components/Typography/v2/Text.tsx | 62 ----- src/components/Typography/v2/Title.tsx | 50 ---- src/components/Typography/v2/index.ts | 5 - .../__tests__/Appbar/Appbar.test.tsx | 155 ++--------- .../Appbar/__snapshots__/Appbar.test.tsx.snap | 1 - src/components/__tests__/Avatar.test.tsx | 2 +- src/components/__tests__/Badge.test.tsx | 2 +- src/components/__tests__/Banner.test.tsx | 2 +- .../__tests__/BottomNavigation.test.tsx | 70 ++--- src/components/__tests__/Button.test.tsx | 111 ++------ src/components/__tests__/Card/Card.test.tsx | 64 +---- .../__snapshots__/CheckboxItem.test.tsx.snap | 4 - .../__tests__/Checkbox/utils.test.tsx | 46 ++-- src/components/__tests__/Chip.test.tsx | 171 +++++++----- src/components/__tests__/FAB.test.tsx | 31 +-- src/components/__tests__/FABGroup.test.tsx | 22 +- src/components/__tests__/IconButton.test.tsx | 18 +- .../__tests__/ListAccordion.test.tsx | 35 +-- src/components/__tests__/ListItem.test.tsx | 2 +- src/components/__tests__/ListSection.test.tsx | 2 +- src/components/__tests__/ListUtils.test.tsx | 43 +-- src/components/__tests__/Menu.test.tsx | 2 +- src/components/__tests__/MenuItem.test.tsx | 81 ------ .../RadioButtonItem.test.tsx.snap | 4 - .../__tests__/SegmentedButton.test.tsx | 85 +----- src/components/__tests__/Snackbar.test.tsx | 4 +- src/components/__tests__/Switch.test.tsx | 39 +-- src/components/__tests__/TextInput.test.tsx | 245 ++--------------- .../__tests__/ToggleButton.test.tsx | 12 - .../__tests__/Typography/Caption.test.tsx | 28 -- .../__snapshots__/Caption.test.tsx.snap | 74 ------ .../__snapshots__/Banner.test.tsx.snap | 6 +- .../__snapshots__/Button.test.tsx.snap | 13 - .../__snapshots__/DataTable.test.tsx.snap | 1 - .../__snapshots__/ListSection.test.tsx.snap | 6 - .../__snapshots__/Menu.test.tsx.snap | 11 - .../__snapshots__/MenuItem.test.tsx.snap | 46 +--- .../__snapshots__/Snackbar.test.tsx.snap | 1 - src/core/PaperProvider.tsx | 27 +- src/core/__tests__/PaperProvider.test.tsx | 31 +-- src/core/theming.tsx | 59 +---- src/index.tsx | 15 -- .../views/MaterialBottomTabView.tsx | 1 - src/styles/__tests__/fonts.test.js | 67 ----- src/styles/fonts.tsx | 75 ++---- src/styles/overlay.tsx | 4 +- src/styles/shadow.tsx | 67 +---- src/styles/themes/index.ts | 2 - src/styles/themes/v2/DarkTheme.tsx | 30 --- src/styles/themes/v2/LightTheme.tsx | 30 --- src/styles/themes/v3/DarkTheme.tsx | 3 - src/styles/themes/v3/LightTheme.tsx | 2 - .../{v2/colors.tsx => v3/baseColors.ts} | 0 src/types.tsx | 29 +- 181 files changed, 1518 insertions(+), 4729 deletions(-) delete mode 100644 src/components/Typography/v2/Caption.tsx delete mode 100644 src/components/Typography/v2/Headline.tsx delete mode 100644 src/components/Typography/v2/Paragraph.tsx delete mode 100644 src/components/Typography/v2/StyledText.tsx delete mode 100644 src/components/Typography/v2/Subheading.tsx delete mode 100644 src/components/Typography/v2/Text.tsx delete mode 100644 src/components/Typography/v2/Title.tsx delete mode 100644 src/components/Typography/v2/index.ts delete mode 100644 src/components/__tests__/Typography/Caption.test.tsx delete mode 100644 src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap delete mode 100644 src/styles/themes/v2/DarkTheme.tsx delete mode 100644 src/styles/themes/v2/LightTheme.tsx rename src/styles/themes/{v2/colors.tsx => v3/baseColors.ts} (100%) diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 2d3ca6c202..1f1ac89e87 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -9,7 +9,6 @@ import { Button, Dialog, Drawer, - MD2Colors, MD3Colors, Switch, Text, @@ -96,7 +95,7 @@ function DrawerItems() { const _setDrawerItem = (index: number) => setDrawerItemIndex(index); - const { isV3, colors } = useExampleTheme(); + const { colors } = useExampleTheme(); const isIOS = Platform.OS === 'ios'; const expoGoExecution = Constants.executionEnvironment === ExecutionEnvironment.StoreClient; @@ -107,7 +106,6 @@ function DrawerItems() { toggleShouldUseDeviceColors, toggleTheme, toggleRtl: toggleRTL, - toggleThemeVersion, toggleCollapsed, toggleCustomFont, toggleRippleEffect, @@ -137,14 +135,10 @@ function DrawerItems() { }; const coloredLabelTheme = { - colors: isV3 - ? { - secondaryContainer: MD3Colors.tertiary80, - onSecondaryContainer: MD3Colors.tertiary20, - } - : { - primary: MD2Colors.tealA200, - }, + colors: { + secondaryContainer: MD3Colors.tertiary80, + onSecondaryContainer: MD3Colors.tertiary20, + }, }; return ( @@ -157,7 +151,7 @@ function DrawerItems() { }, ]} > - {isV3 && collapsed && ( + {collapsed && ( {DrawerCollapsedItemsData.map((props, index) => ( - {deviceColorsSupported && isV3 ? ( + {deviceColorsSupported ? ( - + Use device colors * @@ -198,7 +192,7 @@ function DrawerItems() { ) : null} - + Dark Theme @@ -208,7 +202,7 @@ function DrawerItems() { {!isWeb && ( - + RTL @@ -217,41 +211,28 @@ function DrawerItems() { )} - - - MD 2 + + + Collapsed drawer - + - {isV3 && ( - - - Collapsed drawer * - - - - - - )} - - {isV3 && ( - - - Custom font * - - - + + + Custom font + + - - )} + + - + - {isIOS ? 'Highlight' : 'Ripple'} effect * + {isIOS ? 'Highlight' : 'Ripple'} effect @@ -259,11 +240,6 @@ function DrawerItems() { - {isV3 && !collapsed && ( - - * - available only for MD3 - - )} React Native Paper Version{' '} {require('react-native-paper/package.json').version} diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx index 016f085caa..af6ed7534c 100644 --- a/example/src/ExampleList.tsx +++ b/example/src/ExampleList.tsx @@ -132,16 +132,12 @@ const data = Object.keys(mainExamples).map( export default function ExampleList({ navigation }: Props) { const keyExtractor = (item: { id: string }) => item.id; - const { colors, isV3 } = useExampleTheme(); + const { colors } = useExampleTheme(); const safeArea = useSafeAreaInsets(); const renderItem = ({ item }: { item: Item }) => { const { data, id } = item; - if (!isV3 && data.title === mainExamples.themingWithReactNavigation.title) { - return null; - } - return ( { const [animating, setAnimating] = React.useState(true); - const { isV3 } = useExampleTheme(); return ( @@ -49,7 +41,7 @@ const ActivityIndicatorExample = () => { diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx index 4bffa05322..f9b2303fad 100644 --- a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx +++ b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx @@ -3,13 +3,7 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'; import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native'; import Icon from '@expo/vector-icons/MaterialCommunityIcons'; -import { - Avatar, - MD2Colors, - MD3Colors, - Paragraph, - Text, -} from 'react-native-paper'; +import { Avatar, MD3Colors, Text } from 'react-native-paper'; import CustomFAB from './CustomFAB'; import CustomFABControls, { @@ -32,7 +26,7 @@ type Item = { }; const AnimatedFABExample = () => { - const { colors, isV3 } = useExampleTheme(); + const { colors } = useExampleTheme(); const isIOS = Platform.OS === 'ios'; @@ -47,63 +41,55 @@ const AnimatedFABExample = () => { const renderItem = React.useCallback( ({ item }: { item: Item }) => { - const TextComponent = isV3 ? Text : Paragraph; - return ( - {item.sender} - - + {item.date} - + - {item.header} - - + {item.message} - + setVisible(!visible)} @@ -114,7 +100,7 @@ const AnimatedFABExample = () => { ); }, - [visible, isV3] + [visible] ); const onScroll = ({ diff --git a/example/src/Examples/AnimatedFABExample/CustomFAB.tsx b/example/src/Examples/AnimatedFABExample/CustomFAB.tsx index 3495b00a86..9130debf33 100644 --- a/example/src/Examples/AnimatedFABExample/CustomFAB.tsx +++ b/example/src/Examples/AnimatedFABExample/CustomFAB.tsx @@ -3,8 +3,6 @@ import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native'; import { AnimatedFAB } from 'react-native-paper'; -import { useExampleTheme } from '../../hooks/useExampleTheme'; - type CustomFABProps = { animatedValue: Animated.Value; visible: boolean; @@ -25,7 +23,6 @@ const CustomFAB = ({ iconMode, }: CustomFABProps) => { const [isExtended, setIsExtended] = React.useState(true); - const { isV3 } = useExampleTheme(); const isIOS = Platform.OS === 'ios'; @@ -44,7 +41,7 @@ const CustomFAB = ({ icon={'plus'} label={label} extended={isExtended} - uppercase={!isV3} + uppercase={false} onPress={() => console.log('Pressed')} visible={visible} animateFrom={animateFrom} diff --git a/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx b/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx index a612a4234f..b3934c4504 100644 --- a/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx +++ b/example/src/Examples/AnimatedFABExample/CustomFABControls.tsx @@ -6,7 +6,7 @@ import type { AnimatedFABAnimateFrom, AnimatedFABIconMode, } from 'react-native-paper'; -import { Paragraph, RadioButton, Text } from 'react-native-paper'; +import { RadioButton, Text } from 'react-native-paper'; import { useExampleTheme } from '../../hooks/useExampleTheme'; @@ -40,19 +40,15 @@ const CustomControl = ({ value, onChange, }: CustomControlProps) => { - const { isV3 } = useExampleTheme(); - const _renderItem = React.useCallback( ({ item }: ListRenderItemInfo<(typeof options)[number]>) => { - const TextComponent = isV3 ? Text : Paragraph; - return ( onChange(item)} style={styles.controlItem} > - {item} + {item} ); }, - [value, onChange, isV3] + [value, onChange] ); const _keyExtractor = React.useCallback( (item: (typeof options)[number]) => item, [] ); - const TextComponent = isV3 ? Text : Paragraph; return ( - {name} + {name} { const [showLeftIcon, setShowLeftIcon] = React.useState(true); - const [showSubtitle, setShowSubtitle] = React.useState(true); + const [showSubtitle] = React.useState(true); const [showSearchIcon, setShowSearchIcon] = React.useState(true); const [showMoreIcon, setShowMoreIcon] = React.useState(true); const [showCustomColor, setShowCustomColor] = React.useState(false); - const [showExactTheme, setShowExactTheme] = React.useState(false); const [appbarMode, setAppbarMode] = React.useState('small'); const [showCalendarIcon, setShowCalendarIcon] = React.useState(false); const [showElevated, setShowElevated] = React.useState(false); @@ -41,7 +39,7 @@ const AppbarExample = ({ navigation }: Props) => { const theme = useExampleTheme(); const { bottom, left, right } = useSafeAreaInsets(); - const height = theme.isV3 ? 80 : 56; + const height = 80; const isCenterAlignedMode = appbarMode === 'center-aligned'; @@ -50,9 +48,6 @@ const AppbarExample = ({ navigation }: Props) => { header: () => ( @@ -85,28 +80,22 @@ const AppbarExample = ({ navigation }: Props) => { showSearchIcon, showMoreIcon, showCustomColor, - showExactTheme, appbarMode, showCalendarIcon, isCenterAlignedMode, showElevated, ]); - const TextComponent = theme.isV3 ? Text : Paragraph; + const TextComponent = Text; const renderFAB = () => { return ( {}} - style={[ - styles.fab, - theme.isV3 - ? { top: (height - MEDIUM_FAB_HEIGHT) / 2 } - : { bottom: height / 2 + bottom }, - ]} + style={[styles.fab, { top: (height - MEDIUM_FAB_HEIGHT) / 2 }]} /> ); }; @@ -117,12 +106,6 @@ const AppbarExample = ({ navigation }: Props) => { Left icon - {!theme.isV3 && ( - - Subtitle - - - )} Search icon @@ -131,32 +114,22 @@ const AppbarExample = ({ navigation }: Props) => { More icon - {theme.isV3 && ( - - Calendar icon - - - )} + + Calendar icon + + Custom Color - {!theme.isV3 && ( - - Exact Dark Theme - - - )} - {theme.isV3 && ( - - Elevated - - - )} + + Elevated + + ); @@ -166,40 +139,34 @@ const AppbarExample = ({ navigation }: Props) => { style={{ marginBottom: height + bottom }} contentContainerStyle={styles.contentContainer} > - {theme.isV3 ? ( - - {renderDefaultOptions()} - - ) : ( - renderDefaultOptions() - )} - {theme.isV3 && ( - - - setAppbarMode(value as AppbarModes) - } - > - - Small (default) - - - - Medium - - - - Large - - - - Center-aligned - - - - - )} + + {renderDefaultOptions()} + + + + setAppbarMode(value as AppbarModes) + } + > + + Small (default) + + + + Medium + + + + Large + + + + Center-aligned + + + + { { height: height + bottom, }, - theme.isV3 && { + { backgroundColor: theme.colors.elevation.level2, }, ]} safeAreaInsets={{ bottom, left, right }} - theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }} > {}} /> {}} /> {}} /> {}} /> - {theme.isV3 && renderFAB()} + {renderFAB()} - {!theme.isV3 && renderFAB()} setShowSnackbar(false)} diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx index b77da80b09..229c2f4a0b 100644 --- a/example/src/Examples/AvatarExample.tsx +++ b/example/src/Examples/AvatarExample.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Avatar, List, MD2Colors, MD3Colors } from 'react-native-paper'; +import { Avatar, List, MD3Colors } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const AvatarExample = () => { - const { isV3 } = useExampleTheme(); return ( @@ -16,11 +14,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500, + backgroundColor: MD3Colors.error70, }, ]} label="XD" - color={isV3 ? MD3Colors.primary0 : MD2Colors.black} + color={MD3Colors.primary0} /> @@ -32,11 +30,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500, + backgroundColor: MD3Colors.error70, }, ]} icon="folder" - color={isV3 ? MD3Colors.primary0 : MD2Colors.black} + color={MD3Colors.primary0} /> diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx index 17f0e1b160..3269dc70a8 100644 --- a/example/src/Examples/BadgeExample.tsx +++ b/example/src/Examples/BadgeExample.tsx @@ -5,18 +5,15 @@ import { Badge, IconButton, List, - MD2Colors, MD3Colors, Text, Switch, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const BadgeExample = () => { const [visible, setVisible] = React.useState(true); - const { isV3 } = useExampleTheme(); return ( @@ -44,9 +41,7 @@ const BadgeExample = () => { style={[ styles.badge, { - backgroundColor: isV3 - ? MD3Colors.primary80 - : MD2Colors.blue500, + backgroundColor: MD3Colors.primary80, }, ]} > @@ -59,11 +54,11 @@ const BadgeExample = () => { - + - + diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx index 0e856e9699..f93cf55797 100644 --- a/example/src/Examples/BannerExample.tsx +++ b/example/src/Examples/BannerExample.tsx @@ -8,7 +8,7 @@ import { View, } from 'react-native'; -import { Banner, FAB, MD2Colors, MD3Colors } from 'react-native-paper'; +import { Banner, FAB, MD3Colors } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -29,25 +29,16 @@ const BannerExample = () => { setHeight(layoutHeight); }; - const customTheme = !defaultTheme.isV3 - ? { - ...defaultTheme, - colors: { - text: MD2Colors.white, - surface: MD2Colors.blue200, - primary: MD2Colors.purple900, - }, - } - : { - ...defaultTheme, - colors: { - onSurface: MD3Colors.tertiary100, - elevation: { - level1: MD3Colors.tertiary50, - }, - primary: MD3Colors.tertiary10, - }, - }; + const customTheme = { + ...defaultTheme, + colors: { + onSurface: MD3Colors.tertiary100, + elevation: { + level1: MD3Colors.tertiary50, + }, + primary: MD3Colors.tertiary10, + }, + }; return ( <> diff --git a/example/src/Examples/BottomNavigationExample.tsx b/example/src/Examples/BottomNavigationExample.tsx index 6ed5d7add5..c30934c9f7 100644 --- a/example/src/Examples/BottomNavigationExample.tsx +++ b/example/src/Examples/BottomNavigationExample.tsx @@ -17,7 +17,6 @@ import { } from 'react-native-paper'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type Route = { route: { key: string } }; @@ -49,7 +48,6 @@ const PhotoGallery = ({ route }: Route) => { }; const BottomNavigationExample = ({ navigation }: Props) => { - const { isV3 } = useExampleTheme(); const insets = useSafeAreaInsets(); const [index, setIndex] = React.useState(0); const [menuVisible, setMenuVisible] = React.useState(false); @@ -63,34 +61,25 @@ const BottomNavigationExample = ({ navigation }: Props) => { key: 'album', title: 'Album', focusedIcon: 'image-album', - ...(!isV3 && { color: '#6200ee' }), }, { key: 'library', title: 'Library', focusedIcon: 'inbox', badge: true, - ...(isV3 - ? { unfocusedIcon: 'inbox-outline' } - : { - color: '#2962ff', - }), + unfocusedIcon: 'inbox-outline', }, { key: 'favorites', title: 'Favorites', focusedIcon: 'heart', - ...(isV3 - ? { unfocusedIcon: 'heart-outline' } - : { - color: '#00796b', - }), + unfocusedIcon: 'heart-outline', }, { key: 'purchased', title: 'Purchased', focusedIcon: 'shopping', - ...(isV3 ? { unfocusedIcon: 'shopping-outline' } : { color: '#c51162' }), + unfocusedIcon: 'shopping-outline', }, ]); @@ -112,7 +101,6 @@ const BottomNavigationExample = ({ navigation }: Props) => { setMenuVisible(true)} - {...(!isV3 && { color: 'white' })} /> } > diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx index 7ec58f90f4..c6ecc56d09 100644 --- a/example/src/Examples/ButtonExample.tsx +++ b/example/src/Examples/ButtonExample.tsx @@ -9,11 +9,11 @@ import ScreenWrapper from '../ScreenWrapper'; const ButtonExample = () => { const theme = useExampleTheme(); - const color = theme.isV3 ? theme.colors.inversePrimary : theme.colors.accent; + const color = theme.colors.inversePrimary; return ( - + - {theme.isV3 && ( - - - - - - - - - - - )} - + + + + + + + + + + + - + - {theme.isV3 && ( - - - - - - - - - - - )} + + + + + + + + + + diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx index 5b12fc08bb..04719094f3 100644 --- a/example/src/Examples/CardExample.tsx +++ b/example/src/Examples/CardExample.tsx @@ -7,7 +7,6 @@ import { Card, Chip, IconButton, - Paragraph, Text, } from 'react-native-paper'; @@ -19,16 +18,14 @@ import ScreenWrapper from '../ScreenWrapper'; type Mode = 'elevated' | 'outlined' | 'contained'; const CardExample = () => { - const { colors, isV3 } = useExampleTheme(); + const { colors } = useExampleTheme(); const [selectedMode, setSelectedMode] = React.useState('elevated' as Mode); const [isSelected, setIsSelected] = React.useState(false); const preferences = React.useContext(PreferencesContext); - const modes = isV3 - ? ['elevated', 'outlined', 'contained'] - : ['elevated', 'outlined']; + const modes = ['elevated', 'outlined', 'contained']; - const TextComponent = isV3 ? Text : Paragraph; + const TextComponent = Text; return ( @@ -63,22 +60,20 @@ const CardExample = () => { - {isV3 && ( - - - - - - This is a card using title and subtitle with specified variants. - - - - )} + + + + + + This is a card using title and subtitle with specified variants. + + + diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx index c8ce8c23a7..5067b7bb48 100644 --- a/example/src/Examples/CheckboxExample.tsx +++ b/example/src/Examples/CheckboxExample.tsx @@ -1,16 +1,8 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { - Checkbox, - MD2Colors, - MD3Colors, - Paragraph, - Text, - TouchableRipple, -} from 'react-native-paper'; +import { Checkbox, MD3Colors, Text, TouchableRipple } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const CheckboxExample = () => { @@ -18,8 +10,7 @@ const CheckboxExample = () => { const [checkedCustom, setCheckedCustom] = React.useState(true); const [indeterminate, setIndeterminate] = React.useState(true); - const { isV3 } = useExampleTheme(); - const TextComponent = isV3 ? Text : Paragraph; + const TextComponent = Text; return ( @@ -37,7 +28,7 @@ const CheckboxExample = () => { Custom diff --git a/example/src/Examples/CheckboxItemExample.tsx b/example/src/Examples/CheckboxItemExample.tsx index 514272788c..acafd709b7 100644 --- a/example/src/Examples/CheckboxItemExample.tsx +++ b/example/src/Examples/CheckboxItemExample.tsx @@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native'; import { Checkbox } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const CheckboxExample = () => { @@ -15,8 +14,6 @@ const CheckboxExample = () => { const [checkedDisabled, setCheckedDisabled] = React.useState(true); const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true); - const { isV3 } = useExampleTheme(); - return ( { onPress={() => setCheckedDisabled(!checkedDisabled)} disabled /> - {isV3 && ( - setCheckedLabelVariant(!checkedLabelVariant)} - /> - )} + setCheckedLabelVariant(!checkedLabelVariant)} + /> ); }; diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx index 20f0393153..211ebfde49 100644 --- a/example/src/Examples/ChipExample.tsx +++ b/example/src/Examples/ChipExample.tsx @@ -2,16 +2,8 @@ import * as React from 'react'; import { Image, StyleSheet, View } from 'react-native'; import color from 'color'; -import { - Chip, - List, - MD2Colors, - MD3Colors, - Snackbar, - Text, -} from 'react-native-paper'; +import { Chip, List, MD3Colors, Snackbar, Text } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const ChipExample = () => { @@ -19,8 +11,7 @@ const ChipExample = () => { visible: false, text: '', }); - const { isV3 } = useExampleTheme(); - const customColor = isV3 ? MD3Colors.error50 : MD2Colors.purple900; + const customColor = MD3Colors.error50; return ( <> @@ -30,24 +21,20 @@ const ChipExample = () => { {}} style={styles.chip}> Simple - {isV3 && ( - <> - {}} - style={styles.chip} - > - With selected overlay - - {}} style={styles.chip}> - Elevated - - {}}> - Compact chip - - - )} + {}} + style={styles.chip} + > + With selected overlay + + {}} style={styles.chip}> + Elevated + + {}}> + Compact chip + {}} onClose={() => @@ -137,35 +124,31 @@ const ChipExample = () => { {}} style={styles.chip}> Simple - {isV3 && ( - <> - {}} - style={styles.chip} - > - With selected overlay - - {}} - style={styles.chip} - > - Elevated - - {}} - style={styles.chip} - > - Compact chip - - - )} + {}} + style={styles.chip} + > + With selected overlay + + {}} + style={styles.chip} + > + Elevated + + {}} + style={styles.chip} + > + Compact chip + {}} @@ -251,38 +234,34 @@ const ChipExample = () => { - {isV3 && ( - <> - {}} - compact - avatar={ - - } - style={[styles.chip, styles.customBorderRadius]} - > - Compact with custom border radius - - {}} - compact - avatar={ - - } - style={[styles.chip, styles.customBorderRadius]} - > - Compact with custom border radius - - - )} + {}} + compact + avatar={ + + } + style={[styles.chip, styles.customBorderRadius]} + > + Compact with custom border radius + + {}} + compact + avatar={ + + } + style={[styles.chip, styles.customBorderRadius]} + > + Compact with custom border radius + {}} diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx index 4a9de665d7..d926ae6616 100644 --- a/example/src/Examples/DialogExample.tsx +++ b/example/src/Examples/DialogExample.tsx @@ -12,7 +12,6 @@ import { DialogWithRadioBtns, UndismissableDialog, } from './Dialogs'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type ButtonVisibility = { @@ -21,7 +20,6 @@ type ButtonVisibility = { const DialogExample = () => { const [visible, setVisible] = React.useState({}); - const { isV3 } = useExampleTheme(); const _toggleDialog = (name: string) => () => setVisible({ ...visible, [name]: !visible[name] }); @@ -65,15 +63,13 @@ const DialogExample = () => { > Custom colors - {isV3 && ( - - )} + {Platform.OS === 'android' && ( diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx index 32512dc91d..3124126122 100644 --- a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx +++ b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper'; +import { Button, Portal, Dialog } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -26,9 +26,7 @@ const DialogWithDismissableBackButton = ({ - + diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx index 5ef9e7e7f2..5860737e3e 100644 --- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx +++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'; -import { Dialog, MD2Colors, MD3Colors, Portal } from 'react-native-paper'; +import { Dialog, MD3Colors, Portal } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; -import { useExampleTheme } from '../../hooks/useExampleTheme'; const isIOS = Platform.OS === 'ios'; @@ -15,7 +14,6 @@ const DialogWithLoadingIndicator = ({ visible: boolean; close: () => void; }) => { - const { isV3 } = useExampleTheme(); return ( @@ -23,7 +21,7 @@ const DialogWithLoadingIndicator = ({ diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx index 2af40f4e97..2705211201 100644 --- a/example/src/Examples/Dialogs/UndismissableDialog.tsx +++ b/example/src/Examples/Dialogs/UndismissableDialog.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper'; +import { Button, Portal, Dialog } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -18,9 +18,7 @@ const UndismissableDialog = ({ This is an undismissable dialog!! - + diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx index 0cff916980..e7db1118a7 100644 --- a/example/src/Examples/FABExample.tsx +++ b/example/src/Examples/FABExample.tsx @@ -4,7 +4,6 @@ import { Alert, StyleSheet, View } from 'react-native'; import { FAB, Portal, Text } from 'react-native-paper'; import { isWeb } from '../../utils'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type FABVariant = 'primary' | 'secondary' | 'tertiary' | 'surface'; @@ -16,7 +15,6 @@ const FABExample = () => { const [toggleStackOnLongPress, setToggleStackOnLongPress] = React.useState(false); const [open, setOpen] = React.useState(false); - const { isV3 } = useExampleTheme(); const variants = ['primary', 'secondary', 'tertiary', 'surface']; const sizes = ['small', 'medium', 'large']; @@ -32,69 +30,49 @@ const FABExample = () => { onPress={() => setVisible(!visible)} /> - {isV3 && ( - <> - - {variants.map((variant) => ( - - {}} - visible={visible} - variant={variant as FABVariant} - /> - {visible && {variant}} - - ))} - - - {sizes.map((size) => ( - - {}} - visible={visible} - size={size as FABSize} - /> - {visible && {size}} - - ))} - - - {modes.map((mode) => ( - - {}} - visible={visible} - mode={mode as FABMode} - /> - {visible && {mode}} - - ))} + + {variants.map((variant) => ( + + {}} + visible={visible} + variant={variant as FABVariant} + /> + {visible && {variant}} - - )} - - {!isV3 && ( - <> + ))} + + + {sizes.map((size) => ( + {}} visible={visible} + size={size as FABSize} /> + {visible && {size}} + + ))} + + + {modes.map((mode) => ( + {}} visible={visible} + mode={mode as FABMode} /> - - )} + {visible && {mode}} + + ))} + + { icon: 'bell', label: 'Remind', onPress: () => {}, - size: isV3 ? 'small' : 'medium', + size: 'small', }, { icon: toggleStackOnLongPress diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx index 6342b1e144..440c23a5a7 100644 --- a/example/src/Examples/IconButtonExample.tsx +++ b/example/src/Examples/IconButtonExample.tsx @@ -1,36 +1,11 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { IconButton, List, MD2Colors, MD3Colors } from 'react-native-paper'; +import { IconButton, List, MD3Colors } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const ButtonExample = () => { - const { isV3 } = useExampleTheme(); - if (!isV3) { - return ( - - {}} /> - {}} - /> - {}} loading /> - {}} /> - {}} - style={{ backgroundColor: MD2Colors.lightGreen200 }} - /> - {}} /> - - ); - } - return ( @@ -162,7 +137,7 @@ const ButtonExample = () => { mode="contained" style={styles.slightlyRounded} size={24} - contentStyle={{ padding: 8 }} + contentStyle={styles.eyePadding} iconColor={MD3Colors.tertiary50} onPress={() => {}} /> @@ -200,10 +175,6 @@ const ButtonExample = () => { ButtonExample.title = 'Icon Button'; const styles = StyleSheet.create({ - v2Container: { - flexDirection: 'row', - padding: 8, - }, v3Container: { flexDirection: 'column', }, @@ -225,6 +196,9 @@ const styles = StyleSheet.create({ borderBottomLeftRadius: 8, borderBottomRightRadius: 6, }, + eyePadding: { + padding: 8, + }, }); export default ButtonExample; diff --git a/example/src/Examples/ListSectionExample.tsx b/example/src/Examples/ListSectionExample.tsx index dd15ab29e2..79f4d7f624 100644 --- a/example/src/Examples/ListSectionExample.tsx +++ b/example/src/Examples/ListSectionExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, Image, View } from 'react-native'; -import { Caption, List, Text, Chip, Divider } from 'react-native-paper'; +import { List, Text, Chip, Divider } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; const ListSectionExample = () => { @@ -97,7 +97,7 @@ const ListSectionExample = () => { > List Item - Yesterday + Yesterday )} description={({ diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx index c1164d35b6..027cc5b84d 100644 --- a/example/src/Examples/MenuExample.tsx +++ b/example/src/Examples/MenuExample.tsx @@ -16,7 +16,6 @@ import { TouchableRipple, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type ContextualMenuCoord = { x: number; y: number }; @@ -35,7 +34,6 @@ const MenuExample = ({ navigation }: Props) => { const [visible, setVisible] = React.useState({}); const [contextualMenuCoord, setContextualMenuCoor] = React.useState({ x: 0, y: 0 }); - const { isV3 } = useExampleTheme(); const _toggleMenu = (name: string) => () => setVisible({ ...visible, [name]: !visible[name] }); @@ -66,16 +64,12 @@ const MenuExample = ({ navigation }: Props) => { visible={_getVisible('menu1')} onDismiss={_toggleMenu('menu1')} anchor={ - + } > {}} title="Undo" /> {}} title="Redo" /> - + {}} title="Cut" disabled /> {}} title="Copy" disabled /> {}} title="Paste" /> @@ -99,7 +93,7 @@ const MenuExample = ({ navigation }: Props) => { {}} title="Undo" /> {}} title="Redo" /> - + { onPress={() => {}} title="Paste" /> - {isV3 && ( - {}} - title="Share" - /> - )} + {}} + title="Share" + /> { > {}} title="Item 1" /> {}} title="Item 2" /> - + {}} title="Item 3" disabled /> diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index 565147f4c6..33f39f9d35 100644 --- a/example/src/Examples/ProgressBarExample.tsx +++ b/example/src/Examples/ProgressBarExample.tsx @@ -4,7 +4,6 @@ import { View, StyleSheet, Animated } from 'react-native'; import { Button, ProgressBar, - MD2Colors, MD3Colors, ProgressBarProps, Text, @@ -29,7 +28,6 @@ const ProgressBarExample = () => { const [visible, setVisible] = React.useState(true); const [progress, setProgress] = React.useState(0.3); const theme = useExampleTheme(); - const { isV3 } = theme; const { current: progressBarValue } = React.useRef(new Animated.Value(0)); const runCustomAnimation = () => { @@ -64,7 +62,7 @@ const ProgressBarExample = () => { @@ -75,9 +73,9 @@ const ProgressBarExample = () => { diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx index 88bf9ebfb7..e33aabdfff 100644 --- a/example/src/Examples/RadioButtonExample.tsx +++ b/example/src/Examples/RadioButtonExample.tsx @@ -2,23 +2,19 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import { - MD2Colors, MD3Colors, - Paragraph, RadioButton, Text, TouchableRipple, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom'; const RadioButtonExample = () => { const [checked, setChecked] = React.useState('normal'); - const { isV3 } = useExampleTheme(); - const TextComponent = isV3 ? Text : Paragraph; + const TextComponent = Text; return ( @@ -50,7 +46,7 @@ const RadioButtonExample = () => { diff --git a/example/src/Examples/RadioButtonGroupExample.tsx b/example/src/Examples/RadioButtonGroupExample.tsx index 6d614911ce..be26c9258b 100644 --- a/example/src/Examples/RadioButtonGroupExample.tsx +++ b/example/src/Examples/RadioButtonGroupExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { List, Paragraph, RadioButton, Text } from 'react-native-paper'; +import { List, RadioButton, Text } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -10,8 +10,8 @@ const RadioButtonGroupExample = () => { const [value, setValue] = React.useState('first'); const [value2, setValue2] = React.useState('first'); - const { colors, isV3 } = useExampleTheme(); - const TextComponent = isV3 ? Text : Paragraph; + const { colors } = useExampleTheme(); + const TextComponent = Text; return ( diff --git a/example/src/Examples/RadioButtonItemExample.tsx b/example/src/Examples/RadioButtonItemExample.tsx index 38eff755a5..e640a1dd0a 100644 --- a/example/src/Examples/RadioButtonItemExample.tsx +++ b/example/src/Examples/RadioButtonItemExample.tsx @@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native'; import { RadioButton } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const RadioButtonItemExample = () => { @@ -15,8 +14,6 @@ const RadioButtonItemExample = () => { const [checkedDisabled, setCheckedDisabled] = React.useState(true); const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true); - const { isV3 } = useExampleTheme(); - return ( { value="iOS" disabled /> - {isV3 && ( - setCheckedLabelVariant(!checkedLabelVariant)} - value="default" - /> - )} + setCheckedLabelVariant(!checkedLabelVariant)} + value="default" + /> ); }; diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx index 51a8af3ed8..c5b5eaca15 100644 --- a/example/src/Examples/SearchbarExample.tsx +++ b/example/src/Examples/SearchbarExample.tsx @@ -34,12 +34,12 @@ const SearchExample = ({ navigation }: Props) => { clickableLoading: '', }); - const { isV3, colors } = useExampleTheme(); + const { colors } = useExampleTheme(); return ( <> - {!isV3 && ( + @@ -47,136 +47,122 @@ const SearchExample = ({ navigation }: Props) => { } value={searchQueries.searchBarMode} style={styles.searchbar} + mode="bar" /> - )} - {isV3 && ( - - - setSearchQuery({ ...searchQueries, searchBarMode: query }) - } - value={searchQueries.searchBarMode} - style={styles.searchbar} - mode="bar" - /> - - setSearchQuery({ ...searchQueries, traileringIcon: query }) - } - value={searchQueries.traileringIcon} - traileringIcon={'microphone'} - traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant - } - traileringIconAccessibilityLabel={'microphone button'} - onTraileringIconPress={() => setIsVisible(true)} - style={styles.searchbar} - mode="bar" - /> - - setSearchQuery({ - ...searchQueries, - traileringIconWithRightItem: query, - }) - } - value={searchQueries.traileringIconWithRightItem} - traileringIcon={'microphone'} - traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant - } - traileringIconAccessibilityLabel={'microphone button'} - onTraileringIconPress={() => setIsVisible(true)} - right={(props) => ( - - )} - style={styles.searchbar} - /> - - setSearchQuery({ - ...searchQueries, - rightItem: query, - }) - } - value={searchQueries.rightItem} - right={(props) => ( - - )} - style={styles.searchbar} - /> - - setSearchQuery({ - ...searchQueries, - loadingBarMode: query, - }) - } - value={searchQueries.loadingBarMode} - style={styles.searchbar} - mode="bar" - loading - traileringIcon={'microphone'} - /> - - )} - {isV3 && ( - - - setSearchQuery({ - ...searchQueries, - searchViewMode: query, - }) - } - value={searchQueries.searchViewMode} - style={styles.searchbar} - mode="view" - /> - - setSearchQuery({ - ...searchQueries, - searchWithoutBottomLine: query, - }) - } - value={searchQueries.searchWithoutBottomLine} - style={styles.searchbar} - mode="view" - showDivider={false} - /> - - setSearchQuery({ - ...searchQueries, - loadingViewMode: query, - }) - } - value={searchQueries.loadingViewMode} - style={styles.searchbar} - mode="view" - loading - /> - - )} + + setSearchQuery({ ...searchQueries, traileringIcon: query }) + } + value={searchQueries.traileringIcon} + traileringIcon={'microphone'} + traileringIconColor={ + isVisible ? MD3Colors.error40 : colors.onSurfaceVariant + } + traileringIconAccessibilityLabel={'microphone button'} + onTraileringIconPress={() => setIsVisible(true)} + style={styles.searchbar} + mode="bar" + /> + + setSearchQuery({ + ...searchQueries, + traileringIconWithRightItem: query, + }) + } + value={searchQueries.traileringIconWithRightItem} + traileringIcon={'microphone'} + traileringIconColor={ + isVisible ? MD3Colors.error40 : colors.onSurfaceVariant + } + traileringIconAccessibilityLabel={'microphone button'} + onTraileringIconPress={() => setIsVisible(true)} + right={(props) => ( + + )} + style={styles.searchbar} + /> + + setSearchQuery({ + ...searchQueries, + rightItem: query, + }) + } + value={searchQueries.rightItem} + right={(props) => ( + + )} + style={styles.searchbar} + /> + + setSearchQuery({ + ...searchQueries, + loadingBarMode: query, + }) + } + value={searchQueries.loadingBarMode} + style={styles.searchbar} + mode="bar" + loading + traileringIcon={'microphone'} + /> + + + + setSearchQuery({ + ...searchQueries, + searchViewMode: query, + }) + } + value={searchQueries.searchViewMode} + style={styles.searchbar} + mode="view" + /> + + setSearchQuery({ + ...searchQueries, + searchWithoutBottomLine: query, + }) + } + value={searchQueries.searchWithoutBottomLine} + style={styles.searchbar} + mode="view" + showDivider={false} + /> + + setSearchQuery({ + ...searchQueries, + loadingViewMode: query, + }) + } + value={searchQueries.loadingViewMode} + style={styles.searchbar} + mode="view" + loading + /> + { const preferences = React.useContext(PreferencesContext); - const theme = useExampleTheme(); const [options, setOptions] = React.useState({ showSnackbar: false, @@ -51,17 +49,15 @@ const SnackbarExample = () => { } /> - {theme.isV3 && ( - - Close icon button - - setOptions({ ...options, showCloseIcon: !showCloseIcon }) - } - /> - - )} + + Close icon button + + setOptions({ ...options, showCloseIcon: !showCloseIcon }) + } + /> + Longer message { - const { isV3 } = useExampleTheme(); - const v2Elevation = [1, 2, 4, 8, 12]; - const elevationValues = isV3 ? Array.from({ length: 6 }) : v2Elevation; + const elevationValues = Array.from({ length: 6 }); const renderSurface = (index: number, mode: 'flat' | 'elevated') => ( - {isV3 - ? `Elevation ${index === 1 ? '(default)' : ''} ${index}` - : `${elevationValues[index]}`} + {`Elevation ${index === 1 ? '(default)' : ''} ${index}`} ); diff --git a/example/src/Examples/SwitchExample.tsx b/example/src/Examples/SwitchExample.tsx index a1bff15dc4..03e0e45d4d 100644 --- a/example/src/Examples/SwitchExample.tsx +++ b/example/src/Examples/SwitchExample.tsx @@ -1,24 +1,14 @@ import * as React from 'react'; import { Platform, StyleSheet, View } from 'react-native'; -import { - MD2Colors, - MD3Colors, - Paragraph, - Switch, - Text, - TouchableRipple, -} from 'react-native-paper'; +import { MD3Colors, Switch, Text, TouchableRipple } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const SwitchExample = () => { const [valueNormal, setNormalValue] = React.useState(true); const [valueCustom, setCustomValue] = React.useState(true); - const { isV3 } = useExampleTheme(); - const switchValueNormalLabel = `switch ${ valueNormal === true ? 'on' : 'off' }`; @@ -26,7 +16,7 @@ const SwitchExample = () => { valueCustom === true ? 'on' : 'off' }`; - const TextComponent = isV3 ? Text : Paragraph; + const TextComponent = Text; return Platform.OS === 'android' ? ( @@ -42,10 +32,7 @@ const SwitchExample = () => { Custom {switchValueCustomlLabel} - + @@ -72,7 +59,7 @@ const SwitchExample = () => { setCustomValue(!valueCustom)} - color={isV3 ? MD3Colors.tertiary50 : MD2Colors.blue500} + color={MD3Colors.tertiary50} /> diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index 4bd1572359..1cb96edfaf 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -2,25 +2,17 @@ import * as React from 'react'; import { Platform, StyleSheet, View } from 'react-native'; import { - Caption, configureFonts, - Headline, MD3LightTheme, - Paragraph, PaperProvider, - Subheading, customText, - Title, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const Text = customText<'customVariant'>(); const TextExample = () => { - const { isV3 } = useExampleTheme(); - const fontConfig = { customVariant: { fontFamily: Platform.select({ @@ -44,75 +36,61 @@ const TextExample = () => { return ( - {!isV3 && ( - <> - Caption - Paragraph - Subheading - Title - Headline - - )} - - {isV3 && ( - <> - - Display Large - - - Display Medium - - - Display small - + + Display Large + + + Display Medium + + + Display small + - - Headline Large - - - Headline Medium - - - Headline Small - + + Headline Large + + + Headline Medium + + + Headline Small + - - Title Large - - - Title Medium - - - Title Small - + + Title Large + + + Title Medium + + + Title Small + - - Label Large - - - Label Medium - - - Label Small - + + Label Large + + + Label Medium + + + Label Small + - - Body Large - - - Body Medium - - - Body Small - + + Body Large + + + Body Medium + + + Body Small + - - - Custom Variant - - - - )} + + + Custom Variant + + ); diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index 7102abd0b6..caecdc49b8 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -13,7 +13,6 @@ import { configureFonts, HelperText, List, - MD2Colors, MD3Colors, TextInput, } from 'react-native-paper'; @@ -138,11 +137,7 @@ const TextInputExample = () => { const newColors = { ...state.iconsColor, - [name]: !color - ? theme.isV3 - ? theme.colors.primary - : theme.colors?.accent - : undefined, + [name]: !color ? theme.colors.primary : undefined, }; dispatch({ @@ -572,9 +567,7 @@ const TextInputExample = () => { * @@ -604,12 +597,8 @@ const TextInputExample = () => { onChangeText={(flatUnderlineColors) => inputActionHandler('flatUnderlineColors', flatUnderlineColors) } - underlineColor={ - theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400 - } - activeUnderlineColor={ - theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900 - } + underlineColor={MD3Colors.primary70} + activeUnderlineColor={MD3Colors.tertiary50} /> { onChangeText={(outlinedColors) => inputActionHandler('outlinedColors', outlinedColors) } - outlineColor={ - theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400 - } - activeOutlineColor={ - theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900 - } + outlineColor={MD3Colors.primary70} + activeOutlineColor={MD3Colors.tertiary50} /> { placeholder="Custom colors" /> - {fontsLoaded && theme.isV3 ? ( + {fontsLoaded ? ( void; toggleRtl: () => void; - toggleThemeVersion: () => void; toggleCollapsed: () => void; toggleCustomFont: () => void; toggleRippleEffect: () => void; toggleShouldUseDeviceColors?: () => void; - theme: MD2Theme | MD3Theme; + theme: MD3Theme; rtl: boolean; collapsed: boolean; customFontLoaded: boolean; diff --git a/example/src/hooks/useExampleTheme.ts b/example/src/hooks/useExampleTheme.ts index 9196f044b0..416b877b29 100644 --- a/example/src/hooks/useExampleTheme.ts +++ b/example/src/hooks/useExampleTheme.ts @@ -1,3 +1,3 @@ -import { MD2Theme, MD3Theme, useTheme } from 'react-native-paper'; +import { MD3Theme, useTheme } from 'react-native-paper'; -export const useExampleTheme = () => useTheme(); +export const useExampleTheme = () => useTheme(); diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index 34dbe61c9b..39ea78a2d1 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -9,13 +9,7 @@ import { useFonts } from 'expo-font'; import { useKeepAwake } from 'expo-keep-awake'; import { StatusBar } from 'expo-status-bar'; import * as Updates from 'expo-updates'; -import { - PaperProvider, - MD2DarkTheme, - MD2LightTheme, - MD3DarkTheme, - MD3LightTheme, -} from 'react-native-paper'; +import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; @@ -49,7 +43,6 @@ export default function PaperExample() { const [shouldUseDeviceColors, setShouldUseDeviceColors] = React.useState(true); const [isDarkMode, setIsDarkMode] = React.useState(false); - const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3); const [rtl, setRtl] = React.useState( I18nManager.getConstants().isRTL ); @@ -60,10 +53,6 @@ export default function PaperExample() { //TODO: remove usage of @pchmn/expo-material3-theme const { theme: mdTheme } = useMaterial3Theme(); const theme = React.useMemo(() => { - if (themeVersion === 2) { - return isDarkMode ? MD2DarkTheme : MD2LightTheme; - } - if (!deviceColorsSupported || !shouldUseDeviceColors) { return isDarkMode ? MD3DarkTheme : MD3LightTheme; } @@ -74,7 +63,7 @@ export default function PaperExample() { ...MD3LightTheme, colors: { ...MD3LightTheme.colors, ...mdTheme.light }, }; - }, [isDarkMode, mdTheme, shouldUseDeviceColors, themeVersion]); + }, [isDarkMode, mdTheme, shouldUseDeviceColors]); React.useEffect(() => { const restoreState = async () => { @@ -148,12 +137,6 @@ export default function PaperExample() { toggleCollapsed: () => setCollapsed(!collapsed), toggleCustomFont: () => setCustomFont(!customFontLoaded), toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled), - toggleThemeVersion: () => { - setCustomFont(false); - setCollapsed(false); - setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2)); - setRippleEffectEnabled(true); - }, customFontLoaded, rippleEffectEnabled, collapsed, @@ -217,7 +200,7 @@ export default function PaperExample() { ); }} - + diff --git a/example/src/index.tsx b/example/src/index.tsx index 76607763f1..ce4df07253 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -5,13 +5,7 @@ import { createDrawerNavigator } from '@react-navigation/drawer'; import { InitialState, NavigationContainer } from '@react-navigation/native'; import { useFonts } from 'expo-font'; import { useKeepAwake } from 'expo-keep-awake'; -import { - PaperProvider, - MD3DarkTheme, - MD3LightTheme, - MD2DarkTheme, - MD2LightTheme, -} from 'react-native-paper'; +import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; @@ -43,18 +37,13 @@ export default function PaperExample() { >(); const [isDarkMode, setIsDarkMode] = React.useState(false); - const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3); const [collapsed, setCollapsed] = React.useState(false); const [customFontLoaded, setCustomFont] = React.useState(false); const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); const theme = React.useMemo(() => { - if (themeVersion === 2) { - return isDarkMode ? MD2DarkTheme : MD2LightTheme; - } - return isDarkMode ? MD3DarkTheme : MD3LightTheme; - }, [isDarkMode, themeVersion]); + }, [isDarkMode]); React.useEffect(() => { const restoreState = async () => { @@ -112,12 +101,6 @@ export default function PaperExample() { const preferences = React.useMemo( () => ({ toggleTheme: () => setIsDarkMode((oldValue) => !oldValue), - toggleThemeVersion: () => { - setCustomFont(false); - setCollapsed(false); - setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2)); - setRippleEffectEnabled(true); - }, toggleCollapsed: () => setCollapsed(!collapsed), toggleCustomFont: () => setCustomFont(!customFontLoaded), toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled), diff --git a/src/babel/__fixtures__/rewrite-imports/code.js b/src/babel/__fixtures__/rewrite-imports/code.js index cc5e6d0b5c..6509ef2f67 100644 --- a/src/babel/__fixtures__/rewrite-imports/code.js +++ b/src/babel/__fixtures__/rewrite-imports/code.js @@ -5,7 +5,6 @@ import { Button, FAB, Appbar, - MD2Colors, MD3Colors, NonExistent, NonExistentSecond as Stuff, diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js index ecaff8d814..7204b0ca33 100644 --- a/src/babel/__fixtures__/rewrite-imports/output.js +++ b/src/babel/__fixtures__/rewrite-imports/output.js @@ -4,7 +4,6 @@ import BottomNavigation from "react-native-paper/lib/module/components/BottomNav import Button from "react-native-paper/lib/module/components/Button/Button"; import FAB from "react-native-paper/lib/module/components/FAB"; import Appbar from "react-native-paper/lib/module/components/Appbar"; -import * as MD2Colors from "react-native-paper/lib/module/styles/themes/v2/colors"; import { MD3Colors } from "react-native-paper/lib/module/styles/themes/v3/tokens"; import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js"; import { ThemeProvider } from "react-native-paper/lib/module/core/theming"; diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index d59c626769..adbea4e255 100644 --- a/src/components/Appbar/Appbar.tsx +++ b/src/components/Appbar/Appbar.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - Platform, StyleProp, StyleSheet, View, @@ -9,12 +8,9 @@ import { ColorValue, } from 'react-native'; -import color from 'color'; - import AppbarContent from './AppbarContent'; import { AppbarModes, - DEFAULT_APPBAR_HEIGHT, getAppbarBackgroundColor, modeAppbarHeight, renderAppbarContent, @@ -165,11 +161,10 @@ const Appbar = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const flattenedStyle = StyleSheet.flatten(style); const { backgroundColor: customBackground, - elevation = isV3 ? (elevated ? 2 : 0) : 4, + elevation = elevated ? 2 : 0, ...restStyle } = (flattenedStyle || {}) as Exclude & { elevation?: number; @@ -178,34 +173,26 @@ const Appbar = ({ const backgroundColor = getAppbarBackgroundColor( theme, - elevation, customBackground, elevated ); const isMode = (modeToCompare: AppbarModes) => { - return isV3 && mode === modeToCompare; + return mode === modeToCompare; }; let isDark = false; if (typeof dark === 'boolean') { isDark = dark; - } else if (!isV3) { - isDark = - backgroundColor === 'transparent' - ? false - : typeof backgroundColor === 'string' - ? !color(backgroundColor).isLight() - : true; } - const isV3CenterAlignedMode = isV3 && isMode('center-aligned'); + const isCenterAlignedMode = isMode('center-aligned'); let shouldCenterContent = false; let shouldAddLeftSpacing = false; let shouldAddRightSpacing = false; - if ((!isV3 && Platform.OS === 'ios') || isV3CenterAlignedMode) { + if (isCenterAlignedMode) { let hasAppbarContent = false; let leftItemsCount = 0; let rightItemsCount = 0; @@ -225,14 +212,12 @@ const Appbar = ({ }); shouldCenterContent = - hasAppbarContent && - leftItemsCount < 2 && - rightItemsCount < (isV3 ? 3 : 2); + hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 3; shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0; shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0; } - const spacingStyle = isV3 ? styles.v3Spacing : styles.spacing; + const spacingStyle = styles.v3Spacing; const insets = { paddingBottom: safeAreaInsets?.bottom, @@ -247,27 +232,25 @@ const Appbar = ({ { backgroundColor }, styles.appbar, { - height: isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT, + height: modeAppbarHeight[mode], }, insets, restStyle, - !theme.isV3 && { elevation }, ]} elevation={elevation as MD3Elevation} container {...rest} > {shouldAddLeftSpacing ? : null} - {(!isV3 || isMode('small') || isMode('center-aligned')) && ( + {(isMode('small') || isMode('center-aligned')) && ( <> {/* Render only the back action at first place */} {renderAppbarContent({ children, isDark, theme, - isV3, renderOnly: ['Appbar.BackAction'], - shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent, + shouldCenterContent: isCenterAlignedMode || shouldCenterContent, })} {/* Render the rest of the content except the back action */} {renderAppbarContent({ @@ -278,9 +261,8 @@ const Appbar = ({ ], isDark, theme, - isV3, renderExcept: ['Appbar.BackAction'], - shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent, + shouldCenterContent: isCenterAlignedMode || shouldCenterContent, })} )} @@ -297,14 +279,12 @@ const Appbar = ({ {renderAppbarContent({ children, isDark, - isV3, renderOnly: ['Appbar.BackAction'], mode, })} {renderAppbarContent({ children: filterAppbarActions(children, true), isDark, - isV3, renderOnly: ['Appbar.Action'], mode, })} @@ -313,7 +293,6 @@ const Appbar = ({ {renderAppbarContent({ children: filterAppbarActions(children), isDark, - isV3, renderExcept: [ 'Appbar', 'Appbar.BackAction', @@ -327,7 +306,6 @@ const Appbar = ({ {renderAppbarContent({ children, isDark, - isV3, renderOnly: ['Appbar.Content'], mode, })} @@ -344,9 +322,6 @@ const styles = StyleSheet.create({ alignItems: 'center', paddingHorizontal: 4, }, - spacing: { - width: 48, - }, v3Spacing: { width: 52, }, diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx index ab5a72a110..f4d829658f 100644 --- a/src/components/Appbar/AppbarAction.tsx +++ b/src/components/Appbar/AppbarAction.tsx @@ -7,11 +7,9 @@ import type { ViewStyle, } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; -import { black } from '../../styles/themes/v2/colors'; import { forwardRef } from '../../utils/forwardRef'; import type { IconSource } from '../Icon'; import IconButton from '../IconButton/IconButton'; @@ -101,11 +99,9 @@ const AppbarAction = forwardRef( const actionIconColor = iconColor ? iconColor - : theme.isV3 - ? isLeading - ? theme.colors.onSurface - : theme.colors.onSurfaceVariant - : color(black).alpha(0.54).rgb().string(); + : isLeading + ? theme.colors.onSurface + : theme.colors.onSurfaceVariant; return ( & { */ const AppbarContent = ({ color: titleColor, - subtitle, - subtitleStyle, onPress, disabled, style, @@ -117,15 +112,9 @@ const AppbarContent = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, colors } = theme; - - const titleTextColor = titleColor - ? titleColor - : isV3 - ? colors.onSurface - : white; + const { colors } = theme; - const subtitleColor = color(titleTextColor).alpha(0.7).rgb().string(); + const titleTextColor = titleColor ? titleColor : colors.onSurface; const modeContainerStyles = { small: styles.v3DefaultContainer, @@ -138,7 +127,7 @@ const AppbarContent = ({ const contentWrapperProps = { pointerEvents: 'box-none' as ViewProps['pointerEvents'], - style: [styles.container, isV3 && modeContainerStyles[mode], style], + style: [styles.container, modeContainerStyles[mode], style], testID, ...rest, }; @@ -147,18 +136,13 @@ const AppbarContent = ({ <> {typeof title === 'string' ? ( - {subtitle} - - ) : null} ); @@ -233,12 +209,6 @@ const styles = StyleSheet.create({ justifyContent: 'flex-end', paddingBottom: 28, }, - title: { - fontSize: Platform.OS === 'ios' ? 17 : 20, - }, - subtitle: { - fontSize: Platform.OS === 'ios' ? 11 : 14, - }, }); const touchableRole: AccessibilityRole = 'button'; diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx index e0eb6386d7..49431e41b8 100644 --- a/src/components/Appbar/AppbarHeader.tsx +++ b/src/components/Appbar/AppbarHeader.tsx @@ -13,7 +13,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { Appbar } from './Appbar'; import { - DEFAULT_APPBAR_HEIGHT, getAppbarBackgroundColor, modeAppbarHeight, getAppbarBorders, @@ -104,14 +103,13 @@ const AppbarHeader = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const flattenedStyle = StyleSheet.flatten(style); const { - height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT, - elevation = isV3 ? (elevated ? 2 : 0) : 4, + height = modeAppbarHeight[mode], + elevation = elevated ? 2 : 0, backgroundColor: customBackground, - zIndex = isV3 && elevated ? 1 : 0, + zIndex = elevated ? 1 : 0, ...restStyle } = (flattenedStyle || {}) as Exclude & { height?: number; @@ -124,7 +122,6 @@ const AppbarHeader = ({ const backgroundColor = getAppbarBackgroundColor( theme, - elevation, customBackground, elevated ); @@ -150,9 +147,7 @@ const AppbarHeader = ({ testID={testID} style={[{ height, backgroundColor }, styles.appbar, restStyle]} dark={dark} - {...(isV3 && { - mode, - })} + mode={mode} {...rest} theme={theme} /> diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts index a6c68af2a5..86d43c6ae8 100644 --- a/src/components/Appbar/utils.ts +++ b/src/components/Appbar/utils.ts @@ -2,8 +2,7 @@ import React from 'react'; import type { ColorValue, StyleProp, ViewStyle } from 'react-native'; import { StyleSheet, Animated } from 'react-native'; -import overlay from '../../styles/overlay'; -import { black, white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/v3/baseColors'; import type { InternalTheme, ThemeProp } from '../../types'; export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned'; @@ -24,24 +23,14 @@ const borderStyleProperties = [ export const getAppbarBackgroundColor = ( theme: InternalTheme, - elevation: number, customBackground?: ColorValue, elevated?: boolean ) => { - const { isV3, dark: isDarkTheme, mode, colors } = theme; - const isAdaptiveMode = mode === 'adaptive'; + const { colors } = theme; if (customBackground) { return customBackground; } - if (!isV3) { - if (isDarkTheme && isAdaptiveMode) { - return overlay(elevation, colors?.surface); - } - - return colors.primary; - } - if (elevated) { return theme.colors.elevation.level2; } @@ -52,7 +41,6 @@ export const getAppbarBackgroundColor = ( export const getAppbarColor = ({ color, isDark, - isV3, }: BaseProps & { color: string }) => { if (typeof color !== 'undefined') { return color; @@ -62,11 +50,7 @@ export const getAppbarColor = ({ return white; } - if (isV3) { - return undefined; - } - - return black; + return undefined; }; export const getAppbarBorders = ( @@ -89,20 +73,17 @@ export const getAppbarBorders = ( type BaseProps = { isDark: boolean; - isV3: boolean; }; type RenderAppbarContentProps = BaseProps & { children: React.ReactNode; shouldCenterContent?: boolean; - isV3: boolean; renderOnly?: (string | boolean)[]; renderExcept?: string[]; mode?: AppbarModes; theme?: ThemeProp; }; -export const DEFAULT_APPBAR_HEIGHT = 56; const MD3_DEFAULT_APPBAR_HEIGHT = 64; export const modeAppbarHeight = { @@ -133,7 +114,6 @@ export const renderAppbarContent = ({ children, isDark, shouldCenterContent = false, - isV3, renderOnly, renderExcept, mode = 'small', @@ -172,16 +152,14 @@ export const renderAppbarContent = ({ theme?: ThemeProp; } = { theme, - color: getAppbarColor({ color: child.props.color, isDark, isV3 }), + color: getAppbarColor({ color: child.props.color, isDark }), }; // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter if (child.type.displayName === 'Appbar.Content') { props.mode = mode; props.style = [ - isV3 - ? i === 0 && !shouldCenterContent && styles.v3Spacing - : i !== 0 && styles.v2Spacing, + i === 0 && !shouldCenterContent && styles.v3Spacing, shouldCenterContent && styles.centerAlignedContent, child.props.style, ]; @@ -195,9 +173,6 @@ const styles = StyleSheet.create({ centerAlignedContent: { alignItems: 'center', }, - v2Spacing: { - marginLeft: 8, - }, v3Spacing: { marginLeft: 12, }, diff --git a/src/components/Avatar/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon.tsx index f1a0206f1f..9ca14e4a47 100644 --- a/src/components/Avatar/AvatarIcon.tsx +++ b/src/components/Avatar/AvatarIcon.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/v3/baseColors'; import type { ThemeProp } from '../../types'; import getContrastingColor from '../../utils/getContrastingColor'; import Icon, { IconSource } from '../Icon'; diff --git a/src/components/Avatar/AvatarText.tsx b/src/components/Avatar/AvatarText.tsx index f93dd894a4..4d45d2ce4e 100644 --- a/src/components/Avatar/AvatarText.tsx +++ b/src/components/Avatar/AvatarText.tsx @@ -9,7 +9,7 @@ import { } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/v3/baseColors'; import type { ThemeProp } from '../../types'; import getContrastingColor from '../../utils/getContrastingColor'; import Text from '../Typography/Text'; diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 54c70770f2..d8bf38015b 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -8,9 +8,7 @@ import { } from 'react-native'; import { useInternalTheme } from '../core/theming'; -import { black, white } from '../styles/themes/v2/colors'; import type { ThemeProp } from '../types'; -import getContrastingColor from '../utils/getContrastingColor'; const defaultSize = 20; @@ -85,20 +83,14 @@ const Badge = ({ }).start(); }, [visible, opacity, scale]); - const { - backgroundColor = theme.isV3 - ? theme.colors.error - : theme.colors?.notification, - ...restStyle - } = (StyleSheet.flatten(style) || {}) as TextStyle; + const { backgroundColor = theme.colors.error, ...restStyle } = + (StyleSheet.flatten(style) || {}) as TextStyle; - const textColor = theme.isV3 - ? theme.colors.onError - : getContrastingColor(backgroundColor, white, black); + const textColor = theme.colors.onError; const borderRadius = size / 2; - const paddingHorizontal = theme.isV3 ? 3 : 4; + const paddingHorizontal = 3; return ( @@ -222,14 +222,7 @@ const Banner = ({ ) : null} = { * Get badge for the tab, uses `route.badge` by default. */ getBadge?: (props: { route: Route }) => boolean | number | string | undefined; - /** - * Get color for the tab, uses `route.color` by default. - */ - getColor?: (props: { route: Route }) => string | undefined; /** * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component. */ @@ -327,7 +323,6 @@ const BottomNavigation = ({ renderTouchable, getLabelText, getBadge, - getColor, getAccessibilityLabel, getTestID, activeColor, @@ -353,9 +348,8 @@ const BottomNavigation = ({ }: Props) => { const theme = useInternalTheme(themeOverrides); const { scale } = theme.animation; - const compact = compactProp ?? !theme.isV3; - let shifting = - shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3); + const compact = compactProp ?? false; + let shifting = shiftingProp ?? false; if (shifting && navigationState.routes.length < 2) { shifting = false; @@ -404,7 +398,7 @@ const BottomNavigation = ({ ...navigationState.routes.map((_, i) => Animated.timing(tabsPositionAnims[i], { toValue: i === index ? 0 : i >= index ? 1 : -1, - duration: theme.isV3 || shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: sceneAnimationEasing, }) @@ -424,13 +418,11 @@ const BottomNavigation = ({ }); }, [ - shifting, navigationState.routes, offsetsAnims, scale, tabsPositionAnims, sceneAnimationEasing, - theme, ] ); @@ -579,7 +571,6 @@ const BottomNavigation = ({ renderTouchable={renderTouchable} getLabelText={getLabelText} getBadge={getBadge} - getColor={getColor} getAccessibilityLabel={getAccessibilityLabel} getTestID={getTestID} activeColor={activeColor} diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 05264c610a..e97f2c9593 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -11,7 +11,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { @@ -20,8 +19,6 @@ import { getLabelColor, } from './utils'; import { useInternalTheme } from '../../core/theming'; -import overlay from '../../styles/overlay'; -import { black, white } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; import useAnimatedValue from '../../utils/useAnimatedValue'; import useAnimatedValueArray from '../../utils/useAnimatedValueArray'; @@ -149,10 +146,6 @@ export type Props = { * Get badge for the tab, uses `route.badge` by default. */ getBadge?: (props: { route: Route }) => boolean | number | string | undefined; - /** - * Get color for the tab, uses `route.color` by default. - */ - getColor?: (props: { route: Route }) => string | undefined; /** * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component. */ @@ -321,7 +314,6 @@ const BottomNavigationBar = ({ ), getLabelText = ({ route }: { route: Route }) => route.title, getBadge = ({ route }: { route: Route }) => route.badge, - getColor = ({ route }: { route: Route }) => route.color, getAccessibilityLabel = ({ route }: { route: Route }) => route.accessibilityLabel, getTestID = ({ route }: { route: Route }) => route.testID, @@ -344,9 +336,8 @@ const BottomNavigationBar = ({ const theme = useInternalTheme(themeOverrides); const { bottom, left, right } = useSafeAreaInsets(); const { scale } = theme.animation; - const compact = compactProp ?? !theme.isV3; - let shifting = - shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3); + const compact = compactProp ?? false; + let shifting = shiftingProp ?? false; if (shifting && navigationState.routes.length < 2) { shifting = false; @@ -418,13 +409,13 @@ const BottomNavigationBar = ({ Animated.parallel([ Animated.timing(rippleAnim, { toValue: 1, - duration: theme.isV3 || shifting ? 400 * scale : 0, + duration: 400 * scale, useNativeDriver: true, }), ...navigationState.routes.map((_, i) => Animated.timing(tabsAnims[i], { toValue: i === index ? 1 : 0, - duration: theme.isV3 || shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: animationEasing, }) @@ -440,8 +431,6 @@ const BottomNavigationBar = ({ }, [ rippleAnim, - theme.isV3, - shifting, scale, navigationState.routes, tabsAnims, @@ -479,62 +468,28 @@ const BottomNavigationBar = ({ }; const { routes } = navigationState; - const { colors, dark: isDarkTheme, mode, isV3 } = theme; - - const { backgroundColor: customBackground, elevation = 4 } = - (StyleSheet.flatten(style) || {}) as { - elevation?: number; - backgroundColor?: ColorValue; - }; - - const approxBackgroundColor = customBackground - ? customBackground - : isDarkTheme && mode === 'adaptive' - ? overlay(elevation, colors?.surface) - : colors?.primary; - - const v2BackgroundColorInterpolation = shifting - ? indexAnim.interpolate({ - inputRange: routes.map((_, i) => i), - // FIXME: does outputRange support ColorValue or just strings? - // @ts-expect-error - outputRange: routes.map( - (route) => getColor({ route }) || approxBackgroundColor - ), - }) - : approxBackgroundColor; + const { colors } = theme; - const backgroundColor = isV3 - ? customBackground || theme.colors.elevation.level2 - : shifting - ? v2BackgroundColorInterpolation - : approxBackgroundColor; - - const isDark = - typeof approxBackgroundColor === 'string' - ? !color(approxBackgroundColor).isLight() - : true; + const { backgroundColor: customBackground } = (StyleSheet.flatten(style) || + {}) as { + backgroundColor?: ColorValue; + }; - const textColor = isDark ? white : black; + const backgroundColor = customBackground || colors.elevation.level2; const activeTintColor = getActiveTintColor({ activeColor, - defaultColor: textColor, theme, }); const inactiveTintColor = getInactiveTintColor({ inactiveColor, - defaultColor: textColor, theme, }); - const touchColor = color(activeTintColor).alpha(0.12).rgb().string(); const maxTabWidth = routes.length > 3 ? MIN_TAB_WIDTH : MAX_TAB_WIDTH; const maxTabBarWidth = maxTabWidth * routes.length; - const rippleSize = layout.width / 4; - const insets = { left: safeAreaInsets?.left ?? left, right: safeAreaInsets?.right ?? right, @@ -543,10 +498,9 @@ const BottomNavigationBar = ({ return ( ({ accessibilityRole={'tablist'} testID={`${testID}-content-wrapper`} > - {shifting && !isV3 ? ( - - ) : null} {routes.map((route, index) => { const focused = navigationState.index === index; const active = tabsAnims[index]; - // Scale the label up - const scale = - labeled && shifting - ? active.interpolate({ - inputRange: [0, 1], - outputRange: [0.5, 1], - }) - : 1; - // Move down the icon to account for no-label in shifting and smaller label in non-shifting. const translateY = labeled ? shifting @@ -684,7 +592,6 @@ const BottomNavigationBar = ({ tintColor: activeTintColor, hasColor: Boolean(activeColor), focused, - defaultColor: textColor, theme, }); @@ -692,55 +599,53 @@ const BottomNavigationBar = ({ tintColor: inactiveTintColor, hasColor: Boolean(inactiveColor), focused, - defaultColor: textColor, theme, }); const badgeStyle = { - top: !isV3 ? -2 : typeof badge === 'boolean' ? 4 : 2, + top: typeof badge === 'boolean' ? 4 : 2, right: - (badge != null && typeof badge !== 'boolean' + badge != null && typeof badge !== 'boolean' ? String(badge).length * -2 - : 0) - (!isV3 ? 2 : 0), + : 0, }; - const isLegacyOrV3Shifting = !isV3 || (isV3 && shifting && labeled); + const isShiftingOrLabeled = shifting && labeled; - const font = isV3 ? theme.fonts.labelMedium : {}; + const font = theme.fonts.labelMedium; return renderTouchable({ key: route.key, route, borderless: true, centered: true, - rippleColor: isV3 ? 'transparent' : touchColor, + rippleColor: 'transparent', onPress: () => onTabPress(eventForIndex(index)), onLongPress: () => onTabLongPress?.(eventForIndex(index)), testID: getTestID({ route }), accessibilityLabel: getAccessibilityLabel({ route }), accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab', accessibilityState: { selected: focused }, - style: [styles.item, isV3 && styles.v3Item], + style: [styles.item, styles.v3Item], children: ( - {isV3 && focused && ( + {focused && ( ({ ({ ({ ) : ( ({ {typeof badge === 'boolean' ? ( - + ) : ( {badge} @@ -821,17 +726,12 @@ const BottomNavigationBar = ({ {labeled ? ( - + ({ style={[ styles.labelWrapper, { - opacity: isLegacyOrV3Shifting + opacity: isShiftingOrLabeled ? inactiveOpacity : v3InactiveOpacity, }, @@ -895,9 +795,7 @@ const BottomNavigationBar = ({ )} - ) : ( - !isV3 && - )} + ) : null} ), }); @@ -939,9 +837,6 @@ const styles = StyleSheet.create({ v3Item: { paddingVertical: 0, }, - ripple: { - position: 'absolute', - }, iconContainer: { height: 24, width: 24, @@ -1002,7 +897,4 @@ const styles = StyleSheet.create({ borderRadius: OUTLINE_WIDTH / 4, alignSelf: 'center', }, - elevation: { - elevation: 4, - }, }); diff --git a/src/components/BottomNavigation/utils.ts b/src/components/BottomNavigation/utils.ts index 93a4d95091..a3fbbdceeb 100644 --- a/src/components/BottomNavigation/utils.ts +++ b/src/components/BottomNavigation/utils.ts @@ -1,16 +1,11 @@ -import color from 'color'; import type { InternalTheme } from 'src/types'; -import type { black, white } from '../../styles/themes/v2/colors'; - type BaseProps = { - defaultColor: typeof black | typeof white; theme: InternalTheme; }; export const getActiveTintColor = ({ activeColor, - defaultColor, theme, }: BaseProps & { activeColor: string | undefined; @@ -19,16 +14,11 @@ export const getActiveTintColor = ({ return activeColor; } - if (theme.isV3) { - return theme.colors.onSecondaryContainer; - } - - return defaultColor; + return theme.colors.onSecondaryContainer; }; export const getInactiveTintColor = ({ inactiveColor, - defaultColor, theme, }: BaseProps & { inactiveColor: string | undefined; @@ -37,18 +27,13 @@ export const getInactiveTintColor = ({ return inactiveColor; } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - return color(defaultColor).alpha(0.5).rgb().string(); + return theme.colors.onSurfaceVariant; }; export const getLabelColor = ({ tintColor, hasColor, focused, - defaultColor, theme, }: BaseProps & { tintColor: string; @@ -59,12 +44,8 @@ export const getLabelColor = ({ return tintColor; } - if (theme.isV3) { - if (focused) { - return theme.colors.onSurface; - } - return theme.colors.onSurfaceVariant; + if (focused) { + return theme.colors.onSurface; } - - return defaultColor; + return theme.colors.onSurfaceVariant; }; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 2e4d2cf519..9f1aa71e8a 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -218,8 +218,8 @@ const Button = ( }, [mode] ); - const { roundness, isV3, animation } = theme; - const uppercase = uppercaseProp ?? !theme.isV3; + const { roundness, animation } = theme; + const uppercase = uppercaseProp ?? false; const isWeb = Platform.OS === 'web'; const hasPassedTouchHandler = hasTouchHandler({ @@ -229,10 +229,9 @@ const Button = ( onLongPress, }); - const isElevationEntitled = - !disabled && (isV3 ? isMode('elevated') : isMode('contained')); - const initialElevation = isV3 ? 1 : 2; - const activeElevation = isV3 ? 2 : 8; + const isElevationEntitled = !disabled && isMode('elevated'); + const initialElevation = 1; + const activeElevation = 2; const { current: elevation } = React.useRef( new Animated.Value(isElevationEntitled ? initialElevation : 0) @@ -250,7 +249,7 @@ const Button = ( const handlePressIn = (e: GestureResponderEvent) => { onPressIn?.(e); - if (isV3 ? isMode('elevated') : isMode('contained')) { + if (isMode('elevated')) { const { scale } = animation; Animated.timing(elevation, { toValue: activeElevation, @@ -263,7 +262,7 @@ const Button = ( const handlePressOut = (e: GestureResponderEvent) => { onPressOut?.(e); - if (isV3 ? isMode('elevated') : isMode('contained')) { + if (isMode('elevated')) { const { scale } = animation; Animated.timing(elevation, { toValue: initialElevation, @@ -280,8 +279,8 @@ const Button = ( (style) => style.startsWith('border') && style.endsWith('Radius') ); - const borderRadius = (isV3 ? 5 : 1) * roundness; - const iconSize = isV3 ? 18 : 16; + const borderRadius = 5 * roundness; + const iconSize = 18; const { backgroundColor, borderColor, textColor, borderWidth } = getButtonColors({ @@ -311,7 +310,7 @@ const Button = ( const { color: customLabelColor, fontSize: customLabelSize } = StyleSheet.flatten(labelStyle) || {}; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = theme.fonts.labelLarge; const textStyle = { color: textColor, @@ -322,16 +321,14 @@ const Button = ( StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse' ? [ styles.iconReverse, - isV3 && styles[`md3IconReverse${compact ? 'Compact' : ''}`], - isV3 && - isMode('text') && + styles[`md3IconReverse${compact ? 'Compact' : ''}`], + isMode('text') && styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`], ] : [ styles.icon, - isV3 && styles[`md3Icon${compact ? 'Compact' : ''}`], - isV3 && - isMode('text') && + styles[`md3Icon${compact ? 'Compact' : ''}`], + isMode('text') && styles[`md3IconTextMode${compact ? 'Compact' : ''}`], ]; @@ -346,10 +343,9 @@ const Button = ( compact && styles.compact, buttonStyle, style, - !isV3 && !disabled && { elevation }, ] as Animated.WithAnimatedValue> } - {...(isV3 && { elevation: elevation })} + elevation={elevation} container > { - if (theme.isV3) { - if (disabled && isMode('outlined')) { - return theme.colors.surfaceDisabled; - } - - if (isMode('outlined')) { - return theme.colors.outline; - } + if (disabled && isMode('outlined')) { + return theme.colors.surfaceDisabled; } if (isMode('outlined')) { - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + return theme.colors.outline; } return 'transparent'; }; -const getButtonBorderWidth = ({ - isMode, - theme, -}: Omit) => { - if (theme.isV3) { - if (isMode('outlined')) { - return 1; - } - } - +const getButtonBorderWidth = ({ isMode }: Omit) => { if (isMode('outlined')) { - return StyleSheet.hairlineWidth; + return 1; } - return 0; }; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 848be9fa13..abf4a64dcb 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -172,65 +172,24 @@ const Card = ( onPressOut, }); - // Default animated value const { current: elevation } = React.useRef( new Animated.Value(cardElevation) ); - // Dark adaptive animated value, used in case of toggling the theme, - // it prevents animating the background with native drivers inside Surface - const { current: elevationDarkAdaptive } = React.useRef( - new Animated.Value(cardElevation) - ); - const { animation, dark, mode, roundness, isV3 } = theme; - - const prevDarkRef = React.useRef(dark); - React.useEffect(() => { - prevDarkRef.current = dark; - }); + const { animation, roundness } = theme; - const prevDark = prevDarkRef.current; - const isAdaptiveMode = mode === 'adaptive'; const animationDuration = 150 * animation.scale; - React.useEffect(() => { - /** - * Resets animations values if updating to dark adaptive mode, - * otherwise, any card that is in the middle of animation while - * toggling the theme will stay at that animated value until - * the next press-in - */ - if (dark && isAdaptiveMode && !prevDark) { - elevation.setValue(cardElevation); - elevationDarkAdaptive.setValue(cardElevation); - } - }, [ - prevDark, - dark, - isAdaptiveMode, - cardElevation, - elevation, - elevationDarkAdaptive, - ]); - const runElevationAnimation = (pressType: HandlePressType) => { - if (isV3 && isMode('contained')) { + if (isMode('contained')) { return; } const isPressTypeIn = pressType === 'in'; - if (dark && isAdaptiveMode) { - Animated.timing(elevationDarkAdaptive, { - toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation, - duration: animationDuration, - useNativeDriver: false, - }).start(); - } else { - Animated.timing(elevation, { - toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation, - duration: animationDuration, - useNativeDriver: false, - }).start(); - } + Animated.timing(elevation, { + toValue: isPressTypeIn ? 2 : cardElevation, + duration: animationDuration, + useNativeDriver: false, + }).start(); }; const handlePressIn = useLatestCallback((e: GestureResponderEvent) => { @@ -249,8 +208,7 @@ const Card = ( ? (child.type as any).displayName : null ); - const computedElevation = - dark && isAdaptiveMode ? elevationDarkAdaptive : elevation; + const computedElevation = elevation; const { backgroundColor, borderColor: themedBorderColor } = getCardColors({ theme, @@ -267,7 +225,7 @@ const Card = ( ); const borderRadiusCombinedStyles = { - borderRadius: (isV3 ? 3 : 1) * roundness, + borderRadius: 3 * roundness, ...borderRadiusStyles, }; @@ -290,20 +248,12 @@ const Card = ( & { * ``` */ const CardActions = ({ theme, style, children, ...rest }: Props) => { - const { isV3 } = useInternalTheme(theme); + useInternalTheme(theme); - const justifyContent = ( - isV3 ? 'flex-end' : 'flex-start' - ) as ViewStyle['justifyContent']; - const containerStyle = [styles.container, { justifyContent }, style]; + const containerStyle = [ + styles.container, + { justifyContent: 'flex-end' as ViewStyle['justifyContent'] }, + style, + ]; return ( @@ -50,15 +51,12 @@ const CardActions = ({ theme, style, children, ...rest }: Props) => { return child; } - const compact = !isV3 && child.props.compact !== false; const mode = - child.props.mode ?? - (isV3 ? (index === 0 ? 'outlined' : 'contained') : undefined); - const childStyle = [isV3 && styles.button, child.props.style]; + child.props.mode ?? (index === 0 ? 'outlined' : 'contained'); + const childStyle = [styles.button, child.props.style]; return React.cloneElement(child, { ...child.props, - compact, mode, style: childStyle, }); diff --git a/src/components/Card/CardCover.tsx b/src/components/Card/CardCover.tsx index e0147381dc..9f317976b6 100644 --- a/src/components/Card/CardCover.tsx +++ b/src/components/Card/CardCover.tsx @@ -3,7 +3,7 @@ import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { getCardCoverStyle } from './utils'; import { useInternalTheme } from '../../core/theming'; -import { grey200 } from '../../styles/themes/v2/colors'; +import { grey200 } from '../../styles/themes/v3/baseColors'; import type { ThemeProp } from '../../types'; import { splitStyles } from '../../utils/splitStyles'; @@ -76,6 +76,7 @@ const CardCover = ({ }; CardCover.displayName = 'Card.Cover'; + const styles = StyleSheet.create({ container: { height: 195, diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx index b3d78fc259..f24809c405 100644 --- a/src/components/Card/CardTitle.tsx +++ b/src/components/Card/CardTitle.tsx @@ -10,8 +10,6 @@ import { import { useInternalTheme } from '../../core/theming'; import type { MD3TypescaleKey, ThemeProp } from '../../types'; import Text from '../Typography/Text'; -import Caption from '../Typography/v2/Caption'; -import Title from '../Typography/v2/Title'; export type Props = React.ComponentPropsWithRef & { /** @@ -151,9 +149,7 @@ const CardTitle = ({ style, theme: themeOverrides, }: Props) => { - const theme = useInternalTheme(themeOverrides); - const TitleComponent = theme.isV3 ? Text : Title; - const SubtitleComponent = theme.isV3 ? Text : Caption; + useInternalTheme(themeOverrides); const minHeight = subtitle || left || right ? 72 : 50; const marginBottom = subtitle ? 0 : 2; @@ -170,24 +166,24 @@ const CardTitle = ({ {title && ( - {title} - + )} {subtitle && ( - {subtitle} - + )} {right ? right({ size: 24 }) : null} diff --git a/src/components/Card/utils.tsx b/src/components/Card/utils.tsx index c0f10951c5..d4a56a60d8 100644 --- a/src/components/Card/utils.tsx +++ b/src/components/Card/utils.tsx @@ -1,8 +1,5 @@ import type { StyleProp, ViewStyle } from 'react-native'; -import color from 'color'; - -import { black, white } from '../../styles/themes/v2/colors'; import type { InternalTheme } from '../../types'; type CardMode = 'elevated' | 'outlined' | 'contained'; @@ -20,8 +17,6 @@ export type CardActionChildProps = { export const getCardCoverStyle = ({ theme, - index, - total, borderRadiusStyles, }: { theme: InternalTheme; @@ -29,7 +24,7 @@ export const getCardCoverStyle = ({ index?: number; total?: number; }) => { - const { isV3, roundness } = theme; + const { roundness } = theme; if (Object.keys(borderRadiusStyles).length > 0) { return { @@ -38,43 +33,13 @@ export const getCardCoverStyle = ({ }; } - if (isV3) { - return { - borderRadius: 3 * roundness, - }; - } - - if (index === 0) { - if (total === 1) { - return { - borderRadius: roundness, - }; - } - - return { - borderTopLeftRadius: roundness, - borderTopRightRadius: roundness, - }; - } - - if (typeof total === 'number' && index === total - 1) { - return { - borderBottomLeftRadius: roundness, - }; - } - - return undefined; + return { + borderRadius: 3 * roundness, + }; }; const getBorderColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.outline; - } - - if (theme.dark) { - return color(white).alpha(0.12).rgb().string(); - } - return color(black).alpha(0.12).rgb().string(); + return theme.colors.outline; }; const getBackgroundColor = ({ @@ -84,13 +49,11 @@ const getBackgroundColor = ({ theme: InternalTheme; isMode: (mode: CardMode) => boolean; }) => { - if (theme.isV3) { - if (isMode('contained')) { - return theme.colors.surfaceVariant; - } - if (isMode('outlined')) { - return theme.colors.surface; - } + if (isMode('contained')) { + return theme.colors.surfaceVariant; + } + if (isMode('outlined')) { + return theme.colors.surface; } return undefined; }; @@ -107,10 +70,7 @@ export const getCardColors = ({ }; return { - backgroundColor: getBackgroundColor({ - theme, - isMode, - }), + backgroundColor: getBackgroundColor({ theme, isMode }), borderColor: getBorderColor({ theme }), }; }; diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index 92ea124e62..869edd674a 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -166,10 +166,8 @@ const CheckboxItem = ({ checkbox = ; } - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; - const disabledTextColor = theme.isV3 - ? theme.colors.onSurfaceDisabled - : theme.colors.disabled; + const textColor = theme.colors.onSurface; + const disabledTextColor = theme.colors.onSurfaceDisabled; const textAlign = isLeading ? 'right' : 'left'; const computedStyle = { @@ -204,12 +202,7 @@ const CheckboxItem = ({ variant={labelVariant} testID={`${testID}-text`} maxFontSizeMultiplier={labelMaxFontSizeMultiplier} - style={[ - styles.label, - !theme.isV3 && styles.font, - computedStyle, - labelStyle, - ]} + style={[styles.label, computedStyle, labelStyle]} > {label} @@ -238,7 +231,4 @@ const styles = StyleSheet.create({ flexShrink: 1, flexGrow: 1, }, - font: { - fontSize: 16, - }, }); diff --git a/src/components/Checkbox/utils.ts b/src/components/Checkbox/utils.ts index 81677d46b2..4ba3615836 100644 --- a/src/components/Checkbox/utils.ts +++ b/src/components/Checkbox/utils.ts @@ -13,11 +13,7 @@ const getAndroidCheckedColor = ({ return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getAndroidUncheckedColor = ({ @@ -31,15 +27,7 @@ const getAndroidUncheckedColor = ({ return customUncheckedColor; } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - if (theme.dark) { - return color(theme.colors.text).alpha(0.7).rgb().string(); - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSurfaceVariant; }; const getAndroidRippleColor = ({ @@ -52,10 +40,7 @@ const getAndroidRippleColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - return color(theme.colors.text).alpha(0.16).rgb().string(); + return color(theme.colors.onSurface).alpha(0.16).rgb().string(); } return color(checkedColor).fade(0.32).rgb().string(); @@ -75,10 +60,7 @@ const getAndroidControlColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } if (checked) { @@ -127,21 +109,14 @@ const getIOSCheckedColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } if (customColor) { return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getIOSRippleColor = ({ @@ -154,10 +129,7 @@ const getIOSRippleColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - return color(theme.colors.text).alpha(0.16).rgb().string(); + return color(theme.colors.onSurface).alpha(0.16).rgb().string(); } return color(checkedColor).fade(0.32).rgb().string(); }; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 0e48e5c145..7ac71ee809 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -18,7 +18,7 @@ import useLatestCallback from 'use-latest-callback'; import { ChipAvatarProps, getChipColors } from './helpers'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/v3/baseColors'; import type { $Omit, EllipsizeProp, ThemeProp } from '../../types'; import hasTouchHandler from '../../utils/hasTouchHandler'; import type { IconSource } from '../Icon'; @@ -212,11 +212,11 @@ const Chip = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, roundness } = theme; + const { roundness } = theme; const isWeb = Platform.OS === 'web'; const { current: elevation } = React.useRef( - new Animated.Value(isV3 && elevated ? 1 : 0) + new Animated.Value(elevated ? 1 : 0) ); const hasPassedTouchHandler = hasTouchHandler({ @@ -232,7 +232,7 @@ const Chip = ({ const { scale } = theme.animation; onPressIn?.(e); Animated.timing(elevation, { - toValue: isV3 ? (elevated ? 2 : 0) : 4, + toValue: elevated ? 2 : 0, duration: 200 * scale, useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72, @@ -243,16 +243,16 @@ const Chip = ({ const { scale } = theme.animation; onPressOut?.(e); Animated.timing(elevation, { - toValue: isV3 && elevated ? 1 : 0, + toValue: elevated ? 1 : 0, duration: 150 * scale, useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72, }).start(); }); - const opacity = isV3 ? 0.38 : 0.26; - const defaultBorderRadius = roundness * (isV3 ? 2 : 4); - const iconSize = isV3 ? 18 : 16; + const opacity = 0.38; + const defaultBorderRadius = roundness * 2; + const iconSize = 18; const { backgroundColor: customBackgroundColor, @@ -281,8 +281,8 @@ const Chip = ({ disabled, }; - const elevationStyle = isV3 || Platform.OS === 'android' ? elevation : 0; - const multiplier = isV3 ? (compact ? 1.5 : 2) : 1; + const elevationStyle = Platform.OS === 'android' ? elevation : elevation; + const multiplier = compact ? 1.5 : 2; const labelSpacings = { marginRight: onClose ? 0 : 8 * multiplier, marginLeft: @@ -291,20 +291,17 @@ const Chip = ({ : 8 * multiplier, }; const contentSpacings = { - paddingRight: isV3 ? (onClose ? 34 : 0) : onClose ? 32 : 4, + paddingRight: onClose ? 34 : 0, }; const labelTextStyle = { color: textColor, - ...(isV3 ? theme.fonts.labelLarge : theme.fonts.regular), + ...theme.fonts.labelLarge, }; return ( - + {avatar && !icon ? ( @@ -358,12 +353,12 @@ const Chip = ({ - + {closeIcon ? ( ) : ( { const isSelectedColor = selectedColor !== undefined; - if (theme.isV3) { - if (!isOutlined) { - // If the Chip mode is "flat", set border color to transparent - return 'transparent'; - } - - if (disabled) { - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); - } - - if (isSelectedColor) { - return color(selectedColor).alpha(0.29).rgb().string(); - } - - return theme.colors.outline; + if (!isOutlined) { + // If the Chip mode is "flat", set border color to transparent + return 'transparent'; } - if (isOutlined) { - if (isSelectedColor) { - return color(selectedColor).alpha(0.29).rgb().string(); - } - - if (theme.dark) { - return color(white).alpha(0.29).rgb().string(); - } + if (disabled) { + return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); + } - return color(black).alpha(0.29).rgb().string(); + if (isSelectedColor) { + return color(selectedColor).alpha(0.29).rgb().string(); } - return backgroundColor; + return theme.colors.outline; }; const getTextColor = ({ @@ -65,54 +47,31 @@ const getTextColor = ({ selectedColor?: string; }) => { const isSelectedColor = selectedColor !== undefined; - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (isSelectedColor) { - return selectedColor; - } - - if (isOutlined) { - return theme.colors.onSurfaceVariant; - } - - return theme.colors.onSecondaryContainer; - } if (disabled) { - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } if (isSelectedColor) { - return color(selectedColor).alpha(0.87).rgb().string(); + return selectedColor; + } + + if (isOutlined) { + return theme.colors.onSurfaceVariant; } - return color(theme.colors.text).alpha(0.87).rgb().string(); + return theme.colors.onSecondaryContainer; }; const getDefaultBackgroundColor = ({ theme, isOutlined, }: Omit) => { - if (theme.isV3) { - if (isOutlined) { - return theme.colors.surface; - } - - return theme.colors.secondaryContainer; - } - if (isOutlined) { - return theme.colors?.surface; - } - - if (theme.dark) { - return '#383838'; + return theme.colors.surface; } - return '#ebebeb'; + return theme.colors.secondaryContainer; }; const getBackgroundColor = ({ @@ -127,13 +86,11 @@ const getBackgroundColor = ({ return customBackgroundColor; } - if (theme.isV3) { - if (disabled) { - if (isOutlined) { - return 'transparent'; - } - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); + if (disabled) { + if (isOutlined) { + return 'transparent'; } + return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); } return getDefaultBackgroundColor({ theme, isOutlined }); @@ -156,45 +113,30 @@ const getSelectedBackgroundColor = ({ customBackgroundColor, }); - if (theme.isV3) { - if (isOutlined) { - if (showSelectedOverlay) { - return color(backgroundColor) - .mix(color(theme.colors.onSurfaceVariant), 0.12) - .rgb() - .string(); - } - return color(backgroundColor) - .mix(color(theme.colors.onSurfaceVariant), 0) - .rgb() - .string(); - } - + if (isOutlined) { if (showSelectedOverlay) { return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0.12) + .mix(color(theme.colors.onSurfaceVariant), 0.12) .rgb() .string(); } - return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0) + .mix(color(theme.colors.onSurfaceVariant), 0) .rgb() .string(); } - if (theme.dark) { - if (isOutlined) { - return color(backgroundColor).lighten(0.2).rgb().string(); - } - return color(backgroundColor).lighten(0.4).rgb().string(); - } - - if (isOutlined) { - return color(backgroundColor).darken(0.08).rgb().string(); + if (showSelectedOverlay) { + return color(backgroundColor) + .mix(color(theme.colors.onSecondaryContainer), 0.12) + .rgb() + .string(); } - return color(backgroundColor).darken(0.2).rgb().string(); + return color(backgroundColor) + .mix(color(theme.colors.onSecondaryContainer), 0) + .rgb() + .string(); }; const getIconColor = ({ @@ -206,31 +148,20 @@ const getIconColor = ({ selectedColor?: string; }) => { const isSelectedColor = selectedColor !== undefined; - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (isSelectedColor) { - return selectedColor; - } - - if (isOutlined) { - return theme.colors.onSurfaceVariant; - } - - return theme.colors.onSecondaryContainer; - } if (disabled) { - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } if (isSelectedColor) { - return color(selectedColor).alpha(0.54).rgb().string(); + return selectedColor; + } + + if (isOutlined) { + return theme.colors.onSurfaceVariant; } - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSecondaryContainer; }; const getRippleColor = ({ @@ -238,7 +169,6 @@ const getRippleColor = ({ isOutlined, disabled, selectedColor, - selectedBackgroundColor, customRippleColor, }: BaseProps & { selectedBackgroundColor: string; @@ -257,19 +187,11 @@ const getRippleColor = ({ isOutlined, }); - if (theme.isV3) { - if (isSelectedColor) { - return color(selectedColor).alpha(0.12).rgb().string(); - } - - return color(textColor).alpha(0.12).rgb().string(); - } - if (isSelectedColor) { - return color(selectedColor).fade(0.5).rgb().string(); + return color(selectedColor).alpha(0.12).rgb().string(); } - return selectedBackgroundColor; + return color(textColor).alpha(0.12).rgb().string(); }; export const getChipColors = ({ diff --git a/src/components/DataTable/DataTableHeader.tsx b/src/components/DataTable/DataTableHeader.tsx index a4619ebb99..1fee2a02ab 100644 --- a/src/components/DataTable/DataTableHeader.tsx +++ b/src/components/DataTable/DataTableHeader.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; export type Props = React.ComponentPropsWithRef & { @@ -52,12 +49,7 @@ const DataTableHeader = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const borderBottomColor = theme.isV3 - ? theme.colors.surfaceVariant - : color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); + const borderBottomColor = theme.colors.surfaceVariant; return ( diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx index dd72dbe54f..c7a5375f82 100644 --- a/src/components/DataTable/DataTablePagination.tsx +++ b/src/components/DataTable/DataTablePagination.tsx @@ -108,7 +108,7 @@ const PaginationControls = ({ }: PaginationControlsProps) => { const theme = useInternalTheme(themeOverrides); - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; + const textColor = theme.colors.onSurface; return ( <> @@ -310,12 +310,7 @@ const DataTablePagination = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const labelColor = color( - theme.isV3 ? theme.colors.onSurface : theme?.colors.text - ) - .alpha(0.6) - .rgb() - .string(); + const labelColor = color(theme.colors.onSurface).alpha(0.6).rgb().string(); return ( { const theme = useInternalTheme(themeOverrides); - const borderBottomColor = theme.isV3 - ? theme.colors.surfaceVariant - : color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); + const borderBottomColor = theme.colors.surfaceVariant; return ( { const { right, left } = useSafeAreaInsets(); const theme = useInternalTheme(themeOverrides); - const { isV3, dark, mode, colors, roundness } = theme; - const borderRadius = (isV3 ? 7 : 1) * roundness; - - const backgroundColorV2 = - dark && mode === 'adaptive' - ? overlay(DIALOG_ELEVATION, colors?.surface) - : colors?.surface; - const backgroundColor = isV3 - ? theme.colors.elevation.level3 - : backgroundColorV2; + const { roundness } = theme; + const borderRadius = 7 * roundness; + const backgroundColor = theme.colors.elevation.level3; return ( child != null && typeof child !== 'boolean') .map((child, i) => { - if (isV3) { - if (i === 0 && React.isValidElement(child)) { - return React.cloneElement(child, { - style: [{ marginTop: 24 }, child.props.style], - }); - } - } - - if ( - i === 0 && - React.isValidElement(child) && - child.type === DialogContent - ) { - // Dialog content is the first item, so we add a top padding + if (i === 0 && React.isValidElement(child)) { return React.cloneElement(child, { - style: [{ paddingTop: 24 }, child.props.style], + style: [{ marginTop: 24 }, child.props.style], }); } diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index cabebd2fe2..7b34739da5 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -47,21 +47,18 @@ export type Props = React.ComponentPropsWithRef & { * ``` */ const DialogActions = (props: Props) => { - const { isV3 } = useInternalTheme(props.theme); + useInternalTheme(props.theme); const actionsLength = React.Children.toArray(props.children).length; return ( - + {React.Children.map(props.children, (child, i) => React.isValidElement(child) ? React.cloneElement(child, { compact: true, - uppercase: !isV3, + uppercase: false, style: [ - isV3 && { + { marginRight: i + 1 === actionsLength ? 0 : 8, }, child.props.style, @@ -76,12 +73,6 @@ const DialogActions = (props: Props) => { DialogActions.displayName = 'Dialog.Actions'; const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'flex-end', - padding: 8, - }, v3Container: { flexDirection: 'row', flexGrow: 1, diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index ad5841b93a..172e9b4109 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -70,10 +70,6 @@ const DialogIcon = ({ }: Props) => { const theme = useInternalTheme(themeOverrides); - if (!theme.isV3) { - return null; - } - //@ts-ignore const iconColor = color || theme.colors.secondary; diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index 66fdcef6a0..b172106c94 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -51,21 +51,14 @@ export type Props = React.ComponentPropsWithRef & { const DialogScrollArea = (props: Props) => { const theme = useInternalTheme(props.theme); const borderStyles = { - borderColor: theme.isV3 - ? theme.colors.surfaceVariant - : 'rgba(0, 0, 0, .12)', - borderTopWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth, - borderBottomWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth, + borderColor: theme.colors.surfaceVariant, + borderTopWidth: 1, + borderBottomWidth: 1, }; return ( {props.children} diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx index 9953fc506c..03e0d4288e 100644 --- a/src/components/Dialog/DialogTitle.tsx +++ b/src/components/Dialog/DialogTitle.tsx @@ -4,9 +4,8 @@ import { StyleProp, StyleSheet, TextStyle } from 'react-native'; import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; import Text from '../Typography/Text'; -import Title from '../Typography/v2/Title'; -export type Props = React.ComponentPropsWithRef & { +export type Props = React.ComponentPropsWithRef & { /** * Title text for the `DialogTitle`. */ @@ -53,24 +52,22 @@ const DialogTitle = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, colors, fonts } = theme; - - const TextComponent = isV3 ? Text : Title; + const { colors, fonts } = theme; const headerTextStyle = { - color: isV3 ? colors.onSurface : colors?.text, - ...(isV3 ? fonts.headlineSmall : {}), + color: colors.onSurface, + ...fonts.headlineSmall, }; return ( - {children} - + ); }; diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index be30d94c7c..31c4c2991a 100644 --- a/src/components/Divider.tsx +++ b/src/components/Divider.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../core/theming'; -import { black, white } from '../styles/themes/v2/colors'; import type { $RemoveChildren, ThemeProp } from '../types'; export type Props = $RemoveChildren & { @@ -60,23 +57,18 @@ const Divider = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { dark: isDarkTheme, isV3 } = theme; - - const dividerColor = isV3 - ? theme.colors.outlineVariant - : color(isDarkTheme ? white : black) - .alpha(0.12) - .rgb() - .string(); return ( @@ -85,9 +77,6 @@ const Divider = ({ const styles = StyleSheet.create({ leftInset: { - marginLeft: 72, - }, - v3LeftInset: { marginLeft: 16, }, horizontalInset: { diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx index 9fb461e9c5..c10c7ac0b6 100644 --- a/src/components/Drawer/DrawerCollapsedItem.tsx +++ b/src/components/Drawer/DrawerCollapsedItem.tsx @@ -111,7 +111,6 @@ const DrawerCollapsedItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const { scale } = theme.animation; const [numOfLines, setNumOfLines] = React.useState(1); @@ -126,10 +125,6 @@ const DrawerCollapsedItem = ({ } }, [animScale, active]); - if (!isV3) { - return null; - } - const handlePressOut = () => { Animated.timing(animScale, { toValue: 1, @@ -163,7 +158,7 @@ const DrawerCollapsedItem = ({ const labelTextStyle = { color: labelColor, - ...(isV3 ? theme.fonts.labelMedium : {}), + ...theme.fonts.labelMedium, }; const icon = diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx index 604df1b83b..d80c6d922e 100644 --- a/src/components/Drawer/DrawerItem.tsx +++ b/src/components/Drawer/DrawerItem.tsx @@ -108,27 +108,17 @@ const DrawerItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { roundness, isV3 } = theme; + const { roundness } = theme; - const backgroundColor = active - ? isV3 - ? theme.colors.secondaryContainer - : color(theme.colors.primary).alpha(0.12).rgb().string() - : undefined; + const backgroundColor = active ? theme.colors.secondaryContainer : undefined; const contentColor = active - ? isV3 - ? theme.colors.onSecondaryContainer - : theme.colors.primary - : isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.68).rgb().string(); + ? theme.colors.onSecondaryContainer + : theme.colors.onSurfaceVariant; - const labelMargin = icon ? (isV3 ? 12 : 32) : 0; - const borderRadius = (isV3 ? 7 : 1) * roundness; - const rippleColor = isV3 - ? color(contentColor).alpha(0.12).rgb().string() - : undefined; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const labelMargin = icon ? 12 : 0; + const borderRadius = 7 * roundness; + const rippleColor = color(contentColor).alpha(0.12).rgb().string(); + const font = theme.fonts.labelLarge; return ( @@ -140,7 +130,7 @@ const DrawerItem = ({ style={[ styles.container, { backgroundColor, borderRadius }, - isV3 && styles.v3Container, + styles.v3Container, style, ]} accessibilityRole="button" @@ -150,7 +140,7 @@ const DrawerItem = ({ theme={theme} hitSlop={hitSlop} > - + {icon ? ( diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx index ed79c5e054..a701d38ad6 100644 --- a/src/components/Drawer/DrawerSection.tsx +++ b/src/components/Drawer/DrawerSection.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; import { MD3Colors } from '../../styles/themes/v3/tokens'; import type { ThemeProp } from '../../types'; @@ -73,17 +71,14 @@ const DrawerSection = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; - const titleColor = isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); - const titleMargin = isV3 ? 28 : 16; - const font = isV3 ? theme.fonts.titleSmall : theme.fonts.medium; + const titleColor = theme.colors.onSurfaceVariant; + const titleMargin = 28; + const font = theme.fonts.titleSmall; return ( {title && ( - + {title && ( )} diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index ecfe7e1c60..60d583478a 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -129,7 +129,6 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { }; const SIZE = 56; -const SCALE = 0.9; /** * An animated, extending horizontally floating action button represents the primary action in an application. @@ -233,7 +232,7 @@ const AnimatedFAB = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const uppercase: boolean = uppercaseProp ?? !theme.isV3; + const uppercase: boolean = uppercaseProp ?? false; const isIOS = Platform.OS === 'ios'; const isWeb = Platform.OS === 'web'; const isAnimatedFromRight = animateFrom === 'right'; @@ -246,7 +245,7 @@ const AnimatedFAB = ({ const { current: animFAB } = React.useRef( new Animated.Value(0) ); - const { isV3, animation } = theme; + const { animation } = theme; const { scale } = animation; const labelSize = isWeb ? getLabelSizeWeb(labelRef) : null; @@ -257,7 +256,7 @@ const AnimatedFAB = ({ labelSize?.height ?? 0 ); - const borderRadius = SIZE / (isV3 ? 3.5 : 2); + const borderRadius = SIZE / 3.5; React.useEffect(() => { if (!isWeb) { @@ -364,20 +363,18 @@ const AnimatedFAB = ({ animFAB, }); - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = theme.fonts.labelLarge; const textStyle = { color: foregroundColor, ...font, }; - const md2Elevation = disabled || !isIOS ? 0 : 6; const md3Elevation = disabled || !isIOS ? 0 : 3; - const shadowStyle = isV3 ? styles.v3Shadow : styles.shadow; const baseStyle = [ StyleSheet.absoluteFill, - disabled ? styles.disabled : shadowStyle, + disabled ? styles.disabled : styles.v3Shadow, ]; const newAccessibilityState = { ...accessibilityState, disabled }; @@ -396,32 +393,14 @@ const AnimatedFAB = ({ ], borderRadius, }, - !isV3 && { - elevation: md2Elevation, - }, styles.container, restStyle, ]} - {...(isV3 && { elevation: md3Elevation })} + elevation={md3Elevation} theme={theme} container > - + ( ref ) => { const theme = useInternalTheme(themeOverrides); - const uppercase = uppercaseProp ?? !theme.isV3; + const uppercase = uppercaseProp ?? false; const { current: visibility } = React.useRef( new Animated.Value(visible ? 1 : 0) ); - const { isV3, animation } = theme; + const { animation } = theme; const { scale } = animation; React.useEffect(() => { @@ -255,7 +255,7 @@ const FAB = forwardRef( const isFlatMode = mode === 'flat'; const iconSize = isLargeSize ? 36 : 24; const loadingIndicatorSize = isLargeSize ? 24 : 18; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = theme.fonts.labelLarge; const extendedStyle = getExtendedFabStyle({ customSize, theme }); const textStyle = { @@ -282,13 +282,11 @@ const FAB = forwardRef( }, ], }, - !isV3 && styles.elevated, - !isV3 && disabled && styles.disabled, style, ]} pointerEvents={visible ? 'auto' : 'none'} testID={`${testID}-container`} - {...(isV3 && { elevation: md3Elevation })} + elevation={md3Elevation} container > (null); const { scale } = theme.animation; - const { isV3 } = theme; React.useEffect(() => { if (open) { @@ -262,7 +261,7 @@ const FABGroup = ({ useNativeDriver: true, }), Animated.stagger( - isV3 ? 15 : 50 * scale, + 15, animations.current .map((animation) => Animated.timing(animation, { @@ -294,7 +293,7 @@ const FABGroup = ({ } }); } - }, [open, actions, backdrop, scale, isV3]); + }, [open, actions, backdrop, scale]); const close = () => onStateChange({ open: false }); const toggle = () => onStateChange({ open: !open }); @@ -326,14 +325,6 @@ const FABGroup = ({ : backdrop; const opacities = animations.current; - const scales = opacities.map((opacity) => - open - ? opacity.interpolate({ - inputRange: [0, 1], - outputRange: [0.5, 1], - }) - : 1 - ); const translations = opacities.map((opacity) => open @@ -395,7 +386,7 @@ const FABGroup = ({ {actions.map((it, i) => { const labelTextStyle = { color: it.labelTextColor ?? labelColor, - ...(isV3 ? theme.fonts.titleMedium : {}), + ...theme.fonts.titleMedium, }; const marginHorizontal = typeof it.size === 'undefined' || it.size === 'small' ? 24 : 16; @@ -430,7 +421,7 @@ const FABGroup = ({ {it.label && ( @@ -467,11 +454,10 @@ const FABGroup = ({ color={it.color} style={[ { - transform: [{ scale: scales[i] }], + transform: [{ translateY: translations[i] }], opacity: opacities[i], backgroundColor: stackedFABBackgroundColor, }, - isV3 && { transform: [{ translateY: translations[i] }] }, it.style, ]} accessibilityElementsHidden={true} diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts index e87d24019f..32d7596734 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -9,9 +9,7 @@ import { import color from 'color'; -import { black, white } from '../../styles/themes/v2/colors'; import type { InternalTheme } from '../../types'; -import getContrastingColor from '../../utils/getContrastingColor'; type GetCombinedStylesProps = { isAnimatedFromRight: boolean; @@ -174,88 +172,60 @@ const getBackgroundColor = ({ return customBackgroundColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - if (isVariant('primary')) { - return theme.colors.primaryContainer; - } + if (disabled) { + return theme.colors.surfaceDisabled; + } - if (isVariant('secondary')) { - return theme.colors.secondaryContainer; - } + if (isVariant('primary')) { + return theme.colors.primaryContainer; + } - if (isVariant('tertiary')) { - return theme.colors.tertiaryContainer; - } + if (isVariant('secondary')) { + return theme.colors.secondaryContainer; + } - if (isVariant('surface')) { - return theme.colors.elevation.level3; - } + if (isVariant('tertiary')) { + return theme.colors.tertiaryContainer; } - if (disabled) { - if (theme.dark) { - return color(white).alpha(0.12).rgb().string(); - } - return color(black).alpha(0.12).rgb().string(); + if (isVariant('surface')) { + return theme.colors.elevation.level3; } - //@ts-ignore - return theme.colors?.accent; + return theme.colors.primaryContainer; }; const getForegroundColor = ({ theme, isVariant, disabled, - backgroundColor, customColor, -}: BaseProps & { backgroundColor: string; customColor?: string }) => { +}: BaseProps & { customColor?: string }) => { if (typeof customColor !== 'undefined' && !disabled) { return customColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (isVariant('primary')) { - return theme.colors.onPrimaryContainer; - } - - if (isVariant('secondary')) { - return theme.colors.onSecondaryContainer; - } + if (disabled) { + return theme.colors.onSurfaceDisabled; + } - if (isVariant('tertiary')) { - return theme.colors.onTertiaryContainer; - } + if (isVariant('primary')) { + return theme.colors.onPrimaryContainer; + } - if (isVariant('surface')) { - return theme.colors.primary; - } + if (isVariant('secondary')) { + return theme.colors.onSecondaryContainer; } - if (disabled) { - if (theme.dark) { - return color(white).alpha(0.32).rgb().string(); - } - return color(black).alpha(0.32).rgb().string(); + if (isVariant('tertiary')) { + return theme.colors.onTertiaryContainer; } - if (backgroundColor) { - return getContrastingColor( - backgroundColor || white, - white, - 'rgba(0, 0, 0, .54)' - ); + if (isVariant('surface')) { + return theme.colors.primary; } - return getContrastingColor(white, white, 'rgba(0, 0, 0, .54)'); + return theme.colors.onPrimaryContainer; }; export const getFABColors = ({ @@ -287,7 +257,6 @@ export const getFABColors = ({ const foregroundColor = getForegroundColor({ ...baseFABColorProps, customColor, - backgroundColor, }); return { @@ -299,15 +268,7 @@ export const getFABColors = ({ }; const getLabelColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.onSurface; - } - - if (theme.dark) { - return theme.colors.text; - } - - return color(theme.colors.text).fade(0.54).rgb().string(); + return theme.colors.onSurface; }; const getBackdropColor = ({ @@ -320,17 +281,11 @@ const getBackdropColor = ({ if (customBackdropColor) { return customBackdropColor; } - if (theme.isV3) { - return color(theme.colors.background).alpha(0.95).rgb().string(); - } - return theme.colors?.backdrop; + return color(theme.colors.background).alpha(0.95).rgb().string(); }; const getStackedFABBackgroundColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.elevation.level3; - } - return theme.colors.surface; + return theme.colors.elevation.level3; }; export const getFABGroupColors = ({ @@ -347,16 +302,6 @@ export const getFABGroupColors = ({ }; }; -const standardSize = { - height: 56, - width: 56, - borderRadius: 28, -}; -const smallSize = { - height: 40, - width: 40, - borderRadius: 28, -}; const v3SmallSize = { height: 40, width: 40, @@ -385,30 +330,18 @@ export const getFabStyle = ({ size: 'small' | 'medium' | 'large'; theme: InternalTheme; }) => { - const { isV3, roundness } = theme; + const { roundness } = theme; if (customSize) return getCustomFabSize(customSize, roundness); - if (isV3) { - switch (size) { - case 'small': - return { ...v3SmallSize, borderRadius: 3 * roundness }; - case 'medium': - return { ...v3MediumSize, borderRadius: 4 * roundness }; - case 'large': - return { ...v3LargeSize, borderRadius: 7 * roundness }; - } - } - - if (size === 'small') { - return smallSize; + switch (size) { + case 'small': + return { ...v3SmallSize, borderRadius: 3 * roundness }; + case 'medium': + return { ...v3MediumSize, borderRadius: 4 * roundness }; + case 'large': + return { ...v3LargeSize, borderRadius: 7 * roundness }; } - return standardSize; -}; - -const extended = { - height: 48, - paddingHorizontal: 16, }; const v3Extended = { @@ -424,16 +357,13 @@ const getExtendedFabDimensions = (customSize: number) => ({ export const getExtendedFabStyle = ({ customSize, - theme, }: { customSize?: number; theme: InternalTheme; }) => { if (customSize) return getExtendedFabDimensions(customSize); - const { isV3 } = theme; - - return isV3 ? v3Extended : extended; + return v3Extended; }; let cachedContext: CanvasRenderingContext2D | null = null; diff --git a/src/components/HelperText/utils.ts b/src/components/HelperText/utils.ts index 4134175416..493ed52eb6 100644 --- a/src/components/HelperText/utils.ts +++ b/src/components/HelperText/utils.ts @@ -1,5 +1,3 @@ -import color from 'color'; - import type { InternalTheme } from '../../types'; type BaseProps = { @@ -9,22 +7,13 @@ type BaseProps = { }; export function getTextColor({ theme, disabled, type }: BaseProps) { - const { colors, dark } = theme; - if (type === 'error') { - return colors?.error; + return theme.colors.error; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } else { - return theme.colors.onSurfaceVariant; - } + if (disabled) { + return theme.colors.onSurfaceDisabled; } - return color(theme?.colors?.text) - .alpha(dark ? 0.7 : 0.54) - .rgb() - .string(); + return theme.colors.onSurfaceVariant; } diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index b3d26c699d..b886e06fe2 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -122,8 +122,7 @@ const Icon = ({ typeof source === 'object' && source.direction && source.source ? source.source : source; - const iconColor = - color || (theme.isV3 ? theme.colors.onSurface : theme.colors.text); + const iconColor = color || theme.colors.onSurface; if (isImageSource(s)) { return ( diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 47a87901ca..2da6e12fcf 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -138,7 +138,6 @@ const IconButton = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const IconComponent = animated ? CrossFadeIcon : Icon; @@ -153,10 +152,10 @@ const IconButton = forwardRef( customRippleColor, }); - const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5; + const buttonSize = size + 2 * PADDING; const { - borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0, + borderWidth = mode === 'outlined' && !selected ? 1 : 0, borderRadius = buttonSize / 2, } = (StyleSheet.flatten(style) || {}) as ViewStyle; @@ -178,11 +177,10 @@ const IconButton = forwardRef( }, styles.container, borderStyles, - !isV3 && disabled && styles.disabled, style, ]} container - {...(isV3 && { elevation: 0 })} + elevation={0} > { - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - return theme.colors.outline; + if (disabled) { + return theme.colors.surfaceDisabled; } - return undefined; + return theme.colors.outline; }; const getBackgroundColor = ({ @@ -38,40 +34,34 @@ const getBackgroundColor = ({ selected, customContainerColor, }: BaseProps & { customContainerColor?: string }) => { - if (theme.isV3) { - if (disabled) { - if (isMode('contained') || isMode('contained-tonal')) { - return theme.colors.surfaceDisabled; - } - } - - if (typeof customContainerColor !== 'undefined') { - return customContainerColor; + if (disabled) { + if (isMode('contained') || isMode('contained-tonal')) { + return theme.colors.surfaceDisabled; } + } - if (isMode('contained')) { - if (selected) { - return theme.colors.primary; - } - return theme.colors.surfaceVariant; - } + if (typeof customContainerColor !== 'undefined') { + return customContainerColor; + } - if (isMode('contained-tonal')) { - if (selected) { - return theme.colors.secondaryContainer; - } - return theme.colors.surfaceVariant; + if (isMode('contained')) { + if (selected) { + return theme.colors.primary; } + return theme.colors.surfaceVariant; + } - if (isMode('outlined')) { - if (selected) { - return theme.colors.inverseSurface; - } + if (isMode('contained-tonal')) { + if (selected) { + return theme.colors.secondaryContainer; } + return theme.colors.surfaceVariant; } - if (typeof customContainerColor !== 'undefined') { - return customContainerColor; + if (isMode('outlined')) { + if (selected) { + return theme.colors.inverseSurface; + } } return undefined; @@ -84,51 +74,42 @@ const getIconColor = ({ selected, customIconColor, }: BaseProps & { customIconColor?: string }) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (typeof customIconColor !== 'undefined') { - return customIconColor; - } + if (disabled) { + return theme.colors.onSurfaceDisabled; + } - if (isMode('contained')) { - if (selected) { - return theme.colors.onPrimary; - } - return theme.colors.primary; - } + if (typeof customIconColor !== 'undefined') { + return customIconColor; + } - if (isMode('contained-tonal')) { - if (selected) { - return theme.colors.onSecondaryContainer; - } - return theme.colors.onSurfaceVariant; + if (isMode('contained')) { + if (selected) { + return theme.colors.onPrimary; } + return theme.colors.primary; + } - if (isMode('outlined')) { - if (selected) { - return theme.colors.inverseOnSurface; - } - return theme.colors.onSurfaceVariant; + if (isMode('contained-tonal')) { + if (selected) { + return theme.colors.onSecondaryContainer; } + return theme.colors.onSurfaceVariant; + } + if (isMode('outlined')) { if (selected) { - return theme.colors.primary; + return theme.colors.inverseOnSurface; } return theme.colors.onSurfaceVariant; } - if (typeof customIconColor !== 'undefined') { - return customIconColor; + if (selected) { + return theme.colors.primary; } - - return theme.colors.text; + return theme.colors.onSurfaceVariant; }; const getRippleColor = ({ - theme, iconColor, customRippleColor, }: { @@ -139,10 +120,7 @@ const getRippleColor = ({ if (customRippleColor) { return customRippleColor; } - if (theme.isV3) { - return color(iconColor).alpha(0.12).rgb().string(); - } - return color(iconColor).alpha(0.32).rgb().string(); + return color(iconColor).alpha(0.12).rgb().string(); }; export const getIconButtonColor = ({ diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 75505c7367..2503425473 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -212,9 +212,6 @@ const ListAccordion = ({ const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { - if (!theme.isV3) { - return; - } const { nativeEvent } = event; setAlignToTop(nativeEvent.lines.length >= 2); }; @@ -241,12 +238,11 @@ const ListAccordion = ({ ? groupContext.expandedId === id : expandedInternal; - const { titleColor, descriptionColor, titleTextColor, rippleColor } = - getAccordionColors({ - theme, - isExpanded, - customRippleColor, - }); + const { descriptionColor, titleTextColor, rippleColor } = getAccordionColors({ + theme, + isExpanded, + customRippleColor, + }); const handlePress = groupContext && id !== undefined @@ -256,7 +252,7 @@ const ListAccordion = ({ {left ? left({ color: isExpanded ? theme.colors?.primary : descriptionColor, - style: getLeftStyles(alignToTop, description, theme.isV3), + style: getLeftStyles(alignToTop, description), }) : null} - + @@ -348,10 +338,7 @@ const ListAccordion = ({ !child.props.right ) { return React.cloneElement(child, { - style: [ - theme.isV3 ? styles.childV3 : styles.child, - child.props.style, - ], + style: [styles.childV3, child.props.style], theme, }); } @@ -366,17 +353,14 @@ const ListAccordion = ({ ListAccordion.displayName = 'List.Accordion'; const styles = StyleSheet.create({ - container: { - padding: 8, + item: { + marginVertical: 6, + paddingLeft: 8, }, containerV3: { paddingVertical: 8, paddingRight: 24, }, - row: { - flexDirection: 'row', - alignItems: 'center', - }, rowV3: { flexDirection: 'row', marginVertical: 6, @@ -392,16 +376,9 @@ const styles = StyleSheet.create({ description: { fontSize: 14, }, - item: { - marginVertical: 6, - paddingLeft: 8, - }, itemV3: { paddingLeft: 16, }, - child: { - paddingLeft: 64, - }, childV3: { paddingLeft: 40, }, diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx index f1c7194c43..79e9e09235 100644 --- a/src/components/List/ListIcon.tsx +++ b/src/components/List/ListIcon.tsx @@ -51,23 +51,13 @@ const ListIcon = ({ const theme = useInternalTheme(themeOverrides); return ( - + ); }; const styles = StyleSheet.create({ - item: { - margin: 8, - height: 40, - width: 40, - alignItems: 'center', - justifyContent: 'center', - }, itemV3: { alignItems: 'center', justifyContent: 'center', diff --git a/src/components/List/ListImage.tsx b/src/components/List/ListImage.tsx index 9839be7b02..71957838d0 100644 --- a/src/components/List/ListImage.tsx +++ b/src/components/List/ListImage.tsx @@ -7,7 +7,6 @@ import { ImageStyle, } from 'react-native'; -import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; export type Props = { @@ -38,19 +37,9 @@ export type Props = { * export default MyComponent; * ``` */ -const ListImage = ({ - style, - source, - variant = 'image', - theme: themeOverrides, -}: Props) => { - const theme = useInternalTheme(themeOverrides); +const ListImage = ({ style, source, variant = 'image' }: Props) => { const getStyles = () => { if (variant === 'video') { - if (!theme.isV3) { - return [style, styles.video]; - } - return [style, styles.videoV3]; } @@ -72,11 +61,6 @@ const styles = StyleSheet.create({ width: 56, height: 56, }, - video: { - width: 100, - height: 64, - marginLeft: 0, - }, videoV3: { width: 114, height: 64, diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 467eb9b67a..46e94e9ebe 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -10,8 +10,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import { Style, getLeftStyles, getRightStyles } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types'; @@ -169,9 +167,6 @@ const ListItem = ( const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { - if (!theme.isV3) { - return; - } const { nativeEvent } = event; setAlignToTop(nativeEvent.lines.length >= 2); }; @@ -206,9 +201,7 @@ const ListItem = ( }; const renderTitle = () => { - const titleColor = theme.isV3 - ? theme.colors.onSurface - : color(theme.colors.text).alpha(0.87).rgb().string(); + const titleColor = theme.colors.onSurface; return typeof title === 'function' ? ( title({ @@ -230,32 +223,26 @@ const ListItem = ( ); }; - const descriptionColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); + const descriptionColor = theme.colors.onSurfaceVariant; return ( - + {left ? left({ color: descriptionColor, - style: getLeftStyles(alignToTop, description, theme.isV3), + style: getLeftStyles(alignToTop, description), }) : null} {renderTitle()} @@ -267,7 +254,7 @@ const ListItem = ( {right ? right({ color: descriptionColor, - style: getRightStyles(alignToTop, description, theme.isV3), + style: getRightStyles(alignToTop, description), }) : null} @@ -279,17 +266,10 @@ ListItem.displayName = 'List.Item'; const Component = forwardRef(ListItem); const styles = StyleSheet.create({ - container: { - padding: 8, - }, containerV3: { paddingVertical: 8, paddingRight: 24, }, - row: { - width: '100%', - flexDirection: 'row', - }, rowV3: { width: '100%', flexDirection: 'row', @@ -301,10 +281,6 @@ const styles = StyleSheet.create({ description: { fontSize: 14, }, - item: { - marginVertical: 6, - paddingLeft: 8, - }, itemV3: { paddingLeft: 16, }, diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx index 038b86a86e..38e0a9d41f 100644 --- a/src/components/List/ListSubheader.tsx +++ b/src/components/List/ListSubheader.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { StyleProp, StyleSheet, TextStyle } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; @@ -43,11 +42,9 @@ const ListSubheader = ({ }: Props) => { const theme = useInternalTheme(overrideTheme); - const textColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); + const textColor = theme.colors.onSurfaceVariant; - const font = theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium; + const font = theme.fonts.bodyMedium; return ( { const stylesV3 = { marginRight: 0, marginLeft: 16, - alignSelf: alignToTop ? 'flex-start' : 'center', + alignSelf: (alignToTop ? 'flex-start' : 'center') as FlexAlignType, }; if (!description) { return { ...styles.iconMarginLeft, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginLeft; - } - return { ...styles.iconMarginLeft, ...stylesV3, @@ -63,26 +58,21 @@ export const getLeftStyles = ( export const getRightStyles = ( alignToTop: boolean, - description: Description, - isV3: boolean + description: Description ) => { const stylesV3 = { marginLeft: 16, - alignSelf: alignToTop ? 'flex-start' : 'center', + alignSelf: (alignToTop ? 'flex-start' : 'center') as FlexAlignType, }; if (!description) { return { ...styles.iconMarginRight, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginRight; - } - return { ...styles.iconMarginRight, ...stylesV3, @@ -104,13 +94,9 @@ export const getAccordionColors = ({ isExpanded?: boolean; customRippleColor?: ColorValue; }) => { - const titleColor = theme.isV3 - ? theme.colors.onSurface - : color(theme.colors.text).alpha(0.87).rgb().string(); + const titleColor = theme.colors.onSurface; - const descriptionColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); + const descriptionColor = theme.colors.onSurfaceVariant; const titleTextColor = isExpanded ? theme.colors?.primary : titleColor; diff --git a/src/components/MaterialCommunityIcon.tsx b/src/components/MaterialCommunityIcon.tsx index 52719bdbe1..33e02e202f 100644 --- a/src/components/MaterialCommunityIcon.tsx +++ b/src/components/MaterialCommunityIcon.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ComponentProps } from 'react'; import { StyleSheet, Text, Platform, Role, ViewProps } from 'react-native'; -import { black } from '../styles/themes/v2/colors'; +import { black } from '../styles/themes/v3/baseColors'; export type IconProps = { name: ComponentProps['name']; diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 956b362562..7f317ea423 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -618,7 +618,6 @@ const Menu = ({ }, ], borderRadius: theme.roundness, - ...(!theme.isV3 && { elevation: 8 }), ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}), }; @@ -673,13 +672,13 @@ const Menu = ({ style={[ styles.shadowMenuContainer, shadowMenuContainerStyle, - theme.isV3 && { + { backgroundColor: theme.colors.elevation[ELEVATION_LEVELS_MAP[elevation]], }, contentStyle, ]} - {...(theme.isV3 && { elevation })} + elevation={elevation} testID={`${testID}-surface`} theme={theme} container diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 4b8eb3740a..b125357652 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -156,16 +156,14 @@ const MenuItem = ({ disabled, customRippleColor, }); - const { isV3 } = theme; - const containerPadding = isV3 ? 12 : 8; + const containerPadding = 12; - const iconWidth = isV3 ? 24 : 40; + const iconWidth = 24; - const minWidth = MIN_WIDTH - (isV3 ? 12 : 16); + const minWidth = MIN_WIDTH - 12; const maxWidth = getContentMaxWidth({ - isV3, iconWidth, leadingIcon, trailingIcon, @@ -173,7 +171,7 @@ const MenuItem = ({ const titleTextStyle = { color: titleColor, - ...(isV3 ? theme.fonts.bodyLarge : {}), + ...theme.fonts.bodyLarge, }; const newAccessibilityState = { ...accessibilityState, disabled }; @@ -198,22 +196,15 @@ const MenuItem = ({ > {leadingIcon ? ( - + ) : null} {title} - {isV3 && trailingIcon ? ( - + {trailingIcon ? ( + ) : null} @@ -257,12 +245,6 @@ const styles = StyleSheet.create({ row: { flexDirection: 'row', }, - title: { - fontSize: 16, - }, - item: { - marginHorizontal: 8, - }, content: { justifyContent: 'center', }, diff --git a/src/components/Menu/utils.ts b/src/components/Menu/utils.ts index c1b6189ba4..226233de32 100644 --- a/src/components/Menu/utils.ts +++ b/src/components/Menu/utils.ts @@ -2,7 +2,6 @@ import type { ColorValue } from 'react-native'; import color from 'color'; -import { black, white } from '../../styles/themes/v2/colors'; import type { InternalTheme } from '../../types'; import type { IconSource } from '../Icon'; @@ -10,7 +9,6 @@ export const MIN_WIDTH = 112; export const MAX_WIDTH = 280; type ContentProps = { - isV3: boolean; iconWidth: number; leadingIcon?: IconSource; trailingIcon?: IconSource; @@ -22,39 +20,20 @@ type ColorProps = { customRippleColor?: ColorValue; }; -const getDisabledColor = (theme: InternalTheme) => { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - - return color(theme.dark ? white : black) - .alpha(0.32) - .rgb() - .string(); -}; - const getTitleColor = ({ theme, disabled }: ColorProps) => { if (disabled) { - return getDisabledColor(theme); - } - - if (theme.isV3) { - return theme.colors.onSurface; + return theme.colors.onSurfaceDisabled; } - return color(theme.colors.text).alpha(0.87).rgb().string(); + return theme.colors.onSurface; }; const getIconColor = ({ theme, disabled }: ColorProps) => { if (disabled) { - return getDisabledColor(theme); - } - - if (theme.isV3) { - return theme.colors.onSurfaceVariant; + return theme.colors.onSurfaceDisabled; } - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSurfaceVariant; }; const getRippleColor = ({ @@ -65,11 +44,7 @@ const getRippleColor = ({ return customRippleColor; } - if (theme.isV3) { - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); - } - - return undefined; + return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); }; export const getMenuItemColor = ({ @@ -85,26 +60,17 @@ export const getMenuItemColor = ({ }; export const getContentMaxWidth = ({ - isV3, iconWidth, leadingIcon, trailingIcon, }: ContentProps) => { - if (isV3) { - if (leadingIcon && trailingIcon) { - return MAX_WIDTH - (2 * iconWidth + 24); - } - - if (leadingIcon || trailingIcon) { - return MAX_WIDTH - (iconWidth + 24); - } - - return MAX_WIDTH - 12; + if (leadingIcon && trailingIcon) { + return MAX_WIDTH - (2 * iconWidth + 24); } - if (leadingIcon) { - return MAX_WIDTH - (iconWidth + 48); + if (leadingIcon || trailingIcon) { + return MAX_WIDTH - (iconWidth + 24); } - return MAX_WIDTH - 16; + return MAX_WIDTH - 12; }; diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index 790204f4f8..c307df2479 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -10,8 +10,6 @@ import { ViewStyle, } from 'react-native'; -import setColor from 'color'; - import { useInternalTheme } from '../core/theming'; import type { ThemeProp } from '../types'; @@ -191,9 +189,7 @@ const ProgressBar = ({ }; const tintColor = color || theme.colors?.primary; - const trackTintColor = theme.isV3 - ? theme.colors.surfaceVariant - : setColor(tintColor).alpha(0.38).rgb().string(); + const trackTintColor = theme.colors.surfaceVariant; return ( ; } - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; - const disabledTextColor = theme.isV3 - ? theme.colors.onSurfaceDisabled - : theme.colors.disabled; + const textColor = theme.colors.onSurface; + const disabledTextColor = theme.colors.onSurfaceDisabled; const textAlign = isLeading ? 'right' : 'left'; const computedStyle = { @@ -232,12 +230,7 @@ const RadioButtonItem = ({ {isLeading && radioButton} {label} @@ -270,7 +263,4 @@ const styles = StyleSheet.create({ flexShrink: 1, flexGrow: 1, }, - font: { - fontSize: 16, - }, }); diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx index 891df22945..46ebb2def5 100644 --- a/src/components/Searchbar.tsx +++ b/src/components/Searchbar.tsx @@ -227,34 +227,26 @@ const Searchbar = forwardRef( onClearIconPress?.(e); }; - const { roundness, dark, isV3, fonts } = theme; + const { roundness, dark, fonts } = theme; - const placeholderTextColor = isV3 - ? theme.colors.onSurface - : theme.colors?.placeholder; - const textColor = isV3 ? theme.colors.onSurfaceVariant : theme.colors.text; - const md2IconColor = dark - ? textColor - : color(textColor).alpha(0.54).rgb().string(); - const iconColor = - customIconColor || (isV3 ? theme.colors.onSurfaceVariant : md2IconColor); + const placeholderTextColor = theme.colors.onSurface; + const textColor = theme.colors.onSurfaceVariant; + const iconColor = customIconColor || theme.colors.onSurfaceVariant; const rippleColor = customRippleColor || color(textColor).alpha(0.32).rgb().string(); const traileringRippleColor = customTraileringRippleColor || color(textColor).alpha(0.32).rgb().string(); - const font = isV3 - ? { - ...fonts.bodyLarge, - lineHeight: Platform.select({ - ios: 0, - default: fonts.bodyLarge.lineHeight, - }), - } - : theme.fonts.regular; + const font = { + ...fonts.bodyLarge, + lineHeight: Platform.select({ + ios: 0, + default: fonts.bodyLarge.lineHeight, + }), + }; - const isBarMode = isV3 && mode === 'bar'; + const isBarMode = mode === 'bar'; const shouldRenderTraileringIcon = isBarMode && traileringIcon && @@ -264,9 +256,7 @@ const Searchbar = forwardRef( return ( ( style, ]} testID={`${testID}-container`} - {...(theme.isV3 && { elevation })} + elevation={elevation} container theme={theme} > @@ -307,7 +297,7 @@ const Searchbar = forwardRef( ...font, ...Platform.select({ web: { outline: 'none' } }), }, - isV3 && (isBarMode ? styles.barModeInput : styles.viewModeInput), + isBarMode ? styles.barModeInput : styles.viewModeInput, inputStyle, ]} placeholder={placeholder || ''} @@ -325,7 +315,7 @@ const Searchbar = forwardRef( {loading ? ( ) : ( // Clear icon should be always rendered within Searchbar – it's transparent, @@ -336,8 +326,8 @@ const Searchbar = forwardRef( pointerEvents={value ? 'auto' : 'none'} testID={`${testID}-icon-wrapper`} style={[ - isV3 && !value && styles.v3ClearIcon, - isV3 && right !== undefined && styles.v3ClearIconHidden, + !value && styles.v3ClearIcon, + right !== undefined && styles.v3ClearIconHidden, ]} > ( clearIcon || (({ size, color }) => ( ( ) : null} {isBarMode && right?.({ color: textColor, style: styles.rightStyle, testID })} - {isV3 && !isBarMode && showDivider && ( + {!isBarMode && showDivider && ( { if (checked) { - if (theme.isV3) { - return theme.colors.secondaryContainer; - } else { - return color(theme.colors.primary).alpha(0.12).rgb().string(); - } + return theme.colors.secondaryContainer; } return 'transparent'; }; -const getSegmentedButtonBorderColor = ({ - theme, - disabled, - checked, -}: BaseProps) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - return theme.colors.outline; - } - if (checked) { - return theme.colors.primary; +const getSegmentedButtonBorderColor = ({ theme, disabled }: BaseProps) => { + if (disabled) { + return theme.colors.surfaceDisabled; } - - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + return theme.colors.outline; }; const getSegmentedButtonBorderWidth = ({ - theme, + theme: _theme, }: Omit) => { - if (theme.isV3) { - return 1; - } - - return StyleSheet.hairlineWidth; + return 1; }; const getSegmentedButtonTextColor = ({ @@ -133,21 +107,13 @@ const getSegmentedButtonTextColor = ({ checkedColor, uncheckedColor, }: SegmentedButtonProps) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - if (checked) { - return checkedColor ?? theme.colors.onSecondaryContainer; - } - return uncheckedColor ?? theme.colors.onSurface; - } - if (disabled) { - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; + } + if (checked) { + return checkedColor ?? theme.colors.onSecondaryContainer; } - // Primary color is used for checked state too. - return theme.colors.primary; + return uncheckedColor ?? theme.colors.onSurface; }; export const getSegmentedButtonColors = ({ diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx index d11bc91a62..1f2db4d704 100644 --- a/src/components/Snackbar.tsx +++ b/src/components/Snackbar.tsx @@ -243,7 +243,7 @@ const Snackbar = ({ } }, [visible, handleOnVisible, handleOnHidden]); - const { colors, roundness, isV3 } = theme; + const { colors, roundness } = theme; if (hidden) { return null; @@ -257,11 +257,11 @@ const Snackbar = ({ ...actionProps } = action || {}; - const buttonTextColor = isV3 ? colors.inversePrimary : colors.accent; - const textColor = isV3 ? colors.inverseOnSurface : colors?.surface; - const backgroundColor = isV3 ? colors.inverseSurface : colors?.onSurface; + const buttonTextColor = colors.inversePrimary; + const textColor = colors.inverseOnSurface; + const backgroundColor = colors.inverseSurface; - const isIconButton = isV3 && onIconPress; + const isIconButton = onIconPress; const marginLeft = action ? -12 : -16; @@ -301,7 +301,6 @@ const Snackbar = ({ accessibilityLiveRegion="polite" theme={theme} style={[ - !isV3 && styles.elevation, styles.container, { backgroundColor, @@ -322,7 +321,7 @@ const Snackbar = ({ ]} testID={testID} container - {...(isV3 && { elevation })} + elevation={elevation} {...rest} > {renderChildrenWithWrapper()} @@ -336,7 +335,7 @@ const Snackbar = ({ }} style={[styles.button, actionStyle]} textColor={buttonTextColor} - compact={!isV3} + compact={false} mode="text" theme={theme} rippleColor={actionRippleColor} @@ -423,9 +422,6 @@ const styles = StyleSheet.create({ marginRight: 8, marginLeft: 4, }, - elevation: { - elevation: 6, - }, icon: { width: 40, height: 40, diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx index 3b46d099e1..cc83b97fb3 100644 --- a/src/components/Surface.tsx +++ b/src/components/Surface.tsx @@ -10,7 +10,7 @@ import { } from 'react-native'; import { useInternalTheme } from '../core/theming'; -import overlay, { isAnimatedValue } from '../styles/overlay'; +import { isAnimatedValue } from '../styles/overlay'; import shadow from '../styles/shadow'; import type { ThemeProp, MD3Elevation } from '../types'; import { forwardRef } from '../utils/forwardRef'; @@ -57,30 +57,6 @@ export type Props = Omit, 'style'> & { container?: boolean; }; -const MD2Surface = forwardRef( - ({ style, theme: overrideTheme, ...rest }: Omit, ref) => { - const { elevation = 4 } = (StyleSheet.flatten(style) || {}) as ViewStyle; - const { dark: isDarkTheme, mode, colors } = useInternalTheme(overrideTheme); - - return ( - - ); - } -); - const outerLayerStyleProperties: (keyof ViewStyle)[] = [ 'position', 'alignSelf', @@ -277,13 +253,6 @@ const Surface = forwardRef( ) => { const theme = useInternalTheme(overridenTheme); - if (!theme.isV3) - return ( - - {children} - - ); - const { colors } = theme; const inputRange = [0, 1, 2, 3, 4, 5]; @@ -313,7 +282,7 @@ const Surface = forwardRef( testID={testID} style={[ { backgroundColor }, - elevation && isElevated ? shadow(elevation, theme.isV3) : null, + elevation && isElevated ? shadow(elevation) : null, style, ]} > diff --git a/src/components/Switch/utils.ts b/src/components/Switch/utils.ts index 2994495af9..9d71a1c28b 100644 --- a/src/components/Switch/utils.ts +++ b/src/components/Switch/utils.ts @@ -3,13 +3,13 @@ import { Platform } from 'react-native'; import setColor from 'color'; import { - grey400, - grey800, + black, + white, grey50, + grey400, grey700, - white, - black, -} from '../../styles/themes/v2/colors'; + grey800, +} from '../../styles/themes/v3/baseColors'; import type { InternalTheme } from '../../types'; type BaseProps = { @@ -29,11 +29,7 @@ const getCheckedColor = ({ return color; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getThumbTintColor = ({ @@ -79,10 +75,7 @@ const getOnTintColor = ({ if (disabled) { if (theme.dark) { - if (theme.isV3) { - return setColor(white).alpha(0.06).rgb().string(); - } - return setColor(white).alpha(0.1).rgb().string(); + return setColor(white).alpha(0.06).rgb().string(); } return setColor(black).alpha(0.12).rgb().string(); } diff --git a/src/components/TextInput/Addons/Outline.tsx b/src/components/TextInput/Addons/Outline.tsx index 45b675fd8b..39ffa48b56 100644 --- a/src/components/TextInput/Addons/Outline.tsx +++ b/src/components/TextInput/Addons/Outline.tsx @@ -10,11 +10,9 @@ import { import { TextInputLabelProp } from '../types'; type OutlineProps = { - isV3: boolean; activeColor: string; backgroundColor: ColorValue; hasActiveOutline?: boolean; - focused?: boolean; outlineColor?: string; roundness?: number; label?: TextInputLabelProp; @@ -22,12 +20,10 @@ type OutlineProps = { }; export const Outline = ({ - isV3, label, activeColor, backgroundColor, hasActiveOutline, - focused, outlineColor, roundness, style, @@ -42,7 +38,7 @@ export const Outline = ({ { backgroundColor, borderRadius: roundness, - borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1, + borderWidth: hasActiveOutline ? 2 : 1, borderColor: hasActiveOutline ? activeColor : outlineColor, }, style, diff --git a/src/components/TextInput/Addons/Underline.tsx b/src/components/TextInput/Addons/Underline.tsx index 184cbe63b5..2dfa28e4e6 100644 --- a/src/components/TextInput/Addons/Underline.tsx +++ b/src/components/TextInput/Addons/Underline.tsx @@ -1,10 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native'; -import type { ThemeProp } from 'src/types'; - -import { useInternalTheme } from '../../../core/theming'; - type UnderlineProps = { parentState: { focused: boolean; @@ -17,7 +13,6 @@ type UnderlineProps = { underlineColorCustom?: string; hasActiveOutline?: boolean; style?: StyleProp; - theme?: ThemeProp; }; export const Underline = ({ @@ -28,32 +23,25 @@ export const Underline = ({ underlineColorCustom, hasActiveOutline, style, - theme: themeOverrides, }: UnderlineProps) => { - const { isV3 } = useInternalTheme(themeOverrides); - let backgroundColor = parentState.focused ? activeColor : underlineColorCustom; if (error) backgroundColor = colors?.error; - const activeScale = isV3 ? 2 : 1; - return ( = ({ forceFocus, paddingHorizontal, maxFontSizeMultiplier, - theme, disabled, }) => { if (adornmentConfig.length) { @@ -174,7 +168,6 @@ const TextInputAdornment: React.FunctionComponent = ({ return ( { const theme = useInternalTheme(themeOverrides); - const { AFFIX_OFFSET } = getConstants(theme.isV3); + const { AFFIX_OFFSET } = getConstants(); const { textStyle, diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx index bd38ca64ab..8f4ce7c4df 100644 --- a/src/components/TextInput/Adornment/TextInputIcon.tsx +++ b/src/components/TextInput/Adornment/TextInputIcon.tsx @@ -69,7 +69,6 @@ const IconAdornment: React.FunctionComponent< icon: React.ReactNode; topPosition: number; side: 'left' | 'right'; - theme?: ThemeProp; disabled?: boolean; } & Omit > = ({ @@ -79,11 +78,9 @@ const IconAdornment: React.FunctionComponent< isTextInputFocused, forceFocus, testID, - theme: themeOverrides, disabled, }) => { - const { isV3 } = useInternalTheme(themeOverrides); - const { ICON_OFFSET } = getConstants(isV3); + const { ICON_OFFSET } = getConstants(); const style = { top: topPosition, diff --git a/src/components/TextInput/Adornment/utils.ts b/src/components/TextInput/Adornment/utils.ts index e7dae2b487..f9a00ce15a 100644 --- a/src/components/TextInput/Adornment/utils.ts +++ b/src/components/TextInput/Adornment/utils.ts @@ -1,5 +1,3 @@ -import color from 'color'; - import type { InternalTheme } from '../../../types'; type BaseProps = { @@ -8,16 +6,10 @@ type BaseProps = { }; export function getTextColor({ theme, disabled }: BaseProps) { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.onSurfaceVariant; + if (disabled) { + return theme.colors.onSurfaceDisabled; } - return color(theme.colors?.text) - .alpha(theme.dark ? 0.7 : 0.54) - .rgb() - .string(); + return theme.colors.onSurfaceVariant; } export function getIconColor({ @@ -36,10 +28,6 @@ export function getIconColor({ return customColor; } - if (!theme.isV3) { - return theme.colors.text; - } - if (disabled) { return theme.colors.onSurfaceDisabled; } diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index f0818f98f0..4877bc236e 100644 --- a/src/components/TextInput/Label/InputLabel.tsx +++ b/src/components/TextInput/Label/InputLabel.tsx @@ -48,12 +48,11 @@ const InputLabel = (props: InputLabelProps) => { labelTranslationXOffset, maxFontSizeMultiplier, testID, - isV3, inputContainerLayout, scaledLabel, } = props; - const { INPUT_PADDING_HORIZONTAL } = getConstants(isV3); + const { INPUT_PADDING_HORIZONTAL } = getConstants(); const { width } = useWindowDimensions(); const isWeb = Platform.OS === 'web'; diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx index 378366e176..a8a9530da2 100644 --- a/src/components/TextInput/TextInputFlat.tsx +++ b/src/components/TextInput/TextInputFlat.tsx @@ -78,12 +78,12 @@ const TextInputFlat = ({ ...rest }: ChildTextInputProps) => { const isAndroid = Platform.OS === 'android'; - const { colors, isV3, roundness } = theme; - const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular; + const { colors, roundness } = theme; + const font = theme.fonts.bodyLarge; const hasActiveOutline = parentState.focused || error; const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT, MIN_WIDTH } = - getConstants(isV3); + getConstants(); const { fontSize: fontSizeStyle, @@ -108,7 +108,6 @@ const TextInputFlat = ({ let { paddingLeft, paddingRight } = calculateFlatInputHorizontalPadding({ adornmentConfig, - isV3, }); if (isPaddingHorizontalPassed) { @@ -134,7 +133,6 @@ const TextInputFlat = ({ paddingHorizontal, inputOffset: FLAT_INPUT_OFFSET, mode: InputMode.Flat, - isV3, }); const { @@ -304,7 +302,6 @@ const TextInputFlat = ({ ? 1 : 0 : 1, - isV3, }; const affixTopPosition = { @@ -349,7 +346,6 @@ const TextInputFlat = ({ error={error} colors={colors} activeColor={activeColor} - theme={theme} /> { const adornmentConfig = getAdornmentConfig({ left, right }); - const { colors, isV3, roundness } = theme; - const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular; + const { colors, roundness } = theme; + const font = theme.fonts.bodyLarge; const hasActiveOutline = parentState.focused || error; const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET, MIN_WIDTH } = - getConstants(isV3); + getConstants(); const { fontSize: fontSizeStyle, @@ -149,7 +149,7 @@ const TextInputOutlined = ({ if (isAdornmentLeftIcon) { labelTranslationXOffset = (I18nManager.getConstants().isRTL ? -1 : 1) * - (ADORNMENT_SIZE + ADORNMENT_OFFSET - (isV3 ? 0 : 8)); + (ADORNMENT_SIZE + ADORNMENT_OFFSET); } const minInputHeight = @@ -254,7 +254,6 @@ const TextInputOutlined = ({ ? 1 : 0 : 1, - isV3, }; const onLayoutChange = React.useCallback( @@ -303,7 +302,6 @@ const TextInputOutlined = ({ rightAffixWidth, leftAffixWidth, mode: 'outlined', - isV3, }); const affixTopPosition = { [AdornmentSide.Left]: leftAffixTopPosition, @@ -344,12 +342,10 @@ const TextInputOutlined = ({ Otherwise the border will cut off the label on Android */} { - const { LABEL_PADDING_HORIZONTAL, ADORNMENT_OFFSET, FLAT_INPUT_OFFSET } = - getConstants(isV3); - let paddingLeft = LABEL_PADDING_HORIZONTAL; let paddingRight = LABEL_PADDING_HORIZONTAL; @@ -320,19 +306,11 @@ const getInputTextColor = ({ return textColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - return theme.colors.onSurface; - } - if (disabled) { - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSurfaceDisabled; } - return theme.colors.text; + return theme.colors.onSurface; }; const getActiveColor = ({ @@ -360,30 +338,18 @@ const getActiveColor = ({ } if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSurfaceDisabled; } return theme.colors.primary; }; const getPlaceholderColor = ({ theme, disabled }: BaseProps) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - return theme.colors.onSurfaceVariant; - } - if (disabled) { - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } - return theme.colors.placeholder; + return theme.colors.onSurfaceVariant; }; const getSelectionColor = ({ @@ -405,21 +371,11 @@ const getSelectionColor = ({ }; const getFlatBackgroundColor = ({ theme, disabled }: BaseProps) => { - if (theme.isV3) { - if (disabled) { - return color(theme.colors.onSurface).alpha(0.04).rgb().string(); - } else { - return theme.colors.surfaceVariant; - } - } - if (disabled) { - return undefined; + return color(theme.colors.onSurface).alpha(0.04).rgb().string(); } - return theme.dark - ? color(theme.colors?.background).lighten(0.24).rgb().string() - : color(theme.colors?.background).darken(0.06).rgb().string(); + return theme.colors.surfaceVariant; }; const getFlatUnderlineColor = ({ @@ -431,19 +387,11 @@ const getFlatUnderlineColor = ({ return underlineColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - return theme.colors.onSurfaceVariant; - } - if (disabled) { - return 'transparent'; + return theme.colors.onSurfaceDisabled; } - return theme.colors.disabled; + return theme.colors.onSurfaceVariant; }; const getOutlinedOutlineInputColor = ({ @@ -451,30 +399,18 @@ const getOutlinedOutlineInputColor = ({ disabled, customOutlineColor, }: BaseProps & { customOutlineColor?: string }) => { - const isTransparent = color(customOutlineColor).alpha() === 0; - if (!disabled && customOutlineColor) { return customOutlineColor; } - if (theme.isV3) { - if (disabled) { - if (theme.dark) { - return 'transparent'; - } - return theme.colors.surfaceDisabled; - } - - return theme.colors.outline; - } - if (disabled) { - if (isTransparent) { - return customOutlineColor; + if (theme.dark) { + return 'transparent'; } - return theme.colors.disabled; + return theme.colors.surfaceDisabled; } - return theme.colors.placeholder; + + return theme.colors.outline; }; export const getFlatInputColors = ({ @@ -560,47 +496,11 @@ export const getOutlinedInputColors = ({ }; }; -export const getConstants = (isV3?: boolean) => { - // Text input affix - let AFFIX_OFFSET; - // Text input icon - let ICON_OFFSET; - //Text input flat - let LABEL_PADDING_TOP; - let LABEL_PADDING_HORIZONTAL; - let FLAT_INPUT_OFFSET; - let MIN_HEIGHT; - // Text input outlined; - let INPUT_PADDING_HORIZONTAL; - let ADORNMENT_OFFSET; - let OUTLINED_INPUT_OFFSET; - - if (isV3) { - AFFIX_OFFSET = MD3_AFFIX_OFFSET; - ICON_OFFSET = MD3_ICON_OFFSET; - LABEL_PADDING_TOP = MD3_LABEL_PADDING_TOP; - LABEL_PADDING_HORIZONTAL = MD3_LABEL_PADDING_HORIZONTAL; - FLAT_INPUT_OFFSET = MD3_FLAT_INPUT_OFFSET; - MIN_HEIGHT = MD3_MIN_HEIGHT; - INPUT_PADDING_HORIZONTAL = MD3_INPUT_PADDING_HORIZONTAL; - ADORNMENT_OFFSET = MD3_ADORNMENT_OFFSET; - OUTLINED_INPUT_OFFSET = MD3_OUTLINED_INPUT_OFFSET; - } else { - AFFIX_OFFSET = MD2_AFFIX_OFFSET; - ICON_OFFSET = MD2_ICON_OFFSET; - LABEL_PADDING_TOP = MD2_LABEL_PADDING_TOP; - LABEL_PADDING_HORIZONTAL = MD2_LABEL_PADDING_HORIZONTAL; - FLAT_INPUT_OFFSET = MD2_FLAT_INPUT_OFFSET; - MIN_HEIGHT = MD2_MIN_HEIGHT; - INPUT_PADDING_HORIZONTAL = MD2_INPUT_PADDING_HORIZONTAL; - ADORNMENT_OFFSET = MD2_ADORNMENT_OFFSET; - OUTLINED_INPUT_OFFSET = MD2_OUTLINED_INPUT_OFFSET; - } - +export const getConstants = () => { return { AFFIX_OFFSET, ICON_OFFSET, - LABEL_PADDING_TOP, + LABEL_PADDING_TOP: LABEL_PADDING_TOP_FLAT, LABEL_PADDING_HORIZONTAL, FLAT_INPUT_OFFSET, MIN_HEIGHT, diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx index 4ec2952366..1f710e4089 100644 --- a/src/components/TextInput/types.tsx +++ b/src/components/TextInput/types.tsx @@ -141,7 +141,6 @@ export type InputLabelProps = { inputContainerLayout: { width: number }; labelBackground?: any; maxFontSizeMultiplier?: number | undefined | null; - isV3?: boolean; scaledLabel?: boolean; } & LabelProps; diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index bfdd3fca5c..e115dec7ec 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -9,12 +9,9 @@ import { ColorValue, } from 'react-native'; -import color from 'color'; - import { ToggleButtonGroupContext } from './ToggleButtonGroup'; import { getToggleButtonColor } from './utils'; import { useInternalTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; import { forwardRef } from '../../utils/forwardRef'; import type { IconSource } from '../Icon'; @@ -128,12 +125,7 @@ const ToggleButton = forwardRef( (context && context.value === value) || status === 'checked'; const backgroundColor = getToggleButtonColor({ theme, checked }); - const borderColor = theme.isV3 - ? theme.colors.outline - : color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + const borderColor = theme.colors.outline; return ( { if (checked) { - if (theme.isV3) { - return color(theme.colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) - .rgb() - .string(); - } - if (theme.dark) { - return 'rgba(255, 255, 255, .12)'; - } - return 'rgba(0, 0, 0, .08)'; + return color(theme.colors.onSecondaryContainer) + .alpha(tokens.md.ref.opacity.level2) + .rgb() + .string(); } return 'transparent'; }; diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index f5a483db5a..fdfef8571f 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -204,9 +204,7 @@ const Tooltip = ({ style={[ styles.tooltip, { - backgroundColor: theme.isV3 - ? theme.colors.onSurface - : theme.colors.tooltip, + backgroundColor: theme.colors.onSurface, ...getTooltipPosition( measurement as Measurement, children as React.ReactElement diff --git a/src/components/TouchableRipple/utils.ts b/src/components/TouchableRipple/utils.ts index 29c2b18e25..0c371b8915 100644 --- a/src/components/TouchableRipple/utils.ts +++ b/src/components/TouchableRipple/utils.ts @@ -5,7 +5,6 @@ import color from 'color'; import type { InternalTheme } from '../../types'; const getUnderlayColor = ({ - theme, calculatedRippleColor, underlayColor, }: { @@ -17,11 +16,7 @@ const getUnderlayColor = ({ return underlayColor; } - if (theme.isV3) { - return color(calculatedRippleColor).rgb().string(); - } - - return color(calculatedRippleColor).fade(0.5).rgb().string(); + return color(calculatedRippleColor).rgb().string(); }; const getRippleColor = ({ @@ -35,14 +30,7 @@ const getRippleColor = ({ return rippleColor; } - if (theme.isV3) { - return color(theme.colors.onSurface).alpha(0.12).rgb().string(); - } - - if (theme.dark) { - return color(theme.colors.text).alpha(0.32).rgb().string(); - } - return color(theme.colors.text).alpha(0.2).rgb().string(); + return color(theme.colors.onSurface).alpha(0.12).rgb().string(); }; export const getTouchableRippleColors = ({ diff --git a/src/components/Typography/AnimatedText.tsx b/src/components/Typography/AnimatedText.tsx index 6504ad4b92..19872e2d93 100644 --- a/src/components/Typography/AnimatedText.tsx +++ b/src/components/Typography/AnimatedText.tsx @@ -50,7 +50,7 @@ const AnimatedText = forwardRef>( const theme = useInternalTheme(themeOverrides); const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'; - if (theme.isV3 && variant) { + if (variant) { const font = theme.fonts[variant]; if (typeof font !== 'object') { throw new Error( @@ -73,10 +73,10 @@ const AnimatedText = forwardRef>( /> ); } else { - const font = !theme.isV3 ? theme.fonts.regular : theme.fonts.bodyMedium; + const font = theme.fonts.bodyMedium; const textStyle = { ...font, - color: theme.isV3 ? theme.colors.onSurface : theme.colors.text, + color: theme.colors.onSurface, }; return ( root.current?.setNativeProps(args), })); - if (theme.isV3 && variant) { + if (variant) { let font = theme.fonts[variant]; let textStyle = [font, style]; if ( React.isValidElement(rest.children) && - (rest.children.type === Component || - rest.children.type === AnimatedText || - rest.children.type === StyledText) + (rest.children.type === Component || rest.children.type === AnimatedText) ) { const { props } = rest.children as { props: { variant?: string; style?: StyleProp }; @@ -155,10 +152,10 @@ const Text = ( /> ); } else { - const font = theme.isV3 ? theme.fonts.default : theme.fonts?.regular; + const font = theme.fonts.default; const textStyle = { ...font, - color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text, + color: theme.colors.onSurface, }; return ( & { - style?: StyleProp; - children: React.ReactNode; -}; - -// @component-group Typography -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a caption. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Caption } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Caption - * ); - * - * export default MyComponent; - * ``` - */ -const Caption = (props: Props) => ( - -); - -export default Caption; - -const styles = StyleSheet.create({ - text: { - fontSize: 12, - lineHeight: 20, - marginVertical: 2, - letterSpacing: 0.4, - }, -}); diff --git a/src/components/Typography/v2/Headline.tsx b/src/components/Typography/v2/Headline.tsx deleted file mode 100644 index c635f81d07..0000000000 --- a/src/components/Typography/v2/Headline.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native'; - -import StyledText from './StyledText'; - -export type Props = React.ComponentProps & { - style?: StyleProp; - children: React.ReactNode; -}; - -// @component-group Typography - -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a headline. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Headline } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Headline - * ); - * - * export default MyComponent; - * ``` - */ -const Headline = (props: Props) => { - return ( - - ); -}; - -export default Headline; - -const styles = StyleSheet.create({ - text: { - fontSize: 24, - lineHeight: 32, - marginVertical: 2, - letterSpacing: 0, - }, -}); diff --git a/src/components/Typography/v2/Paragraph.tsx b/src/components/Typography/v2/Paragraph.tsx deleted file mode 100644 index 26149d37e3..0000000000 --- a/src/components/Typography/v2/Paragraph.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import { TextProps, StyleSheet } from 'react-native'; - -import StyledText from './StyledText'; - -export type Props = TextProps & { - children: React.ReactNode; -}; - -// @component-group Typography - -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a paragraph. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Paragraph } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Paragraph - * ); - * - * export default MyComponent; - * ``` - */ -const Paragraph = (props: Props) => ( - -); - -export default Paragraph; - -const styles = StyleSheet.create({ - text: { - fontSize: 14, - lineHeight: 20, - marginVertical: 2, - letterSpacing: 0.25, - }, -}); diff --git a/src/components/Typography/v2/StyledText.tsx b/src/components/Typography/v2/StyledText.tsx deleted file mode 100644 index 5d976ff267..0000000000 --- a/src/components/Typography/v2/StyledText.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import { I18nManager, StyleProp, StyleSheet, TextStyle } from 'react-native'; - -import color from 'color'; -import type { ThemeProp } from 'src/types'; - -import Text from './Text'; -import { useInternalTheme } from '../../../core/theming'; - -type Props = React.ComponentProps & { - alpha?: number; - family: 'regular' | 'medium' | 'light' | 'thin'; - style?: StyleProp; - theme?: ThemeProp; -}; - -const StyledText = ({ - alpha = 1, - family, - style, - theme: themeOverrides, - ...rest -}: Props) => { - const theme = useInternalTheme(themeOverrides); - - const textColor = color( - theme.isV3 ? theme.colors.onSurface : theme.colors?.text - ) - .alpha(alpha) - .rgb() - .string(); - const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'; - - return ( - - ); -}; - -const styles = StyleSheet.create({ - text: { - textAlign: 'left', - }, -}); - -export default StyledText; diff --git a/src/components/Typography/v2/Subheading.tsx b/src/components/Typography/v2/Subheading.tsx deleted file mode 100644 index d7c849d10b..0000000000 --- a/src/components/Typography/v2/Subheading.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import { Text, TextStyle, StyleSheet, StyleProp } from 'react-native'; - -import StyledText from './StyledText'; - -export type Props = React.ComponentProps & { - style?: StyleProp; - children: React.ReactNode; -}; - -// @component-group Typography - -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a subheading. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Subheading } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Subheading - * ); - * - * export default MyComponent; - * ``` - */ -const Subheading = (props: Props) => ( - -); - -export default Subheading; - -const styles = StyleSheet.create({ - text: { - fontSize: 16, - lineHeight: 24, - marginVertical: 2, - letterSpacing: 0.5, - }, -}); diff --git a/src/components/Typography/v2/Text.tsx b/src/components/Typography/v2/Text.tsx deleted file mode 100644 index 8114915189..0000000000 --- a/src/components/Typography/v2/Text.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import { - StyleProp, - StyleSheet, - Text as NativeText, - TextStyle, -} from 'react-native'; - -import type { MD2Theme } from 'src/types'; - -import { useInternalTheme } from '../../../core/theming'; -import { forwardRef } from '../../../utils/forwardRef'; - -type Props = React.ComponentProps & { - style?: StyleProp; - /** - * @optional - */ - theme?: MD2Theme; -}; - -// @component-group Typography - -/** - * Text component which follows styles from the theme. - * - * @extends Text props https://reactnative.dev/docs/text#props - */ -const Text: React.ForwardRefRenderFunction<{}, Props> = ( - { style, theme: overrideTheme, ...rest }: Props, - ref -) => { - const root = React.useRef(null); - const theme = useInternalTheme(overrideTheme); - - React.useImperativeHandle(ref, () => ({ - setNativeProps: (args: Object) => root.current?.setNativeProps(args), - })); - - return ( - - ); -}; - -const styles = StyleSheet.create({ - text: { - textAlign: 'left', - }, -}); - -export default forwardRef(Text); diff --git a/src/components/Typography/v2/Title.tsx b/src/components/Typography/v2/Title.tsx deleted file mode 100644 index cbddd1e22e..0000000000 --- a/src/components/Typography/v2/Title.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import { Text, StyleSheet } from 'react-native'; - -import StyledText from './StyledText'; - -export type Props = React.ComponentProps & { - children: React.ReactNode; -}; - -// @component-group Typography - -/** - * @deprecated Deprecated in v5.x - use `` instead. - * Typography component for showing a title. - * - *
- * - *
- * - * ## Usage - * ```js - * import * as React from 'react'; - * import { Title } from 'react-native-paper'; - * - * const MyComponent = () => ( - * Title - * ); - * - * export default MyComponent; - * ``` - */ -const Title = (props: Props) => ( - -); - -export default Title; - -const styles = StyleSheet.create({ - text: { - fontSize: 20, - lineHeight: 30, - marginVertical: 2, - letterSpacing: 0.15, - }, -}); diff --git a/src/components/Typography/v2/index.ts b/src/components/Typography/v2/index.ts deleted file mode 100644 index 42fdec5730..0000000000 --- a/src/components/Typography/v2/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { default as Caption } from './Caption'; -export { default as Headline } from './Headline'; -export { default as Paragraph } from './Paragraph'; -export { default as Subheading } from './Subheading'; -export { default as Title } from './Title'; diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx index 7a136e8b22..0b1178ef64 100644 --- a/src/components/__tests__/Appbar/Appbar.test.tsx +++ b/src/components/__tests__/Appbar/Appbar.test.tsx @@ -1,12 +1,10 @@ import React from 'react'; -import { Animated, Platform } from 'react-native'; +import { Animated } from 'react-native'; import { act, render } from '@testing-library/react-native'; import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock'; -import PaperProvider from '../../../core/PaperProvider'; import { getTheme } from '../../../core/theming'; -import overlay from '../../../styles/overlay'; import { tokens } from '../../../styles/themes/v3/tokens'; import Appbar from '../../Appbar'; import { @@ -17,7 +15,6 @@ import { } from '../../Appbar/utils'; import Menu from '../../Menu/Menu'; import Searchbar from '../../Searchbar'; -import Tooltip from '../../Tooltip/Tooltip'; import Text from '../../Typography/Text'; const renderAppbarContent = utilRenderAppbarContent as ( @@ -58,7 +55,6 @@ describe('renderAppbarContent', () => { it('should render all children types if renderOnly is not specified', () => { const result = renderAppbarContent({ - isV3: false, children, isDark: false, }); @@ -68,7 +64,6 @@ describe('renderAppbarContent', () => { it('should render all children types except specified in renderExcept', () => { const result = renderAppbarContent({ - isV3: false, children: [ ...children, { it('should render only children types specifed in renderOnly', () => { const result = renderAppbarContent({ - isV3: false, children, isDark: false, renderOnly: ['Appbar.Action'], @@ -104,7 +98,6 @@ describe('renderAppbarContent', () => { it('should render AppbarContent with correct mode', () => { const result = renderAppbarContent({ - isV3: false, children, isDark: false, renderOnly: ['Appbar.Content'], @@ -115,98 +108,37 @@ describe('renderAppbarContent', () => { }); it('should render centered AppbarContent', () => { - const renderResult = (isV3 = true) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: ['Appbar.Content'], - mode: 'center-aligned', - shouldCenterContent: true, - }); - - const centerAlignedContent = { - alignItems: 'center', - }; - - expect(renderResult()[0].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) - ); - - expect(renderResult(false)[0].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) - ); - }); - - it('should not render centered AppbarContent for Android, if not V3', () => { - Platform.OS = 'android'; - const renderResult = (isV3 = true) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: ['Appbar.Content'], - mode: 'center-aligned', - shouldCenterContent: !isV3 && Platform.OS === 'ios', - }); - - const centerAlignedContent = { - alignItems: 'center', - }; - - expect(renderResult(false)[0].props.style).not.toEqual( - expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) - ); - }); - - it('should render centered AppbarContent always for iOS, if not V3', () => { - Platform.OS = 'ios'; - const renderResult = (isV3 = true) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: ['Appbar.Content'], - mode: 'center-aligned', - shouldCenterContent: !isV3 && Platform.OS === 'ios', - }); + const result = renderAppbarContent({ + children, + isDark: false, + renderOnly: ['Appbar.Content'], + mode: 'center-aligned', + shouldCenterContent: true, + }); const centerAlignedContent = { alignItems: 'center', }; - expect(renderResult(false)[0].props.style).toEqual( + expect(result[0].props.style).toEqual( expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) ); }); it('should render AppbarContent with correct spacings', () => { - const renderResult = (isV3 = true, withAppbarBackAction = false) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: [ - 'Appbar.Content', - withAppbarBackAction && 'Appbar.BackAction', - ], - }); - - const v2Spacing = { - marginLeft: 8, - }; + const result = renderAppbarContent({ + children, + isDark: false, + renderOnly: ['Appbar.Content'], + }); const v3Spacing = { marginLeft: 12, }; - expect(renderResult()[0].props.style).toEqual( + expect(result[0].props.style).toEqual( expect.arrayContaining([expect.objectContaining(v3Spacing)]) ); - - expect(renderResult(false, true)[1].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(v2Spacing)]) - ); }); it('Is recognized as a header when no onPress callback has been pressed', () => { @@ -321,40 +253,6 @@ describe('AppbarAction', () => { .children; expect(appbarBackActionIcon.props.color).toBe('purple'); }); - - describe('When V2', () => { - const theme = { isV3: false }; - - it('should be rendered with the right color when no color is passed', () => { - const { getByTestId } = render( - - - - ); - - const appbarActionIcon = getByTestId('cross-fade-icon-current').props - .children; - - expect(appbarActionIcon.props.color).toBe('#ffffff'); - }); - - it('should be rendered with the right color when no color is passed but is wrapped by a Tooltip', () => { - const { getByTestId } = render( - - - - - - - - ); - - const appbarActionIcon = getByTestId('cross-fade-icon-current').props - .children; - - expect(appbarActionIcon.props.color).toBe('#ffffff'); - }); - }); }); describe('AppbarContent', () => { @@ -390,38 +288,25 @@ describe('AppbarContent', () => { }); describe('getAppbarColors', () => { - const elevation = 4; const customBackground = 'aquamarine'; it('should return custom color no matter what is the theme version', () => { - expect( - getAppbarBackgroundColor(getTheme(), elevation, customBackground) - ).toBe(customBackground); + expect(getAppbarBackgroundColor(getTheme(), customBackground)).toBe( + customBackground + ); }); it('should return v3 light color if theme version is 3', () => { - expect(getAppbarBackgroundColor(getTheme(), elevation)).toBe( + expect(getAppbarBackgroundColor(getTheme())).toBe( tokens.md.ref.palette.neutral98 ); }); it('should return v3 dark color if theme version is 3', () => { - expect(getAppbarBackgroundColor(getTheme(true), elevation)).toBe( + expect(getAppbarBackgroundColor(getTheme(true))).toBe( tokens.md.ref.palette.neutral6 ); }); - - it('should return v2 light color if theme version is 2', () => { - expect(getAppbarBackgroundColor(getTheme(false, false), elevation)).toBe( - '#6200ee' - ); - }); - - it('should return v2 dark color if theme version is 2', () => { - expect(getAppbarBackgroundColor(getTheme(true, false), elevation)).toBe( - overlay(elevation, '#121212') - ); - }); }); describe('animated value changes correctly', () => { diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 4ac36a0189..50ab8e3cd6 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -679,7 +679,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A "letterSpacing": 0, "lineHeight": 28, }, - false, undefined, ], ], diff --git a/src/components/__tests__/Avatar.test.tsx b/src/components/__tests__/Avatar.test.tsx index 96d69582b6..936fa03fba 100644 --- a/src/components/__tests__/Avatar.test.tsx +++ b/src/components/__tests__/Avatar.test.tsx @@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v2/colors'; +import { red500 } from '../../styles/themes/v3/baseColors'; import * as Avatar from '../Avatar/Avatar'; const styles = StyleSheet.create({ diff --git a/src/components/__tests__/Badge.test.tsx b/src/components/__tests__/Badge.test.tsx index 32730659a1..1c6bf1ebf2 100644 --- a/src/components/__tests__/Badge.test.tsx +++ b/src/components/__tests__/Badge.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v2/colors'; +import { red500 } from '../../styles/themes/v3/baseColors'; import Badge from '../Badge'; it('renders badge', () => { diff --git a/src/components/__tests__/Banner.test.tsx b/src/components/__tests__/Banner.test.tsx index 8e0d8c90d1..048bfa7275 100644 --- a/src/components/__tests__/Banner.test.tsx +++ b/src/components/__tests__/Banner.test.tsx @@ -91,7 +91,7 @@ it('render visible banner, with custom theme', () => { visible theme={{ colors: { - text: '#00f', + onSurface: '#00f', surface: '#ccc', primary: '#043', }, diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx index 11a213eebc..fd1437ea6a 100644 --- a/src/components/__tests__/BottomNavigation.test.tsx +++ b/src/components/__tests__/BottomNavigation.test.tsx @@ -2,11 +2,9 @@ import * as React from 'react'; import { Animated, Easing, Platform, StyleSheet } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { red300 } from '../../styles/themes/v2/colors'; -import { MD3Colors } from '../../styles/themes/v3/tokens'; +import { red300 } from '../../styles/themes/v3/baseColors'; import BottomNavigation from '../BottomNavigation/BottomNavigation'; import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen'; import { @@ -378,7 +376,7 @@ it('renders custom background color passed to barStyle property', () => { ); const wrapper = getByTestId('bottom-navigation-bar-content'); - expect(wrapper).toHaveStyle({ backgroundColor: red300 }); + expect(wrapper).toHaveStyle({ backgroundColor: '#e57373' }); }); it('renders a single tab', () => { @@ -446,22 +444,6 @@ it('does not apply maxTabBarWidth styling if compact prop is falsy', () => { }); }); -it('displays ripple animation view if shifting is truthy', () => { - const { getByTestId } = render( - route.title} - getLazy={({ route }) => route.key === 'key-2'} - testID="bottom-navigation" - theme={{ isV3: false }} - shifting - /> - ); - - expect(getByTestId('bottom-navigation-bar-content-ripple')).toBeDefined(); -}); - it('does not display ripple animation view if shifting is falsy', () => { const { queryByTestId } = render( { describe('getActiveTintColor', () => { it.each` - activeColor | defaultColor | useV3 | expected - ${'#FBF7DB'} | ${'#fff'} | ${true} | ${'#FBF7DB'} - ${undefined} | ${'#fff'} | ${true} | ${getTheme(false, true).colors.onSecondaryContainer} - ${undefined} | ${'#fff'} | ${false} | ${'#fff'} + activeColor | expected + ${'#FBF7DB'} | ${'#FBF7DB'} + ${undefined} | ${getTheme(false).colors.onSecondaryContainer} `( - 'returns $expected when activeColor: $activeColor and useV3: $useV3', - ({ activeColor, defaultColor, useV3, expected }) => { - const theme = getTheme(false, useV3); - const color = getActiveTintColor({ activeColor, defaultColor, theme }); + 'returns $expected when activeColor: $activeColor', + ({ activeColor, expected }) => { + const theme = getTheme(false); + const color = getActiveTintColor({ activeColor, theme }); expect(color).toBe(expected); } ); @@ -495,17 +476,15 @@ describe('getActiveTintColor', () => { describe('getInactiveTintColor', () => { it.each` - inactiveColor | defaultColor | useV3 | expected - ${'#853D4B'} | ${'#fff'} | ${true} | ${'#853D4B'} - ${undefined} | ${'#fff'} | ${true} | ${MD3Colors.neutralVariant30} - ${undefined} | ${'#fff'} | ${false} | ${color('#fff').alpha(0.5).rgb().string()} + inactiveColor | expected + ${'#853D4B'} | ${'#853D4B'} + ${undefined} | ${getTheme(false).colors.onSurfaceVariant} `( - 'returns $expected when inactiveColor: $inactiveColor and useV3: $useV3', - ({ inactiveColor, defaultColor, useV3, expected }) => { - const theme = getTheme(false, useV3); + 'returns $expected when inactiveColor: $inactiveColor', + ({ inactiveColor, expected }) => { + const theme = getTheme(false); const color = getInactiveTintColor({ inactiveColor, - defaultColor, theme, }); expect(color).toBe(expected); @@ -515,22 +494,19 @@ describe('getInactiveTintColor', () => { describe('getLabelColor', () => { it.each` - tintColor | focused | defaultColor | useV3 | expected - ${'#FBF7DB'} | ${true} | ${'#fff'} | ${true} | ${'#FBF7DB'} - ${'#853D4B'} | ${true} | ${'#fff'} | ${true} | ${'#853D4B'} - ${undefined} | ${true} | ${'#fff'} | ${true} | ${MD3Colors.neutral10} - ${undefined} | ${false} | ${'#fff'} | ${true} | ${MD3Colors.neutralVariant30} - ${undefined} | ${false} | ${'#fff'} | ${false} | ${'#fff'} - ${undefined} | ${true} | ${'#fff'} | ${false} | ${'#fff'} + tintColor | focused | expected + ${'#FBF7DB'} | ${true} | ${'#FBF7DB'} + ${'#853D4B'} | ${true} | ${'#853D4B'} + ${undefined} | ${true} | ${getTheme(false).colors.onSurface} + ${undefined} | ${false} | ${getTheme(false).colors.onSurfaceVariant} `( - 'returns $expected when tintColor: $tintColor, focused: $focused useV3: $useV3', - ({ tintColor, focused, defaultColor, useV3, expected }) => { - const theme = getTheme(false, useV3); + 'returns $expected when tintColor: $tintColor, focused: $focused', + ({ tintColor, focused, expected }) => { + const theme = getTheme(false); const color = getLabelColor({ tintColor, hasColor: Boolean(tintColor), focused, - defaultColor, theme, }); expect(color).toBe(expected); diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index 8917eaca92..a7114f9ba5 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, pink500, white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/v3/baseColors'; import Button from '../Button/Button'; import { getButtonColors } from '../Button/utils'; +const pink500 = '#e91e63'; const styles = StyleSheet.create({ flexing: { @@ -465,35 +465,11 @@ describe('getButtonColors - background color', () => { it('should return correct theme color, for theme version 2, contained mode', () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode: 'contained', }) ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.primary, - }); - }); - - it('should return correct theme color, for theme version 2, when disabled, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'contained', - disabled: true, - }) - ).toMatchObject({ - backgroundColor: color(black).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct theme color, for theme version 2, when disabled, dark theme, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode: 'contained', - disabled: true, - }) - ).toMatchObject({ - backgroundColor: color(white).alpha(0.12).rgb().string(), + backgroundColor: getTheme(false).colors.primary, }); }); @@ -501,7 +477,7 @@ describe('getButtonColors - background color', () => { it(`should return correct theme color, for theme version 2, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, }) ).toMatchObject({ @@ -514,7 +490,7 @@ describe('getButtonColors - background color', () => { it(`should return correct theme color, for theme version 2, dark theme, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(true, false), + theme: getTheme(true), mode, }) ).toMatchObject({ @@ -527,7 +503,7 @@ describe('getButtonColors - background color', () => { it(`should return correct theme color, for theme version 2, when disabled, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, disabled: true, }) @@ -541,7 +517,7 @@ describe('getButtonColors - background color', () => { it(`should return correct theme color, for theme version 2, when disabled, dark theme, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(true, false), + theme: getTheme(true), mode, disabled: true, }) @@ -676,34 +652,10 @@ describe('getButtonColors - text color', () => { }); }); - it('should return correct theme text color, for theme version 2, when disabled, no matter what the mode is', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - disabled: true, - mode: 'text', - }) - ).toMatchObject({ - textColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct theme text color, for theme version 2, when disabled, dark theme, no matter what the mode is', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - disabled: true, - mode: 'text', - }) - ).toMatchObject({ - textColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme text color, for theme version 2, contained mode', () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode: 'contained', dark: true, }) @@ -716,11 +668,11 @@ describe('getButtonColors - text color', () => { it(`should return correct theme text color, for theme version 2, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, }) ).toMatchObject({ - textColor: getTheme(false, false).colors.primary, + textColor: getTheme(false).colors.primary, }); }) ); @@ -729,11 +681,11 @@ describe('getButtonColors - text color', () => { it(`should return correct theme text color, for theme version 2, dark theme, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(true, false), + theme: getTheme(true), mode, }) ).toMatchObject({ - textColor: getTheme(true, false).colors.primary, + textColor: getTheme(true).colors.primary, }); }) ); @@ -814,34 +766,12 @@ describe('getButtonColors - border color', () => { }) ); - it('should return correct border color, for theme version 2, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - - it('should return correct border color, for theme version 2, dark theme, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.29).rgb().string(), - }); - }); - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( (mode) => it(`should return transparent border, for theme version 2, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, }) ).toMatchObject({ @@ -855,7 +785,7 @@ describe('getButtonColors - border color', () => { it(`should return transparent border, for theme version 2, dark theme, ${mode} mode`, () => { expect( getButtonColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode, }) ).toMatchObject({ @@ -877,17 +807,6 @@ describe('getButtonColors - border width', () => { }); }); - it('should return correct border width, for theme version 2, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderWidth: StyleSheet.hairlineWidth, - }); - }); - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( (mode) => it(`should return correct border width, for ${mode} mode`, () => { diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx index 3da4aa2c51..770db1913e 100644 --- a/src/components/__tests__/Card/Card.test.tsx +++ b/src/components/__tests__/Card/Card.test.tsx @@ -2,10 +2,8 @@ import React from 'react'; import { Animated, StyleSheet, Text } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../../core/theming'; -import { black, white } from '../../../styles/themes/v2/colors'; import { MD3Colors } from '../../../styles/themes/v3/tokens'; import Button from '../../Button/Button'; import Card from '../../Card/Card'; @@ -197,7 +195,7 @@ describe('getCardColors - background color', () => { it('should return undefined, for theme version 2', () => { expect( getCardColors({ - theme: getTheme(false, false), + theme: getTheme(false), mode: undefined as any, }) ).toMatchObject({ backgroundColor: undefined }); @@ -213,28 +211,6 @@ describe('getCardColors - border color', () => { }) ).toMatchObject({ borderColor: getTheme().colors.outline }); }); - - it('should return correct color, for theme version 2, dark mode', () => { - expect( - getCardColors({ - theme: getTheme(true, false), - mode: undefined as any, - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct color, for theme version 2, light mode', () => { - expect( - getCardColors({ - theme: getTheme(false, false), - mode: undefined as any, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.12).rgb().string(), - }); - }); }); describe('getCardCoverStyle - border radius', () => { @@ -255,44 +231,6 @@ describe('getCardCoverStyle - border radius', () => { }) ).toMatchObject({ borderRadius: 3 * getTheme().roundness }); }); - - it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 0, - total: 1, - }) - ).toMatchObject({ borderRadius: getTheme(false, false).roundness }); - }); - - it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is other than 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 0, - total: 2, - }) - ).toMatchObject({ - borderTopLeftRadius: getTheme(false, false).roundness, - borderTopRightRadius: getTheme(false, false).roundness, - }); - }); - - it('should return correct border radius based on roundness, for theme version 2, when index is equal to total - 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 1, - total: 2, - }) - ).toMatchObject({ - borderBottomLeftRadius: getTheme(false, false).roundness, - }); - }); }); it('animated value changes correctly', () => { diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index f8b992bcbb..3325829520 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -163,7 +163,6 @@ exports[`can render leading checkbox control 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(29, 27, 32, 1)", "textAlign": "right", @@ -261,7 +260,6 @@ exports[`can render the Android checkbox on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(29, 27, 32, 1)", "textAlign": "left", @@ -478,7 +476,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(29, 27, 32, 1)", "textAlign": "left", @@ -659,7 +656,6 @@ exports[`renders unchecked 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(29, 27, 32, 1)", "textAlign": "left", diff --git a/src/components/__tests__/Checkbox/utils.test.tsx b/src/components/__tests__/Checkbox/utils.test.tsx index 580e3dbedf..c2620feff5 100644 --- a/src/components/__tests__/Checkbox/utils.test.tsx +++ b/src/components/__tests__/Checkbox/utils.test.tsx @@ -25,12 +25,12 @@ describe('getAndroidSelectionControlColor - ripple color', () => { it('should return correct disabled color, for theme version 2', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(false, false), + theme: getTheme(false), disabled: true, checked: false, }) ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) + rippleColor: color(getTheme(false).colors.onSurface) .alpha(0.16) .rgb() .string(), @@ -63,11 +63,11 @@ describe('getAndroidSelectionControlColor - ripple color', () => { it('should return theme color, for theme version 2', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(false, false), + theme: getTheme(false), checked: false, }) ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.accent) + rippleColor: color(getTheme(false).colors.primary) .fade(0.32) .rgb() .string(), @@ -91,12 +91,12 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { it('should return correct disabled color, for theme version 2', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(false, false), + theme: getTheme(false), disabled: true, checked: false, }) ).toMatchObject({ - selectionControlColor: getTheme(false, false).colors.disabled, + selectionControlColor: getTheme(false).colors.onSurfaceDisabled, }); }); @@ -126,11 +126,11 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { it('should return theme color, for theme version 2, checked', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(false, false), + theme: getTheme(false), checked: true, }) ).toMatchObject({ - selectionControlColor: getTheme(false, false).colors.accent, + selectionControlColor: getTheme(false).colors.primary, }); }); @@ -160,28 +160,22 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { it('should return theme color, for theme version 2, unchecked, dark mode', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(true, false), + theme: getTheme(true), checked: false, }) ).toMatchObject({ - selectionControlColor: color(getTheme(true, false).colors.text) - .alpha(0.7) - .rgb() - .string(), + selectionControlColor: getTheme(true).colors.onSurfaceVariant, }); }); it('should return theme color, for theme version 2, unchecked, light mode', () => { expect( getAndroidSelectionControlColor({ - theme: getTheme(false, false), + theme: getTheme(false), checked: false, }) ).toMatchObject({ - selectionControlColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), + selectionControlColor: getTheme(false).colors.onSurfaceVariant, }); }); }); @@ -204,11 +198,11 @@ describe('getSelectionControlIOSColor - ripple color', () => { it('should return correct disabled color, for theme version 2', () => { expect( getSelectionControlIOSColor({ - theme: getTheme(false, false), + theme: getTheme(false), disabled: true, }) ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) + rippleColor: color(getTheme(false).colors.onSurface) .alpha(0.16) .rgb() .string(), @@ -239,10 +233,10 @@ describe('getSelectionControlIOSColor - ripple color', () => { it('should return theme color, for theme version 2', () => { expect( getSelectionControlIOSColor({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.accent) + rippleColor: color(getTheme(false).colors.primary) .fade(0.32) .rgb() .string(), @@ -265,11 +259,11 @@ describe('getSelectionControlIOSColor - checked color', () => { it('should return correct disabled color, for theme version 2', () => { expect( getSelectionControlIOSColor({ - theme: getTheme(false, false), + theme: getTheme(false), disabled: true, }) ).toMatchObject({ - checkedColor: getTheme(false, false).colors.disabled, + checkedColor: getTheme(false).colors.onSurfaceDisabled, }); }); @@ -297,10 +291,10 @@ describe('getSelectionControlIOSColor - checked color', () => { it('should return theme color, for theme version 2, checked', () => { expect( getSelectionControlIOSColor({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - checkedColor: getTheme(false, false).colors.accent, + checkedColor: getTheme(false).colors.primary, }); }); }); diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index ca3055e35b..e71073b44a 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -5,7 +5,6 @@ import { act, render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import Chip from '../Chip/Chip'; import { getChipColors } from '../Chip/helpers'; @@ -108,11 +107,11 @@ describe('getChipColors - text color', () => { expect( getChipColors({ disabled: true, - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - textColor: getTheme(false, false).colors.disabled, + textColor: getTheme(false).colors.onSurfaceDisabled, }); }); @@ -141,14 +140,11 @@ describe('getChipColors - text color', () => { it('should return correct theme color, for theme version 2', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - textColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), + textColor: getTheme(false).colors.onSecondaryContainer, }); }); @@ -167,12 +163,12 @@ describe('getChipColors - text color', () => { it('should return custom color, for theme version 2', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), selectedColor: 'purple', isOutlined: false, }) ).toMatchObject({ - textColor: color('purple').alpha(0.87).rgb().string(), + textColor: 'purple', }); }); }); @@ -194,11 +190,11 @@ describe('getChipColors - icon color', () => { expect( getChipColors({ disabled: true, - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - iconColor: getTheme(false, false).colors.disabled, + iconColor: getTheme(false).colors.onSurfaceDisabled, }); }); @@ -227,14 +223,11 @@ describe('getChipColors - icon color', () => { it('should return correct theme color, for theme version 2', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - iconColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), + iconColor: getTheme(false).colors.onSecondaryContainer, }); }); @@ -253,12 +246,12 @@ describe('getChipColors - icon color', () => { it('should return custom color, for theme version 2', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), selectedColor: 'purple', isOutlined: false, }) ).toMatchObject({ - iconColor: color('purple').alpha(0.54).rgb().string(), + iconColor: 'purple', }); }); }); @@ -307,72 +300,84 @@ describe('getChipColors - ripple color', () => { it('should return custom color, for theme version 2', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), selectedColor: 'purple', isOutlined: false, }) ).toMatchObject({ - rippleColor: color('purple').fade(0.5).rgb().string(), + rippleColor: color('purple').alpha(0.12).rgb().string(), }); }); it('should return custom color, for theme version 2, dark mode, outline mode, customBackgroundColor', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), customBackgroundColor: 'purple', isOutlined: true, }) ).toMatchObject({ - rippleColor: color('purple').lighten(0.2).rgb().string(), + rippleColor: color(getTheme(true).colors.onSurfaceVariant) + .alpha(0.12) + .rgb() + .string(), }); }); it('should return custom color, for theme version 2, dark mode, flat mode, customBackgroundColor', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), customBackgroundColor: 'purple', isOutlined: false, }) ).toMatchObject({ - rippleColor: color('purple').lighten(0.4).rgb().string(), + rippleColor: color(getTheme(true).colors.onSecondaryContainer) + .alpha(0.12) + .rgb() + .string(), }); }); it('should return custom color, for theme version 2, light mode, outline mode, customBackgroundColor', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), customBackgroundColor: 'purple', isOutlined: true, }) ).toMatchObject({ - rippleColor: color('purple').darken(0.08).rgb().string(), + rippleColor: color(getTheme(false).colors.onSurfaceVariant) + .alpha(0.12) + .rgb() + .string(), }); }); it('should return custom color, for theme version 2, light mode, flat mode, customBackgroundColor', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), customBackgroundColor: 'purple', isOutlined: false, }) ).toMatchObject({ - rippleColor: color('purple').darken(0.2).rgb().string(), + rippleColor: color(getTheme(false).colors.onSecondaryContainer) + .alpha(0.12) + .rgb() + .string(), }); }); it('should return theme color, for theme version 2, light mode, outline mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: true, }) ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.surface) - .darken(0.08) + rippleColor: color(getTheme(false).colors.onSurfaceVariant) + .alpha(0.12) .rgb() .string(), }); @@ -381,23 +386,26 @@ describe('getChipColors - ripple color', () => { it('should return theme color, for theme version 2, light mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - rippleColor: color('#ebebeb').darken(0.2).rgb().string(), + rippleColor: color(getTheme(false).colors.onSecondaryContainer) + .alpha(0.12) + .rgb() + .string(), }); }); it('should return theme color, for theme version 2, dark mode, outline mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: true, }) ).toMatchObject({ - rippleColor: color(getTheme(true, false).colors.surface) - .lighten(0.2) + rippleColor: color(getTheme(true).colors.onSurfaceVariant) + .alpha(0.12) .rgb() .string(), }); @@ -406,11 +414,14 @@ describe('getChipColors - ripple color', () => { it('should return theme color, for theme version 2, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: false, }) ).toMatchObject({ - rippleColor: color('#383838').lighten(0.4).rgb().string(), + rippleColor: color(getTheme(true).colors.onSecondaryContainer) + .alpha(0.12) + .rgb() + .string(), }); }); }); @@ -509,60 +520,72 @@ describe('getChipColor - selected background color', () => { it('should return custom color, for theme version 2, light mode, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), customBackgroundColor: 'purple', isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.08).rgb().string(), + selectedBackgroundColor: color('purple') + .mix(color(getTheme(false).colors.onSurfaceVariant), 0) + .rgb() + .string(), }); }); it('should return custom color, for theme version 2, light mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), customBackgroundColor: 'purple', isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.2).rgb().string(), + selectedBackgroundColor: color('purple') + .mix(color(getTheme(false).colors.onSecondaryContainer), 0) + .rgb() + .string(), }); }); it('should return custom color, for theme version 2, dark mode, outlined mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), customBackgroundColor: 'purple', isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.2).rgb().string(), + selectedBackgroundColor: color('purple') + .mix(color(getTheme(true).colors.onSurfaceVariant), 0) + .rgb() + .string(), }); }); it('should return custom color, for theme version 2, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), customBackgroundColor: 'purple', isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.4).rgb().string(), + selectedBackgroundColor: color('purple') + .mix(color(getTheme(true).colors.onSecondaryContainer), 0) + .rgb() + .string(), }); }); it('should return theme color, for theme version 2, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme(false, false).colors.surface) - .darken(0.08) + selectedBackgroundColor: color(getTheme(false).colors.surface) + .mix(color(getTheme(false).colors.onSurfaceVariant), 0) .rgb() .string(), }); @@ -571,22 +594,28 @@ describe('getChipColor - selected background color', () => { it('should return theme color, for theme version 2, light mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('#ebebeb').darken(0.2).rgb().string(), + selectedBackgroundColor: color(getTheme(false).colors.secondaryContainer) + .mix(color(getTheme(false).colors.onSecondaryContainer), 0) + .rgb() + .string(), }); }); it('should return theme color, for theme version 2, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('#383838').lighten(0.4).rgb().string(), + selectedBackgroundColor: color(getTheme(true).colors.secondaryContainer) + .mix(color(getTheme(true).colors.onSecondaryContainer), 0) + .rgb() + .string(), }); }); }); @@ -629,33 +658,33 @@ describe('getChipColor - background color', () => { it('should return theme color, for theme version 2, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: true, }) ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.surface, + backgroundColor: getTheme(false).colors.surface, }); }); it('should return theme color, for theme version 2, light mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - backgroundColor: '#ebebeb', + backgroundColor: getTheme(false).colors.secondaryContainer, }); }); it('should return theme color, for theme version 2, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: false, }) ).toMatchObject({ - backgroundColor: '#383838', + backgroundColor: getTheme(true).colors.secondaryContainer, }); }); }); @@ -699,7 +728,7 @@ describe('getChipColor - border color', () => { it('should return custom color, for theme version 2, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), selectedColor: 'purple', isOutlined: true, }) @@ -711,56 +740,56 @@ describe('getChipColor - border color', () => { it('should return custom color, for theme version 2, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), customBackgroundColor: 'purple', isOutlined: false, }) ).toMatchObject({ - borderColor: 'purple', + borderColor: 'transparent', }); }); it('should return theme color, for theme version 2, light mode, outlined mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: true, }) ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), + borderColor: getTheme(false).colors.outline, }); }); it('should return theme color, for theme version 2, dark mode, outlined mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: true, }) ).toMatchObject({ - borderColor: color(white).alpha(0.29).rgb().string(), + borderColor: getTheme(true).colors.outline, }); }); it('should return theme background color, for theme version 2, light mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(false, false), + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ - borderColor: '#ebebeb', + borderColor: 'transparent', }); }); it('should return theme background color, for theme version 2, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(true, false), + theme: getTheme(true), isOutlined: false, }) ).toMatchObject({ - borderColor: '#383838', + borderColor: 'transparent', }); }); }); diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx index d59639efc1..00f7bbdbc2 100644 --- a/src/components/__tests__/FAB.test.tsx +++ b/src/components/__tests__/FAB.test.tsx @@ -2,12 +2,9 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { act } from 'react-test-renderer'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; -import getContrastingColor from '../../utils/getContrastingColor'; import FAB from '../FAB'; import { getFABColors } from '../FAB/utils'; @@ -214,24 +211,24 @@ describe('getFABColors - background color', () => { it('should return correct disabled color, for theme version 2, light mode', () => { expect( getFABColors({ - theme: getTheme(false, false), + theme: getTheme(false), disabled: true, variant: 'primary', }) ).toMatchObject({ - backgroundColor: color(black).alpha(0.12).rgb().string(), + backgroundColor: getTheme(false).colors.surfaceDisabled, }); }); it('should return correct disabled color, for theme version 2, dark mode', () => { expect( getFABColors({ - theme: getTheme(true, false), + theme: getTheme(true), disabled: true, variant: 'primary', }) ).toMatchObject({ - backgroundColor: color(white).alpha(0.12).rgb().string(), + backgroundColor: getTheme(true).colors.surfaceDisabled, }); }); @@ -282,11 +279,11 @@ describe('getFABColors - background color', () => { it('should return correct theme color, for theme version 2', () => { expect( getFABColors({ - theme: getTheme(false, false), + theme: getTheme(false), variant: 'primary', }) ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.accent, + backgroundColor: getTheme(false).colors.primaryContainer, }); }); }); @@ -319,24 +316,24 @@ describe('getFABColors - foreground color', () => { it('should return correct disabled color, for theme version 2, light mode', () => { expect( getFABColors({ - theme: getTheme(false, false), + theme: getTheme(false), disabled: true, variant: 'primary', }) ).toMatchObject({ - foregroundColor: color(black).alpha(0.32).rgb().string(), + foregroundColor: getTheme(false).colors.onSurfaceDisabled, }); }); it('should return correct disabled color, for theme version 2, dark mode', () => { expect( getFABColors({ - theme: getTheme(true, false), + theme: getTheme(true), disabled: true, variant: 'primary', }) ).toMatchObject({ - foregroundColor: color(white).alpha(0.32).rgb().string(), + foregroundColor: getTheme(true).colors.onSurfaceDisabled, }); }); @@ -387,15 +384,11 @@ describe('getFABColors - foreground color', () => { it('should return correct theme color, for theme version 2', () => { expect( getFABColors({ - theme: getTheme(false, false), + theme: getTheme(false), variant: 'primary', }) ).toMatchObject({ - foregroundColor: getContrastingColor( - getTheme(false, false).colors.accent, - white, - 'rgba(0, 0, 0, .54)' - ), + foregroundColor: getTheme(false).colors.onPrimaryContainer, }); }); }); diff --git a/src/components/__tests__/FABGroup.test.tsx b/src/components/__tests__/FABGroup.test.tsx index 50cc0a7173..18177e9032 100644 --- a/src/components/__tests__/FABGroup.test.tsx +++ b/src/components/__tests__/FABGroup.test.tsx @@ -36,10 +36,13 @@ describe('getFABGroupColors - backdrop color', () => { it('should return correct backdrop color, for theme version 2', () => { expect( getFABGroupColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - backdropColor: getTheme(false, false).colors.backdrop, + backdropColor: color(getTheme(false).colors.background) + .alpha(0.95) + .rgb() + .string(), }); }); }); @@ -58,23 +61,20 @@ describe('getFABGroupColors - label color', () => { it('should return correct theme color, dark mode, for theme version 2', () => { expect( getFABGroupColors({ - theme: getTheme(true, false), + theme: getTheme(true), }) ).toMatchObject({ - labelColor: getTheme(true, false).colors.text, + labelColor: getTheme(true).colors.onSurface, }); }); it('should return correct theme color, light mode, for theme version 2', () => { expect( getFABGroupColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - labelColor: color(getTheme(false, false).colors.text) - .fade(0.54) - .rgb() - .string(), + labelColor: getTheme(false).colors.onSurface, }); }); }); @@ -93,10 +93,10 @@ describe('getFABGroupColors - stacked FAB background color', () => { it('should return correct theme color, dark mode, for theme version 2', () => { expect( getFABGroupColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - stackedFABBackgroundColor: getTheme(false, false).colors.surface, + stackedFABBackgroundColor: getTheme(false).colors.elevation.level3, }); }); }); diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index 381ea5ae24..c622bcaaf8 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -5,7 +5,7 @@ import { act, render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { pink500 } from '../../styles/themes/v2/colors'; +import { pink500 } from '../../styles/themes/v3/baseColors'; import IconButton from '../IconButton/IconButton'; import { getIconButtonColor } from '../IconButton/utils'; @@ -194,10 +194,10 @@ describe('getIconButtonColor - icon color', () => { it('should return theme icon color, for theme version 2', () => { expect( getIconButtonColor({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - iconColor: getTheme(false, false).colors.text, + iconColor: getTheme(false).colors.onSurfaceVariant, }); }); }); @@ -317,13 +317,13 @@ describe('getIconButtonColor - border color', () => { }); }); - it('should return undefined, for theme version 2', () => { + it('should return theme outline color, for theme version 2', () => { expect( getIconButtonColor({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - borderColor: undefined, + borderColor: getTheme(false).colors.outline, }); }); }); @@ -345,11 +345,11 @@ describe('getIconButtonColor - ripple color', () => { it('should return theme color, for theme version 2', () => { expect( getIconButtonColor({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.32) + rippleColor: color(getTheme(false).colors.onSurfaceVariant) + .alpha(0.12) .rgb() .string(), }); diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index 0c24538348..b6dec98543 100644 --- a/src/components/__tests__/ListAccordion.test.tsx +++ b/src/components/__tests__/ListAccordion.test.tsx @@ -5,7 +5,7 @@ import { render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { red500 } from '../../styles/themes/v2/colors'; +import { red500 } from '../../styles/themes/v3/baseColors'; import ListAccordion from '../List/ListAccordion'; import ListAccordionGroup from '../List/ListAccordionGroup'; import ListIcon from '../List/ListIcon'; @@ -129,13 +129,10 @@ describe('getAccordionColors - title color', () => { it('should return theme color, for theme version 2', () => { expect( getAccordionColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - titleColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), + titleColor: getTheme(false).colors.onSurface, }); }); }); @@ -154,13 +151,10 @@ describe('getAccordionColors - description color', () => { it('should return theme color, for theme version 2', () => { expect( getAccordionColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - descriptionColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), + descriptionColor: getTheme(false).colors.onSurfaceVariant, }); }); }); @@ -179,13 +173,10 @@ describe('getAccordionColors - title text color', () => { it('should return theme color, for theme version 2', () => { expect( getAccordionColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - titleTextColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), + titleTextColor: getTheme(false).colors.onSurface, }); }); @@ -216,17 +207,15 @@ describe('getAccordionColors - ripple color', () => { }); it('should return theme color, for theme version 2', () => { - const v2TextColor = color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(); - expect( getAccordionColors({ - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ - rippleColor: color(v2TextColor).alpha(0.12).rgb().string(), + rippleColor: color(getTheme(false).colors.onSurface) + .alpha(0.12) + .rgb() + .string(), }); }); diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index 036697f9ec..c8d828d1f5 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -4,7 +4,7 @@ import { Text, View } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v2/colors'; +import { red500 } from '../../styles/themes/v3/baseColors'; import Chip from '../Chip/Chip'; import IconButton from '../IconButton/IconButton'; import ListIcon from '../List/ListIcon'; diff --git a/src/components/__tests__/ListSection.test.tsx b/src/components/__tests__/ListSection.test.tsx index 8cc1578b8f..96f1a2dbdc 100644 --- a/src/components/__tests__/ListSection.test.tsx +++ b/src/components/__tests__/ListSection.test.tsx @@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native'; import { render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v2/colors'; +const red500 = '#f44336'; import ListIcon from '../List/ListIcon'; import ListItem from '../List/ListItem'; import ListSection from '../List/ListSection'; diff --git a/src/components/__tests__/ListUtils.test.tsx b/src/components/__tests__/ListUtils.test.tsx index 4aeefb6ca9..cf7486707c 100644 --- a/src/components/__tests__/ListUtils.test.tsx +++ b/src/components/__tests__/ListUtils.test.tsx @@ -5,18 +5,11 @@ import { getLeftStyles, getRightStyles } from '../List/utils'; import Text from '../Typography/Text'; const styles = StyleSheet.create({ - leftItem: { - marginLeft: 0, - marginRight: 16, - }, leftItemV3: { marginLeft: 16, marginRight: 0, alignSelf: 'center', }, - rightItem: { - marginRight: 0, - }, rightItemV3: { marginLeft: 16, marginRight: 0, @@ -30,23 +23,13 @@ const description = Test; * ********************** getLeftStyles ********************** * */ -it('returns styles for left item without description for V2', () => { - const style = getLeftStyles(false, null, false); - expect(style).toStrictEqual({ ...styles.leftItem, marginVertical: 0 }); -}); - -it('returns styles for left item w/ desctiption for V2', () => { - const style = getLeftStyles(false, description, false); - expect(style).toStrictEqual(styles.leftItem); -}); - -it('returns styles for left item without description for V3', () => { - const style = getLeftStyles(false, null, true); +it('returns styles for left item without description', () => { + const style = getLeftStyles(false, null); expect(style).toStrictEqual({ ...styles.leftItemV3, marginVertical: 0 }); }); -it('returns styles for left item w/ desctiption for V3', () => { - const style = getLeftStyles(true, description, true); +it('returns styles for left item w/ description', () => { + const style = getLeftStyles(true, description); expect(style).toStrictEqual({ ...styles.leftItemV3, alignSelf: 'flex-start', @@ -57,23 +40,13 @@ it('returns styles for left item w/ desctiption for V3', () => { * ********************** getRightStyles ********************** * */ -it('returns styles for right item without description for V2', () => { - const style = getRightStyles(false, null, false); - expect(style).toStrictEqual({ ...styles.rightItem, marginVertical: 0 }); -}); - -it('returns styles for right item w/ desctiption for V2', () => { - const style = getRightStyles(false, description, false); - expect(style).toStrictEqual(styles.rightItem); -}); - -it('returns styles for right item without description for V3', () => { - const style = getRightStyles(false, null, true); +it('returns styles for right item without description', () => { + const style = getRightStyles(false, null); expect(style).toStrictEqual({ ...styles.rightItemV3, marginVertical: 0 }); }); -it('returns styles for right item w/ desctiption for V3', () => { - const style = getRightStyles(true, description, true); +it('returns styles for right item w/ description', () => { + const style = getRightStyles(true, description); expect(style).toStrictEqual({ ...styles.rightItemV3, alignSelf: 'flex-start', diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx index 29397d1262..8e0f7744fb 100644 --- a/src/components/__tests__/Menu.test.tsx +++ b/src/components/__tests__/Menu.test.tsx @@ -70,7 +70,7 @@ it('renders menu with content styles', () => { ([0, 1, 2, 3, 4, 5] as MD3Elevation[]).forEach((elevation) => it(`renders menu with background color based on elevation value = ${elevation}`, () => { - const theme = getTheme(false, true); + const theme = getTheme(false); const { getByTestId } = render( diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index 7413f43622..d482800582 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -4,7 +4,6 @@ import { render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import Menu from '../Menu/Menu'; import { getMenuItemColor } from '../Menu/utils'; @@ -75,28 +74,6 @@ describe('getMenuItemColor - title color', () => { ).toMatchObject({ titleColor: getTheme().colors.onSurfaceDisabled }); }); - it('should return disabled color if disabled, for theme version 2, light theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - titleColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return disabled color if disabled, for theme version 2, dark theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - titleColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getMenuItemColor({ @@ -106,19 +83,6 @@ describe('getMenuItemColor - title color', () => { titleColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - titleColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); }); describe('getMenuItemColor - icon color', () => { @@ -131,28 +95,6 @@ describe('getMenuItemColor - icon color', () => { ).toMatchObject({ iconColor: getTheme().colors.onSurfaceDisabled }); }); - it('should return disabled color if disabled, for theme version 2, light theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - iconColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return disabled color if disabled, for theme version 2, dark theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - iconColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getMenuItemColor({ @@ -162,19 +104,6 @@ describe('getMenuItemColor - icon color', () => { iconColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - iconColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); }); describe('getMenuItemColor - ripple color', () => { @@ -190,14 +119,4 @@ describe('getMenuItemColor - ripple color', () => { .string(), }); }); - - it('should return undefined, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: undefined, - }); - }); }); diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index 75d34f5545..de667249ae 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -161,7 +161,6 @@ exports[`can render leading radio button control 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(29, 27, 32, 1)", "textAlign": "right", @@ -256,7 +255,6 @@ exports[`can render the Android radio button on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(29, 27, 32, 1)", "textAlign": "left", @@ -408,7 +406,6 @@ exports[`can render the iOS radio button on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(29, 27, 32, 1)", "textAlign": "left", @@ -586,7 +583,6 @@ exports[`renders unchecked 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(29, 27, 32, 1)", "textAlign": "left", diff --git a/src/components/__tests__/SegmentedButton.test.tsx b/src/components/__tests__/SegmentedButton.test.tsx index d36babb5bb..0e5678072b 100644 --- a/src/components/__tests__/SegmentedButton.test.tsx +++ b/src/components/__tests__/SegmentedButton.test.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { black } from '../../styles/themes/v2/colors'; import SegmentedButtons from '../SegmentedButtons/SegmentedButtons'; import { getDisabledSegmentedButtonStyle, @@ -56,24 +54,18 @@ it('renders checked segmented button with selected check', async () => { describe('getSegmentedButtonColors', () => { it.each` - theme | disabled | checked | checkedColor | uncheckedColor | expected - ${getTheme()} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSecondaryContainer} - ${getTheme()} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} - ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} - ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} - ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} - ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} - ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} - ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme().colors.onSurface} - ${getTheme()} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme().colors.onSecondaryContainer} - ${getTheme(false, false)} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.disabled} - ${getTheme(false, false)} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.disabled} - ${getTheme(false, false)} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme(false, false).colors.primary} + theme | disabled | checked | checkedColor | uncheckedColor | expected + ${getTheme()} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSecondaryContainer} + ${getTheme()} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} + ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} + ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} + ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} + ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} + ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme().colors.onSecondaryContainer} `( - 'returns $expected when disabled: $disabled, checked: $checked, checkedColor is $checkedColor and uncheckedColor is $uncheckedColor and isV3: $theme.isV3', + 'returns $expected when disabled: $disabled, checked: $checked, checkedColor is $checkedColor and uncheckedColor is $uncheckedColor', ({ theme, disabled, checked, checkedColor, uncheckedColor, expected }) => { expect( getSegmentedButtonColors({ @@ -97,25 +89,10 @@ describe('getSegmentedButtonColors', () => { ).toMatchObject({ backgroundColor: getTheme().colors.secondaryContainer }); }); - it('should return correct background color when checked and theme version 2', () => { + it('should return correct background color when unchecked', () => { expect( getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: true, - }) - ).toMatchObject({ - backgroundColor: color(getTheme(false, false).colors.primary) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return correct background color when uncheked (V3 & V2)', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), + theme: getTheme(), disabled: false, checked: false, }) @@ -136,18 +113,6 @@ describe('getSegmentedButtonColors', () => { }); }); - it('should return correct border color with theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: false, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - it('should return correct border color when disabled and theme version 3', () => { expect( getSegmentedButtonColors({ @@ -172,18 +137,6 @@ describe('getSegmentedButtonColors', () => { }); }); - it('should return correct textColor with theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.primary, - }); - }); - it('should return correct textColor when disabled and theme version 3', () => { expect( getSegmentedButtonColors({ @@ -195,18 +148,6 @@ describe('getSegmentedButtonColors', () => { textColor: getTheme().colors.onSurfaceDisabled, }); }); - - it('should return correct textColor when disabled and theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.disabled, - }); - }); }); describe('getDisabledSegmentedButtonBorderWidth', () => { diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx index f520faa466..0a9f7c15d4 100644 --- a/src/components/__tests__/Snackbar.test.tsx +++ b/src/components/__tests__/Snackbar.test.tsx @@ -3,9 +3,11 @@ import { Animated, StyleSheet, Text, View } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import { red200, white } from '../../styles/themes/v2/colors'; +import { white } from '../../styles/themes/v3/baseColors'; import Snackbar from '../Snackbar'; +const red200 = '#ef9a9a'; + const styles = StyleSheet.create({ snackContent: { flexDirection: 'row', diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx index e475b9a166..3317926d38 100644 --- a/src/components/__tests__/Switch.test.tsx +++ b/src/components/__tests__/Switch.test.tsx @@ -10,10 +10,10 @@ import { black, grey400, grey50, + grey700, grey800, pink500, - grey700, -} from '../../styles/themes/v2/colors'; +} from '../../styles/themes/v3/baseColors'; import Switch from '../Switch/Switch'; import { getSwitchColor } from '../Switch/utils'; @@ -62,16 +62,6 @@ describe('getSwitchColor - checked color', () => { checkedColor: getTheme().colors.primary, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getSwitchColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - checkedColor: getTheme(false, false).colors.accent, - }); - }); }); describe('getSwitchColor - thumb tint color', () => { @@ -163,24 +153,12 @@ describe('getSwitchColor - on tint color', () => { }); }); - it('should return checked color for iOS platform, for theme version 2', () => { - Platform.OS = 'ios'; - - expect( - getSwitchColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - onTintColor: getTheme(false, false).colors.accent, - }); - }); - it('should return custom color for iOS platform', () => { Platform.OS = 'ios'; expect( getSwitchColor({ - theme: getTheme(false, false), + theme: getTheme(false), color: 'purple', }) ).toMatchObject({ @@ -201,17 +179,6 @@ describe('getSwitchColor - on tint color', () => { }); }); - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getSwitchColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - onTintColor: color(white).alpha(0.1).rgb().string(), - }); - }); - it('should return correct disabled color, light mode', () => { expect( getSwitchColor({ diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index e190a537d6..f0c25a3868 100644 --- a/src/components/__tests__/TextInput.test.tsx +++ b/src/components/__tests__/TextInput.test.tsx @@ -6,7 +6,7 @@ import { fireEvent, render } from '@testing-library/react-native'; import color from 'color'; import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming'; -import { red500 } from '../../styles/themes/v2/colors'; +const red500 = '#f44336'; import { getFlatInputColors, getOutlinedInputColors, @@ -551,17 +551,6 @@ describe('getFlatInputColor - underline color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - underlineColorCustom: 'transparent', - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -572,16 +561,6 @@ describe('getFlatInputColor - underline color', () => { }); }); - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - underlineColorCustom: getTheme(false, false).colors.disabled, - }); - }); - it('should return custom color, no matter what the theme is', () => { expect( getFlatInputColors({ @@ -595,7 +574,7 @@ describe('getFlatInputColor - underline color', () => { expect( getFlatInputColors({ underlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ underlineColorCustom: 'beige', @@ -617,7 +596,7 @@ describe('getFlatInputColor - input text color', () => { expect( getOutlinedInputColors({ textColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ inputTextColor: 'beige', @@ -635,20 +614,6 @@ describe('getFlatInputColor - input text color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -658,16 +623,6 @@ describe('getFlatInputColor - input text color', () => { inputTextColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: getTheme(false, false).colors.text, - }); - }); }); describe('getFlatInputColor - placeholder color', () => { @@ -682,17 +637,6 @@ describe('getFlatInputColor - placeholder color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -702,16 +646,6 @@ describe('getFlatInputColor - placeholder color', () => { placeholderColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getFlatInputColor - background color', () => { @@ -740,17 +674,6 @@ describe('getFlatInputColor - background color', () => { }); }); - it('should return undefined when disabled, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - backgroundColor: undefined, - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -760,32 +683,6 @@ describe('getFlatInputColor - background color', () => { backgroundColor: getTheme().colors.surfaceVariant, }); }); - - it('should return correct theme color, for theme version 2, light mode', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - backgroundColor: color(getTheme(false, false).colors?.background) - .darken(0.06) - .rgb() - .string(), - }); - }); - - it('should return correct theme color, for theme version 2, dark mode', () => { - expect( - getFlatInputColors({ - theme: getTheme(true, false), - }) - ).toMatchObject({ - backgroundColor: color(getTheme(true, false).colors?.background) - .lighten(0.24) - .rgb() - .string(), - }); - }); }); describe('getFlatInputColor - error color', () => { @@ -802,10 +699,10 @@ describe('getFlatInputColor - error color', () => { expect( getFlatInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - errorColor: getTheme(false, true).colors.error, + errorColor: getTheme(false).colors.error, }); }); }); @@ -822,20 +719,6 @@ describe('getFlatInputColor - active color', () => { }); }); - it('should return disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct active color, if error, no matter what the theme is', () => { expect( getFlatInputColors({ @@ -849,10 +732,10 @@ describe('getFlatInputColor - active color', () => { expect( getFlatInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.error, + activeColor: getTheme(false).colors.error, }); }); @@ -869,7 +752,7 @@ describe('getFlatInputColor - active color', () => { expect( getFlatInputColors({ activeUnderlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ activeColor: 'beige', @@ -889,10 +772,10 @@ describe('getFlatInputColor - active color', () => { it('should return theme active color, for theme version 2', () => { expect( getFlatInputColors({ - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.primary, + activeColor: getTheme(false).colors.primary, }); }); }); @@ -920,29 +803,6 @@ describe('getOutlinedInputColors - outline color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: getTheme(false, false).colors.disabled, - }); - }); - - it('should return custom color as disabled, when it is transparent, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - customOutlineColor: 'transparent', - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: 'transparent', - }); - }); - it('should return custom color, if not disabled, no matter what the theme is', () => { expect( getOutlinedInputColors({ @@ -956,7 +816,7 @@ describe('getOutlinedInputColors - outline color', () => { expect( getOutlinedInputColors({ customOutlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ outlineColor: 'beige', @@ -972,16 +832,6 @@ describe('getOutlinedInputColors - outline color', () => { outlineColor: getTheme().colors.outline, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getOutlinedInputColors - input text color', () => { @@ -996,20 +846,6 @@ describe('getOutlinedInputColors - input text color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getOutlinedInputColors({ @@ -1019,16 +855,6 @@ describe('getOutlinedInputColors - input text color', () => { inputTextColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: getTheme(false, false).colors.text, - }); - }); }); describe('getOutlinedInputColors - placeholder color', () => { @@ -1043,17 +869,6 @@ describe('getOutlinedInputColors - placeholder color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getOutlinedInputColors({ @@ -1063,16 +878,6 @@ describe('getOutlinedInputColors - placeholder color', () => { placeholderColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getOutlinedInputColors - error color', () => { @@ -1089,10 +894,10 @@ describe('getOutlinedInputColors - error color', () => { expect( getOutlinedInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - errorColor: getTheme(false, true).colors.error, + errorColor: getTheme(false).colors.error, }); }); }); @@ -1109,20 +914,6 @@ describe('getOutlinedInputColors - active color', () => { }); }); - it('should return disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct active color, if error, no matter what the theme is', () => { expect( getOutlinedInputColors({ @@ -1136,10 +927,10 @@ describe('getOutlinedInputColors - active color', () => { expect( getOutlinedInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.error, + activeColor: getTheme(false).colors.error, }); }); @@ -1156,7 +947,7 @@ describe('getOutlinedInputColors - active color', () => { expect( getOutlinedInputColors({ activeOutlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(false), }) ).toMatchObject({ activeColor: 'beige', @@ -1176,10 +967,10 @@ describe('getOutlinedInputColors - active color', () => { it('should return theme active color, for theme version 2', () => { expect( getOutlinedInputColors({ - theme: getTheme(false, true), + theme: getTheme(false), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.primary, + activeColor: getTheme(false).colors.primary, }); }); }); diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx index 3ab234d0f3..a0e2bbafcb 100644 --- a/src/components/__tests__/ToggleButton.test.tsx +++ b/src/components/__tests__/ToggleButton.test.tsx @@ -68,18 +68,6 @@ describe('getToggleButtonColor', () => { ); }); - it('should return correct color when checked and theme version 2', () => { - expect( - getToggleButtonColor({ theme: getTheme(false, false), checked: true }) - ).toBe('rgba(0, 0, 0, .08)'); - }); - - it('should return correct color when checked and theme version 2, dark theme', () => { - expect( - getToggleButtonColor({ theme: getTheme(true, false), checked: true }) - ).toBe('rgba(255, 255, 255, .12)'); - }); - it('should return transparent color when not checked', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: false })).toBe( 'transparent' diff --git a/src/components/__tests__/Typography/Caption.test.tsx b/src/components/__tests__/Typography/Caption.test.tsx deleted file mode 100644 index b85bee50d4..0000000000 --- a/src/components/__tests__/Typography/Caption.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { StyleSheet } from 'react-native'; - -import { render } from '@testing-library/react-native'; - -import { red500 } from '../../../styles/themes/v2/colors'; -import Caption from '../../Typography/v2/Caption'; - -const style = StyleSheet.create({ - caption: { - fontSize: 20, - color: red500, - }, -}); - -it('renders caption with children as content', () => { - const tree = render(Caption content).toJSON(); - - expect(tree).toMatchSnapshot(); -}); - -it('renders caption applying style', () => { - const tree = render( - Big and red caption - ).toJSON(); - - expect(tree).toMatchSnapshot(); -}); diff --git a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap deleted file mode 100644 index 8433f85658..0000000000 --- a/src/components/__tests__/Typography/__snapshots__/Caption.test.tsx.snap +++ /dev/null @@ -1,74 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders caption applying style 1`] = ` - - Big and red caption - -`; - -exports[`renders caption with children as content 1`] = ` - - Caption content - -`; diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index bebf3b8726..5a1456e0f5 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -95,7 +95,7 @@ exports[`render visible banner, with custom theme 1`] = ` "margin": 8, }, { - "color": "rgba(29, 27, 32, 1)", + "color": "#00f", }, ], ] @@ -234,7 +234,6 @@ exports[`render visible banner, with custom theme 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -657,7 +656,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -927,7 +925,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -1077,7 +1074,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap index c3325b3262..fddcd2bc10 100644 --- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -122,7 +122,6 @@ exports[`renders button with an accessibility hint 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -273,7 +272,6 @@ exports[`renders button with an accessibility label 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -423,7 +421,6 @@ exports[`renders button with button color 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -573,7 +570,6 @@ exports[`renders button with color 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -723,7 +719,6 @@ exports[`renders button with custom testID 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -922,7 +917,6 @@ exports[`renders button with icon 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 16, }, @@ -1123,7 +1117,6 @@ exports[`renders button with icon in reverse order 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 16, }, @@ -1273,7 +1266,6 @@ exports[`renders contained contained with mode 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -1424,7 +1416,6 @@ exports[`renders disabled button 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -1782,7 +1773,6 @@ exports[`renders loading button 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 16, }, @@ -1932,7 +1922,6 @@ exports[`renders outlined button with mode 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -2083,7 +2072,6 @@ exports[`renders text button by default 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -2233,7 +2221,6 @@ exports[`renders text button with mode 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap index 0953a8257a..7fde640799 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -1801,7 +1801,6 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index 903cc68c41..10592128a0 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -189,9 +189,7 @@ exports[`renders list section with custom title style 1`] = ` "lineHeight": 20, }, }, - "isV3": true, "roundness": 4, - "version": 3, } } > @@ -735,9 +733,7 @@ exports[`renders list section with subheader 1`] = ` "lineHeight": 20, }, }, - "isV3": true, "roundness": 4, - "version": 3, } } > @@ -1279,9 +1275,7 @@ exports[`renders list section without subheader 1`] = ` "lineHeight": 20, }, }, - "isV3": true, "roundness": 4, - "version": 3, } } > diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap index b09ccb36ec..d3a7c1b1a1 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap @@ -134,7 +134,6 @@ exports[`renders menu with content styles 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -371,7 +370,6 @@ exports[`renders menu with content styles 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -408,7 +406,6 @@ exports[`renders menu with content styles 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", @@ -494,7 +491,6 @@ exports[`renders menu with content styles 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -531,7 +527,6 @@ exports[`renders menu with content styles 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", @@ -693,7 +688,6 @@ exports[`renders not visible menu 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -859,7 +853,6 @@ exports[`renders visible menu 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -1092,7 +1085,6 @@ exports[`renders visible menu 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -1129,7 +1121,6 @@ exports[`renders visible menu 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", @@ -1215,7 +1206,6 @@ exports[`renders visible menu 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -1252,7 +1242,6 @@ exports[`renders visible menu 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index cd444c05b5..0b3afe7e7d 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -66,12 +66,9 @@ exports[`Menu Item renders menu item 1`] = ` { - const isOnlyVersionInTheme = - props.theme && Object.keys(props.theme).length === 1 && props.theme.version; - const colorSchemeName = - ((!props.theme || isOnlyVersionInTheme) && Appearance?.getColorScheme()) || - 'light'; + (!props.theme && Appearance?.getColorScheme()) || 'light'; const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false); @@ -59,13 +55,13 @@ const PaperProvider = (props: Props) => { React.useEffect(() => { let appearanceSubscription: NativeEventSubscription | undefined; - if (!props.theme || isOnlyVersionInTheme) { + if (!props.theme) { appearanceSubscription = Appearance?.addChangeListener( handleAppearanceChange ) as NativeEventSubscription | undefined; } return () => { - if (!props.theme || isOnlyVersionInTheme) { + if (!props.theme) { if (appearanceSubscription) { appearanceSubscription.remove(); } else { @@ -74,27 +70,20 @@ const PaperProvider = (props: Props) => { } } }; - }, [props.theme, isOnlyVersionInTheme]); + }, [props.theme]); const theme = React.useMemo(() => { - const themeVersion = props.theme?.version || 3; - const scheme = colorScheme === 'dark' ? 'dark' : 'light'; - const defaultThemeBase = defaultThemesByVersion[themeVersion][scheme]; + const isDark = colorScheme === 'dark'; + const defaultThemeBase = getTheme(isDark); - const extendedThemeBase = { + return { ...defaultThemeBase, ...props.theme, - version: themeVersion, animation: { ...props.theme?.animation, scale: reduceMotionEnabled ? 0 : 1, }, }; - - return { - ...extendedThemeBase, - isV3: extendedThemeBase.version === 3, - }; }, [colorScheme, props.theme, reduceMotionEnabled]); const { children, settings } = props; diff --git a/src/core/__tests__/PaperProvider.test.tsx b/src/core/__tests__/PaperProvider.test.tsx index 11c4beff49..03ebbdc9f7 100644 --- a/src/core/__tests__/PaperProvider.test.tsx +++ b/src/core/__tests__/PaperProvider.test.tsx @@ -8,12 +8,7 @@ import { import { render, act } from '@testing-library/react-native'; -import { - MD2LightTheme, - MD2DarkTheme, - MD3LightTheme, - MD3DarkTheme, -} from '../../styles/themes'; +import { MD3LightTheme, MD3DarkTheme } from '../../styles/themes'; import type { ThemeProp } from '../../types'; import PaperProvider from '../PaperProvider'; import { useTheme } from '../theming'; @@ -107,8 +102,8 @@ const createProvider = (theme?: ThemeProp) => { ); }; -const ExtendedLightTheme = { ...MD3LightTheme, isV3: true } as ThemeProp; -const ExtendedDarkTheme = { ...MD3DarkTheme, isV3: true } as ThemeProp; +const ExtendedLightTheme = { ...MD3LightTheme } as ThemeProp; +const ExtendedDarkTheme = { ...MD3DarkTheme } as ThemeProp; describe('PaperProvider', () => { beforeEach(() => { @@ -229,7 +224,6 @@ describe('PaperProvider', () => { colors: { ...ExtendedLightTheme.colors, primary: 'tomato', - accent: 'yellow', }, } as ThemeProp; const { getByTestId } = render(createProvider(customTheme)); @@ -237,23 +231,4 @@ describe('PaperProvider', () => { customTheme ); }); - - it.each` - version | colorScheme | expectedTheme - ${2} | ${'light'} | ${MD2LightTheme} - ${2} | ${'dark'} | ${MD2DarkTheme} - ${3} | ${'light'} | ${MD3LightTheme} - ${3} | ${'dark'} | ${MD3DarkTheme} - `( - 'uses correct theme, $colorScheme mode, version $version', - async ({ version, colorScheme, expectedTheme }) => { - mockAppearance(); - (Appearance.getColorScheme as jest.Mock).mockReturnValue(colorScheme); - const { getByTestId } = render(createProvider({ version })); - - expect(getByTestId('provider-child-view').props.theme).toStrictEqual( - expectedTheme - ); - } - ); }); diff --git a/src/core/theming.tsx b/src/core/theming.tsx index 44223f032a..57ea01892e 100644 --- a/src/core/theming.tsx +++ b/src/core/theming.tsx @@ -1,20 +1,9 @@ import type { ComponentType } from 'react'; import { $DeepPartial, createTheming } from '@callstack/react-theme-provider'; -import color from 'color'; - -import { - MD2DarkTheme, - MD2LightTheme, - MD3DarkTheme, - MD3LightTheme, -} from '../styles/themes'; -import type { - InternalTheme, - MD3Theme, - MD3AndroidColors, - NavigationTheme, -} from '../types'; + +import { MD3DarkTheme, MD3LightTheme } from '../styles/themes'; +import type { InternalTheme, MD3Theme, NavigationTheme } from '../types'; export const DefaultTheme = MD3LightTheme; @@ -36,30 +25,8 @@ export const withInternalTheme = ( WrappedComponent: ComponentType & C ) => withTheme(WrappedComponent); -export const defaultThemesByVersion = { - 2: { - light: MD2LightTheme, - dark: MD2DarkTheme, - }, - 3: { - light: MD3LightTheme, - dark: MD3DarkTheme, - }, -}; - -export const getTheme = < - Scheme extends boolean = false, - IsVersion3 extends boolean = true ->( - isDark: Scheme = false as Scheme, - isV3: IsVersion3 = true as IsVersion3 -): (typeof defaultThemesByVersion)[IsVersion3 extends true - ? 3 - : 2][Scheme extends true ? 'dark' : 'light'] => { - const themeVersion = isV3 ? 3 : 2; - const scheme = isDark ? 'dark' : 'light'; - - return defaultThemesByVersion[themeVersion][scheme]; +export const getTheme = (isDark: boolean = false): MD3Theme => { + return isDark ? MD3DarkTheme : MD3LightTheme; }; // eslint-disable-next-line no-redeclare @@ -160,19 +127,3 @@ const getAdaptedTheme = ( return base; }; - -export const getDynamicThemeElevations = (scheme: MD3AndroidColors) => { - const elevationValues = ['transparent', 0.05, 0.08, 0.11, 0.12, 0.14]; - return elevationValues.reduce((elevations, elevationValue, index) => { - return { - ...elevations, - [`level${index}`]: - index === 0 - ? elevationValue - : color(scheme.surface) - .mix(color(scheme.primary), elevationValue as number) - .rgb() - .string(), - }; - }, {}); -}; diff --git a/src/index.tsx b/src/index.tsx index 1b20528787..ec0c4d4786 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,9 +19,7 @@ export { default as configureFonts } from './styles/fonts'; import * as Avatar from './components/Avatar/Avatar'; import * as Drawer from './components/Drawer/Drawer'; import * as List from './components/List/List'; -import * as MD2Colors from './styles/themes/v2/colors'; -export { MD2Colors }; export { Avatar, List, Drawer }; export * from './components/FAB/AnimatedFAB'; @@ -58,13 +56,6 @@ export { default as ToggleButton } from './components/ToggleButton'; export { default as SegmentedButtons } from './components/SegmentedButtons/SegmentedButtons'; export { default as Tooltip } from './components/Tooltip/Tooltip'; -export { - Caption, - Headline, - Paragraph, - Subheading, - Title, -} from './components/Typography/v2'; export { default as Text, customText } from './components/Typography/Text'; // Types @@ -144,11 +135,6 @@ export type { Props as ToggleButtonProps } from './components/ToggleButton/Toggl export type { Props as ToggleButtonGroupProps } from './components/ToggleButton/ToggleButtonGroup'; export type { Props as ToggleButtonRowProps } from './components/ToggleButton/ToggleButtonRow'; export type { Props as TouchableRippleProps } from './components/TouchableRipple/TouchableRipple'; -export type { Props as CaptionProps } from './components/Typography/v2/Caption'; -export type { Props as HeadlineProps } from './components/Typography/v2/Headline'; -export type { Props as ParagraphProps } from './components/Typography/v2/Paragraph'; -export type { Props as SubheadingProps } from './components/Typography/v2/Subheading'; -export type { Props as TitleProps } from './components/Typography/v2/Title'; export type { Props as TextProps } from './components/Typography/Text'; export type { Props as SegmentedButtonsProps } from './components/SegmentedButtons/SegmentedButtons'; export type { Props as ListImageProps } from './components/List/ListImage'; @@ -161,7 +147,6 @@ export type { } from './react-navigation'; export type { - MD2Theme, MD3Theme, ThemeBase, MD3Elevation, diff --git a/src/react-navigation/views/MaterialBottomTabView.tsx b/src/react-navigation/views/MaterialBottomTabView.tsx index df846ae2fb..98378e0c79 100644 --- a/src/react-navigation/views/MaterialBottomTabView.tsx +++ b/src/react-navigation/views/MaterialBottomTabView.tsx @@ -99,7 +99,6 @@ export default function MaterialBottomTabView({ ? options.title : (route as Route).name; }} - getColor={({ route }) => descriptors[route.key].options.tabBarColor} getBadge={({ route }) => descriptors[route.key].options.tabBarBadge} getAccessibilityLabel={({ route }) => descriptors[route.key].options.tabBarAccessibilityLabel diff --git a/src/styles/__tests__/fonts.test.js b/src/styles/__tests__/fonts.test.js index fb8dce5ba5..43ff44c38d 100644 --- a/src/styles/__tests__/fonts.test.js +++ b/src/styles/__tests__/fonts.test.js @@ -1,10 +1,3 @@ -const customFont = { - custom: { - fontFamily: 'sans-serif', - fontWeight: 'bold', - }, -}; - const customFontV3 = { displayLarge: { fontFamily: 'NotoSans', @@ -150,66 +143,6 @@ describe('configureFonts', () => { jest.dontMock('react-native'); }); - it('adds custom fonts to the iOS config', () => { - mockPlatform('ios'); - const { configureFonts, fontConfig } = loadFonts(); - - expect( - configureFonts({ - config: { - ios: { - ...fontConfig.ios, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.ios, - customFont, - }); - }); - - it('adds custom fonts to the Android config', () => { - mockPlatform('android'); - const { configureFonts, fontConfig } = loadFonts(); - - expect( - configureFonts({ - config: { - android: { - ...fontConfig.android, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.android, - customFont, - }); - }); - - it('adds custom fonts to the Web config', () => { - mockPlatform('web'); - const { configureFonts, fontConfig } = loadFonts(); - - expect( - configureFonts({ - config: { - web: { - ...fontConfig.web, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.web, - customFont, - }); - }); - it('overrides properties passed in config for all variants', () => { mockPlatform('ios'); const { configureFonts } = loadFonts(); diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx index e3b5017fc4..a914c102c0 100644 --- a/src/styles/fonts.tsx +++ b/src/styles/fonts.tsx @@ -1,6 +1,4 @@ -import { Platform, PlatformOSType } from 'react-native'; - -import type { Fonts, MD3Type, MD3Typescale, MD3TypescaleKey } from '../types'; +import type { MD3Type, MD3Typescale, MD3TypescaleKey } from '../types'; import { typescale } from './themes/v3/tokens'; export const fontConfig = { @@ -60,27 +58,22 @@ export const fontConfig = { }, }; -type MD2FontsConfig = { - [platform in PlatformOSType | 'default']?: Fonts; -}; - -type MD3FontsConfig = - | { - [key in MD3TypescaleKey]: Partial; - } - | { - [key: string]: MD3Type; - } - | Partial; - -function configureV2Fonts(config: MD2FontsConfig): Fonts { - const fonts = Platform.select({ ...fontConfig, ...config }) as Fonts; - return fonts; -} +// eslint-disable-next-line no-redeclare +export default function configureFonts(params?: { + config?: Partial; +}): MD3Typescale; +// eslint-disable-next-line no-redeclare +export default function configureFonts(params?: { + config?: Partial>>; +}): MD3Typescale; +// eslint-disable-next-line no-redeclare +export default function configureFonts(params: { + config: Record; +}): MD3Typescale & { [key: string]: MD3Type }; +// eslint-disable-next-line no-redeclare +export default function configureFonts(params?: any) { + const { config } = params || {}; -function configureV3Fonts( - config: MD3FontsConfig -): MD3Typescale | (MD3Typescale & { [key: string]: MD3Type }) { if (!config) { return typescale; } @@ -103,41 +96,9 @@ function configureV3Fonts( typescale, ...Object.entries(config).map(([variantName, variantProperties]) => ({ [variantName]: { - ...typescale[variantName as MD3TypescaleKey], - ...variantProperties, + ...(typescale[variantName as MD3TypescaleKey] as object), + ...(variantProperties as object), }, })) ); } - -// eslint-disable-next-line no-redeclare -export default function configureFonts(params: { isV3: false }): Fonts; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params: { - config?: MD2FontsConfig; - isV3: false; -}): Fonts; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params?: { - config?: Partial; - isV3?: true; -}): MD3Typescale; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params?: { - config?: Partial>>; - isV3?: true; -}): MD3Typescale; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params: { - config: Record; - isV3?: true; -}): MD3Typescale & { [key: string]: MD3Type }; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params?: any) { - const { isV3 = true, config } = params || {}; - - if (isV3) { - return configureV3Fonts(config); - } - return configureV2Fonts(config); -} diff --git a/src/styles/overlay.tsx b/src/styles/overlay.tsx index f9e6f8f9a5..ab58de0714 100644 --- a/src/styles/overlay.tsx +++ b/src/styles/overlay.tsx @@ -2,15 +2,13 @@ import { Animated } from 'react-native'; import color from 'color'; -import { MD2DarkTheme } from './themes/v2/DarkTheme'; - export const isAnimatedValue = ( it: number | string | Animated.AnimatedInterpolation ): it is Animated.Value => it instanceof Animated.Value; export default function overlay( elevation: T, - surfaceColor: string = MD2DarkTheme.colors?.surface + surfaceColor: string ): T extends number ? string : Animated.AnimatedInterpolation { if (isAnimatedValue(elevation)) { const inputRange = [0, 1, 2, 3, 8, 24]; diff --git a/src/styles/shadow.tsx b/src/styles/shadow.tsx index dcc11e8b65..0829aeb808 100644 --- a/src/styles/shadow.tsx +++ b/src/styles/shadow.tsx @@ -1,76 +1,11 @@ import { Animated } from 'react-native'; -import * as MD2Colors from './themes/v2/colors'; import { MD3Colors } from './themes/v3/tokens'; -const SHADOW_COLOR = MD2Colors.black; -const SHADOW_OPACITY = 0.24; const MD3_SHADOW_OPACITY = 0.3; const MD3_SHADOW_COLOR = MD3Colors.primary0; -export default function shadow( - elevation: number | Animated.Value = 0, - isV3 = false -) { - return isV3 ? v3Shadow(elevation) : v2Shadow(elevation); -} - -function v2Shadow(elevation: number | Animated.Value = 0) { - if (elevation instanceof Animated.Value) { - const inputRange = [0, 1, 2, 3, 8, 24]; - - return { - shadowColor: SHADOW_COLOR, - shadowOffset: { - width: new Animated.Value(0), - height: elevation.interpolate({ - inputRange, - outputRange: [0, 0.5, 0.75, 2, 7, 23], - }), - }, - shadowOpacity: elevation.interpolate({ - inputRange: [0, 1], - outputRange: [0, SHADOW_OPACITY], - extrapolate: 'clamp', - }), - shadowRadius: elevation.interpolate({ - inputRange, - outputRange: [0, 0.75, 1.5, 3, 8, 24], - }), - }; - } else { - if (elevation === 0) { - return {}; - } - - let height, radius; - switch (elevation) { - case 1: - height = 0.5; - radius = 0.75; - break; - case 2: - height = 0.75; - radius = 1.5; - break; - default: - height = elevation - 1; - radius = elevation; - } - - return { - shadowColor: SHADOW_COLOR, - shadowOffset: { - width: 0, - height, - }, - shadowOpacity: SHADOW_OPACITY, - shadowRadius: radius, - }; - } -} - -function v3Shadow(elevation: number | Animated.Value = 0) { +export default function shadow(elevation: number | Animated.Value = 0) { const inputRange = [0, 1, 2, 3, 4, 5]; const shadowHeight = [0, 1, 2, 4, 6, 8]; const shadowRadius = [0, 3, 6, 8, 10, 12]; diff --git a/src/styles/themes/index.ts b/src/styles/themes/index.ts index 3db1a460ad..39bcb6648c 100644 --- a/src/styles/themes/index.ts +++ b/src/styles/themes/index.ts @@ -1,4 +1,2 @@ export { MD3LightTheme } from './v3/LightTheme'; export { MD3DarkTheme } from './v3/DarkTheme'; -export { MD2LightTheme } from './v2/LightTheme'; -export { MD2DarkTheme } from './v2/DarkTheme'; diff --git a/src/styles/themes/v2/DarkTheme.tsx b/src/styles/themes/v2/DarkTheme.tsx deleted file mode 100644 index 9eaa576dcb..0000000000 --- a/src/styles/themes/v2/DarkTheme.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import color from 'color'; - -import { black, pinkA100, white } from './colors'; -import { MD2LightTheme } from './LightTheme'; -import type { Fonts, MD2Theme } from '../../../types'; -import configureFonts from '../../fonts'; - -export const MD2DarkTheme: MD2Theme = { - ...MD2LightTheme, - dark: true, - mode: 'adaptive', - version: 2, - isV3: false, - colors: { - ...MD2LightTheme.colors, - primary: '#BB86FC', - accent: '#03dac6', - background: '#121212', - surface: '#121212', - error: '#CF6679', - onSurface: '#FFFFFF', - text: white, - disabled: color(white).alpha(0.38).rgb().string(), - placeholder: color(white).alpha(0.54).rgb().string(), - backdrop: color(black).alpha(0.5).rgb().string(), - notification: pinkA100, - tooltip: 'rgba(230, 225, 229, 1)', - }, - fonts: configureFonts({ isV3: false }) as Fonts, -}; diff --git a/src/styles/themes/v2/LightTheme.tsx b/src/styles/themes/v2/LightTheme.tsx deleted file mode 100644 index 8566bdcc40..0000000000 --- a/src/styles/themes/v2/LightTheme.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import color from 'color'; - -import { black, pinkA400, white } from './colors'; -import type { Fonts, MD2Theme } from '../../../types'; -import configureFonts from '../../fonts'; - -export const MD2LightTheme: MD2Theme = { - dark: false, - roundness: 4, - version: 2, - isV3: false, - colors: { - primary: '#6200ee', - accent: '#03dac4', - background: '#f6f6f6', - surface: white, - error: '#B00020', - text: black, - onSurface: '#000000', - disabled: color(black).alpha(0.26).rgb().string(), - placeholder: color(black).alpha(0.54).rgb().string(), - backdrop: color(black).alpha(0.5).rgb().string(), - notification: pinkA400, - tooltip: 'rgba(28, 27, 31, 1)', - }, - fonts: configureFonts({ isV3: false }) as Fonts, - animation: { - scale: 1.0, - }, -}; diff --git a/src/styles/themes/v3/DarkTheme.tsx b/src/styles/themes/v3/DarkTheme.tsx index 271e9950f9..7239dfd60a 100644 --- a/src/styles/themes/v3/DarkTheme.tsx +++ b/src/styles/themes/v3/DarkTheme.tsx @@ -9,9 +9,6 @@ const { palette, opacity } = tokens.md.ref; export const MD3DarkTheme: MD3Theme = { ...MD3LightTheme, dark: true, - mode: 'adaptive', - version: 3, - isV3: true, colors: { primary: palette.primary80, primaryContainer: palette.primary30, diff --git a/src/styles/themes/v3/LightTheme.tsx b/src/styles/themes/v3/LightTheme.tsx index 5100f27bcd..33c0bdb7a9 100644 --- a/src/styles/themes/v3/LightTheme.tsx +++ b/src/styles/themes/v3/LightTheme.tsx @@ -9,8 +9,6 @@ const { palette, opacity } = tokens.md.ref; export const MD3LightTheme: MD3Theme = { dark: false, roundness: 4, - version: 3, - isV3: true, colors: { primary: palette.primary40, primaryContainer: palette.primary90, diff --git a/src/styles/themes/v2/colors.tsx b/src/styles/themes/v3/baseColors.ts similarity index 100% rename from src/styles/themes/v2/colors.tsx rename to src/styles/themes/v3/baseColors.ts diff --git a/src/types.tsx b/src/types.tsx index 92fb4801a9..07e2d6dc76 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -26,23 +26,6 @@ export type Fonts = { thin: Font; }; -type Mode = 'adaptive' | 'exact'; - -export type MD2Colors = { - primary: string; - background: string; - surface: string; - accent: string; - error: string; - text: string; - onSurface: string; - disabled: string; - placeholder: string; - backdrop: string; - notification: string; - tooltip: string; -}; - export type MD3Colors = { primary: string; primaryContainer: string; @@ -153,7 +136,6 @@ export type ThemeProp = $DeepPartial; export type ThemeBase = { dark: boolean; - mode?: Mode; roundness: number; animation: { scale: number; @@ -162,20 +144,11 @@ export type ThemeBase = { }; export type MD3Theme = ThemeBase & { - version: 3; - isV3: true; colors: MD3Colors; fonts: MD3Typescale; }; -export type MD2Theme = ThemeBase & { - version: 2; - isV3: false; - colors: MD2Colors; - fonts: Fonts; -}; - -export type InternalTheme = MD2Theme | MD3Theme; +export type InternalTheme = MD3Theme; // MD3 types export enum MD3TypescaleKey { From c6db59a5eb2becf2e319f2e1823ba86da2e7ab28 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Wed, 1 Apr 2026 18:50:20 +0300 Subject: [PATCH 08/14] refactor: cleanup after MD2 theme removal --- example/src/DrawerItems.tsx | 17 +- example/src/Examples/AppbarExample.tsx | 2 +- example/src/Examples/IconButtonExample.tsx | 4 +- example/src/Examples/SurfaceExample.tsx | 10 +- .../__fixtures__/rewrite-imports/output.js | 2 +- src/components/Appbar/Appbar.tsx | 4 +- src/components/Appbar/AppbarContent.tsx | 14 +- src/components/Appbar/utils.ts | 12 +- src/components/Avatar/AvatarIcon.tsx | 2 +- src/components/Avatar/AvatarText.tsx | 2 +- .../BottomNavigation/BottomNavigationBar.tsx | 54 +- src/components/Button/utils.tsx | 2 +- src/components/Card/CardCover.tsx | 2 +- src/components/Chip/Chip.tsx | 2 +- src/components/Dialog/DialogActions.tsx | 4 +- src/components/Dialog/DialogScrollArea.tsx | 7 +- src/components/Dialog/DialogTitle.tsx | 8 +- src/components/Drawer/DrawerItem.tsx | 18 +- src/components/Drawer/DrawerSection.tsx | 18 +- src/components/FAB/AnimatedFAB.tsx | 4 +- src/components/FAB/FABGroup.tsx | 10 +- src/components/FAB/utils.ts | 16 +- src/components/MaterialCommunityIcon.tsx | 2 +- src/components/Searchbar.tsx | 12 +- src/components/Switch/utils.ts | 2 +- src/components/ToggleButton/utils.ts | 2 +- src/components/__tests__/AnimatedFAB.test.tsx | 2 +- .../__tests__/Appbar/Appbar.test.tsx | 10 +- src/components/__tests__/Avatar.test.tsx | 2 +- src/components/__tests__/Badge.test.tsx | 2 +- .../__tests__/BottomNavigation.test.tsx | 2 +- src/components/__tests__/Button.test.tsx | 2 +- src/components/__tests__/Card/Card.test.tsx | 2 +- .../__snapshots__/DrawerSection.test.tsx.snap | 12 +- src/components/__tests__/IconButton.test.tsx | 2 +- .../__tests__/ListAccordion.test.tsx | 2 +- src/components/__tests__/ListItem.test.tsx | 2 +- src/components/__tests__/Searchbar.test.tsx | 2 +- src/components/__tests__/Snackbar.test.tsx | 4 +- src/components/__tests__/Switch.test.tsx | 2 +- .../__tests__/ToggleButton.test.tsx | 2 +- .../__tests__/Typography/Text.test.tsx | 6 +- .../__snapshots__/Text.test.tsx.snap | 44 +- .../BottomNavigation.test.tsx.snap | 520 ++++++------------ .../__snapshots__/DrawerItem.test.tsx.snap | 93 ++-- src/index.tsx | 2 +- src/styles/__tests__/fonts.test.js | 2 +- src/styles/fonts.tsx | 2 +- src/styles/shadow.tsx | 2 +- src/styles/themes/{v3 => }/DarkTheme.tsx | 2 +- .../themes/{v3 => }/DynamicTheme.android.tsx | 2 +- src/styles/themes/{v3 => }/DynamicTheme.tsx | 0 src/styles/themes/{v3 => }/LightTheme.tsx | 4 +- src/styles/themes/{v3 => }/baseColors.ts | 0 src/styles/themes/index.ts | 4 +- src/styles/themes/{v3 => }/tokens.tsx | 2 +- 56 files changed, 336 insertions(+), 631 deletions(-) rename src/styles/themes/{v3 => }/DarkTheme.tsx (98%) rename src/styles/themes/{v3 => }/DynamicTheme.android.tsx (99%) rename src/styles/themes/{v3 => }/DynamicTheme.tsx (100%) rename src/styles/themes/{v3 => }/LightTheme.tsx (96%) rename src/styles/themes/{v3 => }/baseColors.ts (100%) rename src/styles/themes/{v3 => }/tokens.tsx (99%) diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 1f1ac89e87..a0922584a7 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -183,7 +183,7 @@ function DrawerItems() { {deviceColorsSupported ? ( - + Use device colors * @@ -192,7 +192,7 @@ function DrawerItems() { ) : null} - + Dark Theme @@ -202,7 +202,7 @@ function DrawerItems() { {!isWeb && ( - + RTL @@ -212,7 +212,7 @@ function DrawerItems() { )} - + Collapsed drawer @@ -221,7 +221,7 @@ function DrawerItems() { - + Custom font @@ -230,7 +230,7 @@ function DrawerItems() { - + {isIOS ? 'Highlight' : 'Ripple'} effect @@ -277,11 +277,8 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, - paddingHorizontal: 16, - }, - v3Preference: { - height: 56, paddingHorizontal: 28, + height: 56, }, badge: { alignSelf: 'center', diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx index 074c4bc177..69f3f8573c 100644 --- a/example/src/Examples/AppbarExample.tsx +++ b/example/src/Examples/AppbarExample.tsx @@ -13,7 +13,7 @@ import { } from 'react-native-paper'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { yellowA200 } from '../../../src/styles/themes/v3/baseColors'; +import { yellowA200 } from '../../../src/styles/themes/baseColors'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx index 440c23a5a7..a701662d21 100644 --- a/example/src/Examples/IconButtonExample.tsx +++ b/example/src/Examples/IconButtonExample.tsx @@ -7,7 +7,7 @@ import ScreenWrapper from '../ScreenWrapper'; const ButtonExample = () => { return ( - + {}} /> @@ -175,7 +175,7 @@ const ButtonExample = () => { ButtonExample.title = 'Icon Button'; const styles = StyleSheet.create({ - v3Container: { + container: { flexDirection: 'column', }, row: { diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx index 88ca904b10..6abbc7f603 100644 --- a/example/src/Examples/SurfaceExample.tsx +++ b/example/src/Examples/SurfaceExample.tsx @@ -17,7 +17,7 @@ const SurfaceExample = () => { const renderSurface = (index: number, mode: 'flat' | 'elevated') => ( @@ -74,15 +74,9 @@ const styles = StyleSheet.create({ }, surface: { margin: 24, - height: 80, - width: 80, - alignItems: 'center', - justifyContent: 'center', - }, - v3Surface: { - borderRadius: 16, height: 200, width: 200, + borderRadius: 16, alignItems: 'center', justifyContent: 'center', }, diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js index 7204b0ca33..2105a35e9c 100644 --- a/src/babel/__fixtures__/rewrite-imports/output.js +++ b/src/babel/__fixtures__/rewrite-imports/output.js @@ -4,7 +4,7 @@ import BottomNavigation from "react-native-paper/lib/module/components/BottomNav import Button from "react-native-paper/lib/module/components/Button/Button"; import FAB from "react-native-paper/lib/module/components/FAB"; import Appbar from "react-native-paper/lib/module/components/Appbar"; -import { MD3Colors } from "react-native-paper/lib/module/styles/themes/v3/tokens"; +import { MD3Colors } from "react-native-paper/lib/module/styles/themes/tokens"; import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js"; import { ThemeProvider } from "react-native-paper/lib/module/core/theming"; import { withTheme } from "react-native-paper/lib/module/core/theming"; diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index adbea4e255..349761849c 100644 --- a/src/components/Appbar/Appbar.tsx +++ b/src/components/Appbar/Appbar.tsx @@ -217,7 +217,7 @@ const Appbar = ({ shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0; } - const spacingStyle = styles.v3Spacing; + const spacingStyle = styles.spacing; const insets = { paddingBottom: safeAreaInsets?.bottom, @@ -322,7 +322,7 @@ const styles = StyleSheet.create({ alignItems: 'center', paddingHorizontal: 4, }, - v3Spacing: { + spacing: { width: 52, }, controlsRow: { diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx index 41850cbb92..c3054f4ac4 100644 --- a/src/components/Appbar/AppbarContent.tsx +++ b/src/components/Appbar/AppbarContent.tsx @@ -117,10 +117,10 @@ const AppbarContent = ({ const titleTextColor = titleColor ? titleColor : colors.onSurface; const modeContainerStyles = { - small: styles.v3DefaultContainer, - medium: styles.v3MediumContainer, - large: styles.v3LargeContainer, - 'center-aligned': styles.v3DefaultContainer, + small: styles.defaultContainer, + medium: styles.mediumContainer, + large: styles.largeContainer, + 'center-aligned': styles.defaultContainer, }; const variant = modeTextVariant[mode] as MD3TypescaleKey; @@ -195,15 +195,15 @@ const styles = StyleSheet.create({ flex: 1, paddingHorizontal: 12, }, - v3DefaultContainer: { + defaultContainer: { paddingHorizontal: 0, }, - v3MediumContainer: { + mediumContainer: { paddingHorizontal: 0, justifyContent: 'flex-end', paddingBottom: 24, }, - v3LargeContainer: { + largeContainer: { paddingHorizontal: 0, paddingTop: 36, justifyContent: 'flex-end', diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts index 86d43c6ae8..13999dd4af 100644 --- a/src/components/Appbar/utils.ts +++ b/src/components/Appbar/utils.ts @@ -2,7 +2,7 @@ import React from 'react'; import type { ColorValue, StyleProp, ViewStyle } from 'react-native'; import { StyleSheet, Animated } from 'react-native'; -import { white } from '../../styles/themes/v3/baseColors'; +import { white } from '../../styles/themes/baseColors'; import type { InternalTheme, ThemeProp } from '../../types'; export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned'; @@ -84,13 +84,13 @@ type RenderAppbarContentProps = BaseProps & { theme?: ThemeProp; }; -const MD3_DEFAULT_APPBAR_HEIGHT = 64; +const DEFAULT_APPBAR_HEIGHT = 64; export const modeAppbarHeight = { - small: MD3_DEFAULT_APPBAR_HEIGHT, + small: DEFAULT_APPBAR_HEIGHT, medium: 112, large: 152, - 'center-aligned': MD3_DEFAULT_APPBAR_HEIGHT, + 'center-aligned': DEFAULT_APPBAR_HEIGHT, }; export const modeTextVariant = { @@ -159,7 +159,7 @@ export const renderAppbarContent = ({ if (child.type.displayName === 'Appbar.Content') { props.mode = mode; props.style = [ - i === 0 && !shouldCenterContent && styles.v3Spacing, + i === 0 && !shouldCenterContent && styles.spacing, shouldCenterContent && styles.centerAlignedContent, child.props.style, ]; @@ -173,7 +173,7 @@ const styles = StyleSheet.create({ centerAlignedContent: { alignItems: 'center', }, - v3Spacing: { + spacing: { marginLeft: 12, }, }); diff --git a/src/components/Avatar/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon.tsx index 9ca14e4a47..2b055e2253 100644 --- a/src/components/Avatar/AvatarIcon.tsx +++ b/src/components/Avatar/AvatarIcon.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v3/baseColors'; +import { white } from '../../styles/themes/baseColors'; import type { ThemeProp } from '../../types'; import getContrastingColor from '../../utils/getContrastingColor'; import Icon, { IconSource } from '../Icon'; diff --git a/src/components/Avatar/AvatarText.tsx b/src/components/Avatar/AvatarText.tsx index 4d45d2ce4e..844e0bd5fd 100644 --- a/src/components/Avatar/AvatarText.tsx +++ b/src/components/Avatar/AvatarText.tsx @@ -9,7 +9,7 @@ import { } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v3/baseColors'; +import { white } from '../../styles/themes/baseColors'; import type { ThemeProp } from '../../types'; import getContrastingColor from '../../utils/getContrastingColor'; import Text from '../Typography/Text'; diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index e97f2c9593..73cc992c91 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -565,15 +565,12 @@ const BottomNavigationBar = ({ // We render the active icon and label on top of inactive ones and cross-fade them on change. // This trick gives the illusion that we are animating between active and inactive colors. // This is to ensure that we can use native driver, as colors cannot be animated with native driver. - const activeOpacity = active; - const inactiveOpacity = active.interpolate({ - inputRange: [0, 1], - outputRange: [1, 0], - }); - - const v3ActiveOpacity = focused ? 1 : 0; - const v3InactiveOpacity = shifting - ? inactiveOpacity + const activeOpacity = focused ? 1 : 0; + const inactiveOpacity = shifting + ? active.interpolate({ + inputRange: [0, 1], + outputRange: [1, 0], + }) : focused ? 0 : 1; @@ -626,20 +623,19 @@ const BottomNavigationBar = ({ accessibilityLabel: getAccessibilityLabel({ route }), accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab', accessibilityState: { selected: focused }, - style: [styles.item, styles.v3Item], + style: styles.item, children: ( ({ @@ -689,11 +684,10 @@ const BottomNavigationBar = ({ @@ -733,7 +727,7 @@ const BottomNavigationBar = ({ { opacity: isShiftingOrLabeled ? activeOpacity - : v3ActiveOpacity, + : activeOpacity, }, ]} > @@ -766,7 +760,7 @@ const BottomNavigationBar = ({ { opacity: isShiftingOrLabeled ? inactiveOpacity - : v3InactiveOpacity, + : inactiveOpacity, }, ]} > @@ -830,32 +824,20 @@ const styles = StyleSheet.create({ }, item: { flex: 1, - // Top padding is 6 and bottom padding is 10 - // The extra 4dp bottom padding is offset by label's height - paddingVertical: 6, - }, - v3Item: { paddingVertical: 0, }, iconContainer: { - height: 24, - width: 24, - marginTop: 2, - marginHorizontal: 12, - alignSelf: 'center', - }, - v3IconContainer: { height: 32, width: 32, - marginBottom: 4, marginTop: 0, + marginBottom: 4, + marginHorizontal: 12, + alignSelf: 'center', justifyContent: 'center', }, iconWrapper: { ...StyleSheet.absoluteFillObject, alignItems: 'center', - }, - v3IconWrapper: { top: 4, }, labelContainer: { @@ -882,11 +864,11 @@ const styles = StyleSheet.create({ position: 'absolute', left: 0, }, - v3TouchableContainer: { + touchableContainer: { paddingTop: 12, paddingBottom: 16, }, - v3NoLabelContainer: { + noLabelContainer: { height: 80, justifyContent: 'center', alignItems: 'center', diff --git a/src/components/Button/utils.tsx b/src/components/Button/utils.tsx index 8fb2fc7c56..af61bedb87 100644 --- a/src/components/Button/utils.tsx +++ b/src/components/Button/utils.tsx @@ -2,7 +2,7 @@ import { type ViewStyle } from 'react-native'; import color from 'color'; -import { black, white } from '../../styles/themes/v3/baseColors'; +import { black, white } from '../../styles/themes/baseColors'; import type { InternalTheme } from '../../types'; import { splitStyles } from '../../utils/splitStyles'; diff --git a/src/components/Card/CardCover.tsx b/src/components/Card/CardCover.tsx index 9f317976b6..72079cf3a6 100644 --- a/src/components/Card/CardCover.tsx +++ b/src/components/Card/CardCover.tsx @@ -3,7 +3,7 @@ import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { getCardCoverStyle } from './utils'; import { useInternalTheme } from '../../core/theming'; -import { grey200 } from '../../styles/themes/v3/baseColors'; +import { grey200 } from '../../styles/themes/baseColors'; import type { ThemeProp } from '../../types'; import { splitStyles } from '../../utils/splitStyles'; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 7ac71ee809..c3ab6144dc 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -18,7 +18,7 @@ import useLatestCallback from 'use-latest-callback'; import { ChipAvatarProps, getChipColors } from './helpers'; import { useInternalTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v3/baseColors'; +import { white } from '../../styles/themes/baseColors'; import type { $Omit, EllipsizeProp, ThemeProp } from '../../types'; import hasTouchHandler from '../../utils/hasTouchHandler'; import type { IconSource } from '../Icon'; diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index 7b34739da5..3a3d646832 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -51,7 +51,7 @@ const DialogActions = (props: Props) => { const actionsLength = React.Children.toArray(props.children).length; return ( - + {React.Children.map(props.children, (child, i) => React.isValidElement(child) ? React.cloneElement(child, { @@ -73,7 +73,7 @@ const DialogActions = (props: Props) => { DialogActions.displayName = 'Dialog.Actions'; const styles = StyleSheet.create({ - v3Container: { + container: { flexDirection: 'row', flexGrow: 1, alignItems: 'center', diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index b172106c94..6228bf2400 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -56,10 +56,7 @@ const DialogScrollArea = (props: Props) => { borderBottomWidth: 1, }; return ( - + {props.children} ); @@ -72,8 +69,6 @@ const styles = StyleSheet.create({ paddingHorizontal: 24, flexGrow: 1, flexShrink: 1, - }, - v3Container: { marginBottom: 24, }, }); diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx index 03e0d4288e..6158cfbefc 100644 --- a/src/components/Dialog/DialogTitle.tsx +++ b/src/components/Dialog/DialogTitle.tsx @@ -63,7 +63,7 @@ const DialogTitle = ({ {children} @@ -75,13 +75,9 @@ DialogTitle.displayName = 'Dialog.Title'; const styles = StyleSheet.create({ text: { - marginTop: 22, - marginBottom: 18, - marginHorizontal: 24, - }, - v3Text: { marginTop: 16, marginBottom: 16, + marginHorizontal: 24, }, }); diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx index d80c6d922e..e835bc6a79 100644 --- a/src/components/Drawer/DrawerItem.tsx +++ b/src/components/Drawer/DrawerItem.tsx @@ -127,12 +127,7 @@ const DrawerItem = ({ disabled={disabled} background={background} onPress={onPress} - style={[ - styles.container, - { backgroundColor, borderRadius }, - styles.v3Container, - style, - ]} + style={[styles.container, { backgroundColor, borderRadius }, style]} accessibilityRole="button" accessibilityState={{ selected: active }} accessibilityLabel={accessibilityLabel} @@ -140,7 +135,7 @@ const DrawerItem = ({ theme={theme} hitSlop={hitSlop} > - + {icon ? ( @@ -174,10 +169,6 @@ DrawerItem.displayName = 'Drawer.Item'; const styles = StyleSheet.create({ container: { - marginHorizontal: 10, - marginVertical: 4, - }, - v3Container: { justifyContent: 'center', height: 56, marginLeft: 12, @@ -187,12 +178,9 @@ const styles = StyleSheet.create({ wrapper: { flexDirection: 'row', alignItems: 'center', - padding: 8, - }, - v3Wrapper: { + padding: 0, marginLeft: 16, marginRight: 24, - padding: 0, }, content: { flex: 1, diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx index a701d38ad6..582a4d506c 100644 --- a/src/components/Drawer/DrawerSection.tsx +++ b/src/components/Drawer/DrawerSection.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import { MD3Colors } from '../../styles/themes/v3/tokens'; +import { MD3Colors } from '../../styles/themes/tokens'; import type { ThemeProp } from '../../types'; import Divider from '../Divider'; import Text from '../Typography/Text'; @@ -78,7 +78,7 @@ const DrawerSection = ({ return ( {title && ( - + {title && ( + )} ); @@ -117,16 +112,11 @@ const styles = StyleSheet.create({ marginBottom: 4, }, titleContainer: { - height: 40, - justifyContent: 'center', - }, - v3TitleContainer: { height: 56, + justifyContent: 'center', }, divider: { marginTop: 4, - }, - v3Divider: { backgroundColor: MD3Colors.neutralVariant50, }, }); diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index 60d583478a..b6b027a919 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -374,7 +374,7 @@ const AnimatedFAB = ({ const baseStyle = [ StyleSheet.absoluteFill, - disabled ? styles.disabled : styles.v3Shadow, + disabled ? styles.disabled : styles.shadow, ]; const newAccessibilityState = { ...accessibilityState, disabled }; @@ -579,7 +579,7 @@ const styles = StyleSheet.create({ shadowWrapper: { elevation: 0, }, - v3Shadow: { + shadow: { elevation: 3, }, iconWrapper: { diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index de88de8185..61f3c3cb9b 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -432,7 +432,6 @@ const FABGroup = ({ transform: [{ translateY: labelTranslations[i] }], opacity: opacities[i], }, - styles.v3ContainerStyle, it.containerStyle, ]} > @@ -517,13 +516,15 @@ const styles = StyleSheet.create({ backdrop: { ...StyleSheet.absoluteFillObject, }, + // eslint-disable-next-line react-native/no-color-literals containerStyle: { borderRadius: 5, paddingHorizontal: 12, paddingVertical: 6, marginVertical: 8, marginHorizontal: 16, - elevation: 2, + elevation: 0, + backgroundColor: 'transparent', }, item: { marginBottom: 16, @@ -531,9 +532,4 @@ const styles = StyleSheet.create({ justifyContent: 'flex-end', alignItems: 'center', }, - // eslint-disable-next-line react-native/no-color-literals - v3ContainerStyle: { - backgroundColor: 'transparent', - elevation: 0, - }, }); diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts index 32d7596734..c0ef6b0485 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -302,15 +302,15 @@ export const getFABGroupColors = ({ }; }; -const v3SmallSize = { +const smallSize = { height: 40, width: 40, }; -const v3MediumSize = { +const mediumSize = { height: 56, width: 56, }; -const v3LargeSize = { +const largeSize = { height: 96, width: 96, }; @@ -336,15 +336,15 @@ export const getFabStyle = ({ switch (size) { case 'small': - return { ...v3SmallSize, borderRadius: 3 * roundness }; + return { ...smallSize, borderRadius: 3 * roundness }; case 'medium': - return { ...v3MediumSize, borderRadius: 4 * roundness }; + return { ...mediumSize, borderRadius: 4 * roundness }; case 'large': - return { ...v3LargeSize, borderRadius: 7 * roundness }; + return { ...largeSize, borderRadius: 7 * roundness }; } }; -const v3Extended = { +const extended = { height: 56, borderRadius: 16, paddingHorizontal: 16, @@ -363,7 +363,7 @@ export const getExtendedFabStyle = ({ }) => { if (customSize) return getExtendedFabDimensions(customSize); - return v3Extended; + return extended; }; let cachedContext: CanvasRenderingContext2D | null = null; diff --git a/src/components/MaterialCommunityIcon.tsx b/src/components/MaterialCommunityIcon.tsx index 33e02e202f..97b9cf81b3 100644 --- a/src/components/MaterialCommunityIcon.tsx +++ b/src/components/MaterialCommunityIcon.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ComponentProps } from 'react'; import { StyleSheet, Text, Platform, Role, ViewProps } from 'react-native'; -import { black } from '../styles/themes/v3/baseColors'; +import { black } from '../styles/themes/baseColors'; export type IconProps = { name: ComponentProps['name']; diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx index 46ebb2def5..8a1c13eeeb 100644 --- a/src/components/Searchbar.tsx +++ b/src/components/Searchbar.tsx @@ -315,7 +315,7 @@ const Searchbar = forwardRef( {loading ? ( ) : ( // Clear icon should be always rendered within Searchbar – it's transparent, @@ -326,8 +326,8 @@ const Searchbar = forwardRef( pointerEvents={value ? 'auto' : 'none'} testID={`${testID}-icon-wrapper`} style={[ - !value && styles.v3ClearIcon, - right !== undefined && styles.v3ClearIconHidden, + !value && styles.clearIcon, + right !== undefined && styles.clearIconHidden, ]} > { renderOnly: ['Appbar.Content'], }); - const v3Spacing = { + const spacing = { marginLeft: 12, }; expect(result[0].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(v3Spacing)]) + expect.arrayContaining([expect.objectContaining(spacing)]) ); }); @@ -296,13 +296,13 @@ describe('getAppbarColors', () => { ); }); - it('should return v3 light color if theme version is 3', () => { + it('should return light theme color', () => { expect(getAppbarBackgroundColor(getTheme())).toBe( tokens.md.ref.palette.neutral98 ); }); - it('should return v3 dark color if theme version is 3', () => { + it('should return dark theme color', () => { expect(getAppbarBackgroundColor(getTheme(true))).toBe( tokens.md.ref.palette.neutral6 ); diff --git a/src/components/__tests__/Avatar.test.tsx b/src/components/__tests__/Avatar.test.tsx index 936fa03fba..d54e191e1c 100644 --- a/src/components/__tests__/Avatar.test.tsx +++ b/src/components/__tests__/Avatar.test.tsx @@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v3/baseColors'; +import { red500 } from '../../styles/themes/baseColors'; import * as Avatar from '../Avatar/Avatar'; const styles = StyleSheet.create({ diff --git a/src/components/__tests__/Badge.test.tsx b/src/components/__tests__/Badge.test.tsx index 1c6bf1ebf2..3210a9a208 100644 --- a/src/components/__tests__/Badge.test.tsx +++ b/src/components/__tests__/Badge.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v3/baseColors'; +import { red500 } from '../../styles/themes/baseColors'; import Badge from '../Badge'; it('renders badge', () => { diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx index fd1437ea6a..db5e46922e 100644 --- a/src/components/__tests__/BottomNavigation.test.tsx +++ b/src/components/__tests__/BottomNavigation.test.tsx @@ -4,7 +4,7 @@ import { Animated, Easing, Platform, StyleSheet } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; -import { red300 } from '../../styles/themes/v3/baseColors'; +import { red300 } from '../../styles/themes/baseColors'; import BottomNavigation from '../BottomNavigation/BottomNavigation'; import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen'; import { diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index a7114f9ba5..9cf27a7b7b 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -4,7 +4,7 @@ import { Animated, StyleSheet } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; -import { white } from '../../styles/themes/v3/baseColors'; +import { white } from '../../styles/themes/baseColors'; import Button from '../Button/Button'; import { getButtonColors } from '../Button/utils'; const pink500 = '#e91e63'; diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx index 770db1913e..dd9d7bb8fa 100644 --- a/src/components/__tests__/Card/Card.test.tsx +++ b/src/components/__tests__/Card/Card.test.tsx @@ -4,7 +4,7 @@ import { Animated, StyleSheet, Text } from 'react-native'; import { act, render } from '@testing-library/react-native'; import { getTheme } from '../../../core/theming'; -import { MD3Colors } from '../../../styles/themes/v3/tokens'; +import { MD3Colors } from '../../../styles/themes/tokens'; import Button from '../../Button/Button'; import Card from '../../Card/Card'; import { getCardColors, getCardCoverStyle } from '../../Card/utils'; diff --git a/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap b/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap index bcd35191f0..711178d2f9 100644 --- a/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap +++ b/src/components/__tests__/Drawer/__snapshots__/DrawerSection.test.tsx.snap @@ -27,14 +27,10 @@ exports[`DrawerSection renders properly 1`] = ` { "height": 1, }, - [ - { - "marginTop": 4, - }, - { - "backgroundColor": "rgba(121, 116, 126, 1)", - }, - ], + { + "backgroundColor": "rgba(121, 116, 126, 1)", + "marginTop": 4, + }, ] } /> diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index c622bcaaf8..3ece888c5a 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -5,7 +5,7 @@ import { act, render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { pink500 } from '../../styles/themes/v3/baseColors'; +import { pink500 } from '../../styles/themes/baseColors'; import IconButton from '../IconButton/IconButton'; import { getIconButtonColor } from '../IconButton/utils'; diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index b6dec98543..e2bf908bf0 100644 --- a/src/components/__tests__/ListAccordion.test.tsx +++ b/src/components/__tests__/ListAccordion.test.tsx @@ -5,7 +5,7 @@ import { render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { red500 } from '../../styles/themes/v3/baseColors'; +import { red500 } from '../../styles/themes/baseColors'; import ListAccordion from '../List/ListAccordion'; import ListAccordionGroup from '../List/ListAccordionGroup'; import ListIcon from '../List/ListIcon'; diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index c8d828d1f5..fac7a2c530 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -4,7 +4,7 @@ import { Text, View } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import { red500 } from '../../styles/themes/v3/baseColors'; +import { red500 } from '../../styles/themes/baseColors'; import Chip from '../Chip/Chip'; import IconButton from '../IconButton/IconButton'; import ListIcon from '../List/ListIcon'; diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx index 59ade128e4..69b572cbce 100644 --- a/src/components/__tests__/Searchbar.test.tsx +++ b/src/components/__tests__/Searchbar.test.tsx @@ -117,7 +117,7 @@ it('defines onClearIconPress action and checks if it is called when close button expect(onClearIconPressMock).toHaveBeenCalledTimes(1); }); -it('renders clear icon wrapper, with appropriate style for v3', () => { +it('renders clear icon wrapper, with appropriate style', () => { const { getByTestId, update } = render( ); diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx index 0a9f7c15d4..f652679a21 100644 --- a/src/components/__tests__/Snackbar.test.tsx +++ b/src/components/__tests__/Snackbar.test.tsx @@ -3,11 +3,9 @@ import { Animated, StyleSheet, Text, View } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import { white } from '../../styles/themes/v3/baseColors'; +import { white, red200 } from '../../styles/themes/baseColors'; import Snackbar from '../Snackbar'; -const red200 = '#ef9a9a'; - const styles = StyleSheet.create({ snackContent: { flexDirection: 'row', diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx index 3317926d38..4f8633622a 100644 --- a/src/components/__tests__/Switch.test.tsx +++ b/src/components/__tests__/Switch.test.tsx @@ -13,7 +13,7 @@ import { grey700, grey800, pink500, -} from '../../styles/themes/v3/baseColors'; +} from '../../styles/themes/baseColors'; import Switch from '../Switch/Switch'; import { getSwitchColor } from '../Switch/utils'; diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx index a0e2bbafcb..35b1d63484 100644 --- a/src/components/__tests__/ToggleButton.test.tsx +++ b/src/components/__tests__/ToggleButton.test.tsx @@ -5,7 +5,7 @@ import { act, render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { tokens } from '../../styles/themes/v3/tokens'; +import { tokens } from '../../styles/themes/tokens'; import ToggleButton from '../ToggleButton'; import { getToggleButtonColor } from '../ToggleButton/utils'; diff --git a/src/components/__tests__/Typography/Text.test.tsx b/src/components/__tests__/Typography/Text.test.tsx index 2560920322..c793988479 100644 --- a/src/components/__tests__/Typography/Text.test.tsx +++ b/src/components/__tests__/Typography/Text.test.tsx @@ -5,7 +5,7 @@ import { render } from '@testing-library/react-native'; import PaperProvider from '../../../core/PaperProvider'; import configureFonts from '../../../styles/fonts'; import { MD3LightTheme } from '../../../styles/themes'; -import { tokens } from '../../../styles/themes/v3/tokens'; +import { tokens } from '../../../styles/themes/tokens'; import Text, { customText } from '../../Typography/Text'; const content = 'Something rendered as a child content'; @@ -40,7 +40,7 @@ it('renders every variant of Text with children as content', () => { expect(tree).toMatchSnapshot(); }); -it('renders v3 Text component without variant with default fontWeight and fontFamily', () => { +it('renders Text component without variant with default fontWeight and fontFamily', () => { const { getByTestId } = render( {content} ); @@ -52,7 +52,7 @@ it('renders v3 Text component without variant with default fontWeight and fontFa }); }); -it('renders v3 Text component with custom variant correctly', () => { +it('renders Text component with custom variant correctly', () => { const fontConfig = { customVariant: { fontFamily: 'Montserrat-Regular', diff --git a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap index 5b87989124..e40248d4ae 100644 --- a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap +++ b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap @@ -1,5 +1,27 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renders Text component with custom variant correctly 1`] = ` +[ + { + "textAlign": "left", + }, + { + "color": "rgba(29, 27, 32, 1)", + "writingDirection": "ltr", + }, + [ + { + "fontFamily": "Montserrat-Regular", + "fontSize": 41, + "fontWeight": "400", + "letterSpacing": 0.51, + "lineHeight": 54.1, + }, + undefined, + ], +] +`; + exports[`renders every variant of Text with children as content 1`] = ` [ , ] `; - -exports[`renders v3 Text component with custom variant correctly 1`] = ` -[ - { - "textAlign": "left", - }, - { - "color": "rgba(29, 27, 32, 1)", - "writingDirection": "ltr", - }, - [ - { - "fontFamily": "Montserrat-Regular", - "fontSize": 41, - "fontWeight": "400", - "letterSpacing": 0.51, - "lineHeight": 54.1, - }, - undefined, - ], -] -`; diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap index afbb5be850..61f94e1097 100644 --- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap @@ -167,15 +167,10 @@ exports[`allows customizing Route's type via generics 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - [ - { - "flex": 1, - "paddingVertical": 6, - }, - { - "paddingVertical": 0, - }, - ] + { + "flex": 1, + "paddingVertical": 0, + } } > { configureFonts = fonts.default; fontConfig = fonts.fontConfig; - typescale = require('../themes/v3/tokens').typescale; + typescale = require('../themes/tokens').typescale; }); return { configureFonts, fontConfig, typescale }; diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx index a914c102c0..18b6a542e3 100644 --- a/src/styles/fonts.tsx +++ b/src/styles/fonts.tsx @@ -1,5 +1,5 @@ import type { MD3Type, MD3Typescale, MD3TypescaleKey } from '../types'; -import { typescale } from './themes/v3/tokens'; +import { typescale } from './themes/tokens'; export const fontConfig = { web: { diff --git a/src/styles/shadow.tsx b/src/styles/shadow.tsx index 0829aeb808..faf6ed2761 100644 --- a/src/styles/shadow.tsx +++ b/src/styles/shadow.tsx @@ -1,6 +1,6 @@ import { Animated } from 'react-native'; -import { MD3Colors } from './themes/v3/tokens'; +import { MD3Colors } from './themes/tokens'; const MD3_SHADOW_OPACITY = 0.3; const MD3_SHADOW_COLOR = MD3Colors.primary0; diff --git a/src/styles/themes/v3/DarkTheme.tsx b/src/styles/themes/DarkTheme.tsx similarity index 98% rename from src/styles/themes/v3/DarkTheme.tsx rename to src/styles/themes/DarkTheme.tsx index 7239dfd60a..7d042802bb 100644 --- a/src/styles/themes/v3/DarkTheme.tsx +++ b/src/styles/themes/DarkTheme.tsx @@ -2,7 +2,7 @@ import color from 'color'; import { MD3LightTheme } from './LightTheme'; import { MD3Colors, tokens } from './tokens'; -import type { MD3Theme } from '../../../types'; +import type { MD3Theme } from '../../types'; const { palette, opacity } = tokens.md.ref; diff --git a/src/styles/themes/v3/DynamicTheme.android.tsx b/src/styles/themes/DynamicTheme.android.tsx similarity index 99% rename from src/styles/themes/v3/DynamicTheme.android.tsx rename to src/styles/themes/DynamicTheme.android.tsx index 2a5453c540..28642ec3fd 100644 --- a/src/styles/themes/v3/DynamicTheme.android.tsx +++ b/src/styles/themes/DynamicTheme.android.tsx @@ -2,7 +2,7 @@ import { Platform, PlatformColor } from 'react-native'; import { MD3DarkTheme } from './DarkTheme'; import { MD3LightTheme } from './LightTheme'; -import type { MD3Theme } from '../../../types'; +import type { MD3Theme } from '../../types'; const isApi34 = (Platform.Version as number) >= 34; const isApi31 = (Platform.Version as number) >= 31; diff --git a/src/styles/themes/v3/DynamicTheme.tsx b/src/styles/themes/DynamicTheme.tsx similarity index 100% rename from src/styles/themes/v3/DynamicTheme.tsx rename to src/styles/themes/DynamicTheme.tsx diff --git a/src/styles/themes/v3/LightTheme.tsx b/src/styles/themes/LightTheme.tsx similarity index 96% rename from src/styles/themes/v3/LightTheme.tsx rename to src/styles/themes/LightTheme.tsx index 33c0bdb7a9..3cb827a141 100644 --- a/src/styles/themes/v3/LightTheme.tsx +++ b/src/styles/themes/LightTheme.tsx @@ -1,8 +1,8 @@ import color from 'color'; import { MD3Colors, tokens } from './tokens'; -import type { MD3Theme } from '../../../types'; -import configureFonts from '../../fonts'; +import type { MD3Theme } from '../../types'; +import configureFonts from '../fonts'; const { palette, opacity } = tokens.md.ref; diff --git a/src/styles/themes/v3/baseColors.ts b/src/styles/themes/baseColors.ts similarity index 100% rename from src/styles/themes/v3/baseColors.ts rename to src/styles/themes/baseColors.ts diff --git a/src/styles/themes/index.ts b/src/styles/themes/index.ts index 39bcb6648c..cfae5dfa0f 100644 --- a/src/styles/themes/index.ts +++ b/src/styles/themes/index.ts @@ -1,2 +1,2 @@ -export { MD3LightTheme } from './v3/LightTheme'; -export { MD3DarkTheme } from './v3/DarkTheme'; +export { MD3LightTheme } from './LightTheme'; +export { MD3DarkTheme } from './DarkTheme'; diff --git a/src/styles/themes/v3/tokens.tsx b/src/styles/themes/tokens.tsx similarity index 99% rename from src/styles/themes/v3/tokens.tsx rename to src/styles/themes/tokens.tsx index 6eb27445fd..81eeb0b732 100644 --- a/src/styles/themes/v3/tokens.tsx +++ b/src/styles/themes/tokens.tsx @@ -1,6 +1,6 @@ import { Platform } from 'react-native'; -import type { Font } from '../../../types'; +import type { Font } from '../../types'; const ref = { palette: { From f591c8c0942efbc80b71434e62383b5f133bf2b3 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Thu, 2 Apr 2026 09:49:52 +0300 Subject: [PATCH 09/14] refactor: remove usage of ExpoMaterial3ThemeModule --- docs/docs/guides/02-theming.mdx | 2 +- docs/docs/guides/06-recommended-libraries.md | 6 +---- example/package.json | 1 - example/src/index.native.tsx | 24 +++++++++----------- example/utils/index.ts | 5 +--- src/styles/themes/index.ts | 1 + yarn.lock | 15 ------------ 7 files changed, 15 insertions(+), 39 deletions(-) diff --git a/docs/docs/guides/02-theming.mdx b/docs/docs/guides/02-theming.mdx index 76869182ae..d89bc7fd05 100644 --- a/docs/docs/guides/02-theming.mdx +++ b/docs/docs/guides/02-theming.mdx @@ -227,7 +227,7 @@ export default function Main() { } ``` -### Sync dynamic colors with system colors +### TODO: update section / Sync dynamic colors with system colors Using [`pchmn/expo-material3-theme`](https://github.com/pchmn/expo-material3-theme) library you can easily access the Material 3 system colors from Android 12+ devices and seamlessly integrate them into your dynamic theme. Any changes made by the user to the system colors will be automatically reflected in the theme. diff --git a/docs/docs/guides/06-recommended-libraries.md b/docs/docs/guides/06-recommended-libraries.md index e70157ca1d..7be319cedf 100644 --- a/docs/docs/guides/06-recommended-libraries.md +++ b/docs/docs/guides/06-recommended-libraries.md @@ -33,8 +33,4 @@ Material Design themed [date picker](https://material.io/components/date-pickers ## Time Picker [web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates) -Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout) - -## System Colors -[pchmn/expo-material3-theme](https://github.com/pchmn/expo-material3-theme) -Retrieve Material 3 system colors from Android 12+ devices \ No newline at end of file +Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout) diff --git a/example/package.json b/example/package.json index 667c56cb19..3ae36fb1ec 100644 --- a/example/package.json +++ b/example/package.json @@ -16,7 +16,6 @@ "dependencies": { "@expo/vector-icons": "^15.0.2", "@expo/webpack-config": "~19.0.1", - "@pchmn/expo-material3-theme": "^1.3.2", "@react-native-async-storage/async-storage": "2.2.0", "@react-native-masked-view/masked-view": "0.3.2", "@react-navigation/bottom-tabs": "^7.3.10", diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index 39ea78a2d1..3193ee6443 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { I18nManager } from 'react-native'; -import { useMaterial3Theme } from '@pchmn/expo-material3-theme'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { InitialState, NavigationContainer } from '@react-navigation/native'; @@ -9,7 +8,13 @@ import { useFonts } from 'expo-font'; import { useKeepAwake } from 'expo-keep-awake'; import { StatusBar } from 'expo-status-bar'; import * as Updates from 'expo-updates'; -import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper'; +import { + PaperProvider, + MD3DarkTheme, + MD3LightTheme, + MD3DynamicDarkTheme, + MD3DynamicLightTheme, +} from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; @@ -50,20 +55,13 @@ export default function PaperExample() { const [customFontLoaded, setCustomFont] = React.useState(false); const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); - //TODO: remove usage of @pchmn/expo-material3-theme - const { theme: mdTheme } = useMaterial3Theme(); const theme = React.useMemo(() => { - if (!deviceColorsSupported || !shouldUseDeviceColors) { - return isDarkMode ? MD3DarkTheme : MD3LightTheme; + if (deviceColorsSupported && shouldUseDeviceColors) { + return isDarkMode ? MD3DynamicDarkTheme : MD3DynamicLightTheme; } - return isDarkMode - ? { ...MD3DarkTheme, colors: { ...MD3DarkTheme.colors, ...mdTheme.dark } } - : { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...mdTheme.light }, - }; - }, [isDarkMode, mdTheme, shouldUseDeviceColors]); + return isDarkMode ? MD3DarkTheme : MD3LightTheme; + }, [isDarkMode, shouldUseDeviceColors]); React.useEffect(() => { const restoreState = async () => { diff --git a/example/utils/index.ts b/example/utils/index.ts index 68bb02a96e..eebc4da783 100644 --- a/example/utils/index.ts +++ b/example/utils/index.ts @@ -1,6 +1,5 @@ import { Platform } from 'react-native'; -import ExpoMaterial3ThemeModule from '@pchmn/expo-material3-theme/build/ExpoMaterial3ThemeModule'; import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper'; type ReducerAction = { @@ -1435,6 +1434,4 @@ export const restaurantsData = [ ]; export const deviceColorsSupported = - Boolean(ExpoMaterial3ThemeModule) && - Platform.OS === 'android' && - Platform.Version >= 31; + Platform.OS === 'android' && (Platform.Version as number) >= 31; diff --git a/src/styles/themes/index.ts b/src/styles/themes/index.ts index cfae5dfa0f..58e6e18160 100644 --- a/src/styles/themes/index.ts +++ b/src/styles/themes/index.ts @@ -1,2 +1,3 @@ export { MD3LightTheme } from './LightTheme'; export { MD3DarkTheme } from './DarkTheme'; +export { MD3DynamicLightTheme, MD3DynamicDarkTheme } from './DynamicTheme'; diff --git a/yarn.lock b/yarn.lock index 3920e64583..b4133ec770 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4317,20 +4317,6 @@ __metadata: languageName: node linkType: hard -"@pchmn/expo-material3-theme@npm:^1.3.2": - version: 1.3.2 - resolution: "@pchmn/expo-material3-theme@npm:1.3.2" - dependencies: - "@material/material-color-utilities": "npm:^0.2.7" - color: "npm:^4.2.3" - peerDependencies: - expo: "*" - react: "*" - react-native: "*" - checksum: 10c0/89aa0a65b04f4a7f709c35bbdc2f7830dff73e0335877d36a091c55fb174ce82e4b2c67690657978b03fc563ab4c20565ded0ed7faec94d0a384a9c5085dfe19 - languageName: node - linkType: hard - "@polka/url@npm:^1.0.0-next.24": version: 1.0.0-next.29 resolution: "@polka/url@npm:1.0.0-next.29" @@ -20063,7 +20049,6 @@ __metadata: "@babel/core": "npm:^7.25.2" "@expo/vector-icons": "npm:^15.0.2" "@expo/webpack-config": "npm:~19.0.1" - "@pchmn/expo-material3-theme": "npm:^1.3.2" "@react-native-async-storage/async-storage": "npm:2.2.0" "@react-native-masked-view/masked-view": "npm:0.3.2" "@react-navigation/bottom-tabs": "npm:^7.3.10" From 4833a0ddb09dbd1b564c56144473acd7edd2b257 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Thu, 2 Apr 2026 12:47:38 +0300 Subject: [PATCH 10/14] fix: update state opacity tokens --- src/components/ToggleButton/utils.ts | 2 +- src/components/__tests__/ToggleButton.test.tsx | 4 ++-- .../__tests__/__snapshots__/FAB.test.tsx.snap | 4 ++-- .../__snapshots__/IconButton.test.tsx.snap | 2 +- .../__snapshots__/ListSection.test.tsx.snap | 6 +++--- .../__snapshots__/ToggleButton.test.tsx.snap | 8 ++++---- src/styles/themes/DarkTheme.tsx | 9 ++++++--- src/styles/themes/LightTheme.tsx | 6 +++--- src/styles/themes/tokens.tsx | 14 +++++++++----- 9 files changed, 31 insertions(+), 24 deletions(-) diff --git a/src/components/ToggleButton/utils.ts b/src/components/ToggleButton/utils.ts index 152b39f609..2aad2fa904 100644 --- a/src/components/ToggleButton/utils.ts +++ b/src/components/ToggleButton/utils.ts @@ -12,7 +12,7 @@ export const getToggleButtonColor = ({ }) => { if (checked) { return color(theme.colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) + .alpha(tokens.md.ref.stateOpacity.pressed) .rgb() .string(); } diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx index 35b1d63484..fa50952936 100644 --- a/src/components/__tests__/ToggleButton.test.tsx +++ b/src/components/__tests__/ToggleButton.test.tsx @@ -53,7 +53,7 @@ describe('getToggleButtonColor', () => { it('should return correct color when checked and theme version 3', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: true })).toBe( color(getTheme().colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) + .alpha(tokens.md.ref.stateOpacity.pressed) .rgb() .string() ); @@ -62,7 +62,7 @@ describe('getToggleButtonColor', () => { it('should return correct color when checked and theme version 3, dark theme', () => { expect(getToggleButtonColor({ theme: getTheme(true), checked: true })).toBe( color(getTheme(true).colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) + .alpha(tokens.md.ref.stateOpacity.pressed) .rgb() .string() ); diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap index 5780dc385e..4adac1a1a5 100644 --- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap @@ -527,7 +527,7 @@ exports[`renders disabled FAB 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 27, 32, 0.12)", + "backgroundColor": "rgba(29, 27, 32, 0.1)", "borderRadius": 16, "opacity": 1, "shadowColor": "#000", @@ -551,7 +551,7 @@ exports[`renders disabled FAB 1`] = ` pointerEvents="auto" style={ { - "backgroundColor": "rgba(29, 27, 32, 0.12)", + "backgroundColor": "rgba(29, 27, 32, 0.1)", "borderRadius": 16, "flex": undefined, "shadowColor": "#000", diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap index 82bcdbac24..a2cf399c51 100644 --- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap @@ -26,7 +26,7 @@ exports[`renders disabled icon button 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(29, 27, 32, 0.12)", + "borderColor": "rgba(29, 27, 32, 0.1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index 10592128a0..231ee21106 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -69,7 +69,7 @@ exports[`renders list section with custom title style 1`] = ` "surfaceContainerLow": "rgba(247, 242, 250, 1)", "surfaceContainerLowest": "rgba(255, 255, 255, 1)", "surfaceDim": "rgba(222, 216, 225, 1)", - "surfaceDisabled": "rgba(29, 27, 32, 0.12)", + "surfaceDisabled": "rgba(29, 27, 32, 0.1)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", @@ -613,7 +613,7 @@ exports[`renders list section with subheader 1`] = ` "surfaceContainerLow": "rgba(247, 242, 250, 1)", "surfaceContainerLowest": "rgba(255, 255, 255, 1)", "surfaceDim": "rgba(222, 216, 225, 1)", - "surfaceDisabled": "rgba(29, 27, 32, 0.12)", + "surfaceDisabled": "rgba(29, 27, 32, 0.1)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", @@ -1155,7 +1155,7 @@ exports[`renders list section without subheader 1`] = ` "surfaceContainerLow": "rgba(247, 242, 250, 1)", "surfaceContainerLowest": "rgba(255, 255, 255, 1)", "surfaceDim": "rgba(222, 216, 225, 1)", - "surfaceDisabled": "rgba(29, 27, 32, 0.12)", + "surfaceDisabled": "rgba(29, 27, 32, 0.1)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 192912f020..ceda64dd79 100644 --- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -5,7 +5,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(74, 68, 88, 0.12)", + "backgroundColor": "rgba(74, 68, 88, 0.1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -25,7 +25,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(74, 68, 88, 0.12)", + "backgroundColor": "rgba(74, 68, 88, 0.1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -144,7 +144,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(74, 68, 88, 0.12)", + "backgroundColor": "rgba(74, 68, 88, 0.1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -164,7 +164,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(74, 68, 88, 0.12)", + "backgroundColor": "rgba(74, 68, 88, 0.1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, diff --git a/src/styles/themes/DarkTheme.tsx b/src/styles/themes/DarkTheme.tsx index 7d042802bb..3ae132a977 100644 --- a/src/styles/themes/DarkTheme.tsx +++ b/src/styles/themes/DarkTheme.tsx @@ -4,7 +4,7 @@ import { MD3LightTheme } from './LightTheme'; import { MD3Colors, tokens } from './tokens'; import type { MD3Theme } from '../../types'; -const { palette, opacity } = tokens.md.ref; +const { palette, stateOpacity } = tokens.md.ref; export const MD3DarkTheme: MD3Theme = { ...MD3LightTheme, @@ -25,8 +25,9 @@ export const MD3DarkTheme: MD3Theme = { surfaceContainerHigh: palette.neutral17, surfaceContainerHighest: palette.neutral22, surfaceVariant: palette.neutralVariant30, + //TODO: remove this surfaceDisabled: color(palette.neutral90) - .alpha(opacity.level2) + .alpha(stateOpacity.pressed) .rgb() .string(), background: palette.neutral6, @@ -40,8 +41,9 @@ export const MD3DarkTheme: MD3Theme = { onTertiaryContainer: palette.tertiary90, onSurface: palette.neutral90, onSurfaceVariant: palette.neutralVariant80, + //TODO: remove this onSurfaceDisabled: color(palette.neutral90) - .alpha(opacity.level4) + .alpha(stateOpacity.disabled) .rgb() .string(), onError: palette.error20, @@ -66,6 +68,7 @@ export const MD3DarkTheme: MD3Theme = { onTertiaryFixedVariant: palette.tertiary30, shadow: palette.neutral0, scrim: palette.neutral0, + //TODO: remove this backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(), elevation: { level0: 'transparent', diff --git a/src/styles/themes/LightTheme.tsx b/src/styles/themes/LightTheme.tsx index 3cb827a141..c7386d6d78 100644 --- a/src/styles/themes/LightTheme.tsx +++ b/src/styles/themes/LightTheme.tsx @@ -4,7 +4,7 @@ import { MD3Colors, tokens } from './tokens'; import type { MD3Theme } from '../../types'; import configureFonts from '../fonts'; -const { palette, opacity } = tokens.md.ref; +const { palette, stateOpacity } = tokens.md.ref; export const MD3LightTheme: MD3Theme = { dark: false, @@ -26,7 +26,7 @@ export const MD3LightTheme: MD3Theme = { surfaceContainerHighest: palette.neutral90, surfaceVariant: palette.neutralVariant90, surfaceDisabled: color(palette.neutral10) - .alpha(opacity.level2) + .alpha(stateOpacity.pressed) .rgb() .string(), background: palette.neutral98, @@ -41,7 +41,7 @@ export const MD3LightTheme: MD3Theme = { onSurface: palette.neutral10, onSurfaceVariant: palette.neutralVariant30, onSurfaceDisabled: color(palette.neutral10) - .alpha(opacity.level4) + .alpha(stateOpacity.disabled) .rgb() .string(), onError: palette.error100, diff --git a/src/styles/themes/tokens.tsx b/src/styles/themes/tokens.tsx index 81eeb0b732..51e52ae6bd 100644 --- a/src/styles/themes/tokens.tsx +++ b/src/styles/themes/tokens.tsx @@ -116,11 +116,15 @@ const ref = { weightMedium: '500' as Font['fontWeight'], }, - opacity: { - level1: 0.08, - level2: 0.12, - level3: 0.16, - level4: 0.38, + /** State layers opacity + * @see https://m3.material.io/foundations/interaction/states/state-layers + */ + stateOpacity: { + dragged: 0.16, + pressed: 0.1, + focus: 0.1, + hover: 0.08, + disabled: 0.38, }, }; From f9ac43b78fdec7cd4765d3d26cc044880f43ba97 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Fri, 3 Apr 2026 15:19:50 +0300 Subject: [PATCH 11/14] refactor: cleanup and fix colors * remove extra theme tokens (onSurfaceDisabled, backdrop replaced with scrim) * remove custom rippleColor from components * fix component colors as per MD guidelines --- example/src/Examples/FABExample.tsx | 8 - src/components/Appbar/AppbarAction.tsx | 14 +- .../BottomNavigation/BottomNavigationBar.tsx | 31 +- src/components/Button/Button.tsx | 53 +- src/components/Button/utils.tsx | 32 +- src/components/Checkbox/CheckboxAndroid.tsx | 10 +- src/components/Checkbox/CheckboxIOS.tsx | 5 +- src/components/Checkbox/CheckboxItem.tsx | 14 +- src/components/Checkbox/utils.ts | 56 +- src/components/Chip/Chip.tsx | 21 +- src/components/Chip/helpers.tsx | 88 +-- .../DataTable/DataTablePagination.tsx | 29 +- src/components/DataTable/DataTableTitle.tsx | 4 +- src/components/Drawer/DrawerItem.tsx | 10 - src/components/FAB/AnimatedFAB.tsx | 33 +- src/components/FAB/FAB.tsx | 26 +- src/components/FAB/FABGroup.tsx | 10 - src/components/FAB/utils.ts | 27 +- src/components/HelperText/HelperText.tsx | 63 +- src/components/HelperText/utils.ts | 15 +- src/components/IconButton/IconButton.tsx | 55 +- src/components/IconButton/utils.ts | 63 +- src/components/List/ListAccordion.tsx | 10 +- src/components/List/utils.ts | 15 +- src/components/Menu/MenuItem.tsx | 12 +- src/components/Menu/utils.ts | 41 +- src/components/Modal.tsx | 7 +- .../RadioButton/RadioButtonAndroid.tsx | 16 +- src/components/RadioButton/RadioButtonIOS.tsx | 3 +- .../RadioButton/RadioButtonItem.tsx | 14 +- src/components/Searchbar.tsx | 23 - .../SegmentedButtons/SegmentedButtonItem.tsx | 17 +- src/components/SegmentedButtons/utils.ts | 11 +- src/components/Snackbar.tsx | 10 - src/components/Switch/utils.ts | 2 +- src/components/TextInput/Addons/Underline.tsx | 3 + .../TextInput/Adornment/TextInputAffix.tsx | 11 +- .../TextInput/Adornment/TextInputIcon.tsx | 11 +- src/components/TextInput/Adornment/utils.ts | 30 +- src/components/TextInput/Label/InputLabel.tsx | 10 +- src/components/TextInput/TextInputFlat.tsx | 4 + .../TextInput/TextInputOutlined.tsx | 3 + src/components/TextInput/helpers.tsx | 46 +- src/components/TextInput/types.tsx | 1 + src/components/ToggleButton/ToggleButton.tsx | 7 - src/components/ToggleButton/utils.ts | 10 +- .../TouchableRipple.native.tsx | 11 +- src/components/TouchableRipple/utils.ts | 9 +- .../__tests__/Appbar/Appbar.test.tsx | 15 - .../Appbar/__snapshots__/Appbar.test.tsx.snap | 340 ++++---- src/components/__tests__/Button.test.tsx | 20 +- .../__snapshots__/CheckboxItem.test.tsx.snap | 5 + .../__tests__/Checkbox/utils.test.tsx | 147 +--- src/components/__tests__/Chip.test.tsx | 273 +------ src/components/__tests__/FAB.test.tsx | 78 -- src/components/__tests__/FABGroup.test.tsx | 42 +- src/components/__tests__/IconButton.test.tsx | 43 +- .../__tests__/ListAccordion.test.tsx | 40 - src/components/__tests__/MenuItem.test.tsx | 22 +- src/components/__tests__/Modal.test.tsx | 30 +- .../RadioButtonItem.test.tsx.snap | 4 + src/components/__tests__/Searchbar.test.tsx | 36 - .../__tests__/SegmentedButton.test.tsx | 9 +- src/components/__tests__/Snackbar.test.tsx | 17 - src/components/__tests__/Switch.test.tsx | 2 +- src/components/__tests__/TextInput.test.tsx | 43 +- .../__tests__/ToggleButton.test.tsx | 32 +- .../__snapshots__/Banner.test.tsx.snap | 12 + .../__snapshots__/Button.test.tsx.snap | 43 +- .../__snapshots__/Chip.test.tsx.snap | 26 +- .../__snapshots__/DataTable.test.tsx.snap | 741 ++++++++++-------- .../__tests__/__snapshots__/FAB.test.tsx.snap | 174 ---- .../__snapshots__/IconButton.test.tsx.snap | 346 ++++---- .../__snapshots__/ListItem.test.tsx.snap | 3 + .../__snapshots__/ListSection.test.tsx.snap | 12 +- .../__snapshots__/Menu.test.tsx.snap | 27 +- .../__snapshots__/MenuItem.test.tsx.snap | 23 +- .../__snapshots__/Searchbar.test.tsx.snap | 300 ++++--- .../SegmentedButton.test.tsx.snap | 2 + .../__snapshots__/Snackbar.test.tsx.snap | 3 + .../__snapshots__/TextInput.test.tsx.snap | 173 ++-- .../__snapshots__/ToggleButton.test.tsx.snap | 186 +++-- src/styles/themes/DarkTheme.tsx | 18 +- src/styles/themes/DynamicTheme.android.tsx | 4 +- src/styles/themes/LightTheme.tsx | 15 +- src/styles/themes/tokens.tsx | 1 + src/types.tsx | 59 +- 87 files changed, 1809 insertions(+), 2561 deletions(-) diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx index e7db1118a7..1ac542b371 100644 --- a/example/src/Examples/FABExample.tsx +++ b/example/src/Examples/FABExample.tsx @@ -95,14 +95,6 @@ const FABExample = () => { onPress={() => {}} visible={visible} /> - {}} - visible={visible} - disabled - /> & { * Custom color for action icon. */ color?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Name of the icon to show. */ @@ -90,7 +80,6 @@ const AppbarAction = forwardRef( accessibilityLabel, isLeading, theme: themeOverrides, - rippleColor, ...rest }: Props, ref @@ -113,7 +102,6 @@ const AppbarAction = forwardRef( accessibilityLabel={accessibilityLabel} animated ref={ref} - rippleColor={rippleColor} {...rest} /> ); diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 73cc992c91..2c66427a46 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -565,12 +565,15 @@ const BottomNavigationBar = ({ // We render the active icon and label on top of inactive ones and cross-fade them on change. // This trick gives the illusion that we are animating between active and inactive colors. // This is to ensure that we can use native driver, as colors cannot be animated with native driver. - const activeOpacity = focused ? 1 : 0; - const inactiveOpacity = shifting - ? active.interpolate({ - inputRange: [0, 1], - outputRange: [1, 0], - }) + const animatedActiveOpacity = active; + const animatedInactiveOpacity = active.interpolate({ + inputRange: [0, 1], + outputRange: [1, 0], + }); + + const staticActiveOpacity = focused ? 1 : 0; + const staticInactiveOpacity = shifting + ? animatedInactiveOpacity : focused ? 0 : 1; @@ -662,8 +665,8 @@ const BottomNavigationBar = ({ styles.iconWrapper, { opacity: isShiftingOrLabeled - ? activeOpacity - : activeOpacity, + ? animatedActiveOpacity + : staticActiveOpacity, }, ]} > @@ -686,8 +689,8 @@ const BottomNavigationBar = ({ styles.iconWrapper, { opacity: isShiftingOrLabeled - ? inactiveOpacity - : inactiveOpacity, + ? animatedInactiveOpacity + : staticInactiveOpacity, }, ]} > @@ -726,8 +729,8 @@ const BottomNavigationBar = ({ styles.labelWrapper, { opacity: isShiftingOrLabeled - ? activeOpacity - : activeOpacity, + ? animatedActiveOpacity + : staticActiveOpacity, }, ]} > @@ -759,8 +762,8 @@ const BottomNavigationBar = ({ styles.labelWrapper, { opacity: isShiftingOrLabeled - ? inactiveOpacity - : inactiveOpacity, + ? animatedInactiveOpacity + : staticInactiveOpacity, }, ]} > diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 9f1aa71e8a..f57fa881fd 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { AccessibilityRole, Animated, - ColorValue, GestureResponderEvent, Platform, PressableAndroidRippleConfig, @@ -13,8 +12,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import { ButtonMode, getButtonColors, @@ -66,10 +63,6 @@ export type Props = $Omit, 'mode'> & { * Custom button's text color. */ textColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Whether to show a loading indicator. */ @@ -186,7 +179,6 @@ const Button = ( icon, buttonColor: customButtonColor, textColor: customTextColor, - rippleColor: customRippleColor, children, accessibilityLabel, accessibilityHint, @@ -282,18 +274,21 @@ const Button = ( const borderRadius = 5 * roundness; const iconSize = 18; - const { backgroundColor, borderColor, textColor, borderWidth } = - getButtonColors({ - customButtonColor, - customTextColor, - theme, - mode, - disabled, - dark, - }); - - const rippleColor = - customRippleColor || color(textColor).alpha(0.12).rgb().string(); + const { + backgroundColor, + borderColor, + textColor, + textOpacity, + borderWidth, + backgroundOpacity, + } = getButtonColors({ + customButtonColor, + customTextColor, + theme, + mode, + disabled, + dark, + }); const touchableStyle = { ...borderRadiusStyles, @@ -301,7 +296,7 @@ const Button = ( }; const buttonStyle = { - backgroundColor, + backgroundColor: backgroundOpacity < 1 ? 'transparent' : backgroundColor, borderColor, borderWidth, ...touchableStyle, @@ -348,6 +343,19 @@ const Button = ( elevation={elevation} container > + {backgroundOpacity < 1 && ( + + )} - + {icon && loading !== true ? ( { - if (disabled && isMode('outlined')) { - return theme.colors.surfaceDisabled; - } - +const getButtonBorderColor = ({ isMode, theme }: BaseProps) => { if (isMode('outlined')) { - return theme.colors.outline; + return theme.colors.outlineVariant; } return 'transparent'; @@ -174,15 +167,24 @@ export const getButtonColors = ({ dark, }); - const borderColor = getButtonBorderColor({ isMode, theme, disabled }); + const borderColor = getButtonBorderColor({ isMode, theme }); const borderWidth = getButtonBorderWidth({ isMode, theme }); + const textOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled; + + const backgroundOpacity = + disabled && !isMode('outlined') && !isMode('text') + ? stateOpacity.pressed + : stateOpacity.enabled; + return { backgroundColor, borderColor, textColor, + textOpacity, borderWidth, + backgroundOpacity, }; }; diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx index 642602b0fa..a4e6fb0c23 100644 --- a/src/components/Checkbox/CheckboxAndroid.tsx +++ b/src/components/Checkbox/CheckboxAndroid.tsx @@ -99,7 +99,7 @@ const CheckboxAndroid = ({ const checked = status === 'checked'; const indeterminate = status === 'indeterminate'; - const { rippleColor, selectionControlColor } = + const { selectionControlColor, selectionControlOpacity } = getAndroidSelectionControlColor({ theme, disabled, @@ -123,7 +123,6 @@ const CheckboxAndroid = ({ - + - + { - if (disabled) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - - return color(checkedColor).fade(0.32).rgb().string(); -}; - const getAndroidControlColor = ({ theme, checked, @@ -60,7 +45,7 @@ const getAndroidControlColor = ({ disabled?: boolean; }) => { if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.onSurface; } if (checked) { @@ -87,8 +72,11 @@ export const getAndroidSelectionControlColor = ({ theme, customUncheckedColor, }); + const selectionControlOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { - rippleColor: getAndroidRippleColor({ theme, checkedColor, disabled }), selectionControlColor: getAndroidControlColor({ theme, disabled, @@ -96,6 +84,7 @@ export const getAndroidSelectionControlColor = ({ checkedColor, uncheckedColor, }), + selectionControlOpacity, }; }; @@ -109,7 +98,7 @@ const getIOSCheckedColor = ({ disabled?: boolean; }) => { if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.primary; } if (customColor) { @@ -119,21 +108,6 @@ const getIOSCheckedColor = ({ return theme.colors.primary; }; -const getIOSRippleColor = ({ - theme, - checkedColor, - disabled, -}: { - theme: InternalTheme; - checkedColor: string; - disabled?: boolean; -}) => { - if (disabled) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - return color(checkedColor).fade(0.32).rgb().string(); -}; - export const getSelectionControlIOSColor = ({ theme, disabled, @@ -144,12 +118,12 @@ export const getSelectionControlIOSColor = ({ customColor?: string; }) => { const checkedColor = getIOSCheckedColor({ theme, disabled, customColor }); + const checkedColorOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { checkedColor, - rippleColor: getIOSRippleColor({ - theme, - checkedColor, - disabled, - }), + checkedColorOpacity, }; }; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index c3ab6144dc..5243482749 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { AccessibilityState, Animated, - ColorValue, GestureResponderEvent, Platform, PressableAndroidRippleConfig, @@ -73,10 +72,6 @@ export type Props = $Omit, 'mode'> & { * Note: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`. */ showSelectedCheck?: boolean; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch. */ @@ -201,8 +196,6 @@ const Chip = ({ theme: themeOverrides, testID = 'chip', selectedColor, - rippleColor: customRippleColor, - showSelectedOverlay = false, showSelectedCheck = true, ellipsizeMode, compact, @@ -263,17 +256,15 @@ const Chip = ({ borderColor, textColor, iconColor, - rippleColor, + contentOpacity, selectedBackgroundColor, backgroundColor, } = getChipColors({ isOutlined, theme, selectedColor, - showSelectedOverlay, customBackgroundColor, disabled, - customRippleColor, }); const accessibilityState: AccessibilityState = { @@ -324,7 +315,6 @@ const Chip = ({ onPressIn={hasPassedTouchHandler ? handlePressIn : undefined} onPressOut={hasPassedTouchHandler ? handlePressOut : undefined} delayLongPress={delayLongPress} - rippleColor={rippleColor} disabled={disabled} accessibilityLabel={accessibilityLabel} accessibilityRole={accessibilityRole} @@ -333,7 +323,14 @@ const Chip = ({ theme={theme} hitSlop={hitSlop} > - + {avatar && !icon ? ( ; }; @@ -28,14 +31,14 @@ const getBorderColor = ({ } if (disabled) { - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); + return theme.colors.surfaceContainer; } if (isSelectedColor) { return color(selectedColor).alpha(0.29).rgb().string(); } - return theme.colors.outline; + return theme.colors.outlineVariant; }; const getTextColor = ({ @@ -49,7 +52,7 @@ const getTextColor = ({ const isSelectedColor = selectedColor !== undefined; if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.onSurface; } if (isSelectedColor) { @@ -90,7 +93,7 @@ const getBackgroundColor = ({ if (isOutlined) { return 'transparent'; } - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); + return theme.colors.surfaceContainerLow; } return getDefaultBackgroundColor({ theme, isOutlined }); @@ -101,42 +104,15 @@ const getSelectedBackgroundColor = ({ isOutlined, disabled, customBackgroundColor, - showSelectedOverlay, }: BaseProps & { customBackgroundColor?: ColorValue; - showSelectedOverlay?: boolean; }) => { - const backgroundColor = getBackgroundColor({ + return getBackgroundColor({ theme, disabled, isOutlined, customBackgroundColor, }); - - if (isOutlined) { - if (showSelectedOverlay) { - return color(backgroundColor) - .mix(color(theme.colors.onSurfaceVariant), 0.12) - .rgb() - .string(); - } - return color(backgroundColor) - .mix(color(theme.colors.onSurfaceVariant), 0) - .rgb() - .string(); - } - - if (showSelectedOverlay) { - return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0.12) - .rgb() - .string(); - } - - return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0) - .rgb() - .string(); }; const getIconColor = ({ @@ -150,7 +126,7 @@ const getIconColor = ({ const isSelectedColor = selectedColor !== undefined; if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.onSurface; } if (isSelectedColor) { @@ -164,50 +140,16 @@ const getIconColor = ({ return theme.colors.onSecondaryContainer; }; -const getRippleColor = ({ - theme, - isOutlined, - disabled, - selectedColor, - customRippleColor, -}: BaseProps & { - selectedBackgroundColor: string; - selectedColor?: string; - customRippleColor?: ColorValue; -}) => { - if (customRippleColor) { - return customRippleColor; - } - - const isSelectedColor = selectedColor !== undefined; - const textColor = getTextColor({ - theme, - disabled, - selectedColor, - isOutlined, - }); - - if (isSelectedColor) { - return color(selectedColor).alpha(0.12).rgb().string(); - } - - return color(textColor).alpha(0.12).rgb().string(); -}; - export const getChipColors = ({ isOutlined, theme, selectedColor, - showSelectedOverlay, customBackgroundColor, disabled, - customRippleColor, }: BaseProps & { customBackgroundColor?: ColorValue; disabled?: boolean; - showSelectedOverlay?: boolean; selectedColor?: string; - customRippleColor?: ColorValue; }) => { const baseChipColorProps = { theme, isOutlined, disabled }; @@ -219,9 +161,12 @@ export const getChipColors = ({ const selectedBackgroundColor = getSelectedBackgroundColor({ ...baseChipColorProps, customBackgroundColor, - showSelectedOverlay, }); + const contentOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { borderColor: getBorderColor({ ...baseChipColorProps, @@ -236,12 +181,7 @@ export const getChipColors = ({ ...baseChipColorProps, selectedColor, }), - rippleColor: getRippleColor({ - ...baseChipColorProps, - selectedColor, - selectedBackgroundColor, - customRippleColor, - }), + contentOpacity, backgroundColor, selectedBackgroundColor, }; diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx index c7a5375f82..6a3fc52b3d 100644 --- a/src/components/DataTable/DataTablePagination.tsx +++ b/src/components/DataTable/DataTablePagination.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - ColorValue, I18nManager, StyleProp, StyleSheet, @@ -8,7 +7,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; @@ -57,14 +55,6 @@ type PaginationDropdownProps = { * The function to set the number of rows per page. */ onItemsPerPageChange?: (numberOfItemsPerPage: number) => void; - /** - * Color of the dropdown item ripple effect. - */ - dropdownItemRippleColor?: ColorValue; - /** - * Color of the select page dropdown ripple effect. - */ - selectPageDropdownRippleColor?: ColorValue; /** * @optional */ @@ -88,10 +78,6 @@ type PaginationControlsProps = { * Whether to show fast forward and fast rewind buttons in pagination. False by default. */ showFastPaginationControls?: boolean; - /** - * Color of the pagination control ripple effect. - */ - paginationControlRippleColor?: ColorValue; /** * @optional */ @@ -104,7 +90,6 @@ const PaginationControls = ({ onPageChange, showFastPaginationControls, theme: themeOverrides, - paginationControlRippleColor, }: PaginationControlsProps) => { const theme = useInternalTheme(themeOverrides); @@ -123,7 +108,6 @@ const PaginationControls = ({ /> )} iconColor={textColor} - rippleColor={paginationControlRippleColor} disabled={page === 0} onPress={() => onPageChange(0)} accessibilityLabel="page-first" @@ -140,7 +124,6 @@ const PaginationControls = ({ /> )} iconColor={textColor} - rippleColor={paginationControlRippleColor} disabled={page === 0} onPress={() => onPageChange(page - 1)} accessibilityLabel="chevron-left" @@ -156,7 +139,6 @@ const PaginationControls = ({ /> )} iconColor={textColor} - rippleColor={paginationControlRippleColor} disabled={numberOfPages === 0 || page === numberOfPages - 1} onPress={() => onPageChange(page + 1)} accessibilityLabel="chevron-right" @@ -173,7 +155,6 @@ const PaginationControls = ({ /> )} iconColor={textColor} - rippleColor={paginationControlRippleColor} disabled={numberOfPages === 0 || page === numberOfPages - 1} onPress={() => onPageChange(numberOfPages - 1)} accessibilityLabel="page-last" @@ -189,8 +170,6 @@ const PaginationDropdown = ({ numberOfItemsPerPage, onItemsPerPageChange, theme: themeOverrides, - selectPageDropdownRippleColor, - dropdownItemRippleColor, }: PaginationDropdownProps) => { const theme = useInternalTheme(themeOverrides); const { colors } = theme; @@ -209,7 +188,6 @@ const PaginationDropdown = ({ icon="menu-down" contentStyle={styles.contentStyle} theme={theme} - rippleColor={selectPageDropdownRippleColor} > {`${numberOfItemsPerPage}`} @@ -227,7 +205,6 @@ const PaginationDropdown = ({ onItemsPerPageChange?.(option); toggleSelect(false); }} - rippleColor={dropdownItemRippleColor} title={option} theme={theme} /> @@ -304,13 +281,11 @@ const DataTablePagination = ({ onItemsPerPageChange, selectPageDropdownLabel, selectPageDropdownAccessibilityLabel, - selectPageDropdownRippleColor, - dropdownItemRippleColor, theme: themeOverrides, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const labelColor = color(theme.colors.onSurface).alpha(0.6).rgb().string(); + const labelColor = theme.colors.onSurfaceVariant; return ( diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx index c427ac26b4..3f911123b4 100644 --- a/src/components/DataTable/DataTableTitle.tsx +++ b/src/components/DataTable/DataTableTitle.tsx @@ -11,8 +11,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; import MaterialCommunityIcon from '../MaterialCommunityIcon'; @@ -107,7 +105,7 @@ const DataTableTitle = ({ const textColor = theme.colors.onSurface; - const alphaTextColor = color(textColor).alpha(0.6).rgb().string(); + const alphaTextColor = theme.colors.onSurfaceVariant; const spin = spinAnim.interpolate({ inputRange: [0, 1], diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx index e835bc6a79..e556e61a07 100644 --- a/src/components/Drawer/DrawerItem.tsx +++ b/src/components/Drawer/DrawerItem.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - ColorValue, GestureResponderEvent, PressableAndroidRippleConfig, StyleProp, @@ -9,8 +8,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; import Icon, { IconSource } from '../Icon'; @@ -57,10 +54,6 @@ export type Props = React.ComponentPropsWithRef & { * Specifies the largest possible scale a label font can reach. */ labelMaxFontSizeMultiplier?: number; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Sets additional distance outside of element in which a press can be detected. */ @@ -97,7 +90,6 @@ const DrawerItem = ({ active, disabled, theme: themeOverrides, - rippleColor: customRippleColor, style, onPress, background, @@ -117,7 +109,6 @@ const DrawerItem = ({ const labelMargin = icon ? 12 : 0; const borderRadius = 7 * roundness; - const rippleColor = color(contentColor).alpha(0.12).rgb().string(); const font = theme.fonts.labelLarge; return ( @@ -131,7 +122,6 @@ const DrawerItem = ({ accessibilityRole="button" accessibilityState={{ selected: active }} accessibilityLabel={accessibilityLabel} - rippleColor={customRippleColor || rippleColor} theme={theme} hitSlop={hitSlop} > diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index b6b027a919..aae9a2916b 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import type { AccessibilityState, - ColorValue, NativeSyntheticEvent, PressableAndroidRippleConfig, TextLayoutEventData, @@ -20,8 +19,6 @@ import { Text, } from 'react-native'; -import color from 'color'; - import { getCombinedStyles, getFABColors, getLabelSizeWeb } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { $Omit, $RemoveChildren, ThemeProp } from '../../types'; @@ -67,14 +64,6 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { * Custom color for the icon and label of the `FAB`. */ color?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; - /** - * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch. - */ - disabled?: boolean; /** * Whether `FAB` is currently visible. */ @@ -213,8 +202,6 @@ const AnimatedFAB = ({ accessibilityLabel = label, accessibilityState, color: customColor, - rippleColor: customRippleColor, - disabled, onPress, onLongPress, delayLongPress, @@ -308,14 +295,10 @@ const AnimatedFAB = ({ const { backgroundColor, foregroundColor } = getFABColors({ theme, variant, - disabled, customColor, customBackgroundColor, }); - const rippleColor = - customRippleColor || color(foregroundColor).alpha(0.12).rgb().string(); - const extendedWidth = textWidth + SIZE + borderRadius; const distance = isAnimatedFromRight @@ -370,14 +353,9 @@ const AnimatedFAB = ({ ...font, }; - const md3Elevation = disabled || !isIOS ? 0 : 3; - - const baseStyle = [ - StyleSheet.absoluteFill, - disabled ? styles.disabled : styles.shadow, - ]; + const md3Elevation = !isIOS ? 0 : 3; - const newAccessibilityState = { ...accessibilityState, disabled }; + const baseStyle = [StyleSheet.absoluteFill, styles.shadow]; return ( , 'mode'> & { * Custom color for the icon and label of the `FAB`. */ color?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; - /** - * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch. - */ - disabled?: boolean; /** * Whether `FAB` is currently visible. */ @@ -189,8 +180,6 @@ const FAB = forwardRef( accessibilityState, animated = true, color: customColor, - rippleColor: customRippleColor, - disabled, onPress, onLongPress, delayLongPress, @@ -242,13 +231,11 @@ const FAB = forwardRef( backgroundColor: customBackgroundColor, } = (StyleSheet.flatten(style) || {}) as ViewStyle; - const { backgroundColor, foregroundColor, rippleColor } = getFABColors({ + const { backgroundColor, foregroundColor } = getFABColors({ theme, variant, - disabled, customColor, customBackgroundColor, - customRippleColor, }); const isLargeSize = size === 'large'; @@ -263,9 +250,7 @@ const FAB = forwardRef( ...font, }; - const md3Elevation = isFlatMode || disabled ? 0 : 3; - - const newAccessibilityState = { ...accessibilityState, disabled }; + const md3Elevation = isFlatMode ? 0 : 3; return ( ( onPress={onPress} onLongPress={onLongPress} delayLongPress={delayLongPress} - rippleColor={rippleColor} - disabled={disabled} accessibilityLabel={accessibilityLabel} accessibilityRole="button" - accessibilityState={newAccessibilityState} + accessibilityState={accessibilityState} testID={testID} style={{ borderRadius }} {...rest} @@ -359,9 +342,6 @@ const styles = StyleSheet.create({ uppercaseLabel: { textTransform: 'uppercase', }, - disabled: { - elevation: 0, - }, }); export default FAB; diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index 61f3c3cb9b..6c09fadf7e 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - ColorValue, GestureResponderEvent, Pressable, StyleProp, @@ -43,7 +42,6 @@ export type Props = { * - `toggleStackOnLongPress`: callback that is called when `FAB` is long pressed * - `size`: size of action item. Defaults to `small`. @supported Available in v5.x * - `testID`: testID to be used on tests - * - `rippleColor`: color of the ripple effect. */ actions: Array<{ icon: IconSource; @@ -60,7 +58,6 @@ export type Props = { onPress: (e: GestureResponderEvent) => void; size?: 'small' | 'medium'; testID?: string; - rippleColor?: ColorValue; }>; /** * Icon to display for the `FAB`. @@ -79,10 +76,6 @@ export type Props = { * Custom backdrop color for opened speed dial background. */ backdropColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Function to execute on pressing the `FAB`. */ @@ -221,7 +214,6 @@ const FABGroup = ({ variant = 'primary', enableLongPressWhenStackOpened = false, backdropColor: customBackdropColor, - rippleColor, }: Props) => { const theme = useInternalTheme(themeOverrides); const { top, bottom, right, left } = useSafeAreaInsets(); @@ -465,7 +457,6 @@ const FABGroup = ({ importantForAccessibility="no-hide-descendants" testID={it.testID} visible={open} - rippleColor={it.rippleColor} /> ); @@ -486,7 +477,6 @@ const FABGroup = ({ label={label} testID={testID} variant={variant} - rippleColor={rippleColor} /> diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts index c0ef6b0485..2eeea39010 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -7,8 +7,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import type { InternalTheme } from '../../types'; type GetCombinedStylesProps = { @@ -29,7 +27,6 @@ type Variant = 'primary' | 'secondary' | 'tertiary' | 'surface'; type BaseProps = { isVariant: (variant: Variant) => boolean; theme: InternalTheme; - disabled?: boolean; }; export const getCombinedStyles = ({ @@ -165,17 +162,12 @@ export const getCombinedStyles = ({ const getBackgroundColor = ({ theme, isVariant, - disabled, customBackgroundColor, }: BaseProps & { customBackgroundColor?: ColorValue }) => { - if (customBackgroundColor && !disabled) { + if (customBackgroundColor) { return customBackgroundColor; } - if (disabled) { - return theme.colors.surfaceDisabled; - } - if (isVariant('primary')) { return theme.colors.primaryContainer; } @@ -198,17 +190,12 @@ const getBackgroundColor = ({ const getForegroundColor = ({ theme, isVariant, - disabled, customColor, }: BaseProps & { customColor?: string }) => { - if (typeof customColor !== 'undefined' && !disabled) { + if (typeof customColor !== 'undefined') { return customColor; } - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - if (isVariant('primary')) { return theme.colors.onPrimaryContainer; } @@ -231,23 +218,19 @@ const getForegroundColor = ({ export const getFABColors = ({ theme, variant, - disabled, customColor, customBackgroundColor, - customRippleColor, }: { theme: InternalTheme; variant: string; - disabled?: boolean; customColor?: string; customBackgroundColor?: ColorValue; - customRippleColor?: ColorValue; }) => { const isVariant = (variantToCompare: Variant) => { return variant === variantToCompare; }; - const baseFABColorProps = { theme, isVariant, disabled }; + const baseFABColorProps = { theme, isVariant }; const backgroundColor = getBackgroundColor({ ...baseFABColorProps, @@ -262,8 +245,6 @@ export const getFABColors = ({ return { backgroundColor, foregroundColor, - rippleColor: - customRippleColor || color(foregroundColor).alpha(0.12).rgb().string(), }; }; @@ -281,7 +262,7 @@ const getBackdropColor = ({ if (customBackdropColor) { return customBackdropColor; } - return color(theme.colors.background).alpha(0.95).rgb().string(); + return theme.colors.scrim; }; const getStackedFABBackgroundColor = ({ theme }: { theme: InternalTheme }) => { diff --git a/src/components/HelperText/HelperText.tsx b/src/components/HelperText/HelperText.tsx index 8043968cff..6fc44d58a5 100644 --- a/src/components/HelperText/HelperText.tsx +++ b/src/components/HelperText/HelperText.tsx @@ -5,6 +5,7 @@ import { StyleProp, StyleSheet, TextStyle, + View, } from 'react-native'; import { getTextColor } from './utils'; @@ -122,36 +123,42 @@ const HelperText = ({ textHeight = e.nativeEvent.layout.height; }; - const textColor = getTextColor({ theme, disabled, type }); + const { color: textColor, opacity: textOpacity } = getTextColor({ + theme, + disabled, + type, + }); return ( - - {rest.children} - + + + {rest.children} + + ); }; diff --git a/src/components/HelperText/utils.ts b/src/components/HelperText/utils.ts index 493ed52eb6..214948c767 100644 --- a/src/components/HelperText/utils.ts +++ b/src/components/HelperText/utils.ts @@ -1,5 +1,8 @@ +import { tokens } from '../../styles/themes/tokens'; import type { InternalTheme } from '../../types'; +const { stateOpacity } = tokens.md.ref; + type BaseProps = { theme: InternalTheme; disabled?: boolean; @@ -8,12 +11,18 @@ type BaseProps = { export function getTextColor({ theme, disabled, type }: BaseProps) { if (type === 'error') { - return theme.colors.error; + return { color: theme.colors.error, opacity: stateOpacity.enabled }; } if (disabled) { - return theme.colors.onSurfaceDisabled; + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.disabled, + }; } - return theme.colors.onSurfaceVariant; + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.enabled, + }; } diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 2da6e12fcf..1e03f2c923 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -6,7 +6,6 @@ import { ViewStyle, View, Animated, - ColorValue, } from 'react-native'; import { getIconButtonColor } from './utils'; @@ -42,10 +41,6 @@ export type Props = Omit<$RemoveChildren, 'style'> & { * Background color of the icon container. */ containerColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * @supported Available in v5.x with theme version 3 * Whether icon button is selected. A selected button receives alternative combination of icon and container colors. @@ -120,7 +115,6 @@ const IconButton = forwardRef( icon, iconColor: customIconColor, containerColor: customContainerColor, - rippleColor: customRippleColor, size = 24, accessibilityLabel, disabled, @@ -141,16 +135,20 @@ const IconButton = forwardRef( const IconComponent = animated ? CrossFadeIcon : Icon; - const { iconColor, rippleColor, backgroundColor, borderColor } = - getIconButtonColor({ - theme, - disabled, - selected, - mode, - customIconColor, - customContainerColor, - customRippleColor, - }); + const { + iconColor, + iconOpacity, + backgroundColor, + borderColor, + backgroundOpacity, + } = getIconButtonColor({ + theme, + disabled, + selected, + mode, + customIconColor, + customContainerColor, + }); const buttonSize = size + 2 * PADDING; @@ -171,7 +169,8 @@ const IconButton = forwardRef( testID={`${testID}-container`} style={[ { - backgroundColor, + backgroundColor: + backgroundOpacity < 1 ? undefined : backgroundColor, width: buttonSize, height: buttonSize, }, @@ -182,11 +181,19 @@ const IconButton = forwardRef( container elevation={0} > + {backgroundOpacity < 1 && ( + + )} ( testID={testID} {...rest} > - {loading ? ( - - ) : ( - - )} + + {loading ? ( + + ) : ( + + )} + ); diff --git a/src/components/IconButton/utils.ts b/src/components/IconButton/utils.ts index 3eb6ae178c..aa1c5d65b7 100644 --- a/src/components/IconButton/utils.ts +++ b/src/components/IconButton/utils.ts @@ -1,9 +1,8 @@ -import type { ColorValue } from 'react-native'; - -import color from 'color'; - +import { tokens } from '../../styles/themes/tokens'; import type { InternalTheme } from '../../types'; +const { stateOpacity } = tokens.md.ref; + type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal'; type BaseProps = { @@ -13,20 +12,6 @@ type BaseProps = { selected?: boolean; }; -const getBorderColor = ({ - theme, - disabled, -}: { - theme: InternalTheme; - disabled?: boolean; -}) => { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - return theme.colors.outline; -}; - const getBackgroundColor = ({ theme, isMode, @@ -36,7 +21,7 @@ const getBackgroundColor = ({ }: BaseProps & { customContainerColor?: string }) => { if (disabled) { if (isMode('contained') || isMode('contained-tonal')) { - return theme.colors.surfaceDisabled; + return theme.colors.onSurface; } } @@ -75,7 +60,7 @@ const getIconColor = ({ customIconColor, }: BaseProps & { customIconColor?: string }) => { if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.onSurface; } if (typeof customIconColor !== 'undefined') { @@ -109,20 +94,6 @@ const getIconColor = ({ return theme.colors.onSurfaceVariant; }; -const getRippleColor = ({ - iconColor, - customRippleColor, -}: { - theme: InternalTheme; - iconColor: string; - customRippleColor?: ColorValue; -}) => { - if (customRippleColor) { - return customRippleColor; - } - return color(iconColor).alpha(0.12).rgb().string(); -}; - export const getIconButtonColor = ({ theme, disabled, @@ -130,7 +101,6 @@ export const getIconButtonColor = ({ selected, customIconColor, customContainerColor, - customRippleColor, }: { theme: InternalTheme; disabled?: boolean; @@ -138,7 +108,6 @@ export const getIconButtonColor = ({ mode?: IconButtonMode; customIconColor?: string; customContainerColor?: string; - customRippleColor?: ColorValue; }) => { const isMode = (modeToCompare: IconButtonMode) => { return mode === modeToCompare; @@ -156,13 +125,23 @@ export const getIconButtonColor = ({ customIconColor, }); + const iconOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled; + + const backgroundColor = getBackgroundColor({ + ...baseIconColorProps, + customContainerColor, + }); + + const backgroundOpacity = + disabled && (isMode('contained') || isMode('contained-tonal')) + ? stateOpacity.pressed + : stateOpacity.enabled; + return { iconColor, - backgroundColor: getBackgroundColor({ - ...baseIconColorProps, - customContainerColor, - }), - rippleColor: getRippleColor({ theme, iconColor, customRippleColor }), - borderColor: getBorderColor({ theme, disabled }), + iconOpacity, + backgroundColor, + borderColor: theme.colors.outlineVariant, + backgroundOpacity, }; }; diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 2503425473..5a39b5439b 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { - ColorValue, GestureResponderEvent, I18nManager, NativeSyntheticEvent, @@ -93,10 +92,6 @@ export type Props = { * Style that is passed to Description element. */ descriptionStyle?: StyleProp; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Truncate Title text such that the total number of lines does not * exceed this number. @@ -186,7 +181,6 @@ const ListAccordion = ({ descriptionStyle, titleNumberOfLines = 1, descriptionNumberOfLines = 2, - rippleColor: customRippleColor, style, containerStyle, contentStyle, @@ -238,10 +232,9 @@ const ListAccordion = ({ ? groupContext.expandedId === id : expandedInternal; - const { descriptionColor, titleTextColor, rippleColor } = getAccordionColors({ + const { descriptionColor, titleTextColor } = getAccordionColors({ theme, isExpanded, - customRippleColor, }); const handlePress = @@ -256,7 +249,6 @@ const ListAccordion = ({ onPress={handlePress} onLongPress={onLongPress} delayLongPress={delayLongPress} - rippleColor={rippleColor} accessibilityRole="button" accessibilityState={{ expanded: isExpanded }} accessibilityLabel={accessibilityLabel} diff --git a/src/components/List/utils.ts b/src/components/List/utils.ts index 89cabbaef1..08eef50656 100644 --- a/src/components/List/utils.ts +++ b/src/components/List/utils.ts @@ -1,12 +1,5 @@ -import { - FlexAlignType, - ColorValue, - StyleSheet, - StyleProp, - ViewStyle, -} from 'react-native'; +import { FlexAlignType, StyleSheet, StyleProp, ViewStyle } from 'react-native'; -import color from 'color'; import type { EllipsizeProp, InternalTheme, ThemeProp } from 'src/types'; type Description = @@ -88,11 +81,9 @@ const styles = StyleSheet.create({ export const getAccordionColors = ({ theme, isExpanded, - customRippleColor, }: { theme: InternalTheme; isExpanded?: boolean; - customRippleColor?: ColorValue; }) => { const titleColor = theme.colors.onSurface; @@ -100,13 +91,9 @@ export const getAccordionColors = ({ const titleTextColor = isExpanded ? theme.colors?.primary : titleColor; - const rippleColor = - customRippleColor || color(titleTextColor).alpha(0.12).rgb().string(); - return { titleColor, descriptionColor, titleTextColor, - rippleColor, }; }; diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index b125357652..cbec2aaab7 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { AccessibilityState, - ColorValue, GestureResponderEvent, PressableAndroidRippleConfig, StyleProp, @@ -82,10 +81,6 @@ export type Props = { * Style that is passed to the Title element. */ titleStyle?: StyleProp; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * @optional */ @@ -142,7 +137,6 @@ const MenuItem = ({ containerStyle, contentStyle, titleStyle, - rippleColor: customRippleColor, testID = 'menu-item', accessibilityLabel, accessibilityState, @@ -151,10 +145,9 @@ const MenuItem = ({ hitSlop, }: Props) => { const theme = useInternalTheme(themeOverrides); - const { titleColor, iconColor, rippleColor } = getMenuItemColor({ + const { titleColor, iconColor, contentOpacity } = getMenuItemColor({ theme, disabled, - customRippleColor, }); const containerPadding = 12; @@ -191,10 +184,9 @@ const MenuItem = ({ accessibilityLabel={accessibilityLabel} accessibilityRole="menuitem" accessibilityState={newAccessibilityState} - rippleColor={rippleColor} hitSlop={hitSlop} > - + {leadingIcon ? ( diff --git a/src/components/Menu/utils.ts b/src/components/Menu/utils.ts index 226233de32..4288676bbd 100644 --- a/src/components/Menu/utils.ts +++ b/src/components/Menu/utils.ts @@ -1,10 +1,9 @@ -import type { ColorValue } from 'react-native'; - -import color from 'color'; - +import { tokens } from '../../styles/themes/tokens'; import type { InternalTheme } from '../../types'; import type { IconSource } from '../Icon'; +const { stateOpacity } = tokens.md.ref; + export const MIN_WIDTH = 112; export const MAX_WIDTH = 280; @@ -17,45 +16,25 @@ type ContentProps = { type ColorProps = { theme: InternalTheme; disabled?: boolean; - customRippleColor?: ColorValue; }; -const getTitleColor = ({ theme, disabled }: ColorProps) => { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - +const getTitleColor = ({ theme }: ColorProps) => { return theme.colors.onSurface; }; -const getIconColor = ({ theme, disabled }: ColorProps) => { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - +const getIconColor = ({ theme }: ColorProps) => { return theme.colors.onSurfaceVariant; }; -const getRippleColor = ({ - theme, - customRippleColor, -}: Omit) => { - if (customRippleColor) { - return customRippleColor; - } - - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); -}; +export const getMenuItemColor = ({ theme, disabled }: ColorProps) => { + const contentOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; -export const getMenuItemColor = ({ - theme, - disabled, - customRippleColor, -}: ColorProps) => { return { titleColor: getTitleColor({ theme, disabled }), iconColor: getIconColor({ theme, disabled }), - rippleColor: getRippleColor({ theme, customRippleColor }), + contentOpacity, }; }; diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index dc55c3cf7a..e43006eb5d 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -201,8 +201,11 @@ function Modal({ style={[ styles.backdrop, { - backgroundColor: theme.colors?.backdrop, - opacity, + backgroundColor: theme.colors.scrim, + opacity: opacity.interpolate({ + inputRange: [0, 1], + outputRange: [0, 0.32], + }), }, ]} testID={`${testID}-backdrop`} diff --git a/src/components/RadioButton/RadioButtonAndroid.tsx b/src/components/RadioButton/RadioButtonAndroid.tsx index 515efe5eff..4b68455101 100644 --- a/src/components/RadioButton/RadioButtonAndroid.tsx +++ b/src/components/RadioButton/RadioButtonAndroid.tsx @@ -110,20 +110,18 @@ const RadioButtonAndroid = ({ value, }) === 'checked'; - const { rippleColor, selectionControlColor } = - getAndroidSelectionControlColor({ - theme, - disabled, - checked, - customColor: rest.color, - customUncheckedColor: rest.uncheckedColor, - }); + const { selectionControlColor } = getAndroidSelectionControlColor({ + theme, + disabled, + checked, + customColor: rest.color, + customUncheckedColor: rest.uncheckedColor, + }); return ( diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx index 8a1c13eeeb..0e118d8c69 100644 --- a/src/components/Searchbar.tsx +++ b/src/components/Searchbar.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - ColorValue, GestureResponderEvent, I18nManager, Platform, @@ -14,8 +13,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import ActivityIndicator from './ActivityIndicator'; import Divider from './Divider'; import type { IconSource } from './Icon'; @@ -56,10 +53,6 @@ export type Props = React.ComponentPropsWithRef & { * Custom color for icon, default will be derived from theme */ iconColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Callback to execute if we want the left icon to act as button. */ @@ -93,11 +86,6 @@ export type Props = React.ComponentPropsWithRef & { * Custom color for the right trailering icon, default will be derived from theme */ traileringIconColor?: string; - /** - * @supported Available in v5.x with theme version 3 - * Color of the trailering icon ripple effect. - */ - traileringRippleColor?: ColorValue; /** * @supported Available in v5.x with theme version 3 * Callback to execute on the right trailering icon button press. @@ -181,7 +169,6 @@ const Searchbar = forwardRef( { icon, iconColor: customIconColor, - rippleColor: customRippleColor, onIconPress, searchAccessibilityLabel = 'search', clearIcon, @@ -190,7 +177,6 @@ const Searchbar = forwardRef( traileringIcon, traileringIconColor, traileringIconAccessibilityLabel, - traileringRippleColor: customTraileringRippleColor, onTraileringIconPress, right, mode = 'bar', @@ -232,12 +218,6 @@ const Searchbar = forwardRef( const placeholderTextColor = theme.colors.onSurface; const textColor = theme.colors.onSurfaceVariant; const iconColor = customIconColor || theme.colors.onSurfaceVariant; - const rippleColor = - customRippleColor || color(textColor).alpha(0.32).rgb().string(); - const traileringRippleColor = - customTraileringRippleColor || - color(textColor).alpha(0.32).rgb().string(); - const font = { ...fonts.bodyLarge, lineHeight: Platform.select({ @@ -271,7 +251,6 @@ const Searchbar = forwardRef( ( borderless accessibilityLabel={clearAccessibilityLabel} iconColor={value ? iconColor : 'rgba(255, 255, 255, 0)'} - rippleColor={rippleColor} onPress={handleClearPress} icon={ clearIcon || @@ -359,7 +337,6 @@ const Searchbar = forwardRef( borderless onPress={onTraileringIconPress} iconColor={traileringIconColor || theme.colors.onSurfaceVariant} - rippleColor={traileringRippleColor} icon={traileringIcon} accessibilityLabel={traileringIconAccessibilityLabel} testID={`${testID}-trailering-icon`} diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx index 64471f59fd..c70ff68ae2 100644 --- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx +++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - ColorValue, GestureResponderEvent, PressableAndroidRippleConfig, StyleProp, @@ -11,7 +10,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { @@ -46,10 +44,6 @@ export type Props = { * Custom color for checked Text and Icon. */ checkedColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Whether the button is disabled. */ @@ -119,7 +113,6 @@ const SegmentedButtonItem = ({ showSelectedCheck, checkedColor, uncheckedColor, - rippleColor: customRippleColor, background, icon, testID, @@ -153,7 +146,7 @@ const SegmentedButtonItem = ({ }, [checked, checkScale, showSelectedCheck]); const { roundness } = theme; - const { borderColor, textColor, borderWidth, backgroundColor } = + const { borderColor, textColor, textOpacity, borderWidth, backgroundColor } = getSegmentedButtonColors({ checked, theme, @@ -167,9 +160,6 @@ const SegmentedButtonItem = ({ theme, segment, }); - const rippleColor = - customRippleColor || color(textColor).alpha(0.12).rgb().string(); - const showIcon = !icon ? false : label && checked ? !showSelectedCheck : true; const showCheckedIcon = checked && showSelectedCheck; @@ -214,14 +204,15 @@ const SegmentedButtonItem = ({ accessibilityState={{ disabled, checked }} accessibilityRole="button" disabled={disabled} - rippleColor={rippleColor} testID={testID} style={rippleStyle} background={background} theme={theme} hitSlop={hitSlop} > - + {showCheckedIcon ? ( { const getSegmentedButtonBorderColor = ({ theme, disabled }: BaseProps) => { if (disabled) { - return theme.colors.surfaceDisabled; + return theme.colors.outlineVariant; } return theme.colors.outline; }; @@ -108,7 +111,7 @@ const getSegmentedButtonTextColor = ({ uncheckedColor, }: SegmentedButtonProps) => { if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.onSurface; } if (checked) { return checkedColor ?? theme.colors.onSecondaryContainer; @@ -141,5 +144,7 @@ export const getSegmentedButtonColors = ({ }); const borderWidth = getSegmentedButtonBorderWidth({ theme }); - return { backgroundColor, borderColor, textColor, borderWidth }; + const textOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled; + + return { backgroundColor, borderColor, textColor, textOpacity, borderWidth }; }; diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx index 1f2db4d704..f01a592c77 100644 --- a/src/components/Snackbar.tsx +++ b/src/components/Snackbar.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - ColorValue, Easing, I18nManager, StyleProp, @@ -40,11 +39,6 @@ export type Props = $Omit, 'mode'> & { * Icon to display when `onIconPress` is defined. Default will be `close` icon. */ icon?: IconSource; - /** - * @supported Available in v5.x with theme version 3 - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * @supported Available in v5.x with theme version 3 * Function to execute on icon button press. The icon button appears only when this prop is specified. @@ -161,7 +155,6 @@ const Snackbar = ({ contentStyle, theme: themeOverrides, maxFontSizeMultiplier, - rippleColor, testID, ...rest }: Props) => { @@ -253,7 +246,6 @@ const Snackbar = ({ style: actionStyle, label: actionLabel, onPress: onPressAction, - rippleColor: actionRippleColor, ...actionProps } = action || {}; @@ -338,7 +330,6 @@ const Snackbar = ({ compact={false} mode="text" theme={theme} - rippleColor={actionRippleColor} {...actionProps} > {actionLabel} @@ -350,7 +341,6 @@ const Snackbar = ({ borderless onPress={onIconPress} iconColor={theme.colors.inverseOnSurface} - rippleColor={rippleColor} theme={theme} icon={ icon || diff --git a/src/components/Switch/utils.ts b/src/components/Switch/utils.ts index 098988582b..713dad3a21 100644 --- a/src/components/Switch/utils.ts +++ b/src/components/Switch/utils.ts @@ -81,7 +81,7 @@ const getOnTintColor = ({ } if (value) { - return setColor(checkedColor).alpha(0.5).rgb().string(); + return theme.colors.surfaceVariant; } if (theme.dark) { diff --git a/src/components/TextInput/Addons/Underline.tsx b/src/components/TextInput/Addons/Underline.tsx index 2dfa28e4e6..c157df78ab 100644 --- a/src/components/TextInput/Addons/Underline.tsx +++ b/src/components/TextInput/Addons/Underline.tsx @@ -12,6 +12,7 @@ type UnderlineProps = { activeColor: string; underlineColorCustom?: string; hasActiveOutline?: boolean; + disabledOpacity?: number; style?: StyleProp; }; @@ -22,6 +23,7 @@ export const Underline = ({ activeColor, underlineColorCustom, hasActiveOutline, + disabledOpacity, style, }: UnderlineProps) => { let backgroundColor = parentState.focused @@ -38,6 +40,7 @@ export const Underline = ({ styles.md3Underline, { backgroundColor, + opacity: disabledOpacity, // Underlines is thinner when input is not focused transform: [ { diff --git a/src/components/TextInput/Adornment/TextInputAffix.tsx b/src/components/TextInput/Adornment/TextInputAffix.tsx index 71a2b78475..94a0c08662 100644 --- a/src/components/TextInput/Adornment/TextInputAffix.tsx +++ b/src/components/TextInput/Adornment/TextInputAffix.tsx @@ -152,12 +152,19 @@ const TextInputAffix = ({ [side]: offset, } as ViewStyle; - const textColor = getTextColor({ theme, disabled }); + const { color: textColor, opacity: textOpacity } = getTextColor({ + theme, + disabled, + }); const content = ( diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx index 8f4ce7c4df..0fc2c7c906 100644 --- a/src/components/TextInput/Adornment/TextInputIcon.tsx +++ b/src/components/TextInput/Adornment/TextInputIcon.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { - ColorValue, GestureResponderEvent, StyleProp, StyleSheet, @@ -37,10 +36,6 @@ export type Props = $Omit< * Color of the icon or a function receiving a boolean indicating whether the TextInput is focused and returning the color. */ color?: ((isTextInputFocused: boolean) => string | undefined) | string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; style?: StyleProp; /** * @optional @@ -129,7 +124,6 @@ const TextInputIcon = ({ forceTextInputFocus = true, color: customColor, theme: themeOverrides, - rippleColor, ...rest }: Props) => { const { style, isTextInputFocused, forceFocus, testID, disabled } = @@ -148,7 +142,7 @@ const TextInputIcon = ({ const theme = useInternalTheme(themeOverrides); - const iconColor = getIconColor({ + const { color: iconColor, opacity: iconOpacity } = getIconColor({ theme, disabled, isTextInputFocused, @@ -156,7 +150,7 @@ const TextInputIcon = ({ }); return ( - + diff --git a/src/components/TextInput/Adornment/utils.ts b/src/components/TextInput/Adornment/utils.ts index f9a00ce15a..eddd44c83c 100644 --- a/src/components/TextInput/Adornment/utils.ts +++ b/src/components/TextInput/Adornment/utils.ts @@ -1,5 +1,8 @@ +import { tokens } from '../../../styles/themes/tokens'; import type { InternalTheme } from '../../../types'; +const { stateOpacity } = tokens.md.ref; + type BaseProps = { theme: InternalTheme; disabled?: boolean; @@ -7,9 +10,15 @@ type BaseProps = { export function getTextColor({ theme, disabled }: BaseProps) { if (disabled) { - return theme.colors.onSurfaceDisabled; + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.disabled, + }; } - return theme.colors.onSurfaceVariant; + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.enabled, + }; } export function getIconColor({ @@ -22,15 +31,24 @@ export function getIconColor({ customColor?: ((isTextInputFocused: boolean) => string | undefined) | string; }) { if (typeof customColor === 'function') { - return customColor(isTextInputFocused); + return { + color: customColor(isTextInputFocused), + opacity: stateOpacity.enabled, + }; } if (customColor) { - return customColor; + return { color: customColor, opacity: stateOpacity.enabled }; } if (disabled) { - return theme.colors.onSurfaceDisabled; + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.disabled, + }; } - return theme.colors.onSurfaceVariant; + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.enabled, + }; } diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index 4877bc236e..6fd869a1c3 100644 --- a/src/components/TextInput/Label/InputLabel.tsx +++ b/src/components/TextInput/Label/InputLabel.tsx @@ -18,7 +18,6 @@ const InputLabel = (props: InputLabelProps) => { wiggle, error, focused, - opacity, labelLayoutWidth, labelLayoutHeight, labelBackground, @@ -44,6 +43,8 @@ const InputLabel = (props: InputLabelProps) => { backgroundColor, roundness, placeholderColor, + disabledOpacity, + opacity, errorColor, labelTranslationXOffset, maxFontSizeMultiplier, @@ -139,7 +140,12 @@ const InputLabel = (props: InputLabelProps) => { // This gives the effect of animating the color, but allows us to use native driver { if (textColor) { return textColor; } - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.onSurface; }; const getActiveColor = ({ theme, - disabled, error, activeUnderlineColor, activeOutlineColor, @@ -337,18 +330,10 @@ const getActiveColor = ({ return modeColor; } - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.primary; }; -const getPlaceholderColor = ({ theme, disabled }: BaseProps) => { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - +const getPlaceholderColor = ({ theme }: BaseProps) => { return theme.colors.onSurfaceVariant; }; @@ -362,17 +347,12 @@ const getSelectionColor = ({ if (typeof customSelectionColor !== 'undefined') { return customSelectionColor; } - - if (Platform.OS === 'android') { - return color(activeColor).alpha(0.54).rgb().string(); - } - return activeColor; }; const getFlatBackgroundColor = ({ theme, disabled }: BaseProps) => { if (disabled) { - return color(theme.colors.onSurface).alpha(0.04).rgb().string(); + return theme.colors.surfaceContainerHighest; } return theme.colors.surfaceVariant; @@ -387,10 +367,6 @@ const getFlatUnderlineColor = ({ return underlineColor; } - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.onSurfaceVariant; }; @@ -407,7 +383,7 @@ const getOutlinedOutlineInputColor = ({ if (theme.dark) { return 'transparent'; } - return theme.colors.surfaceDisabled; + return theme.colors.outlineVariant; } return theme.colors.outline; @@ -438,12 +414,17 @@ export const getFlatInputColors = ({ mode: 'flat', }); + const disabledOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { inputTextColor: getInputTextColor({ ...baseFlatColorProps, textColor, }), activeColor, + disabledOpacity, underlineColorCustom: getFlatUnderlineColor({ ...baseFlatColorProps, underlineColor, @@ -480,12 +461,17 @@ export const getOutlinedInputColors = ({ mode: 'outlined', }); + const disabledOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { inputTextColor: getInputTextColor({ ...baseOutlinedColorProps, textColor, }), activeColor, + disabledOpacity, outlineColor: getOutlinedOutlineInputColor({ ...baseOutlinedColorProps, customOutlineColor, diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx index 1f710e4089..49bc46e121 100644 --- a/src/components/TextInput/types.tsx +++ b/src/components/TextInput/types.tsx @@ -115,6 +115,7 @@ export type LabelProps = { paddingRight?: number; labelTranslationXOffset?: number; placeholderColor: string | null; + disabledOpacity?: number; backgroundColor?: ColorValue; label?: TextInputLabelProp | null; hasActiveOutline?: boolean | null; diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index e115dec7ec..ba4bd138a3 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -6,7 +6,6 @@ import { ViewStyle, View, Animated, - ColorValue, } from 'react-native'; import { ToggleButtonGroupContext } from './ToggleButtonGroup'; @@ -30,10 +29,6 @@ export type Props = { * Custom text color for button. */ iconColor?: string; - /** - * Color of the ripple effect. - */ - rippleColor?: ColorValue; /** * Whether the button is disabled. */ @@ -108,7 +103,6 @@ const ToggleButton = forwardRef( value, status, onPress, - rippleColor, ...rest }: Props, ref @@ -155,7 +149,6 @@ const ToggleButton = forwardRef( ]} ref={ref} theme={theme} - rippleColor={rippleColor} {...rest} /> ); diff --git a/src/components/ToggleButton/utils.ts b/src/components/ToggleButton/utils.ts index 2aad2fa904..e471a5b4b6 100644 --- a/src/components/ToggleButton/utils.ts +++ b/src/components/ToggleButton/utils.ts @@ -1,6 +1,3 @@ -import color from 'color'; - -import { tokens } from '../../styles/themes/tokens'; import type { InternalTheme } from '../../types'; export const getToggleButtonColor = ({ @@ -11,10 +8,7 @@ export const getToggleButtonColor = ({ checked: boolean | null; }) => { if (checked) { - return color(theme.colors.onSecondaryContainer) - .alpha(tokens.md.ref.stateOpacity.pressed) - .rgb() - .string(); + return theme.colors.surfaceContainerHighest; } - return 'transparent'; + return theme.colors.surfaceContainer; }; diff --git a/src/components/TouchableRipple/TouchableRipple.native.tsx b/src/components/TouchableRipple/TouchableRipple.native.tsx index 1cb17b4068..3f8c791c33 100644 --- a/src/components/TouchableRipple/TouchableRipple.native.tsx +++ b/src/components/TouchableRipple/TouchableRipple.native.tsx @@ -73,12 +73,13 @@ const TouchableRipple = ( underlayColor, }); - // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden' + // Use foreground ripple on Android P+ to ensure visibility. + // Background ripple requires the view to have a background drawable, + // which isn't always present. Foreground ripple needs overflow: 'hidden' + // to stay within bounds. // https://github.com/facebook/react-native/issues/6480 const useForeground = - Platform.OS === 'android' && - Platform.Version >= ANDROID_VERSION_PIE && - borderless; + Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_PIE; if (TouchableRipple.supported) { const androidRipple = rippleEffectEnabled @@ -94,7 +95,7 @@ const TouchableRipple = ( {...rest} ref={ref} disabled={disabled} - style={[borderless && styles.overflowHidden, style]} + style={[useForeground && styles.overflowHidden, style]} android_ripple={androidRipple} > {React.Children.only(children)} diff --git a/src/components/TouchableRipple/utils.ts b/src/components/TouchableRipple/utils.ts index 0c371b8915..6f6264727a 100644 --- a/src/components/TouchableRipple/utils.ts +++ b/src/components/TouchableRipple/utils.ts @@ -5,6 +5,7 @@ import color from 'color'; import type { InternalTheme } from '../../types'; const getUnderlayColor = ({ + theme, calculatedRippleColor, underlayColor, }: { @@ -16,7 +17,11 @@ const getUnderlayColor = ({ return underlayColor; } - return color(calculatedRippleColor).rgb().string(); + if (typeof calculatedRippleColor === 'string') { + return color(calculatedRippleColor).rgb().string(); + } + // PlatformColor — can't convert, return stateLayer default + return theme.colors.primary; }; const getRippleColor = ({ @@ -30,7 +35,7 @@ const getRippleColor = ({ return rippleColor; } - return color(theme.colors.onSurface).alpha(0.12).rgb().string(); + return theme.colors.stateLayerPressed; }; export const getTouchableRippleColors = ({ diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx index 9532a24d27..196cdf40cc 100644 --- a/src/components/__tests__/Appbar/Appbar.test.tsx +++ b/src/components/__tests__/Appbar/Appbar.test.tsx @@ -228,21 +228,6 @@ describe('AppbarAction', () => { expect(appbarActionIcon.props.color).toBe('purple'); }); - it('should be rendered with custom ripple color', () => { - const { getByTestId } = render( - - - - ); - const appbarActionContainer = getByTestId('appbar-action-container').props - .children; - expect(appbarActionContainer.props.rippleColor).toBe('purple'); - }); - it('should render AppbarBackAction with custom color', () => { const { getByTestId } = render( diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 50ab8e3cd6..9ad88efe63 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -104,7 +104,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -181,35 +181,43 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -288,7 +296,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -365,35 +373,43 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` } testID="search-bar-clear-icon" > - + - close - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + close + + @@ -471,7 +487,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -550,76 +566,84 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A > - + > + + @@ -714,7 +738,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -792,66 +816,74 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A > - - menu - + + menu + + diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index 9cf27a7b7b..da1e93b57c 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -350,7 +350,8 @@ describe('getButtonColors - background color', () => { disabled: true, }) ).toMatchObject({ - backgroundColor: getTheme().colors.surfaceDisabled, + backgroundColor: getTheme().colors.onSurface, + backgroundOpacity: 0.1, }); }) ); @@ -365,7 +366,8 @@ describe('getButtonColors - background color', () => { disabled: true, }) ).toMatchObject({ - backgroundColor: getTheme(true).colors.surfaceDisabled, + backgroundColor: getTheme(true).colors.onSurface, + backgroundOpacity: 0.1, }); }) ); @@ -551,7 +553,8 @@ describe('getButtonColors - text color', () => { mode: 'text', }) ).toMatchObject({ - textColor: getTheme().colors.onSurfaceDisabled, + textColor: getTheme().colors.onSurface, + textOpacity: 0.38, }); }); @@ -564,7 +567,8 @@ describe('getButtonColors - text color', () => { mode: 'text', }) ).toMatchObject({ - textColor: getTheme(true).colors.onSurfaceDisabled, + textColor: getTheme(true).colors.onSurface, + textOpacity: 0.38, }); }); @@ -700,7 +704,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme().colors.surfaceDisabled, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -712,7 +716,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme(true).colors.surfaceDisabled, + borderColor: getTheme(true).colors.outlineVariant, }); }); @@ -723,7 +727,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme().colors.outline, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -734,7 +738,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme(true).colors.outline, + borderColor: getTheme(true).colors.outlineVariant, }); }); diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index 3325829520..5c416c9720 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -165,6 +165,7 @@ exports[`can render leading checkbox control 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "right", }, undefined, @@ -262,6 +263,7 @@ exports[`can render the Android checkbox on different platforms 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -323,6 +325,7 @@ exports[`can render the Android checkbox on different platforms 1`] = ` collapsable={false} style={ { + "opacity": 1, "transform": [ { "scale": 1, @@ -478,6 +481,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -658,6 +662,7 @@ exports[`renders unchecked 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, diff --git a/src/components/__tests__/Checkbox/utils.test.tsx b/src/components/__tests__/Checkbox/utils.test.tsx index c2620feff5..ab681faaee 100644 --- a/src/components/__tests__/Checkbox/utils.test.tsx +++ b/src/components/__tests__/Checkbox/utils.test.tsx @@ -1,80 +1,9 @@ -import color from 'color'; - import { getTheme } from '../../../core/theming'; import { getAndroidSelectionControlColor, getSelectionControlIOSColor, } from '../../Checkbox/utils'; -describe('getAndroidSelectionControlColor - ripple color', () => { - it('should return correct disabled color, for theme version 3', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(), - disabled: true, - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurface) - .alpha(0.16) - .rgb() - .string(), - }); - }); - - it('should return correct disabled color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.onSurface) - .alpha(0.16) - .rgb() - .string(), - }); - }); - - it('should return custom color', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(), - customColor: 'purple', - checked: false, - }) - ).toMatchObject({ - rippleColor: color('purple').fade(0.32).rgb().string(), - }); - }); - - it('should return theme color, for theme version 3', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(), - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false), - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.primary) - .fade(0.32) - .rgb() - .string(), - }); - }); -}); - describe('getAndroidSelectionControlColor - checkbox color', () => { it('should return correct disabled color, for theme version 3', () => { expect( @@ -84,7 +13,8 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { checked: false, }) ).toMatchObject({ - selectionControlColor: getTheme().colors.onSurfaceDisabled, + selectionControlColor: getTheme().colors.onSurface, + selectionControlOpacity: 0.38, }); }); @@ -96,7 +26,8 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { checked: false, }) ).toMatchObject({ - selectionControlColor: getTheme(false).colors.onSurfaceDisabled, + selectionControlColor: getTheme(false).colors.onSurface, + selectionControlOpacity: 0.38, }); }); @@ -180,70 +111,6 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { }); }); -describe('getSelectionControlIOSColor - ripple color', () => { - it('should return correct disabled color, for theme version 3', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(), - disabled: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurface) - .alpha(0.16) - .rgb() - .string(), - }); - }); - - it('should return correct disabled color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false), - disabled: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.onSurface) - .alpha(0.16) - .rgb() - .string(), - }); - }); - - it('should return custom color', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(), - customColor: 'purple', - }) - ).toMatchObject({ - rippleColor: color('purple').fade(0.32).rgb().string(), - }); - }); - - it('should return theme color, for theme version 3', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(), - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false), - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.primary) - .fade(0.32) - .rgb() - .string(), - }); - }); -}); - describe('getSelectionControlIOSColor - checked color', () => { it('should return correct disabled color, for theme version 3', () => { expect( @@ -252,7 +119,8 @@ describe('getSelectionControlIOSColor - checked color', () => { disabled: true, }) ).toMatchObject({ - checkedColor: getTheme().colors.onSurfaceDisabled, + checkedColor: getTheme().colors.primary, + checkedColorOpacity: 0.38, }); }); @@ -263,7 +131,8 @@ describe('getSelectionControlIOSColor - checked color', () => { disabled: true, }) ).toMatchObject({ - checkedColor: getTheme(false).colors.onSurfaceDisabled, + checkedColor: getTheme(false).colors.primary, + checkedColorOpacity: 0.38, }); }); diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index e71073b44a..28ac06e158 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -99,7 +99,8 @@ describe('getChipColors - text color', () => { isOutlined: false, }) ).toMatchObject({ - textColor: getTheme().colors.onSurfaceDisabled, + textColor: getTheme().colors.onSurface, + contentOpacity: 0.38, }); }); @@ -111,7 +112,8 @@ describe('getChipColors - text color', () => { isOutlined: false, }) ).toMatchObject({ - textColor: getTheme(false).colors.onSurfaceDisabled, + textColor: getTheme(false).colors.onSurface, + contentOpacity: 0.38, }); }); @@ -182,7 +184,8 @@ describe('getChipColors - icon color', () => { isOutlined: false, }) ).toMatchObject({ - iconColor: getTheme().colors.onSurfaceDisabled, + iconColor: getTheme().colors.onSurface, + contentOpacity: 0.38, }); }); @@ -194,7 +197,8 @@ describe('getChipColors - icon color', () => { isOutlined: false, }) ).toMatchObject({ - iconColor: getTheme(false).colors.onSurfaceDisabled, + iconColor: getTheme(false).colors.onSurface, + contentOpacity: 0.38, }); }); @@ -256,176 +260,6 @@ describe('getChipColors - icon color', () => { }); }); -describe('getChipColors - ripple color', () => { - it('should return theme color, for theme version 3, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSecondaryContainer) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 3, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return custom color, for theme version 3', () => { - expect( - getChipColors({ - theme: getTheme(), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').alpha(0.12).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').alpha(0.12).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, outline mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(true), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(true).colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, flat mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(true), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(true).colors.onSecondaryContainer) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, outline mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, flat mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.onSecondaryContainer) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(false), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.onSecondaryContainer) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(true), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(true).colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(true).colors.onSecondaryContainer) - .alpha(0.12) - .rgb() - .string(), - }); - }); -}); - describe('getChipColor - selected background color', () => { it('should return custom color, for theme version 3, outlined mode', () => { expect( @@ -435,10 +269,7 @@ describe('getChipColor - selected background color', () => { isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSurfaceVariant), 0) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); @@ -450,42 +281,7 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSecondaryContainer), 0) - .rgb() - .string(), - }); - }); - - it('should return custom color, for theme version 3, outlined mode, show selected overlay', () => { - expect( - getChipColors({ - theme: getTheme(), - customBackgroundColor: 'purple', - showSelectedOverlay: true, - isOutlined: true, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSurfaceVariant), 0.12) - .rgb() - .string(), - }); - }); - - it('should return custom color, for theme version 3, flat mode, show selected overlay', () => { - expect( - getChipColors({ - theme: getTheme(), - customBackgroundColor: 'purple', - showSelectedOverlay: true, - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSecondaryContainer), 0.12) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); @@ -496,10 +292,7 @@ describe('getChipColor - selected background color', () => { isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme().colors.surface) - .mix(color(getTheme().colors.onSurfaceVariant), 0) - .rgb() - .string(), + selectedBackgroundColor: getTheme().colors.surface, }); }); @@ -510,10 +303,7 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme().colors.secondaryContainer) - .mix(color(getTheme().colors.onSecondaryContainer), 0) - .rgb() - .string(), + selectedBackgroundColor: getTheme().colors.secondaryContainer, }); }); @@ -525,10 +315,7 @@ describe('getChipColor - selected background color', () => { isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme(false).colors.onSurfaceVariant), 0) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); @@ -540,10 +327,7 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme(false).colors.onSecondaryContainer), 0) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); @@ -555,10 +339,7 @@ describe('getChipColor - selected background color', () => { isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme(true).colors.onSurfaceVariant), 0) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); @@ -570,10 +351,7 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme(true).colors.onSecondaryContainer), 0) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); @@ -584,10 +362,7 @@ describe('getChipColor - selected background color', () => { isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme(false).colors.surface) - .mix(color(getTheme(false).colors.onSurfaceVariant), 0) - .rgb() - .string(), + selectedBackgroundColor: getTheme(false).colors.surface, }); }); @@ -598,10 +373,7 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme(false).colors.secondaryContainer) - .mix(color(getTheme(false).colors.onSecondaryContainer), 0) - .rgb() - .string(), + selectedBackgroundColor: getTheme(false).colors.secondaryContainer, }); }); @@ -612,10 +384,7 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme(true).colors.secondaryContainer) - .mix(color(getTheme(true).colors.onSecondaryContainer), 0) - .rgb() - .string(), + selectedBackgroundColor: getTheme(true).colors.secondaryContainer, }); }); }); @@ -756,7 +525,7 @@ describe('getChipColor - border color', () => { isOutlined: true, }) ).toMatchObject({ - borderColor: getTheme(false).colors.outline, + borderColor: getTheme(false).colors.outlineVariant, }); }); @@ -767,7 +536,7 @@ describe('getChipColor - border color', () => { isOutlined: true, }) ).toMatchObject({ - borderColor: getTheme(true).colors.outline, + borderColor: getTheme(true).colors.outlineVariant, }); }); diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx index 00f7bbdbc2..ca39c7a175 100644 --- a/src/components/__tests__/FAB.test.tsx +++ b/src/components/__tests__/FAB.test.tsx @@ -91,12 +91,6 @@ it('renders loading FAB with custom size prop', () => { expect(tree).toMatchSnapshot(); }); -it('renders disabled FAB', () => { - const tree = render( {}} icon="plus" disabled />).toJSON(); - - expect(tree).toMatchSnapshot(); -}); - it('renders custom color for the icon and label of the FAB', () => { const tree = render( {}} icon="plus" color="#AA0114" /> @@ -196,42 +190,6 @@ describe('getFABColors - background color', () => { }); }); - it('should return correct disabled color, for theme version 3', () => { - expect( - getFABColors({ - theme: getTheme(), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: getTheme().colors.surfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2, light mode', () => { - expect( - getFABColors({ - theme: getTheme(false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: getTheme(false).colors.surfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getFABColors({ - theme: getTheme(true), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: getTheme(true).colors.surfaceDisabled, - }); - }); - it('should return correct theme color, for theme version 3, primary variant', () => { expect( getFABColors({ @@ -301,42 +259,6 @@ describe('getFABColors - foreground color', () => { }); }); - it('should return correct disabled color, for theme version 3', () => { - expect( - getFABColors({ - theme: getTheme(), - variant: 'primary', - disabled: true, - }) - ).toMatchObject({ - foregroundColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2, light mode', () => { - expect( - getFABColors({ - theme: getTheme(false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: getTheme(false).colors.onSurfaceDisabled, - }); - }); - - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getFABColors({ - theme: getTheme(true), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: getTheme(true).colors.onSurfaceDisabled, - }); - }); - it('should return correct theme color, for theme version 3, primary variant', () => { expect( getFABColors({ diff --git a/src/components/__tests__/FABGroup.test.tsx b/src/components/__tests__/FABGroup.test.tsx index 18177e9032..fb1ad1be26 100644 --- a/src/components/__tests__/FABGroup.test.tsx +++ b/src/components/__tests__/FABGroup.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Animated } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; import FAB from '../FAB'; @@ -26,10 +25,7 @@ describe('getFABGroupColors - backdrop color', () => { theme: getTheme(), }) ).toMatchObject({ - backdropColor: color(getTheme().colors.background) - .alpha(0.95) - .rgb() - .string(), + backdropColor: getTheme().colors.scrim, }); }); @@ -39,10 +35,7 @@ describe('getFABGroupColors - backdrop color', () => { theme: getTheme(false), }) ).toMatchObject({ - backdropColor: color(getTheme(false).colors.background) - .alpha(0.95) - .rgb() - .string(), + backdropColor: getTheme(false).colors.scrim, }); }); }); @@ -180,37 +173,6 @@ it('correctly adds label prop', () => { expect(getByText('Label test')).toBeTruthy(); }); -it('correct renders custom ripple color passed to FAB.Group and its item', () => { - const { getByTestId } = render( - {}} - actions={[ - { - label: 'testing', - onPress() {}, - icon: '', - rippleColor: 'yellow', - testID: 'fab-group-item', - }, - ]} - /> - ); - - expect( - getByTestId('fab-group-container').props.children.props.rippleColor - ).toBe('orange'); - - expect( - getByTestId('fab-group-item-container').props.children.props.rippleColor - ).toBe('yellow'); -}); - it('animated value changes correctly', () => { const value = new Animated.Value(1); const { getByTestId } = render( diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index 3ece888c5a..737307181a 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; import { pink500 } from '../../styles/themes/baseColors'; @@ -97,7 +96,8 @@ describe('getIconButtonColor - icon color', () => { disabled: true, }) ).toMatchObject({ - iconColor: getTheme().colors.onSurfaceDisabled, + iconColor: getTheme().colors.onSurface, + iconOpacity: 0.38, }); }); @@ -222,7 +222,10 @@ describe('getIconButtonColor - background color', () => { mode, disabled: true, }) - ).toMatchObject({ backgroundColor: getTheme().colors.surfaceDisabled }); + ).toMatchObject({ + backgroundColor: getTheme().colors.onSurface, + backgroundOpacity: 0.1, + }); }) ); @@ -303,7 +306,7 @@ describe('getIconButtonColor - border color', () => { disabled: true, }) ).toMatchObject({ - borderColor: getTheme().colors.surfaceDisabled, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -313,7 +316,7 @@ describe('getIconButtonColor - border color', () => { theme: getTheme(), }) ).toMatchObject({ - borderColor: getTheme().colors.outline, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -323,35 +326,7 @@ describe('getIconButtonColor - border color', () => { theme: getTheme(false), }) ).toMatchObject({ - borderColor: getTheme(false).colors.outline, - }); - }); -}); - -describe('getIconButtonColor - ripple color', () => { - it('should return theme color, for theme version 3', () => { - expect( - getIconButtonColor({ - theme: getTheme(), - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2', () => { - expect( - getIconButtonColor({ - theme: getTheme(false), - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), + borderColor: getTheme(false).colors.outlineVariant, }); }); }); diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index e2bf908bf0..5584a8d8a1 100644 --- a/src/components/__tests__/ListAccordion.test.tsx +++ b/src/components/__tests__/ListAccordion.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import { render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; import { red500 } from '../../styles/themes/baseColors'; @@ -191,42 +190,3 @@ describe('getAccordionColors - title text color', () => { }); }); }); - -describe('getAccordionColors - ripple color', () => { - it('should return theme color, for theme version 3', () => { - expect( - getAccordionColors({ - theme: getTheme(), - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurface) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2', () => { - expect( - getAccordionColors({ - theme: getTheme(false), - }) - ).toMatchObject({ - rippleColor: color(getTheme(false).colors.onSurface) - .alpha(0.12) - .rgb() - .string(), - }); - }); - - it('should return primary color if it is expanded', () => { - expect( - getAccordionColors({ - theme: getTheme(), - isExpanded: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.primary).alpha(0.12).rgb().string(), - }); - }); -}); diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index d482800582..a54601ca3e 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; import Menu from '../Menu/Menu'; @@ -71,7 +70,10 @@ describe('getMenuItemColor - title color', () => { theme: getTheme(), disabled: true, }) - ).toMatchObject({ titleColor: getTheme().colors.onSurfaceDisabled }); + ).toMatchObject({ + titleColor: getTheme().colors.onSurface, + contentOpacity: 0.38, + }); }); it('should return correct theme color, for theme version 3', () => { @@ -92,31 +94,19 @@ describe('getMenuItemColor - icon color', () => { theme: getTheme(), disabled: true, }) - ).toMatchObject({ iconColor: getTheme().colors.onSurfaceDisabled }); - }); - - it('should return correct theme color, for theme version 3', () => { - expect( - getMenuItemColor({ - theme: getTheme(), - }) ).toMatchObject({ iconColor: getTheme().colors.onSurfaceVariant, + contentOpacity: 0.38, }); }); -}); -describe('getMenuItemColor - ripple color', () => { it('should return correct theme color, for theme version 3', () => { expect( getMenuItemColor({ theme: getTheme(), }) ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurfaceVariant) - .alpha(0.12) - .rgb() - .string(), + iconColor: getTheme().colors.onSurfaceVariant, }); }); }); diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx index 32161d5b84..dc9f1e4d87 100644 --- a/src/components/__tests__/Modal.test.tsx +++ b/src/components/__tests__/Modal.test.tsx @@ -55,7 +55,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - backgroundColor: MD3LightTheme.colors.backdrop, + backgroundColor: MD3LightTheme.colors.scrim, }); }); @@ -66,7 +66,7 @@ describe('Modal', () => { testID="modal" theme={{ colors: { - backdrop: 'transparent', + scrim: 'transparent', }, }} > @@ -119,7 +119,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -156,7 +156,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -198,7 +198,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -241,7 +241,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -308,7 +308,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -376,7 +376,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -393,7 +393,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -406,7 +406,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -453,7 +453,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -466,7 +466,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -491,7 +491,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -504,7 +504,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -527,7 +527,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: 0.32, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index de667249ae..f44e395c55 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -163,6 +163,7 @@ exports[`can render leading radio button control 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "right", }, undefined, @@ -257,6 +258,7 @@ exports[`can render the Android radio button on different platforms 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -408,6 +410,7 @@ exports[`can render the iOS radio button on different platforms 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -585,6 +588,7 @@ exports[`renders unchecked 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx index 69b572cbce..ed57648334 100644 --- a/src/components/__tests__/Searchbar.test.tsx +++ b/src/components/__tests__/Searchbar.test.tsx @@ -38,15 +38,6 @@ it('renders without ActivityIndicator', () => { expect(() => getByTestId('activity-indicator')).toThrow(); }); -it('render icon with custom ripple color', () => { - const { getByTestId } = render( - - ); - - const iconContainer = getByTestId('search-bar-icon-container').props.children; - expect(iconContainer.props.rippleColor).toBe('purple'); -}); - it('renders clear icon with custom color', () => { const { getByTestId } = render( @@ -141,16 +132,6 @@ it('renders clear icon wrapper, with appropriate style', () => { }); }); -it('render clear icon with custom ripple color', () => { - const { getByTestId } = render( - - ); - - const clearIconContainer = getByTestId('search-bar-clear-icon-container') - .props.children; - expect(clearIconContainer.props.rippleColor).toBe('purple'); -}); - it('renders trailering icon when mode is set to "bar"', () => { const { getByTestId } = render( { expect(onTraileringIconPressMock).toHaveBeenCalledTimes(1); }); -it('renders trailering icon with custom ripple colors', () => { - const { getByTestId } = render( - - ); - - const traileringIconContainer = getByTestId( - 'search-bar-trailering-icon-container' - ).props.children; - expect(traileringIconContainer.props.rippleColor).toBe('purple'); -}); - it('renders clear icon instead of trailering icon', () => { const { getByTestId, update, queryByTestId } = render( { theme | disabled | checked | checkedColor | uncheckedColor | expected ${getTheme()} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSecondaryContainer} ${getTheme()} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} - ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} - ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} + ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} @@ -121,7 +121,7 @@ describe('getSegmentedButtonColors', () => { checked: false, }) ).toMatchObject({ - borderColor: getTheme().colors.surfaceDisabled, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -145,7 +145,8 @@ describe('getSegmentedButtonColors', () => { checked: false, }) ).toMatchObject({ - textColor: getTheme().colors.onSurfaceDisabled, + textColor: getTheme().colors.onSurface, + textOpacity: 0.38, }); }); }); diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx index f652679a21..de109604f2 100644 --- a/src/components/__tests__/Snackbar.test.tsx +++ b/src/components/__tests__/Snackbar.test.tsx @@ -82,23 +82,6 @@ it('renders snackbar with View & Text as a child', () => { expect(tree).toMatchSnapshot(); }); -it('renders with custom ripple color', () => { - const { getByTestId } = render( - {}} - onIconPress={() => {}} - rippleColor="purple" - testID="snackbar" - > - Snackbar content - - ); - - const iconContainer = getByTestId('snackbar-icon-container').props.children; - expect(iconContainer.props.rippleColor).toBe('purple'); -}); - it('animated value changes correctly', () => { const value = new Animated.Value(1); const { getByTestId } = render( diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx index 4f8633622a..2114cd3bf2 100644 --- a/src/components/__tests__/Switch.test.tsx +++ b/src/components/__tests__/Switch.test.tsx @@ -198,7 +198,7 @@ describe('getSwitchColor - on tint color', () => { color: 'purple', }) ).toMatchObject({ - onTintColor: color('purple').alpha(0.5).rgb().string(), + checkedColor: 'purple', }); }); diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index f0c25a3868..e4fad562d3 100644 --- a/src/components/__tests__/TextInput.test.tsx +++ b/src/components/__tests__/TextInput.test.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import { I18nManager, Platform, StyleSheet, Text, View } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming'; const red500 = '#f44336'; @@ -547,7 +546,7 @@ describe('getFlatInputColor - underline color', () => { theme: getTheme(), }) ).toMatchObject({ - underlineColorCustom: getTheme().colors.onSurfaceDisabled, + underlineColorCustom: getTheme().colors.onSurfaceVariant, }); }); @@ -610,7 +609,8 @@ describe('getFlatInputColor - input text color', () => { theme: getTheme(), }) ).toMatchObject({ - inputTextColor: getTheme().colors.onSurfaceDisabled, + inputTextColor: getTheme().colors.onSurface, + disabledOpacity: 0.38, }); }); @@ -633,7 +633,8 @@ describe('getFlatInputColor - placeholder color', () => { theme: getTheme(), }) ).toMatchObject({ - placeholderColor: getTheme().colors.onSurfaceDisabled, + placeholderColor: getTheme().colors.onSurfaceVariant, + disabledOpacity: 0.38, }); }); @@ -656,10 +657,7 @@ describe('getFlatInputColor - background color', () => { theme: getTheme(), }) ).toMatchObject({ - backgroundColor: color(getTheme().colors.onSurface) - .alpha(0.04) - .rgb() - .string(), + backgroundColor: getTheme().colors.surfaceContainerHighest, }); expect( getFlatInputColors({ @@ -667,10 +665,7 @@ describe('getFlatInputColor - background color', () => { theme: getTheme(true), }) ).toMatchObject({ - backgroundColor: color(getTheme(true).colors.onSurface) - .alpha(0.04) - .rgb() - .string(), + backgroundColor: getTheme(true).colors.surfaceContainerHighest, }); }); @@ -715,7 +710,8 @@ describe('getFlatInputColor - active color', () => { theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme().colors.onSurfaceDisabled, + activeColor: getTheme().colors.primary, + disabledOpacity: 0.38, }); }); @@ -788,7 +784,7 @@ describe('getOutlinedInputColors - outline color', () => { theme: getTheme(), }) ).toMatchObject({ - outlineColor: getTheme().colors.surfaceDisabled, + outlineColor: getTheme().colors.outlineVariant, }); }); @@ -842,7 +838,8 @@ describe('getOutlinedInputColors - input text color', () => { theme: getTheme(), }) ).toMatchObject({ - inputTextColor: getTheme().colors.onSurfaceDisabled, + inputTextColor: getTheme().colors.onSurface, + disabledOpacity: 0.38, }); }); @@ -865,7 +862,8 @@ describe('getOutlinedInputColors - placeholder color', () => { theme: getTheme(), }) ).toMatchObject({ - placeholderColor: getTheme().colors.onSurfaceDisabled, + placeholderColor: getTheme().colors.onSurfaceVariant, + disabledOpacity: 0.38, }); }); @@ -910,7 +908,8 @@ describe('getOutlinedInputColors - active color', () => { theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme().colors.onSurfaceDisabled, + activeColor: getTheme().colors.primary, + disabledOpacity: 0.38, }); }); @@ -963,16 +962,6 @@ describe('getOutlinedInputColors - active color', () => { activeColor: getTheme().colors.primary, }); }); - - it('should return theme active color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false), - }) - ).toMatchObject({ - activeColor: getTheme(false).colors.primary, - }); - }); }); describe('outlineStyle - underlineStyle', () => { diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx index fa50952936..a830558681 100644 --- a/src/components/__tests__/ToggleButton.test.tsx +++ b/src/components/__tests__/ToggleButton.test.tsx @@ -2,10 +2,8 @@ import * as React from 'react'; import { Animated } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { tokens } from '../../styles/themes/tokens'; import ToggleButton from '../ToggleButton'; import { getToggleButtonColor } from '../ToggleButton/utils'; @@ -33,44 +31,22 @@ it('renders unchecked toggle button', () => { expect(tree).toMatchSnapshot(); }); -it('render toggle button with custom ripple color', () => { - const { getByTestId } = render( - - ); - - const iconContainer = getByTestId('toggle-button-container').props.children; - expect(iconContainer.props.rippleColor).toBe('purple'); -}); - describe('getToggleButtonColor', () => { it('should return correct color when checked and theme version 3', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: true })).toBe( - color(getTheme().colors.onSecondaryContainer) - .alpha(tokens.md.ref.stateOpacity.pressed) - .rgb() - .string() + getTheme().colors.surfaceContainerHighest ); }); it('should return correct color when checked and theme version 3, dark theme', () => { expect(getToggleButtonColor({ theme: getTheme(true), checked: true })).toBe( - color(getTheme(true).colors.onSecondaryContainer) - .alpha(tokens.md.ref.stateOpacity.pressed) - .rgb() - .string() + getTheme(true).colors.surfaceContainerHighest ); }); - it('should return transparent color when not checked', () => { + it('should return correct color when not checked', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: false })).toBe( - 'transparent' + getTheme().colors.surfaceContainer ); }); }); diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index 5a1456e0f5..2f839c275b 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -204,6 +204,9 @@ exports[`render visible banner, with custom theme 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -626,6 +629,9 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -895,6 +901,9 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1044,6 +1053,9 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap index fddcd2bc10..6c34864a74 100644 --- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -92,6 +92,9 @@ exports[`renders button with an accessibility hint 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -242,6 +245,9 @@ exports[`renders button with an accessibility label 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -391,6 +397,9 @@ exports[`renders button with button color 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -540,6 +549,9 @@ exports[`renders button with color 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -689,6 +701,9 @@ exports[`renders button with custom testID 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -838,6 +853,9 @@ exports[`renders button with icon 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1036,6 +1054,9 @@ exports[`renders button with icon in reverse order 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, { "flexDirection": "row-reverse", }, @@ -1236,6 +1257,9 @@ exports[`renders contained contained with mode 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1386,6 +1410,9 @@ exports[`renders disabled button 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 0.38, + }, undefined, ] } @@ -1422,7 +1449,7 @@ exports[`renders disabled button 1`] = ` undefined, false, { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -1535,6 +1562,9 @@ exports[`renders loading button 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1824,7 +1854,7 @@ exports[`renders outlined button with mode 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -1892,6 +1922,9 @@ exports[`renders outlined button with mode 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -2042,6 +2075,9 @@ exports[`renders text button by default 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -2191,6 +2227,9 @@ exports[`renders text button with mode 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap index 309367bac0..b05ef735de 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap @@ -100,6 +100,9 @@ exports[`renders chip with close button 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 34, }, @@ -395,6 +398,9 @@ exports[`renders chip with custom close button 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 34, }, @@ -690,6 +696,9 @@ exports[`renders chip with icon 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 0, }, @@ -892,6 +901,9 @@ exports[`renders chip with onPress 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 0, }, @@ -972,7 +984,7 @@ exports[`renders outlined disabled chip 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(73, 69, 79, 0.12)", + "borderColor": "rgba(243, 237, 247, 1)", "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, @@ -1049,6 +1061,9 @@ exports[`renders outlined disabled chip 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 0.38, + }, { "paddingRight": 0, }, @@ -1081,7 +1096,7 @@ exports[`renders outlined disabled chip 1`] = ` "textAlignVertical": "center", }, { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -1111,7 +1126,7 @@ exports[`renders selected chip 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(232, 222, 248)", + "backgroundColor": "rgba(232, 222, 248, 1)", "borderRadius": 8, "shadowColor": "#000", "shadowOffset": { @@ -1128,7 +1143,7 @@ exports[`renders selected chip 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(232, 222, 248)", + "backgroundColor": "rgba(232, 222, 248, 1)", "borderColor": "transparent", "borderRadius": 8, "borderStyle": "solid", @@ -1206,6 +1221,9 @@ exports[`renders selected chip 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 0, }, diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap index 7fde640799..f6071c245c 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -233,7 +233,7 @@ exports[`DataTable.Header renders data table header 1`] = ` }, {}, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, undefined, ], @@ -314,7 +314,7 @@ exports[`DataTable.Header renders data table header 1`] = ` }, {}, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, undefined, ], @@ -366,7 +366,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -404,7 +404,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -481,35 +481,43 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -538,7 +546,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -615,35 +623,43 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -690,7 +706,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -730,7 +746,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -807,35 +823,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - page-first - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-first + + @@ -864,7 +888,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -941,35 +965,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -998,7 +1030,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1075,35 +1107,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -1132,7 +1172,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1209,35 +1249,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - page-last - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-last + + @@ -1284,7 +1332,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -1324,7 +1372,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1401,35 +1449,43 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -1458,7 +1514,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1535,35 +1591,43 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -1620,7 +1684,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -1654,7 +1718,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -1723,6 +1787,9 @@ exports[`DataTable.Pagination renders data table pagination with options select "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, { "flexDirection": "row-reverse", }, @@ -1853,7 +1920,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -1893,7 +1960,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1970,35 +2037,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - page-first - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-first + + @@ -2027,7 +2102,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2104,35 +2179,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -2161,7 +2244,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2238,35 +2321,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -2295,7 +2386,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2372,35 +2463,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - page-last - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-last + + @@ -2738,7 +2837,7 @@ exports[`DataTable.Title renders right aligned data table title 1`] = ` }, {}, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, undefined, ], diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap index 4adac1a1a5..96213e657b 100644 --- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap @@ -522,180 +522,6 @@ exports[`renders default FAB 1`] = ` `; -exports[`renders disabled FAB 1`] = ` - - - - - - - - plus - - - - - - - -`; - exports[`renders extended FAB 1`] = ` - + - camera - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -167,7 +175,7 @@ exports[`renders icon button by default 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -243,35 +251,43 @@ exports[`renders icon button by default 1`] = ` } testID="icon-button" > - + - camera - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -303,7 +319,7 @@ exports[`renders icon button with color 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -379,35 +395,43 @@ exports[`renders icon button with color 1`] = ` } testID="icon-button" > - + - camera - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -439,7 +463,7 @@ exports[`renders icon button with size 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 23, "borderWidth": 0, "elevation": 0, @@ -515,35 +539,43 @@ exports[`renders icon button with size 1`] = ` } testID="icon-button" > - + - camera - + [ + { + "lineHeight": 30, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -575,7 +607,7 @@ exports[`renders icon change animated 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -653,66 +685,74 @@ exports[`renders icon change animated 1`] = ` > - - camera - + + camera + + diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap index 85ba0c3ce1..937ead65b2 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -216,6 +216,9 @@ exports[`renders list item with custom description 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 0, }, diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index 231ee21106..6c13c22c38 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -16,7 +16,6 @@ exports[`renders list section with custom title style 1`] = ` "scale": 1, }, "colors": { - "backdrop": "rgba(50, 47, 55, 0.4)", "background": "rgba(254, 247, 255, 1)", "elevation": { "level0": "transparent", @@ -43,7 +42,6 @@ exports[`renders list section with custom title style 1`] = ` "onSecondaryFixed": "rgba(29, 25, 43, 1)", "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)", "onSurface": "rgba(29, 27, 32, 1)", - "onSurfaceDisabled": "rgba(29, 27, 32, 0.38)", "onSurfaceVariant": "rgba(73, 69, 79, 1)", "onTertiary": "rgba(255, 255, 255, 1)", "onTertiaryContainer": "rgba(99, 59, 72, 1)", @@ -61,6 +59,7 @@ exports[`renders list section with custom title style 1`] = ` "secondaryFixed": "rgba(232, 222, 248, 1)", "secondaryFixedDim": "rgba(204, 194, 220, 1)", "shadow": "rgba(0, 0, 0, 1)", + "stateLayerPressed": "rgba(29, 27, 32, 0.1)", "surface": "rgba(254, 247, 255, 1)", "surfaceBright": "rgba(254, 247, 255, 1)", "surfaceContainer": "rgba(243, 237, 247, 1)", @@ -69,7 +68,6 @@ exports[`renders list section with custom title style 1`] = ` "surfaceContainerLow": "rgba(247, 242, 250, 1)", "surfaceContainerLowest": "rgba(255, 255, 255, 1)", "surfaceDim": "rgba(222, 216, 225, 1)", - "surfaceDisabled": "rgba(29, 27, 32, 0.1)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", @@ -560,7 +558,6 @@ exports[`renders list section with subheader 1`] = ` "scale": 1, }, "colors": { - "backdrop": "rgba(50, 47, 55, 0.4)", "background": "rgba(254, 247, 255, 1)", "elevation": { "level0": "transparent", @@ -587,7 +584,6 @@ exports[`renders list section with subheader 1`] = ` "onSecondaryFixed": "rgba(29, 25, 43, 1)", "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)", "onSurface": "rgba(29, 27, 32, 1)", - "onSurfaceDisabled": "rgba(29, 27, 32, 0.38)", "onSurfaceVariant": "rgba(73, 69, 79, 1)", "onTertiary": "rgba(255, 255, 255, 1)", "onTertiaryContainer": "rgba(99, 59, 72, 1)", @@ -605,6 +601,7 @@ exports[`renders list section with subheader 1`] = ` "secondaryFixed": "rgba(232, 222, 248, 1)", "secondaryFixedDim": "rgba(204, 194, 220, 1)", "shadow": "rgba(0, 0, 0, 1)", + "stateLayerPressed": "rgba(29, 27, 32, 0.1)", "surface": "rgba(254, 247, 255, 1)", "surfaceBright": "rgba(254, 247, 255, 1)", "surfaceContainer": "rgba(243, 237, 247, 1)", @@ -613,7 +610,6 @@ exports[`renders list section with subheader 1`] = ` "surfaceContainerLow": "rgba(247, 242, 250, 1)", "surfaceContainerLowest": "rgba(255, 255, 255, 1)", "surfaceDim": "rgba(222, 216, 225, 1)", - "surfaceDisabled": "rgba(29, 27, 32, 0.1)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", @@ -1102,7 +1098,6 @@ exports[`renders list section without subheader 1`] = ` "scale": 1, }, "colors": { - "backdrop": "rgba(50, 47, 55, 0.4)", "background": "rgba(254, 247, 255, 1)", "elevation": { "level0": "transparent", @@ -1129,7 +1124,6 @@ exports[`renders list section without subheader 1`] = ` "onSecondaryFixed": "rgba(29, 25, 43, 1)", "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)", "onSurface": "rgba(29, 27, 32, 1)", - "onSurfaceDisabled": "rgba(29, 27, 32, 0.38)", "onSurfaceVariant": "rgba(73, 69, 79, 1)", "onTertiary": "rgba(255, 255, 255, 1)", "onTertiaryContainer": "rgba(99, 59, 72, 1)", @@ -1147,6 +1141,7 @@ exports[`renders list section without subheader 1`] = ` "secondaryFixed": "rgba(232, 222, 248, 1)", "secondaryFixedDim": "rgba(204, 194, 220, 1)", "shadow": "rgba(0, 0, 0, 1)", + "stateLayerPressed": "rgba(29, 27, 32, 0.1)", "surface": "rgba(254, 247, 255, 1)", "surfaceBright": "rgba(254, 247, 255, 1)", "surfaceContainer": "rgba(243, 237, 247, 1)", @@ -1155,7 +1150,6 @@ exports[`renders list section without subheader 1`] = ` "surfaceContainerLow": "rgba(247, 242, 250, 1)", "surfaceContainerLowest": "rgba(255, 255, 255, 1)", "surfaceDim": "rgba(222, 216, 225, 1)", - "surfaceDisabled": "rgba(29, 27, 32, 0.1)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap index d3a7c1b1a1..ee5daf2acb 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap @@ -36,7 +36,7 @@ exports[`renders menu with content styles 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -104,6 +104,9 @@ exports[`renders menu with content styles 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -362,6 +365,9 @@ exports[`renders menu with content styles 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -483,6 +489,9 @@ exports[`renders menu with content styles 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -590,7 +599,7 @@ exports[`renders not visible menu 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -658,6 +667,9 @@ exports[`renders not visible menu 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -755,7 +767,7 @@ exports[`renders visible menu 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -823,6 +835,9 @@ exports[`renders visible menu 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1077,6 +1092,9 @@ exports[`renders visible menu 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -1198,6 +1216,9 @@ exports[`renders visible menu 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index 0b3afe7e7d..9028dc6b7d 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -59,6 +59,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -218,6 +221,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -377,6 +383,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 0.38, + }, undefined, ] } @@ -397,7 +406,7 @@ exports[`Menu Item renders menu item 1`] = ` style={ [ { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(73, 69, 79, 1)", "fontSize": 24, }, [ @@ -460,7 +469,7 @@ exports[`Menu Item renders menu item 1`] = ` }, [ { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -536,6 +545,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 0.38, + }, undefined, ] } @@ -556,7 +568,7 @@ exports[`Menu Item renders menu item 1`] = ` style={ [ { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(73, 69, 79, 1)", "fontSize": 24, }, [ @@ -619,7 +631,7 @@ exports[`Menu Item renders menu item 1`] = ` }, [ { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -695,6 +707,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap index bbf1c420f7..61ed4404f8 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap @@ -63,7 +63,7 @@ exports[`activity indicator snapshot test 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -140,35 +140,43 @@ exports[`activity indicator snapshot test 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -473,7 +481,7 @@ exports[`renders with placeholder 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -550,35 +558,43 @@ exports[`renders with placeholder 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -657,7 +673,7 @@ exports[`renders with placeholder 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -734,35 +750,43 @@ exports[`renders with placeholder 1`] = ` } testID="search-bar-clear-icon" > - + - close - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + close + + @@ -834,7 +858,7 @@ exports[`renders with text 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -911,35 +935,43 @@ exports[`renders with text 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -1014,7 +1046,7 @@ exports[`renders with text 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1091,35 +1123,43 @@ exports[`renders with text 1`] = ` } testID="search-bar-clear-icon" > - + - close - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + close + + diff --git a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap index e4200203b9..e36860cf04 100644 --- a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap @@ -91,6 +91,7 @@ exports[`renders segmented button 1`] = ` "paddingVertical": 9, }, { + "opacity": 1, "paddingVertical": 9, }, ] @@ -216,6 +217,7 @@ exports[`renders segmented button 1`] = ` "paddingVertical": 9, }, { + "opacity": 1, "paddingVertical": 9, }, ] diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index 401868fabf..ce2a9c8637 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap @@ -410,6 +410,9 @@ exports[`renders snackbar with action button 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index 090fdaec66..0a7334fa12 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -21,6 +21,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -65,6 +66,9 @@ exports[`call onPress when affix adornment pressed 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -206,6 +210,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -278,6 +283,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` [ { "color": "rgba(73, 69, 79, 1)", + "opacity": 1, }, { "fontFamily": "System", @@ -319,6 +325,7 @@ exports[`correctly applies a component as the text label 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -363,6 +370,9 @@ exports[`correctly applies a component as the text label 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -520,6 +530,7 @@ exports[`correctly applies a component as the text label 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -561,6 +572,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -605,6 +617,9 @@ exports[`correctly applies cursorColor prop 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -746,6 +761,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -787,6 +803,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -831,6 +848,9 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -972,6 +992,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -1050,6 +1071,9 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1232,6 +1256,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingHorizontal": 16, "textAlign": "left", "textAlignVertical": "top", @@ -1272,6 +1297,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -1316,6 +1342,9 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1457,6 +1486,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -1500,6 +1530,7 @@ exports[`correctly applies textAlign center 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -1544,6 +1575,9 @@ exports[`correctly applies textAlign center 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1685,6 +1719,7 @@ exports[`correctly applies textAlign center 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "center", @@ -1726,6 +1761,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -1770,6 +1806,9 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1911,6 +1950,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 56, "textAlign": "left", @@ -1952,6 +1992,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm [ { "color": "rgba(73, 69, 79, 1)", + "opacity": 1, }, { "fontFamily": "System", @@ -1980,6 +2021,9 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "position": "absolute", "width": 24, }, + { + "opacity": 1, + }, { "right": 16, "top": 16, @@ -2012,7 +2056,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2088,35 +2132,43 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm } testID="right-icon-adornment" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -2145,6 +2197,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -2189,6 +2242,9 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -2330,6 +2386,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 56, "paddingRight": 56, "textAlign": "left", @@ -2360,6 +2417,9 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "position": "absolute", "width": 24, }, + { + "opacity": 1, + }, { "left": 16, "top": 16, @@ -2392,7 +2452,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2468,35 +2528,43 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm } testID="left-icon-adornment" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -2522,6 +2590,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm [ { "color": "rgba(73, 69, 79, 1)", + "opacity": 1, }, { "fontFamily": "System", diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap index ceda64dd79..a8feb453e3 100644 --- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -5,7 +5,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(74, 68, 88, 0.1)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -25,7 +25,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(74, 68, 88, 0.1)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -105,35 +105,43 @@ exports[`renders disabled toggle button 1`] = ` } testID="icon-button" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -144,7 +152,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(74, 68, 88, 0.1)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -164,7 +172,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(74, 68, 88, 0.1)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -239,35 +247,43 @@ exports[`renders toggle button 1`] = ` } testID="icon-button" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -278,7 +294,7 @@ exports[`renders unchecked toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "transparent", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -298,7 +314,7 @@ exports[`renders unchecked toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "transparent", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -378,35 +394,43 @@ exports[`renders unchecked toggle button 1`] = ` } testID="icon-button" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + diff --git a/src/styles/themes/DarkTheme.tsx b/src/styles/themes/DarkTheme.tsx index 3ae132a977..0ec175b019 100644 --- a/src/styles/themes/DarkTheme.tsx +++ b/src/styles/themes/DarkTheme.tsx @@ -1,7 +1,7 @@ import color from 'color'; import { MD3LightTheme } from './LightTheme'; -import { MD3Colors, tokens } from './tokens'; +import { tokens } from './tokens'; import type { MD3Theme } from '../../types'; const { palette, stateOpacity } = tokens.md.ref; @@ -25,11 +25,6 @@ export const MD3DarkTheme: MD3Theme = { surfaceContainerHigh: palette.neutral17, surfaceContainerHighest: palette.neutral22, surfaceVariant: palette.neutralVariant30, - //TODO: remove this - surfaceDisabled: color(palette.neutral90) - .alpha(stateOpacity.pressed) - .rgb() - .string(), background: palette.neutral6, error: palette.error80, errorContainer: palette.error30, @@ -41,11 +36,6 @@ export const MD3DarkTheme: MD3Theme = { onTertiaryContainer: palette.tertiary90, onSurface: palette.neutral90, onSurfaceVariant: palette.neutralVariant80, - //TODO: remove this - onSurfaceDisabled: color(palette.neutral90) - .alpha(stateOpacity.disabled) - .rgb() - .string(), onError: palette.error20, onErrorContainer: palette.error90, onBackground: palette.neutral90, @@ -68,8 +58,10 @@ export const MD3DarkTheme: MD3Theme = { onTertiaryFixedVariant: palette.tertiary30, shadow: palette.neutral0, scrim: palette.neutral0, - //TODO: remove this - backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(), + stateLayerPressed: color(palette.neutral90) + .alpha(stateOpacity.pressed) + .rgb() + .string(), elevation: { level0: 'transparent', level1: palette.neutral4, diff --git a/src/styles/themes/DynamicTheme.android.tsx b/src/styles/themes/DynamicTheme.android.tsx index 28642ec3fd..3f365520dd 100644 --- a/src/styles/themes/DynamicTheme.android.tsx +++ b/src/styles/themes/DynamicTheme.android.tsx @@ -13,7 +13,7 @@ const ac = (name: string) => /** * Picks the correct color value for the current Android API level. * - API 34+: uses the named role resource (system_*_light/dark) - * - API 31-33: uses the tonal accent resource (system_accent*_NNN), or ref if null + * - API 31-33: uses the tonal accent resource (system_accent*_NNN), or ref * - API < 31: uses the reference palette string from the base theme * @see https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md */ @@ -108,7 +108,7 @@ const lightColors = { ), onErrorContainer: pick( 'system_on_error_container_light', - MD3LightTheme.colors.errorContainer, + MD3LightTheme.colors.onErrorContainer, MD3LightTheme.colors.onErrorContainer ), onSurface: pick( diff --git a/src/styles/themes/LightTheme.tsx b/src/styles/themes/LightTheme.tsx index c7386d6d78..a386a977b6 100644 --- a/src/styles/themes/LightTheme.tsx +++ b/src/styles/themes/LightTheme.tsx @@ -1,6 +1,6 @@ import color from 'color'; -import { MD3Colors, tokens } from './tokens'; +import { tokens } from './tokens'; import type { MD3Theme } from '../../types'; import configureFonts from '../fonts'; @@ -25,10 +25,6 @@ export const MD3LightTheme: MD3Theme = { surfaceContainerHigh: palette.neutral92, surfaceContainerHighest: palette.neutral90, surfaceVariant: palette.neutralVariant90, - surfaceDisabled: color(palette.neutral10) - .alpha(stateOpacity.pressed) - .rgb() - .string(), background: palette.neutral98, error: palette.error40, errorContainer: palette.error90, @@ -40,10 +36,6 @@ export const MD3LightTheme: MD3Theme = { onTertiaryContainer: palette.tertiary30, onSurface: palette.neutral10, onSurfaceVariant: palette.neutralVariant30, - onSurfaceDisabled: color(palette.neutral10) - .alpha(stateOpacity.disabled) - .rgb() - .string(), onError: palette.error100, onErrorContainer: palette.error30, onBackground: palette.neutral10, @@ -66,7 +58,10 @@ export const MD3LightTheme: MD3Theme = { onTertiaryFixedVariant: palette.tertiary30, shadow: palette.neutral0, scrim: palette.neutral0, - backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(), + stateLayerPressed: color(palette.neutral10) + .alpha(stateOpacity.pressed) + .rgb() + .string(), elevation: { level0: 'transparent', level1: palette.neutral100, diff --git a/src/styles/themes/tokens.tsx b/src/styles/themes/tokens.tsx index 51e52ae6bd..aec68221ef 100644 --- a/src/styles/themes/tokens.tsx +++ b/src/styles/themes/tokens.tsx @@ -125,6 +125,7 @@ const ref = { focus: 0.1, hover: 0.08, disabled: 0.38, + enabled: 1.0, }, }; diff --git a/src/types.tsx b/src/types.tsx index 07e2d6dc76..941cf689f9 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -42,7 +42,6 @@ export type MD3Colors = { surfaceContainerHigh: string; surfaceContainerHighest: string; surfaceVariant: string; - surfaceDisabled: string; background: string; error: string; errorContainer: string; @@ -54,7 +53,6 @@ export type MD3Colors = { onTertiaryContainer: string; onSurface: string; onSurfaceVariant: string; - onSurfaceDisabled: string; onError: string; onErrorContainer: string; onBackground: string; @@ -77,61 +75,14 @@ export type MD3Colors = { onTertiaryFixedVariant: string; shadow: string; scrim: string; - backdrop: string; + /** Pre-computed state layer color at press opacity (0.10). + * Used for ripple effects. Avoids runtime alpha manipulation + * which is incompatible with PlatformColor on Android. + * @see https://m3.material.io/foundations/interaction/states/state-layers */ + stateLayerPressed: string; elevation: MD3ElevationColors; }; -export type MD3AndroidColors = { - primary: number; - primaryContainer: number; - secondary: number; - secondaryContainer: number; - tertiary: number; - tertiaryContainer: number; - surface: number; - surfaceDim: number; - surfaceBright: number; - surfaceContainerLowest: number; - surfaceContainerLow: number; - surfaceContainer: number; - surfaceContainerHigh: number; - surfaceContainerHighest: number; - surfaceVariant: number; - background: number; - error: number; - errorContainer: number; - onPrimary: number; - onPrimaryContainer: number; - onSecondary: number; - onSecondaryContainer: number; - onTertiary: number; - onTertiaryContainer: number; - onSurface: number; - onSurfaceVariant: number; - onError: number; - onErrorContainer: number; - onBackground: number; - outline: number; - outlineVariant: number; - inverseSurface: number; - inverseOnSurface: number; - inversePrimary: number; - primaryFixed: number; - primaryFixedDim: number; - onPrimaryFixed: number; - onPrimaryFixedVariant: number; - secondaryFixed: number; - secondaryFixedDim: number; - onSecondaryFixed: number; - onSecondaryFixedVariant: number; - tertiaryFixed: number; - tertiaryFixedDim: number; - onTertiaryFixed: number; - onTertiaryFixedVariant: number; - shadow: number; - scrim: number; -}; - export type ThemeProp = $DeepPartial; export type ThemeBase = { From 07edd3c0b1cf2287337045a59048f60a82114b3a Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Tue, 7 Apr 2026 16:32:40 +0300 Subject: [PATCH 12/14] refactor: remove remaining MD3 mentions after MD2 removal --- docs/src/components/BannerExample.tsx | 4 +- docs/src/components/GetStartedButtons.tsx | 4 +- example/src/DrawerItems.tsx | 6 +- .../src/Examples/ActivityIndicatorExample.tsx | 4 +- .../AnimatedFABExample/AnimatedFABExample.tsx | 8 +- example/src/Examples/AvatarExample.tsx | 10 +- example/src/Examples/BadgeExample.tsx | 4 +- example/src/Examples/BannerExample.tsx | 8 +- example/src/Examples/ButtonExample.tsx | 6 +- example/src/Examples/CheckboxExample.tsx | 4 +- example/src/Examples/ChipExample.tsx | 4 +- .../Dialogs/DialogWithCustomColors.tsx | 12 +- .../src/Examples/Dialogs/DialogWithIcon.tsx | 4 +- .../Dialogs/DialogWithLoadingIndicator.tsx | 4 +- example/src/Examples/IconButtonExample.tsx | 14 +- example/src/Examples/MenuExample.tsx | 8 +- example/src/Examples/ProgressBarExample.tsx | 8 +- example/src/Examples/RadioButtonExample.tsx | 9 +- example/src/Examples/SearchbarExample.tsx | 12 +- example/src/Examples/SurfaceExample.tsx | 14 +- example/src/Examples/SwitchExample.tsx | 14 +- example/src/Examples/TextExample.tsx | 4 +- example/src/Examples/TextInputExample.tsx | 14 +- example/src/PreferencesContext.tsx | 4 +- example/src/hooks/useExampleTheme.ts | 4 +- example/src/index.native.tsx | 12 +- example/src/index.tsx | 4 +- example/utils/index.ts | 64 ++--- example/utils/themes.ts | 25 +- .../__fixtures__/rewrite-imports/output.js | 3 +- src/components/Appbar/Appbar.tsx | 4 +- src/components/Appbar/AppbarContent.tsx | 4 +- src/components/Button/Button.tsx | 58 ++-- src/components/Card/CardTitle.tsx | 6 +- src/components/Checkbox/CheckboxItem.tsx | 4 +- src/components/Chip/Chip.tsx | 55 +--- src/components/Drawer/DrawerSection.tsx | 4 +- src/components/FAB/AnimatedFAB.tsx | 4 +- src/components/FAB/FAB.tsx | 4 +- src/components/Icon.tsx | 4 +- src/components/List/ListAccordion.tsx | 18 +- src/components/List/ListIcon.tsx | 12 +- src/components/List/ListImage.tsx | 6 +- src/components/List/ListItem.tsx | 14 +- src/components/Menu/Menu.tsx | 6 +- src/components/Menu/MenuItem.tsx | 10 +- src/components/ProgressBar.tsx | 4 +- .../RadioButton/RadioButtonItem.tsx | 4 +- src/components/Surface.tsx | 6 +- src/components/TextInput/Addons/Underline.tsx | 6 +- src/components/Typography/types.tsx | 4 +- src/components/__tests__/AnimatedFAB.test.tsx | 4 +- src/components/__tests__/Card/Card.test.tsx | 6 +- src/components/__tests__/Menu.test.tsx | 4 +- src/components/__tests__/Modal.test.tsx | 4 +- .../__tests__/Typography/Text.test.tsx | 12 +- .../__snapshots__/Banner.test.tsx.snap | 28 +- .../__snapshots__/Button.test.tsx.snap | 95 ++----- .../__snapshots__/Chip.test.tsx.snap | 64 +---- .../__snapshots__/DataTable.test.tsx.snap | 10 +- .../__snapshots__/ListAccordion.test.tsx.snap | 24 +- .../__snapshots__/ListItem.test.tsx.snap | 38 +-- .../__snapshots__/ListSection.test.tsx.snap | 24 +- .../__snapshots__/Menu.test.tsx.snap | 18 +- .../__snapshots__/Snackbar.test.tsx.snap | 7 +- src/core/__tests__/PaperProvider.test.tsx | 10 +- src/core/__tests__/theming.test.tsx | 128 +++++---- src/core/theming.tsx | 34 +-- src/index.tsx | 9 +- src/styles/fonts.tsx | 18 +- src/styles/shadow.tsx | 14 +- src/styles/themes/DarkTheme.tsx | 8 +- src/styles/themes/DynamicTheme.android.tsx | 252 +++++++++--------- src/styles/themes/DynamicTheme.tsx | 4 +- src/styles/themes/LightTheme.tsx | 4 +- src/styles/themes/index.ts | 6 +- src/styles/themes/tokens.tsx | 2 +- src/types.tsx | 27 +- 78 files changed, 563 insertions(+), 823 deletions(-) diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx index 7f4acdc7bc..b1c27a063c 100644 --- a/docs/src/components/BannerExample.tsx +++ b/docs/src/components/BannerExample.tsx @@ -9,8 +9,8 @@ import { Avatar, Button, FAB, - MD3DarkTheme as DarkTheme, - MD3LightTheme as DefaultTheme, + DarkTheme as DarkTheme, + LightTheme as DefaultTheme, ProgressBar, PaperProvider, RadioButton, diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx index 4debe5b5ac..32ce2b15fd 100644 --- a/docs/src/components/GetStartedButtons.tsx +++ b/docs/src/components/GetStartedButtons.tsx @@ -9,8 +9,8 @@ import Link from '@docusaurus/Link'; import { useColorMode } from '@docusaurus/theme-common'; import { Button, - MD3DarkTheme as DarkTheme, - MD3LightTheme as DefaultTheme, + DarkTheme as DarkTheme, + LightTheme as DefaultTheme, PaperProvider, } from 'react-native-paper'; diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index a0922584a7..e5d04143bb 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -9,7 +9,7 @@ import { Button, Dialog, Drawer, - MD3Colors, + Colors, Switch, Text, TouchableRipple, @@ -136,8 +136,8 @@ function DrawerItems() { const coloredLabelTheme = { colors: { - secondaryContainer: MD3Colors.tertiary80, - onSecondaryContainer: MD3Colors.tertiary20, + secondaryContainer: Colors.tertiary80, + onSecondaryContainer: Colors.tertiary20, }, }; diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx index 15686054fa..9c0fa5f0c4 100644 --- a/example/src/Examples/ActivityIndicatorExample.tsx +++ b/example/src/Examples/ActivityIndicatorExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { ActivityIndicator, FAB, List, MD3Colors } from 'react-native-paper'; +import { ActivityIndicator, FAB, List, Colors } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -41,7 +41,7 @@ const ActivityIndicatorExample = () => { diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx index f9b2303fad..706b2f59be 100644 --- a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx +++ b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx @@ -3,7 +3,7 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'; import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native'; import Icon from '@expo/vector-icons/MaterialCommunityIcons'; -import { Avatar, MD3Colors, Text } from 'react-native-paper'; +import { Avatar, Colors, Text } from 'react-native-paper'; import CustomFAB from './CustomFAB'; import CustomFABControls, { @@ -46,7 +46,7 @@ const AnimatedFABExample = () => { @@ -88,9 +88,7 @@ const AnimatedFABExample = () => { setVisible(!visible)} style={styles.icon} diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx index 229c2f4a0b..e98ff023dd 100644 --- a/example/src/Examples/AvatarExample.tsx +++ b/example/src/Examples/AvatarExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Avatar, List, MD3Colors } from 'react-native-paper'; +import { Avatar, List, Colors } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -14,11 +14,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: MD3Colors.error70, + backgroundColor: Colors.error70, }, ]} label="XD" - color={MD3Colors.primary0} + color={Colors.primary0} /> @@ -30,11 +30,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: MD3Colors.error70, + backgroundColor: Colors.error70, }, ]} icon="folder" - color={MD3Colors.primary0} + color={Colors.primary0} /> diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx index 3269dc70a8..b94c8e72b1 100644 --- a/example/src/Examples/BadgeExample.tsx +++ b/example/src/Examples/BadgeExample.tsx @@ -5,7 +5,7 @@ import { Badge, IconButton, List, - MD3Colors, + Colors, Text, Switch, } from 'react-native-paper'; @@ -41,7 +41,7 @@ const BadgeExample = () => { style={[ styles.badge, { - backgroundColor: MD3Colors.primary80, + backgroundColor: Colors.primary80, }, ]} > diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx index f93cf55797..086d7349ba 100644 --- a/example/src/Examples/BannerExample.tsx +++ b/example/src/Examples/BannerExample.tsx @@ -8,7 +8,7 @@ import { View, } from 'react-native'; -import { Banner, FAB, MD3Colors } from 'react-native-paper'; +import { Banner, FAB, Colors } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -32,11 +32,11 @@ const BannerExample = () => { const customTheme = { ...defaultTheme, colors: { - onSurface: MD3Colors.tertiary100, + onSurface: Colors.tertiary100, elevation: { - level1: MD3Colors.tertiary50, + level1: Colors.tertiary50, }, - primary: MD3Colors.tertiary10, + primary: Colors.tertiary10, }, }; diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx index c6ecc56d09..3722dc2ecf 100644 --- a/example/src/Examples/ButtonExample.tsx +++ b/example/src/Examples/ButtonExample.tsx @@ -275,7 +275,7 @@ const ButtonExample = () => { mode="outlined" onPress={() => {}} style={styles.button} - labelStyle={[styles.fontStyles, styles.md3FontStyles]} + labelStyle={[styles.fontStyles]} > Custom Font @@ -367,10 +367,8 @@ const styles = StyleSheet.create({ flexReverse: { flexDirection: 'row-reverse', }, - md3FontStyles: { - lineHeight: 32, - }, fontStyles: { + lineHeight: 32, fontWeight: '800', fontSize: 24, }, diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx index 5067b7bb48..a6ce3be3bf 100644 --- a/example/src/Examples/CheckboxExample.tsx +++ b/example/src/Examples/CheckboxExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Checkbox, MD3Colors, Text, TouchableRipple } from 'react-native-paper'; +import { Checkbox, Colors, Text, TouchableRipple } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -28,7 +28,7 @@ const CheckboxExample = () => { Custom diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx index 211ebfde49..edc2ebefa1 100644 --- a/example/src/Examples/ChipExample.tsx +++ b/example/src/Examples/ChipExample.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Image, StyleSheet, View } from 'react-native'; import color from 'color'; -import { Chip, List, MD3Colors, Snackbar, Text } from 'react-native-paper'; +import { Chip, List, Colors, Snackbar, Text } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -11,7 +11,7 @@ const ChipExample = () => { visible: false, text: '', }); - const customColor = MD3Colors.error50; + const customColor = Colors.error50; return ( <> diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx index d6ab73ccba..c0f480f6e7 100644 --- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx +++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Colors } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -16,20 +16,18 @@ const DialogWithCustomColors = ({ - - Alert - + Alert - + This is a dialog with custom colors - diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx index d939d4e401..3a0c5f7cfe 100644 --- a/example/src/Examples/Dialogs/DialogWithIcon.tsx +++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet } from 'react-native'; -import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, Colors } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -24,7 +24,7 @@ const DialogWithIcon = ({ - diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx index 5860737e3e..158e1b6577 100644 --- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx +++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'; -import { Dialog, MD3Colors, Portal } from 'react-native-paper'; +import { Dialog, Colors, Portal } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -21,7 +21,7 @@ const DialogWithLoadingIndicator = ({ diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx index a701662d21..68e4135bbe 100644 --- a/example/src/Examples/IconButtonExample.tsx +++ b/example/src/Examples/IconButtonExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { IconButton, List, MD3Colors } from 'react-native-paper'; +import { IconButton, List, Colors } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -121,7 +121,7 @@ const ButtonExample = () => { {}} /> { mode="contained" style={styles.square} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Colors.tertiary50} onPress={() => {}} /> { style={styles.slightlyRounded} size={24} contentStyle={styles.eyePadding} - iconColor={MD3Colors.tertiary50} + iconColor={Colors.tertiary50} onPress={() => {}} /> { mode="contained-tonal" style={styles.differentBorderRadius} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Colors.tertiary50} onPress={() => {}} /> { mode="outlined" style={styles.differentBorderRadius} size={24} - iconColor={MD3Colors.tertiary50} + iconColor={Colors.tertiary50} onPress={() => {}} /> {}} /> @@ -162,7 +162,7 @@ const ButtonExample = () => { icon="lock" size={36} onPress={() => {}} - containerColor={MD3Colors.tertiary60} + containerColor={Colors.tertiary60} /> {}} /> {}} loading /> diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx index 027cc5b84d..47734112e4 100644 --- a/example/src/Examples/MenuExample.tsx +++ b/example/src/Examples/MenuExample.tsx @@ -69,7 +69,7 @@ const MenuExample = ({ navigation }: Props) => { > {}} title="Undo" /> {}} title="Redo" /> - + {}} title="Cut" disabled /> {}} title="Copy" disabled /> {}} title="Paste" /> @@ -93,7 +93,7 @@ const MenuExample = ({ navigation }: Props) => { {}} title="Undo" /> {}} title="Redo" /> - + { > {}} title="Item 1" /> {}} title="Item 2" /> - + {}} title="Item 3" disabled /> @@ -190,7 +190,7 @@ const styles = StyleSheet.create({ alignCenter: { alignItems: 'center', }, - md3Divider: { + divider: { marginVertical: 8, }, bottomMenu: { width: '40%' }, diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index 33f39f9d35..911f469c93 100644 --- a/example/src/Examples/ProgressBarExample.tsx +++ b/example/src/Examples/ProgressBarExample.tsx @@ -4,7 +4,7 @@ import { View, StyleSheet, Animated } from 'react-native'; import { Button, ProgressBar, - MD3Colors, + Colors, ProgressBarProps, Text, } from 'react-native-paper'; @@ -62,7 +62,7 @@ const ProgressBarExample = () => { @@ -73,9 +73,9 @@ const ProgressBarExample = () => { diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx index e33aabdfff..dc6b6d1845 100644 --- a/example/src/Examples/RadioButtonExample.tsx +++ b/example/src/Examples/RadioButtonExample.tsx @@ -1,12 +1,7 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { - MD3Colors, - RadioButton, - Text, - TouchableRipple, -} from 'react-native-paper'; +import { Colors, RadioButton, Text, TouchableRipple } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -46,7 +41,7 @@ const RadioButtonExample = () => { diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx index c5b5eaca15..27e8adacc4 100644 --- a/example/src/Examples/SearchbarExample.tsx +++ b/example/src/Examples/SearchbarExample.tsx @@ -3,13 +3,7 @@ import { Keyboard, StyleSheet } from 'react-native'; import type { DrawerNavigationProp } from '@react-navigation/drawer'; import type { StackNavigationProp } from '@react-navigation/stack'; -import { - List, - MD3Colors, - Searchbar, - Snackbar, - Avatar, -} from 'react-native-paper'; +import { List, Colors, Searchbar, Snackbar, Avatar } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -57,7 +51,7 @@ const SearchExample = ({ navigation }: Props) => { value={searchQueries.traileringIcon} traileringIcon={'microphone'} traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant + isVisible ? Colors.error40 : colors.onSurfaceVariant } traileringIconAccessibilityLabel={'microphone button'} onTraileringIconPress={() => setIsVisible(true)} @@ -76,7 +70,7 @@ const SearchExample = ({ navigation }: Props) => { value={searchQueries.traileringIconWithRightItem} traileringIcon={'microphone'} traileringIconColor={ - isVisible ? MD3Colors.error40 : colors.onSurfaceVariant + isVisible ? Colors.error40 : colors.onSurfaceVariant } traileringIconAccessibilityLabel={'microphone button'} onTraileringIconPress={() => setIsVisible(true)} diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx index 6abbc7f603..8711986aa4 100644 --- a/example/src/Examples/SurfaceExample.tsx +++ b/example/src/Examples/SurfaceExample.tsx @@ -1,13 +1,7 @@ import * as React from 'react'; import { ScrollView, StyleSheet, View } from 'react-native'; -import { - MD3Elevation, - Surface, - Text, - MD3Colors, - List, -} from 'react-native-paper'; +import { Elevation, Surface, Text, Colors, List } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -19,7 +13,7 @@ const SurfaceExample = () => { key={index} style={styles.surface} mode={mode} - elevation={index as MD3Elevation} + elevation={index as Elevation} > {`Elevation ${index === 1 ? '(default)' : ''} ${index}`} @@ -86,7 +80,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', width: '100%', marginBottom: 20, - borderColor: MD3Colors.tertiary50, + borderColor: Colors.tertiary50, padding: 10, borderWidth: 1, }, @@ -99,7 +93,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', width: '100%', marginBottom: 100, - borderColor: MD3Colors.tertiary50, + borderColor: Colors.tertiary50, padding: 10, borderWidth: 1, }, diff --git a/example/src/Examples/SwitchExample.tsx b/example/src/Examples/SwitchExample.tsx index 03e0e45d4d..83f189a2b0 100644 --- a/example/src/Examples/SwitchExample.tsx +++ b/example/src/Examples/SwitchExample.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Platform, StyleSheet, View } from 'react-native'; -import { MD3Colors, Switch, Text, TouchableRipple } from 'react-native-paper'; +import { Colors, Switch, Text, TouchableRipple } from 'react-native-paper'; import ScreenWrapper from '../ScreenWrapper'; @@ -9,12 +9,8 @@ const SwitchExample = () => { const [valueNormal, setNormalValue] = React.useState(true); const [valueCustom, setCustomValue] = React.useState(true); - const switchValueNormalLabel = `switch ${ - valueNormal === true ? 'on' : 'off' - }`; - const switchValueCustomlLabel = `switch ${ - valueCustom === true ? 'on' : 'off' - }`; + const switchValueNormalLabel = `switch ${valueNormal ? 'on' : 'off'}`; + const switchValueCustomlLabel = `switch ${valueCustom ? 'on' : 'off'}`; const TextComponent = Text; @@ -32,7 +28,7 @@ const SwitchExample = () => { Custom {switchValueCustomlLabel} - + @@ -59,7 +55,7 @@ const SwitchExample = () => { setCustomValue(!valueCustom)} - color={MD3Colors.tertiary50} + color={Colors.tertiary50} /> diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index 1cb96edfaf..ea814c1c18 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -3,7 +3,7 @@ import { Platform, StyleSheet, View } from 'react-native'; import { configureFonts, - MD3LightTheme, + LightTheme, PaperProvider, customText, } from 'react-native-paper'; @@ -30,7 +30,7 @@ const TextExample = () => { } as const; const theme = { - ...MD3LightTheme, + ...LightTheme, fonts: configureFonts({ config: fontConfig }), }; return ( diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index caecdc49b8..b35c653089 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -13,7 +13,7 @@ import { configureFonts, HelperText, List, - MD3Colors, + Colors, TextInput, } from 'react-native-paper'; @@ -567,7 +567,7 @@ const TextInputExample = () => { * @@ -597,8 +597,8 @@ const TextInputExample = () => { onChangeText={(flatUnderlineColors) => inputActionHandler('flatUnderlineColors', flatUnderlineColors) } - underlineColor={MD3Colors.primary70} - activeUnderlineColor={MD3Colors.tertiary50} + underlineColor={Colors.primary70} + activeUnderlineColor={Colors.tertiary50} /> { onChangeText={(outlinedColors) => inputActionHandler('outlinedColors', outlinedColors) } - outlineColor={MD3Colors.primary70} - activeOutlineColor={MD3Colors.tertiary50} + outlineColor={Colors.primary70} + activeOutlineColor={Colors.tertiary50} /> void; @@ -9,7 +9,7 @@ export const PreferencesContext = React.createContext<{ toggleCustomFont: () => void; toggleRippleEffect: () => void; toggleShouldUseDeviceColors?: () => void; - theme: MD3Theme; + theme: Theme; rtl: boolean; collapsed: boolean; customFontLoaded: boolean; diff --git a/example/src/hooks/useExampleTheme.ts b/example/src/hooks/useExampleTheme.ts index 416b877b29..5e39a00174 100644 --- a/example/src/hooks/useExampleTheme.ts +++ b/example/src/hooks/useExampleTheme.ts @@ -1,3 +1,3 @@ -import { MD3Theme, useTheme } from 'react-native-paper'; +import { Theme, useTheme } from 'react-native-paper'; -export const useExampleTheme = () => useTheme(); +export const useExampleTheme = () => useTheme(); diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index 3193ee6443..f16f7ab82a 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -10,10 +10,10 @@ import { StatusBar } from 'expo-status-bar'; import * as Updates from 'expo-updates'; import { PaperProvider, - MD3DarkTheme, - MD3LightTheme, - MD3DynamicDarkTheme, - MD3DynamicLightTheme, + DarkTheme, + LightTheme, + DynamicDarkTheme, + DynamicLightTheme, } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; @@ -57,10 +57,10 @@ export default function PaperExample() { const theme = React.useMemo(() => { if (deviceColorsSupported && shouldUseDeviceColors) { - return isDarkMode ? MD3DynamicDarkTheme : MD3DynamicLightTheme; + return isDarkMode ? DynamicDarkTheme : DynamicLightTheme; } - return isDarkMode ? MD3DarkTheme : MD3LightTheme; + return isDarkMode ? DarkTheme : LightTheme; }, [isDarkMode, shouldUseDeviceColors]); React.useEffect(() => { diff --git a/example/src/index.tsx b/example/src/index.tsx index ce4df07253..0b666f425b 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -5,7 +5,7 @@ import { createDrawerNavigator } from '@react-navigation/drawer'; import { InitialState, NavigationContainer } from '@react-navigation/native'; import { useFonts } from 'expo-font'; import { useKeepAwake } from 'expo-keep-awake'; -import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper'; +import { PaperProvider, DarkTheme, LightTheme } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; @@ -42,7 +42,7 @@ export default function PaperExample() { const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); const theme = React.useMemo(() => { - return isDarkMode ? MD3DarkTheme : MD3LightTheme; + return isDarkMode ? DarkTheme : LightTheme; }, [isDarkMode]); React.useEffect(() => { diff --git a/example/utils/index.ts b/example/utils/index.ts index eebc4da783..be94f003f9 100644 --- a/example/utils/index.ts +++ b/example/utils/index.ts @@ -1,6 +1,6 @@ import { Platform } from 'react-native'; -import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper'; +import { DarkTheme, LightTheme, Theme } from 'react-native-paper'; type ReducerAction = { payload: State[T]; @@ -525,7 +525,7 @@ export const teamsList = [ const lightPinkColors = { colors: { - ...MD3LightTheme.colors, + ...LightTheme.colors, primary: 'rgb(154, 64, 87)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(255, 217, 223)', @@ -571,7 +571,7 @@ const lightPinkColors = { const darkPinkColors = { colors: { - ...MD3DarkTheme.colors, + ...DarkTheme.colors, primary: 'rgb(255, 177, 192)', onPrimary: 'rgb(95, 17, 42)', primaryContainer: 'rgb(124, 41, 64)', @@ -617,7 +617,7 @@ const darkPinkColors = { const lightGreenColors = { colors: { - ...MD3LightTheme.colors, + ...LightTheme.colors, primary: 'rgb(0, 110, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(141, 251, 119)', @@ -663,7 +663,7 @@ const lightGreenColors = { const darkGreenColors = { colors: { - ...MD3DarkTheme.colors, + ...DarkTheme.colors, primary: 'rgb(114, 222, 94)', onPrimary: 'rgb(0, 58, 0)', primaryContainer: 'rgb(0, 83, 0)', @@ -709,7 +709,7 @@ const darkGreenColors = { const lightBlueColors = { colors: { - ...MD3LightTheme.colors, + ...LightTheme.colors, primary: 'rgb(52, 61, 255)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(224, 224, 255)', @@ -755,7 +755,7 @@ const lightBlueColors = { const darkBlueColors = { colors: { - ...MD3DarkTheme.colors, + ...DarkTheme.colors, primary: 'rgb(190, 194, 255)', onPrimary: 'rgb(0, 1, 172)', primaryContainer: 'rgb(0, 0, 239)', @@ -801,7 +801,7 @@ const darkBlueColors = { const lightOrangeColors = { colors: { - ...MD3LightTheme.colors, + ...LightTheme.colors, primary: 'rgb(133, 84, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(255, 221, 183)', @@ -847,7 +847,7 @@ const lightOrangeColors = { const darkOrangeColors = { colors: { - ...MD3DarkTheme.colors, + ...DarkTheme.colors, primary: 'rgb(255, 185, 92)', onPrimary: 'rgb(70, 42, 0)', primaryContainer: 'rgb(101, 62, 0)', @@ -893,7 +893,7 @@ const darkOrangeColors = { const lightRedColors = { colors: { - ...MD3LightTheme.colors, + ...LightTheme.colors, primary: 'rgb(192, 1, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(255, 218, 212)', @@ -939,7 +939,7 @@ const lightRedColors = { const darkRedColors = { colors: { - ...MD3DarkTheme.colors, + ...DarkTheme.colors, primary: 'rgb(255, 180, 168)', onPrimary: 'rgb(105, 1, 0)', primaryContainer: 'rgb(147, 1, 0)', @@ -985,7 +985,7 @@ const darkRedColors = { const lightYellowColors = { colors: { - ...MD3LightTheme.colors, + ...LightTheme.colors, primary: 'rgb(98, 98, 0)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(234, 234, 0)', @@ -1031,7 +1031,7 @@ const lightYellowColors = { const darkYellowColors = { colors: { - ...MD3DarkTheme.colors, + ...DarkTheme.colors, primary: 'rgb(205, 205, 0)', onPrimary: 'rgb(50, 50, 0)', primaryContainer: 'rgb(73, 73, 0)', @@ -1077,7 +1077,7 @@ const darkYellowColors = { const lightCyanColors = { colors: { - ...MD3LightTheme.colors, + ...LightTheme.colors, primary: 'rgb(0, 106, 106)', onPrimary: 'rgb(255, 255, 255)', primaryContainer: 'rgb(0, 251, 251)', @@ -1123,7 +1123,7 @@ const lightCyanColors = { const darkCyanColors = { colors: { - ...MD3DarkTheme.colors, + ...DarkTheme.colors, primary: 'rgb(0, 221, 221)', onPrimary: 'rgb(0, 55, 55)', primaryContainer: 'rgb(0, 79, 79)', @@ -1169,80 +1169,80 @@ const darkCyanColors = { export const colorThemes = { paper: { - light: MD3LightTheme, - dark: MD3DarkTheme, + light: LightTheme, + dark: DarkTheme, }, pink: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightPinkColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkPinkColors, }, }, green: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightGreenColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkGreenColors, }, }, blue: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightBlueColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkBlueColors, }, }, orange: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightOrangeColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkOrangeColors, }, }, red: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightRedColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkRedColors, }, }, yellow: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightYellowColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkYellowColors, }, }, cyan: { light: { - ...MD3LightTheme, + ...LightTheme, ...lightCyanColors, }, dark: { - ...MD3DarkTheme, + ...DarkTheme, ...darkCyanColors, }, }, -} as { [key: string]: { light: MD3Theme; dark: MD3Theme } }; +} as { [key: string]: { light: Theme; dark: Theme } }; export const songsData = [ { diff --git a/example/utils/themes.ts b/example/utils/themes.ts index 85e4bb4f81..7ea07586e0 100644 --- a/example/utils/themes.ts +++ b/example/utils/themes.ts @@ -4,38 +4,39 @@ import { } from '@react-navigation/native'; import { adaptNavigationTheme, - MD3DarkTheme, - MD3LightTheme, + DarkTheme, + LightTheme, configureFonts, } from 'react-native-paper'; -const { LightTheme, DarkTheme } = adaptNavigationTheme({ - reactNavigationLight: NavigationDefaultTheme, - reactNavigationDark: NavigationDarkTheme, -}); +const { LightTheme: NavLightTheme, DarkTheme: NavDarkTheme } = + adaptNavigationTheme({ + reactNavigationLight: NavigationDefaultTheme, + reactNavigationDark: NavigationDarkTheme, + }); export const CombinedDefaultTheme = { - ...MD3LightTheme, ...LightTheme, + ...NavLightTheme, colors: { - ...MD3LightTheme.colors, ...LightTheme.colors, + ...NavLightTheme.colors, }, fonts: { - ...MD3LightTheme.fonts, + ...NavLightTheme.fonts, ...LightTheme.fonts, }, }; export const CombinedDarkTheme = { - ...MD3DarkTheme, ...DarkTheme, + ...NavDarkTheme, colors: { - ...MD3DarkTheme.colors, ...DarkTheme.colors, + ...NavDarkTheme.colors, }, fonts: { - ...MD3DarkTheme.fonts, + ...NavDarkTheme.fonts, ...DarkTheme.fonts, }, }; diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js index 2105a35e9c..8e543cd243 100644 --- a/src/babel/__fixtures__/rewrite-imports/output.js +++ b/src/babel/__fixtures__/rewrite-imports/output.js @@ -4,8 +4,7 @@ import BottomNavigation from "react-native-paper/lib/module/components/BottomNav import Button from "react-native-paper/lib/module/components/Button/Button"; import FAB from "react-native-paper/lib/module/components/FAB"; import Appbar from "react-native-paper/lib/module/components/Appbar"; -import { MD3Colors } from "react-native-paper/lib/module/styles/themes/tokens"; -import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js"; +import { MD3Colors, NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js"; import { ThemeProvider } from "react-native-paper/lib/module/core/theming"; import { withTheme } from "react-native-paper/lib/module/core/theming"; import { DefaultTheme } from "react-native-paper/lib/module/core/theming"; diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index 349761849c..2279cbdcb3 100644 --- a/src/components/Appbar/Appbar.tsx +++ b/src/components/Appbar/Appbar.tsx @@ -18,7 +18,7 @@ import { AppbarChildProps, } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { MD3Elevation, ThemeProp } from '../../types'; +import type { Elevation, ThemeProp } from '../../types'; import Surface from '../Surface'; export type Props = Omit< @@ -237,7 +237,7 @@ const Appbar = ({ insets, restStyle, ]} - elevation={elevation as MD3Elevation} + elevation={elevation as Elevation} container {...rest} > diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx index c3054f4ac4..c1ef8da904 100644 --- a/src/components/Appbar/AppbarContent.tsx +++ b/src/components/Appbar/AppbarContent.tsx @@ -14,7 +14,7 @@ import { import { modeTextVariant } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '../../types'; +import type { $RemoveChildren, TypescaleKey, ThemeProp } from '../../types'; import Text, { TextRef } from '../Typography/Text'; type TitleString = { @@ -123,7 +123,7 @@ const AppbarContent = ({ 'center-aligned': styles.defaultContainer, }; - const variant = modeTextVariant[mode] as MD3TypescaleKey; + const variant = modeTextVariant[mode] as TypescaleKey; const contentWrapperProps = { pointerEvents: 'box-none' as ViewProps['pointerEvents'], diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index f57fa881fd..1c02fef617 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -315,16 +315,13 @@ const Button = ( const iconStyle = StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse' ? [ - styles.iconReverse, - styles[`md3IconReverse${compact ? 'Compact' : ''}`], + styles[`iconReverse${compact ? 'Compact' : ''}`], isMode('text') && - styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`], + styles[`iconReverseTextMode${compact ? 'Compact' : ''}`], ] : [ - styles.icon, - styles[`md3Icon${compact ? 'Compact' : ''}`], - isMode('text') && - styles[`md3IconTextMode${compact ? 'Compact' : ''}`], + styles[`icon${compact ? 'Compact' : ''}`], + isMode('text') && styles[`iconTextMode${compact ? 'Compact' : ''}`], ]; return ( @@ -407,12 +404,11 @@ const Button = ( numberOfLines={1} testID={`${testID}-text`} style={[ - styles.label, isMode('text') ? icon || loading - ? styles.md3LabelTextAddons - : styles.md3LabelText - : styles.md3Label, + ? styles.labelTextAddons + : styles.labelText + : styles.label, compact && styles.compactLabel, uppercase && styles.uppercaseLabel, textStyle, @@ -441,67 +437,59 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, - icon: { - marginLeft: 12, - marginRight: -4, - }, - iconReverse: { - marginRight: 12, - marginLeft: -4, - }, /* eslint-disable react-native/no-unused-styles */ - md3Icon: { + icon: { marginLeft: 16, marginRight: -16, }, - md3IconCompact: { + iconCompact: { marginLeft: 8, marginRight: 0, }, - md3IconReverse: { + iconReverse: { marginLeft: -16, marginRight: 16, }, - md3IconReverseCompact: { + iconReverseCompact: { marginLeft: 0, marginRight: 8, }, - md3IconTextMode: { + iconTextMode: { marginLeft: 12, marginRight: -8, }, - md3IconTextModeCompact: { + iconTextModeCompact: { marginLeft: 6, marginRight: 0, }, - md3IconReverseTextMode: { + iconReverseTextMode: { marginLeft: -8, marginRight: 12, }, - md3IconReverseTextModeCompact: { + iconReverseTextModeCompact: { marginLeft: 0, marginRight: 6, }, /* eslint-enable react-native/no-unused-styles */ - label: { - textAlign: 'center', - marginVertical: 9, - marginHorizontal: 16, - }, compactLabel: { marginHorizontal: 8, }, uppercaseLabel: { textTransform: 'uppercase', }, - md3Label: { + label: { + textAlign: 'center', marginVertical: 10, marginHorizontal: 24, }, - md3LabelText: { + labelText: { + textAlign: 'center', + marginVertical: 10, marginHorizontal: 12, }, - md3LabelTextAddons: { + labelTextAddons: { + textAlign: 'center', + marginVertical: 10, marginHorizontal: 16, }, }); diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx index f24809c405..b37f903499 100644 --- a/src/components/Card/CardTitle.tsx +++ b/src/components/Card/CardTitle.tsx @@ -8,7 +8,7 @@ import { } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import type { MD3TypescaleKey, ThemeProp } from '../../types'; +import type { TypescaleKey, ThemeProp } from '../../types'; import Text from '../Typography/Text'; export type Props = React.ComponentPropsWithRef & { @@ -40,7 +40,7 @@ export type Props = React.ComponentPropsWithRef & { * * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ - titleVariant?: keyof typeof MD3TypescaleKey; + titleVariant?: keyof typeof TypescaleKey; /** * Text for the subtitle. Note that this will only accept a string or ``-based node. */ @@ -69,7 +69,7 @@ export type Props = React.ComponentPropsWithRef & { * * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ - subtitleVariant?: keyof typeof MD3TypescaleKey; + subtitleVariant?: keyof typeof TypescaleKey; /** * Callback which returns a React element to display on the left side. */ diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index 2267f6af5a..4ad9eafa53 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -14,7 +14,7 @@ import CheckboxAndroid from './CheckboxAndroid'; import CheckboxIOS from './CheckboxIOS'; import { useInternalTheme } from '../../core/theming'; import { tokens } from '../../styles/themes/tokens'; -import type { ThemeProp, MD3TypescaleKey } from '../../types'; +import type { ThemeProp, TypescaleKey } from '../../types'; import TouchableRipple, { Props as TouchableRippleProps, } from '../TouchableRipple/TouchableRipple'; @@ -86,7 +86,7 @@ export type Props = { * * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ - labelVariant?: keyof typeof MD3TypescaleKey; + labelVariant?: keyof typeof TypescaleKey; /** * @optional */ diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 5243482749..8b9accadb6 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -292,7 +292,6 @@ const Chip = ({ {avatar && !icon ? ( - + {React.isValidElement(avatar) ? React.cloneElement(avatar, { style: [styles.avatar, avatar.props.style], @@ -350,12 +338,11 @@ const Chip = ({ @@ -408,7 +390,7 @@ const Chip = ({ accessibilityRole="button" accessibilityLabel={closeIconAccessibilityLabel} > - + {closeIcon ? ( ) : ( @@ -429,38 +411,28 @@ const Chip = ({ const styles = StyleSheet.create({ container: { - borderWidth: StyleSheet.hairlineWidth, + borderWidth: 1, borderStyle: 'solid', flexDirection: Platform.select({ default: 'column', web: 'row' }), }, - md3Container: { - borderWidth: 1, - }, content: { flexDirection: 'row', alignItems: 'center', - paddingLeft: 4, - position: 'relative', - }, - md3Content: { paddingLeft: 0, + position: 'relative', }, icon: { - padding: 4, - alignSelf: 'center', - }, - md3Icon: { + paddingTop: 4, + paddingBottom: 4, paddingLeft: 8, paddingRight: 0, + alignSelf: 'center', }, closeIcon: { - marginRight: 4, - }, - md3CloseIcon: { marginRight: 8, padding: 0, }, - md3LabelText: { + labelText: { textAlignVertical: 'center', marginVertical: 6, }, @@ -470,13 +442,10 @@ const styles = StyleSheet.create({ borderRadius: 12, }, avatarWrapper: { - marginRight: 4, - }, - md3AvatarWrapper: { marginLeft: 4, marginRight: 0, }, - md3SelectedIcon: { + selectedIcon: { paddingLeft: 4, }, // eslint-disable-next-line react-native/no-color-literals diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx index 582a4d506c..3988f4e900 100644 --- a/src/components/Drawer/DrawerSection.tsx +++ b/src/components/Drawer/DrawerSection.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import { MD3Colors } from '../../styles/themes/tokens'; +import { Colors } from '../../styles/themes/tokens'; import type { ThemeProp } from '../../types'; import Divider from '../Divider'; import Text from '../Typography/Text'; @@ -117,7 +117,7 @@ const styles = StyleSheet.create({ }, divider: { marginTop: 4, - backgroundColor: MD3Colors.neutralVariant50, + backgroundColor: Colors.neutralVariant50, }, }); diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index aae9a2916b..f1f2baabe4 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -353,7 +353,7 @@ const AnimatedFAB = ({ ...font, }; - const md3Elevation = !isIOS ? 0 : 3; + const elevation = !isIOS ? 0 : 3; const baseStyle = [StyleSheet.absoluteFill, styles.shadow]; @@ -374,7 +374,7 @@ const AnimatedFAB = ({ styles.container, restStyle, ]} - elevation={md3Elevation} + elevation={elevation} theme={theme} container > diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index 0a52363acd..4098d79afc 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -250,7 +250,7 @@ const FAB = forwardRef( ...font, }; - const md3Elevation = isFlatMode ? 0 : 3; + const elevation = isFlatMode ? 0 : 3; return ( ( ]} pointerEvents={visible ? 'auto' : 'none'} testID={`${testID}-container`} - elevation={md3Elevation} + elevation={elevation} container > ( * * ); diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 5a39b5439b..112001d5bd 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -245,7 +245,7 @@ const ListAccordion = ({ {left @@ -268,7 +268,7 @@ const ListAccordion = ({ style: getLeftStyles(alignToTop, description), }) : null} - + ( * <> - * - * - * + * + * + * * * ); * @@ -51,14 +51,14 @@ const ListIcon = ({ const theme = useInternalTheme(themeOverrides); return ( - + ); }; const styles = StyleSheet.create({ - itemV3: { + item: { alignItems: 'center', justifyContent: 'center', }, diff --git a/src/components/List/ListImage.tsx b/src/components/List/ListImage.tsx index 71957838d0..141d45b689 100644 --- a/src/components/List/ListImage.tsx +++ b/src/components/List/ListImage.tsx @@ -25,7 +25,7 @@ export type Props = { * ## Usage * ```js * import * as React from 'react'; - * import { List, MD3Colors } from 'react-native-paper'; + * import { List, Colors } from 'react-native-paper'; * * const MyComponent = () => ( * <> @@ -40,7 +40,7 @@ export type Props = { const ListImage = ({ style, source, variant = 'image' }: Props) => { const getStyles = () => { if (variant === 'video') { - return [style, styles.videoV3]; + return [style, styles.video]; } return [style, styles.image]; @@ -61,7 +61,7 @@ const styles = StyleSheet.create({ width: 56, height: 56, }, - videoV3: { + video: { width: 114, height: 64, marginLeft: 0, diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 46e94e9ebe..61531ed464 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -229,12 +229,12 @@ const ListItem = ( - + {left ? left({ color: descriptionColor, @@ -242,7 +242,7 @@ const ListItem = ( }) : null} {renderTitle()} @@ -266,11 +266,11 @@ ListItem.displayName = 'List.Item'; const Component = forwardRef(ListItem); const styles = StyleSheet.create({ - containerV3: { + container: { paddingVertical: 8, paddingRight: 24, }, - rowV3: { + row: { width: '100%', flexDirection: 'row', marginVertical: 6, @@ -281,13 +281,11 @@ const styles = StyleSheet.create({ description: { fontSize: 14, }, - itemV3: { - paddingLeft: 16, - }, content: { flexShrink: 1, flexGrow: 1, justifyContent: 'center', + paddingLeft: 16, }, }); diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 7f317ea423..085bdf1ad9 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -23,7 +23,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import MenuItem from './MenuItem'; import { useInternalTheme } from '../../core/theming'; -import type { MD3Elevation, ThemeProp } from '../../types'; +import type { Elevation, ThemeProp } from '../../types'; import { ElevationLevels } from '../../types'; import { addEventListener } from '../../utils/addEventListener'; import { BackHandler } from '../../utils/BackHandler/BackHandler'; @@ -72,7 +72,7 @@ export type Props = { * Elevation level of the menu's content. Shadow styles are calculated based on this value. Default `backgroundColor` is taken from the corresponding `theme.colors.elevation` property. By default equals `2`. * @supported Available in v5.x with theme version 3 */ - elevation?: MD3Elevation; + elevation?: Elevation; /** * Mode of the menu's content. * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value. @@ -104,7 +104,7 @@ const EASING = Easing.bezier(0.4, 0, 0.2, 1); const WINDOW_LAYOUT = Dimensions.get('window'); -const DEFAULT_ELEVATION: MD3Elevation = 2; +const DEFAULT_ELEVATION: Elevation = 2; export const ELEVATION_LEVELS_MAP = Object.values( ElevationLevels ) as ElevationLevels[]; diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index cbec2aaab7..005984c641 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -174,7 +174,7 @@ const MenuItem = ({ style={[ styles.container, { paddingHorizontal: containerPadding }, - dense && styles.md3DenseContainer, + dense && styles.denseContainer, style, ]} onPress={onPress} @@ -196,7 +196,7 @@ const MenuItem = ({ style={[ styles.content, { minWidth, maxWidth }, - leadingIcon ? styles.md3LeadingIcon : styles.md3WithoutLeadingIcon, + leadingIcon ? styles.leadingIcon : styles.withoutLeadingIcon, contentStyle, ]} pointerEvents="none" @@ -231,7 +231,7 @@ const styles = StyleSheet.create({ height: 48, justifyContent: 'center', }, - md3DenseContainer: { + denseContainer: { height: 32, }, row: { @@ -240,10 +240,10 @@ const styles = StyleSheet.create({ content: { justifyContent: 'center', }, - md3LeadingIcon: { + leadingIcon: { marginLeft: 12, }, - md3WithoutLeadingIcon: { + withoutLeadingIcon: { marginLeft: 4, }, }); diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index c307df2479..1d7eaee724 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -61,10 +61,10 @@ const { isRTL } = I18nManager; * ## Usage * ```js * import * as React from 'react'; - * import { ProgressBar, MD3Colors } from 'react-native-paper'; + * import { ProgressBar, Colors } from 'react-native-paper'; * * const MyComponent = () => ( - * + * * ); * * export default MyComponent; diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx index e167cccd55..fc67da6131 100644 --- a/src/components/RadioButton/RadioButtonItem.tsx +++ b/src/components/RadioButton/RadioButtonItem.tsx @@ -16,7 +16,7 @@ import RadioButtonIOS from './RadioButtonIOS'; import { handlePress, isChecked } from './utils'; import { useInternalTheme } from '../../core/theming'; import { tokens } from '../../styles/themes/tokens'; -import type { ThemeProp, MD3TypescaleKey } from '../../types'; +import type { ThemeProp, TypescaleKey } from '../../types'; import TouchableRipple, { Props as TouchableRippleProps, } from '../TouchableRipple/TouchableRipple'; @@ -88,7 +88,7 @@ export type Props = { * * Body: `bodyLarge`, `bodyMedium`, `bodySmall` */ - labelVariant?: keyof typeof MD3TypescaleKey; + labelVariant?: keyof typeof TypescaleKey; /** * Specifies the largest possible scale a label font can reach. */ diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx index cc83b97fb3..26947f17bf 100644 --- a/src/components/Surface.tsx +++ b/src/components/Surface.tsx @@ -12,11 +12,11 @@ import { import { useInternalTheme } from '../core/theming'; import { isAnimatedValue } from '../styles/overlay'; import shadow from '../styles/shadow'; -import type { ThemeProp, MD3Elevation } from '../types'; +import type { ThemeProp, Elevation as ElevationProp } from '../types'; import { forwardRef } from '../utils/forwardRef'; import { splitStyles } from '../utils/splitStyles'; -type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value; +type Elevation = ElevationProp | Animated.Value; export type Props = Omit, 'style'> & { /** @@ -262,7 +262,7 @@ const Surface = forwardRef( return elevation.interpolate({ inputRange, outputRange: inputRange.map((elevation) => { - return colors.elevation?.[`level${elevation as MD3Elevation}`]; + return colors.elevation?.[`level${elevation as ElevationProp}`]; }), }); } diff --git a/src/components/TextInput/Addons/Underline.tsx b/src/components/TextInput/Addons/Underline.tsx index c157df78ab..f484b231ac 100644 --- a/src/components/TextInput/Addons/Underline.tsx +++ b/src/components/TextInput/Addons/Underline.tsx @@ -37,7 +37,6 @@ export const Underline = ({ testID="text-input-underline" style={[ styles.underline, - styles.md3Underline, { backgroundColor, opacity: disabledOpacity, @@ -60,10 +59,7 @@ const styles = StyleSheet.create({ left: 0, right: 0, bottom: 0, - height: 2, - zIndex: 1, - }, - md3Underline: { height: 1, + zIndex: 1, }, }); diff --git a/src/components/Typography/types.tsx b/src/components/Typography/types.tsx index 61a6dc7c1e..3f1754521a 100644 --- a/src/components/Typography/types.tsx +++ b/src/components/Typography/types.tsx @@ -1,5 +1,5 @@ -import type { MD3TypescaleKey } from '../../types'; +import type { TypescaleKey } from '../../types'; export type VariantProp = | (T extends string ? (string extends T ? never : T) : never) - | keyof typeof MD3TypescaleKey; + | keyof typeof TypescaleKey; diff --git a/src/components/__tests__/AnimatedFAB.test.tsx b/src/components/__tests__/AnimatedFAB.test.tsx index f73745ad29..a848c2a1c8 100644 --- a/src/components/__tests__/AnimatedFAB.test.tsx +++ b/src/components/__tests__/AnimatedFAB.test.tsx @@ -6,12 +6,12 @@ import { Animated, StyleSheet } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; import { act } from 'react-test-renderer'; -import { MD3Colors } from '../../styles/themes/tokens'; +import { Colors } from '../../styles/themes/tokens'; import AnimatedFAB from '../FAB/AnimatedFAB'; const styles = StyleSheet.create({ background: { - backgroundColor: MD3Colors.tertiary50, + backgroundColor: Colors.tertiary50, }, }); diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx index dd9d7bb8fa..dd6a0fa606 100644 --- a/src/components/__tests__/Card/Card.test.tsx +++ b/src/components/__tests__/Card/Card.test.tsx @@ -4,7 +4,7 @@ import { Animated, StyleSheet, Text } from 'react-native'; import { act, render } from '@testing-library/react-native'; import { getTheme } from '../../../core/theming'; -import { MD3Colors } from '../../../styles/themes/tokens'; +import { Colors } from '../../../styles/themes/tokens'; import Button from '../../Button/Button'; import Card from '../../Card/Card'; import { getCardColors, getCardCoverStyle } from '../../Card/utils'; @@ -53,14 +53,14 @@ describe('Card', () => { {null} ); expect(getByLabelText('card')).toHaveStyle({ - borderColor: MD3Colors.error50, + borderColor: Colors.error50, }); }); diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx index 8e0f7744fb..64070a04d4 100644 --- a/src/components/__tests__/Menu.test.tsx +++ b/src/components/__tests__/Menu.test.tsx @@ -4,7 +4,7 @@ import { Animated, Dimensions, StyleSheet, View } from 'react-native'; import { act, render, screen, waitFor } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; -import { MD3Elevation } from '../../types'; +import { Elevation } from '../../types'; import Button from '../Button/Button'; import Menu, { ELEVATION_LEVELS_MAP } from '../Menu/Menu'; import Portal from '../Portal/Portal'; @@ -68,7 +68,7 @@ it('renders menu with content styles', () => { expect(tree).toMatchSnapshot(); }); -([0, 1, 2, 3, 4, 5] as MD3Elevation[]).forEach((elevation) => +([0, 1, 2, 3, 4, 5] as Elevation[]).forEach((elevation) => it(`renders menu with background color based on elevation value = ${elevation}`, () => { const theme = getTheme(false); diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx index dc9f1e4d87..d7c9755099 100644 --- a/src/components/__tests__/Modal.test.tsx +++ b/src/components/__tests__/Modal.test.tsx @@ -8,7 +8,7 @@ import { import { act, fireEvent, render } from '@testing-library/react-native'; -import { MD3LightTheme } from '../../styles/themes'; +import { LightTheme } from '../../styles/themes'; import Modal from '../Modal'; jest.mock('react-native-safe-area-context', () => ({ @@ -55,7 +55,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - backgroundColor: MD3LightTheme.colors.scrim, + backgroundColor: LightTheme.colors.scrim, }); }); diff --git a/src/components/__tests__/Typography/Text.test.tsx b/src/components/__tests__/Typography/Text.test.tsx index c793988479..3549b6bf0e 100644 --- a/src/components/__tests__/Typography/Text.test.tsx +++ b/src/components/__tests__/Typography/Text.test.tsx @@ -4,7 +4,7 @@ import { render } from '@testing-library/react-native'; import PaperProvider from '../../../core/PaperProvider'; import configureFonts from '../../../styles/fonts'; -import { MD3LightTheme } from '../../../styles/themes'; +import { LightTheme } from '../../../styles/themes'; import { tokens } from '../../../styles/themes/tokens'; import Text, { customText } from '../../Typography/Text'; @@ -64,7 +64,7 @@ it('renders Text component with custom variant correctly', () => { } as const; const theme = { - ...MD3LightTheme, + ...LightTheme, fonts: configureFonts({ config: fontConfig }), }; const Text = customText<'customVariant'>(); @@ -86,9 +86,7 @@ it("nested text with variant should override parent's variant", () => { ); - expect(getByTestId('parent-text')).toHaveStyle( - MD3LightTheme.fonts.displayLarge - ); + expect(getByTestId('parent-text')).toHaveStyle(LightTheme.fonts.displayLarge); }); it("nested non-text component should not override parent's variant", () => { @@ -100,9 +98,7 @@ it("nested non-text component should not override parent's variant", () => { ); - expect(getByTestId('parent-text')).toHaveStyle( - MD3LightTheme.fonts.displayLarge - ); + expect(getByTestId('parent-text')).toHaveStyle(LightTheme.fonts.displayLarge); }); it("nested text without variant, but with styles, should override parent's styles", () => { diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index 2f839c275b..ce7f76aff1 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -232,13 +232,10 @@ exports[`render visible banner, with custom theme 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, { "marginHorizontal": 8, @@ -657,13 +654,10 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, { "marginHorizontal": 8, @@ -929,13 +923,10 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, { "marginHorizontal": 8, @@ -1081,13 +1072,10 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, { "marginHorizontal": 8, diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap index 6c34864a74..c3aa032304 100644 --- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -120,13 +120,10 @@ exports[`renders button with an accessibility hint 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, undefined, false, @@ -273,13 +270,10 @@ exports[`renders button with an accessibility label 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, undefined, false, @@ -425,13 +419,10 @@ exports[`renders button with button color 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, undefined, false, @@ -577,13 +568,10 @@ exports[`renders button with color 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, undefined, false, @@ -729,13 +717,10 @@ exports[`renders button with custom testID 1`] = ` "lineHeight": 20, }, [ - { - "marginHorizontal": 16, - "marginVertical": 9, - "textAlign": "center", - }, { "marginHorizontal": 12, + "marginVertical": 10, + "textAlign": "center", }, undefined, false, @@ -863,10 +848,6 @@ exports[`renders button with icon 1`] = ` { ); }; -const ExtendedLightTheme = { ...MD3LightTheme } as ThemeProp; -const ExtendedDarkTheme = { ...MD3DarkTheme } as ThemeProp; +const ExtendedLightTheme = { ...LightTheme } as ThemeProp; +const ExtendedDarkTheme = { ...DarkTheme } as ThemeProp; describe('PaperProvider', () => { beforeEach(() => { @@ -125,13 +125,13 @@ describe('PaperProvider', () => { it('handles overriding animation with the custom one', () => { const { getByTestId } = render( createProvider({ - ...MD3LightTheme, + ...LightTheme, animation: { defaultAnimationDuration: 250 }, }) ); expect(getByTestId('provider-child-view').props.theme).toStrictEqual({ - ...MD3LightTheme, + ...LightTheme, animation: { scale: 1, defaultAnimationDuration: 250 }, }); }); diff --git a/src/core/__tests__/theming.test.tsx b/src/core/__tests__/theming.test.tsx index 7b069cd482..7b2ab98c3d 100644 --- a/src/core/__tests__/theming.test.tsx +++ b/src/core/__tests__/theming.test.tsx @@ -1,4 +1,4 @@ -import { MD3DarkTheme, MD3LightTheme } from '../../styles/themes'; +import { DarkTheme, LightTheme } from '../../styles/themes'; import { adaptNavigationTheme } from '../theming'; const NavigationLightTheme = { @@ -40,17 +40,17 @@ const NavigationCustomLightTheme = { }; const AppCustomLightTheme = { - ...MD3LightTheme, + ...LightTheme, colors: { - ...MD3LightTheme.colors, + ...LightTheme.colors, primary: 'purple', }, }; const AppCustomDarkTheme = { - ...MD3DarkTheme, + ...DarkTheme, colors: { - ...MD3DarkTheme.colors, + ...DarkTheme.colors, primary: 'orchid', }, }; @@ -89,88 +89,82 @@ describe('adaptNavigationTheme', () => { ...NavigationLightTheme, colors: { ...NavigationLightTheme.colors, - primary: MD3LightTheme.colors.primary, - background: MD3LightTheme.colors.background, - card: MD3LightTheme.colors.elevation.level2, - text: MD3LightTheme.colors.onSurface, - border: MD3LightTheme.colors.outline, - notification: MD3LightTheme.colors.error, + primary: LightTheme.colors.primary, + background: LightTheme.colors.background, + card: LightTheme.colors.elevation.level2, + text: LightTheme.colors.onSurface, + border: LightTheme.colors.outline, + notification: LightTheme.colors.error, }, }, DarkTheme: { ...NavigationDarkTheme, colors: { ...NavigationDarkTheme.colors, - primary: MD3DarkTheme.colors.primary, - background: MD3DarkTheme.colors.background, - card: MD3DarkTheme.colors.elevation.level2, - text: MD3DarkTheme.colors.onSurface, - border: MD3DarkTheme.colors.outline, - notification: MD3DarkTheme.colors.error, + primary: DarkTheme.colors.primary, + background: DarkTheme.colors.background, + card: DarkTheme.colors.elevation.level2, + text: DarkTheme.colors.onSurface, + border: DarkTheme.colors.outline, + notification: DarkTheme.colors.error, }, }, }); }); it('should return adapted navigation light theme', () => { - const { LightTheme } = adaptNavigationTheme({ + const { LightTheme: adaptedLight } = adaptNavigationTheme({ reactNavigationLight: NavigationLightTheme, }); - const { colors } = MD3LightTheme; - - expect(LightTheme).toMatchObject({ + expect(adaptedLight).toMatchObject({ ...NavigationLightTheme, colors: { ...NavigationLightTheme.colors, - primary: colors.primary, - background: colors.background, - card: colors.elevation.level2, - text: colors.onSurface, - border: colors.outline, - notification: colors.error, + primary: LightTheme.colors.primary, + background: LightTheme.colors.background, + card: LightTheme.colors.elevation.level2, + text: LightTheme.colors.onSurface, + border: LightTheme.colors.outline, + notification: LightTheme.colors.error, }, }); }); it('should return adapted navigation dark theme', () => { - const { DarkTheme } = adaptNavigationTheme({ + const { DarkTheme: adaptedDark } = adaptNavigationTheme({ reactNavigationDark: NavigationDarkTheme, }); - const { colors } = MD3DarkTheme; - - expect(DarkTheme).toMatchObject({ + expect(adaptedDark).toMatchObject({ ...NavigationDarkTheme, colors: { ...NavigationDarkTheme.colors, - primary: colors.primary, - background: colors.background, - card: colors.elevation.level2, - text: colors.onSurface, - border: colors.outline, - notification: colors.error, + primary: DarkTheme.colors.primary, + background: DarkTheme.colors.background, + card: DarkTheme.colors.elevation.level2, + text: DarkTheme.colors.onSurface, + border: DarkTheme.colors.outline, + notification: DarkTheme.colors.error, }, }); }); it('should return adapted custom navigation theme', () => { - const { LightTheme } = adaptNavigationTheme({ + const { LightTheme: adaptedLight } = adaptNavigationTheme({ reactNavigationLight: NavigationCustomLightTheme, }); - const { colors } = MD3LightTheme; - - expect(LightTheme).toMatchObject({ + expect(adaptedLight).toMatchObject({ ...NavigationCustomLightTheme, colors: { ...NavigationCustomLightTheme.colors, - primary: colors.primary, - background: colors.background, - card: colors.elevation.level2, - text: colors.onSurface, - border: colors.outline, - notification: colors.error, + primary: LightTheme.colors.primary, + background: LightTheme.colors.background, + card: LightTheme.colors.elevation.level2, + text: LightTheme.colors.onSurface, + border: LightTheme.colors.outline, + notification: LightTheme.colors.error, secondary: 'rgb(150,45,85)', tertiary: 'rgb(105,45,85)', }, @@ -222,41 +216,41 @@ describe('adaptNavigationTheme', () => { }); it('should adapt navigation theme with fonts', () => { - const { LightTheme } = adaptNavigationTheme({ + const { LightTheme: adaptedLight } = adaptNavigationTheme({ reactNavigationLight: NavigationThemeWithFonts, }); - expect(LightTheme).toMatchObject({ + expect(adaptedLight).toMatchObject({ ...NavigationThemeWithFonts, colors: { ...NavigationThemeWithFonts.colors, - primary: MD3LightTheme.colors.primary, - background: MD3LightTheme.colors.background, - card: MD3LightTheme.colors.elevation.level2, - text: MD3LightTheme.colors.onSurface, - border: MD3LightTheme.colors.outline, - notification: MD3LightTheme.colors.error, + primary: LightTheme.colors.primary, + background: LightTheme.colors.background, + card: LightTheme.colors.elevation.level2, + text: LightTheme.colors.onSurface, + border: LightTheme.colors.outline, + notification: LightTheme.colors.error, }, fonts: { regular: { - fontFamily: MD3LightTheme.fonts.bodyMedium.fontFamily, - fontWeight: MD3LightTheme.fonts.bodyMedium.fontWeight, - letterSpacing: MD3LightTheme.fonts.bodyMedium.letterSpacing, + fontFamily: LightTheme.fonts.bodyMedium.fontFamily, + fontWeight: LightTheme.fonts.bodyMedium.fontWeight, + letterSpacing: LightTheme.fonts.bodyMedium.letterSpacing, }, medium: { - fontFamily: MD3LightTheme.fonts.titleMedium.fontFamily, - fontWeight: MD3LightTheme.fonts.titleMedium.fontWeight, - letterSpacing: MD3LightTheme.fonts.titleMedium.letterSpacing, + fontFamily: LightTheme.fonts.titleMedium.fontFamily, + fontWeight: LightTheme.fonts.titleMedium.fontWeight, + letterSpacing: LightTheme.fonts.titleMedium.letterSpacing, }, bold: { - fontFamily: MD3LightTheme.fonts.headlineSmall.fontFamily, - fontWeight: MD3LightTheme.fonts.headlineSmall.fontWeight, - letterSpacing: MD3LightTheme.fonts.headlineSmall.letterSpacing, + fontFamily: LightTheme.fonts.headlineSmall.fontFamily, + fontWeight: LightTheme.fonts.headlineSmall.fontWeight, + letterSpacing: LightTheme.fonts.headlineSmall.letterSpacing, }, heavy: { - fontFamily: MD3LightTheme.fonts.headlineLarge.fontFamily, - fontWeight: MD3LightTheme.fonts.headlineLarge.fontWeight, - letterSpacing: MD3LightTheme.fonts.headlineLarge.letterSpacing, + fontFamily: LightTheme.fonts.headlineLarge.fontFamily, + fontWeight: LightTheme.fonts.headlineLarge.fontWeight, + letterSpacing: LightTheme.fonts.headlineLarge.letterSpacing, }, }, }); diff --git a/src/core/theming.tsx b/src/core/theming.tsx index 57ea01892e..1312feab92 100644 --- a/src/core/theming.tsx +++ b/src/core/theming.tsx @@ -2,18 +2,18 @@ import type { ComponentType } from 'react'; import { $DeepPartial, createTheming } from '@callstack/react-theme-provider'; -import { MD3DarkTheme, MD3LightTheme } from '../styles/themes'; -import type { InternalTheme, MD3Theme, NavigationTheme } from '../types'; +import { DarkTheme, LightTheme } from '../styles/themes'; +import type { InternalTheme, Theme, NavigationTheme } from '../types'; -export const DefaultTheme = MD3LightTheme; +export const DefaultTheme = LightTheme; export const { ThemeProvider, withTheme, useTheme: useAppTheme, -} = createTheming(MD3LightTheme); +} = createTheming(LightTheme); -export function useTheme(overrides?: $DeepPartial) { +export function useTheme(overrides?: $DeepPartial) { return useAppTheme(overrides); } @@ -25,21 +25,21 @@ export const withInternalTheme = ( WrappedComponent: ComponentType & C ) => withTheme(WrappedComponent); -export const getTheme = (isDark: boolean = false): MD3Theme => { - return isDark ? MD3DarkTheme : MD3LightTheme; +export const getTheme = (isDark: boolean = false): Theme => { + return isDark ? DarkTheme : LightTheme; }; // eslint-disable-next-line no-redeclare export function adaptNavigationTheme(themes: { reactNavigationLight: T; - materialLight?: MD3Theme; + materialLight?: Theme; }): { LightTheme: NavigationTheme; }; // eslint-disable-next-line no-redeclare export function adaptNavigationTheme(themes: { reactNavigationDark: T; - materialDark?: MD3Theme; + materialDark?: Theme; }): { DarkTheme: NavigationTheme; }; @@ -50,8 +50,8 @@ export function adaptNavigationTheme< >(themes: { reactNavigationLight: TLight; reactNavigationDark: TDark; - materialLight?: MD3Theme; - materialDark?: MD3Theme; + materialLight?: Theme; + materialDark?: Theme; }): { LightTheme: TLight; DarkTheme: TDark }; // eslint-disable-next-line no-redeclare export function adaptNavigationTheme(themes: any) { @@ -62,19 +62,19 @@ export function adaptNavigationTheme(themes: any) { materialDark, } = themes; - const MD3Themes = { - light: materialLight || MD3LightTheme, - dark: materialDark || MD3DarkTheme, + const Themes = { + light: materialLight || LightTheme, + dark: materialDark || DarkTheme, }; const result: { LightTheme?: any; DarkTheme?: any } = {}; if (reactNavigationLight) { - result.LightTheme = getAdaptedTheme(reactNavigationLight, MD3Themes.light); + result.LightTheme = getAdaptedTheme(reactNavigationLight, Themes.light); } if (reactNavigationDark) { - result.DarkTheme = getAdaptedTheme(reactNavigationDark, MD3Themes.dark); + result.DarkTheme = getAdaptedTheme(reactNavigationDark, Themes.dark); } return result; @@ -82,7 +82,7 @@ export function adaptNavigationTheme(themes: any) { const getAdaptedTheme = ( theme: T, - materialTheme: MD3Theme + materialTheme: Theme ): T => { const base = { ...theme, diff --git a/src/index.tsx b/src/index.tsx index 5dc393f0f0..4b74cff512 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,4 @@ -export { MD3Colors } from './styles/themes/tokens'; +export { Colors } from './styles/themes/tokens'; export { useTheme, @@ -146,9 +146,4 @@ export type { MaterialBottomTabScreenProps, } from './react-navigation'; -export type { - MD3Theme, - ThemeBase, - MD3Elevation, - MD3TypescaleKey, -} from './types'; +export type { Theme, ThemeBase, Elevation, TypescaleKey } from './types'; diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx index 18b6a542e3..fb69dd32ba 100644 --- a/src/styles/fonts.tsx +++ b/src/styles/fonts.tsx @@ -1,4 +1,4 @@ -import type { MD3Type, MD3Typescale, MD3TypescaleKey } from '../types'; +import type { TypeConfig, Typescale, TypescaleKey } from '../types'; import { typescale } from './themes/tokens'; export const fontConfig = { @@ -60,16 +60,16 @@ export const fontConfig = { // eslint-disable-next-line no-redeclare export default function configureFonts(params?: { - config?: Partial; -}): MD3Typescale; + config?: Partial; +}): Typescale; // eslint-disable-next-line no-redeclare export default function configureFonts(params?: { - config?: Partial>>; -}): MD3Typescale; + config?: Partial>>; +}): Typescale; // eslint-disable-next-line no-redeclare export default function configureFonts(params: { - config: Record; -}): MD3Typescale & { [key: string]: MD3Type }; + config: Record; +}): Typescale & { [key: string]: TypeConfig }; // eslint-disable-next-line no-redeclare export default function configureFonts(params?: any) { const { config } = params || {}; @@ -88,7 +88,7 @@ export default function configureFonts(params?: any) { variantName, { ...variantProperties, ...config }, ]) - ) as MD3Typescale; + ) as Typescale; } return Object.assign( @@ -96,7 +96,7 @@ export default function configureFonts(params?: any) { typescale, ...Object.entries(config).map(([variantName, variantProperties]) => ({ [variantName]: { - ...(typescale[variantName as MD3TypescaleKey] as object), + ...(typescale[variantName as TypescaleKey] as object), ...(variantProperties as object), }, })) diff --git a/src/styles/shadow.tsx b/src/styles/shadow.tsx index faf6ed2761..5476ccdb76 100644 --- a/src/styles/shadow.tsx +++ b/src/styles/shadow.tsx @@ -1,9 +1,9 @@ import { Animated } from 'react-native'; -import { MD3Colors } from './themes/tokens'; +import { Colors } from './themes/tokens'; -const MD3_SHADOW_OPACITY = 0.3; -const MD3_SHADOW_COLOR = MD3Colors.primary0; +const SHADOW_OPACITY = 0.3; +const SHADOW_COLOR = Colors.primary0; export default function shadow(elevation: number | Animated.Value = 0) { const inputRange = [0, 1, 2, 3, 4, 5]; @@ -12,7 +12,7 @@ export default function shadow(elevation: number | Animated.Value = 0) { if (elevation instanceof Animated.Value) { return { - shadowColor: MD3_SHADOW_COLOR, + shadowColor: SHADOW_COLOR, shadowOffset: { width: new Animated.Value(0), height: elevation.interpolate({ @@ -22,7 +22,7 @@ export default function shadow(elevation: number | Animated.Value = 0) { }, shadowOpacity: elevation.interpolate({ inputRange: [0, 1], - outputRange: [0, MD3_SHADOW_OPACITY], + outputRange: [0, SHADOW_OPACITY], extrapolate: 'clamp', }), shadowRadius: elevation.interpolate({ @@ -32,8 +32,8 @@ export default function shadow(elevation: number | Animated.Value = 0) { }; } else { return { - shadowColor: MD3_SHADOW_COLOR, - shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0, + shadowColor: SHADOW_COLOR, + shadowOpacity: elevation ? SHADOW_OPACITY : 0, shadowOffset: { width: 0, height: shadowHeight[elevation], diff --git a/src/styles/themes/DarkTheme.tsx b/src/styles/themes/DarkTheme.tsx index 0ec175b019..41955aa9eb 100644 --- a/src/styles/themes/DarkTheme.tsx +++ b/src/styles/themes/DarkTheme.tsx @@ -1,13 +1,13 @@ import color from 'color'; -import { MD3LightTheme } from './LightTheme'; +import { LightTheme } from './LightTheme'; import { tokens } from './tokens'; -import type { MD3Theme } from '../../types'; +import type { Theme } from '../../types'; const { palette, stateOpacity } = tokens.md.ref; -export const MD3DarkTheme: MD3Theme = { - ...MD3LightTheme, +export const DarkTheme: Theme = { + ...LightTheme, dark: true, colors: { primary: palette.primary80, diff --git a/src/styles/themes/DynamicTheme.android.tsx b/src/styles/themes/DynamicTheme.android.tsx index 3f365520dd..f2791670e8 100644 --- a/src/styles/themes/DynamicTheme.android.tsx +++ b/src/styles/themes/DynamicTheme.android.tsx @@ -1,8 +1,8 @@ import { Platform, PlatformColor } from 'react-native'; -import { MD3DarkTheme } from './DarkTheme'; -import { MD3LightTheme } from './LightTheme'; -import type { MD3Theme } from '../../types'; +import { DarkTheme } from './DarkTheme'; +import { LightTheme } from './LightTheme'; +import type { Theme } from '../../types'; const isApi34 = (Platform.Version as number) >= 34; const isApi31 = (Platform.Version as number) >= 31; @@ -29,232 +29,232 @@ const lightColors = { primary: pick( 'system_primary_light', 'system_accent1_600', - MD3LightTheme.colors.primary + LightTheme.colors.primary ), onPrimary: pick( 'system_on_primary_light', 'system_accent1_0', - MD3LightTheme.colors.onPrimary + LightTheme.colors.onPrimary ), primaryContainer: pick( 'system_primary_container_light', 'system_accent1_100', - MD3LightTheme.colors.primaryContainer + LightTheme.colors.primaryContainer ), onPrimaryContainer: pick( 'system_on_primary_container_light', 'system_accent1_900', - MD3LightTheme.colors.onPrimaryContainer + LightTheme.colors.onPrimaryContainer ), inversePrimary: pick( 'system_primary_dark', 'system_accent1_200', - MD3LightTheme.colors.inversePrimary + LightTheme.colors.inversePrimary ), secondary: pick( 'system_secondary_light', 'system_accent2_600', - MD3LightTheme.colors.secondary + LightTheme.colors.secondary ), onSecondary: pick( 'system_on_secondary_light', 'system_accent2_0', - MD3LightTheme.colors.onSecondary + LightTheme.colors.onSecondary ), secondaryContainer: pick( 'system_secondary_container_light', 'system_accent2_100', - MD3LightTheme.colors.secondaryContainer + LightTheme.colors.secondaryContainer ), onSecondaryContainer: pick( 'system_on_secondary_container_light', 'system_accent2_900', - MD3LightTheme.colors.onSecondaryContainer + LightTheme.colors.onSecondaryContainer ), tertiary: pick( 'system_tertiary_light', 'system_accent3_600', - MD3LightTheme.colors.tertiary + LightTheme.colors.tertiary ), onTertiary: pick( 'system_on_tertiary_light', 'system_accent3_0', - MD3LightTheme.colors.onTertiary + LightTheme.colors.onTertiary ), tertiaryContainer: pick( 'system_tertiary_container_light', 'system_accent3_100', - MD3LightTheme.colors.tertiaryContainer + LightTheme.colors.tertiaryContainer ), onTertiaryContainer: pick( 'system_on_tertiary_container_light', 'system_accent3_900', - MD3LightTheme.colors.onTertiaryContainer + LightTheme.colors.onTertiaryContainer ), error: pick( 'system_error_light', - MD3LightTheme.colors.error, - MD3LightTheme.colors.error + LightTheme.colors.error, + LightTheme.colors.error ), onError: pick( 'system_on_error_light', - MD3LightTheme.colors.onError, - MD3LightTheme.colors.onError + LightTheme.colors.onError, + LightTheme.colors.onError ), errorContainer: pick( 'system_error_container_light', - MD3LightTheme.colors.errorContainer, - MD3LightTheme.colors.errorContainer + LightTheme.colors.errorContainer, + LightTheme.colors.errorContainer ), onErrorContainer: pick( 'system_on_error_container_light', - MD3LightTheme.colors.onErrorContainer, - MD3LightTheme.colors.onErrorContainer + LightTheme.colors.onErrorContainer, + LightTheme.colors.onErrorContainer ), onSurface: pick( 'system_on_surface_light', 'system_neutral1_900', - MD3LightTheme.colors.onSurface + LightTheme.colors.onSurface ), onBackground: pick( 'system_on_background_light', 'system_neutral1_900', - MD3LightTheme.colors.onBackground + LightTheme.colors.onBackground ), onSurfaceVariant: pick( 'system_on_surface_variant_light', 'system_neutral2_700', - MD3LightTheme.colors.onSurfaceVariant + LightTheme.colors.onSurfaceVariant ), outline: pick( 'system_outline_light', 'system_neutral2_500', - MD3LightTheme.colors.outline + LightTheme.colors.outline ), outlineVariant: pick( 'system_outline_variant_light', 'system_neutral2_200', - MD3LightTheme.colors.outlineVariant + LightTheme.colors.outlineVariant ), inverseSurface: pick( 'system_surface_dark', 'system_neutral1_800', - MD3LightTheme.colors.inverseSurface + LightTheme.colors.inverseSurface ), inverseOnSurface: pick( 'system_on_surface_dark', 'system_neutral1_50', - MD3LightTheme.colors.inverseOnSurface + LightTheme.colors.inverseOnSurface ), surfaceContainerLowest: pick( 'system_surface_container_lowest_light', 'system_neutral2_0', - MD3LightTheme.colors.surfaceContainerLowest + LightTheme.colors.surfaceContainerLowest ), surfaceContainerLow: pick( 'system_surface_container_low_light', - MD3LightTheme.colors.surfaceContainerLow, - MD3LightTheme.colors.surfaceContainerLow + LightTheme.colors.surfaceContainerLow, + LightTheme.colors.surfaceContainerLow ), surfaceContainerHighest: pick( 'system_surface_container_highest_light', 'system_neutral2_100', - MD3LightTheme.colors.surfaceContainerHighest + LightTheme.colors.surfaceContainerHighest ), surface: pick( 'system_surface_light', - MD3LightTheme.colors.surface, - MD3LightTheme.colors.surface + LightTheme.colors.surface, + LightTheme.colors.surface ), surfaceDim: pick( 'system_surface_dim_light', - MD3LightTheme.colors.surfaceDim, - MD3LightTheme.colors.surfaceDim + LightTheme.colors.surfaceDim, + LightTheme.colors.surfaceDim ), surfaceBright: pick( 'system_surface_bright_light', - MD3LightTheme.colors.surfaceBright, - MD3LightTheme.colors.surfaceBright + LightTheme.colors.surfaceBright, + LightTheme.colors.surfaceBright ), surfaceContainer: pick( 'system_surface_container_light', - MD3LightTheme.colors.surfaceContainer, - MD3LightTheme.colors.surfaceContainer + LightTheme.colors.surfaceContainer, + LightTheme.colors.surfaceContainer ), surfaceContainerHigh: pick( 'system_surface_container_high_light', - MD3LightTheme.colors.surfaceContainerHigh, - MD3LightTheme.colors.surfaceContainerHigh + LightTheme.colors.surfaceContainerHigh, + LightTheme.colors.surfaceContainerHigh ), background: pick( 'system_background_light', - MD3LightTheme.colors.background, - MD3LightTheme.colors.background + LightTheme.colors.background, + LightTheme.colors.background ), surfaceVariant: pick( 'system_surface_variant_light', - MD3LightTheme.colors.surfaceVariant, - MD3LightTheme.colors.surfaceVariant + LightTheme.colors.surfaceVariant, + LightTheme.colors.surfaceVariant ), primaryFixed: pick( 'system_primary_fixed', 'system_accent1_100', - MD3LightTheme.colors.primaryFixed + LightTheme.colors.primaryFixed ), primaryFixedDim: pick( 'system_primary_fixed_dim', 'system_accent1_200', - MD3LightTheme.colors.primaryFixedDim + LightTheme.colors.primaryFixedDim ), onPrimaryFixed: pick( 'system_on_primary_fixed', 'system_accent1_900', - MD3LightTheme.colors.onPrimaryFixed + LightTheme.colors.onPrimaryFixed ), onPrimaryFixedVariant: pick( 'system_on_primary_fixed_variant', 'system_accent1_700', - MD3LightTheme.colors.onPrimaryFixedVariant + LightTheme.colors.onPrimaryFixedVariant ), secondaryFixed: pick( 'system_secondary_fixed', 'system_accent2_100', - MD3LightTheme.colors.secondaryFixed + LightTheme.colors.secondaryFixed ), secondaryFixedDim: pick( 'system_secondary_fixed_dim', 'system_accent2_200', - MD3LightTheme.colors.secondaryFixedDim + LightTheme.colors.secondaryFixedDim ), onSecondaryFixed: pick( 'system_on_secondary_fixed', 'system_accent2_900', - MD3LightTheme.colors.onSecondaryFixed + LightTheme.colors.onSecondaryFixed ), onSecondaryFixedVariant: pick( 'system_on_secondary_fixed_variant', 'system_accent2_700', - MD3LightTheme.colors.onSecondaryFixedVariant + LightTheme.colors.onSecondaryFixedVariant ), tertiaryFixed: pick( 'system_tertiary_fixed', 'system_accent3_100', - MD3LightTheme.colors.tertiaryFixed + LightTheme.colors.tertiaryFixed ), tertiaryFixedDim: pick( 'system_tertiary_fixed_dim', 'system_accent3_200', - MD3LightTheme.colors.tertiaryFixedDim + LightTheme.colors.tertiaryFixedDim ), onTertiaryFixed: pick( 'system_on_tertiary_fixed', 'system_accent3_900', - MD3LightTheme.colors.onTertiaryFixed + LightTheme.colors.onTertiaryFixed ), onTertiaryFixedVariant: pick( 'system_on_tertiary_fixed_variant', 'system_accent3_700', - MD3LightTheme.colors.onTertiaryFixedVariant + LightTheme.colors.onTertiaryFixedVariant ), }; @@ -262,241 +262,241 @@ const darkColors = { primary: pick( 'system_primary_dark', 'system_accent1_200', - MD3DarkTheme.colors.primary + DarkTheme.colors.primary ), onPrimary: pick( 'system_on_primary_dark', 'system_accent1_800', - MD3DarkTheme.colors.onPrimary + DarkTheme.colors.onPrimary ), primaryContainer: pick( 'system_primary_container_dark', 'system_accent1_700', - MD3DarkTheme.colors.primaryContainer + DarkTheme.colors.primaryContainer ), onPrimaryContainer: pick( 'system_on_primary_container_dark', 'system_accent1_100', - MD3DarkTheme.colors.onPrimaryContainer + DarkTheme.colors.onPrimaryContainer ), inversePrimary: pick( 'system_primary_light', 'system_accent1_600', - MD3DarkTheme.colors.inversePrimary + DarkTheme.colors.inversePrimary ), secondary: pick( 'system_secondary_dark', 'system_accent2_200', - MD3DarkTheme.colors.secondary + DarkTheme.colors.secondary ), onSecondary: pick( 'system_on_secondary_dark', 'system_accent2_800', - MD3DarkTheme.colors.onSecondary + DarkTheme.colors.onSecondary ), secondaryContainer: pick( 'system_secondary_container_dark', 'system_accent2_700', - MD3DarkTheme.colors.secondaryContainer + DarkTheme.colors.secondaryContainer ), onSecondaryContainer: pick( 'system_on_secondary_container_dark', 'system_accent2_100', - MD3DarkTheme.colors.onSecondaryContainer + DarkTheme.colors.onSecondaryContainer ), tertiary: pick( 'system_tertiary_dark', 'system_accent3_200', - MD3DarkTheme.colors.tertiary + DarkTheme.colors.tertiary ), onTertiary: pick( 'system_on_tertiary_dark', 'system_accent3_800', - MD3DarkTheme.colors.onTertiary + DarkTheme.colors.onTertiary ), tertiaryContainer: pick( 'system_tertiary_container_dark', 'system_accent3_700', - MD3DarkTheme.colors.tertiaryContainer + DarkTheme.colors.tertiaryContainer ), onTertiaryContainer: pick( 'system_on_tertiary_container_dark', 'system_accent3_100', - MD3DarkTheme.colors.onTertiaryContainer + DarkTheme.colors.onTertiaryContainer ), error: pick( 'system_error_dark', - MD3DarkTheme.colors.error, - MD3DarkTheme.colors.error + DarkTheme.colors.error, + DarkTheme.colors.error ), onError: pick( 'system_on_error_dark', - MD3DarkTheme.colors.onError, - MD3DarkTheme.colors.onError + DarkTheme.colors.onError, + DarkTheme.colors.onError ), errorContainer: pick( 'system_error_container_dark', - MD3DarkTheme.colors.errorContainer, - MD3DarkTheme.colors.errorContainer + DarkTheme.colors.errorContainer, + DarkTheme.colors.errorContainer ), onErrorContainer: pick( 'system_on_error_container_dark', - MD3DarkTheme.colors.onErrorContainer, - MD3DarkTheme.colors.onErrorContainer + DarkTheme.colors.onErrorContainer, + DarkTheme.colors.onErrorContainer ), onSurface: pick( 'system_on_surface_dark', 'system_neutral1_100', - MD3DarkTheme.colors.onSurface + DarkTheme.colors.onSurface ), onBackground: pick( 'system_on_background_dark', 'system_neutral1_100', - MD3DarkTheme.colors.onBackground + DarkTheme.colors.onBackground ), onSurfaceVariant: pick( 'system_on_surface_variant_dark', 'system_neutral2_200', - MD3DarkTheme.colors.onSurfaceVariant + DarkTheme.colors.onSurfaceVariant ), outline: pick( 'system_outline_dark', 'system_neutral2_400', - MD3DarkTheme.colors.outline + DarkTheme.colors.outline ), outlineVariant: pick( 'system_outline_variant_dark', 'system_neutral2_700', - MD3DarkTheme.colors.outlineVariant + DarkTheme.colors.outlineVariant ), inverseSurface: pick( 'system_surface_light', 'system_neutral1_100', - MD3DarkTheme.colors.inverseSurface + DarkTheme.colors.inverseSurface ), inverseOnSurface: pick( 'system_on_surface_light', 'system_neutral1_800', - MD3DarkTheme.colors.inverseOnSurface + DarkTheme.colors.inverseOnSurface ), surfaceContainerLowest: pick( 'system_surface_container_lowest_dark', - MD3DarkTheme.colors.surfaceContainerLowest, - MD3DarkTheme.colors.surfaceContainerLowest + DarkTheme.colors.surfaceContainerLowest, + DarkTheme.colors.surfaceContainerLowest ), surfaceContainerLow: pick( 'system_surface_container_low_dark', 'system_neutral2_900', - MD3DarkTheme.colors.surfaceContainerLow + DarkTheme.colors.surfaceContainerLow ), surfaceContainerHighest: pick( 'system_surface_container_highest_dark', - MD3DarkTheme.colors.surfaceContainerHighest, - MD3DarkTheme.colors.surfaceContainerHighest + DarkTheme.colors.surfaceContainerHighest, + DarkTheme.colors.surfaceContainerHighest ), surface: pick( 'system_surface_dark', - MD3DarkTheme.colors.surface, - MD3DarkTheme.colors.surface + DarkTheme.colors.surface, + DarkTheme.colors.surface ), surfaceDim: pick( 'system_surface_dim_dark', - MD3DarkTheme.colors.surfaceDim, - MD3DarkTheme.colors.surfaceDim + DarkTheme.colors.surfaceDim, + DarkTheme.colors.surfaceDim ), surfaceBright: pick( 'system_surface_bright_dark', - MD3DarkTheme.colors.surfaceBright, - MD3DarkTheme.colors.surfaceBright + DarkTheme.colors.surfaceBright, + DarkTheme.colors.surfaceBright ), surfaceContainer: pick( 'system_surface_container_dark', - MD3DarkTheme.colors.surfaceContainer, - MD3DarkTheme.colors.surfaceContainer + DarkTheme.colors.surfaceContainer, + DarkTheme.colors.surfaceContainer ), surfaceContainerHigh: pick( 'system_surface_container_high_dark', - MD3DarkTheme.colors.surfaceContainerHigh, - MD3DarkTheme.colors.surfaceContainerHigh + DarkTheme.colors.surfaceContainerHigh, + DarkTheme.colors.surfaceContainerHigh ), background: pick( 'system_background_dark', - MD3DarkTheme.colors.background, - MD3DarkTheme.colors.background + DarkTheme.colors.background, + DarkTheme.colors.background ), surfaceVariant: pick( 'system_surface_variant_dark', - MD3DarkTheme.colors.surfaceVariant, - MD3DarkTheme.colors.surfaceVariant + DarkTheme.colors.surfaceVariant, + DarkTheme.colors.surfaceVariant ), primaryFixed: pick( 'system_primary_fixed', 'system_accent1_100', - MD3DarkTheme.colors.primaryFixed + DarkTheme.colors.primaryFixed ), primaryFixedDim: pick( 'system_primary_fixed_dim', 'system_accent1_200', - MD3DarkTheme.colors.primaryFixedDim + DarkTheme.colors.primaryFixedDim ), onPrimaryFixed: pick( 'system_on_primary_fixed', 'system_accent1_900', - MD3DarkTheme.colors.onPrimaryFixed + DarkTheme.colors.onPrimaryFixed ), onPrimaryFixedVariant: pick( 'system_on_primary_fixed_variant', 'system_accent1_700', - MD3DarkTheme.colors.onPrimaryFixedVariant + DarkTheme.colors.onPrimaryFixedVariant ), secondaryFixed: pick( 'system_secondary_fixed', 'system_accent2_100', - MD3DarkTheme.colors.secondaryFixed + DarkTheme.colors.secondaryFixed ), secondaryFixedDim: pick( 'system_secondary_fixed_dim', 'system_accent2_200', - MD3DarkTheme.colors.secondaryFixedDim + DarkTheme.colors.secondaryFixedDim ), onSecondaryFixed: pick( 'system_on_secondary_fixed', 'system_accent2_900', - MD3DarkTheme.colors.onSecondaryFixed + DarkTheme.colors.onSecondaryFixed ), onSecondaryFixedVariant: pick( 'system_on_secondary_fixed_variant', 'system_accent2_700', - MD3DarkTheme.colors.onSecondaryFixedVariant + DarkTheme.colors.onSecondaryFixedVariant ), tertiaryFixed: pick( 'system_tertiary_fixed', 'system_accent3_100', - MD3DarkTheme.colors.tertiaryFixed + DarkTheme.colors.tertiaryFixed ), tertiaryFixedDim: pick( 'system_tertiary_fixed_dim', 'system_accent3_200', - MD3DarkTheme.colors.tertiaryFixedDim + DarkTheme.colors.tertiaryFixedDim ), onTertiaryFixed: pick( 'system_on_tertiary_fixed', 'system_accent3_900', - MD3DarkTheme.colors.onTertiaryFixed + DarkTheme.colors.onTertiaryFixed ), onTertiaryFixedVariant: pick( 'system_on_tertiary_fixed_variant', 'system_accent3_700', - MD3DarkTheme.colors.onTertiaryFixedVariant + DarkTheme.colors.onTertiaryFixedVariant ), }; -export const MD3DynamicLightTheme: MD3Theme = { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...lightColors }, +export const DynamicLightTheme: Theme = { + ...LightTheme, + colors: { ...LightTheme.colors, ...lightColors }, }; -export const MD3DynamicDarkTheme: MD3Theme = { - ...MD3DarkTheme, - colors: { ...MD3DarkTheme.colors, ...darkColors }, +export const DynamicDarkTheme: Theme = { + ...DarkTheme, + colors: { ...DarkTheme.colors, ...darkColors }, }; diff --git a/src/styles/themes/DynamicTheme.tsx b/src/styles/themes/DynamicTheme.tsx index b2091929d5..78e3cc5c8d 100644 --- a/src/styles/themes/DynamicTheme.tsx +++ b/src/styles/themes/DynamicTheme.tsx @@ -1,2 +1,2 @@ -export { MD3DarkTheme as MD3DynamicDarkTheme } from './DarkTheme'; -export { MD3LightTheme as MD3DynamicLightTheme } from './LightTheme'; +export { DarkTheme as MD3DynamicDarkTheme } from './DarkTheme'; +export { LightTheme as MD3DynamicLightTheme } from './LightTheme'; diff --git a/src/styles/themes/LightTheme.tsx b/src/styles/themes/LightTheme.tsx index a386a977b6..96f3f84120 100644 --- a/src/styles/themes/LightTheme.tsx +++ b/src/styles/themes/LightTheme.tsx @@ -1,12 +1,12 @@ import color from 'color'; import { tokens } from './tokens'; -import type { MD3Theme } from '../../types'; +import type { Theme } from '../../types'; import configureFonts from '../fonts'; const { palette, stateOpacity } = tokens.md.ref; -export const MD3LightTheme: MD3Theme = { +export const LightTheme: Theme = { dark: false, roundness: 4, colors: { diff --git a/src/styles/themes/index.ts b/src/styles/themes/index.ts index 58e6e18160..4063fcba08 100644 --- a/src/styles/themes/index.ts +++ b/src/styles/themes/index.ts @@ -1,3 +1,3 @@ -export { MD3LightTheme } from './LightTheme'; -export { MD3DarkTheme } from './DarkTheme'; -export { MD3DynamicLightTheme, MD3DynamicDarkTheme } from './DynamicTheme'; +export { LightTheme } from './LightTheme'; +export { DarkTheme } from './DarkTheme'; +export { DynamicLightTheme, DynamicDarkTheme } from './DynamicTheme'; diff --git a/src/styles/themes/tokens.tsx b/src/styles/themes/tokens.tsx index aec68221ef..67883bfa6a 100644 --- a/src/styles/themes/tokens.tsx +++ b/src/styles/themes/tokens.tsx @@ -248,4 +248,4 @@ export const tokens = { }, }; -export const MD3Colors = ref.palette; +export const Colors = ref.palette; diff --git a/src/types.tsx b/src/types.tsx index 941cf689f9..b2191d12ca 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -26,7 +26,7 @@ export type Fonts = { thin: Font; }; -export type MD3Colors = { +export type Colors = { primary: string; primaryContainer: string; secondary: string; @@ -80,7 +80,7 @@ export type MD3Colors = { * which is incompatible with PlatformColor on Android. * @see https://m3.material.io/foundations/interaction/states/state-layers */ stateLayerPressed: string; - elevation: MD3ElevationColors; + elevation: ElevationColors; }; export type ThemeProp = $DeepPartial; @@ -94,15 +94,14 @@ export type ThemeBase = { }; }; -export type MD3Theme = ThemeBase & { - colors: MD3Colors; - fonts: MD3Typescale; +export type Theme = ThemeBase & { + colors: Colors; + fonts: Typescale; }; -export type InternalTheme = MD3Theme; +export type InternalTheme = Theme; -// MD3 types -export enum MD3TypescaleKey { +export enum TypescaleKey { displayLarge = 'displayLarge', displayMedium = 'displayMedium', displaySmall = 'displaySmall', @@ -124,7 +123,7 @@ export enum MD3TypescaleKey { bodySmall = 'bodySmall', } -export type MD3Type = { +export type TypeConfig = { fontFamily: string; letterSpacing: number; fontWeight: Font['fontWeight']; @@ -133,14 +132,14 @@ export type MD3Type = { fontStyle?: Font['fontStyle']; }; -export type MD3Typescale = +export type Typescale = | { - [key in MD3TypescaleKey]: MD3Type; + [key in TypescaleKey]: TypeConfig; } & { - ['default']: Omit; + ['default']: Omit; }; -export type MD3Elevation = 0 | 1 | 2 | 3 | 4 | 5; +export type Elevation = 0 | 1 | 2 | 3 | 4 | 5; export enum ElevationLevels { 'level0', @@ -151,7 +150,7 @@ export enum ElevationLevels { 'level5', } -export type MD3ElevationColors = { +export type ElevationColors = { [key in keyof typeof ElevationLevels]: string; }; From ca8dfef16031773483e678f73e970fc94fbbc19c Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Wed, 8 Apr 2026 09:08:34 +0300 Subject: [PATCH 13/14] chore: update yarn.lock --- yarn.lock | 7 ------- 1 file changed, 7 deletions(-) diff --git a/yarn.lock b/yarn.lock index b4133ec770..9696c756fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3887,13 +3887,6 @@ __metadata: languageName: node linkType: hard -"@material/material-color-utilities@npm:^0.2.7": - version: 0.2.7 - resolution: "@material/material-color-utilities@npm:0.2.7" - checksum: 10c0/7734f8d7cffe6a92d47fcca82b4846e39ffd79be9c057f3299466696dcdee5379b8a8a3aa6a9692d40bd6900905f689105d9a8ce47882ab22348df10621f70cd - languageName: node - linkType: hard - "@mdx-js/mdx@npm:^0.20.3": version: 0.20.3 resolution: "@mdx-js/mdx@npm:0.20.3" From e02e10bbad0c3963f67aa8e269f8f4af55a847f1 Mon Sep 17 00:00:00 2001 From: Adrian Cotfas Date: Wed, 8 Apr 2026 09:15:20 +0300 Subject: [PATCH 14/14] refactor: rename "device colors" to "Dynamic Theme" --- example/src/DrawerItems.tsx | 14 +++++++------- example/src/PreferencesContext.tsx | 4 ++-- example/src/index.native.tsx | 16 ++++++++-------- example/src/index.tsx | 4 ++-- example/utils/index.ts | 2 +- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index e5d04143bb..39cfe6402d 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -16,7 +16,7 @@ import { Portal, } from 'react-native-paper'; -import { deviceColorsSupported, isWeb } from '../utils'; +import { dynamicThemeSupported, isWeb } from '../utils'; import { useExampleTheme } from './hooks/useExampleTheme'; import { PreferencesContext } from './PreferencesContext'; @@ -103,7 +103,7 @@ function DrawerItems() { if (!preferences) throw new Error('PreferencesContext not provided'); const { - toggleShouldUseDeviceColors, + toggleShouldUseDynamicTheme, toggleTheme, toggleRtl: toggleRTL, toggleCollapsed, @@ -114,7 +114,7 @@ function DrawerItems() { collapsed, rtl: isRTL, theme: { dark: isDarkTheme }, - shouldUseDeviceColors, + shouldUseDynamicTheme, } = preferences; const _handleToggleRTL = () => { @@ -181,12 +181,12 @@ function DrawerItems() { - {deviceColorsSupported ? ( - + {dynamicThemeSupported ? ( + - Use device colors * + Use Dynamic Theme - + diff --git a/example/src/PreferencesContext.tsx b/example/src/PreferencesContext.tsx index 3783a734bb..23034b668e 100644 --- a/example/src/PreferencesContext.tsx +++ b/example/src/PreferencesContext.tsx @@ -8,11 +8,11 @@ export const PreferencesContext = React.createContext<{ toggleCollapsed: () => void; toggleCustomFont: () => void; toggleRippleEffect: () => void; - toggleShouldUseDeviceColors?: () => void; + toggleShouldUseDynamicTheme?: () => void; theme: Theme; rtl: boolean; collapsed: boolean; customFontLoaded: boolean; rippleEffectEnabled: boolean; - shouldUseDeviceColors?: boolean; + shouldUseDynamicTheme?: boolean; } | null>(null); diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index f16f7ab82a..1620b7d8e1 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -20,7 +20,7 @@ import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; import { PreferencesContext } from './PreferencesContext'; import App from './RootNavigator'; -import { deviceColorsSupported } from '../utils'; +import { dynamicThemeSupported } from '../utils'; import { CombinedDefaultTheme, CombinedDarkTheme, @@ -45,7 +45,7 @@ export default function PaperExample() { InitialState | undefined >(); - const [shouldUseDeviceColors, setShouldUseDeviceColors] = + const [shouldUseDynamicTheme, setShouldUseDynamicTheme] = React.useState(true); const [isDarkMode, setIsDarkMode] = React.useState(false); const [rtl, setRtl] = React.useState( @@ -56,12 +56,12 @@ export default function PaperExample() { const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); const theme = React.useMemo(() => { - if (deviceColorsSupported && shouldUseDeviceColors) { + if (dynamicThemeSupported && shouldUseDynamicTheme) { return isDarkMode ? DynamicDarkTheme : DynamicLightTheme; } return isDarkMode ? DarkTheme : LightTheme; - }, [isDarkMode, shouldUseDeviceColors]); + }, [isDarkMode, shouldUseDynamicTheme]); React.useEffect(() => { const restoreState = async () => { @@ -128,8 +128,8 @@ export default function PaperExample() { const preferences = React.useMemo( () => ({ - toggleShouldUseDeviceColors: () => - setShouldUseDeviceColors((oldValue) => !oldValue), + toggleShouldUseDynamicTheme: () => + setShouldUseDynamicTheme((oldValue) => !oldValue), toggleTheme: () => setIsDarkMode((oldValue) => !oldValue), toggleRtl: () => setRtl((rtl) => !rtl), toggleCollapsed: () => setCollapsed(!collapsed), @@ -140,14 +140,14 @@ export default function PaperExample() { collapsed, rtl, theme, - shouldUseDeviceColors, + shouldUseDynamicTheme: shouldUseDynamicTheme, }), [ rtl, theme, collapsed, customFontLoaded, - shouldUseDeviceColors, + shouldUseDynamicTheme, rippleEffectEnabled, ] ); diff --git a/example/src/index.tsx b/example/src/index.tsx index 0b666f425b..e13328200b 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -110,9 +110,9 @@ export default function PaperExample() { rippleEffectEnabled, // noop for web, specified to avoid type errors toggleRtl: noop, - toggleShouldUseDeviceColors: noop, + toggleShouldUseDynamicTheme: noop, rtl: false, - shouldUseDeviceColors: false, + shouldUseDynamicTheme: false, }), [theme, collapsed, customFontLoaded, rippleEffectEnabled] ); diff --git a/example/utils/index.ts b/example/utils/index.ts index be94f003f9..74e1e3d564 100644 --- a/example/utils/index.ts +++ b/example/utils/index.ts @@ -1433,5 +1433,5 @@ export const restaurantsData = [ }, ]; -export const deviceColorsSupported = +export const dynamicThemeSupported = Platform.OS === 'android' && (Platform.Version as number) >= 31;