feat(color): use box and icon color from theme

Author: minheq

src/components/Alert/Alert.tsx

@@ -3,7 +3,7 @@ import { TouchableOpacity, View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { Intent } from '../../constants/Intent';
-import { Theme, useTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
@@ -24,26 +24,16 @@ export interface AlertProps {
   getStyles?: ReplaceReturnType<GetAlertStyles, DeepPartial<AlertStyles>>;
 }
 
-const resolveIcon = (intent: Intent, theme: Theme) => {
+const resolveIcon = (intent: Intent) => {
   switch (intent) {
     case 'success':
-      return (
-        <Icon name="check-circle" size={24} color={theme.colors.text.success} />
-      );
+      return <Icon name="check-circle" size={24} color="success" />;
     case 'warning':
-      return (
-        <Icon
-          name="alert-triangle"
-          size={24}
-          color={theme.colors.text.warning}
-        />
-      );
+      return <Icon name="alert-triangle" size={24} color="warning" />;
     case 'danger':
-      return (
-        <Icon name="alert-circle" size={24} color={theme.colors.text.danger} />
-      );
+      return <Icon name="alert-circle" size={24} color="danger" />;
     default:
-      return <Icon name="info" size={24} color={theme.colors.text.info} />;
+      return <Icon name="info" size={24} color="info" />;
   }
 };
 
@@ -71,7 +61,7 @@ export const Alert = (props: AlertProps) => {
     <View style={containerStyle} testID={testID}>
       {icon || (
         <Box paddingRight={16} justifyContent="center">
-          {resolveIcon(intent, theme)}
+          {resolveIcon(intent)}
         </Box>
       )}
       {component || (

src/components/Box/Box.mdx

@@ -15,10 +15,11 @@ Box is a primitive component for convenient layout of components. All style prop
 
 <Playground>
   <Box
-    paddingVertical={40}
-    paddingHorizontal={40}
+    // ...ViewStyle
     height={200}
     width={200}
-    backgroundColor="#67c6bb"
+    shape="rounded" // pill, circle or square (default)
+    elevation={5}
+    backgroundColor="primaryDefault" // background colors or any custom color "#67c6bb"
   />
 </Playground>

src/components/Box/Box.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View, ViewStyle } from 'react-native';
 
-import { Theme, useTheme } from '../../theme';
+import { BackgroundColor, Theme, useTheme } from '../../theme';
 
 export const BASE_BORDER_RADII = 4;
 
@@ -58,6 +58,16 @@ export const shapeMapping: {
 };
 
 const propToFn = {
+  backgroundColor: (color: BackgroundColor, theme: Theme) => {
+    // @ts-ignore
+    if (theme.colors.background[color]) {
+      // @ts-ignore
+      return { backgroundColor: theme.colors.background[color] };
+    }
+    return {
+      backgroundColor: color,
+    };
+  },
   elevation: (elevation: 0 | 1 | 2 | 3 | 4, theme: Theme) => {
     return theme.elevations[elevation];
   },

src/components/Icon/Icon.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import Feather from 'react-native-vector-icons/Feather';
 
+import { TextColor, useTheme } from '../../theme';
+import { getTextColor } from '../Typography/Text.styles';
+
 export interface IconProps {
-  color?: string;
+  color?: TextColor;
   name: FeatherIconName;
   size?: number;
 }
@@ -277,5 +280,13 @@ export type FeatherIconName =
   | 'zoom-out';
 
 export const Icon = ({ name, color, size }: IconProps) => {
-  return <Feather name={name} color={color} size={size} />;
+  const theme = useTheme();
+
+  return (
+    <Feather
+      name={name}
+      color={color ? getTextColor(theme.colors.text)(color) : color}
+      size={size}
+    />
+  );
 };

src/components/Icon/Icon.web.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as Feather from 'react-icons/fi';
 
+import { useTheme } from '../../theme';
+import { getTextColor } from '../Typography/Text.styles';
 import { IconProps } from './Icon';
 
 function convertToPascal(name: string) {
@@ -13,8 +15,14 @@ function convertToPascal(name: string) {
 }
 
 export const Icon = ({ name, color, size }: IconProps) => {
+  const theme = useTheme();
   // @ts-ignore
   const IconTag = Feather[`Fi${convertToPascal(name)}`];
 
-  return <IconTag color={color} size={size} />;
+  return (
+    <IconTag
+      color={color ? getTextColor(theme.colors.text)(color) : color}
+      size={size}
+    />
+  );
 };

tests/__snapshots__/snapshot.test.js.snap

@@ -2758,11 +2758,12 @@ exports[`Box_1 1`] = `
     style={
       Object {
         "backgroundColor": "rgba(103,198,187,1.00)",
+        "borderBottomLeftRadius": "4px",
+        "borderBottomRightRadius": "4px",
+        "borderTopLeftRadius": "4px",
+        "borderTopRightRadius": "4px",
+        "boxShadow": "5px 5px 8px rgba(167,167,167,0.35)",
         "height": "200px",
-        "paddingBottom": "40px",
-        "paddingLeft": "40px",
-        "paddingRight": "40px",
-        "paddingTop": "40px",
         "width": "200px",
       }
     }