@times-design-system/theme-android

Times Design System theme package for Android with Kotlin color definitions, typography tokens, and Compose support for building themed Android applications.

Installation

yarn add @times-design-system/theme-android

Contents

Kotlin Color & Typography Files

Pre-generated Kotlin files for Android color and typography assets:

dist/
├── TimesTypography.kt           # Typography token definitions
├── TimesSpacing.kt              # Spacing token definitions (Dp values)
└── palettes/
    ├── DarkCoreColors.kt
    ├── LightCoreColors.kt
    ├── DarkBrandColors.kt
    ├── LightBrandColors.kt
    ├── DarkChannelsColors.kt
    ├── LightChannelsColors.kt
    └── ... (30+ color definition files)

Usage

In Your Android Project

1. Copy the generated files to your Android project:

cp -r node_modules/@times-design-system/theme-android/dist/* app/src/main/kotlin/com/yourcompany/designsystem/

2. Use in Kotlin code:

import androidx.compose.ui.graphics.Color
import androidx.compose.material3.Surface
import androidx.compose.material3.Text

@Composable
fun MyScreen() {
  val colors = DarkCoreColors()

  Surface(
    color = colors.surfaceCanvas,
    modifier = Modifier.fillMaxSize()
  ) {
    Text(
      text = "Hello World",
      color = colors.textPrimary,
      fontSize = TimesTypography.display100.fontSize
    )
  }
}

Jetpack Compose Integration

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun StyledCard() {
  val darkColors = DarkCoreColors()

  Box(
    modifier = Modifier
      .background(color = darkColors.surfaceLevel1)
      .padding(TimesSpacing.spacing100.value.dp)
  ) {
    Button(
      onClick = { },
      colors = ButtonDefaults.buttonColors(
        containerColor = darkColors.interactivePrimaryFillDefault,
        contentColor = darkColors.interactivePrimaryTextDefault
      )
    ) {
      Text("Click Me")
    }
  }
}

Using Material Design 3 Integration

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.runtime.Composable

private val LightColorPalette = lightColorScheme(
  primary = Color(0xFF135DCB),           // Brand primary
  secondary = Color(0xFF595959),         // Semantic secondary
  tertiary = Color(0xFFA6A6A6),          // Semantic tertiary
  surface = Color(0xFFFFFFFF),           // Surface canvas
  onSurface = Color(0xFF1A1A1A),         // Text primary
  error = Color(0xFFFF0000)              // Feedback error
)

private val DarkColorPalette = darkColorScheme(
  primary = Color(0xFF135DCB),
  secondary = Color(0xFF595959),
  tertiary = Color(0xFFA6A6A6),
  surface = Color(0xFF000000),
  onSurface = Color(0xFFFFFFFF),
  error = Color(0xFFFF1A1A)
)

@Composable
fun TimesDesignSystemTheme(
  darkTheme: Boolean = isSystemInDarkTheme(),
  content: @Composable () -> Unit
) {
  val colorScheme = if (darkTheme) DarkColorPalette else LightColorPalette

  MaterialTheme(
    colorScheme = colorScheme,
    content = content
  )
}

Token Categories

Colors (2,700+)

Core Colors (Semantic)

surfaceCanvas      // Background
surfaceLevel1-4    // Surface elevation levels
textPrimary        // Primary text
textSecondary      // Secondary text
borderPrimary      // Primary border
interactivePrimary // Primary interactive elements

Brand & Channel Colors

brandCoreRampHome500      // Home channel
brandCoreRampBusiness500  // Business channel
brandCoreRampSport500     // Sport channel
brandChannelsRampMoney500 // Money channel
// ... and more

Interactive & Feedback Colors

interactivePrimaryFillDefault    // Button styles
interactiveDisabledA/B/C         // Disabled states
feedbackErrorFill                // Error states
feedbackSuccessFill              // Success states
inputBorderError                 // Input errors

Spacing (20 values)

object TimesSpacing {
  val spacing025 = 4.dp      // 0.25rem
  val spacing050 = 8.dp      // 0.5rem
  val spacing100 = 16.dp     // 1rem
  val spacing200 = 24.dp     // 1.5rem
  val spacing300 = 32.dp     // 2rem
  val spacing400 = 40.dp     // 2.5rem
}

Typography

object TimesTypography {
  val display100 = TextStyle(
    fontSize = 36.sp,
    lineHeight = 43.2.sp,
    fontFamily = FontFamily.Serif,
    fontWeight = FontWeight.Bold
  )

  val bodyRegular = TextStyle(
    fontSize = 16.sp,
    lineHeight = 24.sp,
    fontFamily = FontFamily.Serif,
    fontWeight = FontWeight.Normal
  )
}

Dark Mode Support

All color files include both light and dark variants:

// Automatic switching based on system theme
val colors = if (isSystemInDarkTheme()) {
  DarkCoreColors()
} else {
  LightCoreColors()
}

// Use with Compose
Surface(
  color = colors.surfaceCanvas,
  contentColor = colors.textPrimary
) {
  // Content...
}

File Structure

dist/
├── TimesTypography.kt              # Typography definitions
├── TimesSpacing.kt                 # Spacing/Dimen definitions
└── palettes/
    ├── DarkCoreColors.kt
    ├── LightCoreColors.kt
    ├── DarkBrandColors.kt
    ├── LightBrandColors.kt
    ├── DarkChannelsColors.kt
    ├── LightChannelsColors.kt
    ├── DarkDataVisualisationColors.kt
    ├── DarkMarketingColors.kt
    └── ... (25+ more palettes)

Compatibility

• Android: 5.0+ (API 21+)
• Kotlin: 1.5.0+
• Jetpack Compose: 1.0.0+
• Gradle: 7.0+

Best Practices

1. Use Semantic Tokens

// ✅ Good - Use semantic tokens
Surface(color = colors.surfaceCanvas)
Text(color = colors.textPrimary)

// ❌ Avoid - Hard-coded colors
Surface(color = Color(0xFF000000))

2. Support Dark Mode

// ✅ Good - Responsive to system theme
val colors = if (isSystemInDarkTheme()) DarkCoreColors() else LightCoreColors()

// ❌ Avoid - Always light
val colors = LightCoreColors()

3. Use Spacing Tokens

// ✅ Good
modifier = Modifier.padding(TimesSpacing.spacing100)

// ❌ Avoid
modifier = Modifier.padding(16.dp)

Building

To rebuild after token changes:

npm run build

This generates:

• Kotlin color class definitions
• Removes duplicate values (deduplication)
• Distributes files to dist/

Deduplication

The build process automatically removes duplicate color values that exist in core reference files:

npm run dedupe              # Run deduplication only
npm run build              # Build with automatic deduplication

This reduces file size and eliminates color redundancy across palette files.

License

ISC