feat: added light theme (#6)

* chore: move components to root folder

* chore: added theme toggle

* chore: fix button styling

package.json

@@ -5,8 +5,8 @@
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
-  "react-native": "src/index",
-  "source": "src/index",
+  "react-native": "src",
+  "source": "src",
   "files": [
     "src",
     "lib"

src/components/button/Button.tsx → src/button/Button.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { useThemedStyle } from '@gorhom/base-ui';
-import { Enhancer } from '../enhancer';
+import Enhancer from '../enhancer';
+import ButtonContent from './ButtonContent';
 import { stylesCreator } from './styles';
+import { KIND, SHAPE, SIZE } from './constants';
 
 import type { ButtonProps } from './types';
-import { KIND, SHAPE, SIZE } from './constants';
 
 const Button = ({
+  style,
   // presets
   kind = KIND.primary,
   size = SIZE.default,
@@ -33,12 +35,17 @@ const Button = ({
     isSelected,
     disabled
   );
+  const containerStyle = useMemo(() => [styles.container, style], [
+    styles.container,
+    style,
+  ]);
   //#endregion
+
   return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
+    <TouchableOpacity style={containerStyle} onPress={onPress}>
       <>
         <Enhancer position="start" component={startEnhancer} />
-        {children}
+        <ButtonContent children={children} style={styles.content} />
         <Enhancer position="end" component={endEnhancer} />
       </>
     </TouchableOpacity>

src/button/ButtonContent.tsx

@@ -0,0 +1,31 @@
+import React, { cloneElement } from 'react';
+import { Text } from 'react-native';
+import type { ButtonContentProps } from './types';
+
+const ButtonContent = ({ style, children: Children }: ButtonContentProps) => {
+  if (Children === null || Children === undefined) {
+    return null;
+  }
+
+  if (typeof Children === 'function') {
+    return Children({ style });
+  }
+
+  if (typeof Children === 'object') {
+    //@ts-ignore
+    return cloneElement(Children, {
+      //@ts-ignore
+      ...Children.props,
+      //@ts-ignore
+      style: [style, Children.props.style],
+    });
+  }
+
+  if (typeof Children === 'string') {
+    return <Text style={style}>{Children}</Text>;
+  }
+
+  return null;
+};
+
+export default ButtonContent;

src/components/button/index.ts → src/button/index.ts

@@ -1,2 +1,2 @@
-export { default as Button } from './Button';
+export { default } from './Button';
 export { KIND, SHAPE, SIZE } from './constants';

src/components/button/styles.ts → src/button/styles.ts

@@ -20,9 +20,28 @@ export const stylesCreator = createStyles(
       ...getKindStyles(theme, kind, isLoading, isSelected, disabled),
       ...getShapeStyles(theme, shape, size),
     },
+    content: {
+      ...getContentStyles(theme, kind, isLoading, isSelected, disabled),
+      ...getFontStyles(theme, size),
+      lineHeight: getShapeStyles(theme, shape, size).height,
+      textAlign: 'center',
+    },
   })
 );
 
+const getFontStyles = (theme: Theme, size: SIZE) => {
+  switch (size) {
+    case SIZE.mini:
+      return theme.typography.font150;
+    case SIZE.compact:
+      return theme.typography.font250;
+    case SIZE.large:
+      return theme.typography.font450;
+    default:
+      return theme.typography.font350;
+  }
+};
+
 const getBorderRadiusStyles = (theme: Theme, shape: SHAPE, size: SIZE) => {
   let value = theme.borders.buttonBorderRadius;
 
@@ -116,13 +135,65 @@ const getShapeStyles = (theme: Theme, shape: SHAPE, size: SIZE) => {
   }
 };
 
-function getKindStyles(
+const getContentStyles = (
+  theme: Theme,
+  kind: KIND,
+  isLoading: boolean,
+  isSelected: boolean,
+  disabled: boolean
+) => {
+  if (disabled) {
+    return Object.freeze({});
+  }
+  switch (kind) {
+    case KIND.primary:
+      if (isSelected) {
+        return {
+          color: theme.colors.buttonPrimarySelectedText,
+        };
+      }
+      return {
+        color: theme.colors.buttonPrimaryText,
+      };
+    case KIND.secondary:
+      if (isSelected) {
+        return {
+          color: theme.colors.buttonPrimaryText,
+        };
+      }
+      return {
+        color: theme.colors.buttonSecondaryText,
+      };
+    case KIND.tertiary:
+      if (isSelected) {
+        return {
+          color: theme.colors.buttonTertiarySelectedText,
+        };
+      }
+      return {
+        color: theme.colors.buttonTertiaryText,
+      };
+    case KIND.minimal:
+      if (isSelected) {
+        return {
+          color: theme.colors.buttonMinimalSelectedText,
+        };
+      }
+      return {
+        color: theme.colors.buttonMinimalText,
+      };
+    default:
+      return Object.freeze({});
+  }
+};
+
+const getKindStyles = (
   theme: Theme,
   kind: KIND,
   isLoading: boolean,
   isSelected: boolean,
   disabled: boolean
-) {
+) => {
   if (disabled) {
     return Object.freeze({});
   }
@@ -206,4 +277,4 @@ function getKindStyles(
     default:
       return Object.freeze({});
   }
-}
+};

src/components/button/types.d.ts → src/button/types.d.ts

@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { KIND, SHAPE, SIZE } from './constants';
 
 export interface ButtonProps {
-  children?: ReactNode;
   /**
    * Defines the kind (purpose) of a button.
    * @default KIND.primary
@@ -46,10 +46,22 @@ export interface ButtonProps {
    */
   endEnhancer?: ReactNode | FC;
 
+  /**
+   * Button content.
+   * @default null
+   */
+  children?: ReactNode | ReactNode[] | string;
+
+  style?: StyleProp<ViewStyle>;
   // callbacks
   /**
    * An action to be fired when button is pressed.
    * @default undefined
    */
   onPress?: () => void;
 }
+
+export interface ButtonContentProps {
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}

src/enhancer/index.ts

@@ -0,0 +1 @@
+export { default } from './Enhancer';

src/index.ts

@@ -5,11 +5,15 @@ export { default as ThemeProvider } from './providers/theme';
 export { useThemedStyle } from './hooks';
 
 // utilities
-export { DarkTheme, createDarkTheme, createStyles } from './themes';
+export {
+  DarkTheme,
+  createDarkTheme,
+  LightTheme,
+  createLightTheme,
+  createStyles,
+} from './themes';
 
 // types
 export type { Theme } from './themes';
 
 // components
-export { Button } from './components/button';
-export * from './components/typography';

src/themes/dark/semanticColorTokens.ts

@@ -1,10 +1,3 @@
-/*
-Copyright (c) 2018-2020 Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
 import type {
   ColorTokens,
   CoreSemanticColorTokens,

src/themes/index.ts

@@ -1,4 +1,6 @@
 export { DarkTheme, createDarkTheme } from './dark';
+export { LightTheme, createLightTheme } from './light';
 export { createStyles } from './utilities';
 
+// types
 export type { Theme, Typography } from './types';

src/themes/light/colorTokens.ts

@@ -0,0 +1,73 @@
+import { colors } from '../colors';
+import type { ColorTokens } from '../types';
+
+export const colorTokens: ColorTokens = {
+  // Primary Palette
+  primaryA: colors.black,
+  primaryB: colors.white,
+  primary: colors.black,
+  primary50: colors.gray50,
+  primary100: colors.gray100,
+  primary200: colors.gray200,
+  primary300: colors.gray300,
+  primary400: colors.gray400,
+  primary500: colors.gray500,
+  primary600: colors.gray600,
+  primary700: colors.gray700,
+  // Accent Palette
+  accent: colors.blue400,
+  accent50: colors.blue50,
+  accent100: colors.blue100,
+  accent200: colors.blue200,
+  accent300: colors.blue300,
+  accent400: colors.blue400,
+  accent500: colors.blue500,
+  accent600: colors.blue600,
+  accent700: colors.blue700,
+  // Negative Palette
+  negative: colors.red400,
+  negative50: colors.red50,
+  negative100: colors.red100,
+  negative200: colors.red200,
+  negative300: colors.red300,
+  negative400: colors.red400,
+  negative500: colors.red500,
+  negative600: colors.red600,
+  negative700: colors.red700,
+  // Warning Palette
+  warning: colors.yellow400,
+  warning50: colors.yellow50,
+  warning100: colors.yellow100,
+  warning200: colors.yellow200,
+  warning300: colors.yellow300,
+  warning400: colors.yellow400,
+  warning500: colors.yellow500,
+  warning600: colors.yellow600,
+  warning700: colors.yellow700,
+  // Positive Palette
+  positive: colors.green400,
+  positive50: colors.green50,
+  positive100: colors.green100,
+  positive200: colors.green200,
+  positive300: colors.green300,
+  positive400: colors.green400,
+  positive500: colors.green500,
+  positive600: colors.green600,
+  positive700: colors.green700,
+  // Monochrome Palette
+  white: colors.white,
+  black: colors.black,
+  mono100: colors.white,
+  mono200: colors.gray50,
+  mono300: colors.gray100,
+  mono400: colors.gray200,
+  mono500: colors.gray300,
+  mono600: colors.gray400,
+  mono700: colors.gray500,
+  mono800: colors.gray600,
+  mono900: colors.gray700,
+  mono1000: colors.black,
+  // Rating Palette,
+  rating200: colors.yellow200,
+  rating400: colors.yellow400,
+};

src/themes/light/componentColorTokens.ts

@@ -0,0 +1,48 @@
+import type { ColorTokens, ComponentColorTokens } from '../types';
+import { colorTokens } from './colorTokens';
+
+export const getComponentColorTokens = (
+  themePrimitives: ColorTokens = colorTokens
+): ComponentColorTokens => ({
+  // buttons
+  buttonPrimaryFill: themePrimitives.primary,
+  buttonPrimaryText: themePrimitives.white,
+  buttonPrimaryHover: themePrimitives.primary700,
+  buttonPrimaryActive: themePrimitives.primary600,
+  buttonPrimarySelectedFill: themePrimitives.primary600,
+  buttonPrimarySelectedText: themePrimitives.white,
+  buttonPrimarySpinnerForeground: themePrimitives.primary50,
+  buttonPrimarySpinnerBackground: themePrimitives.primary500,
+
+  buttonSecondaryFill: themePrimitives.primary100,
+  buttonSecondaryText: themePrimitives.primary,
+  buttonSecondaryHover: themePrimitives.primary200,
+  buttonSecondaryActive: themePrimitives.primary300,
+  buttonSecondarySelectedFill: themePrimitives.primary300,
+  buttonSecondarySelectedText: themePrimitives.primary,
+  buttonSecondarySpinnerForeground: themePrimitives.primary700,
+  buttonSecondarySpinnerBackground: themePrimitives.primary300,
+
+  buttonTertiaryFill: 'transparent',
+  buttonTertiaryText: themePrimitives.primary,
+  buttonTertiaryHover: themePrimitives.primary50,
+  buttonTertiaryActive: themePrimitives.primary100,
+  buttonTertiarySelectedFill: themePrimitives.primary100,
+  buttonTertiarySelectedText: themePrimitives.primary,
+  buttonTertiarySpinnerForeground: themePrimitives.primary700,
+  buttonTertiarySpinnerBackground: themePrimitives.primary300,
+
+  buttonMinimalFill: 'transparent',
+  buttonMinimalText: themePrimitives.primary,
+  buttonMinimalHover: themePrimitives.primary50,
+  buttonMinimalActive: themePrimitives.primary100,
+  buttonMinimalSelectedFill: themePrimitives.primary100,
+  buttonMinimalSelectedText: themePrimitives.primary,
+  buttonMinimalSpinnerForeground: themePrimitives.primary700,
+  buttonMinimalSpinnerBackground: themePrimitives.primary300,
+
+  buttonDisabledFill: themePrimitives.mono200,
+  buttonDisabledText: themePrimitives.mono600,
+  buttonDisabledSpinnerForeground: themePrimitives.mono600,
+  buttonDisabledSpinnerBackground: themePrimitives.mono400,
+});