added Theme with colors and text

lib/designsystem/theme/AppColorsExtension.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+
+class AppColorsExtension extends ThemeExtension<AppColorsExtension> {
+  AppColorsExtension({
+    required this.primary,
+    required this.onPrimary,
+    required this.secondary,
+    required this.onSecondary,
+    required this.error,
+    required this.onError,
+    required this.background,
+    required this.onBackground,
+    required this.surface,
+    required this.onSurface,
+  });
+
+  final Color primary;
+  final Color onPrimary;
+  final Color secondary;
+  final Color onSecondary;
+  final Color error;
+  final Color onError;
+  final Color background;
+  final Color onBackground;
+  final Color surface;
+  final Color onSurface;
+
+  @override
+  ThemeExtension<AppColorsExtension> copyWith({
+    Color? primary,
+    Color? onPrimary,
+    Color? secondary,
+    Color? onSecondary,
+    Color? error,
+    Color? onError,
+    Color? background,
+    Color? onBackground,
+    Color? surface,
+    Color? onSurface,
+  }) {
+    return AppColorsExtension(
+      primary: primary ?? this.primary,
+      onPrimary: onPrimary ?? this.onPrimary,
+      secondary: secondary ?? this.secondary,
+      onSecondary: onSecondary ?? this.onSecondary,
+      error: error ?? this.error,
+      onError: onError ?? this.onError,
+      background: background ?? this.background,
+      onBackground: onBackground ?? this.onBackground,
+      surface: surface ?? this.surface,
+      onSurface: onSurface ?? this.onSurface,
+    );
+  }
+
+  @override
+  ThemeExtension<AppColorsExtension> lerp(
+    covariant ThemeExtension<AppColorsExtension>? other,
+    double t,
+  ) {
+    if (other is! AppColorsExtension) {
+      return this;
+    }
+
+    return AppColorsExtension(
+      primary: Color.lerp(primary, other.primary, t)!,
+      onPrimary: Color.lerp(onPrimary, other.onPrimary, t)!,
+      secondary: Color.lerp(secondary, other.secondary, t)!,
+      onSecondary: Color.lerp(onSecondary, other.onSecondary, t)!,
+      error: Color.lerp(error, other.error, t)!,
+      onError: Color.lerp(onError, other.onError, t)!,
+      background: Color.lerp(background, other.background, t)!,
+      onBackground: Color.lerp(onBackground, other.onBackground, t)!,
+      surface: Color.lerp(surface, other.surface, t)!,
+      onSurface: Color.lerp(onSurface, other.onSurface, t)!,
+    );
+  }
+}
+
+/// Optional. If you also want to assign colors in the `ColorScheme`.
+extension ColorSchemeBuilder on AppColorsExtension {
+  ColorScheme toColorScheme(Brightness brightness) {
+    return ColorScheme(
+      brightness: brightness,
+      primary: primary,
+      onPrimary: onPrimary,
+      secondary: secondary,
+      onSecondary: onSecondary,
+      error: error,
+      onError: onError,
+      background: background,
+      onBackground: onBackground,
+      surface: surface,
+      onSurface: onSurface,
+    );
+  }
+}

lib/designsystem/theme/AppPalette.dart

@@ -0,0 +1,68 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+abstract class AppPalette {
+  //Primary
+  static const primaryMineralBlue = Color(0xFF48A2AE);
+  static const primaryMineralBlue80 = Color(0xFF6DB5BE);
+  static const primaryMineralBlue60 = Color(0xFF91C7CE);
+  static const primaryMineralBlue40 = Color(0xFFB6DADF);
+  static const primaryMineralBlue20 = Color(0xFFDAECEF);
+  static const primaryMineralBlue10 = Color(0xFFECF6F7);
+  static const primaryMineralBlue05 = Color(0xFFF6FAFB);
+
+  //Secondary
+  static const secondaryDarkBlue = Color(0xFF052535);
+  static const secondaryOcean140 = Color(0xFF013243);
+  static const secondaryOcean120 = Color(0xFF01475F);
+  static const secondaryOceanBlue = Color(0xFF005A78);
+  static const secondaryOcean80 = Color(0xFF337B93);
+  static const secondaryOcean160 = Color(0xFF7FACBB);
+  static const secondaryEggShellWhite = Color(0xFFFFFDE4);
+  static const secondaryOffWhite = Color(0xFFEBF0F0);
+
+  //Neutral
+  static const neutralBlack = Color(0xFF000000);
+  static const neutralGray90 = Color(0xFF191919);
+  static const neutralGray80 = Color(0xFF333333);
+  static const neutralGray70 = Color(0xFF4c4c4c);
+  static const neutralGray60 = Color(0xFF666666);
+  static const neutralGray50 = Color(0xFF7f7f7f);
+  static const neutralGray40 = Color(0xFF999999);
+  static const neutralGray30 = Color(0xFFb2b2b2);
+  static const neutralGray20 = Color(0xFFcccccc);
+  static const neutralGray10 = Color(0xFFe5e5e5);
+  static const neutralGray05 = Color(0xFFf2f2f2);
+  static const neutralWhite = Color(0xFFFFFFFF);
+
+  //Dark Mode
+  static const darkModeMidnight = Color(0xFF111D2B);
+  static const darkModeMidnightDark = Color(0xFF2D415A);
+  static const darkModeMidnightLight = Color(0xFF5F7897);
+
+  //State - Negative
+  static const negativeDark = Color(0xFFab2b2b);
+  static const negativeBase = Color(0xFFDC5050);
+  static const negativeLight = Color(0xFFE87E90);
+
+  //State - Positive
+  static const positiveDark = Color(0xFF189e46);
+  static const positiveBase = Color(0xFF33C364);
+  static const positiveLight = Color(0xFF8BE7AA);
+
+  //State - Warning
+  static const warningDark = Color(0xFFc89e0a);
+  static const warningBase = Color(0xFFFBCD29);
+  static const warningLight = Color(0xFFF6DB9A);
+
+  //State - Info
+  static const infoDark = Color(0xFF075cab);
+  static const infoBase = Color(0xFF2485DF);
+  static const infoLight = Color(0xFF65A4DD);
+
+  //State - Help
+  static const helpDark = Color(0xFF53198e);
+  static const helpBase = Color(0xFF7939BA);
+  static const helpLight = Color(0xFFB37CDF);
+}

