car-interface-android/lib/core/theme/app_theme.dart

import 'package:flutter/material.dart';

import 'app_colors.dart';

/// Material 3 theme built from the CarDash token set.
class AppTheme {
  const AppTheme._();

  static ThemeData light() => _build(AppColors.light, Brightness.light);

  static ThemeData dark() => _build(AppColors.dark, Brightness.dark);

  static ThemeData _build(AppColors colors, Brightness brightness) {
    final scheme =
        ColorScheme.fromSeed(
          seedColor: colors.accent,
          brightness: brightness,
        ).copyWith(
          primary: colors.accent,
          onPrimary: colors.accentInk,
          primaryContainer: colors.accentSoft,
          onPrimaryContainer: colors.ink,
          secondary: colors.accent,
          onSecondary: colors.accentInk,
          secondaryContainer: colors.accentSoft,
          onSecondaryContainer: colors.ink,
          surface: colors.surface,
          onSurface: colors.ink,
          surfaceContainerHighest: colors.surfaceStrong,
          outline: colors.border,
          outlineVariant: colors.border,
          error: colors.danger,
          onError: Colors.white,
        );

    final textTheme = _textTheme(colors);

    return ThemeData(
      useMaterial3: true,
      brightness: brightness,
      colorScheme: scheme,
      scaffoldBackgroundColor: colors.canvas,
      canvasColor: colors.canvas,
      fontFamily: 'Manrope',
      textTheme: textTheme,
      iconTheme: IconThemeData(color: colors.ink, size: 22),
      dividerTheme: DividerThemeData(color: colors.border, thickness: 1),
      sliderTheme: SliderThemeData(
        activeTrackColor: colors.accent,
        inactiveTrackColor: colors.border,
        thumbColor: colors.accent,
        overlayColor: colors.accent.withValues(alpha: 0.14),
        trackHeight: 6,
        thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 10),
        overlayShape: const RoundSliderOverlayShape(overlayRadius: 22),
        trackShape: const RoundedRectSliderTrackShape(),
        tickMarkShape: SliderTickMarkShape.noTickMark,
        disabledActiveTrackColor: colors.border,
        disabledInactiveTrackColor: colors.border,
        disabledThumbColor: colors.inkFaint,
      ),
      inputDecorationTheme: InputDecorationTheme(
        filled: true,
        fillColor: colors.surfaceStrong,
        hintStyle: textTheme.bodyLarge?.copyWith(color: colors.inkFaint),
        contentPadding: const EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 16,
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(18),
          borderSide: BorderSide.none,
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(18),
          borderSide: BorderSide(color: colors.border),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(18),
          borderSide: BorderSide(color: colors.accent, width: 1.4),
        ),
      ),
      snackBarTheme: SnackBarThemeData(
        backgroundColor: colors.ink,
        contentTextStyle: textTheme.bodyMedium?.copyWith(color: colors.canvas),
        behavior: SnackBarBehavior.floating,
        elevation: 0,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
      ),
      bottomSheetTheme: const BottomSheetThemeData(
        backgroundColor: Colors.transparent,
        surfaceTintColor: Colors.transparent,
        modalBarrierColor: Color(0x99000000),
      ),
      dialogTheme: DialogThemeData(
        backgroundColor: colors.surface,
        surfaceTintColor: Colors.transparent,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(26)),
      ),
      pageTransitionsTheme: const PageTransitionsTheme(
        builders: {
          TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
          TargetPlatform.linux: FadeUpwardsPageTransitionsBuilder(),
        },
      ),
      extensions: [colors],
    );
  }

  static TextTheme _textTheme(AppColors colors) {
    TextStyle style(
      double size,
      FontWeight weight,
      int variation, {
      double? height,
      double? letterSpacing,
    }) {
      return TextStyle(
        fontFamily: 'Manrope',
        fontSize: size,
        fontWeight: weight,
        height: height,
        letterSpacing: letterSpacing,
        color: colors.ink,
        fontVariations: [FontVariation('wght', variation.toDouble())],
      );
    }

    return TextTheme(
      displayLarge: style(
        68,
        FontWeight.w600,
        640,
        height: 0.96,
        letterSpacing: -2.6,
      ),
      displayMedium: style(
        52,
        FontWeight.w600,
        620,
        height: 1.0,
        letterSpacing: -1.8,
      ),
      displaySmall: style(
        42,
        FontWeight.w600,
        620,
        height: 1.05,
        letterSpacing: -1.2,
      ),
      headlineLarge: style(
        34,
        FontWeight.w600,
        620,
        height: 1.1,
        letterSpacing: -0.6,
      ),
      headlineMedium: style(
        28,
        FontWeight.w600,
        610,
        height: 1.15,
        letterSpacing: -0.4,
      ),
      headlineSmall: style(24, FontWeight.w600, 600, height: 1.2),
      titleLarge: style(20, FontWeight.w600, 600, height: 1.25),
      titleMedium: style(16, FontWeight.w600, 600, height: 1.3),
      titleSmall: style(14, FontWeight.w600, 600, height: 1.3),
      bodyLarge: style(16, FontWeight.w400, 440, height: 1.45),
      bodyMedium: style(14, FontWeight.w400, 440, height: 1.45),
      bodySmall: style(12, FontWeight.w400, 430, height: 1.4),
      labelLarge: style(14, FontWeight.w600, 600, height: 1.2),
      labelMedium: style(12, FontWeight.w500, 530, height: 1.25),
      labelSmall: style(11, FontWeight.w500, 520, height: 1.25),
    ).apply(bodyColor: colors.ink, displayColor: colors.ink);
  }
}