related-ui-components 1.1.6

package/src/theme/Colors.ts

@@ -0,0 +1,107 @@
+// Define theme type
+export interface ThemeType {
+  // Core
+  background: string; // Main screen background
+  surface: string; // Background for components like cards, dialogs, sheets
+  primary: string; // Main accent color for interactive elements
+  secondary: string; // Secondary accent color or for elements on primary
+  error: string; // Error states, destructive actions
+  success: string; // Success states
+  warning: string; // Warning states
+  info: string; // Informational states
+
+  // Text & Icons ("On" Colors)
+  text: string; // Default text color (on background/surface)
+  onPrimary: string; // Text/icon color on primary background
+  onSecondary: string; // Text/icon color on secondary background
+  onError: string; // Text/icon color on error background
+  onBackground: string; // Text/icon color explicitly for background (often same as text)
+  onSurface: string; // Text/icon color explicitly for surface (often same as text)
+
+  // Borders & Dividers
+  border: string; // Borders for inputs, cards, etc.
+  divider: string; // Separators, lines
+
+  // UI States
+  disabled: string; // Disabled state elements (background or text)
+
+  // Form Specific
+  inputBackground: string; // Background of text inputs
+  inputText: string; // Color of text entered into inputs
+  labelText: string; // Color of labels for inputs
+  placeholderText: string; // Color of placeholder text in inputs
+  helper: string; // Helper text below inputs
+
+  // Allow for additional keys if needed later
+  [key: string]: string;
+}
+
+// Updated Light Theme - True black and white oriented, less muted
+export const lightTheme: ThemeType = {
+  // Core
+  background: "#F8F8F8", // Very light pure gray
+  surface: "#FFFFFF", // Pure white for cards/dialogs
+  primary: "#333333", // Pure dark gray, almost black
+  secondary: "#777777", // Medium gray without color tint
+  error: "#E53935", // Vibrant but pure red
+  success: "#43A047", // Vibrant but pure green
+  warning: "#F57C00", // Vibrant but pure orange
+  info: "#2196F3", // Vibrant but pure blue
+
+  // Text & Icons ("On" Colors)
+  text: "#1A1A1A", // Nearly black for text
+  onPrimary: "#FFFFFF", // White text on primary color
+  onSecondary: "#FFFFFF", // White text on secondary color
+  onError: "#FFFFFF", // White text on error color
+  onBackground: "#1A1A1A", // Nearly black text on background
+  onSurface: "#1A1A1A", // Nearly black text on surface
+
+  // Borders & Dividers
+  border: "#DDDDDD", // Light gray border without tint
+  divider: "#EEEEEE", // Very light gray divider without tint
+
+  // UI States
+  disabled: "#BBBBBB", // Medium-light gray for disabled states
+
+  // Form Specific
+  inputBackground: "#FFFFFF", // White input background
+  inputText: "#1A1A1A", // Nearly black for input text
+  labelText: "#444444", // Dark gray for labels
+  placeholderText: "#999999", // Medium gray for placeholders
+  helper: "#777777", // Medium gray for helper text
+};
+
+// Updated Dark Theme - True black and white oriented, less muted
+export const darkTheme: ThemeType = {
+  // Core
+  background: "#121212", // Very dark gray, nearly black
+  surface: "#1E1E1E", // Dark gray for surface elements
+  primary: "#E0E0E0", // Light gray without tint
+  secondary: "#757575", // Medium gray without tint
+  error: "#F44336", // Vibrant but pure red
+  success: "#4CAF50", // Vibrant but pure green
+  warning: "#FF9800", // Vibrant but pure orange
+  info: "#2196F3", // Vibrant but pure blue
+
+  // Text & Icons ("On" Colors)
+  text: "#F5F5F5", // Very light gray, nearly white
+  onPrimary: "#121212", // Nearly black text on primary
+  onSecondary: "#FFFFFF", // White text on secondary
+  onError: "#FFFFFF", // White text on error
+  onBackground: "#F5F5F5", // Nearly white text on background
+  onSurface: "#F5F5F5", // Nearly white text on surface
+
+  // Borders & Dividers
+  border: "#333333", // Dark gray border
+  divider: "#383838", // Slightly lighter dark gray divider
+
+  // UI States
+  disabled: "#5D5D5D", // Medium dark gray for disabled states
+
+  // Form Specific
+  inputBackground: "#1E1E1E", // Matches surface
+  inputText: "#F5F5F5", // Nearly white for input text
+  labelText: "#E0E0E0", // Light gray for labels
+  placeholderText: "#9E9E9E", // Medium gray for placeholders
+  helper: "#9E9E9E", // Medium gray for helper text
+};

package/src/theme/ThemeContext.tsx

@@ -0,0 +1,46 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+
+import { useColorScheme } from "react-native";
+import { lightTheme, ThemeType, darkTheme } from "./Colors";
+
+export const ThemeContext = createContext(lightTheme);
+
+// Define props for ThemeProvider
+interface ThemeProviderProps {
+  children: ReactNode;
+  customLightTheme?: Partial<ThemeType>;
+  customDarkTheme?: Partial<ThemeType>;
+  dark?: boolean;
+}
+
+// Provider component
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  customLightTheme,
+  customDarkTheme,
+  dark
+}) => {
+  // Use system preference as initial value
+  const [isDark, setIsDark] = useState<boolean>(dark || useColorScheme() === "dark");
+
+  // Allow custom themes to override defaults
+  const [themes, setThemes] = useState({
+    light: { ...lightTheme, ...customLightTheme } as ThemeType,
+    dark: { ...darkTheme, ...customDarkTheme } as ThemeType,
+  });
+
+  const value = isDark ? themes.dark : themes.light;
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};
+
+// Hook for easy access
+export const useTheme = () => useContext(ThemeContext);

package/src/theme/index.ts

@@ -0,0 +1,2 @@
+export * from "./ThemeContext";
+export * from "./Colors";