Kleurplaat

lib/common/extensions/build_context.dart

@@ -1,3 +1,5 @@
+import 'package:dcc_toolkit/style/kleurplaat/katjas_kleurplaat.dart';
+import 'package:dcc_toolkit/style/text_style/text_themes_decorator.dart';
 import 'package:flutter/material.dart';
 
 /// Extension for [BuildContext] to get theme related data.
@@ -10,4 +12,13 @@ extension ThemingExtensions on BuildContext {
 
   /// Get Theme [TextTheme] from [BuildContext].
   TextTheme get textThemes => theme.textTheme;
+
+  /// Get [TextThemesDecorator] from [BuildContext].
+  TextThemesDecorator get textThemesDecorator => TextThemesDecorator(
+        textThemes,
+        katjasKleurPlaat,
+      );
+
+  /// Get [KatjasKleurplaat] from [BuildContext].
+  KatjasKleurplaat get katjasKleurPlaat => theme.extension<KatjasKleurplaat>()!;
 }

lib/dcc_toolkit.dart

@@ -5,3 +5,4 @@ export 'common/extensions/color.dart';
 export 'common/extensions/iterable.dart';
 export 'common/result/result.dart';
 export 'logger/bolt_logger.dart';
+export 'style/style.dart';

lib/style/interface/color_group_interface.dart

@@ -0,0 +1,27 @@
+import 'package:dcc_toolkit/style/kleurplaat/katjas_kleurplaat.dart';
+
+/// {@template color_group}
+/// Group of colors defined for [KatjasKleurplaat].
+/// {@endtemplate}
+abstract interface class ColorGroupInterface<T> {
+  /// {@template color}
+  /// The color on the background.
+  /// {@endtemplate}
+  T get color;
+
+  /// {@template on_color}
+  /// The color on the foreground. Usually on top of the [color].
+  /// {@endtemplate}
+  T get onColor;
+
+  /// {@template on_color_subtle}
+  /// The color on the foreground, but more subtle. Usually on top of the [color].
+  /// {@endtemplate}
+  T? get onColorSubtle;
+
+  /// Linearly interpolate with another object.
+  ColorGroupInterface<T> lerp(
+    covariant ColorGroupInterface<T>? other,
+    double t,
+  );
+}

lib/style/interface/kleurplaat_interface.dart

@@ -0,0 +1,53 @@
+import 'package:dcc_toolkit/style/interface/color_group_interface.dart';
+import 'package:dcc_toolkit/style/interface/surface_group_interface.dart';
+import 'package:dcc_toolkit/style/kleurplaat/katjas_kleurplaat.dart';
+
+/// {@template kleurplaat}
+/// Group of colors defined for [KatjasKleurplaat].
+/// {@endtemplate}
+abstract interface class KleurplaatInterface<T> {
+  /// {@template primary}
+  /// The primary color group.
+  /// {@endtemplate}
+  ColorGroupInterface<T> get primary;
+
+  /// {@template primaryFill}
+  /// The primary fill color group.
+  /// {@endtemplate}
+  ColorGroupInterface<T> get primaryFill;
+
+  /// {@template content}
+  /// The content color group.
+  /// {@endtemplate}
+  ColorGroupInterface<T> get content;
+
+  /// {@template contentFill}
+  /// The content fill color group.
+  /// {@endtemplate}
+  ColorGroupInterface<T> get contentFill;
+
+  /// {@template error}
+  /// The error color group.
+  /// {@endtemplate}
+  ColorGroupInterface<T> get error;
+
+  /// {@template errorFill}
+  /// The error fill color group.
+  /// {@endtemplate}
+  ColorGroupInterface<T> get errorFill;
+
+  /// {@template success}
+  /// The success color group.
+  /// {@endtemplate}
+  ColorGroupInterface<T> get success;
+
+  /// {@template successFill}
+  /// The success fill color group.
+  /// {@endtemplate}
+  ColorGroupInterface<T> get successFill;
+
+  /// {@template surface}
+  /// The surface group.
+  /// {@endtemplate}
+  SurfaceGroupInterface<T> get surface;
+}

lib/style/interface/surface_group_interface.dart

