Skip to content

Commit 329b775

Browse files
Drakeoonlukewalczak
Drakeoon
authored and
lukewalczak
committed
feat: adjust theme structure (callstack#3084)
1 parent 2a9eff3 commit 329b775

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+513
-465
lines changed

Diff for: ‎babel.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
module.exports = {
22
presets: ['module:metro-react-native-babel-preset'],
3-
plugins: ['lodash'],
43
};

Diff for: ‎example/src/Examples/ButtonExample.tsx

+6-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import { Button, List, useTheme } from 'react-native-paper';
44
import ScreenWrapper from '../ScreenWrapper';
55

66
const ButtonExample = () => {
7-
const { colors } = useTheme();
7+
const theme = useTheme();
8+
9+
const color = theme.isV3 ? theme.colors.secondary : theme.colors.accent;
810

911
return (
1012
<ScreenWrapper>
@@ -13,11 +15,7 @@ const ButtonExample = () => {
1315
<Button onPress={() => {}} style={styles.button}>
1416
Default
1517
</Button>
16-
<Button
17-
color={colors?.accent}
18-
onPress={() => {}}
19-
style={styles.button}
20-
>
18+
<Button color={color} onPress={() => {}} style={styles.button}>
2119
Custom
2220
</Button>
2321
<Button disabled onPress={() => {}} style={styles.button}>
@@ -46,7 +44,7 @@ const ButtonExample = () => {
4644
</Button>
4745
<Button
4846
mode="outlined"
49-
color={colors?.accent}
47+
color={color}
5048
onPress={() => {}}
5149
style={styles.button}
5250
>
@@ -94,7 +92,7 @@ const ButtonExample = () => {
9492
</Button>
9593
<Button
9694
mode="contained"
97-
color={colors?.accent}
95+
color={color}
9896
onPress={() => {}}
9997
style={styles.button}
10098
>

Diff for: ‎example/src/Examples/TextExample.tsx

+16-16
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import ScreenWrapper from '../ScreenWrapper';
1212

1313
const SectionHeader = ({ children }: React.PropsWithChildren<{}>) => {
1414
return (
15-
<Text variant="title-large" style={styles.sectionHeader}>
15+
<Text variant="titleLarge" style={styles.sectionHeader}>
1616
{children}
1717
</Text>
1818
);
@@ -32,53 +32,53 @@ const TextExample = () => {
3232

3333
<SectionHeader>Text component:</SectionHeader>
3434

35-
<Text style={styles.text} variant="display-large">
35+
<Text style={styles.text} variant="displayLarge">
3636
Display Large
3737
</Text>
38-
<Text style={styles.text} variant="display-medium">
38+
<Text style={styles.text} variant="displayMedium">
3939
Display Medium
4040
</Text>
41-
<Text style={styles.text} variant="display-small">
41+
<Text style={styles.text} variant="displaySmall">
4242
Display small
4343
</Text>
4444

45-
<Text style={styles.text} variant="headline-large">
45+
<Text style={styles.text} variant="headlineLarge">
4646
Headline Large
4747
</Text>
48-
<Text style={styles.text} variant="headline-medium">
48+
<Text style={styles.text} variant="headlineMedium">
4949
Headline Medium
5050
</Text>
51-
<Text style={styles.text} variant="headline-small">
51+
<Text style={styles.text} variant="headlineSmall">
5252
Headline Small
5353
</Text>
5454

55-
<Text style={styles.text} variant="title-large">
55+
<Text style={styles.text} variant="titleLarge">
5656
Title Large
5757
</Text>
58-
<Text style={styles.text} variant="title-medium">
58+
<Text style={styles.text} variant="titleMedium">
5959
Title Medium
6060
</Text>
61-
<Text style={styles.text} variant="title-small">
61+
<Text style={styles.text} variant="titleSmall">
6262
Title Small
6363
</Text>
6464

65-
<Text style={styles.text} variant="body-large">
65+
<Text style={styles.text} variant="bodyLarge">
6666
Body Large
6767
</Text>
68-
<Text style={styles.text} variant="body-medium">
68+
<Text style={styles.text} variant="bodyMedium">
6969
Body Medium
7070
</Text>
71-
<Text style={styles.text} variant="body-small">
71+
<Text style={styles.text} variant="bodySmall">
7272
Body Small
7373
</Text>
7474

75-
<Text style={styles.text} variant="label-large">
75+
<Text style={styles.text} variant="labelLarge">
7676
Label Large
7777
</Text>
78-
<Text style={styles.text} variant="label-medium">
78+
<Text style={styles.text} variant="labelMedium">
7979
Label Medium
8080
</Text>
81-
<Text style={styles.text} variant="label-small">
81+
<Text style={styles.text} variant="labelSmall">
8282
Label Small
8383
</Text>
8484
</View>

Diff for: ‎example/src/Examples/TextInputExample.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const TextInputExample = () => {
108108

109109
const _isUsernameValid = (name: string) => /^[a-zA-Z]*$/.test(name);
110110

111-
const { colors } = useTheme();
111+
const theme = useTheme();
112112

113113
const inputActionHandler = (type: keyof State, payload: string) =>
114114
dispatch({
@@ -121,7 +121,11 @@ const TextInputExample = () => {
121121

122122
const newColors = {
123123
...state.iconsColor,
124-
[name]: !color ? colors?.accent : undefined,
124+
[name]: !color
125+
? theme.isV3
126+
? theme.colors.primary
127+
: theme.colors?.accent
128+
: undefined,
125129
};
126130

127131
dispatch({
@@ -230,7 +234,7 @@ const TextInputExample = () => {
230234
right={
231235
<TextInput.Icon
232236
name="chevron-up"
233-
color={(focused) => (focused ? colors?.primary : undefined)}
237+
color={(focused) => (focused ? theme.colors?.primary : undefined)}
234238
/>
235239
}
236240
/>

Diff for: ‎example/src/ScreenWrapper.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,14 @@ export default function ScreenWrapper({
2424
contentContainerStyle,
2525
...rest
2626
}: Props) {
27-
const { colors, md, isV3 } = useTheme();
27+
const theme = useTheme();
2828

2929
const insets = useSafeAreaInsets();
3030

3131
const containerStyle = [
3232
styles.container,
3333
{
34-
backgroundColor: isV3
35-
? (md('md.sys.color.background') as string)
36-
: colors?.background,
34+
backgroundColor: theme.colors.background,
3735
paddingBottom: insets.bottom,
3836
paddingLeft: insets.left,
3937
paddingRight: insets.left,

Diff for: ‎package.json

-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
"dependencies": {
4949
"@callstack/react-theme-provider": "^3.0.7",
5050
"color": "^3.1.2",
51-
"lodash": "^4.17.21",
5251
"react-native-iphone-x-helper": "^1.3.1"
5352
},
5453
"devDependencies": {
@@ -59,7 +58,6 @@
5958
"@release-it/conventional-changelog": "^1.1.0",
6059
"@types/color": "^3.0.0",
6160
"@types/jest": "^24.0.13",
62-
"@types/lodash": "^4.14.178",
6361
"@types/node": "^13.1.0",
6462
"@types/react-dom": "^16.8.4",
6563
"@types/react-native": "^0.66.1",

Diff for: ‎src/components/Badge.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,12 @@ const Badge = ({
8686
}).start();
8787
}, [visible, opacity, scale]);
8888

89-
const { backgroundColor = theme.colors?.notification, ...restStyle } =
90-
(StyleSheet.flatten(style) || {}) as TextStyle;
89+
const {
90+
backgroundColor = theme.isV3
91+
? theme.colors.error
92+
: theme.colors?.notification,
93+
...restStyle
94+
} = (StyleSheet.flatten(style) || {}) as TextStyle;
9195

9296
const textColor = getContrastingColor(backgroundColor || white, white, black);
9397

Diff for: ‎src/components/Banner.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,14 @@ const Banner = ({
212212
</View>
213213
) : null}
214214
<Text
215-
style={[styles.message, { color: theme.colors?.text }]}
215+
style={[
216+
styles.message,
217+
{
218+
color: theme.isV3
219+
? theme.colors.onSurface
220+
: theme.colors.text,
221+
},
222+
]}
216223
accessibilityLiveRegion={visible ? 'polite' : 'none'}
217224
accessibilityRole="alert"
218225
>

Diff for: ‎src/components/Checkbox/CheckboxAndroid.tsx

+13-4
Original file line numberDiff line numberDiff line change
@@ -101,19 +101,28 @@ const CheckboxAndroid = ({
101101

102102
const checked = status === 'checked';
103103
const indeterminate = status === 'indeterminate';
104-
const checkedColor = rest.color || theme?.colors?.accent;
104+
105+
const themeTextColor = theme.isV3
106+
? theme.colors.onSurface
107+
: theme.colors.text;
108+
const themeDisabledColor = theme.isV3
109+
? theme.colors.onSurfaceDisabled
110+
: theme.colors.text;
111+
112+
const checkedColor =
113+
rest.color || theme.isV3 ? theme.colors.primary : theme?.colors?.accent;
105114
const uncheckedColor =
106115
rest.uncheckedColor ||
107-
color(theme?.colors?.text)
116+
color(themeTextColor)
108117
.alpha(theme.dark ? 0.7 : 0.54)
109118
.rgb()
110119
.string();
111120

112121
let rippleColor, checkboxColor;
113122

114123
if (disabled) {
115-
rippleColor = color(theme?.colors?.text).alpha(0.16).rgb().string();
116-
checkboxColor = theme?.colors?.disabled;
124+
rippleColor = color(themeTextColor).alpha(0.16).rgb().string();
125+
checkboxColor = themeDisabledColor;
117126
} else {
118127
rippleColor = color(checkedColor).fade(0.32).rgb().string();
119128
checkboxColor = checked ? checkedColor : uncheckedColor;

Diff for: ‎src/components/Checkbox/CheckboxIOS.tsx

+15-4
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,25 @@ const CheckboxIOS = ({
6161
const checked = status === 'checked';
6262
const indeterminate = status === 'indeterminate';
6363

64-
const checkedColor = disabled
65-
? theme?.colors?.disabled
66-
: rest.color || theme?.colors?.accent;
64+
const disabledColor = theme.isV3
65+
? theme.colors.onSurfaceDisabled
66+
: theme?.colors?.disabled;
67+
68+
const defaultColor = theme.isV3
69+
? theme.colors.primary
70+
: theme?.colors?.accent;
71+
72+
const checkedColor = disabled ? disabledColor : rest.color || defaultColor;
6773

6874
let rippleColor;
6975

7076
if (disabled) {
71-
rippleColor = color(theme?.colors?.text).alpha(0.16).rgb().string();
77+
rippleColor = color(
78+
theme.isV3 ? theme.colors.onSurface : theme?.colors?.text
79+
)
80+
.alpha(0.16)
81+
.rgb()
82+
.string();
7283
} else {
7384
rippleColor = color(checkedColor).fade(0.32).rgb().string();
7485
}

Diff for: ‎src/components/Checkbox/CheckboxItem.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,11 @@ const CheckboxItem = ({
112112
checkbox = <Checkbox {...checkboxProps} />;
113113
}
114114

115+
const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
116+
const disabledTextColor = theme.isV3
117+
? theme.colors.onSurfaceDisabled
118+
: theme.colors.disabled;
119+
115120
return (
116121
<TouchableRipple
117122
accessibilityLabel={label}
@@ -134,7 +139,7 @@ const CheckboxItem = ({
134139
style={[
135140
styles.label,
136141
{
137-
color: disabled ? theme.colors.disabled : theme.colors.text,
142+
color: disabled ? disabledTextColor : textColor,
138143
textAlign: isLeading ? 'right' : 'left',
139144
},
140145
labelStyle,

Diff for: ‎src/components/Chip.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,13 @@ const Chip = ({
172172
const { backgroundColor = defaultBackgroundColor, borderRadius = 16 } =
173173
(StyleSheet.flatten(style) || {}) as ViewStyle;
174174

175+
const themeTextColor = theme.isV3
176+
? theme.colors.onSurface
177+
: theme.colors.text;
178+
const themeDisabledColor = theme.isV3
179+
? theme.colors.onSurfaceDisabled
180+
: theme.colors.text;
181+
175182
const borderColor =
176183
mode === 'outlined'
177184
? color(
@@ -184,14 +191,14 @@ const Chip = ({
184191
.string()
185192
: backgroundColor;
186193
const textColor = disabled
187-
? colors?.disabled
188-
: color(selectedColor !== undefined ? selectedColor : colors?.text)
194+
? themeDisabledColor
195+
: color(selectedColor !== undefined ? selectedColor : themeTextColor)
189196
.alpha(0.87)
190197
.rgb()
191198
.string();
192199
const iconColor = disabled
193-
? colors?.disabled
194-
: color(selectedColor !== undefined ? selectedColor : colors?.text)
200+
? themeDisabledColor
201+
: color(selectedColor !== undefined ? selectedColor : themeTextColor)
195202
.alpha(0.54)
196203
.rgb()
197204
.string();

Diff for: ‎src/components/DataTable/DataTablePagination.tsx

+13-6
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,9 @@ const PaginationControls = ({
8181
onPageChange,
8282
showFastPaginationControls,
8383
}: PaginationControlsProps) => {
84-
const { colors } = useTheme();
84+
const theme = useTheme();
85+
86+
const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
8587

8688
return (
8789
<>
@@ -95,7 +97,7 @@ const PaginationControls = ({
9597
direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
9698
/>
9799
)}
98-
color={colors?.text}
100+
color={textColor}
99101
disabled={page === 0}
100102
onPress={() => onPageChange(0)}
101103
accessibilityLabel="page-first"
@@ -110,7 +112,7 @@ const PaginationControls = ({
110112
direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
111113
/>
112114
)}
113-
color={colors?.text}
115+
color={textColor}
114116
disabled={page === 0}
115117
onPress={() => onPageChange(page - 1)}
116118
accessibilityLabel="chevron-left"
@@ -124,7 +126,7 @@ const PaginationControls = ({
124126
direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
125127
/>
126128
)}
127-
color={colors?.text}
129+
color={textColor}
128130
disabled={numberOfPages === 0 || page === numberOfPages - 1}
129131
onPress={() => onPageChange(page + 1)}
130132
accessibilityLabel="chevron-right"
@@ -139,7 +141,7 @@ const PaginationControls = ({
139141
direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
140142
/>
141143
)}
142-
color={colors?.text}
144+
color={textColor}
143145
disabled={numberOfPages === 0 || page === numberOfPages - 1}
144146
onPress={() => onPageChange(numberOfPages - 1)}
145147
accessibilityLabel="page-last"
@@ -270,7 +272,12 @@ const DataTablePagination = ({
270272
selectPageDropdownAccessibilityLabel,
271273
...rest
272274
}: Props) => {
273-
const labelColor = color(theme?.colors?.text).alpha(0.6).rgb().string();
275+
const labelColor = color(
276+
theme.isV3 ? theme.colors.onSurface : theme?.colors.text
277+
)
278+
.alpha(0.6)
279+
.rgb()
280+
.string();
274281

275282
return (
276283
<View

0 commit comments

Comments
 (0)