@metacells/mcellui-core 0.1.0

package/src/theme/typography.ts

@@ -0,0 +1,389 @@
+/**
+ * Typography Tokens
+ *
+ * Consistent typography scale for all text elements.
+ * Based on iOS Human Interface Guidelines with
+ * consideration for React Native defaults.
+ *
+ * Supports Geist font family when loaded, falls back to system fonts.
+ *
+ * Usage:
+ * ```tsx
+ * const { typography, fontFamily } = useTheme();
+ * <Text style={typography.body} />
+ * <Text style={{ fontFamily: fontFamily.sans, fontSize: fontSize.lg }} />
+ * ```
+ */
+
+import { TextStyle, Platform } from 'react-native';
+
+// =============================================================================
+// Font Sizes
+// =============================================================================
+
+export const fontSize = {
+  /** 10px - fine print */
+  '2xs': 10,
+  /** 11px - captions, labels */
+  xs: 11,
+  /** 12px - small text, badges */
+  sm: 12,
+  /** 14px - secondary text */
+  base: 14,
+  /** 16px - body text (default) */
+  md: 16,
+  /** 18px - emphasized body */
+  lg: 18,
+  /** 20px - small headings */
+  xl: 20,
+  /** 24px - section headings */
+  '2xl': 24,
+  /** 30px - page headings */
+  '3xl': 30,
+  /** 36px - large headings */
+  '4xl': 36,
+  /** 48px - display */
+  '5xl': 48,
+} as const;
+
+export type FontSizeKey = keyof typeof fontSize;
+
+// =============================================================================
+// Font Weights
+// =============================================================================
+
+export const fontWeight = {
+  /** 100 */
+  thin: '100' as const,
+  /** 200 */
+  extralight: '200' as const,
+  /** 300 */
+  light: '300' as const,
+  /** 400 - body text */
+  normal: '400' as const,
+  /** 500 - slightly emphasized */
+  medium: '500' as const,
+  /** 600 - buttons, labels */
+  semibold: '600' as const,
+  /** 700 - headings */
+  bold: '700' as const,
+  /** 800 */
+  extrabold: '800' as const,
+  /** 900 */
+  black: '900' as const,
+} as const;
+
+export type FontWeightKey = keyof typeof fontWeight;
+
+// =============================================================================
+// Line Heights
+// =============================================================================
+
+export const lineHeight = {
+  /** Tight: 1.0 */
+  none: 1,
+  /** Tight: 1.25 */
+  tight: 1.25,
+  /** Snug: 1.375 */
+  snug: 1.375,
+  /** Normal: 1.5 (default) */
+  normal: 1.5,
+  /** Relaxed: 1.625 */
+  relaxed: 1.625,
+  /** Loose: 2.0 */
+  loose: 2,
+} as const;
+
+export type LineHeightKey = keyof typeof lineHeight;
+
+// =============================================================================
+// Letter Spacing
+// =============================================================================
+
+export const letterSpacing = {
+  tighter: -0.8,
+  tight: -0.4,
+  normal: 0,
+  wide: 0.4,
+  wider: 0.8,
+  widest: 1.6,
+} as const;
+
+export type LetterSpacingKey = keyof typeof letterSpacing;
+
+// =============================================================================
+// Font Family
+// =============================================================================
+
+/**
+ * System font fallbacks for when custom fonts aren't loaded.
+ */
+export const systemFonts = {
+  /** Sans-serif system font */
+  sans: Platform.select({
+    ios: 'System',
+    android: 'Roboto',
+    default: 'System',
+  }) as string,
+  /** Monospace system font */
+  mono: Platform.select({
+    ios: 'Menlo',
+    android: 'monospace',
+    default: 'monospace',
+  }) as string,
+} as const;
+
+/**
+ * Semantic font tokens.
+ *
+ * Three fonts cover all use cases:
+ * - `sans`: Body text, UI elements (default)
+ * - `heading`: Headlines h1-h4 (can be display/serif font)
+ * - `mono`: Code blocks, monospace text
+ *
+ * @example
+ * ```tsx
+ * // Use defaults (Geist)
+ * <ThemeProvider>
+ *
+ * // Custom fonts
+ * <ThemeProvider fonts={{
+ *   sans: 'Inter_400Regular',
+ *   heading: 'PlayfairDisplay_700Bold',
+ *   mono: 'FiraCode_400Regular',
+ * }}>
+ * ```
+ */
+export interface Fonts {
+  /** Body text, UI elements */
+  sans: string;
+  /** Headlines (h1-h4) - defaults to bold variant of sans */
+  heading: string;
+  /** Code, monospace text */
+  mono: string;
+}
+
+/**
+ * Default fonts using Geist font family.
+ * Used when no custom fonts are provided to ThemeProvider.
+ */
+export const defaultFonts: Fonts = {
+  sans: 'Geist_400Regular',
+  heading: 'Geist_700Bold',
+  mono: 'GeistMono_400Regular',
+};
+
+/**
+ * Legacy fontFamily export for backwards compatibility.
+ * @deprecated Use `fonts` from useTheme() instead
+ */
+export const fontFamily = {
+  /** Sans-serif: Geist or system default */
+  sans: systemFonts.sans,
+  /** Monospace: Geist Mono or system default */
+  mono: systemFonts.mono,
+  /** System font - always available */
+  system: systemFonts.sans,
+} as const;
+
+/**
+ * Font family with weight suffix for Geist.
+ * Use these when Geist fonts are loaded.
+ */
+export const geistFontFamily = {
+  // Sans variants
+  'sans-thin': 'Geist_100Thin',
+  'sans-extralight': 'Geist_200ExtraLight',
+  'sans-light': 'Geist_300Light',
+  'sans-regular': 'Geist_400Regular',
+  'sans-medium': 'Geist_500Medium',
+  'sans-semibold': 'Geist_600SemiBold',
+  'sans-bold': 'Geist_700Bold',
+  'sans-extrabold': 'Geist_800ExtraBold',
+  'sans-black': 'Geist_900Black',
+  // Mono variants
+  'mono-thin': 'GeistMono_100Thin',
+  'mono-extralight': 'GeistMono_200ExtraLight',
+  'mono-light': 'GeistMono_300Light',
+  'mono-regular': 'GeistMono_400Regular',
+  'mono-medium': 'GeistMono_500Medium',
+  'mono-semibold': 'GeistMono_600SemiBold',
+  'mono-bold': 'GeistMono_700Bold',
+  'mono-extrabold': 'GeistMono_800ExtraBold',
+  'mono-black': 'GeistMono_900Black',
+} as const;
+
+export type FontFamilyKey = keyof typeof fontFamily;
+export type GeistFontFamilyKey = keyof typeof geistFontFamily;
+
+// =============================================================================
+// Typography Presets
+// =============================================================================
+
+/**
+ * Typography preset styles type.
+ */
+export interface Typography {
+  display: TextStyle;
+  h1: TextStyle;
+  h2: TextStyle;
+  h3: TextStyle;
+  h4: TextStyle;
+  bodyLg: TextStyle;
+  body: TextStyle;
+  bodySm: TextStyle;
+  label: TextStyle;
+  labelSm: TextStyle;
+  button: TextStyle;
+  buttonSm: TextStyle;
+  buttonLg: TextStyle;
+  caption: TextStyle;
+  overline: TextStyle;
+  badge: TextStyle;
+  code: TextStyle;
+}
+
+export type TypographyKey = keyof Typography;
+
+/**
+ * Creates typography presets with the given fonts.
+ * Used internally by ThemeProvider to generate typography styles.
+ */
+export function createTypography(fonts: Fonts): Typography {
+  return {
+    // Display/Hero
+    display: {
+      fontFamily: fonts.heading,
+      fontSize: fontSize['5xl'],
+      fontWeight: fontWeight.bold,
+      lineHeight: fontSize['5xl'] * lineHeight.tight,
+      letterSpacing: letterSpacing.tight,
+    },
+
+    // Headings - use heading font
+    h1: {
+      fontFamily: fonts.heading,
+      fontSize: fontSize['3xl'],
+      fontWeight: fontWeight.bold,
+      lineHeight: fontSize['3xl'] * lineHeight.tight,
+      letterSpacing: letterSpacing.tight,
+    },
+
+    h2: {
+      fontFamily: fonts.heading,
+      fontSize: fontSize['2xl'],
+      fontWeight: fontWeight.bold,
+      lineHeight: fontSize['2xl'] * lineHeight.tight,
+    },
+
+    h3: {
+      fontFamily: fonts.heading,
+      fontSize: fontSize.xl,
+      fontWeight: fontWeight.semibold,
+      lineHeight: fontSize.xl * lineHeight.snug,
+    },
+
+    h4: {
+      fontFamily: fonts.heading,
+      fontSize: fontSize.lg,
+      fontWeight: fontWeight.semibold,
+      lineHeight: fontSize.lg * lineHeight.snug,
+    },
+
+    // Body - use sans font
+    bodyLg: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.lg,
+      fontWeight: fontWeight.normal,
+      lineHeight: fontSize.lg * lineHeight.normal,
+    },
+
+    body: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.md,
+      fontWeight: fontWeight.normal,
+      lineHeight: fontSize.md * lineHeight.normal,
+    },
+
+    bodySm: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.base,
+      fontWeight: fontWeight.normal,
+      lineHeight: fontSize.base * lineHeight.normal,
+    },
+
+    // UI Text - use sans font
+    label: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.base,
+      fontWeight: fontWeight.medium,
+      lineHeight: fontSize.base * lineHeight.snug,
+    },
+
+    labelSm: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.sm,
+      fontWeight: fontWeight.medium,
+      lineHeight: fontSize.sm * lineHeight.snug,
+    },
+
+    button: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.md,
+      fontWeight: fontWeight.semibold,
+      lineHeight: fontSize.md * lineHeight.none,
+    },
+
+    buttonSm: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.base,
+      fontWeight: fontWeight.semibold,
+      lineHeight: fontSize.base * lineHeight.none,
+    },
+
+    buttonLg: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.lg,
+      fontWeight: fontWeight.semibold,
+      lineHeight: fontSize.lg * lineHeight.none,
+    },
+
+    // Small text - use sans font
+    caption: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.xs,
+      fontWeight: fontWeight.normal,
+      lineHeight: fontSize.xs * lineHeight.normal,
+    },
+
+    overline: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.xs,
+      fontWeight: fontWeight.semibold,
+      lineHeight: fontSize.xs * lineHeight.normal,
+      letterSpacing: letterSpacing.wider,
+      textTransform: 'uppercase',
+    },
+
+    badge: {
+      fontFamily: fonts.sans,
+      fontSize: fontSize.sm,
+      fontWeight: fontWeight.medium,
+      lineHeight: fontSize.sm * lineHeight.none,
+    },
+
+    // Code - use mono font
+    code: {
+      fontFamily: fonts.mono,
+      fontSize: fontSize.sm,
+      fontWeight: fontWeight.normal,
+      lineHeight: fontSize.sm * lineHeight.normal,
+    },
+  };
+}
+
+/**
+ * Default typography presets using default fonts.
+ * @deprecated Use typography from useTheme() for font customization support
+ */
+export const typography = createTypography(defaultFonts);

