Styling & Theming

/**
 * Access the current theme context
 * @param name - Optional theme name to use instead of current
 * @returns Theme object with design tokens
 */
function useTheme(name?: string): Theme;

/**
 * Get the current theme name
 * @returns Current theme name string
 */
function useThemeName(): string;

/**
 * Access Tamagui configuration within components
 * @returns Current Tamagui configuration
 */
function useConfiguration(): TamaguiInternalConfig;

interface Theme {
  [key: string]: string | Variable;
}

import { useTheme, useThemeName, styled, View, Text } from "@tamagui/core";

function ThemedComponent() {
  const theme = useTheme();
  const themeName = useThemeName();
  
  return (
    <View style={{ backgroundColor: theme.background }}>
      <Text style={{ color: theme.color }}>
        Current theme: {themeName}
      </Text>
    </View>
  );
}

// Using specific theme
function SpecificThemeComponent() {
  const darkTheme = useTheme('dark');
  
  return (
    <View style={{ backgroundColor: darkTheme.background }}>
      <Text style={{ color: darkTheme.color }}>
        Always dark theme
      </Text>
    </View>
  );
}

/**
 * Access current media query state for responsive design
 * @returns Object with boolean values for each media query
 */
function useMedia(): MediaState;

/**
 * Check if device has touch capability
 * @returns True if device supports touch
 */
function useIsTouchDevice(): boolean;

interface MediaState {
  [key: string]: boolean;
}

/**
 * Configure media queries for the application
 * @param media - Media query configuration
 */
function configureMedia(media: MediaConfig): void;

interface MediaConfig {
  [key: string]: {
    maxWidth?: number;
    minWidth?: number;
    maxHeight?: number;
    minHeight?: number;
  };
}

import { useMedia, styled, View } from "@tamagui/core";

function ResponsiveComponent() {
  const media = useMedia();
  
  return (
    <View>
      {media.sm && <Text>Small screen</Text>}
      {media.lg && <Text>Large screen</Text>}
    </View>
  );
}

// Responsive styled component
const ResponsiveContainer = styled(View, {
  padding: '$4',
  
  $sm: {
    padding: '$2',
    flexDirection: 'column',
  },
  
  $lg: {
    padding: '$6',
    flexDirection: 'row',
  },
});

/**
 * Get a design token value by path
 * @param path - Token path (e.g., '$color.blue' or '$space.4')
 * @returns Token value
 */
function getToken(path: string): any;

/**
 * Get all design tokens
 * @returns Complete tokens object
 */
function getTokens(): TokensParsed;

/**
 * Get the resolved value of a token
 * @param token - Token variable or string
 * @returns Resolved token value
 */
function getTokenValue(token: string | Variable): any;

/**
 * Get all available themes
 * @returns Record of all theme definitions
 */
function getThemes(): Record<string, Theme>;

interface TokensParsed {
  color: Record<string, Variable>;
  space: Record<string, Variable>;
  size: Record<string, Variable>;
  radius: Record<string, Variable>;
  zIndex: Record<string, Variable>;
}

import { getToken, getTokens, useTheme } from "@tamagui/core";

function TokenExample() {
  const blueColor = getToken('$color.blue');
  const spacing = getToken('$space.4');
  const allTokens = getTokens();
  
  return (
    <View style={{
      backgroundColor: blueColor,
      padding: spacing,
    }}>
      <Text>Using design tokens</Text>
    </View>
  );
}

// Using tokens in styled components
const TokenStyledView = styled(View, {
  backgroundColor: '$background',
  borderColor: '$borderColor',
  borderWidth: 1,
  borderRadius: '$radius.2',
  padding: '$space.4',
  margin: '$space.2',
});

/**
 * Force update all theme-dependent components
 */
function forceUpdateThemes(): void;

/**
 * Update theme definitions at runtime
 * @param themes - New theme definitions to merge
 */
function updateThemes(themes: Record<string, Partial<Theme>>): void;

/**
 * Create a scoped theme provider component
 * @param name - Theme name
 * @param theme - Theme definition
 * @returns Theme provider component
 */
function createThemeProvider(name: string, theme: Theme): React.ComponentType<{
  children: React.ReactNode;
}>;

/**
 * Scoped theme provider for applying themes to component subtrees
 */
declare const Theme: React.FC<ThemeProps>;

interface ThemeProps {
  /** Theme name to apply */
  name: string;
  /** Invert the current theme (light/dark toggle) */
  inverse?: boolean;
  /** Reset theme inheritance */
  reset?: boolean;
  /** Children components */
  children: React.ReactNode;
}