lib/designsystem/theme/AppTextThemeExtension.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+
+class AppTextThemeExtension extends ThemeExtension<AppTextThemeExtension> {
+  const AppTextThemeExtension({
+    required this.displayLarge,
+    required this.displayMedium,
+    required this.displaySmall,
+    required this.headlineLarge,
+    required this.headlineMedium,
+    required this.headlineSmall,
+    required this.titleLarge,
+    required this.titleMedium,
+    required this.titleSmall,
+    required this.bodyLarge,
+    required this.bodyMedium,
+    required this.bodySmall,
+    required this.labelLarge,
+  });
+
+  final TextStyle displayLarge;
+  final TextStyle displayMedium;
+  final TextStyle displaySmall;
+  final TextStyle headlineLarge;
+  final TextStyle headlineMedium;
+  final TextStyle headlineSmall;
+  final TextStyle titleLarge;
+  final TextStyle titleMedium;
+  final TextStyle titleSmall;
+  final TextStyle bodyLarge;
+  final TextStyle bodyMedium;
+  final TextStyle bodySmall;
+  final TextStyle labelLarge;
+
+  @override
+  ThemeExtension<AppTextThemeExtension> copyWith({
+    TextStyle? displayLarge,
+    TextStyle? displayMedium,
+    TextStyle? displaySmall,
+    TextStyle? headlineLarge,
+    TextStyle? headlineMedium,
+    TextStyle? headlineSmall,
+    TextStyle? titleLarge,
+    TextStyle? titleMedium,
+    TextStyle? titleSmall,
+    TextStyle? bodyLarge,
+    TextStyle? bodyMedium,
+    TextStyle? bodySmall,
+    TextStyle? labelLarge,
+  }) {
+    return AppTextThemeExtension(
+      displayLarge: displayLarge ?? this.displayLarge,
+      displayMedium: displayMedium ?? this.displayMedium,
+      displaySmall: displaySmall ?? this.displaySmall,
+      headlineLarge: headlineLarge ?? this.headlineLarge,
+      headlineMedium: headlineMedium ?? this.headlineMedium,
+      headlineSmall: headlineSmall ?? this.headlineSmall,
+      titleLarge: titleLarge ?? this.titleLarge,
+      titleMedium: titleMedium ?? this.titleMedium,
+      titleSmall: titleSmall ?? this.titleSmall,
+      bodyLarge: bodyLarge ?? this.bodyLarge,
+      bodyMedium: bodyMedium ?? this.bodyMedium,
+      bodySmall: bodySmall ?? this.bodySmall,
+      labelLarge: labelLarge ?? this.labelLarge,
+    );
+  }
+
+  @override
+  ThemeExtension<AppTextThemeExtension> lerp(
+    covariant ThemeExtension<AppTextThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! AppTextThemeExtension) {
+      return this;
+    }
+
+    return AppTextThemeExtension(
+      displayLarge: TextStyle.lerp(displayLarge, other.displayLarge, t)!,
+      displayMedium: TextStyle.lerp(displayMedium, other.displayMedium, t)!,
+      displaySmall: TextStyle.lerp(displaySmall, other.displaySmall, t)!,
+      headlineLarge: TextStyle.lerp(headlineLarge, other.headlineLarge, t)!,
+      headlineMedium: TextStyle.lerp(headlineMedium, other.headlineMedium, t)!,
+      headlineSmall: TextStyle.lerp(headlineSmall, other.headlineSmall, t)!,
+      titleLarge: TextStyle.lerp(titleLarge, other.titleLarge, t)!,
+      titleMedium: TextStyle.lerp(titleMedium, other.titleMedium, t)!,
+      titleSmall: TextStyle.lerp(titleSmall, other.titleSmall, t)!,
+      bodyLarge: TextStyle.lerp(bodyLarge, other.bodyLarge, t)!,
+      bodyMedium: TextStyle.lerp(bodyMedium, other.bodyMedium, t)!,
+      bodySmall: TextStyle.lerp(bodySmall, other.bodySmall, t)!,
+      labelLarge: TextStyle.lerp(labelLarge, other.labelLarge, t)!,
+    );
+  }
+}

lib/designsystem/theme/AppTheme.dart

@@ -0,0 +1,20 @@
+import 'package:concordium_wallet/designsystem/theme/ThemeState.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+enum ThemeEvent { toggleDark, toggleLight }
+
+class AppTheme extends Bloc<ThemeEvent, ThemeState> {
+  AppTheme() : super(ThemeState.lightTheme);
+
+  @override
+  Stream<ThemeState> mapEventToState(ThemeEvent event) async* {
+    switch (event) {
+      case ThemeEvent.toggleDark:
+        yield ThemeState.darkTheme;
+        break;
+      case ThemeEvent.toggleLight:
+        yield ThemeState.lightTheme;
+        break;
+    }
+  }
+}