package/src/tokens/colors.ts

@@ -0,0 +1,67 @@
+/**
+ * Design Tokens: Colors
+ *
+ * Inspired by:
+ * - iOS 17+ Dynamic Colors
+ * - Arc Browser palette
+ * - Linear App design system
+ */
+
+export const colors = {
+  // Neutral scale (gray)
+  neutral: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0a0a0a',
+  },
+
+  // Primary (customizable accent)
+  primary: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+    950: '#172554',
+  },
+
+  // Semantic colors
+  success: {
+    light: '#4ade80',
+    DEFAULT: '#22c55e',
+    dark: '#16a34a',
+  },
+
+  warning: {
+    light: '#fbbf24',
+    DEFAULT: '#f59e0b',
+    dark: '#d97706',
+  },
+
+  error: {
+    light: '#f87171',
+    DEFAULT: '#ef4444',
+    dark: '#dc2626',
+  },
+
+  // Special
+  white: '#ffffff',
+  black: '#000000',
+  transparent: 'transparent',
+} as const;
+
+export type Colors = typeof colors;
+export type ColorKey = keyof Colors;

package/src/tokens/index.ts

@@ -0,0 +1,29 @@
+export { colors, type Colors, type ColorKey } from './colors';
+export { spacing, type Spacing, type SpacingKey } from './spacing';
+export {
+  fontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+  type FontFamily,
+  type FontSize,
+  type FontWeight,
+  type LineHeight,
+  type LetterSpacing,
+} from './typography';
+export { radius, type Radius, type RadiusKey } from './radius';
+export { shadows, type Shadows, type ShadowKey } from './shadows';
+
+// Theme type combining all tokens
+export interface Theme {
+  colors: typeof import('./colors').colors;
+  spacing: typeof import('./spacing').spacing;
+  fontFamily: typeof import('./typography').fontFamily;
+  fontSize: typeof import('./typography').fontSize;
+  fontWeight: typeof import('./typography').fontWeight;
+  lineHeight: typeof import('./typography').lineHeight;
+  letterSpacing: typeof import('./typography').letterSpacing;
+  radius: typeof import('./radius').radius;
+  shadows: typeof import('./shadows').shadows;
+}

