@adiraku/react-native-ui 1.2.9-canary-7 → 2.0.0-canary-2

package/src/config/theme.default.ts

@@ -0,0 +1,440 @@
+import { TextStyle } from 'react-native';
+import { TypographyProps } from '../components';
+import { Border, Palettes, Radius, Shadow, Spacing } from '../themes';
+
+export const defaultFontFamily = {
+  regular: 'Montserrat-Regular',
+  regularItalic: 'Montserrat-Italic',
+  semibold: 'Montserrat-SemiBold',
+  semiboldItalic: 'Montserrat-SemiBoldItalic',
+  bold: 'Montserrat-Bold',
+  boldItalic: 'Montserrat-BoldItalic',
+};
+
+export type FontFamilyStyleType = Record<
+  NonNullable<TypographyProps['variant']>,
+  TextStyle & {
+    fontType?: keyof typeof defaultFontFamily;
+  }
+>;
+export const defaultFontFamilyStyle: FontFamilyStyleType = {
+  'heading1-semibold': {
+    fontType: 'semibold',
+    fontSize: 92,
+    lineHeight: 144,
+  },
+  'heading1-regular': {
+    fontType: 'regular',
+    fontSize: 92,
+    lineHeight: 144,
+  },
+  'heading2-semibold': {
+    fontType: 'semibold',
+    fontSize: 60,
+    lineHeight: 90,
+  },
+  'heading2-regular': {
+    fontType: 'regular',
+    fontSize: 60,
+    lineHeight: 90,
+  },
+  'heading3-semibold': {
+    fontType: 'semibold',
+    fontSize: 48,
+    lineHeight: 72,
+  },
+  'heading3-regular': {
+    fontType: 'regular',
+    fontSize: 48,
+    lineHeight: 72,
+  },
+  'heading4-semibold': {
+    fontType: 'semibold',
+    fontSize: 34,
+    lineHeight: 51,
+  },
+  'heading4-regular': {
+    fontType: 'regular',
+    fontSize: 34,
+    lineHeight: 51,
+  },
+  'heading5-bold': {
+    fontType: 'bold',
+    fontSize: 24,
+    lineHeight: 36,
+  },
+  'heading5-semibold': {
+    fontType: 'semibold',
+    fontSize: 24,
+    lineHeight: 36,
+  },
+  'heading5-regular': {
+    fontType: 'regular',
+    fontSize: 24,
+    lineHeight: 36,
+  },
+  'heading6-bold': {
+    fontType: 'bold',
+    fontSize: 20,
+    lineHeight: 30,
+  },
+  'heading6-semibold': {
+    fontType: 'semibold',
+    fontSize: 20,
+    lineHeight: 30,
+  },
+  'heading6-regular': {
+    fontType: 'regular',
+    fontSize: 20,
+    lineHeight: 30,
+  },
+  'subheading': {
+    fontType: 'semibold',
+    fontSize: 18,
+    lineHeight: 27,
+  },
+  'subtitle1': {
+    fontType: 'semibold',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  'subtitle2': {
+    fontType: 'semibold',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'subtitle2-extrabold': {
+    fontType: 'bold',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'body1': {
+    fontType: 'regular',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  'body2': {
+    fontType: 'regular',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'body3': {
+    fontType: 'regular',
+    fontSize: 12,
+    lineHeight: 21,
+  },
+  'button': {
+    fontType: 'semibold',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  'button-small': {
+    fontType: 'semibold',
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  'caption': {
+    fontType: 'regular',
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  'caption2': {
+    fontType: 'semibold',
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  'overline': {
+    fontType: 'semibold',
+    fontSize: 10,
+    lineHeight: 15,
+  },
+  'overline-small': {
+    fontType: 'regular',
+    fontSize: 10,
+    lineHeight: 15,
+  },
+  'text-heading-h1-semibold': {
+    fontType: 'semibold',
+    fontSize: 96,
+    lineHeight: 96,
+  },
+  'text-heading-h1-regular': {
+    fontType: 'regular',
+    fontSize: 96,
+    lineHeight: 96,
+  },
+  'text-heading-h2-semibold': {
+    fontType: 'semibold',
+    fontSize: 60,
+    lineHeight: 60,
+  },
+  'text-heading-h2-regular': {
+    fontType: 'regular',
+    fontSize: 60,
+    lineHeight: 60,
+  },
+  'text-heading-h3-bold': {
+    fontType: 'bold',
+    fontSize: 48,
+    lineHeight: 48,
+  },
+  'text-heading-h3-regular': {
+    fontType: 'regular',
+    fontSize: 48,
+    lineHeight: 48,
+  },
+  'text-heading-h4-semibold': {
+    fontType: 'semibold',
+    fontSize: 34,
+    lineHeight: 34,
+  },
+  'text-heading-h4-regular': {
+    fontType: 'regular',
+    fontSize: 34,
+    lineHeight: 34,
+  },
+  'text-heading-h5-bold': {
+    fontType: 'bold',
+    fontSize: 24,
+    lineHeight: 24,
+  },
+  'text-heading-h5-semibold': {
+    fontType: 'semibold',
+    fontSize: 24,
+    lineHeight: 24,
+  },
+  'text-heading-h5-regular': {
+    fontType: 'regular',
+    fontSize: 24,
+    lineHeight: 24,
+  },
+  'text-heading-h6-bold': {
+    fontType: 'bold',
+    fontSize: 20,
+    lineHeight: 20,
+  },
+  'text-heading-h6-semibold': {
+    fontType: 'semibold',
+    fontSize: 20,
+    lineHeight: 20,
+  },
+  'text-heading-h6-regular': {
+    fontType: 'regular',
+    fontSize: 20,
+    lineHeight: 20,
+  },
+  'text-sub-heading-semibold': {
+    fontType: 'semibold',
+    fontSize: 14,
+    lineHeight: 14,
+  },
+  'text-subtitle-primary-semibold': {
+    fontType: 'semibold',
+    fontSize: 16,
+    lineHeight: 16,
+  },
+  'text-subtitle-secondary-bold': {
+    fontType: 'bold',
+    fontSize: 14,
+    lineHeight: 14,
+  },
+  'text-subtitle-secondary-semibold': {
+    fontType: 'semibold',
+    fontSize: 14,
+    lineHeight: 14,
+  },
+  'text-button-default-semibold': {
+    fontType: 'semibold',
+    fontSize: 14,
+    lineHeight: 14,
+  },
+  'text-button-small-semibold': {
+    fontType: 'semibold',
+    fontSize: 12,
+    lineHeight: 12,
+  },
+  'text-caption-semibold': {
+    fontType: 'semibold',
+    fontSize: 12,
+    lineHeight: 12,
+  },
+  'text-caption-regular': {
+    fontType: 'regular',
+    fontSize: 12,
+    lineHeight: 12,
+  },
+  'text-overline-semibold': {
+    fontType: 'semibold',
+    fontSize: 10,
+    lineHeight: 10,
+  },
+  'text-overline-regular': {
+    fontType: 'regular',
+    fontSize: 12,
+    lineHeight: 12,
+  },
+  'text-overline-strike': {
+    fontType: 'regular',
+    textDecorationLine: 'line-through',
+    fontSize: 12,
+    lineHeight: 12,
+  },
+  'text-body-primary-regular': {
+    fontType: 'regular',
+    fontSize: 16,
+    lineHeight: 16,
+  },
+  'text-body-secondary-regular': {
+    fontType: 'regular',
+    fontSize: 14,
+    lineHeight: 14,
+  },
+  'text-body-tertiary-regular': {
+    fontType: 'regular',
+    fontSize: 12,
+    lineHeight: 12,
+  },
+};
+
+export const defaultTheme = {
+  colors: {
+    light: {
+      'border-primary': Palettes.black[900],
+      'border-default': Palettes.grey[100],
+      'border-inverse': Palettes.white[50],
+      'border-input': Palettes.grey[200],
+      'border-info': Palettes.blue[600],
+      'border-disable': Palettes.grey[400],
+      'border-warning': Palettes.yellow[600],
+      'border-success': Palettes.green[700],
+      'border-danger': Palettes.red[700],
+
+      'icon-primary': Palettes.black[900],
+      'icon-secondary': Palettes.whiteDark[50],
+      'icon-inverse': Palettes.white[50],
+      'icon-disable': Palettes.grey[900],
+      'icon-disable-secondary': Palettes.grey[200],
+      'icon-danger': Palettes.red[700],
+      'icon-info': Palettes.blue[600],
+      'icon-warning': Palettes.yellow[600],
+      'icon-warning-secondary': Palettes.yellow[100],
+      'icon-success': Palettes.green[700],
+      'icon-orange': Palettes.yellow[700],
+
+      'surface-primary': Palettes.white[50],
+      'surface-secondary': Palettes.whiteDark[50],
+      'surface-disable': Palettes.grey[100],
+      'surface-warning': Palettes.yellow[100],
+      'surface-danger': Palettes.red[50],
+      'surface-info': Palettes.blue[50],
+      'surface-success': Palettes.green[50],
+
+      'fill-primary': Palettes.black[900],
+      'fill-secondary': Palettes.whiteDark[50],
+      'fill-inverse': Palettes.white[50],
+      'fill-disable': Palettes.grey[400],
+      'fill-disable-secondary': Palettes.grey[50],
+      'fill-info': Palettes.blue[600],
+      'fill-info-secondary': Palettes.blue[50],
+      'fill-danger': Palettes.red[700],
+      'fill-danger-secondary': Palettes.red[50],
+      'fill-warning': Palettes.yellow[600],
+      'fill-warning-secondary': Palettes.yellow[100],
+      'fill-success': Palettes.green[700],
+      'fill-success-secondary': Palettes.green[50],
+
+      'text-primary': Palettes.black[900],
+      'text-secondary': Palettes.black[600],
+      'text-inverse': Palettes.white[50],
+      'text-disable': Palettes.grey[400],
+      'text-disable-secondary': Palettes.grey[200],
+      'text-danger': Palettes.red[700],
+      'text-info': Palettes.blue[600],
+      'text-warning': Palettes.yellow[600],
+      'text-success': Palettes.green[700],
+
+      'button-primary': Palettes.black[900],
+      'button-secondary': Palettes.whiteDark[50],
+      'button-inverse': Palettes.white[50],
+      'button-disable': Palettes.grey[50],
+      'button-danger': Palettes.red[700],
+      'button-info': Palettes.blue[600],
+      'button-warning': Palettes.yellow[600],
+      'button-success': Palettes.green[700],
+    },
+    dark: {
+      'border-primary': Palettes.white[50],
+      'border-default': Palettes.grey[800],
+      'border-inverse': Palettes.black[900],
+      'border-input': Palettes.grey[700],
+      'border-info': Palettes.blue[300],
+      'border-disable': Palettes.grey[600],
+      'border-warning': Palettes.yellow[300],
+      'border-success': Palettes.green[300],
+      'border-danger': Palettes.red[300],
+
+      'icon-primary': Palettes.white[50],
+      'icon-secondary': Palettes.black[900],
+      'icon-inverse': Palettes.black[900],
+      'icon-disable': Palettes.grey[700],
+      'icon-disable-secondary': Palettes.grey[600],
+      'icon-danger': Palettes.red[300],
+      'icon-info': Palettes.blue[300],
+      'icon-warning': Palettes.yellow[300],
+      'icon-warning-secondary': Palettes.yellow[700],
+      'icon-success': Palettes.green[300],
+      'icon-orange': Palettes.yellow[300],
+
+      'surface-primary': Palettes.black[900],
+      'surface-secondary': Palettes.black[800],
+      'surface-disable': Palettes.grey[800],
+      'surface-warning': Palettes.yellow[700],
+      'surface-danger': Palettes.red[700],
+      'surface-info': Palettes.blue[700],
+      'surface-success': Palettes.green[700],
+
+      'fill-primary': Palettes.white[50],
+      'fill-secondary': Palettes.black[900],
+      'fill-inverse': Palettes.black[900],
+      'fill-disable': Palettes.grey[600],
+      'fill-disable-secondary': Palettes.grey[800],
+      'fill-info': Palettes.blue[300],
+      'fill-info-secondary': Palettes.blue[700],
+      'fill-danger': Palettes.red[300],
+      'fill-danger-secondary': Palettes.red[700],
+      'fill-warning': Palettes.yellow[300],
+      'fill-warning-secondary': Palettes.yellow[700],
+      'fill-success': Palettes.green[300],
+      'fill-success-secondary': Palettes.green[700],
+
+      'text-primary': Palettes.white[50],
+      'text-secondary': Palettes.white[200],
+      'text-inverse': Palettes.black[900],
+      'text-disable': Palettes.grey[600],
+      'text-disable-secondary': Palettes.grey[700],
+      'text-danger': Palettes.red[300],
+      'text-info': Palettes.blue[300],
+      'text-warning': Palettes.yellow[300],
+      'text-success': Palettes.green[300],
+
+      'button-primary': Palettes.white[50],
+      'button-secondary': Palettes.black[900],
+      'button-inverse': Palettes.black[900],
+      'button-disable': Palettes.grey[700],
+      'button-danger': Palettes.red[300],
+      'button-info': Palettes.blue[300],
+      'button-warning': Palettes.yellow[300],
+      'button-success': Palettes.green[300],
+    },
+  },
+  Fonts: defaultFontFamily,
+  FontFamilyStyle: defaultFontFamilyStyle,
+  Border,
+  Radius,
+  Shadow,
+  Spacing,
+};
+
+export type AppTheme = typeof defaultTheme;
+export type ColorScheme = keyof typeof defaultTheme.colors;
+export type ColorTokenType = typeof defaultTheme.colors.light;

package/src/config/theme.provider.tsx

@@ -0,0 +1,53 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import deepmerge from 'deepmerge';
+
+import { AppTheme, ColorScheme, defaultTheme } from './theme.default';
+import { ThemeProviderContext, ThemeProviderProps } from './theme.type';
+
+export const ThemeContext = createContext<ThemeProviderContext>(
+  {} as ThemeProviderContext
+);
+
+export const createTheme = (theme: AppTheme): AppTheme => {
+  return deepmerge(defaultTheme, theme);
+};
+
+export function ThemeProvider(props: ThemeProviderProps) {
+  const { children, theme = defaultTheme } = props;
+
+  const [colorScheme, setColorScheme] = useState<ColorScheme>('light');
+
+  const changeColorScheme: ThemeProviderContext['changeColorScheme'] =
+    useCallback(() => {
+      setColorScheme(colorScheme === 'light' ? 'dark' : 'light');
+    }, [setColorScheme, colorScheme]);
+
+  const themeContextValue = useMemo(() => {
+    const mergeTheme = createTheme(theme);
+
+    return {
+      ...mergeTheme,
+      colors: mergeTheme?.colors?.[colorScheme],
+      colorScheme,
+      changeColorScheme,
+    };
+  }, [colorScheme, theme, changeColorScheme]);
+
+  return (
+    <ThemeContext.Provider value={themeContextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useAppTheme = () => {
+  const themeContext = useContext(ThemeContext);
+
+  return themeContext;
+};

package/src/config/theme.type.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { AppTheme, ColorScheme } from './theme.default';
+
+export type ThemeProviderContext = {
+  colors: AppTheme['colors']['light'];
+  colorScheme: ColorScheme;
+  changeColorScheme: () => void;
+} & Pick<
+  AppTheme,
+  'Border' | 'Radius' | 'Shadow' | 'Spacing' | 'Fonts' | 'FontFamilyStyle'
+>;
+
+export type ThemeProviderProps = PropsWithChildren & {
+  theme?: AppTheme;
+};
+
+export type AppThemeColor = Omit<ThemeProviderContext, 'changeColorScheme'>;

package/src/index.tsx

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './themes';
+export * from './config';

package/src/themes/border.ts

@@ -1,5 +1,5 @@
 const Border = {
-    1: 1,
-    2: 2,
+  1: 1,
+  2: 2,
 };
-export { Border };
+export { Border };

package/src/themes/colors.ts

@@ -114,7 +114,7 @@ const Palettes: PaletteTypes = {
     900: '#00469B',
     800: '#0064BA',
     700: '#0275CC',
-    600: '#0B86DF',
+    600: '#0039D4',
     500: '#1294EC',
     400: '#3DA3EF',
     300: '#61B3F1',

package/src/themes/shadow.tsx

@@ -1,14 +1,16 @@
 import type { ViewStyle } from 'react-native';
 
-type Shadows =
+export type Shadows =
+  | 'none'
   | 'shadow-elevation-1'
   | 'shadow-elevation-2'
   | 'shadow-elevation-3'
   | 'shadow-elevation-4';
 
-type ShadowType = Record<Shadows, ViewStyle>;
+export type ShadowType = Record<Shadows, ViewStyle>;
 
 export const Shadow: ShadowType = {
+  'none': {},
   'shadow-elevation-1': {
     elevation: 3,
     shadowColor: 'black',