fluentglass 0.2.6

package/src/theme/defaultTheme.ts

@@ -0,0 +1,44 @@
+/**
+ * FluentGlass Default Theme — Deep Liquid Dark
+ *
+ * This is the out-of-the-box theme. Users can override any part
+ * via FluentGlassProvider's `theme` prop (deep merged).
+ */
+
+import { COLORS } from '../utils/colors';
+import { COLOR_SCHEMES, SIZE_PRESETS, BLUR_PRESETS, RADIUS_PRESETS, ANIMATION_PRESETS } from './tokens';
+import { FONT_FAMILIES } from './typography';
+import { FluentGlassTheme } from '../types/theme';
+
+const defaultTheme: FluentGlassTheme = {
+    // Core color palette
+    colors: { ...COLORS },
+
+    // Color schemes for components
+    colorSchemes: { ...COLOR_SCHEMES },
+
+    // Size presets
+    sizes: { ...SIZE_PRESETS },
+
+    // Blur presets
+    blurs: { ...BLUR_PRESETS },
+
+    // Radius presets
+    radii: { ...RADIUS_PRESETS },
+
+    // Animation presets
+    animations: { ...ANIMATION_PRESETS },
+
+    // Typography
+    typography: { ...FONT_FAMILIES },
+
+    // Global defaults applied to all components unless overridden per-component
+    defaults: {
+        size: 'md',
+        colorScheme: 'default',
+        blur: 'medium',
+        radius: 'md',
+    },
+};
+
+export default defaultTheme;

package/src/theme/resolvers.ts

@@ -0,0 +1,115 @@
+/**
+ * FluentGlass Theme Resolvers
+ *
+ * Utility functions that convert prop values (size="lg", colorScheme="success")
+ * into concrete style objects using the theme's tokens.
+ *
+ * Usage in components:
+ *   const theme = useTheme();
+ *   const sizeStyles = resolveSize(theme, size || theme.defaults.size);
+ *   const colorStyles = resolveColorScheme(theme, colorScheme || theme.defaults.colorScheme);
+ *   const blurConfig = resolveBlur(theme, blur || theme.defaults.blur);
+ *   const radiusValue = resolveRadius(theme, radius || theme.defaults.radius);
+ */
+
+import { FluentGlassTheme, SizeConfig, ColorSchemeConfig, BlurConfig } from '../types/theme';
+import { FluentGlassSize, FluentGlassColorScheme, FluentGlassBlur, FluentGlassRadius } from '../types/components';
+
+/**
+ * Resolve size prop → { paddingHorizontal, paddingVertical, fontSize, minHeight, borderRadius, iconSize, gap }
+ */
+export function resolveSize(theme: FluentGlassTheme, size: FluentGlassSize | string = 'md'): SizeConfig {
+    return theme.sizes[size] || theme.sizes.md;
+}
+
+/**
+ * Resolve colorScheme prop → { solid, bg, border, text, tint }
+ */
+export function resolveColorScheme(theme: FluentGlassTheme, colorScheme: FluentGlassColorScheme | string = 'default'): ColorSchemeConfig {
+    return theme.colorSchemes[colorScheme] || theme.colorSchemes.default;
+}
+
+/**
+ * Resolve blur prop → { intensity, tintAlpha }
+ */
+export function resolveBlur(theme: FluentGlassTheme, blur: FluentGlassBlur | string = 'medium'): BlurConfig {
+    return theme.blurs[blur] || theme.blurs.medium;
+}
+
+/**
+ * Resolve radius prop → number
+ */
+export function resolveRadius(theme: FluentGlassTheme, radius: FluentGlassRadius | string = 'md'): number {
+    return theme.radii[radius as string] ?? theme.radii.md;
+}
+
+/**
+ * Backward compatibility: map old prop names to new ones.
+ *
+ * - variant="primary"  → colorScheme="info"
+ * - variant="secondary" → colorScheme="default"
+ * - variant="ghost"     → colorScheme="default" (with blur="none")
+ * - type="success"      → colorScheme="success"
+ * - type="error"        → colorScheme="error"
+ * - tint="dark"         → colorScheme="dark"
+ * - tint="deep"         → colorScheme="deep"
+ * - intensity=40        → blur="strong"
+ */
+export function resolveBackwardCompat({ variant, type, tint, intensity, colorScheme, blur }: {
+    variant?: string;
+    type?: string;
+    tint?: string;
+    intensity?: number;
+    colorScheme?: FluentGlassColorScheme | string;
+    blur?: FluentGlassBlur | string;
+}): { colorScheme: FluentGlassColorScheme | string | undefined, blur: FluentGlassBlur | string | undefined } {
+    let resolvedColorScheme = colorScheme;
+    let resolvedBlur = blur;
+
+    // Map variant → colorScheme (Button, Badge)
+    if (!resolvedColorScheme && variant) {
+        const variantMap: Record<string, FluentGlassColorScheme> = {
+            primary: 'info',
+            secondary: 'default',
+            ghost: 'default',
+            destructive: 'error',
+            outline: 'default',
+        };
+        resolvedColorScheme = variantMap[variant] || variant;
+    }
+
+    // Map type → colorScheme (Alert)
+    if (!resolvedColorScheme && type) {
+        resolvedColorScheme = type; // success, error, warning, info map 1:1
+    }
+
+    // Map tint → colorScheme (FluentGlass atom)
+    if (!resolvedColorScheme && tint) {
+        const tintMap: Record<string, FluentGlassColorScheme> = {
+            dark: 'dark',
+            deep: 'deep',
+            light: 'light',
+            default: 'default',
+        };
+        resolvedColorScheme = tintMap[tint] || 'default';
+    }
+
+    // Map intensity → blur
+    if (!resolvedBlur && intensity !== undefined) {
+        if (intensity === 0) resolvedBlur = 'none';
+        else if (intensity <= 10) resolvedBlur = 'subtle';
+        else if (intensity <= 20) resolvedBlur = 'medium';
+        else if (intensity <= 40) resolvedBlur = 'strong';
+        else resolvedBlur = 'max';
+    }
+
+    // Ghost variant also implies no blur
+    if (variant === 'ghost' && !resolvedBlur) {
+        resolvedBlur = 'none';
+    }
+
+    return {
+        colorScheme: resolvedColorScheme,
+        blur: resolvedBlur,
+    };
+}

