@servesall/atoms 1.1.23 → 1.1.25

package/src/Theme/colorScheme.web.js

@@ -0,0 +1,34 @@
+"use client";
+import * as React from "react";
+
+export function useColorScheme() {
+  const [colorScheme, setColorScheme] = React.useState("light");
+
+  React.useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => setColorScheme(media.matches ? "dark" : "light");
+
+    // Set initial on mount
+    handleChange();
+
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", handleChange);
+      return () => media.removeEventListener("change", handleChange);
+    }
+
+    // Fallback for older browsers without addEventListener
+    if ("onchange" in media) {
+      media.onchange = handleChange;
+      return () => {
+        media.onchange = null;
+      };
+    }
+
+    // No supported listener API; nothing to clean up
+    return;
+  }, []);
+
+  return colorScheme;
+}

package/src/Theme/definitions/colors.js

@@ -1,70 +1,112 @@
+const colorMap = {
+  white: "#FFFFFF",
+  hotPink: "#E576A2",
+  lightPink: "#FA9EBC",
+  salmonPink: "#FFD1E0",
+  skyBlue: "#3187F6",
+  lightBlue: "#CFEAFF",
+  greyBlue: "#212E66",
+  blue: "#0B1957",
+  darkBlue: "#060630",
+};
+
 const colors = {
-  // Whites & Grays
-  color1: "#FFFFFF", // Pure white
-  color7: "#dfe6e9", // Light gray
-  color8: "#F8F9FB", // Very light gray
-  color10: "#F2F3F7", // Another light gray
-  color16: "#636e72", // Dark gray
-  greyText: "#b2bec3", // Gray for text
-  greyButton: "#94A3A9", // Gray for buttons
-  color2: "#2d3436", // Almost black
+  backwardCompatibility: {
+    // Whites & Grays
+    color1: "#FFFFFF", // Pure white
+    color7: "#dfe6e9", // Light gray
+    color8: "#F8F9FB", // Very light gray
+    color10: "#F2F3F7", // Another light gray
+    color16: "#636e72", // Dark gray
+    greyText: "#b2bec3", // Gray for text
+    greyButton: "#94A3A9", // Gray for buttons
+    color2: "#2d3436", // Almost black
+
+    // Blues
+    color3: "#74b9ff", // Light blue
+    color3light: "#E1F0FF", // Very light blue
+    color4: "#0984e3", // Medium blue
+    blue: "#74b9ff", // Light blue (duplicate)
+    blueLight: "#E1F0FF", // Very light blue (duplicate)
+    darkBlue: "#0984e3", // Medium blue (duplicate)
+    darkBlueLight: "#CFEAFF", // Pale blue
+    color15: "#00cec9", // Cyan
+    color18: "#81ecec", // Light cyan
+
+    // Yellows
+    color5: "#ffeaa7", // Light yellow
+    color5light: "#FFF9E5", // Very light yellow
+    color5border: "#E4E0D2", // Yellow border
+    darkYellow: "#fdcb6e", // Dark yellow
+    darkYellowLight: "#FFF7E8", // Light yellow
+    darkYellowDark: "#8C6F39", // Brown yellow
+    darkYellowGray: "#ECE5D8", // Grayish yellow
+
+    // Oranges & Browns
+    color9: "#FFA15F", // Orange
+    color9light: "#F9F0EA", // Light orange
+    color9dark: "#804F2D", // Dark brown
+    color9border: "#DDD1C9", // Orange border
+    color13: "#fab1a0", // Peach
+    orange: "#FFA15F", // Orange (duplicate)
+    orangeLight: "#FFFAF6", // Light orange
+    orangeDark: "#3D1901", // Very dark brown
+    orangeGray: "#EEE5DE", // Grayish orange
+
+    // Reds
+    color6: "#ff7675", // Red
+    color6light: "#FFDCDB", // Light red
+    red: "#ff7675", // Red (duplicate)
+    redlight: "#fff0ed", // Very light red
+    redDark: "#9C4140", // Dark red
+    redBorder: "#D2BBBB", // Red border
 
-  // Blues
-  color3: "#74b9ff", // Light blue
-  color3light: "#E1F0FF", // Very light blue
-  color4: "#0984e3", // Medium blue
-  blue: "#74b9ff", // Light blue (duplicate)
-  blueLight: "#E1F0FF", // Very light blue (duplicate)
-  darkBlue: "#0984e3", // Medium blue (duplicate)
-  darkBlueLight: "#CFEAFF", // Pale blue
-  color15: "#00cec9", // Cyan
-  color18: "#81ecec", // Light cyan
+    // Greens
+    color11: "#00b894", // Green
+    color11light: "#EEFFFC", // Light green
+    color11border: "#D2E3E0", // Green border
+    color14: "#00b894", // Green (duplicate)
+    green: "#55efc4", // Light green
+    greenLight: "#F3FFFC", // Very light green
+    greenDark: "#236A56", // Dark green
 
-  // Yellows
-  color5: "#ffeaa7", // Light yellow
-  color5light: "#FFF9E5", // Very light yellow
-  color5border: "#E4E0D2", // Yellow border
-  darkYellow: "#fdcb6e", // Dark yellow
-  darkYellowLight: "#FFF7E8", // Light yellow
-  darkYellowDark: "#8C6F39", // Brown yellow
-  darkYellowGray: "#ECE5D8", // Grayish yellow
+    // Purples
+    color12: "#6c5ce7", // Purple
+    color12light: "#F5F4FF", // Light purple
+    color12border: "#DFDDEA", // Purple border
+    color12dark: "#584E74", // Dark purple
+    color17: "#6c5ce7", // Purple (duplicate)
+    purple: "#6c5ce7", // Purple (duplicate)
+    purpleLight: "#F9F8FF", // Light purple
+    purpleDark: "#372E78", // Dark purple
+  },
 
-  // Oranges & Browns
-  color9: "#FFA15F", // Orange
-  color9light: "#F9F0EA", // Light orange
-  color9dark: "#804F2D", // Dark brown
-  color9border: "#DDD1C9", // Orange border
-  color13: "#fab1a0", // Peach
-  orange: "#FFA15F", // Orange (duplicate)
-  orangeLight: "#FFFAF6", // Light orange
-  orangeDark: "#3D1901", // Very dark brown
-  orangeGray: "#EEE5DE", // Grayish orange
+  // new colors
 
-  // Reds
-  color6: "#ff7675", // Red
-  color6light: "#FFDCDB", // Light red
-  red: "#ff7675", // Red (duplicate)
-  redlight: "#fff0ed", // Very light red
-  redDark: "#9C4140", // Dark red
-  redBorder: "#D2BBBB", // Red border
+  ...colorMap,
 
-  // Greens
-  color11: "#00b894", // Green
-  color11light: "#EEFFFC", // Light green
-  color11border: "#D2E3E0", // Green border
-  color14: "#00b894", // Green (duplicate)
-  green: "#55efc4", // Light green
-  greenLight: "#F3FFFC", // Very light green
-  greenDark: "#236A56", // Dark green
+  // Light Mode
+  lightMode: {
+    background: colorMap.salmonPink,
+    primaryButton: colorMap.darkBlue,
+    primaryButtonText: colorMap.salmonPink,
+    secondaryButton: colorMap.skyBlue,
+    secondaryButtonText: colorMap.salmonPink,
+    primaryText: colorMap.blue,
+    secondaryText: colorMap.greyBlue,
+    border: colorMap.greyBlue,
+  },
 
-  // Purples
-  color12: "#6c5ce7", // Purple
-  color12light: "#F5F4FF", // Light purple
-  color12border: "#DFDDEA", // Purple border
-  color12dark: "#584E74", // Dark purple
-  color17: "#6c5ce7", // Purple (duplicate)
-  purple: "#6c5ce7", // Purple (duplicate)
-  purpleLight: "#F9F8FF", // Light purple
-  purpleDark: "#372E78", // Dark purple
+  // Dark Mode
+  darkMode: {
+    background: colorMap.darkBlue,
+    primaryButton: colorMap.hotPink,
+    primaryButtonText: colorMap.darkBlue,
+    secondaryButton: colorMap.skyBlue,
+    secondaryButtonText: colorMap.salmonPink,
+    primaryText: colorMap.salmonPink,
+    secondaryText: colorMap.lightPink,
+    border: colorMap.lightPink,
+  },
 };
 export default colors;

