react-native-mantine 0.8.0 → 0.10.0

package/src/theme/create-theme.ts

@@ -2,16 +2,14 @@ import { DEFAULT_COLORS, DEFAULT_THEME } from './default-theme';
 import type { MantineTheme } from './default-theme';
 
 export const createTheme = (theme?: Partial<MantineTheme>): MantineTheme => {
-  const { primaryShade = 7, other = {}, components = {} } = theme || {};
+  const { primaryShade, other = {}, components = {} } = theme || {};
   return {
     ...DEFAULT_THEME,
-    primaryShade: primaryShade,
+    // Use provided primaryShade or fall back to DEFAULT_THEME's value
+    primaryShade: primaryShade !== undefined ? primaryShade : DEFAULT_THEME.primaryShade,
     other: other,
     components: components,
     fontFamily: 'Nunito',
-    fontFamilyBold: 'Nunito Bold',
-    fontFamilySemiBold: 'Nunito SemiBold',
-    fontFamilyInput: 'Nunito',
     primaryColor: 'blue',
     secondaryColor: 'cyan',
     headings: {

package/src/theme/default-theme.ts

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import { attachFunctions } from './functions/attach-functions';
 import type { Palette } from './theme';
 
@@ -5,54 +6,42 @@ export const DEFAULT_COLORS: {
   [key: string]: Palette;
 } = {
   dark: [
-    '#2E2E2E',
-    '#2A2A2A',
-    '#262626',
-    '#232323',
-    '#1F1F1F',
-    '#1D1D1D',
-    '#1A1A1A',
-    '#171717',
-    '#151515',
-    '#131313',
+    '#C1C2C5',
+    '#A6A7AB',
+    '#909296',
+    '#5c5f66',
+    '#373A40',
+    '#2C2E33',
+    '#25262b',
+    '#1A1B1E',
+    '#141517',
+    '#101113',
   ],
 
   gray: [
-    '#F6F6F6',
-    '#E0E0E0',
-    '#CCCCCC',
-    '#B9B9B9',
-    '#A8A8A8',
-    '#999999',
-    '#8A8A8A',
-    '#7C7C7C',
-    '#707070',
-    '#646464',
-  ],
-  gray2: [
-    '#A3A3A3',
-    '#949494',
-    '#878787',
-    '#7A7A7A',
-    '#6F6F6F',
-    '#656565',
-    '#5C5C5C',
-    '#535353',
-    '#4B4B4B',
-    '#434343',
+    '#f8f9fa',
+    '#f1f3f5',
+    '#e9ecef',
+    '#dee2e6',
+    '#ced4da',
+    '#adb5bd',
+    '#868e96',
+    '#495057',
+    '#343a40',
+    '#212529',
   ],
 
   red: [
-    '#ffeaea',
-    '#fcd4d4',
-    '#f3a8a8',
-    '#eb7877',
-    '#e4504f',
-    '#e13735',
-    '#e02928',
-    '#c71c1c',
-    '#b21518',
-    '#9c0711',
+    '#fff5f5',
+    '#ffe3e3',
+    '#ffc9c9',
+    '#ffa8a8',
+    '#ff8787',
+    '#ff6b6b',
+    '#fa5252',
+    '#f03e3e',
+    '#e03131',
+    '#c92a2a',
   ],
 
   pink: [
@@ -147,16 +136,16 @@ export const DEFAULT_COLORS: {
   ],
 
   green: [
-    '#f4ffeb',
-    '#e7fdd5',
-    '#cbfca5',
-    '#aefb71',
-    '#95f948',
-    '#86f933',
-    '#7ef928',
-    '#6bdd1e',
-    '#5dc416',
-    '#4daa04',
+    '#ebfbee',
+    '#d3f9d8',
+    '#b2f2bb',
+    '#8ce99a',
+    '#69db7c',
+    '#51cf66',
+    '#40c057',
+    '#37b24d',
+    '#2f9e44',
+    '#2b8a3e',
   ],
 
   lime: [
@@ -186,28 +175,16 @@ export const DEFAULT_COLORS: {
   ],
 
   orange: [
-    '#fff6e2',
-    '#feecce',
-    '#fbd8a0',
-    '#f7c26d',
-    '#f4b042',
-    '#f3a426',
-    '#f29f16',
-    '#d78a07',
-    '#c07900',
-    '#a76800',
-  ],
-  secondary: [
-    '#f4f4f5',
-    '#e7e7e7',
-    '#cccccc',
-    '#afafaf',
-    '#989898',
-    '#898989',
-    '#818181',
-    '#6f6f6f',
-    '#616164',
-    '#545459',
+    '#fff4e6',
+    '#ffe8cc',
+    '#ffd8a8',
+    '#ffc078',
+    '#ffa94d',
+    '#ff922b',
+    '#fd7e14',
+    '#f76707',
+    '#e8590c',
+    '#d9480f',
   ],
 };
 
@@ -215,18 +192,66 @@ const tintColorLight = '#2f95dc';
 const tintColorDark = '#fff';
 
 export const _DEFAULT_THEME: MantineTheme = {
-  fontFamily: 'System font',
-  fontFamilyBold: 'System font',
-  fontFamilySemiBold: 'System font',
-  fontFamilyInput: 'System font',
+  // Font configuration matches Mantine web as closely as possible
+  // Web: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji'
+  // React Native maps to platform-specific system fonts
+  fontFamily: Platform.select({
+    ios: 'System', // San Francisco (equivalent to -apple-system)
+    android: 'Roboto', // Android system font
+    default: 'System',
+  }),
+  // Bold font family - iOS/Android don't always render fontWeight properly
+  // so we need separate font families for different weights
+  fontFamilyBold: Platform.select({
+    ios: 'System', // iOS handles bold via fontWeight with System font
+    android: 'Roboto-Bold', // Android needs explicit bold font family
+    default: 'System',
+  }),
+  // SemiBold font family
+  fontFamilySemiBold: Platform.select({
+    ios: 'System', // iOS handles semibold via fontWeight with System font
+    android: 'Roboto-Medium', // Android medium is equivalent to semibold
+    default: 'System',
+  }),
+  // Input font family - separate for form inputs
+  fontFamilyInput: Platform.select({
+    ios: 'System',
+    android: 'Roboto',
+    default: 'System',
+  }),
+  // Web: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace'
+  fontFamilyMonospace: Platform.select({
+    ios: 'Menlo', // iOS monospace font
+    android: 'monospace', // Android monospace font
+    default: 'monospace',
+  }),
+  fontWeights: {
+    thin: '100',
+    extralight: '200',
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+  },
   localColor: '#1F2863',
-  primaryShade: 6,
+  primaryShade: {
+    light: 6,
+    dark: 8,
+  },
   colors: DEFAULT_COLORS,
   primaryColor: 'blue',
   secondaryColor: 'black',
   secondaryBgColor: 'white',
   white: '#ffffff',
   black: '#000000',
+  defaultGradient: {
+    from: 'blue',
+    to: 'cyan',
+    deg: 45,
+  },
   light: {
     text: '#000',
     background: '#fdfdfd',
@@ -247,13 +272,29 @@ export const _DEFAULT_THEME: MantineTheme = {
   },
   components: {},
   other: {},
-  shadows: {
-    xs: '0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)',
-    sm: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 10px 15px -5px, rgba(0, 0, 0, 0.04) 0px 7px 7px -5px',
-    md: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px',
-    lg: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 28px 23px -7px, rgba(0, 0, 0, 0.04) 0px 12px 12px -7px',
-    xl: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 36px 28px -7px, rgba(0, 0, 0, 0.04) 0px 17px 17px -7px',
-  },
+  shadows: Platform.select({
+    ios: {
+      xs: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 1 },
+      sm: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2 },
+      md: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 4 },
+      lg: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2, shadowRadius: 8 },
+      xl: { shadowColor: '#000', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.25, shadowRadius: 16 },
+    },
+    android: {
+      xs: { elevation: 1 },
+      sm: { elevation: 2 },
+      md: { elevation: 4 },
+      lg: { elevation: 8 },
+      xl: { elevation: 12 },
+    },
+    default: {
+      xs: { elevation: 1 },
+      sm: { elevation: 2 },
+      md: { elevation: 4 },
+      lg: { elevation: 8 },
+      xl: { elevation: 12 },
+    },
+  }),
 
   fontSizes: {
     xs: 12,
@@ -279,9 +320,22 @@ export const _DEFAULT_THEME: MantineTheme = {
     lg: 20,
     xl: 24,
   },
+  breakpoints: {
+    xs: 576,
+    sm: 768,
+    md: 992,
+    lg: 1200,
+    xl: 1408,
+  },
   headings: {
-    fontFamily: 'System font',
-    fontWeight: 700,
+    // Headings use bold font family for proper weight rendering on iOS/Android
+    // On Android, using Roboto-Bold ensures proper bold rendering
+    fontFamily: Platform.select({
+      ios: 'System', // San Francisco (equivalent to -apple-system)
+      android: 'Roboto-Bold', // Android needs explicit bold font family
+      default: 'System',
+    }),
+    fontWeight: '700', // Matches Mantine web heading weight
     sizes: {
       h1: { fontSize: 34, lineHeight: 1.3, fontWeight: undefined },
       h2: { fontSize: 26, lineHeight: 1.35, fontWeight: undefined },
@@ -327,7 +381,7 @@ export type HeadingStyle = {
 
 export type MantineHeadings = {
   fontFamily?: string;
-  fontWeight?: number;
+  fontWeight?: string;
   sizes: {
     h1: HeadingStyle;
     h2: HeadingStyle;
@@ -338,23 +392,51 @@ export type MantineHeadings = {
   };
 };
 
+export type FontWeights = {
+  thin: string;
+  extralight: string;
+  light: string;
+  normal: string;
+  medium: string;
+  semibold: string;
+  bold: string;
+  extrabold: string;
+  black: string;
+};
+
 export type themeMode = 'dark' | 'light';
 
+type Shade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+
+export interface MantinePrimaryShade {
+  light: Shade;
+  dark: Shade;
+}
+
 export type MantineTheme = {
   fontFamily: string;
   fontFamilyBold: string;
+  fontFamilySemiBold: string;
+  fontFamilyInput: string;
+  fontFamilyMonospace: string;
+  fontWeights: FontWeights;
 
   localColor: string;
 
   currentMode?: themeMode;
   toggleMode?: () => void;
-  primaryShade: number;
+  primaryShade: Shade | MantinePrimaryShade;
   colors: { [key: string]: Palette };
   primaryColor: string;
   secondaryColor: string;
   secondaryBgColor: string;
   white: string;
   black: string;
+  defaultGradient?: {
+    from: string;
+    to: string;
+    deg: number;
+  };
 
   light: ColorScheme;
   dark: ColorScheme;
@@ -363,10 +445,16 @@ export type MantineTheme = {
     [key: string]: any;
   };
   shadows: {
-    [key: string]: string;
+    xs: any;
+    sm: any;
+    md: any;
+    lg: any;
+    xl: any;
+    [key: string]: any;
   };
   radius: ThemeSize;
   fontSizes: ThemeSize;
+  breakpoints: ThemeSize;
   headings: MantineHeadings;
   window: {
     width: number;

package/src/theme/functions/attach-functions.ts

@@ -10,12 +10,18 @@ export function attachFunctions(themeBase: any): any {
       variant: fns.variant(themeBase),
       themeColor: (color: string, shade?: number) =>
         fns.themeColor({ theme: themeBase, color, shade }),
+      shadow: fns.shadow,
       fontStyles: fns.fontStyles(themeBase),
       inputFontStyles: fns.inputFontStyles(themeBase),
       focusStyles: fns.focusStyles(themeBase),
       placeholderStyles: fns.placeholderStyles(themeBase),
       cover: fns.cover(themeBase),
       hover: fns.hover(themeBase),
+      lighten: fns.lighten,
+      darken: fns.darken,
+      dimmed: fns.dimmed(themeBase),
+      largerThan: fns.largerThan(themeBase),
+      smallerThan: fns.smallerThan(themeBase),
     },
     activeStyles: fns.activeStyles(themeBase),
   };

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

@@ -0,0 +1,62 @@
+import { Dimensions } from 'react-native';
+import type { MantineTheme } from '../../default-theme';
+
+/**
+ * Default breakpoint values in pixels
+ * These match Mantine web but converted to pixels (1em = 16px)
+ */
+const DEFAULT_BREAKPOINTS = {
+  xs: 576, // 36em * 16
+  sm: 768, // 48em * 16
+  md: 992, // 62em * 16
+  lg: 1200, // 75em * 16
+  xl: 1408, // 88em * 16
+};
+
+export type MantineNumberSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+
+/**
+ * Get breakpoint value from theme or default
+ */
+function getBreakpointValue(
+  breakpoint: MantineNumberSize,
+  theme: MantineTheme
+): number {
+  if (typeof breakpoint === 'number') {
+    return breakpoint;
+  }
+
+  // Check if theme has breakpoints defined
+  if (theme.breakpoints && theme.breakpoints[breakpoint]) {
+    const value = theme.breakpoints[breakpoint];
+    return typeof value === 'number' ? value : Number(value);
+  }
+
+  return DEFAULT_BREAKPOINTS[breakpoint as keyof typeof DEFAULT_BREAKPOINTS];
+}
+
+/**
+ * Returns true if current screen width is larger than the specified breakpoint
+ * @param theme - The Mantine theme
+ * @returns A function that takes a breakpoint and returns a boolean
+ */
+export function largerThan(theme: MantineTheme) {
+  return (breakpoint: MantineNumberSize): boolean => {
+    const { width } = Dimensions.get('window');
+    const breakpointValue = getBreakpointValue(breakpoint, theme);
+    return width >= breakpointValue;
+  };
+}
+
+/**
+ * Returns true if current screen width is smaller than the specified breakpoint
+ * @param theme - The Mantine theme
+ * @returns A function that takes a breakpoint and returns a boolean
+ */
+export function smallerThan(theme: MantineTheme) {
+  return (breakpoint: MantineNumberSize): boolean => {
+    const { width } = Dimensions.get('window');
+    const breakpointValue = getBreakpointValue(breakpoint, theme);
+    return width < breakpointValue;
+  };
+}

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

@@ -0,0 +1,16 @@
+import { toRgba } from '../../utils/to-rgba';
+
+/**
+ * Darkens a color by reducing its RGB values
+ * @param color - The color to darken (hex or rgb/rgba string)
+ * @param alpha - The amount to darken (0-1, where 1 is completely black)
+ * @returns rgba color string
+ */
+export function darken(color: string, alpha: number): string {
+  const { r, g, b, a } = toRgba(color);
+  const f = 1 - alpha;
+
+  const dark = (input: number) => Math.round(input * f);
+
+  return `rgba(${dark(r)}, ${dark(g)}, ${dark(b)}, ${a})`;
+}

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

@@ -0,0 +1,16 @@
+import type { MantineTheme } from '../../default-theme';
+
+/**
+ * Returns a dimmed text color based on the current color scheme
+ * Used for secondary text and less prominent UI elements
+ * @param theme - The Mantine theme
+ * @returns A function that returns the dimmed color
+ */
+export function dimmed(theme: MantineTheme) {
+  return () => {
+    const colorScheme = theme.currentMode || 'light';
+    return colorScheme === 'dark'
+      ? theme.colors.dark?.[2] || '#909296'
+      : theme.colors.gray?.[6] || '#868e96';
+  };
+}

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

@@ -0,0 +1,63 @@
+import type { MantineTheme } from '../../../default-theme';
+import type { MantineGradient, GradientConfig } from '../../../theme.d';
+import { themeColor } from '../theme-color/theme-color';
+import { getPrimaryShade } from '../primary-shade';
+
+/**
+ * Converts degrees to start/end coordinates for LinearGradient
+ * 0deg = bottom to top, 90deg = left to right, 180deg = top to bottom, 270deg = right to left
+ */
+function degToCoordinates(deg: number): { start: { x: number; y: number }; end: { x: number; y: number } } {
+  const angle = ((deg % 360) + 360) % 360; // Normalize to 0-360
+  const radians = (angle * Math.PI) / 180;
+
+  // Calculate end point on unit circle
+  const endX = Math.cos(radians - Math.PI / 2);
+  const endY = Math.sin(radians - Math.PI / 2);
+
+  // Normalize to 0-1 range
+  const start = {
+    x: (1 - endX) / 2,
+    y: (1 - endY) / 2,
+  };
+  const end = {
+    x: (1 + endX) / 2,
+    y: (1 + endY) / 2,
+  };
+
+  return { start, end };
+}
+
+/**
+ * Creates a gradient configuration for use with expo-linear-gradient
+ * Returns gradient colors and coordinates based on theme gradient settings
+ */
+export function gradient(theme: MantineTheme) {
+  return (payload?: MantineGradient): GradientConfig => {
+    const merged = {
+      from: payload?.from || theme.defaultGradient?.from || theme.primaryColor,
+      to: payload?.to || theme.defaultGradient?.to || theme.primaryColor,
+      deg: payload?.deg ?? theme.defaultGradient?.deg ?? 45,
+    };
+
+    const primaryShade = getPrimaryShade(theme);
+    const fromColor = themeColor({ theme, color: merged.from, shade: primaryShade });
+    const toColor = themeColor({ theme, color: merged.to, shade: primaryShade });
+
+    const { start, end } = degToCoordinates(merged.deg);
+
+    return {
+      colors: [fromColor, toColor],
+      start,
+      end,
+    };
+  };
+}
+
+/**
+ * Legacy function for web compatibility - returns CSS gradient string
+ * Not used in React Native but kept for API compatibility
+ */
+export function linearGradientCSS(deg: number, ...colors: string[]) {
+  return `linear-gradient(${deg}deg, ${colors.join(', ')})`;
+}

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

@@ -6,11 +6,10 @@ export const fontStyles = (theme: MantineTheme) => () => ({
 
 /**
  * Returns font styles specifically for input components
- * Uses fontFamilyInput if available, otherwise falls back to fontFamily
  */
 export const inputFontStyles = (theme: MantineTheme) => () => {
   return {
-    fontFamily: theme.fontFamilyInput || theme.fontFamily,
+    fontFamily: theme.fontFamily,
   };
 };
 

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

@@ -3,6 +3,13 @@ import { rgba } from './rgba';
 import { size } from './size';
 import { themeColor } from './theme-color/theme-color';
 import { variant } from './variant';
+import { getPrimaryShade } from './primary-shade';
+import { shadow } from './shadow';
+import { gradient } from './gradient/gradient';
+import { lighten } from './lighten';
+import { darken } from './darken';
+import { dimmed } from './dimmed';
+import { largerThan, smallerThan } from './breakpoints';
 import * as helpers from './helpers';
 
 export const fns = {
@@ -11,5 +18,13 @@ export const fns = {
   size,
   variant,
   themeColor,
+  getPrimaryShade,
+  shadow,
+  gradient,
+  lighten,
+  darken,
+  dimmed,
+  largerThan,
+  smallerThan,
   ...helpers,
 };

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

@@ -0,0 +1,15 @@
+import { toRgba } from '../../utils/to-rgba';
+
+/**
+ * Lightens a color by mixing it with white
+ * @param color - The color to lighten (hex or rgb/rgba string)
+ * @param alpha - The amount to lighten (0-1, where 1 is completely white)
+ * @returns rgba color string
+ */
+export function lighten(color: string, alpha: number): string {
+  const { r, g, b, a } = toRgba(color);
+
+  const light = (input: number) => Math.round(input + (255 - input) * alpha);
+
+  return `rgba(${light(r)}, ${light(g)}, ${light(b)}, ${a})`;
+}

package/src/theme/functions/fns/primary-shade.ts

@@ -0,0 +1,17 @@
+import type { MantineTheme } from '../../default-theme';
+
+/**
+ * Returns the appropriate primary shade based on the current color scheme
+ * Matches Mantine web implementation
+ */
+export function getPrimaryShade(
+  theme: MantineTheme,
+  colorScheme?: 'light' | 'dark'
+): number {
+  if (typeof theme.primaryShade === 'number') {
+    return theme.primaryShade;
+  }
+
+  const scheme = colorScheme || theme.currentMode || 'light';
+  return theme.primaryShade[scheme];
+}