package/src/theme/tokens.ts

@@ -0,0 +1,200 @@
+/**
+ * FluentGlass Design Tokens
+ *
+ * Centralized definition of all design tokens:
+ * - Size scales (xs → xl)
+ * - Color schemes (default, dark, deep, light, success, error, warning, info)
+ * - Blur intensities (none → max)
+ * - Border radius presets (none → pill)
+ */
+
+import { SizeConfig, ColorSchemeConfig, BlurConfig } from '../types/theme';
+
+// ─── SIZE TOKENS ────────────────────────────────────────────
+
+export const SIZE_SCALE: Record<string, number> = {
+    xs: 0.7,
+    sm: 0.85,
+    md: 1,
+    lg: 1.2,
+    xl: 1.5,
+};
+
+/**
+ * Resolved size values for common properties.
+ * Each size key maps to concrete padding, fontSize, minHeight, borderRadius, and iconSize.
+ */
+export const SIZE_PRESETS: Record<string, SizeConfig> = {
+    xs: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        fontSize: 11,
+        minHeight: 28,
+        borderRadius: 6,
+        iconSize: 12,
+        gap: 4,
+    },
+    sm: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        fontSize: 13,
+        minHeight: 34,
+        borderRadius: 10,
+        iconSize: 14,
+        gap: 6,
+    },
+    md: {
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        fontSize: 15,
+        minHeight: 42,
+        borderRadius: 12,
+        iconSize: 16,
+        gap: 8,
+    },
+    lg: {
+        paddingHorizontal: 20,
+        paddingVertical: 14,
+        fontSize: 17,
+        minHeight: 50,
+        borderRadius: 14,
+        iconSize: 20,
+        gap: 10,
+    },
+    xl: {
+        paddingHorizontal: 24,
+        paddingVertical: 18,
+        fontSize: 20,
+        minHeight: 58,
+        borderRadius: 16,
+        iconSize: 24,
+        gap: 12,
+    },
+};
+
+// ─── COLOR SCHEME TOKENS ────────────────────────────────────
+
+/**
+ * Color scheme definitions.
+ * Each scheme defines: solid (hex), bg (low-alpha tint), border (medium-alpha), text
+ * Glass tints (default, dark, deep, light) use rgba backgrounds.
+ * Semantic colors (success, error, warning, info) use accent-tinted glass.
+ */
+export const COLOR_SCHEMES: Record<string, ColorSchemeConfig> = {
+    // Glass Structure tints
+    default: {
+        solid: 'rgba(15, 23, 42, 0.5)',
+        bg: 'rgba(15, 23, 42, 0.5)',
+        border: 'rgba(148, 163, 184, 0.2)',
+        text: '#F8FAFC',
+        tint: 'dark', // BlurView tint
+    },
+    dark: {
+        solid: 'rgba(15, 23, 42, 0.7)',
+        bg: 'rgba(15, 23, 42, 0.7)',
+        border: 'rgba(148, 163, 184, 0.2)',
+        text: '#F8FAFC',
+        tint: 'dark',
+    },
+    deep: {
+        solid: 'rgba(2, 6, 23, 0.85)',
+        bg: 'rgba(2, 6, 23, 0.85)',
+        border: 'rgba(148, 163, 184, 0.15)',
+        text: '#F8FAFC',
+        tint: 'dark',
+    },
+    light: {
+        solid: 'rgba(255, 255, 255, 0.04)',
+        bg: 'rgba(255, 255, 255, 0.04)',
+        border: 'rgba(255, 255, 255, 0.1)',
+        text: '#F8FAFC',
+        tint: 'light',
+    },
+
+    // Semantic colors (from Alert component)
+    success: {
+        solid: '#10B981',
+        bg: 'rgba(16, 185, 129, 0.25)',
+        border: 'rgba(16, 185, 129, 0.4)',
+        text: '#10B981',
+        tint: 'default',
+    },
+    error: {
+        solid: '#EF4444',
+        bg: 'rgba(239, 68, 68, 0.25)',
+        border: 'rgba(239, 68, 68, 0.4)',
+        text: '#EF4444',
+        tint: 'default',
+    },
+    warning: {
+        solid: '#F59E0B',
+        bg: 'rgba(245, 158, 11, 0.25)',
+        border: 'rgba(245, 158, 11, 0.4)',
+        text: '#F59E0B',
+        tint: 'default',
+    },
+    info: {
+        solid: '#06B6D4',
+        bg: 'rgba(6, 182, 212, 0.25)',
+        border: 'rgba(6, 182, 212, 0.4)',
+        text: '#06B6D4',
+        tint: 'default',
+    },
+    purple: {
+        solid: '#8B5CF6',
+        bg: 'rgba(139, 92, 246, 0.25)',
+        border: 'rgba(139, 92, 246, 0.4)',
+        text: '#8B5CF6',
+        tint: 'default',
+    },
+    blue: {
+        solid: '#3B82F6',
+        bg: 'rgba(59, 130, 246, 0.25)',
+        border: 'rgba(59, 130, 246, 0.4)',
+        text: '#3B82F6',
+        tint: 'default',
+    },
+    pink: {
+        solid: '#EC4899',
+        bg: 'rgba(236, 72, 153, 0.25)',
+        border: 'rgba(236, 72, 153, 0.4)',
+        text: '#EC4899',
+        tint: 'default',
+    },
+};
+
+// ─── BLUR TOKENS ────────────────────────────────────────────
+
+export const BLUR_PRESETS: Record<string, BlurConfig> = {
+    none: { intensity: 0, tintAlpha: 0 },
+    subtle: { intensity: 10, tintAlpha: 0.3 },
+    medium: { intensity: 20, tintAlpha: 0.5 },
+    strong: { intensity: 40, tintAlpha: 0.7 },
+    max: { intensity: 60, tintAlpha: 0.85 },
+};
+
+// ─── RADIUS TOKENS ──────────────────────────────────────────
+
+export const RADIUS_PRESETS: Record<string, number> = {
+    none: 0,
+    sm: 6,
+    md: 12,
+    lg: 16,
+    pill: 9999,
+};
+
+// ─── ANIMATION TOKENS ──────────────────────────────────────
+
+export const ANIMATION_PRESETS: any = {
+    spring: {
+        gentle: { mass: 0.8, damping: 14, stiffness: 100, overshootClamping: false },
+        default: { mass: 0.6, damping: 16, stiffness: 140, overshootClamping: false },
+        snappy: { mass: 0.4, damping: 18, stiffness: 200, overshootClamping: false },
+        bouncy: { mass: 0.5, damping: 15, stiffness: 160, overshootClamping: false },
+    },
+    crossfade: {
+        fadeOutDuration: 120,
+        fadeInDuration: 200,
+        translateY: 6,
+    },
+};