import { Theme, View, Text } from "@tamagui/core";

function ScopedTheming() {
  return (
    <View>
      <Text>Default theme</Text>
      
      <Theme name="dark">
        <View backgroundColor="$background">
          <Text color="$color">Dark theme section</Text>
        </View>
      </Theme>
      
      <Theme inverse>
        <View backgroundColor="$background">
          <Text color="$color">Inverted theme section</Text>
        </View>
      </Theme>
    </View>
  );
}

/**
 * Generate CSS rules for themes
 * @param themes - Theme definitions
 * @returns CSS string with theme rules
 */
function getThemeCSSRules(themes: Record<string, Theme>): string;

/**
 * Insert CSS rules into the document
 * @param rules - CSS rules to insert
 * @param options - Insertion options
 */
function insertStyleRules(rules: string, options?: InsertRuleOptions): void;

/**
 * Wrap CSS styles in appropriate tags
 * @param css - CSS string to wrap
 * @param options - Wrapping options
 * @returns Wrapped CSS string
 */
function wrapStyleTags(css: string, options?: WrapOptions): string;

/**
 * Create media query specific styles
 * @param media - Media query definition
 * @param styles - Styles to apply
 * @returns Media query CSS string
 */
function createMediaStyle(media: string, styles: string): string;

interface InsertRuleOptions {
  priority?: number;
  media?: string;
}

interface WrapOptions {
  tag?: string;
  attributes?: Record<string, string>;
}

/**
 * Split component props into style and non-style props
 * @param props - Component props
 * @param staticConfig - Component configuration
 * @param theme - Current theme
 * @param state - Component state
 * @param options - Processing options
 * @returns Split styles and props
 */
function getSplitStyles<T>(
  props: T,
  staticConfig: StaticConfig,
  theme: Theme,
  state: ComponentState,
  options?: GetStylesOptions
): SplitStyles;

/**
 * Expand shorthand style properties
 * @param styles - Style object with shorthands
 * @returns Expanded style object
 */
function expandStyles(styles: StyleObject): StyleObject;

/**
 * Get expanded shorthand properties
 * @param styles - Style object
 * @returns Expanded properties
 */
function getExpandedShorthands(styles: StyleObject): StyleObject;

/**
 * Generate atomic CSS classes
 * @param styles - Style object
 * @returns CSS classes and rules
 */
function getCSSStylesAtomic(styles: StyleObject): {
  classNames: string;
  rules: string[];
};

interface SplitStyles {
  style: StyleObject;
  classNames: string;
  pseudos: Record<string, StyleObject>;
  space: StyleObject;
  hasMedia: boolean;
}

interface GetStylesOptions {
  disableExpandShorthands?: boolean;
  resolveVariablesAs?: 'value' | 'variable' | 'auto';
}

/**
 * Normalize color values across platforms
 * @param color - Color value to normalize
 * @returns Normalized color value
 */
function normalizeColor(color: any): string;

/**
 * Normalize style values with property-specific processing
 * @param value - Style value
 * @param property - CSS property name
 * @returns Normalized value
 */
function normalizeValueWithProperty(value: any, property: string): any;

/**
 * Normalize style object
 * @param styles - Style object to normalize
 * @returns Normalized style object
 */
function normalizeStyle(styles: StyleObject): StyleObject;

import { createTamagui, getConfig, updateThemes } from "@tamagui/core";

function createUserTheme(preferences: UserPreferences) {
  const baseConfig = getConfig();
  
  const userTheme = {
    background: preferences.darkMode ? '#000000' : '#ffffff',
    color: preferences.darkMode ? '#ffffff' : '#000000',
    primary: preferences.accentColor,
    fontSize: preferences.fontSize,
  };
  
  updateThemes({
    user: userTheme,
  });
}

const themes = {
  light: {
    background: '$white',
    color: '$black',
    primary: '$blue',
  },
  dark: {
    background: '$black',
    color: '$white',
    primary: '$blue',
  },
  // Brand theme inheriting from light
  brand_light: {
    ...lightTheme,
    primary: '$brandColor',
    accent: '$brandAccent',
  },
};

function ConditionalTheming({ userPrefersDark, children }) {
  const themeName = userPrefersDark ? 'dark' : 'light';
  
  return (
    <Theme name={themeName}>
      {children}
    </Theme>
  );
}

interface Variable<T = any> {
  key: string;
  name: string;
  val: T;
  variable: string;
}

interface ComponentState {
  hover: boolean;
  press: boolean;
  focus: boolean;
}

interface StyleObject {
  [key: string]: any;
}