@korsolutions/ui 0.0.41 → 0.0.43

package/src/themes/default/colors.ts

@@ -1,45 +1,45 @@
 import type { Colors } from "../types";
 
 export const lightColors: Colors = {
-  background: "hsla(223.81, 100%, 100%, 1)",
-  foreground: "hsla(223.81, 0%, 3.94%, 1)",
+  background: "hsla(224, 0%, 100%, 1)",
+  foreground: "hsla(224, 0%, 4%, 1)",
 
-  primary: "hsla(223.81, 0%, 9.05%, 1)",
-  primaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+  primary: "hsla(224, 0%, 9%, 1)",
+  primaryForeground: "hsla(224, 0%, 98%, 1)",
 
-  secondary: "hsla(223.81, 0%, 96.06%, 1)",
-  secondaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+  secondary: "hsla(224, 0%, 96%, 1)",
+  secondaryForeground: "hsla(224, 0%, 9%, 1)",
 
-  muted: "hsla(223.81, 0%, 96.06%, 1)",
-  mutedForeground: "hsla(223.81, 0%, 45.15%, 1)",
+  muted: "hsla(224, 0%, 96%, 1)",
+  mutedForeground: "hsla(224, 0%, 45%, 1)",
 
-  border: "hsla(223.81, 0%, 89.82%, 1)",
-  surface: "hsla(223.81, 100%, 100%, 1)",
+  border: "hsla(224, 0%, 90%, 1)",
+  surface: "hsla(224, 0%, 100%, 1)",
 
-  danger: "hsla(0, 84.2%, 60.2%, 1)",
-  success: "hsla(173, 58%, 39%, 1)",
-  warning: "hsla(43, 74%, 66%, 1)",
-  info: "hsla(197, 37%, 24%, 1)",
+  danger: "hsla(352, 100%, 41%, 1)",
+  success: "hsla(227, 70%, 40%, 1)",
+  warning: "hsla(212, 100%, 79%, 1)",
+  info: "hsla(221, 86%, 54%, 1)",
 };
 
 export const darkColors: Colors = {
-  background: "hsla(223.81, 0%, 3.94%, 1)",
-  foreground: "hsla(223.81, 0%, 98.03%, 1)",
+  background: "hsla(224, 0%, 4%, 1)",
+  foreground: "hsla(224, 0%, 98%, 1)",
 
-  primary: "hsla(223.81, 0%, 89.82%, 1)",
-  primaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+  primary: "hsla(224, 0%, 90%, 1)",
+  primaryForeground: "hsla(224, 0%, 9%, 1)",
 
-  secondary: "hsla(223.81, 0%, 14.94%, 1)",
-  secondaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+  secondary: "hsla(224, 0%, 15%, 1)",
+  secondaryForeground: "hsla(224, 0%, 98%, 1)",
 
-  muted: "hsla(223.81, 0%, 14.94%, 1)",
-  mutedForeground: "hsla(223.81, 0%, 63.02%, 1)",
+  muted: "hsla(224, 0%, 15%, 1)",
+  mutedForeground: "hsla(224, 0%, 63%, 1)",
 
-  border: "hsla(223.81, 0%, 15.51%, 1)",
-  surface: "hsla(223.81, 0%, 9.05%, 1)",
+  border: "hsla(224, 0%, 16%, 1)",
+  surface: "hsla(224, 0%, 9%, 1)",
 
-  danger: "hsla(0, 62.8%, 30.6%, 1)",
-  success: "hsla(160, 60%, 45%, 1)",
-  warning: "hsla(30, 80%, 55%, 1)",
-  info: "hsla(220, 70%, 50%, 1)",
+  danger: "hsla(359, 100%, 70%, 1)",
+  success: "hsla(227, 70%, 40%, 1)",
+  warning: "hsla(212, 100%, 79%, 1)",
+  info: "hsla(221, 86%, 54%, 1)",
 };

package/src/themes/provider.tsx

@@ -1,7 +1,8 @@
 import { createContext, type PropsWithChildren, useContext, useEffect, useState } from "react";
 import { useColorScheme } from "react-native";
