@impulse-ui-native/theme 1.0.9 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/index.d.mts +446 -101
  2. package/dist/index.js +1052 -0
  3. package/dist/index.js.map +1 -0
  4. package/package.json +22 -16
  5. package/dist/index.cjs.js +0 -429
  6. package/dist/index.cjs.js.map +0 -1
  7. package/dist/index.d.ts +0 -209
  8. package/dist/index.esm.js +0 -406
  9. package/dist/index.esm.js.map +0 -1
  10. package/src/constants/index.ts +0 -2
  11. package/src/constants/style.constants.ts +0 -80
  12. package/src/constants/typography.constants.ts +0 -25
  13. package/src/hooks/index.ts +0 -8
  14. package/src/hooks/use-border.hook.ts +0 -9
  15. package/src/hooks/use-colors.hook.ts +0 -9
  16. package/src/hooks/use-components-theme.hook.ts +0 -12
  17. package/src/hooks/use-radii.hook.ts +0 -9
  18. package/src/hooks/use-space.hook.ts +0 -9
  19. package/src/hooks/use-style-props.hook.ts +0 -8
  20. package/src/hooks/use-theme.hook.ts +0 -9
  21. package/src/hooks/use-themed-styles.ts +0 -23
  22. package/src/index.ts +0 -6
  23. package/src/providers/index.ts +0 -1
  24. package/src/providers/theme.provider.tsx +0 -112
  25. package/src/theme/dark.theme.ts +0 -39
  26. package/src/theme/index.ts +0 -3
  27. package/src/theme/light.theme.ts +0 -39
  28. package/src/theme/tokens.theme.ts +0 -64
  29. package/src/types/border.types.ts +0 -8
  30. package/src/types/color.types.ts +0 -7
  31. package/src/types/components.types.ts +0 -1
  32. package/src/types/dimension.types.ts +0 -11
  33. package/src/types/flex.types.ts +0 -27
  34. package/src/types/index.ts +0 -11
  35. package/src/types/shadow.types.ts +0 -9
  36. package/src/types/spacing.types.ts +0 -19
  37. package/src/types/style.types.ts +0 -19
  38. package/src/types/theme-provider.types.ts +0 -64
  39. package/src/types/tokens.types.ts +0 -88
  40. package/src/types/typography.types.ts +0 -66
  41. package/src/utils/index.ts +0 -1
  42. package/src/utils/style.utils.ts +0 -31
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/constants/style.constants.ts","../src/constants/typography.constants.ts","../src/hooks/use-border.hook.ts","../src/providers/theme.provider.tsx","../src/theme/tokens.theme.ts","../src/theme/dark.theme.ts","../src/theme/light.theme.ts","../src/hooks/use-colors.hook.ts","../src/hooks/use-components-theme.hook.ts","../src/hooks/use-radii.hook.ts","../src/hooks/use-space.hook.ts","../src/hooks/use-style-props.hook.ts","../src/utils/style.utils.ts","../src/hooks/use-theme.hook.ts","../src/hooks/use-themed-styles.ts"],"sourcesContent":["import { StyleProps } from \"../types\";\r\n\r\nexport const StylePropsSet = new Set<keyof StyleProps>([\r\n // Spacing\r\n \"margin\",\r\n \"marginTop\",\r\n \"marginBottom\",\r\n \"marginLeft\",\r\n \"marginRight\",\r\n \"marginHorizontal\",\r\n \"marginVertical\",\r\n \"padding\",\r\n \"paddingTop\",\r\n \"paddingBottom\",\r\n \"paddingLeft\",\r\n \"paddingRight\",\r\n \"paddingHorizontal\",\r\n \"paddingVertical\",\r\n\r\n // Appearance\r\n \"color\",\r\n \"backgroundColor\",\r\n \"opacity\",\r\n \"borderRadius\",\r\n \"borderColor\",\r\n \"borderWidth\",\r\n \"borderStyle\",\r\n \"shadowColor\",\r\n \"shadowOpacity\",\r\n \"shadowRadius\",\r\n \"shadowOffset\",\r\n \"elevation\",\r\n\r\n // Typography (TextStyle)\r\n \"fontSize\",\r\n \"fontFamily\",\r\n \"fontWeight\",\r\n \"fontStyle\",\r\n \"letterSpacing\",\r\n \"lineHeight\",\r\n \"textAlign\",\r\n \"textDecorationLine\",\r\n \"textDecorationStyle\",\r\n \"textDecorationColor\",\r\n \"textTransform\",\r\n \"includeFontPadding\",\r\n \"textAlignVertical\",\r\n \"writingDirection\",\r\n\r\n // Flex (ViewStyle)\r\n \"flex\",\r\n \"flexGrow\",\r\n \"flexShrink\",\r\n \"flexBasis\",\r\n \"flexDirection\",\r\n \"flexWrap\",\r\n \"justifyContent\",\r\n \"alignItems\",\r\n \"alignSelf\",\r\n \"alignContent\",\r\n \"gap\",\r\n \"rowGap\",\r\n \"columnGap\",\r\n\r\n // Positioning (commonly used with flex layouts)\r\n \"position\",\r\n \"top\",\r\n \"right\",\r\n \"bottom\",\r\n \"left\",\r\n\r\n // Dimensions (ViewStyle)\r\n \"width\",\r\n \"height\",\r\n \"minWidth\",\r\n \"maxWidth\",\r\n \"minHeight\",\r\n \"maxHeight\",\r\n \"aspectRatio\",\r\n]);\r\n","import { FontWeightItalic, FontWeightKey, FontWeightNormal } from \"../types\";\r\n\r\nexport const FontWeightsNormal: Record<FontWeightKey, FontWeightNormal> = {\r\n 100: \"Montserrat_100Thin\",\r\n 200: \"Montserrat_200ExtraLight\",\r\n 300: \"Montserrat_300Light\",\r\n 400: \"Montserrat_400Regular\",\r\n 500: \"Montserrat_500Medium\",\r\n 600: \"Montserrat_600SemiBold\",\r\n 700: \"Montserrat_700Bold\",\r\n 800: \"Montserrat_800ExtraBold\",\r\n 900: \"Montserrat_900Black\",\r\n};\r\n\r\nexport const FontWeightsItalic: Record<FontWeightKey, FontWeightItalic> = {\r\n 100: \"Montserrat_100Thin_Italic\",\r\n 200: \"Montserrat_200ExtraLight_Italic\",\r\n 300: \"Montserrat_300Light_Italic\",\r\n 400: \"Montserrat_400Regular_Italic\",\r\n 500: \"Montserrat_500Medium_Italic\",\r\n 600: \"Montserrat_600SemiBold_Italic\",\r\n 700: \"Montserrat_700Bold_Italic\",\r\n 800: \"Montserrat_800ExtraBold_Italic\",\r\n 900: \"Montserrat_900Black_Italic\",\r\n};\r\n","import { useMemo } from \"react\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { BorderSizes } from \"../types\";\r\n\r\nexport function useBorder(): BorderSizes {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.theme.borderSize, [context.theme.borderSize]);\r\n}\r\n","import { DeepPartial, merge } from \"@impulse-ui-native/core\";\r\nimport {\r\n createContext,\r\n memo,\r\n PropsWithChildren,\r\n useContext,\r\n useMemo,\r\n} from \"react\";\r\nimport { DarkTheme, LightTheme } from \"../theme\";\r\nimport {\r\n AppTheme,\r\n ColorScheme,\r\n ComponentsThemes,\r\n CustomComponentsTheme,\r\n ThemeContextData,\r\n} from \"../types\";\r\n\r\nimport {\r\n Montserrat_100Thin,\r\n Montserrat_100Thin_Italic,\r\n Montserrat_200ExtraLight,\r\n Montserrat_200ExtraLight_Italic,\r\n Montserrat_300Light,\r\n Montserrat_300Light_Italic,\r\n Montserrat_400Regular,\r\n Montserrat_400Regular_Italic,\r\n Montserrat_500Medium,\r\n Montserrat_500Medium_Italic,\r\n Montserrat_600SemiBold,\r\n Montserrat_600SemiBold_Italic,\r\n Montserrat_700Bold,\r\n Montserrat_700Bold_Italic,\r\n Montserrat_800ExtraBold,\r\n Montserrat_800ExtraBold_Italic,\r\n Montserrat_900Black,\r\n Montserrat_900Black_Italic,\r\n useFonts,\r\n} from \"@expo-google-fonts/montserrat\";\r\n\r\nconst ThemeContext = createContext<ThemeContextData | undefined>(undefined);\r\n\r\ninterface ThemeProviderProps {\r\n scheme?: ColorScheme;\r\n theme?: DeepPartial<{\r\n light: AppTheme;\r\n dark: AppTheme;\r\n }>;\r\n components?: CustomComponentsTheme;\r\n}\r\n\r\nexport const ThemeProvider = memo(function ThemeProvider(\r\n props: PropsWithChildren<ThemeProviderProps>\r\n) {\r\n const scheme = props.scheme ?? \"light\";\r\n\r\n const [loaded] = useFonts({\r\n Montserrat_100Thin,\r\n Montserrat_100Thin_Italic,\r\n Montserrat_200ExtraLight,\r\n Montserrat_200ExtraLight_Italic,\r\n Montserrat_300Light,\r\n Montserrat_300Light_Italic,\r\n Montserrat_400Regular,\r\n Montserrat_400Regular_Italic,\r\n Montserrat_500Medium,\r\n Montserrat_500Medium_Italic,\r\n Montserrat_600SemiBold,\r\n Montserrat_600SemiBold_Italic,\r\n Montserrat_700Bold,\r\n Montserrat_700Bold_Italic,\r\n Montserrat_800ExtraBold,\r\n Montserrat_800ExtraBold_Italic,\r\n Montserrat_900Black,\r\n Montserrat_900Black_Italic,\r\n });\r\n\r\n const context = useMemo<ThemeContextData>(() => {\r\n const baseTheme = scheme === \"light\" ? LightTheme : DarkTheme;\r\n const customBaseTheme = props.theme?.[scheme];\r\n const theme = merge(baseTheme, customBaseTheme);\r\n\r\n let componentsTheme: DeepPartial<ComponentsThemes> | undefined;\r\n\r\n if (typeof props.components === \"function\") {\r\n componentsTheme = props.components(theme);\r\n } else {\r\n componentsTheme = props.components;\r\n }\r\n\r\n return {\r\n loaded,\r\n theme,\r\n components: componentsTheme,\r\n };\r\n }, [props.theme?.light, props.theme?.dark, props.components]);\r\n\r\n return (\r\n <ThemeContext.Provider value={context}>\r\n {props.children}\r\n </ThemeContext.Provider>\r\n );\r\n});\r\n\r\nexport function useThemeContext() {\r\n const context = useContext(ThemeContext);\r\n\r\n if (!context) {\r\n throw new Error(\"useThemeContext must be used within a ThemeProvider\");\r\n }\r\n\r\n return context;\r\n}\r\n","import { BorderSizes, FontSizes, NeutralColors, Radii, Space } from \"../types\";\r\n\r\nexport const SpaceTokens: Space = {\r\n none: 0,\r\n auto: \"auto\",\r\n xxs: 4,\r\n xs: 8,\r\n mxs: 12,\r\n sm: 16,\r\n msm: 24,\r\n md: 32,\r\n lg: 48,\r\n xl: 64,\r\n xxl: 96,\r\n};\r\n\r\nexport const BorderSizeTokens: BorderSizes = {\r\n sm: 1,\r\n md: 2,\r\n lg: 3,\r\n xl: 5,\r\n xxl: 10,\r\n};\r\n\r\nexport const RadiiTokens: Radii = {\r\n sm: 4,\r\n md: 8,\r\n lg: 16,\r\n xl: 32,\r\n xxl: 64,\r\n xxxl: 128,\r\n round: 100000,\r\n};\r\n\r\nexport const FontSizeTokens: FontSizes = {\r\n xxs: 8,\r\n xs: 12,\r\n xsm: 14,\r\n sm: 16,\r\n md: 18,\r\n lg: 20,\r\n xl: 24,\r\n xxl: 32,\r\n xxxl: 40,\r\n huge: 48,\r\n massive: 56,\r\n};\r\n\r\nexport const NeutralColorTokens: NeutralColors = {\r\n \"0\": \"#ffffff\",\r\n \"1\": \"#f8f9fa\",\r\n \"2\": \"#f1f3f5\",\r\n \"3\": \"#e9ecef\",\r\n \"4\": \"#dee2e6\",\r\n \"5\": \"#ced4da\",\r\n \"6\": \"#adb5bd\",\r\n \"7\": \"#868e96\",\r\n \"8\": \"#495057\",\r\n \"9\": \"#343a40\",\r\n \"10\": \"#212529\",\r\n \"11\": \"#16191d\",\r\n \"12\": \"#0d0f12\",\r\n \"13\": \"#000000\",\r\n};\r\n","import { FontWeightsItalic, FontWeightsNormal } from \"../constants\";\r\nimport { AppTheme } from \"../types\";\r\nimport {\r\n BorderSizeTokens,\r\n FontSizeTokens,\r\n NeutralColorTokens,\r\n RadiiTokens,\r\n SpaceTokens,\r\n} from \"./tokens.theme\";\r\n\r\nexport const DarkTheme: AppTheme = {\r\n colors: {\r\n primary: \"#f55d6b\",\r\n secondary: \"#f55d6b\",\r\n neutral: NeutralColorTokens,\r\n white: NeutralColorTokens[\"0\"],\r\n black: NeutralColorTokens[\"13\"],\r\n error: \"#c92a2a\",\r\n warning: \"#e67700\",\r\n success: \"#7a9908\",\r\n info: \"#1864ab\",\r\n text: {\r\n primary: NeutralColorTokens[\"11\"],\r\n secondary: NeutralColorTokens[\"10\"],\r\n },\r\n background: {\r\n primary: NeutralColorTokens[\"2\"],\r\n secondary: NeutralColorTokens[\"0\"],\r\n },\r\n },\r\n spacing: SpaceTokens,\r\n radii: RadiiTokens,\r\n fontWeights: {\r\n normal: FontWeightsNormal,\r\n italic: FontWeightsItalic,\r\n },\r\n borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { FontWeightsItalic, FontWeightsNormal } from \"../constants\";\r\nimport { AppTheme } from \"../types\";\r\nimport {\r\n BorderSizeTokens,\r\n FontSizeTokens,\r\n NeutralColorTokens,\r\n RadiiTokens,\r\n SpaceTokens,\r\n} from \"./tokens.theme\";\r\n\r\nexport const LightTheme: AppTheme = {\r\n colors: {\r\n primary: \"#f55d6b\",\r\n secondary: \"#f55d6b\",\r\n neutral: NeutralColorTokens,\r\n white: NeutralColorTokens[\"0\"],\r\n black: NeutralColorTokens[\"13\"],\r\n error: \"#c92a2a\",\r\n warning: \"#e67700\",\r\n success: \"#7a9908\",\r\n info: \"#1864ab\",\r\n text: {\r\n primary: NeutralColorTokens[\"11\"],\r\n secondary: NeutralColorTokens[\"10\"],\r\n },\r\n background: {\r\n primary: NeutralColorTokens[\"2\"],\r\n secondary: NeutralColorTokens[\"0\"],\r\n },\r\n },\r\n spacing: SpaceTokens,\r\n radii: RadiiTokens,\r\n fontWeights: {\r\n normal: FontWeightsNormal,\r\n italic: FontWeightsItalic,\r\n },\r\n borderSize: BorderSizeTokens,\r\n fontSize: FontSizeTokens,\r\n};\r\n","import { useMemo } from \"react\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { ThemeColors } from \"../types\";\r\n\r\nexport function useColors(): ThemeColors {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.theme.colors, [context.theme.colors]);\r\n}\r\n","import { DeepPartial } from \"@impulse-ui-native/core\";\r\nimport { useMemo } from \"react\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { ComponentsThemes } from \"../types\";\r\n\r\nexport function useComponentsTheme():\r\n | DeepPartial<ComponentsThemes>\r\n | undefined {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.components, [context.components]);\r\n}\r\n","import { useMemo } from \"react\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { Radii } from \"../types\";\r\n\r\nexport function useRadii(): Radii {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.theme.radii, [context.theme.radii]);\r\n}\r\n","import { useMemo } from \"react\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { Space } from \"../types\";\r\n\r\nexport function useSpace(): Space {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.theme.spacing, [context.theme.spacing]);\r\n}\r\n","import { useMemo } from 'react';\r\nimport { createStyleKey, extractStyleProps } from '../utils';\r\n\r\nexport function useStyleProps<Props extends object>(props: Props) {\r\n const key = createStyleKey(props);\r\n\r\n return useMemo(() => extractStyleProps(props), [key]);\r\n}\r\n","import { StylePropsSet } from '../constants';\r\nimport { StylePropKey, StyleProps } from '../types';\r\n\r\nconst isStylePropKey = (k: string): k is StylePropKey =>\r\n StylePropsSet.has(k as StylePropKey);\r\n\r\nexport const extractStyleProps = <Props extends object>(\r\n props: Props\r\n): StyleProps => {\r\n const style: StyleProps = {};\r\n \r\n for (const k in props) {\r\n if (isStylePropKey(k) && props[k] !== undefined) {\r\n style[k] = props[k] as any;\r\n }\r\n }\r\n \r\n return style;\r\n};\r\n\r\nexport const createStyleKey = <Props extends object>(props: Props) => {\r\n let key = '';\r\n\r\n for (const k in props) {\r\n if (isStylePropKey(k)) {\r\n key += String(props[k as keyof Props]);\r\n }\r\n }\r\n \r\n return key;\r\n};\r\n","import { useMemo } from \"react\";\r\nimport { useThemeContext } from \"../providers\";\r\nimport { AppTheme } from \"../types\";\r\n\r\nexport function useTheme(): AppTheme {\r\n const context = useThemeContext();\r\n\r\n return useMemo(() => context.theme, [context.theme]);\r\n}\r\n","import { useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\nimport { AppTheme } from \"../types\";\r\nimport { useTheme } from \"./use-theme.hook\";\r\n\r\ntype ThemedStyles<T extends StyleSheet.NamedStyles<T>> = T;\r\n\r\ntype StyledFunction<\r\n Props extends object,\r\n T extends StyleSheet.NamedStyles<T>\r\n> = (theme: AppTheme, props: Props) => ThemedStyles<T>;\r\n\r\nexport const useThemedStyles = <\r\n Props extends object,\r\n T extends StyleSheet.NamedStyles<T>\r\n>(\r\n styledFunction: StyledFunction<Props, T>,\r\n props: Props\r\n): ThemedStyles<T> => {\r\n const theme = useTheme();\r\n\r\n return useMemo(() => styledFunction(theme, props), [theme, props]);\r\n};\r\n"],"mappings":"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","names":["useMemo","ThemeProvider","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo","useMemo"]}
@@ -1,2 +0,0 @@
1
- export * from "./style.constants";
2
- export * from "./typography.constants";
@@ -1,80 +0,0 @@
1
- import { StyleProps } from "../types";
2
-
3
- export const StylePropsSet = new Set<keyof StyleProps>([
4
- // Spacing
5
- "margin",
6
- "marginTop",
7
- "marginBottom",
8
- "marginLeft",
9
- "marginRight",
10
- "marginHorizontal",
11
- "marginVertical",
12
- "padding",
13
- "paddingTop",
14
- "paddingBottom",
15
- "paddingLeft",
16
- "paddingRight",
17
- "paddingHorizontal",
18
- "paddingVertical",
19
-
20
- // Appearance
21
- "color",
22
- "backgroundColor",
23
- "opacity",
24
- "borderRadius",
25
- "borderColor",
26
- "borderWidth",
27
- "borderStyle",
28
- "shadowColor",
29
- "shadowOpacity",
30
- "shadowRadius",
31
- "shadowOffset",
32
- "elevation",
33
-
34
- // Typography (TextStyle)
35
- "fontSize",
36
- "fontFamily",
37
- "fontWeight",
38
- "fontStyle",
39
- "letterSpacing",
40
- "lineHeight",
41
- "textAlign",
42
- "textDecorationLine",
43
- "textDecorationStyle",
44
- "textDecorationColor",
45
- "textTransform",
46
- "includeFontPadding",
47
- "textAlignVertical",
48
- "writingDirection",
49
-
50
- // Flex (ViewStyle)
51
- "flex",
52
- "flexGrow",
53
- "flexShrink",
54
- "flexBasis",
55
- "flexDirection",
56
- "flexWrap",
57
- "justifyContent",
58
- "alignItems",
59
- "alignSelf",
60
- "alignContent",
61
- "gap",
62
- "rowGap",
63
- "columnGap",
64
-
65
- // Positioning (commonly used with flex layouts)
66
- "position",
67
- "top",
68
- "right",
69
- "bottom",
70
- "left",
71
-
72
- // Dimensions (ViewStyle)
73
- "width",
74
- "height",
75
- "minWidth",
76
- "maxWidth",
77
- "minHeight",
78
- "maxHeight",
79
- "aspectRatio",
80
- ]);
@@ -1,25 +0,0 @@
1
- import { FontWeightItalic, FontWeightKey, FontWeightNormal } from "../types";
2
-
3
- export const FontWeightsNormal: Record<FontWeightKey, FontWeightNormal> = {
4
- 100: "Montserrat_100Thin",
5
- 200: "Montserrat_200ExtraLight",
6
- 300: "Montserrat_300Light",
7
- 400: "Montserrat_400Regular",
8
- 500: "Montserrat_500Medium",
9
- 600: "Montserrat_600SemiBold",
10
- 700: "Montserrat_700Bold",
11
- 800: "Montserrat_800ExtraBold",
12
- 900: "Montserrat_900Black",
13
- };
14
-
15
- export const FontWeightsItalic: Record<FontWeightKey, FontWeightItalic> = {
16
- 100: "Montserrat_100Thin_Italic",
17
- 200: "Montserrat_200ExtraLight_Italic",
18
- 300: "Montserrat_300Light_Italic",
19
- 400: "Montserrat_400Regular_Italic",
20
- 500: "Montserrat_500Medium_Italic",
21
- 600: "Montserrat_600SemiBold_Italic",
22
- 700: "Montserrat_700Bold_Italic",
23
- 800: "Montserrat_800ExtraBold_Italic",
24
- 900: "Montserrat_900Black_Italic",
25
- };
@@ -1,8 +0,0 @@
1
- export { useBorder } from "./use-border.hook";
2
- export { useColors } from "./use-colors.hook";
3
- export { useComponentsTheme } from "./use-components-theme.hook";
4
- export { useRadii } from "./use-radii.hook";
5
- export { useSpace } from "./use-space.hook";
6
- export { useStyleProps } from "./use-style-props.hook";
7
- export { useTheme } from "./use-theme.hook";
8
- export { useThemedStyles } from "./use-themed-styles";
@@ -1,9 +0,0 @@
1
- import { useMemo } from "react";
2
- import { useThemeContext } from "../providers";
3
- import { BorderSizes } from "../types";
4
-
5
- export function useBorder(): BorderSizes {
6
- const context = useThemeContext();
7
-
8
- return useMemo(() => context.theme.borderSize, [context.theme.borderSize]);
9
- }
@@ -1,9 +0,0 @@
1
- import { useMemo } from "react";
2
- import { useThemeContext } from "../providers";
3
- import { ThemeColors } from "../types";
4
-
5
- export function useColors(): ThemeColors {
6
- const context = useThemeContext();
7
-
8
- return useMemo(() => context.theme.colors, [context.theme.colors]);
9
- }
@@ -1,12 +0,0 @@
1
- import { DeepPartial } from "@impulse-ui-native/core";
2
- import { useMemo } from "react";
3
- import { useThemeContext } from "../providers";
4
- import { ComponentsThemes } from "../types";
5
-
6
- export function useComponentsTheme():
7
- | DeepPartial<ComponentsThemes>
8
- | undefined {
9
- const context = useThemeContext();
10
-
11
- return useMemo(() => context.components, [context.components]);
12
- }
@@ -1,9 +0,0 @@
1
- import { useMemo } from "react";
2
- import { useThemeContext } from "../providers";
3
- import { Radii } from "../types";
4
-
5
- export function useRadii(): Radii {
6
- const context = useThemeContext();
7
-
8
- return useMemo(() => context.theme.radii, [context.theme.radii]);
9
- }
@@ -1,9 +0,0 @@
1
- import { useMemo } from "react";
2
- import { useThemeContext } from "../providers";
3
- import { Space } from "../types";
4
-
5
- export function useSpace(): Space {
6
- const context = useThemeContext();
7
-
8
- return useMemo(() => context.theme.spacing, [context.theme.spacing]);
9
- }
@@ -1,8 +0,0 @@
1
- import { useMemo } from 'react';
2
- import { createStyleKey, extractStyleProps } from '../utils';
3
-
4
- export function useStyleProps<Props extends object>(props: Props) {
5
- const key = createStyleKey(props);
6
-
7
- return useMemo(() => extractStyleProps(props), [key]);
8
- }
@@ -1,9 +0,0 @@
1
- import { useMemo } from "react";
2
- import { useThemeContext } from "../providers";
3
- import { AppTheme } from "../types";
4
-
5
- export function useTheme(): AppTheme {
6
- const context = useThemeContext();
7
-
8
- return useMemo(() => context.theme, [context.theme]);
9
- }
@@ -1,23 +0,0 @@
1
- import { useMemo } from "react";
2
- import { StyleSheet } from "react-native";
3
- import { AppTheme } from "../types";
4
- import { useTheme } from "./use-theme.hook";
5
-
6
- type ThemedStyles<T extends StyleSheet.NamedStyles<T>> = T;
7
-
8
- type StyledFunction<
9
- Props extends object,
10
- T extends StyleSheet.NamedStyles<T>
11
- > = (theme: AppTheme, props: Props) => ThemedStyles<T>;
12
-
13
- export const useThemedStyles = <
14
- Props extends object,
15
- T extends StyleSheet.NamedStyles<T>
16
- >(
17
- styledFunction: StyledFunction<Props, T>,
18
- props: Props
19
- ): ThemedStyles<T> => {
20
- const theme = useTheme();
21
-
22
- return useMemo(() => styledFunction(theme, props), [theme, props]);
23
- };
package/src/index.ts DELETED
@@ -1,6 +0,0 @@
1
- export * from "./constants";
2
- export * from "./hooks";
3
- export * from "./providers";
4
- export * from "./theme";
5
- export * from "./types";
6
- export * from "./utils";
@@ -1 +0,0 @@
1
- export * from './theme.provider';
@@ -1,112 +0,0 @@
1
- import { DeepPartial, merge } from "@impulse-ui-native/core";
2
- import {
3
- createContext,
4
- memo,
5
- PropsWithChildren,
6
- useContext,
7
- useMemo,
8
- } from "react";
9
- import { DarkTheme, LightTheme } from "../theme";
10
- import {
11
- AppTheme,
12
- ColorScheme,
13
- ComponentsThemes,
14
- CustomComponentsTheme,
15
- ThemeContextData,
16
- } from "../types";
17
-
18
- import {
19
- Montserrat_100Thin,
20
- Montserrat_100Thin_Italic,
21
- Montserrat_200ExtraLight,
22
- Montserrat_200ExtraLight_Italic,
23
- Montserrat_300Light,
24
- Montserrat_300Light_Italic,
25
- Montserrat_400Regular,
26
- Montserrat_400Regular_Italic,
27
- Montserrat_500Medium,
28
- Montserrat_500Medium_Italic,
29
- Montserrat_600SemiBold,
30
- Montserrat_600SemiBold_Italic,
31
- Montserrat_700Bold,
32
- Montserrat_700Bold_Italic,
33
- Montserrat_800ExtraBold,
34
- Montserrat_800ExtraBold_Italic,
35
- Montserrat_900Black,
36
- Montserrat_900Black_Italic,
37
- useFonts,
38
- } from "@expo-google-fonts/montserrat";
39
-
40
- const ThemeContext = createContext<ThemeContextData | undefined>(undefined);
41
-
42
- interface ThemeProviderProps {
43
- scheme?: ColorScheme;
44
- theme?: DeepPartial<{
45
- light: AppTheme;
46
- dark: AppTheme;
47
- }>;
48
- components?: CustomComponentsTheme;
49
- }
50
-
51
- export const ThemeProvider = memo(function ThemeProvider(
52
- props: PropsWithChildren<ThemeProviderProps>
53
- ) {
54
- const scheme = props.scheme ?? "light";
55
-
56
- const [loaded] = useFonts({
57
- Montserrat_100Thin,
58
- Montserrat_100Thin_Italic,
59
- Montserrat_200ExtraLight,
60
- Montserrat_200ExtraLight_Italic,
61
- Montserrat_300Light,
62
- Montserrat_300Light_Italic,
63
- Montserrat_400Regular,
64
- Montserrat_400Regular_Italic,
65
- Montserrat_500Medium,
66
- Montserrat_500Medium_Italic,
67
- Montserrat_600SemiBold,
68
- Montserrat_600SemiBold_Italic,
69
- Montserrat_700Bold,
70
- Montserrat_700Bold_Italic,
71
- Montserrat_800ExtraBold,
72
- Montserrat_800ExtraBold_Italic,
73
- Montserrat_900Black,
74
- Montserrat_900Black_Italic,
75
- });
76
-
77
- const context = useMemo<ThemeContextData>(() => {
78
- const baseTheme = scheme === "light" ? LightTheme : DarkTheme;
79
- const customBaseTheme = props.theme?.[scheme];
80
- const theme = merge(baseTheme, customBaseTheme);
81
-
82
- let componentsTheme: DeepPartial<ComponentsThemes> | undefined;
83
-
84
- if (typeof props.components === "function") {
85
- componentsTheme = props.components(theme);
86
- } else {
87
- componentsTheme = props.components;
88
- }
89
-
90
- return {
91
- loaded,
92
- theme,
93
- components: componentsTheme,
94
- };
95
- }, [props.theme?.light, props.theme?.dark, props.components]);
96
-
97
- return (
98
- <ThemeContext.Provider value={context}>
99
- {props.children}
100
- </ThemeContext.Provider>
101
- );
102
- });
103
-
104
- export function useThemeContext() {
105
- const context = useContext(ThemeContext);
106
-
107
- if (!context) {
108
- throw new Error("useThemeContext must be used within a ThemeProvider");
109
- }
110
-
111
- return context;
112
- }
@@ -1,39 +0,0 @@
1
- import { FontWeightsItalic, FontWeightsNormal } from "../constants";
2
- import { AppTheme } from "../types";
3
- import {
4
- BorderSizeTokens,
5
- FontSizeTokens,
6
- NeutralColorTokens,
7
- RadiiTokens,
8
- SpaceTokens,
9
- } from "./tokens.theme";
10
-
11
- export const DarkTheme: AppTheme = {
12
- colors: {
13
- primary: "#f55d6b",
14
- secondary: "#f55d6b",
15
- neutral: NeutralColorTokens,
16
- white: NeutralColorTokens["0"],
17
- black: NeutralColorTokens["13"],
18
- error: "#c92a2a",
19
- warning: "#e67700",
20
- success: "#7a9908",
21
- info: "#1864ab",
22
- text: {
23
- primary: NeutralColorTokens["11"],
24
- secondary: NeutralColorTokens["10"],
25
- },
26
- background: {
27
- primary: NeutralColorTokens["2"],
28
- secondary: NeutralColorTokens["0"],
29
- },
30
- },
31
- spacing: SpaceTokens,
32
- radii: RadiiTokens,
33
- fontWeights: {
34
- normal: FontWeightsNormal,
35
- italic: FontWeightsItalic,
36
- },
37
- borderSize: BorderSizeTokens,
38
- fontSize: FontSizeTokens,
39
- };
@@ -1,3 +0,0 @@
1
- export { DarkTheme } from "./dark.theme";
2
- export { LightTheme } from "./light.theme";
3
- export * from "./tokens.theme";
@@ -1,39 +0,0 @@
1
- import { FontWeightsItalic, FontWeightsNormal } from "../constants";
2
- import { AppTheme } from "../types";
3
- import {
4
- BorderSizeTokens,
5
- FontSizeTokens,
6
- NeutralColorTokens,
7
- RadiiTokens,
8
- SpaceTokens,
9
- } from "./tokens.theme";
10
-
11
- export const LightTheme: AppTheme = {
12
- colors: {
13
- primary: "#f55d6b",
14
- secondary: "#f55d6b",
15
- neutral: NeutralColorTokens,
16
- white: NeutralColorTokens["0"],
17
- black: NeutralColorTokens["13"],
18
- error: "#c92a2a",
19
- warning: "#e67700",
20
- success: "#7a9908",
21
- info: "#1864ab",
22
- text: {
23
- primary: NeutralColorTokens["11"],
24
- secondary: NeutralColorTokens["10"],
25
- },
26
- background: {
27
- primary: NeutralColorTokens["2"],
28
- secondary: NeutralColorTokens["0"],
29
- },
30
- },
31
- spacing: SpaceTokens,
32
- radii: RadiiTokens,
33
- fontWeights: {
34
- normal: FontWeightsNormal,
35
- italic: FontWeightsItalic,
36
- },
37
- borderSize: BorderSizeTokens,
38
- fontSize: FontSizeTokens,
39
- };
@@ -1,64 +0,0 @@
1
- import { BorderSizes, FontSizes, NeutralColors, Radii, Space } from "../types";
2
-
3
- export const SpaceTokens: Space = {
4
- none: 0,
5
- auto: "auto",
6
- xxs: 4,
7
- xs: 8,
8
- mxs: 12,
9
- sm: 16,
10
- msm: 24,
11
- md: 32,
12
- lg: 48,
13
- xl: 64,
14
- xxl: 96,
15
- };
16
-
17
- export const BorderSizeTokens: BorderSizes = {
18
- sm: 1,
19
- md: 2,
20
- lg: 3,
21
- xl: 5,
22
- xxl: 10,
23
- };
24
-
25
- export const RadiiTokens: Radii = {
26
- sm: 4,
27
- md: 8,
28
- lg: 16,
29
- xl: 32,
30
- xxl: 64,
31
- xxxl: 128,
32
- round: 100000,
33
- };
34
-
35
- export const FontSizeTokens: FontSizes = {
36
- xxs: 8,
37
- xs: 12,
38
- xsm: 14,
39
- sm: 16,
40
- md: 18,
41
- lg: 20,
42
- xl: 24,
43
- xxl: 32,
44
- xxxl: 40,
45
- huge: 48,
46
- massive: 56,
47
- };
48
-
49
- export const NeutralColorTokens: NeutralColors = {
50
- "0": "#ffffff",
51
- "1": "#f8f9fa",
52
- "2": "#f1f3f5",
53
- "3": "#e9ecef",
54
- "4": "#dee2e6",
55
- "5": "#ced4da",
56
- "6": "#adb5bd",
57
- "7": "#868e96",
58
- "8": "#495057",
59
- "9": "#343a40",
60
- "10": "#212529",
61
- "11": "#16191d",
62
- "12": "#0d0f12",
63
- "13": "#000000",
64
- };
@@ -1,8 +0,0 @@
1
- import { ViewStyle } from 'react-native';
2
-
3
- export type BorderProps = {
4
- borderRadius?: ViewStyle['borderRadius'];
5
- borderColor?: ViewStyle['borderColor'];
6
- borderWidth?: ViewStyle['borderWidth'];
7
- borderStyle?: ViewStyle['borderStyle'];
8
- };
@@ -1,7 +0,0 @@
1
- import { TextStyle, ViewStyle } from 'react-native';
2
-
3
- export type ColorProps = {
4
- color?: TextStyle['color'];
5
- backgroundColor?: ViewStyle['backgroundColor'];
6
- opacity?: ViewStyle['opacity'];
7
- };
@@ -1 +0,0 @@
1
- export type ComponentSize = "small" | "medium" | "large";
@@ -1,11 +0,0 @@
1
- import { ViewStyle } from "react-native";
2
-
3
- export type DimensionProps = {
4
- width?: ViewStyle["width"];
5
- height?: ViewStyle["height"];
6
- minWidth?: ViewStyle["minWidth"];
7
- maxWidth?: ViewStyle["maxWidth"];
8
- minHeight?: ViewStyle["minHeight"];
9
- maxHeight?: ViewStyle["maxHeight"];
10
- aspectRatio?: ViewStyle["aspectRatio"];
11
- };
@@ -1,27 +0,0 @@
1
- import { ViewStyle } from "react-native";
2
-
3
- export type FlexProps = {
4
- flex?: ViewStyle["flex"];
5
- flexGrow?: ViewStyle["flexGrow"];
6
- flexShrink?: ViewStyle["flexShrink"];
7
- flexBasis?: ViewStyle["flexBasis"];
8
-
9
- flexDirection?: ViewStyle["flexDirection"];
10
- flexWrap?: ViewStyle["flexWrap"];
11
-
12
- justifyContent?: ViewStyle["justifyContent"];
13
- alignItems?: ViewStyle["alignItems"];
14
- alignSelf?: ViewStyle["alignSelf"];
15
- alignContent?: ViewStyle["alignContent"];
16
-
17
- gap?: ViewStyle["gap"];
18
- rowGap?: ViewStyle["rowGap"];
19
- columnGap?: ViewStyle["columnGap"];
20
-
21
- // positioning (often used with flex layouts)
22
- position?: ViewStyle["position"];
23
- top?: ViewStyle["top"];
24
- right?: ViewStyle["right"];
25
- bottom?: ViewStyle["bottom"];
26
- left?: ViewStyle["left"];
27
- };
@@ -1,11 +0,0 @@
1
- export * from "./border.types";
2
- export * from "./color.types";
3
- export * from "./components.types";
4
- export * from "./dimension.types";
5
- export * from "./flex.types";
6
- export * from "./shadow.types";
7
- export * from "./spacing.types";
8
- export * from "./style.types";
9
- export * from "./theme-provider.types";
10
- export * from "./tokens.types";
11
- export * from "./typography.types";
@@ -1,9 +0,0 @@
1
- import { ViewStyle } from 'react-native';
2
-
3
- export type ShadowProps = {
4
- shadowColor?: ViewStyle['shadowColor'];
5
- shadowOpacity?: ViewStyle['shadowOpacity'];
6
- shadowRadius?: ViewStyle['shadowRadius'];
7
- shadowOffset?: ViewStyle['shadowOffset'];
8
- elevation?: ViewStyle['elevation'];
9
- };
@@ -1,19 +0,0 @@
1
- import { ViewStyle } from 'react-native';
2
-
3
- export type SpacingProps = {
4
- margin?: ViewStyle['margin'];
5
- marginTop?: ViewStyle['marginTop'];
6
- marginBottom?: ViewStyle['marginBottom'];
7
- marginLeft?: ViewStyle['marginLeft'];
8
- marginRight?: ViewStyle['marginRight'];
9
- marginHorizontal?: ViewStyle['marginHorizontal'];
10
- marginVertical?: ViewStyle['marginVertical'];
11
-
12
- padding?: ViewStyle['padding'];
13
- paddingTop?: ViewStyle['paddingTop'];
14
- paddingBottom?: ViewStyle['paddingBottom'];
15
- paddingLeft?: ViewStyle['paddingLeft'];
16
- paddingRight?: ViewStyle['paddingRight'];
17
- paddingHorizontal?: ViewStyle['paddingHorizontal'];
18
- paddingVertical?: ViewStyle['paddingVertical'];
19
- };