@@ -0,0 +1,62 @@
+import 'package:dcc_toolkit/style/kleurplaat/katjas_kleurplaat.dart';
+
+/// {@template surface_group}
+/// Group of colors defined for surfaces in [KatjasKleurplaat].
+/// {@endtemplate}
+abstract interface class SurfaceGroupInterface<T> {
+  /// {@template color}
+  /// The color of the surface.
+  /// {@endtemplate}
+  T get color;
+
+  /// {@template onColorContrastPlus}
+  /// The color on the surface with a higher contrast.
+  /// {@endtemplate}
+  T get onColorContrastPlus;
+
+  /// {@template onColorContrastMinus}
+  /// The color on the surface with a lower contrast.
+  /// {@endtemplate}
+  T get onColorContrastMinus;
+
+  /// {@template onColorSubtlePlus}
+  /// The color on the surface with a higher contrast, but more subtle.
+  /// {@endtemplate}
+  T get onColorSubtlePlus;
+
+  /// {@template onColorSubtleMinus}
+  /// The color on the surface with a lower contrast, but more subtle.
+  /// {@endtemplate}
+  T get onColorSubtleMinus;
+
+  /// {@template containerLowest}
+  /// The color of the lowest container.
+  /// {@endtemplate}
+  T get containerLowest;
+
+  /// {@template containerLow}
+  /// The color of the low container.
+  /// {@endtemplate}
+  T get containerLow;
+
+  /// {@template container}
+  /// The color of the container.
+  /// {@endtemplate}
+  T get container;
+
+  /// {@template containerHigh}
+  /// The color of the high container.
+  /// {@endtemplate}
+  T get containerHigh;
+
+  /// {@template containerHighest}
+  /// The color of the highest container.
+  /// {@endtemplate}
+  T get containerHighest;
+
+  /// Linearly interpolate with another object.
+  SurfaceGroupInterface<T> lerp(
+    covariant SurfaceGroupInterface<T>? other,
+    double t,
+  );
+}

lib/style/kleurplaat/color_group.dart

@@ -0,0 +1,37 @@
+import 'dart:ui';
+
+import 'package:dcc_toolkit/style/interface/color_group_interface.dart';
+
+/// {@macro color_group}
+class ColorGroup implements ColorGroupInterface<Color> {
+  /// {@macro color_group}
+  const ColorGroup({
+    required this.color,
+    required this.onColor,
+    this.onColorSubtle,
+  });
+
+  @override
+  final Color color;
+
+  @override
+  final Color onColor;
+
+  @override
+  final Color? onColorSubtle;
+
+  @override
+  ColorGroup lerp(ColorGroup? other, double t) {
+    if (other is! ColorGroup) {
+      return this;
+    }
+
+    return ColorGroup(
+      color: Color.lerp(color, other.color, t) ?? color,
+      onColor: Color.lerp(onColor, other.onColor, t) ?? onColor,
+      onColorSubtle: onColorSubtle == null || other.onColorSubtle == null
+          ? null
+          : Color.lerp(onColorSubtle, other.onColorSubtle, t),
+    );
+  }
+}

lib/style/kleurplaat/katjas_kleurplaat.dart

@@ -0,0 +1,109 @@
+import 'package:dcc_toolkit/style/interface/kleurplaat_interface.dart';
+import 'package:dcc_toolkit/style/kleurplaat/color_group.dart';
+import 'package:dcc_toolkit/style/kleurplaat/surface_group.dart';
+import 'package:flutter/material.dart';
+
+/// {@macro kleurplaat}
+class KatjasKleurplaat extends ThemeExtension<KatjasKleurplaat>
+    implements KleurplaatInterface<Color> {
+  /// {@macro kleurplaat}
+  const KatjasKleurplaat({
+    required this.primary,
+    required this.primaryFill,
+    required this.content,
+    required this.contentFill,
+    required this.error,
+    required this.errorFill,
+    required this.success,
+    required this.successFill,
+    required this.surface,
+  });
+
+  @override
+  final ColorGroup primary;
+
+  @override
+  final ColorGroup primaryFill;
+
+  @override
+  final ColorGroup content;
+
+  @override
+  final ColorGroup contentFill;
+
+  @override
+  final ColorGroup error;
+
+  @override
+  final ColorGroup errorFill;
+
+  @override
+  final ColorGroup success;
+
+  @override
+  final ColorGroup successFill;
+
+  @override
+  final SurfaceGroup surface;
+
+  @override
+  ThemeExtension<KatjasKleurplaat> copyWith({
+    ColorGroup? primary,
+    ColorGroup? primaryFill,
+    ColorGroup? content,
+    ColorGroup? contentFill,
+    ColorGroup? error,
+    ColorGroup? errorFill,
+    ColorGroup? success,
+    ColorGroup? successFill,
+    SurfaceGroup? surface,
+  }) =>
+      KatjasKleurplaat(
+        primary: primary ?? this.primary,
+        primaryFill: primaryFill ?? this.primaryFill,
+        content: content ?? this.content,
+        contentFill: contentFill ?? this.contentFill,
+        error: error ?? this.error,
+        errorFill: errorFill ?? this.errorFill,
+        success: success ?? this.success,
+        successFill: successFill ?? this.successFill,
+        surface: surface ?? this.surface,
+      );
+
+  @override
+  KatjasKleurplaat lerp(KatjasKleurplaat? other, double t) {
+    if (other is! KatjasKleurplaat) return this;
+
+    return KatjasKleurplaat(
+      primary: primary.lerp(other.primary, t),
+      primaryFill: primaryFill.lerp(other.primaryFill, t),
+      content: content.lerp(other.content, t),
+      contentFill: contentFill.lerp(other.contentFill, t),
+      error: error.lerp(other.error, t),
+      errorFill: errorFill.lerp(other.errorFill, t),
+      success: success.lerp(other.success, t),
+      successFill: successFill.lerp(other.successFill, t),
+      surface: surface.lerp(other.surface, t),
+    );
+  }
+
+  /// Converts the [KatjasKleurplaat] to a [ColorScheme].
+  ColorScheme toColorScheme({Brightness brightness = Brightness.light}) =>
+      ColorScheme(
+        brightness: brightness,
+        primary: primary.color,
+        primaryContainer: primary.color,
+        onPrimary: primary.onColor,
+        onPrimaryContainer: primary.onColor,
+        secondary: content.color,
+        secondaryContainer: content.color,
+        onSecondary: content.onColor,
+        onSecondaryContainer: content.onColor,
+        tertiary: error.color,
+        onTertiary: error.onColor,
+        error: error.color,
+        onError: error.onColor,
+        surface: surface.color,
+        onSurface: surface.onColorContrastPlus,
+      );
+}

