fix(native): remove invalid box shadow and use default font family in react native

Author: minheq

docs/CustomizeTheme.mdx

@@ -113,7 +113,6 @@ const getButtonStyles = buttonVariables => (appearance, color, ...componentProps
   return {
     buttonStyle: {
       backgroundColor: buttonVariables[appearance],
-      boxShadow: '1 1 1 1 blue'
     },
     focusColor: { ... },
     textStyle: { ... },

src/components/Layout/Box.tsx

@@ -58,9 +58,21 @@ const shapeMap = {
 };
 
 const propToFn = {
-  elevation: (elevation: Elevation, theme: ITheme) => ({
-    boxShadow: theme.themeVariables.elevations[elevation],
-  }),
+  elevation: (elevation: Elevation, theme: ITheme) => {
+    // TODO: Add different shadows for different elevations
+    switch (elevation) {
+      case 0:
+      case 1:
+      case 2:
+      default:
+        return {
+          shadowColor: theme.themeVariables.colors.text.dark,
+          shadowOffset: { width: 1, height: 1 },
+          shadowOpacity: 0.15,
+          shadowRadius: 8,
+        };
+    }
+  },
   marginX: (marginX: number) => ({
     marginLeft: marginX,
     marginRight: marginX,

src/theme/component-variables/buttonVariables.ts

@@ -48,7 +48,6 @@ export interface IButtonVariables {
     color: string;
   };
   sizes: IButtonSizes;
-  boxShadow: string;
 }
 
 export const getButtonVariables = (
@@ -168,7 +167,6 @@ export const getButtonVariables = (
         },
       },
     },
-    boxShadow: 'none',
     disabled: {
       backgroundColor: themeVariables.colors.background.disabled,
 

src/theme/component-variables/pickerVariables.ts

@@ -5,7 +5,6 @@ import { IThemeVariables } from '../ThemeInterface';
 export type IPickerAppearanceStyles = ViewStyle & {
   backgroundColor: string;
   borderColor: string;
-  boxShadow: string;
   color: string;
 };
 
@@ -47,7 +46,6 @@ export const getPickerVariables = (
       backgroundColor: themeVariables.colors.background.plain,
       borderColor: themeVariables.colors.border.default,
       borderWidth: 1,
-      boxShadow: 'none',
       color: themeVariables.colors.text.default,
     },
     disabled: {

src/theme/default-theme/typography/fontFamilies.ts

@@ -1,16 +1,15 @@
-export default {
-  /**
-   * @property {string} heading - Used for headings larger than 20px.
-   */
-  heading: `"SF UI Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+import { Platform } from 'react-native';
 
-  /**
-   * @property {string} text - Used for text and UI (which includes almost anything).
-   */
-  text: `"SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-
-  /**
-   * @property {string} mono - Used for code and sometimes numbers in tables.
-   */
-  mono: `"SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace`,
-};
+export default (Platform.OS === 'web'
+  ? // Use system font
+    {
+      heading: `"SF UI Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+      mono: `"SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace`,
+      text: `"SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    }
+  : // Use default font families by React Native by default
+    {
+      heading: undefined,
+      mono: undefined,
+      text: undefined,
+    });