gluestack-ui-v5:styling

Use semantic tokens like bg-background, text-foreground, text-muted-foreground, and text-destructive instead of raw colors. In v5 these tokens are defined as CSS custom properties in global.css via @layer theme and mapped to Tailwind utilities through @theme inline.

Both engines use the same semantic token names mapped through @theme inline, so className code never changes. NativeWind v5 switches themes via Appearance.setColorScheme(), while UniWind uses Uniwind.setTheme() with :where(.dark) selectors.

Generic tokens like typography-900 or gray-500 break dark mode adaptation and fail to express design intent. Semantic tokens such as text-foreground and text-muted-foreground adapt automatically to theme changes and ensure consistent contrast.

Inline styles are acceptable only for dynamic runtime values like animation values or safe area insets, third-party components without className support, and platform-specific overrides via Platform.select. All static styling should use className utilities.

Import tva from @gluestack-ui/utils/nativewind-utils and define base classes plus variant and size options. Use the class parameter for className merging and parentVariants with withStyleContext for parent-child style inheritance.