@times-design-system/theme-android 1.5.0 → 1.6.0

package/README.md

@@ -0,0 +1,314 @@
+# @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
+
+```bash
+npm install @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:
+
+```bash
+cp -r node_modules/@times-design-system/theme-android/dist/* app/src/main/kotlin/com/yourcompany/designsystem/
+```
+
+2. **Use in Kotlin code**:
+
+```kotlin
+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
+
+```kotlin
+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
+
+```kotlin
+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)
+
+```kotlin
+surfaceCanvas      // Background
+surfaceLevel1-4    // Surface elevation levels
+textPrimary        // Primary text
+textSecondary      // Secondary text
+borderPrimary      // Primary border
+interactivePrimary // Primary interactive elements
+```
+
+#### Brand & Channel Colors
+
+```kotlin
+brandCoreRampHome500      // Home channel
+brandCoreRampBusiness500  // Business channel
+brandCoreRampSport500     // Sport channel
+brandChannelsRampMoney500 // Money channel
+// ... and more
+```
+
+#### Interactive & Feedback Colors
+
+```kotlin
+interactivePrimaryFillDefault    // Button styles
+interactiveDisabledA/B/C         // Disabled states
+feedbackErrorFill                // Error states
+feedbackSuccessFill              // Success states
+inputBorderError                 // Input errors
+```
+
+### Spacing (20 values)
+
+```kotlin
+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
+
+```kotlin
+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:
+
+```kotlin
+// 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
+
+```kotlin
+// ✅ Good - Use semantic tokens
+Surface(color = colors.surfaceCanvas)
+Text(color = colors.textPrimary)
+
+// ❌ Avoid - Hard-coded colors
+Surface(color = Color(0xFF000000))
+```
+
+### 2. Support Dark Mode
+
+```kotlin
+// ✅ Good - Responsive to system theme
+val colors = if (isSystemInDarkTheme()) DarkCoreColors() else LightCoreColors()
+
+// ❌ Avoid - Always light
+val colors = LightCoreColors()
+```
+
+### 3. Use Spacing Tokens
+
+```kotlin
+// ✅ Good
+modifier = Modifier.padding(TimesSpacing.spacing100)
+
+// ❌ Avoid
+modifier = Modifier.padding(16.dp)
+```
+
+## Building
+
+To rebuild after token changes:
+
+```bash
+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:
+
+```bash
+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

package/dist/TimesSpacing.kt

@@ -3,26 +3,26 @@ package uk.co.thetimes.timesDesignSystem
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.Dp
   
-class TimesSpacing {
-  val spacingStatic10: Dp = 18.dp
-  val spacingStatic11: Dp = 20.dp
-  val spacingStatic12: Dp = 23.dp
-  val spacingStatic13: Dp = 24.dp
-  val spacingStatic14: Dp = 28.dp
-  val spacingStatic15: Dp = 32.dp
-  val spacingStatic16: Dp = 36.dp
-  val spacingStatic17: Dp = 40.dp
-  val spacingStatic18: Dp = 48.dp
-  val spacingStatic19: Dp = 56.dp
-  val spacingStatic20: Dp = 64.dp
-  val spacingStatic21: Dp = 80.dp
-  val spacingStatic01: Dp = 2.dp
-  val spacingStatic02: Dp = 3.dp
-  val spacingStatic03: Dp = 4.dp
-  val spacingStatic04: Dp = 6.dp
-  val spacingStatic05: Dp = 8.dp
-  val spacingStatic06: Dp = 10.dp
-  val spacingStatic07: Dp = 12.dp
-  val spacingStatic08: Dp = 14.dp
-  val spacingStatic09: Dp = 16.dp
+class TDSSpacingImpl : TDSSpacing {
+  override val spacingStatic10: Dp = 18.dp
+  override val spacingStatic11: Dp = 20.dp
+  override val spacingStatic12: Dp = 23.dp
+  override val spacingStatic13: Dp = 24.dp
+  override val spacingStatic14: Dp = 28.dp
+  override val spacingStatic15: Dp = 32.dp
+  override val spacingStatic16: Dp = 36.dp
+  override val spacingStatic17: Dp = 40.dp
+  override val spacingStatic18: Dp = 48.dp
+  override val spacingStatic19: Dp = 56.dp
+  override val spacingStatic20: Dp = 64.dp
+  override val spacingStatic21: Dp = 80.dp
+  override val spacingStatic01: Dp = 2.dp
+  override val spacingStatic02: Dp = 3.dp
+  override val spacingStatic03: Dp = 4.dp
+  override val spacingStatic04: Dp = 6.dp
+  override val spacingStatic05: Dp = 8.dp
+  override val spacingStatic06: Dp = 10.dp
+  override val spacingStatic07: Dp = 12.dp
+  override val spacingStatic08: Dp = 14.dp
+  override val spacingStatic09: Dp = 16.dp
 }