Katjas boekwerk

lib/common/extensions/build_context.dart

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

lib/common/extensions/text_style.dart

@@ -0,0 +1,12 @@
+import 'package:dcc_toolkit/style/text_style/handschrift.dart';
+import 'package:flutter/material.dart';
+
+/// Extensions for [TextStyle].
+extension TextStyleX on TextStyle {
+  /// Converts this [TextStyle] to a [Handschrift].
+  ///
+  /// Provide additional [boldStyle] and [linkStyle] for [Handschrift].
+  Handschrift toHandschrift({TextStyle? boldStyle, TextStyle? linkStyle}) {
+    return Handschrift.fromTextStyle(this, boldStyle: boldStyle, linkStyle: linkStyle);
+  }
+}

lib/dcc_toolkit.dart

@@ -3,6 +3,7 @@ export 'common/dimensions.dart';
 export 'common/extensions/build_context.dart';
 export 'common/extensions/color.dart';
 export 'common/extensions/iterable.dart';
+export 'common/extensions/text_style.dart';
 export 'common/extensions/text_theme.dart';
 export 'common/mixins/refresh_stream_mixin.dart';
 export 'common/result/result.dart';

lib/style/interface/boekwerk_interface.dart

@@ -0,0 +1,130 @@
+import 'package:dcc_toolkit/style/text_style/handschrift.dart';
+import 'package:flutter/material.dart';
+
+/// An abstract interface that defines a typography scale contract.
+///
+/// This interface provides a standardized set of text style getters following
+/// a hierarchical typography system. Implementations can use any type [T] to
+/// represent text styles (e.g., [TextStyle], [Handschrift], or custom types).
+///
+/// The naming follows Material Design typography conventions with additional
+/// custom categories like [navbar] and [subtitleLarge]/[subtitleMedium]/[subtitleSmall] variants.
+///
+/// ## Typography Categories
+///
+/// - **Display**: Largest text styles, used for hero sections or prominent headings
+/// - **Subtitle**: Secondary text styles for subtitles and supporting content
+/// - **Headline**: Section headers and important callouts
+/// - **Title**: Component titles and smaller headers
+/// - **Body**: Main content text for paragraphs and descriptions
+/// - **Label**: Small text for buttons, tabs, and form labels
+/// - **Navbar**: Navigation bar specific styling
+///
+/// ## Example
+///
+/// ```dart
+/// class MyTypography implements BoekwerkInterface<TextStyle> {
+///   @override
+///   TextStyle? get displayLarge => TextStyle(fontSize: 57);
+///   // ... other implementations
+/// }
+/// ```
+abstract interface class BoekwerkInterface<T> {
+  /// Creates a new [BoekwerkInterface] instance.
+  BoekwerkInterface();
+
+  /// The largest display text style.
+  ///
+  /// Typically used for short, important text like hero headers.
+  T? get displayLarge;
+
+  /// The medium display text style.
+  ///
+  /// Used for prominent text that is slightly smaller than [displayLarge].
+  T? get displayMedium;
+
+  /// The smallest display text style.
+  ///
+  /// Used for emphasized text that still needs to stand out.
+  T? get displaySmall;
+
+  /// The largest subtitle text style.
+  ///
+  /// Used for prominent secondary text or large subtitles.
+  T? get subtitleLarge;
+
+  /// The medium subtitle text style.
+  ///
+  /// Used for standard secondary text and subtitles.
+  T? get subtitleMedium;
+
+  /// The smallest subtitle text style.
+  ///
+  /// Used for compact secondary text.
+  T? get subtitleSmall;
+
+  /// The largest headline text style.
+  ///
+  /// Used for section headers and important callouts.
+  T? get headlineLarge;
+
+  /// The medium headline text style.
+  ///
+  /// Used for sub-section headers.
+  T? get headlineMedium;
+
+  /// The smallest headline text style.
+  ///
+  /// Used for smaller section divisions.
+  T? get headlineSmall;
+
+  /// The largest title text style.
+  ///
+  /// Used for component titles and card headers.
+  T? get titleLarge;
+
+  /// The medium title text style.
+  ///
+  /// Used for list item titles and smaller component headers.
+  T? get titleMedium;
+
+  /// The smallest title text style.
+  ///
+  /// Used for compact titles and inline headers.
+  T? get titleSmall;
+
+  /// The largest body text style.
+  ///
+  /// Used for emphasized paragraph text.
+  T? get bodyLarge;
+
+  /// The medium body text style.
+  ///
+  /// The default text style for most content.
+  T? get bodyMedium;
+
+  /// The smallest body text style.
+  ///
+  /// Used for secondary or less important content.
+  T? get bodySmall;
+
+  /// The largest label text style.
+  ///
+  /// Used for prominent buttons and action items.
+  T? get labelLarge;
+
+  /// The medium label text style.
+  ///
+  /// Used for standard buttons, tabs, and form labels.
+  T? get labelMedium;
+
+  /// The smallest label text style.
+  ///
+  /// Used for compact labels and captions.
+  T? get labelSmall;
+
+  /// The navigation bar text style.
+  ///
+  /// Used specifically for navigation bar items and labels.
+  T? get navbar;
+}

lib/style/style.dart

@@ -1,7 +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';
+export 'text_style/boekwerk_decorator.dart';
+export 'text_style/handschrift_color_group.dart';
+export 'text_style/handschrift_decorator.dart';
+export 'text_style/handschrift_surface_group.dart';

