@impulse-ui-native/theme 1.0.0

package/src/constants/style.constants.ts

@@ -0,0 +1,71 @@
+import { StyleProps } from "../types";
+
+export const StylePropsSet = new Set<keyof StyleProps>([
+  // Spacing
+  "margin",
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "marginHorizontal",
+  "marginVertical",
+  "padding",
+  "paddingTop",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingHorizontal",
+  "paddingVertical",
+
+  // Appearance
+  "color",
+  "backgroundColor",
+  "opacity",
+  "borderRadius",
+  "borderColor",
+  "borderWidth",
+  "borderStyle",
+  "shadowColor",
+  "shadowOpacity",
+  "shadowRadius",
+  "shadowOffset",
+  "elevation",
+
+  // Typography (TextStyle)
+  "fontSize",
+  "fontFamily",
+  "fontWeight",
+  "fontStyle",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textDecorationLine",
+  "textDecorationStyle",
+  "textDecorationColor",
+  "textTransform",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection",
+
+  // Flex (ViewStyle)
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "flexDirection",
+  "flexWrap",
+  "justifyContent",
+  "alignItems",
+  "alignSelf",
+  "alignContent",
+  "gap",
+  "rowGap",
+  "columnGap",
+
+  // Positioning (commonly used with flex layouts)
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+]);

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export { useBorder } from "./use-border.hook";
+export { useColors } from "./use-colors.hook";
+export { useRadii } from "./use-radii.hook";
+export { useSpace } from "./use-space.hook";
+export { useStyleProps } from "./use-style-props.hook";
+export { useTheme } from "./use-theme.hook";
+export { useThemedStyles } from "./use-themed-styles";

package/src/hooks/use-border.hook.ts

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import { useThemeContext } from "../providers";
+import { BorderSizes } from "../types";
+
+export function useBorder(): BorderSizes {
+  const context = useThemeContext();
+
+  return useMemo(() => context.theme.borderSize, [context.theme.borderSize]);
+}

package/src/hooks/use-colors.hook.ts

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import { useThemeContext } from "../providers";
+import { ThemeColors } from "../theme/light.theme";
+
+export function useColors(): ThemeColors {
+  const context = useThemeContext();
+
+  return useMemo(() => context.theme.colors, [context.theme.colors]);
+}

package/src/hooks/use-radii.hook.ts

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import { useThemeContext } from "../providers";
+import { Radii } from "../types";
+
+export function useRadii(): Radii {
+  const context = useThemeContext();
+
+  return useMemo(() => context.theme.radii, [context.theme.radii]);
+}

package/src/hooks/use-space.hook.ts

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import { useThemeContext } from "../providers";
+import { Space } from "../types";
+
+export function useSpace(): Space {
+  const context = useThemeContext();
+
+  return useMemo(() => context.theme.spacing, [context.theme.spacing]);
+}

package/src/hooks/use-style-props.hook.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { createStyleKey, extractStyleProps } from '../utils';
+
+export function useStyleProps<Props extends object>(props: Props) {
+  const key = createStyleKey(props);
+
+  return useMemo(() => extractStyleProps(props), [key]);
+}

package/src/hooks/use-theme.hook.ts

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import { useThemeContext } from "../providers";
+import { AppTheme } from "../theme";
+
+export function useTheme(): AppTheme {
+  const context = useThemeContext();
+
+  return useMemo(() => context.theme, [context.theme]);
+}

