ikualo-ui-kit-mobile 0.2.4 → 0.3.0

package/.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

package/App.tsx

@@ -1,9 +1,12 @@
 import { PaperProvider, Text } from 'react-native-paper';
 
-import { theme } from './src/config/paper.config';
+import { setGlobalTheme, getGlobalTheme } from './src/config/paper.config';
 import { useFonts } from 'expo-font';
+import React, { useEffect } from 'react';
+import { Appearance } from 'react-native';
 
 export default function App() {
+  const theme = getGlobalTheme();
   const [fontsLoaded] = useFonts({
     MontserratLight: require('./assets/fonts/MontserratLight.ttf'), //300
     MontserratRegular: require('./assets/fonts/MontserratRegular.ttf'), //400
@@ -11,6 +14,15 @@ export default function App() {
     MontserratBold: require('./assets/fonts/MontserratBold.ttf'), //700
     MontserratExtraBold: require('./assets/fonts/MontserratExtraBold.ttf'), //900
   });
+  useEffect(() => {
+    // vexo(process.env.EXPO_PUBLIC_API_KEY_VEXO ?? "");
+    const listener = Appearance.addChangeListener(({ colorScheme }) => {
+      if (colorScheme) {
+        setGlobalTheme(colorScheme);
+      }
+    });
+    return () => listener.remove();
+  }, []);
   return (
     <>
       {fontsLoaded && (

package/assets/styles/elements/alert.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { theme } from '../../../src/config/paper.config';
+import { getGlobalTheme } from '../../../src/config/paper.config';
 
 const styleAlerts = StyleSheet.create({
   alert: {
@@ -14,23 +14,23 @@ const styleAlerts = StyleSheet.create({
     padding: 16,
   },
   'alert--info': {
-    backgroundColor: theme.colors.lightInfo,
-    borderLeftColor: theme.colors.darkInfo,
+    backgroundColor: getGlobalTheme().colors.lightInfo,
+    borderLeftColor: getGlobalTheme().colors.darkInfo,
   },
   'alert--warning': {
-    backgroundColor: theme.colors.lightWarning,
-    borderLeftColor: theme.colors.darkWarning,
+    backgroundColor: getGlobalTheme().colors.lightWarning,
+    borderLeftColor: getGlobalTheme().colors.darkWarning,
   },
   'alert--success': {
-    backgroundColor: theme.colors.lightSuccess,
-    borderLeftColor: theme.colors.darkSuccess,
+    backgroundColor: getGlobalTheme().colors.lightSuccess,
+    borderLeftColor: getGlobalTheme().colors.darkSuccess,
   },
   'alert--error': {
-    backgroundColor: theme.colors.lightRed,
-    borderLeftColor: theme.colors.darkRed,
+    backgroundColor: getGlobalTheme().colors.lightRed,
+    borderLeftColor: getGlobalTheme().colors.darkRed,
   },
   'alert-container-text': { flexDirection: 'row', gap: 8 },
-  'alert-container-title': { fontSize: 14, fontFamily: 'MontserratBold', color: theme.colors.text , alignSelf: 'center' },
+  'alert-container-title': { fontSize: 14, fontFamily: 'MontserratBold', color: getGlobalTheme().colors.text, alignSelf: 'center' },
   'alert-body': { marginTop: 8 },
 });
 

package/assets/styles/elements/buttons.ts

@@ -1,6 +1,5 @@
-import { StyleSheet } from 'react-native';
-import { theme } from '../../../src/config/paper.config';
-
+import { Appearance, StyleSheet } from 'react-native';
+import { getGlobalTheme } from '../../../src/config/paper.config';
 const stylesButtonContained = StyleSheet.create({
   'btn-contained': {
     borderRadius: 8,
@@ -8,40 +7,40 @@ const stylesButtonContained = StyleSheet.create({
     height: 56,
   },
   'btn-contained-text': {
-    fontFamily: 'MontserratBold',
+    fontFamily: 'MontserratSemiBold',
     textAlign: 'center',
     fontSize: 16
 
   },
   'btn-contained--primary': {
-    backgroundColor: theme.colors.primary,
-    color: theme.colors.white,
+    backgroundColor: Appearance.getColorScheme() === 'dark' ? getGlobalTheme().colors.primary : getGlobalTheme().colors.darkNavy,
+    color: getGlobalTheme().colors.white,
   },
   'btn-contained--error': {
-    backgroundColor: theme.colors.darkRed,
-    color: theme.colors.white,
+    backgroundColor: getGlobalTheme().colors.darkRed,
+    color: getGlobalTheme().colors.white,
   },
   'btn-contained--lightPrimary': {
-    backgroundColor: theme.colors.lightPrimary,
-    color: theme.colors.boldBlack,
-    borderColor: theme.colors.primary,
+    backgroundColor: getGlobalTheme().colors.lightPrimary,
+    color: getGlobalTheme().colors.boldBlack,
+    borderColor: getGlobalTheme().colors.primary,
   },
 
   'btn-contained--secondary': {
-    backgroundColor: theme.colors.secondary,
-    color: theme.colors.black,
+    backgroundColor: getGlobalTheme().colors.secondary,
+    color: getGlobalTheme().colors.black,
   },
   'btn-contained--dark': {
-    backgroundColor: theme.colors.dark,
-    color: theme.colors.white,
+    backgroundColor: getGlobalTheme().colors.dark,
+    color: getGlobalTheme().colors.white,
   },
   'btn-contained--light': {
-    backgroundColor: theme.colors.light,
-    color: theme.colors.black,
+    backgroundColor: getGlobalTheme().colors.light,
+    color: getGlobalTheme().colors.black,
   },
   'btn-contained--disabled': {
-    backgroundColor: theme.colors.disabled,
-    color: theme.colors.darkGray,
+    backgroundColor: getGlobalTheme().colors.disabled,
+    color: getGlobalTheme().colors.darkGray,
   },
 
   'btn-contained--sm': {
@@ -60,7 +59,7 @@ const stylesButtonContained = StyleSheet.create({
 
 const stylesButtonOutlined = StyleSheet.create({
   'btn-outlined-text': {
-    fontFamily: 'MontserratBold',
+    fontFamily: 'MontserratSemiBold',
     textAlign: 'center',
     fontSize: 16
   },
@@ -71,28 +70,28 @@ const stylesButtonOutlined = StyleSheet.create({
     height: 56,
   },
   'btn-outlined--primary': {
-    borderColor: theme.colors.primary,
-    color: theme.colors.primary,
+    borderColor: Appearance.getColorScheme() === 'dark' ? getGlobalTheme().colors.primary : getGlobalTheme().colors.darkNavy,
+    color: Appearance.getColorScheme() === 'dark' ? getGlobalTheme().colors.primary : getGlobalTheme().colors.darkNavy,
   },
   'btn-outlined--error': {
-    borderColor: theme.colors.darkRed,
-    color: theme.colors.darkRed,
+    borderColor: getGlobalTheme().colors.darkRed,
+    color: getGlobalTheme().colors.darkRed,
   },
   'btn-outlined--secondary': {
-    borderColor: theme.colors.secondary,
-    color: theme.colors.secondary,
+    borderColor: getGlobalTheme().colors.secondary,
+    color: getGlobalTheme().colors.secondary,
   },
   'btn-outlined--dark': {
-    borderColor: theme.colors.dark,
-    color: theme.colors.dark,
+    borderColor: getGlobalTheme().colors.dark,
+    color: getGlobalTheme().colors.dark,
   },
   'btn-outlined--light': {
-    borderColor: theme.colors.light,
-    color: theme.colors.light,
+    borderColor: getGlobalTheme().colors.light,
+    color: getGlobalTheme().colors.light,
   },
   'btn-outlined--disabled': {
-    borderColor: theme.colors.disabled,
-    color: theme.colors.disabled,
+    borderColor: getGlobalTheme().colors.disabled,
+    color: getGlobalTheme().colors.disabled,
   },
   'btn-outlined--sm': {
     paddingVertical: 3,
@@ -114,27 +113,27 @@ const stylesButtonText = StyleSheet.create({
     fontFamily: 'MontserratSemiBold',
   },
   'btn-text--primary': {
-    color: theme.colors.primary,
+    color: getGlobalTheme().colors.primary,
     fontFamily: 'MontserratSemiBold',
   },
   'btn-text--secondary': {
-    color: theme.colors.secondary,
+    color: getGlobalTheme().colors.secondary,
     fontFamily: 'MontserratSemiBold',
   },
   'btn-text--dark': {
-    color: theme.colors.dark,
+    color: getGlobalTheme().colors.dark,
     fontFamily: 'MontserratSemiBold',
   },
   'btn-text--light': {
-    color: theme.colors.light,
+    color: getGlobalTheme().colors.light,
     fontFamily: 'MontserratSemiBold',
   },
   'btn-text--disabled': {
-    color: theme.colors.disabled,
+    color: getGlobalTheme().colors.disabled,
     fontFamily: 'MontserratSemiBold',
   },
   'btn-text--generic': {
-    color: theme.colors.text,
+    color: getGlobalTheme().colors.text,
     fontFamily: 'MontserratSemiBold',
   },
   'btn-text--sm': {
@@ -156,8 +155,8 @@ const stylesButtonText = StyleSheet.create({
 });
 const stylesBtnLightSmall = StyleSheet.create({
   'btn-light-small': {
-    backgroundColor: theme.colors.lightPurpleBorder,
-    borderColor: theme.colors.primary,
+    backgroundColor: getGlobalTheme().colors.lightPurpleBorder,
+    borderColor: getGlobalTheme().colors.primary,
     borderWidth: 1,
     borderRadius: 8,
     maxWidth: 48,
@@ -182,8 +181,8 @@ const stylesBtnLightSmall = StyleSheet.create({
     fontSize: 24,
   },
   'btn-light-small--disabled': {
-    backgroundColor: theme.colors.disabledButtonBackground,
-    borderColor: theme.colors.disabledButtonBorder,
+    backgroundColor: getGlobalTheme().colors.disabledButtonBackground,
+    borderColor: getGlobalTheme().colors.disabledButtonBorder,
     borderRadius: 8,
     borderWidth: 1,
     maxWidth: 48,
@@ -194,8 +193,8 @@ const stylesBtnLightSmall = StyleSheet.create({
     height: 48,
   },
   'btn-light-small--active': {
-    backgroundColor: theme.colors.secondaryLight,
-    borderColor: theme.colors.secondary,
+    backgroundColor: getGlobalTheme().colors.secondaryLight,
+    borderColor: getGlobalTheme().colors.secondary,
     borderRadius: 8,
     borderWidth: 1,
     maxWidth: 48,
@@ -206,22 +205,22 @@ const stylesBtnLightSmall = StyleSheet.create({
     height: 48,
   },
   'btn-light-small-label--disabled': {
-    color: theme.colors.disabledButtonBorder,
+    color: getGlobalTheme().colors.disabledButtonBorder,
   },
   'btn-light-small-label--active': {
-    color: theme.colors.secondary,
+    color: getGlobalTheme().colors.secondary,
   },
 
 });
 const stylesButtonCircle = StyleSheet.create({
   'btn-circle': {
     borderRadius: 19,
-    backgroundColor: theme.colors.lightPurpleBorder,
+    backgroundColor: getGlobalTheme().colors.lightPurpleBorder,
     paddingHorizontal: 8,
   },
   'btn-circle__icon': {
     fontSize: 14,
-    color: theme.colors.primary,
+    color: getGlobalTheme().colors.primary,
   },
   'btn-circle__image': {
     width: 24,
@@ -236,7 +235,7 @@ const stylesButtonCircle = StyleSheet.create({
 
   'btn-circle__text': {
     fontSize: 14,
-    color: theme.colors.primary,
+    color: getGlobalTheme().colors.primary,
     fontFamily: 'MontserratSemiBold',
   },
 });

package/assets/styles/elements/cards.ts

@@ -1,67 +1,61 @@
 import { StyleSheet } from 'react-native';
-import { theme } from '../../../src/config/paper.config';
-
+import { getGlobalTheme } from '../../../src/config/paper.config';
 export const stylesCards = StyleSheet.create({
   card: {
     borderRadius: 4,
-    backgroundColor: theme.colors.white,
+    backgroundColor: getGlobalTheme().colors.white,
     padding: 16,
     borderWidth: 0.5,
-    borderColor: theme.colors.lightPrimary,
-    shadowColor: theme.colors.transparent,
+    borderColor: getGlobalTheme().colors.lightPrimary,
+    shadowColor: getGlobalTheme().colors.transparent,
   },
 
   'card-title': {
     fontFamily: 'MontserratSemiBold',
     fontSize: 14,
     lineHeight: 21,
-    color: theme.colors.blackText,
+    color: getGlobalTheme().colors.blackText,
   },
   'card-text': {
     fontFamily: 'MontserratRegular',
     fontSize: 14,
     lineHeight: 21,
-    color: theme.colors.lightBlack,
+    color: getGlobalTheme().colors.lightBlack,
     textAlign: 'justify',
   },
   'card-text--bold': {
     fontFamily: 'MontserratSemiBold',
-    color: theme.colors.primary,
+    color: getGlobalTheme().colors.primary,
   },
   'card-interactive': {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    backgroundColor: theme.colors.white,
-    padding: 16,
+    backgroundColor: getGlobalTheme().colors.white,
+    borderColor: getGlobalTheme().colors.lavender,
+    paddingHorizontal: 16,
     borderRadius: 4,
-    shadowColor: theme.colors.primary,
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.lightGray,
+    borderWidth: 0.5,
     marginVertical: 4,
+    height: 40
   },
   'card-interactive-icon': {
     marginRight: 16,
   },
-  'card-interactive-info': {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
   'card-interactive-text': {
-    color: theme.colors.text,
+    color: getGlobalTheme().colors.text,
     fontSize: 14,
-    fontFamily: 'MontserratSemiBold',
+    fontFamily: 'MontserratMedium',
   },
   'card-interactive-description': {
     flexDirection: 'row',
   },
   'card-interactive-subtext': {
-    color: theme.colors.text,
+    color: getGlobalTheme().colors.text,
     fontSize: 14,
     fontFamily: 'MontserratRegular',
   },
   'card-interactive-highlighted': {
-    color: theme.colors.primary,
+    color: getGlobalTheme().colors.primary,
     fontSize: 14,
     fontFamily: 'MontserratSemiBold',
   },
@@ -77,22 +71,22 @@ export const stylesCards = StyleSheet.create({
   'card-list': {
     borderWidth: 0.5,
     padding: 16,
-    backgroundColor: theme.colors.white,
+    backgroundColor: getGlobalTheme().colors.white,
     borderRadius: 4,
-    borderColor: theme.colors.transparent,
-    shadowColor: theme.colors.transparent,
+    borderColor: getGlobalTheme().colors.transparent,
+    shadowColor: getGlobalTheme().colors.transparent,
   },
   'card-list-selected': {
-    backgroundColor: theme.colors.lightPurpleBorder,
-    borderColor: theme.colors.purple,
-    shadowColor: theme.colors.lightPurpleShadow,
+    backgroundColor: getGlobalTheme().colors.lightPurpleBorder,
+    borderColor: getGlobalTheme().colors.purple,
+    shadowColor: getGlobalTheme().colors.lightPurpleShadow,
     shadowOffset: { width: 0, height: -1 },
     shadowOpacity: 0.7,
     shadowRadius: 5.4,
     borderWidth: 2,
   },
   'card-list-txt': {
-    color: theme.colors.blackText,
+    color: getGlobalTheme().colors.blackText,
     fontFamily: 'MontserratSemiBold',
     fontSize: 16,
     lineHeight: 24,
@@ -104,7 +98,7 @@ export const stylesCards = StyleSheet.create({
 });
 export const styleCardAbout = StyleSheet.create({
   'card-about': {
-    backgroundColor: theme.colors.white,
+    backgroundColor: getGlobalTheme().colors.white,
     borderTopStartRadius: 8,
     borderBottomLeftRadius: 8,
   },
@@ -114,17 +108,17 @@ export const styleCardAbout = StyleSheet.create({
     borderTopRightRadius: 8,
     height: '100%',
     objectFit: 'contain',
-    backgroundColor: theme.colors.lightPurpleBorder,
+    backgroundColor: getGlobalTheme().colors.lightPurpleBorder,
   },
   'card-about__title': {
     fontFamily: 'MontserratSemiBold',
     fontSize: 14,
     lineHeight: 21,
-    color: theme.colors.cardDsc,
+    color: getGlobalTheme().colors.cardDsc,
   },
   'card-about__vertical-line': {
     width: 8,
-    backgroundColor: theme.colors.mediumPurple,
+    backgroundColor: getGlobalTheme().colors.mediumPurple,
     borderTopStartRadius: 8,
     borderBottomStartRadius: 30,
     borderBottomEndRadius: 8,
@@ -145,4 +139,4 @@ export const styleCardAbout = StyleSheet.create({
   'card-about__full-width': {
     paddingRight: 16,
   },
-});
+});

package/assets/styles/elements/checkbox.ts

@@ -1,10 +1,9 @@
 import { StyleSheet } from 'react-native';
-import { theme } from '../../../src/config/paper.config';
-
+import { getGlobalTheme } from '../../../src/config/paper.config';
 const styleCheck = StyleSheet.create({
   checkbox: {
     borderWidth: 2,
-    borderColor: theme.colors.primary,
+    borderColor: getGlobalTheme().colors.primary,
     borderRadius: 4,
     width: 20,
     height: 20,

package/assets/styles/elements/dialog.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
-import { theme } from '../../../src/config/paper.config';
 import { Animated } from 'react-native';
+import { getGlobalTheme } from '../../../src/config/paper.config';
 export const stylesDialog = StyleSheet.create({
   modalBackground: {
     flex: 1,
@@ -28,14 +28,14 @@ export const stylesDialog = StyleSheet.create({
     position: 'relative'
   },
   'dialog-bottom': { position: 'absolute', bottom: -5, width: '100%' },
-  'dialog-icon': { borderRadius: 100, backgroundColor: theme.colors.lightRed, width: 40, height: 40, alignItems: 'center', justifyContent: 'center' },
-  'dialog-icon--error': { backgroundColor: theme.colors.lightRed },
-  'dialog-icon--warning': { backgroundColor: theme.colors.lightWarning },
-  'dialog-icon--info': { backgroundColor: theme.colors.lightInfo },
-  'dialog-icon--success': { backgroundColor: theme.colors.lightSuccess },
+  'dialog-icon': { borderRadius: 100, backgroundColor: getGlobalTheme().colors.lightRed, width: 40, height: 40, alignItems: 'center', justifyContent: 'center' },
+  'dialog-icon--error': { backgroundColor: getGlobalTheme().colors.lightRed },
+  'dialog-icon--warning': { backgroundColor: getGlobalTheme().colors.lightWarning },
+  'dialog-icon--info': { backgroundColor: getGlobalTheme().colors.lightInfo },
+  'dialog-icon--success': { backgroundColor: getGlobalTheme().colors.lightSuccess },
   'dialog-title': {
     fontSize: 16,
-    color: theme.colors.text,
+    color: getGlobalTheme().colors.text,
     textAlign: 'center',
     lineHeight: 24,
     fontFamily: 'MontserratSemiBold',
@@ -44,7 +44,7 @@ export const stylesDialog = StyleSheet.create({
   'dialog-only-title': { marginBottom: 0, marginTop: 16 },
   'dialog-select-title': {
     fontSize: 14,
-    color: theme.colors.text,
+    color: getGlobalTheme().colors.text,
     textAlign: 'center',
     fontFamily: 'MontserratSemiBold',
     marginTop: -5,
@@ -52,7 +52,7 @@ export const stylesDialog = StyleSheet.create({
   'dialog-container-icon': { flexDirection: 'row', justifyContent: 'center', marginBottom: 16 },
   'dialog-text': {
     fontSize: 14,
-    color: theme.colors.text,
+    color: getGlobalTheme().colors.text,
     textAlign: 'center',
     fontFamily: 'MontserratRegular',
   },
@@ -84,7 +84,7 @@ export const stylesDialog = StyleSheet.create({
   },
   'dialog-down-close-icon': {
     width: 24,
-    color: theme.colors.text,
+    color: getGlobalTheme().colors.text,
   },
   'dialog-content': {
     marginBottom: 32,

package/assets/styles/elements/dropdown.ts

@@ -1,6 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { theme } from '../../../src/config/paper.config';
-
+import { getGlobalTheme } from '../../../src/config/paper.config';
 const styleDropdown = StyleSheet.create({
   'dropdown-container': {
     width: 'auto',
@@ -11,7 +10,7 @@ const styleDropdown = StyleSheet.create({
   'dropdown-content': { backgroundColor: 'white', borderRadius: 16, padding: 16 },
   'dropdown-label': {
     fontSize: 16,
-    color: theme.colors.primary,
+    color: getGlobalTheme().colors.primary,
     textAlign: 'center',
     fontFamily: 'MontserratSemiBold',
     lineHeight: 24,
@@ -29,13 +28,13 @@ const styleDropdown = StyleSheet.create({
   'dropdown-menu-item': {
     fontFamily: 'MontserratSemiBold',
     fontSize: 14,
-    color: theme.colors.boldBlack,
+    color: getGlobalTheme().colors.boldBlack,
   },
   'dropdown-color--primary': {
-    color: theme.colors.primary,
+    color: getGlobalTheme().colors.primary,
   },
   'dropdown-highlight-color': {
-    color: theme.colors.lightPrimary,
+    color: getGlobalTheme().colors.lightPrimary,
   }
 });
 

package/assets/styles/elements/header.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { theme } from '../../../src/config/paper.config';
+import { getGlobalTheme } from '../../../src/config/paper.config';
 export const stylesHeader = StyleSheet.create({
   header: {
     flex: 0,
@@ -12,7 +12,7 @@ export const stylesHeader = StyleSheet.create({
     borderRadius: 100,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: theme.colors.boldBlack,
+    backgroundColor: getGlobalTheme().colors.boldBlack,
     width: 32,
     height: 32,
   },
@@ -24,6 +24,6 @@ export const stylesHeader = StyleSheet.create({
     fontFamily: 'MontserratSemiBold',
   },
   'header-logo': { height: 32, width: 32, resizeMode: 'contain' },
-  'header-icon-back': { borderRadius: 100, backgroundColor: theme.colors.lightPrimary, width: 32, height: 32, alignItems: 'center', justifyContent: 'center' },
+  'header-icon-back': { borderRadius: 100, backgroundColor: getGlobalTheme().colors.lightPrimary, width: 32, height: 32, alignItems: 'center', justifyContent: 'center' },
 
 });