lib/style/text_style/boekwerk_decorator.dart

@@ -0,0 +1,125 @@
+import 'package:dcc_toolkit/style/interface/boekwerk_interface.dart';
+import 'package:dcc_toolkit/style/kleurplaat/katjas_kleurplaat.dart';
+import 'package:dcc_toolkit/style/text_style/handschrift.dart';
+import 'package:dcc_toolkit/style/text_style/handschrift_decorator.dart';
+import 'package:dcc_toolkit/style/text_style/katjas_boekwerk.dart';
+
+/// {@template boekwerk_decorator}
+/// Decorates a [KatjasBoekwerk] with [KatjasKleurplaat] colors.
+///
+/// This class wraps a [KatjasBoekwerk] typography scale and applies color
+/// information from a [KatjasKleurplaat] color palette, producing
+/// [HandschriftDecorator] instances that combine both style and color.
+///
+/// Each getter returns a [HandschriftDecorator] that wraps the corresponding
+/// [Handschrift] from the underlying [KatjasBoekwerk], or `null` if the
+/// source style is not defined.
+/// {@endtemplate}
+class BoekwerkDecorator implements BoekwerkInterface<HandschriftDecorator> {
+  /// {@macro boekwerk_decorator}
+  const BoekwerkDecorator(this._katjasBoekwerk, this._katjasKleurplaat);
+
+  /// The underlying typography scale to decorate.
+  final KatjasBoekwerk _katjasBoekwerk;
+
+  /// The color palette to apply to the typography.
+  final KatjasKleurplaat _katjasKleurplaat;
+
+  @override
+  HandschriftDecorator? get displayLarge =>
+      _katjasBoekwerk.displayLarge != null
+          ? HandschriftDecorator(_katjasBoekwerk.displayLarge!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get displayMedium =>
+      _katjasBoekwerk.displayMedium != null
+          ? HandschriftDecorator(_katjasBoekwerk.displayMedium!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get displaySmall =>
+      _katjasBoekwerk.displaySmall != null
+          ? HandschriftDecorator(_katjasBoekwerk.displaySmall!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get subtitleLarge =>
+      _katjasBoekwerk.subtitleLarge != null
+          ? HandschriftDecorator(_katjasBoekwerk.subtitleLarge!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get subtitleMedium =>
+      _katjasBoekwerk.subtitleMedium != null
+          ? HandschriftDecorator(_katjasBoekwerk.subtitleMedium!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get subtitleSmall =>
+      _katjasBoekwerk.subtitleSmall != null
+          ? HandschriftDecorator(_katjasBoekwerk.subtitleSmall!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get headlineLarge =>
+      _katjasBoekwerk.headlineLarge != null
+          ? HandschriftDecorator(_katjasBoekwerk.headlineLarge!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get headlineMedium =>
+      _katjasBoekwerk.headlineMedium != null
+          ? HandschriftDecorator(_katjasBoekwerk.headlineMedium!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get headlineSmall =>
+      _katjasBoekwerk.headlineSmall != null
+          ? HandschriftDecorator(_katjasBoekwerk.headlineSmall!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get titleLarge =>
+      _katjasBoekwerk.titleLarge != null ? HandschriftDecorator(_katjasBoekwerk.titleLarge!, _katjasKleurplaat) : null;
+
+  @override
+  HandschriftDecorator? get titleMedium =>
+      _katjasBoekwerk.titleMedium != null
+          ? HandschriftDecorator(_katjasBoekwerk.titleMedium!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get titleSmall =>
+      _katjasBoekwerk.titleSmall != null ? HandschriftDecorator(_katjasBoekwerk.titleSmall!, _katjasKleurplaat) : null;
+
+  @override
+  HandschriftDecorator? get bodyLarge =>
+      _katjasBoekwerk.bodyLarge != null ? HandschriftDecorator(_katjasBoekwerk.bodyLarge!, _katjasKleurplaat) : null;
+
+  @override
+  HandschriftDecorator? get bodyMedium =>
+      _katjasBoekwerk.bodyMedium != null ? HandschriftDecorator(_katjasBoekwerk.bodyMedium!, _katjasKleurplaat) : null;
+
+  @override
+  HandschriftDecorator? get bodySmall =>
+      _katjasBoekwerk.bodySmall != null ? HandschriftDecorator(_katjasBoekwerk.bodySmall!, _katjasKleurplaat) : null;
+
+  @override
+  HandschriftDecorator? get labelLarge =>
+      _katjasBoekwerk.labelLarge != null ? HandschriftDecorator(_katjasBoekwerk.labelLarge!, _katjasKleurplaat) : null;
+
+  @override
+  HandschriftDecorator? get labelMedium =>
+      _katjasBoekwerk.labelMedium != null
+          ? HandschriftDecorator(_katjasBoekwerk.labelMedium!, _katjasKleurplaat)
+          : null;
+
+  @override
+  HandschriftDecorator? get labelSmall =>
+      _katjasBoekwerk.labelSmall != null ? HandschriftDecorator(_katjasBoekwerk.labelSmall!, _katjasKleurplaat) : null;
+
+  @override
+  HandschriftDecorator? get navbar =>
+      _katjasBoekwerk.navbar != null ? HandschriftDecorator(_katjasBoekwerk.navbar!, _katjasKleurplaat) : null;
+}