From a84a7760aec8bd065e568ddbb586c5f4e8796879 Mon Sep 17 00:00:00 2001 From: Job Guldemeester Date: Fri, 6 Feb 2026 13:13:08 +0100 Subject: [PATCH 1/3] :sparkles: Added katjas boekwerk --- lib/common/extensions/build_context.dart | 12 +- lib/style/interface/boekwerk_interface.dart | 40 +++++ lib/style/style.dart | 8 +- lib/style/text_style/boekwerk_decorator.dart | 96 ++++++++++++ lib/style/text_style/handschrift.dart | 147 ++++++++++++++++++ .../text_style/handschrift_color_group.dart | 20 +++ ...orator.dart => handschrift_decorator.dart} | 44 +++--- ...up.dart => handschrift_surface_group.dart} | 30 ++-- lib/style/text_style/katjas_boekwerk.dart | 132 ++++++++++++++++ .../text_style/text_style_color_group.dart | 20 --- .../text_style/text_themes_decorator.dart | 76 --------- 11 files changed, 482 insertions(+), 143 deletions(-) create mode 100644 lib/style/interface/boekwerk_interface.dart create mode 100644 lib/style/text_style/boekwerk_decorator.dart create mode 100644 lib/style/text_style/handschrift.dart create mode 100644 lib/style/text_style/handschrift_color_group.dart rename lib/style/text_style/{text_style_decorator.dart => handschrift_decorator.dart} (79%) rename lib/style/text_style/{text_style_surface_group.dart => handschrift_surface_group.dart} (50%) create mode 100644 lib/style/text_style/katjas_boekwerk.dart delete mode 100644 lib/style/text_style/text_style_color_group.dart delete mode 100644 lib/style/text_style/text_themes_decorator.dart diff --git a/lib/common/extensions/build_context.dart b/lib/common/extensions/build_context.dart index 680f5d4..f53764d 100644 --- a/lib/common/extensions/build_context.dart +++ b/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()!; - /// 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()!; diff --git a/lib/style/interface/boekwerk_interface.dart b/lib/style/interface/boekwerk_interface.dart new file mode 100644 index 0000000..76702af --- /dev/null +++ b/lib/style/interface/boekwerk_interface.dart @@ -0,0 +1,40 @@ +/// +abstract interface class BoekwerkInterface { + BoekwerkInterface(); + T? get displayLarge; + + T? get displayMedium; + + T? get displaySmall; + + T? get subtitleLarge; + + T? get subtitleMedium; + + T? get subtitleSmall; + + T? get headlineLarge; + + T? get headlineMedium; + + T? get headlineSmall; + + T? get titleLarge; + + T? get titleMedium; + + T? get titleSmall; + + T? get bodyLarge; + + T? get bodyMedium; + + T? get bodySmall; + + T? get labelLarge; + + T? get labelMedium; + + T? get labelSmall; + T? get navbar; +} diff --git a/lib/style/style.dart b/lib/style/style.dart index 6e73aa6..2de58d2 100644 --- a/lib/style/style.dart +++ b/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'; diff --git a/lib/style/text_style/boekwerk_decorator.dart b/lib/style/text_style/boekwerk_decorator.dart new file mode 100644 index 0000000..82d2d7a --- /dev/null +++ b/lib/style/text_style/boekwerk_decorator.dart @@ -0,0 +1,96 @@ +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_decorator.dart'; +import 'package:dcc_toolkit/style/text_style/katjas_boekwerk.dart'; + +/// {@template text_themes_decorator} +// Is imported via `package:flutter/material.dart` +// ignore: comment_references +/// Decorates a [KatjasBoekwerk] with [KatjasKleurplaat] colors. +/// {@endtemplate} +class BoekwerkDecorator implements BoekwerkInterface { + /// {@macro text_themes_decorator} + const BoekwerkDecorator(this._katjasBoekwerk, this._katjasKleurplaat); + + final KatjasBoekwerk _katjasBoekwerk; + final KatjasKleurplaat _katjasKleurplaat; + + HandschriftDecorator? get displayLarge => + _katjasBoekwerk.displayLarge != null + ? HandschriftDecorator(_katjasBoekwerk.displayLarge!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get displayMedium => + _katjasBoekwerk.displayMedium != null + ? HandschriftDecorator(_katjasBoekwerk.displayMedium!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get displaySmall => + _katjasBoekwerk.displaySmall != null + ? HandschriftDecorator(_katjasBoekwerk.displaySmall!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get subtitleLarge => + _katjasBoekwerk.subtitleLarge != null + ? HandschriftDecorator(_katjasBoekwerk.subtitleLarge!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get subtitleMedium => + _katjasBoekwerk.subtitleMedium != null + ? HandschriftDecorator(_katjasBoekwerk.subtitleMedium!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get subtitleSmall => + _katjasBoekwerk.subtitleSmall != null + ? HandschriftDecorator(_katjasBoekwerk.subtitleSmall!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get headlineLarge => + _katjasBoekwerk.headlineLarge != null + ? HandschriftDecorator(_katjasBoekwerk.headlineLarge!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get headlineMedium => + _katjasBoekwerk.headlineMedium != null + ? HandschriftDecorator(_katjasBoekwerk.headlineMedium!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get headlineSmall => + _katjasBoekwerk.headlineSmall != null + ? HandschriftDecorator(_katjasBoekwerk.headlineSmall!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get titleLarge => + _katjasBoekwerk.titleLarge != null ? HandschriftDecorator(_katjasBoekwerk.titleLarge!, _katjasKleurplaat) : null; + + HandschriftDecorator? get titleMedium => + _katjasBoekwerk.titleMedium != null + ? HandschriftDecorator(_katjasBoekwerk.titleMedium!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get titleSmall => + _katjasBoekwerk.titleSmall != null ? HandschriftDecorator(_katjasBoekwerk.titleSmall!, _katjasKleurplaat) : null; + + HandschriftDecorator? get bodyLarge => + _katjasBoekwerk.bodyLarge != null ? HandschriftDecorator(_katjasBoekwerk.bodyLarge!, _katjasKleurplaat) : null; + + HandschriftDecorator? get bodyMedium => + _katjasBoekwerk.bodyMedium != null ? HandschriftDecorator(_katjasBoekwerk.bodyMedium!, _katjasKleurplaat) : null; + + HandschriftDecorator? get bodySmall => + _katjasBoekwerk.bodySmall != null ? HandschriftDecorator(_katjasBoekwerk.bodySmall!, _katjasKleurplaat) : null; + + HandschriftDecorator? get labelLarge => + _katjasBoekwerk.labelLarge != null ? HandschriftDecorator(_katjasBoekwerk.labelLarge!, _katjasKleurplaat) : null; + + HandschriftDecorator? get labelMedium => + _katjasBoekwerk.labelMedium != null + ? HandschriftDecorator(_katjasBoekwerk.labelMedium!, _katjasKleurplaat) + : null; + + HandschriftDecorator? get labelSmall => + _katjasBoekwerk.labelSmall != null ? HandschriftDecorator(_katjasBoekwerk.labelSmall!, _katjasKleurplaat) : null; + + HandschriftDecorator? get navbar => + _katjasBoekwerk.navbar != null ? HandschriftDecorator(_katjasBoekwerk.navbar!, _katjasKleurplaat) : null; +} diff --git a/lib/style/text_style/handschrift.dart b/lib/style/text_style/handschrift.dart new file mode 100644 index 0000000..97b5da5 --- /dev/null +++ b/lib/style/text_style/handschrift.dart @@ -0,0 +1,147 @@ +import 'package:flutter/material.dart'; + +class Handschrift extends TextStyle { + Handschrift({ + super.inherit, + super.color, + super.backgroundColor, + super.fontSize, + super.fontWeight, + super.fontStyle, + super.letterSpacing, + super.wordSpacing, + super.textBaseline, + super.height, + super.leadingDistribution, + super.locale, + super.foreground, + super.background, + super.shadows, + super.fontFeatures, + super.fontVariations, + super.decoration, + super.decorationColor, + super.decorationStyle, + super.decorationThickness, + super.debugLabel, + super.fontFamily, + super.fontFamilyFallback, + super.package, + super.overflow, + TextStyle? boldStyle, + TextStyle? linkStyle, + }) : _boldStyle = boldStyle, + _linkStyle = linkStyle; + + factory Handschrift.fromTextStyle(TextStyle style, {TextStyle? boldStyle, TextStyle? linkStyle}) => Handschrift( + inherit: style.inherit, + color: style.color, + backgroundColor: style.backgroundColor, + fontSize: style.fontSize, + fontWeight: style.fontWeight, + fontStyle: style.fontStyle, + letterSpacing: style.letterSpacing, + wordSpacing: style.wordSpacing, + textBaseline: style.textBaseline, + height: style.height, + leadingDistribution: style.leadingDistribution, + locale: style.locale, + foreground: style.foreground, + background: style.background, + shadows: style.shadows, + fontFeatures: style.fontFeatures, + fontVariations: style.fontVariations, + decoration: style.decoration, + decorationColor: style.decorationColor, + decorationStyle: style.decorationStyle, + decorationThickness: style.decorationThickness, + debugLabel: style.debugLabel, + fontFamily: style.fontFamily, + fontFamilyFallback: style.fontFamilyFallback, + overflow: style.overflow, + boldStyle: boldStyle, + linkStyle: linkStyle, + ); + + final TextStyle? _boldStyle; + final TextStyle? _linkStyle; + + TextStyle get bold => merge(_boldStyle); + + TextStyle get link => merge(_linkStyle); + + Handschrift lerp(Handschrift? other, double t) { + if (identical(this, other)) return this; + + final lerped = TextStyle.lerp(this, other, t); + final boldLerped = TextStyle.lerp(_boldStyle, other?._boldStyle, t); + final linkLerped = TextStyle.lerp(_linkStyle, other?._linkStyle, t); + + if (lerped != null) { + return Handschrift.fromTextStyle(lerped, boldStyle: boldLerped, linkStyle: linkLerped); + } else { + return this; + } + } + + @override + Handschrift copyWith({ + bool? inherit, + Color? color, + Color? backgroundColor, + double? fontSize, + FontWeight? fontWeight, + FontStyle? fontStyle, + double? letterSpacing, + double? wordSpacing, + TextBaseline? textBaseline, + double? height, + TextLeadingDistribution? leadingDistribution, + Locale? locale, + Paint? foreground, + Paint? background, + List? shadows, + List? fontFeatures, + List? fontVariations, + TextDecoration? decoration, + Color? decorationColor, + TextDecorationStyle? decorationStyle, + double? decorationThickness, + String? debugLabel, + String? fontFamily, + List? fontFamilyFallback, + String? package, + TextOverflow? overflow, + TextStyle? boldStyle, + TextStyle? linkStyle, + }) => Handschrift( + inherit: inherit ?? this.inherit, + color: color ?? this.color, + backgroundColor: backgroundColor ?? this.backgroundColor, + fontSize: fontSize ?? this.fontSize, + fontWeight: fontWeight ?? this.fontWeight, + fontStyle: fontStyle ?? this.fontStyle, + letterSpacing: letterSpacing ?? this.letterSpacing, + wordSpacing: wordSpacing ?? this.wordSpacing, + textBaseline: textBaseline ?? this.textBaseline, + height: height ?? this.height, + leadingDistribution: leadingDistribution ?? this.leadingDistribution, + locale: locale ?? this.locale, + foreground: foreground ?? this.foreground, + background: background ?? this.background, + shadows: shadows ?? this.shadows, + fontFeatures: fontFeatures ?? this.fontFeatures, + fontVariations: fontVariations ?? this.fontVariations, + decoration: decoration ?? this.decoration, + decorationColor: decorationColor ?? this.decorationColor, + decorationStyle: decorationStyle ?? this.decorationStyle, + decorationThickness: decorationThickness ?? this.decorationThickness, + debugLabel: debugLabel ?? this.debugLabel, + fontFamily: fontFamily ?? this.fontFamily, + fontFamilyFallback: fontFamilyFallback ?? this.fontFamilyFallback, + package: package, + overflow: overflow ?? this.overflow, + boldStyle: boldStyle ?? _boldStyle, + linkStyle: linkStyle ?? _linkStyle, + ); +} diff --git a/lib/style/text_style/handschrift_color_group.dart b/lib/style/text_style/handschrift_color_group.dart new file mode 100644 index 0000000..c5d6ae7 --- /dev/null +++ b/lib/style/text_style/handschrift_color_group.dart @@ -0,0 +1,20 @@ +import 'package:dcc_toolkit/style/interface/color_group_interface.dart'; +import 'package:dcc_toolkit/style/text_style/handschrift.dart'; + +/// {@macro color_group} +class HandschriftColorGroup implements ColorGroupInterface { + /// {@macro color_group} + const HandschriftColorGroup({required this.color, required this.onColorContrast, this.onColorSubtle}); + + @override + final Handschrift color; + + @override + final Handschrift onColorContrast; + + @override + final Handschrift? onColorSubtle; + + @override + HandschriftColorGroup lerp(HandschriftColorGroup? other, double t) => this; +} diff --git a/lib/style/text_style/text_style_decorator.dart b/lib/style/text_style/handschrift_decorator.dart similarity index 79% rename from lib/style/text_style/text_style_decorator.dart rename to lib/style/text_style/handschrift_decorator.dart index c140e39..643b8db 100644 --- a/lib/style/text_style/text_style_decorator.dart +++ b/lib/style/text_style/handschrift_decorator.dart @@ -2,106 +2,106 @@ import 'package:dcc_toolkit/style/interface/color_group_interface.dart'; import 'package:dcc_toolkit/style/interface/kleurplaat_interface.dart'; import 'package:dcc_toolkit/style/interface/surface_group_interface.dart'; import 'package:dcc_toolkit/style/kleurplaat/katjas_kleurplaat.dart'; -import 'package:dcc_toolkit/style/text_style/text_style_color_group.dart'; -import 'package:dcc_toolkit/style/text_style/text_style_surface_group.dart'; -import 'package:flutter/material.dart'; +import 'package:dcc_toolkit/style/text_style/handschrift.dart'; +import 'package:dcc_toolkit/style/text_style/handschrift_color_group.dart'; +import 'package:dcc_toolkit/style/text_style/handschrift_surface_group.dart'; /// {@template text_style_decorator} -/// Decorates a [TextStyle] with [KatjasKleurplaat] colors. +/// Decorates a [Handschrift] with [KatjasKleurplaat] colors. /// {@endtemplate} -class TextStyleDecorator implements KleurplaatInterface { +class HandschriftDecorator implements KleurplaatInterface { /// {@macro text_style_decorator} - const TextStyleDecorator(this._textStyle, this._kleurplaat); + const HandschriftDecorator(this._textStyle, this._kleurplaat); - final TextStyle _textStyle; + final Handschrift _textStyle; final KatjasKleurplaat _kleurplaat; @override - ColorGroupInterface get content => TextStyleColorGroup( + ColorGroupInterface get content => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.content.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.content.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.content.onColorSubtle), ); @override - ColorGroupInterface get contentFill => TextStyleColorGroup( + ColorGroupInterface get contentFill => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.contentFill.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.contentFill.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.contentFill.onColorSubtle), ); @override - ColorGroupInterface get error => TextStyleColorGroup( + ColorGroupInterface get error => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.error.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.error.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.error.onColorSubtle), ); @override - ColorGroupInterface get errorFill => TextStyleColorGroup( + ColorGroupInterface get errorFill => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.errorFill.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.errorFill.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.errorFill.onColorSubtle), ); @override - ColorGroupInterface get primary => TextStyleColorGroup( + ColorGroupInterface get primary => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.primary.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.primary.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.primary.onColorSubtle), ); @override - ColorGroupInterface get primaryFill => TextStyleColorGroup( + ColorGroupInterface get primaryFill => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.primaryFill.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.primaryFill.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.primaryFill.onColorSubtle), ); @override - ColorGroupInterface get secondary => TextStyleColorGroup( + ColorGroupInterface get secondary => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.secondary?.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.secondary?.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.secondary?.onColorSubtle), ); @override - ColorGroupInterface get secondaryFill => TextStyleColorGroup( + ColorGroupInterface get secondaryFill => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.secondaryFill?.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.secondaryFill?.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.secondaryFill?.onColorSubtle), ); @override - ColorGroupInterface get tertiary => TextStyleColorGroup( + ColorGroupInterface get tertiary => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.tertiary?.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.tertiary?.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.tertiary?.onColorSubtle), ); @override - ColorGroupInterface get tertiaryFill => TextStyleColorGroup( + ColorGroupInterface get tertiaryFill => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.tertiaryFill?.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.tertiaryFill?.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.tertiaryFill?.onColorSubtle), ); @override - ColorGroupInterface get success => TextStyleColorGroup( + ColorGroupInterface get success => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.success.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.success.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.success.onColorSubtle), ); @override - ColorGroupInterface get successFill => TextStyleColorGroup( + ColorGroupInterface get successFill => HandschriftColorGroup( color: _textStyle.copyWith(color: _kleurplaat.successFill.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.successFill.onColorContrast), onColorSubtle: _textStyle.copyWith(color: _kleurplaat.successFill.onColorSubtle), ); @override - SurfaceGroupInterface get surface => TextStyleSurfaceGroup( + SurfaceGroupInterface get surface => HandschriftSurfaceGroup( color: _textStyle.copyWith(color: _kleurplaat.surface.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.surface.onColorContrast), onColorContrastDim: _textStyle.copyWith(color: _kleurplaat.surface.onColorContrastDim), @@ -116,9 +116,9 @@ class TextStyleDecorator implements KleurplaatInterface { ); @override - SurfaceGroupInterface? get surfaceInverse { + SurfaceGroupInterface? get surfaceInverse { if (_kleurplaat.surfaceInverse == null) return null; - return TextStyleSurfaceGroup( + return HandschriftSurfaceGroup( color: _textStyle.copyWith(color: _kleurplaat.surfaceInverse!.color), onColorContrast: _textStyle.copyWith(color: _kleurplaat.surfaceInverse!.onColorContrast), onColorContrastDim: _textStyle.copyWith(color: _kleurplaat.surfaceInverse!.onColorContrastDim), diff --git a/lib/style/text_style/text_style_surface_group.dart b/lib/style/text_style/handschrift_surface_group.dart similarity index 50% rename from lib/style/text_style/text_style_surface_group.dart rename to lib/style/text_style/handschrift_surface_group.dart index c6673dd..e88c966 100644 --- a/lib/style/text_style/text_style_surface_group.dart +++ b/lib/style/text_style/handschrift_surface_group.dart @@ -1,10 +1,10 @@ import 'package:dcc_toolkit/style/interface/surface_group_interface.dart'; -import 'package:flutter/material.dart'; +import 'package:dcc_toolkit/style/text_style/handschrift.dart'; /// {@macro surface_group} -class TextStyleSurfaceGroup implements SurfaceGroupInterface { +class HandschriftSurfaceGroup implements SurfaceGroupInterface { /// {@macro surface_group} - const TextStyleSurfaceGroup({ + const HandschriftSurfaceGroup({ required this.color, required this.onColorContrast, required this.onColorContrastDim, @@ -19,29 +19,29 @@ class TextStyleSurfaceGroup implements SurfaceGroupInterface { }); @override - final TextStyle color; + final Handschrift color; @override - final TextStyle onColorContrast; + final Handschrift onColorContrast; @override - final TextStyle onColorContrastDim; + final Handschrift onColorContrastDim; @override - final TextStyle onColorSubtle; + final Handschrift onColorSubtle; @override - final TextStyle onColorSubtleDim; + final Handschrift onColorSubtleDim; @override - final TextStyle containerLowest; + final Handschrift containerLowest; @override - final TextStyle containerLow; + final Handschrift containerLow; @override - final TextStyle container; + final Handschrift container; @override - final TextStyle containerHigh; + final Handschrift containerHigh; @override - final TextStyle containerHighest; + final Handschrift containerHighest; @override - final TextStyle link; + final Handschrift link; @override - TextStyleSurfaceGroup lerp(TextStyleSurfaceGroup? other, double t) => this; + HandschriftSurfaceGroup lerp(HandschriftSurfaceGroup? other, double t) => this; } diff --git a/lib/style/text_style/katjas_boekwerk.dart b/lib/style/text_style/katjas_boekwerk.dart new file mode 100644 index 0000000..c2f4c42 --- /dev/null +++ b/lib/style/text_style/katjas_boekwerk.dart @@ -0,0 +1,132 @@ +import 'package:dcc_toolkit/style/interface/boekwerk_interface.dart'; +import 'package:dcc_toolkit/style/text_style/handschrift.dart'; +import 'package:flutter/material.dart'; + +class KatjasBoekwerk extends ThemeExtension implements BoekwerkInterface { + KatjasBoekwerk({ + this.displayLarge, + this.displayMedium, + this.displaySmall, + this.subtitleLarge, + this.subtitleMedium, + this.subtitleSmall, + this.headlineLarge, + this.headlineMedium, + this.headlineSmall, + this.titleLarge, + this.titleMedium, + this.titleSmall, + this.bodyLarge, + this.bodyMedium, + this.bodySmall, + this.labelLarge, + this.labelMedium, + this.labelSmall, + this.navbar, + }); + + final Handschrift? displayLarge; + final Handschrift? displayMedium; + final Handschrift? displaySmall; + final Handschrift? subtitleLarge; + final Handschrift? subtitleMedium; + final Handschrift? subtitleSmall; + final Handschrift? headlineLarge; + final Handschrift? headlineMedium; + final Handschrift? headlineSmall; + final Handschrift? titleLarge; + final Handschrift? titleMedium; + final Handschrift? titleSmall; + final Handschrift? bodyLarge; + final Handschrift? bodyMedium; + final Handschrift? bodySmall; + final Handschrift? labelLarge; + final Handschrift? labelMedium; + final Handschrift? labelSmall; + final Handschrift? navbar; + + TextTheme asTextTheme({required Color bodyColor, Color? displayColor, Color? decorationColor}) => TextTheme( + displayLarge: displayLarge, + displayMedium: displayMedium, + displaySmall: displaySmall, + headlineLarge: headlineLarge, + headlineMedium: headlineMedium, + headlineSmall: headlineSmall, + titleLarge: titleLarge, + titleMedium: titleMedium, + titleSmall: titleSmall, + bodyLarge: bodyLarge, + bodyMedium: bodyMedium, + bodySmall: bodySmall, + labelLarge: labelLarge, + labelMedium: labelMedium, + labelSmall: labelSmall, + ).apply(displayColor: displayColor ?? bodyColor, bodyColor: bodyColor, decorationColor: decorationColor ?? bodyColor); + + @override + ThemeExtension copyWith({ + Handschrift? displayLarge, + Handschrift? displayMedium, + Handschrift? displaySmall, + Handschrift? subtitleLarge, + Handschrift? subtitleMedium, + Handschrift? subtitleSmall, + Handschrift? headlineLarge, + Handschrift? headlineMedium, + Handschrift? headlineSmall, + Handschrift? titleLarge, + Handschrift? titleMedium, + Handschrift? titleSmall, + Handschrift? bodyLarge, + Handschrift? bodyMedium, + Handschrift? bodySmall, + Handschrift? labelLarge, + Handschrift? labelMedium, + Handschrift? labelSmall, + }) => KatjasBoekwerk( + displayLarge: displayLarge ?? this.displayLarge, + displayMedium: displayMedium ?? this.displayMedium, + displaySmall: displaySmall ?? this.displaySmall, + subtitleLarge: subtitleLarge ?? this.subtitleLarge, + subtitleMedium: subtitleMedium ?? this.subtitleMedium, + subtitleSmall: subtitleSmall ?? this.subtitleSmall, + 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, + labelMedium: labelMedium ?? this.labelMedium, + labelSmall: labelSmall ?? this.labelSmall, + ); + + @override + ThemeExtension lerp(covariant ThemeExtension? other, double t) { + if (other is! KatjasBoekwerk) return this; + + return KatjasBoekwerk( + displayLarge: displayLarge?.lerp(other.displayLarge, t), + displayMedium: displayMedium?.lerp(other.displayMedium, t), + displaySmall: displaySmall?.lerp(other.displaySmall, t), + subtitleLarge: subtitleLarge?.lerp(other.subtitleLarge, t), + subtitleMedium: subtitleMedium?.lerp(other.subtitleMedium, t), + subtitleSmall: subtitleSmall?.lerp(other.subtitleSmall, t), + headlineLarge: headlineLarge?.lerp(other.headlineLarge, t), + headlineMedium: headlineMedium?.lerp(other.headlineMedium, t), + headlineSmall: headlineSmall?.lerp(other.headlineSmall, t), + titleLarge: titleLarge?.lerp(other.titleLarge, t), + titleMedium: titleMedium?.lerp(other.titleMedium, t), + titleSmall: titleSmall?.lerp(other.titleSmall, t), + bodyLarge: bodyLarge?.lerp(other.bodyLarge, t), + bodyMedium: bodyMedium?.lerp(other.bodyMedium, t), + bodySmall: bodySmall?.lerp(other.bodySmall, t), + labelLarge: labelLarge?.lerp(other.labelLarge, t), + labelMedium: labelMedium?.lerp(other.labelMedium, t), + labelSmall: labelSmall?.lerp(other.labelSmall, t), + ); + } +} diff --git a/lib/style/text_style/text_style_color_group.dart b/lib/style/text_style/text_style_color_group.dart deleted file mode 100644 index a60439a..0000000 --- a/lib/style/text_style/text_style_color_group.dart +++ /dev/null @@ -1,20 +0,0 @@ -import 'package:dcc_toolkit/style/interface/color_group_interface.dart'; -import 'package:flutter/material.dart'; - -/// {@macro color_group} -class TextStyleColorGroup implements ColorGroupInterface { - /// {@macro color_group} - const TextStyleColorGroup({required this.color, required this.onColorContrast, this.onColorSubtle}); - - @override - final TextStyle color; - - @override - final TextStyle onColorContrast; - - @override - final TextStyle? onColorSubtle; - - @override - TextStyleColorGroup lerp(TextStyleColorGroup? other, double t) => this; -} diff --git a/lib/style/text_style/text_themes_decorator.dart b/lib/style/text_style/text_themes_decorator.dart deleted file mode 100644 index d667c5a..0000000 --- a/lib/style/text_style/text_themes_decorator.dart +++ /dev/null @@ -1,76 +0,0 @@ -import 'package:dcc_toolkit/style/kleurplaat/katjas_kleurplaat.dart'; -import 'package:dcc_toolkit/style/text_style/text_style_decorator.dart'; -import 'package:flutter/material.dart'; - -/// {@template text_themes_decorator} -// Is imported via `package:flutter/material.dart` -// ignore: comment_references -/// Decorates a [TextThemes] with [KatjasKleurplaat] colors. -/// {@endtemplate} -class TextThemesDecorator { - /// {@macro text_themes_decorator} - const TextThemesDecorator(this._textTheme, this._katjasKleurplaat); - - final TextTheme _textTheme; - final KatjasKleurplaat _katjasKleurplaat; - - /// See [TextTheme.displayLarge]. - TextStyleDecorator? get displayLarge => - _textTheme.displayLarge != null ? TextStyleDecorator(_textTheme.displayLarge!, _katjasKleurplaat) : null; - - /// See [TextTheme.displayMedium]. - TextStyleDecorator? get displayMedium => - _textTheme.displayMedium != null ? TextStyleDecorator(_textTheme.displayMedium!, _katjasKleurplaat) : null; - - /// See [TextTheme.displaySmall]. - TextStyleDecorator? get displaySmall => - _textTheme.displaySmall != null ? TextStyleDecorator(_textTheme.displaySmall!, _katjasKleurplaat) : null; - - /// See [TextTheme.headlineLarge]. - TextStyleDecorator? get headlineLarge => - _textTheme.headlineLarge != null ? TextStyleDecorator(_textTheme.headlineLarge!, _katjasKleurplaat) : null; - - /// See [TextTheme.headlineMedium]. - TextStyleDecorator? get headlineMedium => - _textTheme.headlineMedium != null ? TextStyleDecorator(_textTheme.headlineMedium!, _katjasKleurplaat) : null; - - /// See [TextTheme.headlineSmall]. - TextStyleDecorator? get headlineSmall => - _textTheme.headlineSmall != null ? TextStyleDecorator(_textTheme.headlineSmall!, _katjasKleurplaat) : null; - - /// See [TextTheme.titleLarge]. - TextStyleDecorator? get titleLarge => - _textTheme.titleLarge != null ? TextStyleDecorator(_textTheme.titleLarge!, _katjasKleurplaat) : null; - - /// See [TextTheme.titleMedium]. - TextStyleDecorator? get titleMedium => - _textTheme.titleMedium != null ? TextStyleDecorator(_textTheme.titleMedium!, _katjasKleurplaat) : null; - - /// See [TextTheme.titleSmall]. - TextStyleDecorator? get titleSmall => - _textTheme.titleSmall != null ? TextStyleDecorator(_textTheme.titleSmall!, _katjasKleurplaat) : null; - - /// See [TextTheme.bodyLarge]. - TextStyleDecorator? get bodyLarge => - _textTheme.bodyLarge != null ? TextStyleDecorator(_textTheme.bodyLarge!, _katjasKleurplaat) : null; - - /// See [TextTheme.bodyMedium]. - TextStyleDecorator? get bodyMedium => - _textTheme.bodyMedium != null ? TextStyleDecorator(_textTheme.bodyMedium!, _katjasKleurplaat) : null; - - /// See [TextTheme.bodySmall]. - TextStyleDecorator? get bodySmall => - _textTheme.bodySmall != null ? TextStyleDecorator(_textTheme.bodySmall!, _katjasKleurplaat) : null; - - /// See [TextTheme.labelLarge]. - TextStyleDecorator? get labelLarge => - _textTheme.labelLarge != null ? TextStyleDecorator(_textTheme.labelLarge!, _katjasKleurplaat) : null; - - /// See [TextTheme.labelMedium]. - TextStyleDecorator? get labelMedium => - _textTheme.labelMedium != null ? TextStyleDecorator(_textTheme.labelMedium!, _katjasKleurplaat) : null; - - /// See [TextTheme.labelSmall]. - TextStyleDecorator? get labelSmall => - _textTheme.labelSmall != null ? TextStyleDecorator(_textTheme.labelSmall!, _katjasKleurplaat) : null; -} From f9334c75c2224da202b2a1f957b8dc67bfaada44 Mon Sep 17 00:00:00 2001 From: Job Guldemeester Date: Fri, 6 Feb 2026 13:28:07 +0100 Subject: [PATCH 2/3] :memo: added documentation --- lib/style/interface/boekwerk_interface.dart | 90 ++++++++++++++++++++ lib/style/text_style/boekwerk_decorator.dart | 37 +++++++- lib/style/text_style/handschrift.dart | 82 +++++++++++++++++- lib/style/text_style/katjas_boekwerk.dart | 57 +++++++++++++ 4 files changed, 261 insertions(+), 5 deletions(-) diff --git a/lib/style/interface/boekwerk_interface.dart b/lib/style/interface/boekwerk_interface.dart index 76702af..3d06689 100644 --- a/lib/style/interface/boekwerk_interface.dart +++ b/lib/style/interface/boekwerk_interface.dart @@ -1,40 +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 { +/// @override +/// TextStyle? get displayLarge => TextStyle(fontSize: 57); +/// // ... other implementations +/// } +/// ``` abstract interface class BoekwerkInterface { + /// 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; } diff --git a/lib/style/text_style/boekwerk_decorator.dart b/lib/style/text_style/boekwerk_decorator.dart index 82d2d7a..cb78d46 100644 --- a/lib/style/text_style/boekwerk_decorator.dart +++ b/lib/style/text_style/boekwerk_decorator.dart @@ -1,96 +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 text_themes_decorator} -// Is imported via `package:flutter/material.dart` -// ignore: comment_references +/// {@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 { - /// {@macro text_themes_decorator} + /// {@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; } diff --git a/lib/style/text_style/handschrift.dart b/lib/style/text_style/handschrift.dart index 97b5da5..2f88c80 100644 --- a/lib/style/text_style/handschrift.dart +++ b/lib/style/text_style/handschrift.dart @@ -1,7 +1,56 @@ import 'package:flutter/material.dart'; +/// An extended [TextStyle] that supports additional style variants for bold and link text. +/// +/// [Handschrift] (Dutch for "handwriting") extends Flutter's [TextStyle] to provide +/// built-in support for common text style variations used in rich text rendering. +/// This allows a single style definition to carry information about how bold and +/// linked text should be rendered. +/// +/// This class is particularly useful when you need consistent bold or link styling +/// that can be easily accessed via the [bold] and [link] getters, which merge the +/// respective variant styles with the base style. +/// +/// ## Example +/// +/// ```dart +/// final style = Handschrift( +/// fontSize: 16, +/// color: Colors.black, +/// boldStyle: TextStyle(fontWeight: FontWeight.bold), +/// linkStyle: TextStyle(color: Colors.blue, decoration: TextDecoration.underline), +/// ); +/// +/// // Use the bold variant +/// Text('Bold text', style: style.bold); +/// +/// // Use the link variant +/// Text('Click here', style: style.link); +/// ``` +/// +/// ## Creating from an existing TextStyle +/// +/// Use [Handschrift.fromTextStyle] to convert an existing [TextStyle]: +/// +/// ```dart +/// final baseStyle = TextStyle(fontSize: 14); +/// final handschrift = Handschrift.fromTextStyle( +/// baseStyle, +/// boldStyle: TextStyle(fontWeight: FontWeight.w700), +/// ); +/// ``` +/// +/// ## Animation Support +/// +/// [Handschrift] supports smooth interpolation via the [lerp] method, +/// which interpolates all properties including the bold and link variants. class Handschrift extends TextStyle { - Handschrift({ + /// Creates a [Handschrift] with the given properties. + /// + /// All parameters from [TextStyle] are supported, plus: + /// - [boldStyle]: Optional style to merge when accessing [bold] + /// - [linkStyle]: Optional style to merge when accessing [link] + const Handschrift({ super.inherit, super.color, super.backgroundColor, @@ -33,6 +82,14 @@ class Handschrift extends TextStyle { }) : _boldStyle = boldStyle, _linkStyle = linkStyle; + /// Creates a [Handschrift] from an existing [TextStyle]. + /// + /// This factory constructor copies all properties from [style] and adds + /// the optional [boldStyle] and [linkStyle] variants. + /// + // ignore: comment_references + /// Note: The [package] property from the original style is not preserved + /// as it cannot be accessed from an existing [TextStyle]. factory Handschrift.fromTextStyle(TextStyle style, {TextStyle? boldStyle, TextStyle? linkStyle}) => Handschrift( inherit: style.inherit, color: style.color, @@ -63,13 +120,32 @@ class Handschrift extends TextStyle { linkStyle: linkStyle, ); + /// The style to merge when [bold] is accessed. final TextStyle? _boldStyle; + + /// The style to merge when [link] is accessed. final TextStyle? _linkStyle; + /// Returns this style merged with [_boldStyle]. + /// + /// Use this getter to apply bold styling to text while preserving + /// all other properties of this [Handschrift]. TextStyle get bold => merge(_boldStyle); + /// Returns this style merged with [_linkStyle]. + /// + /// Use this getter to apply link styling (typically color and underline) + /// to text while preserving all other properties of this [Handschrift]. TextStyle get link => merge(_linkStyle); + /// Linearly interpolates between this [Handschrift] and [other]. + /// + /// The [t] parameter represents the position on the timeline, where 0.0 + /// means this style, 1.0 means [other], and values in between represent + /// a blend of both styles. + /// + /// This method interpolates all [TextStyle] properties as well as the + /// [_boldStyle] and [_linkStyle] variants. Handschrift lerp(Handschrift? other, double t) { if (identical(this, other)) return this; @@ -84,6 +160,10 @@ class Handschrift extends TextStyle { } } + /// Creates a copy of this [Handschrift] with the given fields replaced. + /// + /// This override extends [TextStyle.copyWith] to also support copying + /// the [boldStyle] and [linkStyle] variants. @override Handschrift copyWith({ bool? inherit, diff --git a/lib/style/text_style/katjas_boekwerk.dart b/lib/style/text_style/katjas_boekwerk.dart index c2f4c42..45ae2b0 100644 --- a/lib/style/text_style/katjas_boekwerk.dart +++ b/lib/style/text_style/katjas_boekwerk.dart @@ -2,7 +2,32 @@ import 'package:dcc_toolkit/style/interface/boekwerk_interface.dart'; import 'package:dcc_toolkit/style/text_style/handschrift.dart'; import 'package:flutter/material.dart'; +/// {@template katjas_boekwerk} +/// A [ThemeExtension] that provides a complete typography scale using [Handschrift] styles. +/// +/// This class implements [BoekwerkInterface] and integrates with Flutter's theming system, +/// allowing the typography scale to be included in [ThemeData.extensions] and supporting +/// smooth interpolation during theme transitions. +/// +/// ## Usage +/// +/// ```dart +/// final theme = ThemeData( +/// extensions: [ +/// KatjasBoekwerk( +/// displayLarge: Handschrift(fontSize: 57), +/// bodyMedium: Handschrift(fontSize: 14), +/// // ... other styles +/// ), +/// ], +/// ); +/// +/// // Access in widgets: +/// final boekwerk = Theme.of(context).extension(); +/// ``` +/// {@endtemplate} class KatjasBoekwerk extends ThemeExtension implements BoekwerkInterface { + /// {@macro katjas_boekwerk} KatjasBoekwerk({ this.displayLarge, this.displayMedium, @@ -25,26 +50,54 @@ class KatjasBoekwerk extends ThemeExtension implements BoekwerkI this.navbar, }); + @override final Handschrift? displayLarge; + @override final Handschrift? displayMedium; + @override final Handschrift? displaySmall; + @override final Handschrift? subtitleLarge; + @override final Handschrift? subtitleMedium; + @override final Handschrift? subtitleSmall; + @override final Handschrift? headlineLarge; + @override final Handschrift? headlineMedium; + @override final Handschrift? headlineSmall; + @override final Handschrift? titleLarge; + @override final Handschrift? titleMedium; + @override final Handschrift? titleSmall; + @override final Handschrift? bodyLarge; + @override final Handschrift? bodyMedium; + @override final Handschrift? bodySmall; + @override final Handschrift? labelLarge; + @override final Handschrift? labelMedium; + @override final Handschrift? labelSmall; + @override final Handschrift? navbar; + /// Converts this typography scale to a Flutter [TextTheme]. + /// + /// The [bodyColor] is applied to body text styles, while [displayColor] + /// (defaults to [bodyColor]) is applied to display styles. The [decorationColor] + /// (defaults to [bodyColor]) is used for text decorations. + /// + /// Note: [subtitleLarge], [subtitleMedium], [subtitleSmall], and [navbar] + /// styles are not included in the returned [TextTheme] as they are custom + /// additions not present in Material Design's typography scale. TextTheme asTextTheme({required Color bodyColor, Color? displayColor, Color? decorationColor}) => TextTheme( displayLarge: displayLarge, displayMedium: displayMedium, @@ -63,6 +116,7 @@ class KatjasBoekwerk extends ThemeExtension implements BoekwerkI labelSmall: labelSmall, ).apply(displayColor: displayColor ?? bodyColor, bodyColor: bodyColor, decorationColor: decorationColor ?? bodyColor); + /// Creates a copy of this [KatjasBoekwerk] with the given fields replaced. @override ThemeExtension copyWith({ Handschrift? displayLarge, @@ -104,6 +158,9 @@ class KatjasBoekwerk extends ThemeExtension implements BoekwerkI labelSmall: labelSmall ?? this.labelSmall, ); + /// Linearly interpolates between this [KatjasBoekwerk] and [other]. + /// + /// Uses [Handschrift.lerp] to interpolate each text style in the typography scale. @override ThemeExtension lerp(covariant ThemeExtension? other, double t) { if (other is! KatjasBoekwerk) return this; From 48ba504f4ab79ef4d5c9057a0248536f5071e30d Mon Sep 17 00:00:00 2001 From: Job Guldemeester Date: Fri, 6 Feb 2026 13:33:20 +0100 Subject: [PATCH 3/3] :sparkles: Helper extension for textsyle and export --- lib/common/extensions/text_style.dart | 12 ++++++++++++ lib/dcc_toolkit.dart | 1 + 2 files changed, 13 insertions(+) create mode 100644 lib/common/extensions/text_style.dart diff --git a/lib/common/extensions/text_style.dart b/lib/common/extensions/text_style.dart new file mode 100644 index 0000000..5e14cc2 --- /dev/null +++ b/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); + } +} diff --git a/lib/dcc_toolkit.dart b/lib/dcc_toolkit.dart index 7522345..8233a81 100644 --- a/lib/dcc_toolkit.dart +++ b/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';