react-native-mantine 0.13.0 → 0.15.0

package/src/theme/functions/fns/theme-color/color-utils.ts

@@ -0,0 +1,193 @@
+/**
+ * Color utility functions for custom color support
+ * Handles detection and manipulation of custom hex/rgb/rgba colors
+ */
+
+/**
+ * Check if a color string is a custom color value (not a palette key)
+ *
+ * Custom colors include:
+ * - Hex colors: #fff, #ffffff
+ * - RGB colors: rgb(255, 255, 255)
+ * - RGBA colors: rgba(255, 255, 255, 0.5)
+ * - HSL colors: hsl(0, 100%, 50%)
+ * - HSLA colors: hsla(0, 100%, 50%, 0.5)
+ * - CSS named colors like 'transparent', 'currentColor'
+ *
+ * @param color - Color string to check
+ * @returns true if color is a custom value, false if it might be a palette key
+ */
+export function isCustomColor(color: string): boolean {
+  if (!color || typeof color !== 'string') {
+    return false;
+  }
+
+  // Check for hex colors
+  if (color.startsWith('#')) {
+    return true;
+  }
+
+  // Check for rgb/rgba colors
+  if (color.startsWith('rgb')) {
+    return true;
+  }
+
+  // Check for hsl/hsla colors
+  if (color.startsWith('hsl')) {
+    return true;
+  }
+
+  // Check for CSS keywords
+  if (color === 'transparent' || color === 'currentColor') {
+    return true;
+  }
+
+  // Otherwise, assume it's a palette key or CSS named color
+  return false;
+}
+
+/**
+ * Generate a lighter shade of a custom color
+ * Used when shade 0-5 is requested for custom colors
+ *
+ * @param color - Base color (hex or rgb) - treated as shade 6
+ * @param shadeIndex - Shade index (0-5)
+ * @returns Lighter color string
+ */
+export function generateLighterShade(color: string, shadeIndex: number): string {
+  // For shades 0-5, lighten the color (base is shade 6)
+  // shade 0 = lightest (90% lighter), shade 5 = slightly lighter (15% lighter)
+  const lightenAmount = (6 - shadeIndex) * 0.15; // 0.9 to 0.15
+
+  // Use the lighten algorithm from lighten.ts
+  const rgba = parseColorToRgba(color);
+  if (!rgba) return color;
+
+  const { r, g, b, a } = rgba;
+  const light = (input: number) => Math.round(input + (255 - input) * lightenAmount);
+
+  return `rgba(${light(r)}, ${light(g)}, ${light(b)}, ${a})`;
+}
+
+/**
+ * Generate a darker shade of a custom color
+ * Used when shade 7-9 is requested for custom colors
+ *
+ * @param color - Base color (hex or rgb) - treated as shade 6
+ * @param shadeIndex - Shade index (7-9)
+ * @returns Darker color string
+ */
+export function generateDarkerShade(color: string, shadeIndex: number): string {
+  // For shades 7-9, darken the color (base is shade 6)
+  // shade 7 = slightly darker (10% darker), shade 9 = darkest (30% darker)
+  const darkenAmount = (shadeIndex - 6) * 0.1; // 0.1 to 0.3
+
+  // Use the darken algorithm from darken.ts
+  const rgba = parseColorToRgba(color);
+  if (!rgba) return color;
+
+  const { r, g, b, a } = rgba;
+  const f = 1 - darkenAmount;
+  const dark = (input: number) => Math.round(input * f);
+
+  return `rgba(${dark(r)}, ${dark(g)}, ${dark(b)}, ${a})`;
+}
+
+/**
+ * Get a shade variation of a custom color
+ *
+ * For custom colors, we treat shade 6 as the base color (no modification).
+ * This aligns with the default primaryShade for light mode.
+ * Shades 0-5 are lighter, shades 7-9 are darker.
+ *
+ * @param color - Base color (hex or rgb)
+ * @param shade - Shade index (0-9), where 6 is the base color
+ * @returns Color at the requested shade
+ */
+export function getCustomColorShade(color: string, shade: number): string {
+  // Shade 6 is treated as the base color (most common primaryShade for light mode)
+  if (shade === 6) {
+    return color;
+  }
+
+  // Lighter shades (0-5)
+  if (shade < 6) {
+    return generateLighterShade(color, shade);
+  }
+
+  // Darker shades (7-9)
+  return generateDarkerShade(color, shade);
+}
+
+/**
+ * Parse color string to RGBA object
+ * Supports hex and rgb/rgba formats
+ */
+interface RGBA {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+function parseColorToRgba(color: string): RGBA | null {
+  // Handle hex colors
+  if (color.startsWith('#')) {
+    return hexToRgba(color);
+  }
+
+  // Handle rgb/rgba colors
+  if (color.startsWith('rgb')) {
+    return rgbStringToRgba(color);
+  }
+
+  return null;
+}
+
+function isHexColor(hex: string): boolean {
+  const HEX_REGEXP = /^#?([0-9A-F]{3}){1,2}$/i;
+  return HEX_REGEXP.test(hex);
+}
+
+function hexToRgba(color: string): RGBA | null {
+  if (!isHexColor(color)) {
+    return null;
+  }
+
+  let hexString = color.replace('#', '');
+
+  // Handle shorthand hex (#fff -> #ffffff)
+  if (hexString.length === 3) {
+    const shorthandHex = hexString.split('');
+    hexString = [
+      shorthandHex[0],
+      shorthandHex[0],
+      shorthandHex[1],
+      shorthandHex[1],
+      shorthandHex[2],
+      shorthandHex[2],
+    ].join('');
+  }
+
+  const parsed = parseInt(hexString, 16);
+  const r = (parsed >> 16) & 255;
+  const g = (parsed >> 8) & 255;
+  const b = parsed & 255;
+
+  return { r, g, b, a: 1 };
+}
+
+function rgbStringToRgba(color: string): RGBA | null {
+  const parts = color.replace(/[^0-9,.]/g, '').split(',').map(Number);
+
+  if (parts.length < 3) {
+    return null;
+  }
+
+  const r = parts[0] || 0;
+  const g = parts[1] || 0;
+  const b = parts[2] || 0;
+  const a = parts[3] !== undefined ? parts[3] : 1;
+
+  return { r, g, b, a };
+}

package/src/theme/functions/fns/theme-color/theme-color.ts

@@ -1,38 +1,106 @@
-import type { MantineTheme } from '../../../default-theme';
-import type { MantineColor } from '../../../types';
+/**
+ * Theme color helper function
+ * Retrieves colors from theme palette with proper shade handling
+ * Aligned with Mantine web's themeColor implementation
+ *
+ * Now supports custom color values (hex, rgb, rgba) that are not in the theme palette.
+ * Custom colors can be shaded on the fly using color manipulation algorithms.
+ */
+
+import type { MantineThemeBase, MantineColor, Shade } from '../../../types';
 import { getPrimaryShade } from '../primary-shade';
+import { isCustomColor, getCustomColorShade } from './color-utils';
 
 export interface ThemeColorInput {
-  theme: MantineTheme;
+  theme: MantineThemeBase;
   color: MantineColor;
-  shade?: number;
+  shade?: Shade;
+  primaryFallback?: boolean;
 }
 
-export function themeColor({ theme, color, shade }: ThemeColorInput): string {
+/**
+ * Get a color value from the theme
+ *
+ * @param theme - Mantine theme object
+ * @param color - Color name or CSS color value (now supports hex/rgb/rgba)
+ * @param shade - Optional shade (0-9). If not provided, uses primaryShade
+ * @param primaryFallback - If true and color not found, falls back to primary color
+ * @returns Color string value
+ *
+ * @example
+ * // Get blue at primary shade (6 for light mode, 8 for dark mode)
+ * themeColor({ theme, color: 'blue' })
+ *
+ * @example
+ * // Get blue at specific shade
+ * themeColor({ theme, color: 'blue', shade: 5 })
+ *
+ * @example
+ * // Pass through CSS color values
+ * themeColor({ theme, color: '#ff0000' }) // returns '#ff0000'
+ *
+ * @example
+ * // Use custom hex color with shade
+ * themeColor({ theme, color: '#FF5733', shade: 7 }) // returns darker version
+ *
+ * @example
+ * // Use custom rgb color with shade
+ * themeColor({ theme, color: 'rgb(255, 87, 51)', shade: 3 }) // returns lighter version
+ *
+ * @example
+ * // Use primary color fallback
+ * themeColor({ theme, color: 'unknown', primaryFallback: true })
+ */
+export function themeColor({
+  theme,
+  color,
+  shade,
+  primaryFallback = false,
+}: ThemeColorInput): string {
+  // Handle undefined/null color
   if (!color) {
-    return '';
+    return primaryFallback ? themeColor({ theme, color: theme.primaryColor, shade }) : '';
   }
 
-  // If it's a hex/rgb color, return as is
-  if (
-    color.startsWith('#') ||
-    color.startsWith('rgb') ||
-    color.startsWith('hsl')
-  ) {
+  // Check if this is a custom color value (hex, rgb, rgba, etc.)
+  if (isCustomColor(color)) {
+    // If shade is specified, generate a shade variation
+    if (shade !== undefined) {
+      return getCustomColorShade(color, shade);
+    }
+    // Otherwise return the color as-is
     return color;
   }
 
-  // Get from theme colors
+  // Get color palette from theme
   const colorPalette = theme.colors[color];
 
+  // If color not in palette
   if (!colorPalette) {
-    // If color not in palette, return as is (might be a CSS color name)
+    // Try primary fallback if enabled
+    if (primaryFallback && color !== theme.primaryColor) {
+      return themeColor({ theme, color: theme.primaryColor, shade });
+    }
+    // Otherwise return the color string as-is (might be a named CSS color)
     return color;
   }
 
-  // Use provided shade or get from theme based on color scheme
+  // Determine which shade to use
   const colorShade = shade !== undefined ? shade : getPrimaryShade(theme);
 
-  // Return the color at the specified shade
-  return colorPalette[colorShade] || colorPalette[0] || color;
+  // Get the color at the specified shade
+  const resolvedColor = colorPalette[colorShade];
+
+  // Return the color or fall back to first shade
+  return resolvedColor || colorPalette[0] || color;
+}
+
+/**
+ * Curried version of themeColor for use with theme.fn
+ * @internal
+ */
+export function createThemeColorFunction(theme: MantineThemeBase) {
+  return (color: MantineColor, shade?: Shade, primaryFallback?: boolean): string => {
+    return themeColor({ theme, color, shade, primaryFallback });
+  };
 }

package/src/theme/functions/fns/variant.ts

@@ -1,58 +1,88 @@
-import type { MantineTheme } from '../../default-theme';
-import type { MantineColor } from '../../types';
+/**
+ * Variant styles generator
+ * Creates component variant styles for React Native
+ * Aligned with Mantine web's variant system
+ *
+ * Now supports custom color values (hex, rgb, rgba) in addition to theme palette colors.
+ * Custom colors are automatically shaded using color manipulation algorithms.
+ */
+
+import type { MantineThemeBase, Shade, MantineColor, VariantInput, VariantOutput } from '../../types';
 import { themeColor } from './theme-color/theme-color';
 import { getPrimaryShade } from './primary-shade';
 
-export interface VariantInput {
-  variant:
-    | 'filled'
-    | 'outline'
-    | 'light'
-    | 'white'
-    | 'default'
-    | 'subtle'
-    | 'gradient';
-  color?: MantineColor;
-  gradient?: { from: string; to: string; deg?: number };
-  primaryFallback?: boolean;
-}
-
-export interface VariantOutput {
-  background: string;
-  color: string;
-  border: string;
-  hover?: string;
-}
-
-export const variant = (theme: MantineTheme) => (input: VariantInput): VariantOutput => {
-  const {
-    variant,
-    color = theme.primaryColor,
-  } = input;
+/**
+ * Generate variant styles for components
+ *
+ * Supports the following variants:
+ * - filled: Filled background with primary color
+ * - light: Light background with colored text
+ * - outline: Transparent background with colored border
+ * - subtle: Transparent background with colored text
+ * - white: White background (useful for dark mode)
+ * - default: Default gray background
+ * - gradient: Transparent background for gradient overlays
+ * - transparent: Fully transparent
+ *
+ * @param theme - Mantine theme object
+ * @param input - Variant configuration
+ * @returns Style object with background, color, border, and optional hover
+ *
+ * @example
+ * // Filled variant with blue color
+ * variant(theme)({ variant: 'filled', color: 'blue' })
+ * // Returns: { background: '#228be6', color: '#fff', border: '#228be6' }
+ *
+ * @example
+ * // Light variant with red color
+ * variant(theme)({ variant: 'light', color: 'red' })
+ * // Returns: { background: '#fff5f5', color: '#f03e3e', border: 'transparent' }
+ *
+ * @example
+ * // Filled variant with custom hex color
+ * variant(theme)({ variant: 'filled', color: '#FF5733' })
+ * // Returns: { background: '#FF5733', color: '#fff', border: '#FF5733', hover: darker('#FF5733') }
+ *
+ * @example
+ * // Light variant with custom rgb color
+ * variant(theme)({ variant: 'light', color: 'rgb(255, 87, 51)' })
+ * // Returns: { background: lighter('rgb(...)'), color: darker('rgb(...)'), border: 'transparent' }
+ */
+export const variant = (theme: MantineThemeBase) => (input: VariantInput): VariantOutput => {
+  const { variant, color = theme.primaryColor, primaryFallback = false } = input;
 
   const primaryShade = getPrimaryShade(theme);
-  const getColor = (c: string, shade: number) => themeColor({ theme, color: c, shade });
+
+  /**
+   * Helper to get color at specific shade
+   */
+  const getColor = (c: MantineColor, shade: Shade) =>
+    themeColor({ theme, color: c, shade, primaryFallback });
 
   switch (variant) {
+    // Filled variant - solid background with white text
     case 'filled': {
       const filledColor = getColor(color, primaryShade);
       return {
         background: filledColor,
-        color: '#fff',
+        color: theme.white,
         border: filledColor,
-        hover: getColor(color, primaryShade > 0 ? primaryShade + 1 : primaryShade),
+        hover: getColor(color, Math.min(primaryShade + 1, 9) as Shade),
       };
     }
 
+    // Light variant - light background with colored text
     case 'light': {
+      const textShade = primaryShade > 6 ? primaryShade : 7;
       return {
         background: getColor(color, 0),
-        color: getColor(color, primaryShade > 6 ? primaryShade : 7),
+        color: getColor(color, textShade),
         border: 'transparent',
         hover: getColor(color, 1),
       };
     }
 
+    // Outline variant - transparent with colored border and text
     case 'outline': {
       const outlineColor = getColor(color, primaryShade);
       return {
@@ -63,6 +93,7 @@ export const variant = (theme: MantineTheme) => (input: VariantInput): VariantOu
       };
     }
 
+    // Subtle variant - transparent with colored text
     case 'subtle': {
       return {
         background: 'transparent',
@@ -72,41 +103,72 @@ export const variant = (theme: MantineTheme) => (input: VariantInput): VariantOu
       };
     }
 
+    // White variant - white background with colored text
     case 'white': {
       return {
-        background: '#fff',
+        background: theme.white,
         color: getColor(color, primaryShade),
-        border: '#fff',
-        hover: '#f8f9fa',
+        border: theme.white,
+        hover: theme.colors.gray?.[0] || '#f8f9fa',
       };
     }
 
+    // Default variant - gray background
     case 'default': {
+      const isDark = theme.colorScheme === 'dark';
+
+      if (isDark) {
+        return {
+          background: theme.colors.dark?.[6] || '#25262b',
+          color: theme.white,
+          border: theme.colors.dark?.[4] || '#373A40',
+          hover: theme.colors.dark?.[5] || '#2C2E33',
+        };
+      }
+
       return {
-        background: theme.light.background,
-        color: theme.light.text,
+        background: theme.white,
+        color: theme.black,
         border: theme.colors.gray?.[4] || '#ced4da',
         hover: theme.colors.gray?.[0] || '#f8f9fa',
       };
     }
 
+    // Gradient variant - transparent background for gradient overlays
+    // The actual gradient rendering is handled by LinearGradient component
     case 'gradient': {
-      // For gradient variant, return transparent background
-      // The actual gradient rendering is handled by LinearGradient component
-      // We just need to provide the text color and border
       return {
         background: 'transparent',
-        color: '#fff',
+        color: theme.white,
+        border: 'transparent',
+      };
+    }
+
+    // Transparent variant - fully transparent
+    case 'transparent': {
+      return {
+        background: 'transparent',
+        color: getColor(color, primaryShade),
         border: 'transparent',
       };
     }
 
+    // Default fallback - same as filled variant
     default: {
+      const filledColor = getColor(color, primaryShade);
       return {
-        background: getColor(color, primaryShade),
-        color: '#fff',
-        border: getColor(color, primaryShade),
+        background: filledColor,
+        color: theme.white,
+        border: filledColor,
       };
     }
   }
+};
+
+/**
+ * Curried version of variant for use with theme.fn
+ * @internal
+ */
+export function createVariantFunction(theme: MantineThemeBase) {
+  return variant(theme);
 }

package/src/theme/functions/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Theme functions module
+ * Exports all theme-related utilities and functions
+ */
+
+export { attachFunctions } from './attach-functions';
+export * from './fns';
+export * from './fns/primary-shade';
+export * from './fns/theme-color/theme-color';
+export * from './fns/variant';
+export * from './fns/rgba';
+export * from './fns/radius';
+export * from './fns/size';
+export * from './fns/shadow';
+export * from './fns/gradient/gradient';
+export * from './fns/lighten';
+export * from './fns/darken';
+export * from './fns/dimmed';
+export * from './fns/breakpoints';

package/src/theme/index.ts

@@ -0,0 +1,91 @@
+/**
+ * Mantine React Native Theme System
+ * Main export file for theme-related types and utilities
+ */
+
+// Type exports
+export type {
+  // Color types
+  Shade,
+  MantineColorsTuple,
+  DefaultMantineColor,
+  MantineColor,
+  MantineThemeColors,
+  MantinePrimaryShade,
+  ColorScheme,
+  ColorSchemeValue,
+  ResolveColorSchemeValue,
+
+  // Size types
+  MantineSize,
+  MantineNumberSize,
+  MantineSizes,
+
+  // Gradient types
+  MantineGradient,
+  GradientConfig,
+
+  // Typography types
+  FontWeights,
+  HeadingStyle,
+  MantineHeadings,
+
+  // Shadow types
+  IOSShadow,
+  AndroidShadow,
+  MantineShadow,
+  MantineShadows,
+
+  // Variant types
+  MantineVariant,
+  VariantInput,
+  VariantOutput,
+
+  // Theme types
+  ThemeComponent,
+  MantineThemeComponents,
+  MantineThemeFunctions,
+  MantineTheme,
+  MantineThemeBase,
+  MantineThemeOverride,
+
+  // Utility types
+  DeepPartial,
+  ThemeableStyleProps,
+  SpacingValue,
+  Variants,
+  DefaultProps,
+} from './types';
+
+// Theme exports
+export { DEFAULT_COLORS } from './default-colors';
+export { DEFAULT_THEME, _DEFAULT_THEME } from './default-theme';
+export { createTheme } from './create-theme';
+
+// Function exports
+export {
+  attachFunctions,
+  getPrimaryShade,
+  getPrimaryColor,
+  themeColor,
+  variant,
+  rgba,
+  radius,
+  size,
+  shadow,
+  gradient,
+  lighten,
+  darken,
+  dimmed,
+  largerThan,
+  smallerThan,
+  colorSchemeValue,
+  resolveColorSchemeValue,
+  resolveColorSchemeConstants,
+  isColorSchemeValue,
+} from './functions';
+
+// Utility exports
+export { createStyles } from './create-styles';
+export { filterProps } from './filter-props';
+export { getSize } from './get-size';

package/src/theme/theme-provider.tsx

@@ -1,4 +1,3 @@
-import { get } from 'lodash-es';
 import React, {
   createContext,
   useContext,
@@ -13,9 +12,8 @@ import type { ColorSchemeName } from 'react-native';
 import type { ReactNode } from 'react';
 
 import { Layout } from './constants';
-import type { MantineTheme } from './default-theme';
+import type { MantineTheme } from './types';
 import { createTheme } from './create-theme';
-import { getPrimaryShade } from './functions/fns/primary-shade';
 
 import { filterProps } from './filter-props';
 import useCachedResources from '../hooks/useCachedResources';
@@ -37,7 +35,6 @@ export const ThemeProvider = ({
   theme: MantineTheme;
   forceMode?: 'light' | 'dark';
 }): React.ReactElement => {
-  const { colors, primaryColor, secondaryColor } = theme;
   const systemDarkMode = Appearance.getColorScheme();
   const [currentMode, setCurrentMode] = useState<'light' | 'dark'>(
     forceMode || systemDarkMode || 'light'
@@ -60,21 +57,9 @@ export const ThemeProvider = ({
   }, [currentMode]);
 
   const memoValue = useMemo(() => {
-    const darkTheme = {
-      light: theme.dark,
-      dark: theme.light,
-    };
-
-    // Get the primary shade for the current mode
-    const themeWithMode = { ...theme, currentMode };
-    const shade = getPrimaryShade(themeWithMode);
-
     return {
       ...theme,
-      primaryTextColor: get(colors, `${primaryColor}.${shade}`, 'black'),
-      primaryBgColor: get(colors, `${primaryColor}.${shade}`),
-      secondaryBgColor: get(colors, `${secondaryColor}.0`),
-      ...(currentMode === 'dark' ? darkTheme : {}),
+      colorScheme: currentMode,
       window: Layout.window,
       isSmallDevice: Layout.isSmallDevice,
       screen: Layout.screen,