@sudobility/building_blocks_rn 0.0.3 → 0.0.5

package/dist/src/components/pages/AppSubscriptionPage.js

@@ -107,7 +107,7 @@ const useStyles = createThemedStyles(colors => ({
         paddingVertical: 4,
     },
     statusBadgeActive: {
-        backgroundColor: '#dcfce7',
+        backgroundColor: colors.successBg,
     },
     statusBadgeInactive: {
         backgroundColor: colors.surfaceSecondary,
@@ -117,7 +117,7 @@ const useStyles = createThemedStyles(colors => ({
         fontWeight: '600',
     },
     statusBadgeTextActive: {
-        color: '#16a34a',
+        color: colors.successText,
     },
     statusBadgeTextInactive: {
         color: colors.textSecondary,

package/dist/src/components/pages/LoginScreen.js

@@ -88,7 +88,7 @@ const useStyles = createThemedStyles(colors => ({
         marginBottom: 20,
     },
     errorBox: {
-        backgroundColor: '#fef2f2',
+        backgroundColor: colors.errorBg,
         borderRadius: 8,
         padding: 12,
         marginBottom: 16,
@@ -166,11 +166,11 @@ const useStyles = createThemedStyles(colors => ({
         color: colors.text,
     },
     appleButton: {
-        backgroundColor: '#000000',
-        borderColor: '#000000',
+        backgroundColor: colors.invertedBackground,
+        borderColor: colors.invertedBackground,
     },
     appleButtonText: {
-        color: '#ffffff',
+        color: colors.invertedText,
     },
     toggleLink: {
         marginTop: 16,

package/dist/src/components/toast/ToastProvider.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useCallback, useContext, useRef, useState, } from 'react';
-import { View, Text, Animated, Pressable, StyleSheet } from 'react-native';
+import { View, Text, Animated, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '../../theme/ThemeContext';
+import { createThemedStyles } from '../../utils/styles';
 const ToastContext = createContext(null);
 let toastCounter = 0;
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
     const insets = useSafeAreaInsets();
+    const styles = useToastStyles();
     const removeToast = useCallback((id) => {
         setToasts(prev => prev.filter(t => t.id !== id));
     }, []);
@@ -20,6 +23,8 @@ export function ToastProvider({ children }) {
     return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { style: [styles.toastContainer, { top: insets.top + 8 }], pointerEvents: 'box-none', children: toasts.map(toast => (_jsx(ToastItem, { toast: toast, onDismiss: () => removeToast(toast.id) }, toast.id))) })] }));
 }
 function ToastItem({ toast, onDismiss, }) {
+    const { colors } = useTheme();
+    const styles = useToastStyles();
     const opacity = useRef(new Animated.Value(0)).current;
     const translateY = useRef(new Animated.Value(-20)).current;
     React.useEffect(() => {
@@ -37,10 +42,10 @@ function ToastItem({ toast, onDismiss, }) {
         ]).start();
     }, [opacity, translateY]);
     const bgColor = {
-        success: '#22c55e',
-        error: '#ef4444',
-        warning: '#f59e0b',
-        info: '#3b82f6',
+        success: colors.success,
+        error: colors.error,
+        warning: colors.warning,
+        info: colors.info,
     }[toast.type];
     return (_jsx(Animated.View, { style: [
             styles.toast,
@@ -57,7 +62,7 @@ export function useToast() {
     }
     return context;
 }
-const styles = StyleSheet.create({
+const useToastStyles = createThemedStyles(_colors => ({
     toastContainer: {
         position: 'absolute',
         left: 16,
@@ -84,4 +89,4 @@ const styles = StyleSheet.create({
         fontSize: 15,
         fontWeight: '500',
     },
-});
+}));

package/dist/src/theme/colors.d.ts

@@ -47,9 +47,14 @@ export interface ThemeColors {
     surface: string;
     surfaceSecondary: string;
     error: string;
+    errorBg: string;
     success: string;
+    successBg: string;
+    successText: string;
     warning: string;
     info: string;
+    invertedText: string;
+    invertedBackground: string;
 }
 export declare const lightColors: ThemeColors;
 export declare const darkColors: ThemeColors;

package/dist/src/theme/colors.js

@@ -47,9 +47,14 @@ export const lightColors = {
     surface: palette.white,
     surfaceSecondary: palette.gray[100],
     error: palette.error,
+    errorBg: '#fef2f2',
     success: palette.success,
+    successBg: '#dcfce7',
+    successText: '#16a34a',
     warning: palette.warning,
     info: palette.info,
+    invertedText: palette.white,
+    invertedBackground: palette.black,
 };
 export const darkColors = {
     primary: palette.primary[400],
@@ -63,7 +68,12 @@ export const darkColors = {
     surface: palette.gray[800],
     surfaceSecondary: palette.gray[700],
     error: palette.error,
+    errorBg: '#451a1a',
     success: palette.success,
+    successBg: '#052e16',
+    successText: '#86efac',
     warning: palette.warning,
     info: palette.info,
+    invertedText: palette.black,
+    invertedBackground: palette.white,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/building_blocks_rn",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
   "type": "module",
   "main": "./dist/index.js",