Colors

The Cuppa color system provides a consistent palette across Web, iOS, and Android platforms. All color tokens are defined centrally and automatically adapted to each platform's color system.

Usage

Web (CSS/Tailwind)

/* Using CSS variables */
.element {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Using Tailwind */
<div className="bg-primary text-primary-foreground">
  Hello Cuppa
</div>

iOS (SwiftUI)

import CuppaUI

struct MyView: View {
  var body: some View {
    Text("Hello Cuppa")
      .foregroundColor(.cuppa.primary)
      .background(.cuppa.surface)
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.theme.CuppaTheme

@Composable
fun MyView() {
  Text(
    text = "Hello Cuppa",
    color = CuppaTheme.colors.primary,
    modifier = Modifier.background(CuppaTheme.colors.surface)
  )
}

Color Tokens

Primary Colors

• primary: Main brand color
• primary-foreground: Text on primary color
• secondary: Secondary brand color
• secondary-foreground: Text on secondary color

Surface Colors

• background: Page background
• surface: Card/component background
• muted: Subtle background
• muted-foreground: Text on muted background

Semantic Colors

• success: Success states
• warning: Warning states
• error: Error states
• info: Informational states

Dark Mode

All color tokens automatically adapt to dark mode on each platform:

• Web: Respects prefers-color-scheme
• iOS: Adapts to system appearance
• Android: Follows Material Design dark theme

Customization

Override color tokens in your theme configuration:

// cuppa.config.ts
export default {
  theme: {
    colors: {
      primary: '#007AFF',
      secondary: '#5856D6',
    }
  }
}