feat: adjust theme structure (#3084)

callstack · Jun 8, 2022 · 329b775 · 329b775
1 parent 2a9eff3
commit 329b775
Show file tree

Hide file tree

Showing 55 changed files with 513 additions and 465 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,4 +1,3 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-  plugins: ['lodash'],
 };
diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx
@@ -4,7 +4,9 @@ import { Button, List, useTheme } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
-  const { colors } = useTheme();
+  const theme = useTheme();
+
+  const color = theme.isV3 ? theme.colors.secondary : theme.colors.accent;
 
   return (
     <ScreenWrapper>
@@ -13,11 +15,7 @@ const ButtonExample = () => {
           <Button onPress={() => {}} style={styles.button}>
             Default
           </Button>
-          <Button
-            color={colors?.accent}
-            onPress={() => {}}
-            style={styles.button}
-          >
+          <Button color={color} onPress={() => {}} style={styles.button}>
             Custom
           </Button>
           <Button disabled onPress={() => {}} style={styles.button}>
@@ -46,7 +44,7 @@ const ButtonExample = () => {
           </Button>
           <Button
             mode="outlined"
-            color={colors?.accent}
+            color={color}
             onPress={() => {}}
             style={styles.button}
           >
@@ -94,7 +92,7 @@ const ButtonExample = () => {
           </Button>
           <Button
             mode="contained"
-            color={colors?.accent}
+            color={color}
             onPress={() => {}}
             style={styles.button}
           >

diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx
@@ -12,7 +12,7 @@ import ScreenWrapper from '../ScreenWrapper';
 
 const SectionHeader = ({ children }: React.PropsWithChildren<{}>) => {
   return (
-    <Text variant="title-large" style={styles.sectionHeader}>
+    <Text variant="titleLarge" style={styles.sectionHeader}>
       {children}
     </Text>
   );
@@ -32,53 +32,53 @@ const TextExample = () => {
 
         <SectionHeader>Text component:</SectionHeader>
 
-        <Text style={styles.text} variant="display-large">
+        <Text style={styles.text} variant="displayLarge">
           Display Large
         </Text>
-        <Text style={styles.text} variant="display-medium">
+        <Text style={styles.text} variant="displayMedium">
           Display Medium
         </Text>
-        <Text style={styles.text} variant="display-small">
+        <Text style={styles.text} variant="displaySmall">
           Display small
         </Text>
 
-        <Text style={styles.text} variant="headline-large">
+        <Text style={styles.text} variant="headlineLarge">
           Headline Large
         </Text>
-        <Text style={styles.text} variant="headline-medium">
+        <Text style={styles.text} variant="headlineMedium">
           Headline Medium
         </Text>
-        <Text style={styles.text} variant="headline-small">
+        <Text style={styles.text} variant="headlineSmall">
           Headline Small
         </Text>
 
-        <Text style={styles.text} variant="title-large">
+        <Text style={styles.text} variant="titleLarge">
           Title Large
         </Text>
-        <Text style={styles.text} variant="title-medium">
+        <Text style={styles.text} variant="titleMedium">
           Title Medium
         </Text>
-        <Text style={styles.text} variant="title-small">
+        <Text style={styles.text} variant="titleSmall">
           Title Small
         </Text>
 
-        <Text style={styles.text} variant="body-large">
+        <Text style={styles.text} variant="bodyLarge">
           Body Large
         </Text>
-        <Text style={styles.text} variant="body-medium">
+        <Text style={styles.text} variant="bodyMedium">
           Body Medium
         </Text>
-        <Text style={styles.text} variant="body-small">
+        <Text style={styles.text} variant="bodySmall">
           Body Small
         </Text>
 
-        <Text style={styles.text} variant="label-large">
+        <Text style={styles.text} variant="labelLarge">
           Label Large
         </Text>
-        <Text style={styles.text} variant="label-medium">
+        <Text style={styles.text} variant="labelMedium">
           Label Medium
         </Text>
-        <Text style={styles.text} variant="label-small">
+        <Text style={styles.text} variant="labelSmall">
           Label Small
         </Text>
       </View>

diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
@@ -108,7 +108,7 @@ const TextInputExample = () => {
 
   const _isUsernameValid = (name: string) => /^[a-zA-Z]*$/.test(name);
 
-  const { colors } = useTheme();
+  const theme = useTheme();
 
   const inputActionHandler = (type: keyof State, payload: string) =>
     dispatch({
@@ -121,7 +121,11 @@ const TextInputExample = () => {
 
     const newColors = {
       ...state.iconsColor,
-      [name]: !color ? colors?.accent : undefined,
+      [name]: !color
+        ? theme.isV3
+          ? theme.colors.primary
+          : theme.colors?.accent
+        : undefined,
     };
 
     dispatch({
@@ -230,7 +234,7 @@ const TextInputExample = () => {
           right={
             <TextInput.Icon
               name="chevron-up"
-              color={(focused) => (focused ? colors?.primary : undefined)}
+              color={(focused) => (focused ? theme.colors?.primary : undefined)}
             />
           }
         />

diff --git a/example/src/ScreenWrapper.tsx b/example/src/ScreenWrapper.tsx
@@ -24,16 +24,14 @@ export default function ScreenWrapper({
   contentContainerStyle,
   ...rest
 }: Props) {
-  const { colors, md, isV3 } = useTheme();
+  const theme = useTheme();
 
   const insets = useSafeAreaInsets();
 
   const containerStyle = [
     styles.container,
     {
-      backgroundColor: isV3
-        ? (md('md.sys.color.background') as string)
-        : colors?.background,
+      backgroundColor: theme.colors.background,
       paddingBottom: insets.bottom,
       paddingLeft: insets.left,
       paddingRight: insets.left,

diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.7",
     "color": "^3.1.2",
-    "lodash": "^4.17.21",
     "react-native-iphone-x-helper": "^1.3.1"
   },
   "devDependencies": {
@@ -59,7 +58,6 @@
     "@release-it/conventional-changelog": "^1.1.0",
     "@types/color": "^3.0.0",
     "@types/jest": "^24.0.13",
-    "@types/lodash": "^4.14.178",
     "@types/node": "^13.1.0",
     "@types/react-dom": "^16.8.4",
     "@types/react-native": "^0.66.1",

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
@@ -86,8 +86,12 @@ const Badge = ({
     }).start();
   }, [visible, opacity, scale]);
 
-  const { backgroundColor = theme.colors?.notification, ...restStyle } =
-    (StyleSheet.flatten(style) || {}) as TextStyle;
+  const {
+    backgroundColor = theme.isV3
+      ? theme.colors.error
+      : theme.colors?.notification,
+    ...restStyle
+  } = (StyleSheet.flatten(style) || {}) as TextStyle;
 
   const textColor = getContrastingColor(backgroundColor || white, white, black);
 

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -212,7 +212,14 @@ const Banner = ({
               </View>
             ) : null}
             <Text
-              style={[styles.message, { color: theme.colors?.text }]}
+              style={[
+                styles.message,
+                {
+                  color: theme.isV3
+                    ? theme.colors.onSurface
+                    : theme.colors.text,
+                },
+              ]}
               accessibilityLiveRegion={visible ? 'polite' : 'none'}
               accessibilityRole="alert"
             >

diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx
@@ -101,19 +101,28 @@ const CheckboxAndroid = ({
 
   const checked = status === 'checked';
   const indeterminate = status === 'indeterminate';
-  const checkedColor = rest.color || theme?.colors?.accent;
+
+  const themeTextColor = theme.isV3
+    ? theme.colors.onSurface
+    : theme.colors.text;
+  const themeDisabledColor = theme.isV3
+    ? theme.colors.onSurfaceDisabled
+    : theme.colors.text;
+
+  const checkedColor =
+    rest.color || theme.isV3 ? theme.colors.primary : theme?.colors?.accent;
   const uncheckedColor =
     rest.uncheckedColor ||
-    color(theme?.colors?.text)
+    color(themeTextColor)
       .alpha(theme.dark ? 0.7 : 0.54)
       .rgb()
       .string();
 
   let rippleColor, checkboxColor;
 
   if (disabled) {
-    rippleColor = color(theme?.colors?.text).alpha(0.16).rgb().string();
-    checkboxColor = theme?.colors?.disabled;
+    rippleColor = color(themeTextColor).alpha(0.16).rgb().string();
+    checkboxColor = themeDisabledColor;
   } else {
     rippleColor = color(checkedColor).fade(0.32).rgb().string();
     checkboxColor = checked ? checkedColor : uncheckedColor;

diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx
@@ -61,14 +61,25 @@ const CheckboxIOS = ({
   const checked = status === 'checked';
   const indeterminate = status === 'indeterminate';
 
-  const checkedColor = disabled
-    ? theme?.colors?.disabled
-    : rest.color || theme?.colors?.accent;
+  const disabledColor = theme.isV3
+    ? theme.colors.onSurfaceDisabled
+    : theme?.colors?.disabled;
+
+  const defaultColor = theme.isV3
+    ? theme.colors.primary
+    : theme?.colors?.accent;
+
+  const checkedColor = disabled ? disabledColor : rest.color || defaultColor;
 
   let rippleColor;
 
   if (disabled) {
-    rippleColor = color(theme?.colors?.text).alpha(0.16).rgb().string();
+    rippleColor = color(
+      theme.isV3 ? theme.colors.onSurface : theme?.colors?.text
+    )
+      .alpha(0.16)
+      .rgb()
+      .string();
   } else {
     rippleColor = color(checkedColor).fade(0.32).rgb().string();
   }

diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
@@ -112,6 +112,11 @@ const CheckboxItem = ({
     checkbox = <Checkbox {...checkboxProps} />;
   }
 
+  const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
+  const disabledTextColor = theme.isV3
+    ? theme.colors.onSurfaceDisabled
+    : theme.colors.disabled;
+
   return (
     <TouchableRipple
       accessibilityLabel={label}
@@ -134,7 +139,7 @@ const CheckboxItem = ({
           style={[
             styles.label,
             {
-              color: disabled ? theme.colors.disabled : theme.colors.text,
+              color: disabled ? disabledTextColor : textColor,
               textAlign: isLeading ? 'right' : 'left',
             },
             labelStyle,

diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
@@ -172,6 +172,13 @@ const Chip = ({
   const { backgroundColor = defaultBackgroundColor, borderRadius = 16 } =
     (StyleSheet.flatten(style) || {}) as ViewStyle;
 
+  const themeTextColor = theme.isV3
+    ? theme.colors.onSurface
+    : theme.colors.text;
+  const themeDisabledColor = theme.isV3
+    ? theme.colors.onSurfaceDisabled
+    : theme.colors.text;
+
   const borderColor =
     mode === 'outlined'
       ? color(
@@ -184,14 +191,14 @@ const Chip = ({
           .string()
       : backgroundColor;
   const textColor = disabled
-    ? colors?.disabled
-    : color(selectedColor !== undefined ? selectedColor : colors?.text)
+    ? themeDisabledColor
+    : color(selectedColor !== undefined ? selectedColor : themeTextColor)
         .alpha(0.87)
         .rgb()
         .string();
   const iconColor = disabled
-    ? colors?.disabled
-    : color(selectedColor !== undefined ? selectedColor : colors?.text)
+    ? themeDisabledColor
+    : color(selectedColor !== undefined ? selectedColor : themeTextColor)
         .alpha(0.54)
         .rgb()
         .string();

diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
@@ -81,7 +81,9 @@ const PaginationControls = ({
   onPageChange,
   showFastPaginationControls,
 }: PaginationControlsProps) => {
-  const { colors } = useTheme();
+  const theme = useTheme();
+
+  const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
 
   return (
     <>
@@ -95,7 +97,7 @@ const PaginationControls = ({
               direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
             />
           )}
-          color={colors?.text}
+          color={textColor}
           disabled={page === 0}
           onPress={() => onPageChange(0)}
           accessibilityLabel="page-first"
@@ -110,7 +112,7 @@ const PaginationControls = ({
             direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
           />
         )}
-        color={colors?.text}
+        color={textColor}
         disabled={page === 0}
         onPress={() => onPageChange(page - 1)}
         accessibilityLabel="chevron-left"
@@ -124,7 +126,7 @@ const PaginationControls = ({
             direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
           />
         )}
-        color={colors?.text}
+        color={textColor}
         disabled={numberOfPages === 0 || page === numberOfPages - 1}
         onPress={() => onPageChange(page + 1)}
         accessibilityLabel="chevron-right"
@@ -139,7 +141,7 @@ const PaginationControls = ({
               direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
             />
           )}
-          color={colors?.text}
+          color={textColor}
           disabled={numberOfPages === 0 || page === numberOfPages - 1}
           onPress={() => onPageChange(numberOfPages - 1)}
           accessibilityLabel="page-last"
@@ -270,7 +272,12 @@ const DataTablePagination = ({
   selectPageDropdownAccessibilityLabel,
   ...rest
 }: Props) => {
-  const labelColor = color(theme?.colors?.text).alpha(0.6).rgb().string();
+  const labelColor = color(
+    theme.isV3 ? theme.colors.onSurface : theme?.colors.text
+  )
+    .alpha(0.6)
+    .rgb()
+    .string();
 
   return (
     <View