-import { themes } from "./themes";
-import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeName } from "./types";
+import { defaultThemeAssets } from "./default";
+import type { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeAssets } from "./types";
+import { mergeThemeAssets } from "./utils";
 
 interface ThemeContext {
   colors: Colors;
@@ -11,20 +12,23 @@ interface ThemeContext {
   letterSpacing: LetterSpacing;
   fontSize: FontSize;
   setColorScheme: (scheme: ColorScheme) => void;
-  setTheme: (themeName: ThemeName) => void;
-  themeName: ThemeName;
 }
 
 const ThemeContext = createContext<ThemeContext | null>(null);
 
-export const ThemeProvider = (props: PropsWithChildren) => {
-  const [themeName, setTheme] = useState<ThemeName>("default");
+export interface ThemeProviderProps extends PropsWithChildren {
+  theme?: Partial<ThemeAssets>;
+}
+
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  const { children, theme } = props;
 
   const systemColorScheme = useColorScheme();
   const [colorScheme, setColorScheme] = useState<ColorScheme>(systemColorScheme === "dark" ? "dark" : "light");
 
-  const themesAssets = themes[themeName];
-  const colors = themesAssets.colors[colorScheme];
+  const themeAssets = theme ? mergeThemeAssets(defaultThemeAssets, theme) : defaultThemeAssets;
+
+  const colors = themeAssets.colors[colorScheme];
 
   useEffect(() => {
     if (systemColorScheme) {
@@ -35,18 +39,16 @@ export const ThemeProvider = (props: PropsWithChildren) => {
   return (
     <ThemeContext.Provider
       value={{
-        themeName,
-        setTheme,
         colorScheme,
         setColorScheme,
         colors,
-        radius: themesAssets.radius,
-        fontFamily: themesAssets.fontFamily,
-        letterSpacing: themesAssets.letterSpacing,
-        fontSize: themesAssets.fontSize,
+        radius: themeAssets.radius,
+        fontFamily: themeAssets.fontFamily,
+        letterSpacing: themeAssets.letterSpacing,
+        fontSize: themeAssets.fontSize,
       }}
     >
-      {props.children}
+      {children}
     </ThemeContext.Provider>
   );
 };

package/src/themes/types.ts

@@ -1,4 +1,3 @@
-export type ThemeName = "default";
 export type ColorScheme = "light" | "dark";
 
 type Color = `hsla(${number}, ${number}%, ${number}%, ${number})`;

package/src/themes/utils.ts

@@ -0,0 +1,14 @@
+import type { ThemeAssets } from "./types";
+
+export function mergeThemeAssets(base: ThemeAssets, override: Partial<ThemeAssets>): ThemeAssets {
+  return {
+    colors: {
+      light: { ...base.colors.light, ...override.colors?.light },
+      dark: { ...base.colors.dark, ...override.colors?.dark },
+    },
+    radius: override.radius ?? base.radius,
+    fontFamily: override.fontFamily ?? base.fontFamily,
+    letterSpacing: override.letterSpacing ?? base.letterSpacing,
+    fontSize: override.fontSize ?? base.fontSize,
+  };
+}

package/dist/module/themes/themes.js

@@ -1,7 +0,0 @@
-"use strict";
-
-import { defaultThemeAssets } from "./default/index.js";
-export const themes = {
-  default: defaultThemeAssets
-};
-//# sourceMappingURL=themes.js.map

package/dist/module/themes/themes.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["defaultThemeAssets","themes","default"],"sourceRoot":"../../../src","sources":["themes/themes.ts"],"mappings":";;AAAA,SAASA,kBAAkB;AAG3B,OAAO,MAAMC,MAAsC,GAAG;EACpDC,OAAO,EAAEF;AACX,CAAC","ignoreList":[]}

package/dist/typescript/src/themes/themes.d.ts

@@ -1,3 +0,0 @@
-import type { ThemeAssets, ThemeName } from "./types";
-export declare const themes: Record<ThemeName, ThemeAssets>;
-//# sourceMappingURL=themes.d.ts.map

package/dist/typescript/src/themes/themes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../src/themes/themes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEtD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAEjD,CAAC"}

package/src/themes/themes.ts

@@ -1,6 +0,0 @@
-import { defaultThemeAssets } from "./default";
-import type { ThemeAssets, ThemeName } from "./types";
-
-export const themes: Record<ThemeName, ThemeAssets> = {
-  default: defaultThemeAssets,
-};