package/src/theme/typography.ts

@@ -0,0 +1,41 @@
+/**
+ * FluentGlass Typography Tokens
+ *
+ * Font family definitions for Inter typeface.
+ * In React Native, each font weight requires its own font file,
+ * so we map numeric weights to specific font family names.
+ */
+
+export const FONT_FAMILIES = {
+    regular: 'Inter-Regular',
+    medium: 'Inter-Medium',
+    semiBold: 'Inter-SemiBold',
+    bold: 'Inter-Bold',
+    extraBold: 'Inter-ExtraBold',
+    black: 'Inter-Black',
+    mono: 'monospace',
+};
+
+/**
+ * Maps numeric fontWeight values to their corresponding Inter fontFamily.
+ * Usage: { fontFamily: WEIGHT_TO_FAMILY['700'] } instead of { fontWeight: '700' }
+ */
+export const WEIGHT_TO_FAMILY: Record<string, string> = {
+    '300': 'Inter-Regular',   // Light → fallback to Regular
+    '400': 'Inter-Regular',
+    'normal': 'Inter-Regular',
+    '500': 'Inter-Medium',
+    '600': 'Inter-SemiBold',
+    '700': 'Inter-Bold',
+    'bold': 'Inter-Bold',
+    '800': 'Inter-ExtraBold',
+    '900': 'Inter-Black',
+};
+
+/**
+ * Helper: given a fontWeight (string or number), returns the correct fontFamily.
+ * Falls back to Inter-Regular if weight is not mapped.
+ */
+export function getFontFamily(weight = '400') {
+    return WEIGHT_TO_FAMILY[String(weight)] || FONT_FAMILIES.regular;
+}

