Customization

import { TacNativeProvider, useTacNativeTheme } from '@tac-ui/native';

// Wrap once at the app root
export default function App() {
  return (
    <TacNativeProvider defaultMode="system">
      <YourApp />
    </TacNativeProvider>
  );
}

// Access theme and mode controls anywhere in the tree
function ThemeToggle() {
  const { mode, toggleMode, theme } = useTacNativeTheme();
  return (
    <Button onPress={toggleMode}>
      {mode === 'dark' ? 'Switch to Light' : 'Switch to Dark'}
    </Button>
  );
}

import { TacNativeProvider } from '@tac-ui/native';

export default function App() {
  return (
    <TacNativeProvider
      theme={{
        colors: {
          primary: '#059669',
          primaryHover: '#047857',
          primaryForeground: '#FFFFFF',
        },
        radius: {
          m: 16,
          lg: 20,
        },
      }}
    >
      <YourApp />
    </TacNativeProvider>
  );
}

import { TacNativeProvider } from '@tac-ui/native';

export default function App() {
  return (
    <TacNativeProvider
      defaultMode="system"
      lightTheme={{
        colors: {
          primary: '#2563EB',
          background: '#FAFAFA',
          border: '#D1D5DB',
        },
      }}
      darkTheme={{
        colors: {
          primary: '#60A5FA',
          background: '#0A0A0A',
          border: '#27272A',
        },
      }}
    >
      <YourApp />
    </TacNativeProvider>
  );
}

import { Button, Card } from '@tac-ui/native';
import { useTacNativeTheme } from '@tac-ui/native';

function Example() {
  const { theme } = useTacNativeTheme();

  return (
    <>
      {/* Direct style override on a component */}
      <Button
        style={{
          borderRadius: 999,
          backgroundColor: '#059669',
        }}
      >
        Custom Button
      </Button>

      {/* Use theme tokens for consistency */}
      <Card
        style={{
          borderRadius: theme.radius.xl,
          padding: theme.spacing.xl,
          backgroundColor: theme.colors.card,
        }}
      >
        <Text style={{ color: theme.colors.foreground }}>
          Card with theme tokens
        </Text>
      </Card>
    </>
  );
}

import { semanticTokens, spacing, radius, motion } from '@tac-ui/tokens';
import { buildNativeTheme } from '@tac-ui/tokens/native';

// Access raw semantic token values
console.log(semanticTokens.light.primary);   // '#4E657E'
console.log(semanticTokens.dark.primary);    // '#8AA3B8'

// Access structural tokens
console.log(spacing.lg);                     // 16
console.log(radius.m);                       // 8
console.log(motion.duration.normal);         // 250

// Build a complete native theme object from tokens
const customTheme = buildNativeTheme({
  colors: { primary: '#059669' },
});

// theme object returned by useTacNativeTheme()
{
  mode: 'light' | 'dark',
  colors: {
    // Core
    background: '#FFFFFF',
    backgroundSubtle: '#F8FAFC',
    surface: '#FFFFFF',
    foreground: '#0F172A',
    primary: '#4E657E',
    primaryHover: '#3E5165',
    primaryForeground: '#FFFFFF',
    secondary: '#F1F5F9',
    secondaryForeground: '#0F172A',
    muted: '#F1F5F9',
    mutedForeground: '#64748B',
    card: '#FFFFFF',
    cardForeground: '#0F172A',
    border: '#E2E8F0',
    input: '#E2E8F0',
    point: '#96784A',
    pointHover: '#C0B56A',
    pointForeground: '#FFFFFF',
    pointSubtle: '#F5F0E8',
    // Status
    success: '#10B981',
    successBg: '#D1FAE5',
    successForeground: '#065F46',
    warning: '#F59E0B',
    warningBg: '#FEF3C7',
    warningForeground: '#92400E',
    error: '#EF4444',
    errorBg: '#FEE2E2',
    errorForeground: '#991B1B',
    info: '#3B82F6',
    infoBg: '#DBEAFE',
    infoForeground: '#1E40AF',
    // Gray scale
    gray50: '#F8FAFC',
    // ...gray100 through gray900
  },
  typography: {
    fontFamily: { primary: 'System', secondary: 'System' },
    display: { lg: { fontSize, lineHeight }, md: { fontSize, lineHeight } },
    heading: { h1, h2, h3, h4 },
    body: { lg, md, sm },
    caption: { md, sm },
    fontWeight: { normal: '400', medium: '500', semibold: '600', bold: '700' },
  },
  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24, '2xl': 32 },
  radius: { none: 0, sm: 4, m: 8, lg: 12, xl: 16, pill: 9999 },
  elevation: {
    sm: { shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation },
    m:  { shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation },
    lg: { shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation },
  },
  motion: {
    duration: { instant: 50, fast: 150, normal: 250, slow: 400, complex: 600 },
    easing: { standard, easeIn, easeOut, easeInOut, bounce, spring, elastic },
    spring: {
      default:  { damping: 20, stiffness: 300 },
      bouncy:   { damping: 12, stiffness: 400 },
      slow:     { damping: 30, stiffness: 200 },
    },
  },
}