package/src/hooks/use-themed-styles.ts

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { AppTheme } from "../theme";
+import { useTheme } from "./use-theme.hook";
+
+type ThemedStyles<T extends StyleSheet.NamedStyles<T>> = T;
+
+type StyledFunction<
+  Props extends object,
+  T extends StyleSheet.NamedStyles<T>
+> = (theme: AppTheme, props: Props) => ThemedStyles<T>;
+
+export const useThemedStyles = <
+  Props extends object,
+  T extends StyleSheet.NamedStyles<T>
+>(
+  styledFunction: StyledFunction<Props, T>,
+  props: Props
+): ThemedStyles<T> => {
+  const theme = useTheme();
+
+  return useMemo(() => styledFunction(theme, props), [theme, props]);
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './constants';
+export * from './hooks';
+export * from './providers';
+export * from './theme';
+export * from './types';
+export * from './utils';

package/src/providers/index.ts

@@ -0,0 +1 @@
+export * from './theme.provider';

package/src/providers/theme.provider.tsx

@@ -0,0 +1,94 @@
+import { DeepPartial, merge } from "@impulse-ui-native/core";
+import {
+  createContext,
+  memo,
+  PropsWithChildren,
+  useContext,
+  useMemo,
+} from "react";
+import { AppTheme, DarkTheme, LightTheme } from "../theme";
+import { ColorScheme, ThemeContextData } from "../types";
+
+import {
+  Montserrat_100Thin,
+  Montserrat_100Thin_Italic,
+  Montserrat_200ExtraLight,
+  Montserrat_200ExtraLight_Italic,
+  Montserrat_300Light,
+  Montserrat_300Light_Italic,
+  Montserrat_400Regular,
+  Montserrat_400Regular_Italic,
+  Montserrat_500Medium,
+  Montserrat_500Medium_Italic,
+  Montserrat_600SemiBold,
+  Montserrat_600SemiBold_Italic,
+  Montserrat_700Bold,
+  Montserrat_700Bold_Italic,
+  Montserrat_800ExtraBold,
+  Montserrat_800ExtraBold_Italic,
+  Montserrat_900Black,
+  Montserrat_900Black_Italic,
+  useFonts,
+} from "@expo-google-fonts/montserrat";
+
+const ThemeContext = createContext<ThemeContextData | undefined>(undefined);
+
+interface ThemeProviderProps {
+  scheme: ColorScheme;
+  theme: {
+    light: AppTheme;
+    dark: AppTheme;
+  };
+}
+
+export const ThemeProvider = memo(function ThemeProvider(
+  props: PropsWithChildren<DeepPartial<ThemeProviderProps>>
+) {
+  const scheme = props.scheme ?? "light";
+
+  const [loaded] = useFonts({
+    Montserrat_100Thin,
+    Montserrat_100Thin_Italic,
+    Montserrat_200ExtraLight,
+    Montserrat_200ExtraLight_Italic,
+    Montserrat_300Light,
+    Montserrat_300Light_Italic,
+    Montserrat_400Regular,
+    Montserrat_400Regular_Italic,
+    Montserrat_500Medium,
+    Montserrat_500Medium_Italic,
+    Montserrat_600SemiBold,
+    Montserrat_600SemiBold_Italic,
+    Montserrat_700Bold,
+    Montserrat_700Bold_Italic,
+    Montserrat_800ExtraBold,
+    Montserrat_800ExtraBold_Italic,
+    Montserrat_900Black,
+    Montserrat_900Black_Italic,
+  });
+
+  const context = useMemo<ThemeContextData>(() => {
+    const baseTheme = scheme === "light" ? LightTheme : DarkTheme;
+
+    return {
+      loaded,
+      theme: merge(baseTheme, props.theme?.[scheme]),
+    };
+  }, [props.theme?.light, props.theme?.dark]);
+
+  return (
+    <ThemeContext.Provider value={context}>
+      {props.children}
+    </ThemeContext.Provider>
+  );
+});
+
+export function useThemeContext() {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+
+  return context;
+}

package/src/theme/dark.theme.ts

@@ -0,0 +1,36 @@
+import { AppTheme } from './light.theme';
+import {
+  BorderSizeTokens,
+  FontFamilyTokens,
+  FontSizeTokens,
+  NeutralColorTokens,
+  RadiiTokens,
+  SpaceTokens,
+} from './tokens.theme';
+
+export const DarkTheme: AppTheme = {
+  colors: {
+    primary: '#f55d6b',
+    secondary: '#f55d6b',
+    neutral: NeutralColorTokens,
+    white: NeutralColorTokens['0'],
+    black: NeutralColorTokens['13'],
+    error: '#c92a2a',
+    warning: '#e67700',
+    success: '#7a9908',
+    info: '#1864ab',
+    text: {
+      primary: NeutralColorTokens['11'],
+      secondary: NeutralColorTokens['10'],
+    },
+    background: {
+      primary: NeutralColorTokens['2'],
+      secondary: NeutralColorTokens['0'],
+    },
+  },
+  spacing: SpaceTokens,
+  radii: RadiiTokens,
+  borderSize: BorderSizeTokens,
+  fontFamily: FontFamilyTokens,
+  fontSize: FontSizeTokens,
+};

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export { LightTheme } from './light.theme';
+export { DarkTheme } from './dark.theme';
+export type { AppTheme } from './light.theme';

package/src/theme/light.theme.ts

@@ -0,0 +1,84 @@
+import { DeepPartial } from "@impulse-ui-native/core";
+import {
+  BorderSizes,
+  FontFamilyMap,
+  FontSizes,
+  NeutralColors,
+  Radii,
+  Space,
+  TypographyPresetKey,
+  TypographyProps,
+} from "../types";
+import {
+  BorderSizeTokens,
+  FontFamilyTokens,
+  FontSizeTokens,
+  NeutralColorTokens,
+  RadiiTokens,
+  SpaceTokens,
+} from "./tokens.theme";
+
+export const LightTheme: AppTheme = {
+  colors: {
+    primary: "#f55d6b",
+    secondary: "#f55d6b",
+    neutral: NeutralColorTokens,
+    white: NeutralColorTokens["0"],
+    black: NeutralColorTokens["13"],
+    error: "#c92a2a",
+    warning: "#e67700",
+    success: "#7a9908",
+    info: "#1864ab",
+    text: {
+      primary: NeutralColorTokens["11"],
+      secondary: NeutralColorTokens["10"],
+    },
+    background: {
+      primary: NeutralColorTokens["2"],
+      secondary: NeutralColorTokens["0"],
+    },
+  },
+  spacing: SpaceTokens,
+  radii: RadiiTokens,
+  borderSize: BorderSizeTokens,
+  fontFamily: FontFamilyTokens,
+  fontSize: FontSizeTokens,
+};
+
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  neutral: NeutralColors;
+
+  white: string;
+  black: string;
+
+  error: string;
+  warning: string;
+  success: string;
+  info: string;
+
+  text: {
+    primary: string;
+    secondary: string;
+  };
+
+  background: {
+    primary: string;
+    secondary: string;
+  };
+}
+
+export interface ComponentsThemes {
+  typography: Record<TypographyPresetKey, TypographyProps>;
+}
+
+export interface AppTheme {
+  colors: ThemeColors;
+  spacing: Space;
+  radii: Radii;
+  borderSize: BorderSizes;
+  fontFamily: FontFamilyMap;
+  fontSize: FontSizes;
+  components?: DeepPartial<ComponentsThemes>;
+}