package/src/tokens/radius.ts

@@ -0,0 +1,18 @@
+/**
+ * Design Tokens: Border Radius
+ */
+
+export const radius = {
+  none: 0,
+  sm: 4,
+  DEFAULT: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  '2xl': 32,
+  '3xl': 48,
+  full: 9999,
+} as const;
+
+export type Radius = typeof radius;
+export type RadiusKey = keyof Radius;

package/src/tokens/shadows.ts

@@ -0,0 +1,38 @@
+/**
+ * Design Tokens: Shadows
+ *
+ * Cross-platform shadow definitions
+ */
+
+import { Platform, ViewStyle } from 'react-native';
+
+type ShadowStyle = Pick<
+  ViewStyle,
+  'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius' | 'elevation'
+>;
+
+const createShadow = (
+  offsetY: number,
+  blur: number,
+  opacity: number,
+  elevation: number
+): ShadowStyle => ({
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: offsetY },
+  shadowOpacity: opacity,
+  shadowRadius: blur,
+  ...(Platform.OS === 'android' && { elevation }),
+});
+
+export const shadows = {
+  none: createShadow(0, 0, 0, 0),
+  sm: createShadow(1, 2, 0.05, 1),
+  DEFAULT: createShadow(2, 4, 0.1, 2),
+  md: createShadow(4, 6, 0.1, 4),
+  lg: createShadow(8, 10, 0.1, 8),
+  xl: createShadow(12, 16, 0.15, 12),
+  '2xl': createShadow(16, 24, 0.2, 16),
+} as const;
+
+export type Shadows = typeof shadows;
+export type ShadowKey = keyof Shadows;