lib/style/kleurplaat/surface_group.dart

@@ -0,0 +1,73 @@
+import 'dart:ui';
+
+import 'package:dcc_toolkit/style/interface/surface_group_interface.dart';
+
+/// {@macro surface_group}
+class SurfaceGroup implements SurfaceGroupInterface<Color> {
+  /// {@macro surface_group}
+  const SurfaceGroup({
+    required this.color,
+    required this.onColorContrastPlus,
+    required this.onColorContrastMinus,
+    required this.onColorSubtlePlus,
+    required this.onColorSubtleMinus,
+    required this.containerLowest,
+    required this.containerLow,
+    required this.container,
+    required this.containerHigh,
+    required this.containerHighest,
+  });
+
+  @override
+  final Color color;
+
+  @override
+  final Color onColorContrastPlus;
+
+  @override
+  final Color onColorContrastMinus;
+
+  @override
+  final Color onColorSubtlePlus;
+
+  @override
+  final Color onColorSubtleMinus;
+
+  @override
+  final Color containerLowest;
+
+  @override
+  final Color containerLow;
+
+  @override
+  final Color container;
+
+  @override
+  final Color containerHigh;
+
+  @override
+  final Color containerHighest;
+
+  @override
+  SurfaceGroup lerp(SurfaceGroup? other, double t) {
+    if (other == null) return this;
+
+    return SurfaceGroup(
+      color: Color.lerp(color, other.color, t)!,
+      onColorContrastPlus:
+          Color.lerp(onColorContrastPlus, other.onColorContrastPlus, t)!,
+      onColorContrastMinus:
+          Color.lerp(onColorContrastMinus, other.onColorContrastMinus, t)!,
+      onColorSubtlePlus:
+          Color.lerp(onColorSubtlePlus, other.onColorSubtlePlus, t)!,
+      onColorSubtleMinus:
+          Color.lerp(onColorSubtleMinus, other.onColorSubtleMinus, t)!,
+      containerLowest: Color.lerp(containerLowest, other.containerLowest, t)!,
+      containerLow: Color.lerp(containerLow, other.containerLow, t)!,
+      container: Color.lerp(container, other.container, t)!,
+      containerHigh: Color.lerp(containerHigh, other.containerHigh, t)!,
+      containerHighest:
+          Color.lerp(containerHighest, other.containerHighest, t)!,
+    );
+  }
+}

lib/style/style.dart

@@ -0,0 +1,7 @@
+export 'kleurplaat/color_group.dart';
+export 'kleurplaat/katjas_kleurplaat.dart';
+export 'kleurplaat/surface_group.dart';
+export 'text_style/text_style_color_group.dart';
+export 'text_style/text_style_decorator.dart';
+export 'text_style/text_style_surface_group.dart';
+export 'text_style/text_themes_decorator.dart';