package/src/theme/tokens.theme.ts

@@ -0,0 +1,105 @@
+import {
+  BorderSizes,
+  FontFamilyMap,
+  FontSizes,
+  FontWeights,
+  NeutralColors,
+  Radii,
+  Space,
+} from "../types";
+
+export const SpaceTokens: Space = {
+  none: 0,
+  auto: "auto",
+  xxs: 4,
+  xs: 8,
+  mxs: 12,
+  sm: 16,
+  msm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64,
+  xxl: 96,
+};
+
+export const BorderSizeTokens: BorderSizes = {
+  sm: 1,
+  md: 2,
+  lg: 3,
+  xl: 5,
+  xxl: 10,
+};
+
+export const RadiiTokens: Radii = {
+  sm: 4,
+  md: 8,
+  lg: 16,
+  xl: 32,
+  xxl: 64,
+  xxxl: 128,
+  round: 100000,
+};
+
+export const FontSizeTokens: FontSizes = {
+  xxs: 8,
+  xs: 12,
+  xsm: 14,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 24,
+  xxl: 32,
+  xxxl: 40,
+  huge: 48,
+  massive: 56,
+};
+
+export const NeutralColorTokens: NeutralColors = {
+  "0": "#ffffff",
+  "1": "#f8f9fa",
+  "2": "#f1f3f5",
+  "3": "#e9ecef",
+  "4": "#dee2e6",
+  "5": "#ced4da",
+  "6": "#adb5bd",
+  "7": "#868e96",
+  "8": "#495057",
+  "9": "#343a40",
+  "10": "#212529",
+  "11": "#16191d",
+  "12": "#0d0f12",
+  "13": "#000000",
+};
+
+export const FontWeightTokens: FontWeights = {
+  thin: "100",
+  extraLight: "200",
+  light: "300",
+  regular: "400",
+  medium: "500",
+  semiBold: "600",
+  bold: "700",
+  extraBold: "800",
+  black: "900",
+};
+
+export const FontFamilyTokens: FontFamilyMap = {
+  thin: "Montserrat-Thin",
+  thinItalic: "Montserrat-ThinItalic",
+  extraLight: "Montserrat-ExtraLight",
+  extraLightItalic: "Montserrat-ExtraLightItalic",
+  light: "Montserrat-Light",
+  lightItalic: "Montserrat-LightItalic",
+  regular: "Montserrat-Regular",
+  italic: "Montserrat-Italic",
+  medium: "Montserrat-Medium",
+  mediumItalic: "Montserrat-MediumItalic",
+  semiBold: "Montserrat-SemiBold",
+  semiBoldItalic: "Montserrat-SemiBoldItalic",
+  bold: "Montserrat-Bold",
+  boldItalic: "Montserrat-BoldItalic",
+  extraBold: "Montserrat-ExtraBold",
+  extraBoldItalic: "Montserrat-ExtraBoldItalic",
+  black: "Montserrat-Black",
+  blackItalic: "Montserrat-BlackItalic",
+};

package/src/types/border.types.ts