package/src/theme/useTheme.ts

@@ -0,0 +1,17 @@
+/**
+ * useTheme — Hook to access the current FluentGlass theme.
+ *
+ * Usage:
+ *   const theme = useTheme();
+ *   const { colors, colorSchemes, sizes, blurs, radii, defaults } = theme;
+ *
+ * Works with or without FluentGlassProvider (falls back to defaultTheme).
+ */
+
+import { useContext } from 'react';
+import { ThemeContext } from './FluentGlassProvider';
+import { FluentGlassTheme } from '../types/theme';
+
+export default function useTheme(): FluentGlassTheme {
+    return useContext(ThemeContext) as FluentGlassTheme;
+}

package/src/types/components.ts

@@ -0,0 +1,47 @@
+import { AccessibilityRole, AccessibilityState, AccessibilityValue } from 'react-native';
+
+export type FluentGlassSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FluentGlassColorScheme =
+    | 'default'
+    | 'dark'
+    | 'deep'
+    | 'light'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'info'
+    | 'purple'
+    | 'blue'
+    | 'pink';
+export type FluentGlassBlur = 'none' | 'subtle' | 'medium' | 'strong' | 'max';
+export type FluentGlassRadius = 'none' | 'sm' | 'md' | 'lg' | 'pill';
+
+// Accessibility props shared across all components
+export interface FluentGlassA11yProps {
+    /** Text read by screen readers to identify the element. */
+    accessibilityLabel?: string;
+    /** Additional hint read after the label (e.g., "Double tap to activate"). */
+    accessibilityHint?: string;
+    /** Semantic role for assistive technology. */
+    accessibilityRole?: AccessibilityRole;
+    /** Current state (checked, disabled, expanded, selected, busy). */
+    accessibilityState?: AccessibilityState;
+    /** Numeric value info for sliders/progress (min, max, now, text). */
+    accessibilityValue?: AccessibilityValue;
+    /** When true, VoiceOver ignores elements behind this view (for modals). */
+    accessibilityViewIsModal?: boolean;
+    /** Whether the element is an accessibility element. */
+    accessible?: boolean;
+}
+
+// Base props applicable to all/most components
+export interface FluentGlassBaseProps extends FluentGlassA11yProps {
+    /** Preset size defining padding, height, and typography. */
+    size?: FluentGlassSize | string;
+    /** Distinct visual color schema to apply to the glass material. */
+    colorScheme?: FluentGlassColorScheme | string;
+    /** Intensity of the frosted glass blur. */
+    blur?: FluentGlassBlur | string;
+    /** Controls border rounding. */
+    radius?: FluentGlassRadius | string;
+}

