@hoddy-ui/core 1.0.93 → 1.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/hooks.ts

@@ -15,6 +15,7 @@ export const useTheme = () => {
 };
 export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
   const colors = useColors();
+  const theme = useTheme();
   const options: any = {
     stack: {
       headerShown: false,
@@ -36,7 +37,7 @@ export const useNavScreenOptions = (type: "stack" | "tab" | "drawer") => {
       headerShown: false,
       headerTintColor: colors.dark.main,
       tabBarStyle: {
-        borderTopColor: colors.white[2],
+        borderTopColor: theme === "dark" ? colors.light.main : colors.white[2],
         borderTopWidth: 1,
         // shadowColor: "#000",
         // shadowOffset: { height: -3, width: 0 },

package/src/theme/colors.ts

@@ -7,62 +7,66 @@ export const setExtraColors = (c: extraColorTypes) => (extraColors = c);
 export default function colors(theme: ThemeTypes) {
   const lightColors = {
     white: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#bbb",
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#bbbbbb",
+      ...extraColors?.light?.white,
     },
     black: {
-      1: "#888",
-      2: "#777",
-      3: "#555",
-      4: "#333",
-      5: "#000",
+      1: "#888888",
+      2: "#777777",
+      3: "#555555",
+      4: "#333333",
+      5: "#000000",
+      ...extraColors?.light?.black,
     },
   };
 
   const darkColors = {
     black: {
-      1: "#fff",
+      1: "#ffffff",
       2: "#f7f7f7",
-      3: "#eee",
-      4: "#ddd",
-      5: "#aaa",
+      3: "#eeeeee",
+      4: "#dddddd",
+      5: "#aaaaaa",
+      ...extraColors?.dark?.black,
     },
     white: {
-      1: "#000",
-      2: "#222",
-      3: "#333",
-      4: "#444",
-      5: "#555",
+      1: "#060606",
+      2: "#222222",
+      3: "#333333",
+      4: "#444444",
+      5: "#555555",
+      ...extraColors?.dark?.white,
     },
     dark: {
       main: "#f2f3f4",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.dark?.dark,
     },
     light: {
-      main: "#111",
-      light: "#555",
-      dark: "#333",
-      text: "#fff",
+      main: "#111111",
+      light: "#555555",
+      dark: "#333333",
+      text: "#ffffff",
       ...extraColors?.dark?.light,
     },
     textSecondary: {
-      main: "#666",
-      light: "#777",
-      dark: "#444",
-      text: "#fff",
+      main: "#666666",
+      light: "#777777",
+      dark: "#444444",
+      text: "#ffffff",
       ...extraColors?.dark?.textSecondary,
     },
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary,
       ...extraColors?.dark?.primary,
     },
@@ -72,74 +76,73 @@ export default function colors(theme: ThemeTypes) {
   return {
     ...extraColors[theme],
     primary: {
-      main: "#f80",
-      light: "#FEFFD3",
-      dark: "#fa0",
-      text: "#fff",
+      main: "#ff8800",
+      light: "#feffd3",
+      dark: "#ffaa00",
+      text: "#ffffff",
       ...extraColors?.light?.primary,
     },
     secondary: {
-      main: "#f11",
-      light: "#f43",
-      dark: "#d00",
-      text: "#fff",
+      main: "#ff1111",
+      light: "#ff4433",
+      dark: "#dd0000",
+      text: "#ffffff",
       ...extraColors?.light?.secondary,
     },
     light: {
-      main: "#fff",
-      light: "#fff",
-      dark: "#ddd",
-      text: "#000",
+      main: "#ffffff",
+      light: "#ffffff",
+      dark: "#dddddd",
+      text: "#000000",
       ...extraColors?.light?.light,
     },
     dark: {
-      main: "#000",
-      light: "#777",
-      dark: "#111",
-      text: "#fff",
+      main: "#000000",
+      light: "#777777",
+      dark: "#111111",
+      text: "#ffffff",
       ...extraColors?.light?.dark,
     },
     textSecondary: {
-      main: "#aaa",
-      light: "#bbb",
-      dark: "#777",
-      text: "#123",
+      main: "#aaaaaa",
+      light: "#bbbbbb",
+      dark: "#777777",
+      text: "#112233",
       ...extraColors?.light?.textSecondary,
     },
     blue: {
-      main: "#09F",
-      light: "#39f",
-      dark: "#028",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#3399ff",
+      dark: "#002288",
+      text: "#ffffff",
       ...extraColors?.light?.blue,
     },
     info: {
-      main: "#09f",
-      light: "#3af",
-      dark: "#08a",
-      text: "#fff",
+      main: "#0099ff",
+      light: "#33aaff",
+      dark: "#0088aa",
+      text: "#ffffff",
       ...extraColors?.light?.info,
     },
     success: {
-      main: "#0a4",
-      text: "#fff",
-      light: "#5c3",
-      dark: "#062",
+      main: "#00aa44",
+      text: "#ffffff",
+      light: "#55cc33",
+      dark: "#006622",
       ...extraColors?.light?.success,
     },
-
     warning: {
-      main: "#fa2",
-      light: "#fc7",
-      dark: "#f90",
-      text: "#fff",
+      main: "#ffaa22",
+      light: "#ffcc77",
+      dark: "#ff9900",
+      text: "#ffffff",
       ...extraColors?.light?.warning,
     },
     error: {
-      main: "#D22",
-      text: "#fff",
-      light: "#f43",
-      dark: "#a20",
+      main: "#dd2222",
+      text: "#ffffff",
+      light: "#ff4433",
+      dark: "#aa2200",
       ...extraColors?.light?.error,
     },
     ...dynamicColors,

package/src/types.ts

@@ -30,6 +30,7 @@ export type extraColorTypes = {
       light?: string;
       dark?: string;
       text?: string;
+      [key: number]: string;
     };
   };
   light?: {
@@ -38,6 +39,7 @@ export type extraColorTypes = {
       light?: string;
       dark?: string;
       text?: string;
+      [key: number]: string;
     };
   };
 };