package/src/tokens/spacing.ts

@@ -0,0 +1,45 @@
+/**
+ * Design Tokens: Spacing
+ *
+ * 4px base unit system
+ */
+
+export const spacing = {
+  0: 0,
+  0.5: 2,
+  1: 4,
+  1.5: 6,
+  2: 8,
+  2.5: 10,
+  3: 12,
+  3.5: 14,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128,
+  36: 144,
+  40: 160,
+  44: 176,
+  48: 192,
+  52: 208,
+  56: 224,
+  60: 240,
+  64: 256,
+  72: 288,
+  80: 320,
+  96: 384,
+} as const;
+
+export type Spacing = typeof spacing;
+export type SpacingKey = keyof Spacing;

package/src/tokens/typography.ts

@@ -0,0 +1,70 @@
+/**
+ * Design Tokens: Typography
+ *
+ * System font stack with iOS/Android optimization
+ */
+
+import { Platform } from 'react-native';
+
+export const fontFamily = {
+  // System defaults (platform-optimized)
+  sans: Platform.select({
+    ios: 'System',
+    android: 'Roboto',
+    default: 'System',
+  }),
+  mono: Platform.select({
+    ios: 'Menlo',
+    android: 'monospace',
+    default: 'monospace',
+  }),
+} as const;
+
+export const fontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+  '4xl': 36,
+  '5xl': 48,
+  '6xl': 60,
+} as const;
+
+export const fontWeight = {
+  thin: '100',
+  extralight: '200',
+  light: '300',
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+  extrabold: '800',
+  black: '900',
+} as const;
+
+export const lineHeight = {
+  none: 1,
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2,
+} as const;
+
+export const letterSpacing = {
+  tighter: -0.8,
+  tight: -0.4,
+  normal: 0,
+  wide: 0.4,
+  wider: 0.8,
+  widest: 1.6,
+} as const;
+
+export type FontFamily = typeof fontFamily;
+export type FontSize = typeof fontSize;
+export type FontWeight = typeof fontWeight;
+export type LineHeight = typeof lineHeight;
+export type LetterSpacing = typeof letterSpacing;