@@ -0,0 +1,8 @@
+import { ViewStyle } from 'react-native';
+
+export type BorderProps = {
+  borderRadius?: ViewStyle['borderRadius'];
+  borderColor?: ViewStyle['borderColor'];
+  borderWidth?: ViewStyle['borderWidth'];
+  borderStyle?: ViewStyle['borderStyle'];
+};

package/src/types/color.types.ts

@@ -0,0 +1,7 @@
+import { TextStyle, ViewStyle } from 'react-native';
+
+export type ColorProps = {
+  color?: TextStyle['color'];
+  backgroundColor?: ViewStyle['backgroundColor'];
+  opacity?: ViewStyle['opacity'];
+};

package/src/types/components.types.ts

@@ -0,0 +1 @@
+export type ComponentSize = "small" | "medium" | "large";

package/src/types/flex.types.ts

@@ -0,0 +1,27 @@
+import { ViewStyle } from "react-native";
+
+export type FlexProps = {
+  flex?: ViewStyle["flex"];
+  flexGrow?: ViewStyle["flexGrow"];
+  flexShrink?: ViewStyle["flexShrink"];
+  flexBasis?: ViewStyle["flexBasis"];
+
+  flexDirection?: ViewStyle["flexDirection"];
+  flexWrap?: ViewStyle["flexWrap"];
+
+  justifyContent?: ViewStyle["justifyContent"];
+  alignItems?: ViewStyle["alignItems"];
+  alignSelf?: ViewStyle["alignSelf"];
+  alignContent?: ViewStyle["alignContent"];
+
+  gap?: ViewStyle["gap"];
+  rowGap?: ViewStyle["rowGap"];
+  columnGap?: ViewStyle["columnGap"];
+
+  // positioning (often used with flex layouts)
+  position?: ViewStyle["position"];
+  top?: ViewStyle["top"];
+  right?: ViewStyle["right"];
+  bottom?: ViewStyle["bottom"];
+  left?: ViewStyle["left"];
+};

package/src/types/index.ts

@@ -0,0 +1,10 @@
+export * from "./border.types";
+export * from "./color.types";
+export * from "./components.types";
+export * from "./flex.types";
+export * from "./shadow.types";
+export * from "./spacing.types";
+export * from "./style.types";
+export * from "./theme-provider.types";
+export * from "./tokens.types";
+export * from "./typography.types";

package/src/types/shadow.types.ts

@@ -0,0 +1,9 @@
+import { ViewStyle } from 'react-native';
+
+export type ShadowProps = {
+  shadowColor?: ViewStyle['shadowColor'];
+  shadowOpacity?: ViewStyle['shadowOpacity'];
+  shadowRadius?: ViewStyle['shadowRadius'];
+  shadowOffset?: ViewStyle['shadowOffset'];
+  elevation?: ViewStyle['elevation'];
+};

package/src/types/spacing.types.ts

@@ -0,0 +1,19 @@
+import { ViewStyle } from 'react-native';
+
+export type SpacingProps = {
+  margin?: ViewStyle['margin'];
+  marginTop?: ViewStyle['marginTop'];
+  marginBottom?: ViewStyle['marginBottom'];
+  marginLeft?: ViewStyle['marginLeft'];
+  marginRight?: ViewStyle['marginRight'];
+  marginHorizontal?: ViewStyle['marginHorizontal'];
+  marginVertical?: ViewStyle['marginVertical'];
+
+  padding?: ViewStyle['padding'];
+  paddingTop?: ViewStyle['paddingTop'];
+  paddingBottom?: ViewStyle['paddingBottom'];
+  paddingLeft?: ViewStyle['paddingLeft'];
+  paddingRight?: ViewStyle['paddingRight'];
+  paddingHorizontal?: ViewStyle['paddingHorizontal'];
+  paddingVertical?: ViewStyle['paddingVertical'];
+};

package/src/types/style.types.ts

@@ -0,0 +1,17 @@
+import { BorderProps } from "./border.types";
+import { ColorProps } from "./color.types";
+import { FlexProps } from "./flex.types";
+import { ShadowProps } from "./shadow.types";
+import { SpacingProps } from "./spacing.types";
+import { TypographyProps } from "./typography.types";
+
+export type StyleProps = Partial<
+  SpacingProps &
+    ColorProps &
+    ShadowProps &
+    BorderProps &
+    TypographyProps &
+    FlexProps
+>;
+
+export type StylePropKey = keyof StyleProps;

package/src/types/theme-provider.types.ts

@@ -0,0 +1,8 @@
+import { AppTheme } from "../theme";
+
+export interface ThemeContextData {
+  loaded: boolean;
+  theme: AppTheme;
+}
+
+export type ColorScheme = "light" | "dark";