package/src/Theme/definitions/fonts.import.js

@@ -0,0 +1,21 @@
+import { createGlobalStyle } from "styled-components";
+import EestiRegular from "../../../assets/fonts/GTEestiProDisplay-Regular.ttf";
+import EestiBold from "../../../assets/fonts/GTEestiProDisplay-Bold.ttf";
+
+export const FontStyles = createGlobalStyle`
+  @font-face {
+    font-family: 'Eesti';
+    src: url(${EestiRegular}) format('truetype');
+    font-weight: 400;
+  }
+
+  @font-face {
+    font-family: 'Eesti';
+    src: url(${EestiBold}) format('truetype');
+    font-weight: 700;
+  }
+
+  body {
+    font-family: 'Eesti', sans-serif;
+  }
+`;

package/src/Theme/definitions/fonts.js

@@ -10,7 +10,9 @@ const fonts = {
   lhLarge: "39px",
   xlarge: "66px",
   lhXlarge: "69px",
-  fontFamily1: "Cochin",
-  fontFamily2: "Cochin",
+  fontFamily1: "Eesti",
+  fontFamily2: "Eesti",
+  fontWeight1: "400",
+  fontWeight2: "700",
 };
 export default fonts;

package/src/Theme/definitions/index.js

@@ -1,8 +1,14 @@
-import colors from './colors';
-import fonts from './fonts';
-import layout from './layout';
-const theme = { ...colors,
-  ...fonts,
-  ...layout
+import colors from "./colors";
+import fonts from "./fonts";
+import layout from "./layout";
+
+const theme = (colorScheme) => {
+  return {
+    ...fonts,
+    ...layout,
+    ...colors.backwardCompatibility,
+    ...(colorScheme === "dark" ? colors.darkMode : colors.lightMode),
+  };
 };
+
 export { theme };

package/src/Theme/definitions/layout.js

@@ -4,5 +4,8 @@ const layout = {
   borderRadius: "8px",
   borderRadiusMedium: "16px",
   borderRadiusSmall: "8px",
+  webPageMarginBig: "100px",
+  webPageMarginMedium: "50px",
+  webPageMarginSmall: "16px",
 };
 export default layout;

package/src/Theme/index.js

@@ -1,21 +1,25 @@
-import React from 'react';
-import { ThemeProvider, ThemeContext } from 'styled-components/native';
-import { theme as defaultTheme } from './definitions';
+import React from "react";
+import { Appearance } from "react-native";
+import { ThemeProvider, ThemeContext } from "styled-components/native";
+import { theme as defaultTheme } from "./definitions";
 const ThemeWrapperContext = React.createContext();
 
-const ThemeWrapper = ({children, theme = {}}) => {
-    return (
-        <ThemeWrapperContext.Provider
-            value={{...theme}}>
-            <ThemeProvider theme={{...defaultTheme, ...theme}}>
-                {children}
-            </ThemeProvider>
-        </ThemeWrapperContext.Provider>
-    );
+const colorScheme = Appearance.getColorScheme();
+
+const ThemeWrapper = ({ children, theme = {} }) => {
+  return (
+    <ThemeWrapperContext.Provider value={{ ...theme }}>
+      <ThemeProvider
+        theme={{ ...defaultTheme(colorScheme), ...theme, colorScheme }}
+      >
+        {children}
+      </ThemeProvider>
+    </ThemeWrapperContext.Provider>
+  );
 };
 
 const useThemeContext = () => {
-    return React.useContext(ThemeContext);
+  return React.useContext(ThemeContext);
 };
 
-export {ThemeContext, ThemeWrapper, useThemeContext};
+export { ThemeContext, ThemeWrapper, useThemeContext };

package/src/Theme/index.web.js

@@ -0,0 +1,29 @@
+// prettier-ignore
+"use client";
+import React from "react";
+import { ThemeProvider, ThemeContext } from "styled-components";
+import { theme as defaultTheme } from "./definitions";
+import { FontStyles } from "./definitions/fonts.import";
+import { useColorScheme } from "./colorScheme.web";
+
+const ThemeWrapperContext = React.createContext();
+
+const ThemeWrapper = ({ children, theme = {} }) => {
+  const colorScheme = useColorScheme();
+  return (
+    <ThemeWrapperContext.Provider value={{ ...theme }}>
+      <ThemeProvider
+        theme={{ ...defaultTheme(colorScheme), ...theme, colorScheme }}
+      >
+        <FontStyles />
+        {children}
+      </ThemeProvider>
+    </ThemeWrapperContext.Provider>
+  );
+};
+
+const useThemeContext = () => {
+  return React.useContext(ThemeContext);
+};
+
+export { ThemeContext, ThemeWrapper, useThemeContext };

package/src/index.js

@@ -28,6 +28,8 @@ import {
   BorderTop,
   BorderBox,
   ImageWrapper,
+  Background,
+  RoundedBox,
 } from "./Layout";
 import {
   Input,
@@ -95,6 +97,8 @@ export {
   BorderTop,
   BorderBox,
   ImageWrapper,
+  Background,
+  RoundedBox,
   Input,
   InputNormal,
   AnimatedPlaceholder,

package/src/index.web.js

@@ -0,0 +1,134 @@
+import { ThemeWrapper, useThemeContext } from "./Theme/index.web";
+import { H1, H2, H3, H4, H5, P, Span } from "./Text";
+import Icon from "./Icons";
+
+import {
+  Center,
+  CenterLeft,
+  CenterRight,
+  Margin,
+  MarginHorizontal,
+  MarginVertical,
+  MarginBottom,
+  MarginTop,
+  MarginRight,
+  MarginLeft,
+  Padding,
+  PaddingHorizontal,
+  PaddingVertical,
+  PaddingTop,
+  PaddingBottom,
+  PaddingLeft,
+  PaddingRight,
+  Row,
+  Stretch,
+  FullScreen,
+  WebSmallWrapper,
+  Box,
+  RoundedTopBox,
+  BorderBottom,
+  BorderTop,
+  BorderBox,
+  ImageWrapper,
+  Background,
+  RoundedBox,
+} from "./Layout";
+
+/*
+import {
+  Input,
+  AnimatedPlaceholder,
+  InputOtp,
+  InputNormal,
+  InputPhone,
+} from "./Inputs";
+import {
+  TextBtn,
+  RoundedBtn,
+  RoundBtn,
+  FloatingBtn,
+  AnimatedButton,
+  FeedbackButton,
+  AnimatedRoundedButton,
+} from "./Buttons";
+import Loader from "./Loader";
+import Success from "./Success";
+import Error from "./Error";
+import Icon from "./Icons";
+import FlatList from "./FlatList";
+import Header from "./Header";
+import BottomNavBar from "./BottomNavBar";
+import Switch from "./Switch";
+import SwipeButton from "./SlideToConfirm";
+import ErrorText from "./ErrorText";
+import CountryList from "./CountryFlatList";
+import SplashScreen from "./SplashScreen";
+*/
+
+export {
+  ThemeWrapper,
+  useThemeContext,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  P,
+  Span,
+  Center,
+  CenterLeft,
+  CenterRight,
+  Margin,
+  MarginHorizontal,
+  MarginVertical,
+  MarginBottom,
+  MarginTop,
+  MarginRight,
+  MarginLeft,
+  Padding,
+  PaddingHorizontal,
+  PaddingVertical,
+  PaddingTop,
+  PaddingBottom,
+  PaddingLeft,
+  PaddingRight,
+  Row,
+  Stretch,
+  FullScreen,
+  WebSmallWrapper,
+  Box,
+  RoundedTopBox,
+  BorderBottom,
+  BorderTop,
+  BorderBox,
+  ImageWrapper,
+  Background,
+  RoundedBox,
+  Icon,
+  /*
+  Input,
+  InputNormal,
+  AnimatedPlaceholder,
+  InputOtp,
+  InputPhone,
+  TextBtn,
+  RoundedBtn,
+  RoundBtn,
+  FloatingBtn,
+  AnimatedButton,
+  FeedbackButton,
+  Loader,
+  Success,
+  Error,
+  Icon,
+  FlatList,
+  Header,
+  BottomNavBar,
+  Switch,
+  SwipeButton,
+  ErrorText,
+  AnimatedRoundedButton,
+  CountryList,
+  SplashScreen,
+  */
+};