theme.ts

Purpose

This module is the single source of truth for visual design tokens used across all UI components. It exports a flat theme object and a sp font-scaling helper that must be used for all font size values throughout the application.

Its responsibilities include:

• Defining all semantic color roles as hex strings
• Defining the global border radius token
• Reading the device font scale once at module load time
• Providing a rounding helper that converts design-unit font sizes to scaled pixel values

Invariants

Font Scale Read Once

PixelRatio.getFontScale() is called once at module load and stored in the module-level scale constant.

The sp function uses this constant for all subsequent calls, so font scale changes that occur after module load (e.g. from accessibility settings changes at runtime) are not reflected until the module is reloaded.

sp Rounds to Nearest Integer

sp(n) returns Math.round(n * scale), ensuring all font sizes are whole-pixel values that the native text renderer can measure without sub-pixel rounding artifacts.

Color Tokens

Exports

sp(...)

function sp(n: number): number

Converts a design-unit font size to a device-scaled integer pixel value.

Parameters

Returns

Math.round(n × fontScale) — a whole-number device pixel font size.

theme

const theme: {
	bg: string;
	text: string;
	subtext: string;
	muted: string;
	border: string;
	card: string;
	cardAlt: string;
	primary: string;
	primaryText: string;
	danger: string;
	radius: number;
}

Flat object of design tokens. Import and use directly in StyleSheet.create calls and inline styles throughout the application.