💄 Aligned with Katja for the kleurplaat

Author: Guldem

lib/common/extensions/text_theme.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+extension LinkStyle on TextTheme {
+  TextStyle get linkSmall => bodySmall!.copyWith(
+        fontWeight: FontWeight.bold,
+        decoration: TextDecoration.underline,
+      );
+
+  TextStyle get linkMedium => bodyMedium!.copyWith(
+        fontWeight: FontWeight.bold,
+        decoration: TextDecoration.underline,
+      );
+
+  TextStyle get linkLarge => bodyLarge!.copyWith(
+        fontWeight: FontWeight.bold,
+        decoration: TextDecoration.underline,
+      );
+}

lib/style/interface/color_group_interface.dart

@@ -12,7 +12,7 @@ abstract interface class ColorGroupInterface<T> {
   /// {@template on_color}
   /// The color on the foreground. Usually on top of the [color].
   /// {@endtemplate}
-  T get onColor;
+  T get onColorContrast;
 
   /// {@template on_color_subtle}
   /// The color on the foreground, but more subtle. Usually on top of the [color].

lib/style/interface/kleurplaat_interface.dart

@@ -50,4 +50,9 @@ abstract interface class KleurplaatInterface<T> {
   /// The surface group.
   /// {@endtemplate}
   SurfaceGroupInterface<T> get surface;
+
+  /// {@template surface}
+  /// The surface inverse group.
+  /// {@endtemplate}
+  SurfaceGroupInterface<T>? get surfaceInverse;
 }

lib/style/interface/surface_group_interface.dart

@@ -12,22 +12,22 @@ abstract interface class SurfaceGroupInterface<T> {
   /// {@template onColorContrastPlus}
   /// The color on the surface with a higher contrast.
   /// {@endtemplate}
-  T get onColorContrastPlus;
+  T get onColorContrast;
 
   /// {@template onColorContrastMinus}
   /// The color on the surface with a lower contrast.
   /// {@endtemplate}
-  T get onColorContrastMinus;
+  T get onColorContrastDim;
 
   /// {@template onColorSubtlePlus}
   /// The color on the surface with a higher contrast, but more subtle.
   /// {@endtemplate}
-  T get onColorSubtlePlus;
+  T get onColorSubtle;
 
   /// {@template onColorSubtleMinus}
   /// The color on the surface with a lower contrast, but more subtle.
   /// {@endtemplate}
-  T get onColorSubtleMinus;
+  T get onColorSubtleDim;
 
   /// {@template containerLowest}
   /// The color of the lowest container.
@@ -54,6 +54,11 @@ abstract interface class SurfaceGroupInterface<T> {
   /// {@endtemplate}
   T get containerHighest;
 
+  /// {@template link}
+  /// The color of the link.
+  /// {@endtemplate}
+  T get link;
+
   /// Linearly interpolate with another object.
   SurfaceGroupInterface<T> lerp(
     covariant SurfaceGroupInterface<T>? other,

lib/style/kleurplaat/color_group.dart

@@ -7,15 +7,15 @@ class ColorGroup implements ColorGroupInterface<Color> {
   /// {@macro color_group}
   const ColorGroup({
     required this.color,
-    required this.onColor,
+    required this.onColorContrast,
     this.onColorSubtle,
   });
 
   @override
   final Color color;
 
   @override
-  final Color onColor;
+  final Color onColorContrast;
 
   @override
   final Color? onColorSubtle;
@@ -28,7 +28,7 @@ class ColorGroup implements ColorGroupInterface<Color> {
 
     return ColorGroup(
       color: Color.lerp(color, other.color, t) ?? color,
-      onColor: Color.lerp(onColor, other.onColor, t) ?? onColor,
+      onColorContrast: Color.lerp(onColorContrast, other.onColorContrast, t) ?? onColorContrast,
       onColorSubtle: onColorSubtle == null || other.onColorSubtle == null
           ? null
           : Color.lerp(onColorSubtle, other.onColorSubtle, t),

lib/style/kleurplaat/katjas_kleurplaat.dart

@@ -4,8 +4,7 @@ import 'package:dcc_toolkit/style/kleurplaat/surface_group.dart';
 import 'package:flutter/material.dart';
 
 /// {@macro kleurplaat}
-class KatjasKleurplaat extends ThemeExtension<KatjasKleurplaat>
-    implements KleurplaatInterface<Color> {
+class KatjasKleurplaat extends ThemeExtension<KatjasKleurplaat> implements KleurplaatInterface<Color> {
   /// {@macro kleurplaat}
   const KatjasKleurplaat({
     required this.primary,
@@ -17,6 +16,7 @@ class KatjasKleurplaat extends ThemeExtension<KatjasKleurplaat>
     required this.success,
     required this.successFill,
     required this.surface,
+    required this.surfaceInverse,
   });
 
   @override
@@ -46,6 +46,9 @@ class KatjasKleurplaat extends ThemeExtension<KatjasKleurplaat>
   @override
   final SurfaceGroup surface;
 
+  @override
+  final SurfaceGroup? surfaceInverse;
+
   @override
   ThemeExtension<KatjasKleurplaat> copyWith({
     ColorGroup? primary,
@@ -57,6 +60,7 @@ class KatjasKleurplaat extends ThemeExtension<KatjasKleurplaat>
     ColorGroup? success,
     ColorGroup? successFill,
     SurfaceGroup? surface,
+    SurfaceGroup? surfaceInverse,
   }) =>
       KatjasKleurplaat(
         primary: primary ?? this.primary,
@@ -68,6 +72,7 @@ class KatjasKleurplaat extends ThemeExtension<KatjasKleurplaat>
         success: success ?? this.success,
         successFill: successFill ?? this.successFill,
         surface: surface ?? this.surface,
+        surfaceInverse: surfaceInverse ?? this.surfaceInverse,
       );
 
   @override
@@ -84,26 +89,26 @@ class KatjasKleurplaat extends ThemeExtension<KatjasKleurplaat>
       success: success.lerp(other.success, t),
       successFill: successFill.lerp(other.successFill, t),
       surface: surface.lerp(other.surface, t),
+      surfaceInverse: surfaceInverse?.lerp(other.surfaceInverse, t),
     );
   }
 
   /// Converts the [KatjasKleurplaat] to a [ColorScheme].
-  ColorScheme toColorScheme({Brightness brightness = Brightness.light}) =>
-      ColorScheme(
+  ColorScheme toColorScheme({Brightness brightness = Brightness.light}) => ColorScheme(
         brightness: brightness,
         primary: primary.color,
         primaryContainer: primary.color,
-        onPrimary: primary.onColor,
-        onPrimaryContainer: primary.onColor,
+        onPrimary: primary.onColorContrast,
+        onPrimaryContainer: primary.onColorContrast,
         secondary: content.color,
         secondaryContainer: content.color,
-        onSecondary: content.onColor,
-        onSecondaryContainer: content.onColor,
+        onSecondary: content.onColorContrast,
+        onSecondaryContainer: content.onColorContrast,
         tertiary: error.color,
-        onTertiary: error.onColor,
+        onTertiary: error.onColorContrast,
         error: error.color,
-        onError: error.onColor,
+        onError: error.onColorContrast,
         surface: surface.color,
-        onSurface: surface.onColorContrastPlus,
+        onSurface: surface.onColorContrast,
       );
 }

lib/style/kleurplaat/surface_group.dart

@@ -7,31 +7,32 @@ 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.onColorContrast,
+    required this.onColorContrastDim,
+    required this.onColorSubtle,
+    required this.onColorSubtleDim,
     required this.containerLowest,
     required this.containerLow,
     required this.container,
     required this.containerHigh,
     required this.containerHighest,
+    required this.link,
   });
 
   @override
   final Color color;
 
   @override
-  final Color onColorContrastPlus;
+  final Color onColorContrast;
 
   @override
-  final Color onColorContrastMinus;
+  final Color onColorContrastDim;
 
   @override
-  final Color onColorSubtlePlus;
+  final Color onColorSubtle;
 
   @override
-  final Color onColorSubtleMinus;
+  final Color onColorSubtleDim;
 
   @override
   final Color containerLowest;
@@ -48,26 +49,25 @@ class SurfaceGroup implements SurfaceGroupInterface<Color> {
   @override
   final Color containerHighest;
 
+  @override
+  final Color link;
+
   @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)!,
+      onColorContrast: Color.lerp(onColorContrast, other.onColorContrast, t)!,
+      onColorContrastDim: Color.lerp(onColorContrastDim, other.onColorContrastDim, t)!,
+      onColorSubtle: Color.lerp(onColorSubtle, other.onColorSubtle, t)!,
+      onColorSubtleDim: Color.lerp(onColorSubtleDim, other.onColorSubtleDim, 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)!,
+      containerHighest: Color.lerp(containerHighest, other.containerHighest, t)!,
+      link: Color.lerp(link, other.link, t)!,
     );
   }
 }

lib/style/text_style/text_style_color_group.dart

@@ -6,15 +6,15 @@ class TextStyleColorGroup implements ColorGroupInterface<TextStyle> {
   /// {@macro color_group}
   const TextStyleColorGroup({
     required this.color,
-    required this.onColor,
+    required this.onColorContrast,
     this.onColorSubtle,
   });
 
   @override
   final TextStyle color;
 
   @override
-  final TextStyle onColor;
+  final TextStyle onColorContrast;
 
   @override
   final TextStyle? onColorSubtle;