package/src/types/theme.ts

@@ -0,0 +1,82 @@
+import { ColorValue } from 'react-native';
+
+export interface ThemeColors {
+    background: string;
+    card: string;
+    inputBg: string;
+    border: string;
+    textPrimary: string;
+    textSecondary: string;
+    textInput: string;
+    accent: string;
+    secondary: string;
+    positive: string;
+    negative: string;
+    warning: string;
+    purple: string;
+    pink: string;
+    glass: string;
+    glassText: string;
+    transparent: string;
+    white: string;
+    black: string;
+    overlay: string;
+    shadow: string;
+    borderSubtle: string;
+}
+
+export interface SizeConfig {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    fontSize: number;
+    minHeight: number;
+    borderRadius: number;
+    iconSize?: number;
+    gap?: number;
+}
+
+export interface ColorSchemeConfig {
+    solid: string;
+    bg: string;
+    border: string;
+    text: string;
+    tint: 'light' | 'dark' | 'default';
+}
+
+export interface BlurConfig {
+    intensity: number;
+    tintAlpha: number;
+}
+
+export interface ThemeTypography {
+    regular: string;
+    medium: string;
+    semiBold: string;
+    bold: string;
+    extraBold: string;
+    black: string;
+    mono: string;
+}
+
+export interface ThemeAnimations {
+    springs: Record<string, any>;
+    timings: Record<string, any>;
+    crossfade?: { fadeOutDuration?: number; fadeInDuration?: number; translateY?: number };
+    spring?: Record<string, any>;
+}
+
+export interface FluentGlassTheme {
+    colors: ThemeColors;
+    colorSchemes: Record<string, ColorSchemeConfig>;
+    sizes: Record<string, SizeConfig>;
+    blurs: Record<string, BlurConfig>;
+    radii: Record<string, number>;
+    animations: ThemeAnimations;
+    typography: ThemeTypography;
+    defaults: {
+        size: string;
+        colorScheme: string;
+        blur: string;
+        radius: string;
+    };
+}

package/src/utils/colors.ts

@@ -0,0 +1,55 @@
+// FluentGlass — Default Color Palette (Deep Liquid Dark)
+// These are the default colors used when no FluentGlassProvider is present.
+// They will be replaced by the theme system in Phase 3.
+
+import { ThemeColors } from '../types/theme';
+
+export const COLORS: ThemeColors & Record<string, string> = {
+    // Fondo principal: Deepest Navy
+    background: '#020617',
+
+    // Fondo de tarjetas: Slate Glass
+    card: 'rgba(30, 41, 59, 0.7)',
+
+    // Fondo de inputs: Carved Dark
+    inputBg: 'rgba(15, 23, 42, 0.6)',
+
+    // Bordes: Slate Ridge
+    border: 'rgba(148, 163, 184, 0.2)',
+
+    // Texto principal: Slate White
+    textPrimary: '#F8FAFC',
+
+    // Texto secundario: Slate Grey
+    textSecondary: '#94A3B8',
+
+    // Texto sobre inputs
+    textInput: '#FFFFFF',
+
+    // Acentos: Cyan & Blue
+    accent: '#06B6D4', // Cyan Glow
+    secondary: '#3B82F6', // Blue Depth
+
+    // Estados (colorScheme colors)
+    positive: '#10B981', // Emerald (success)
+    negative: '#EF4444', // Red (error)
+    warning: '#F59E0B', // Amber (warning)
+
+    // Colores semánticos adicionales
+    purple: '#8B5CF6', // Purple
+    pink: '#EC4899',   // Pink
+
+    // Utilidad para transparencia
+    glass: 'rgba(30, 41, 59, 0.7)', // Dark Glass
+    glassText: 'rgba(255, 255, 255, 0.8)',
+    transparent: 'transparent',
+
+    // Legacy / Compatibilidad
+    white: '#FFFFFF',
+    black: '#000000',
+
+    // Overlay & Shadow
+    overlay: 'rgba(0, 0, 0, 0.6)',
+    shadow: '#000000',
+    borderSubtle: 'rgba(148, 163, 184, 0.12)',
+};