@oxyhq/services/lib/module/ui/styles/theme.js

Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀

"use strict";

import { Platform, StyleSheet } from 'react-native';
import { fontFamilies } from './fonts';
const lightColors = {
  text: '#000000',
  background: '#FFFFFF',
  inputBackground: '#F5F5F5',
  placeholder: '#999999',
  primary: '#d169e5',
  border: '#E0E0E0',
  error: '#D32F2F',
  success: '#2E7D32',
  warning: '#F57C00',
  secondaryText: '#666666'
};
const darkColors = {
  text: '#FFFFFF',
  background: '#121212',
  inputBackground: '#333333',
  placeholder: '#AAAAAA',
  primary: '#d169e5',
  border: '#444444',
  error: '#EF5350',
  success: '#81C784',
  warning: '#FFB74D',
  secondaryText: '#BBBBBB'
};
const createTheme = isDark => {
  const colors = isDark ? darkColors : lightColors;
  return {
    colors,
    fonts: {
      title: {
        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
        fontSize: 34
      },
      body: {
        fontSize: 16,
        lineHeight: 24
      },
      button: {
        fontFamily: fontFamilies.phuduSemiBold,
        fontSize: 16,
        fontWeight: '600',
        color: '#FFFFFF'
      },
      label: {
        fontSize: 14,
        fontWeight: '500',
        marginBottom: 8
      }
    }
  };
};
export const getTheme = theme => {
  return createTheme(theme === 'dark');
};
export const useThemeColors = theme => {
  return getTheme(theme).colors;
};

// Common styles that can be reused across components
export const createCommonStyles = theme => {
  const themeObj = getTheme(theme);
  const {
    colors
  } = themeObj;
  return StyleSheet.create({
    container: {
      backgroundColor: colors.background
    },
    scrollContainer: {
      padding: 10
    },
    input: {
      height: 48,
      borderRadius: 35,
      paddingHorizontal: 16,
      borderWidth: 1,
      fontSize: 16,
      backgroundColor: colors.inputBackground,
      borderColor: colors.border,
      color: colors.text
    },
    button: {
      backgroundColor: colors.primary,
      height: 48,
      borderRadius: 35,
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 24
    },
    buttonText: {
      fontFamily: fontFamilies.phuduSemiBold,
      fontSize: 16,
      fontWeight: '600',
      color: '#FFFFFF'
    },
    errorContainer: {
      backgroundColor: '#FFEBEE',
      padding: 12,
      borderRadius: 35,
      marginBottom: 16
    },
    errorText: {
      fontSize: 14,
      fontWeight: '500',
      color: colors.error
    }
  });
};
//# sourceMappingURL=theme.js.map