Colors

Semantic color tokens for React Native, accessed via useTacNativeTheme(). Tokens are shared with the web platform and adapt between light and dark themes.

Core Colors

Primary surface, text, and accent colors. Access via theme.colors.background, theme.colors.primary, etc.

background

bg-subtle

surface

foreground

primary

primary-hover

primary-fg

secondary

secondary-fg

muted

muted-fg

card

card-fg

border

input

point

point-hover

point-fg

point-subtle

Status Colors

Semantic colors for success, warning, error, and informational states.

success

success-bg

success-fg

warning

warning-bg

warning-fg

error

error-bg

error-fg

info

info-bg

info-fg

Gray Scale

Neutral palette from 50 (lightest) to 900 (darkest). Access via theme.colors.gray50 through theme.colors.gray900.

100

200

300

400

500

600

700

800

900

Usage

Access colors through the theme context. All tokens are available as JS values — no CSS variables needed.

tsx

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

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

  return (
    <View style={{ backgroundColor: theme.colors.background }}>
      <Text style={{ color: theme.colors.foreground }}>
        Hello World
      </Text>
      <Text style={{ color: theme.colors.mutedForeground }}>
        Subtle text
      </Text>
    </View>
  );
}

Native tokens use camelCase names that map directly to CSS variable equivalents.

typescript

// CSS variable        → Native theme key
// --background        → theme.colors.background
// --foreground        → theme.colors.foreground
// --primary           → theme.colors.primary
// --muted-foreground  → theme.colors.mutedForeground
// --point             → theme.colors.point
// --success           → theme.colors.success
// --error             → theme.colors.error
// --border            → theme.colors.border
// --gray-500          → theme.colors.gray500