diff --git a/lib/common/extensions/build_context.dart b/lib/common/extensions/build_context.dart index 52a9e67..3f31acd 100644 --- a/lib/common/extensions/build_context.dart +++ b/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()!; } diff --git a/lib/dcc_toolkit.dart b/lib/dcc_toolkit.dart index e292c72..6651a98 100644 --- a/lib/dcc_toolkit.dart +++ b/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'; diff --git a/lib/style/interface/color_group_interface.dart b/lib/style/interface/color_group_interface.dart new file mode 100644 index 0000000..8658792 --- /dev/null +++ b/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 { + /// {@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 lerp( + covariant ColorGroupInterface? other, + double t, + ); +} diff --git a/lib/style/interface/kleurplaat_interface.dart b/lib/style/interface/kleurplaat_interface.dart new file mode 100644 index 0000000..7a2900f --- /dev/null +++ b/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 { + /// {@template primary} + /// The primary color group. + /// {@endtemplate} + ColorGroupInterface get primary; + + /// {@template primaryFill} + /// The primary fill color group. + /// {@endtemplate} + ColorGroupInterface get primaryFill; + + /// {@template content} + /// The content color group. + /// {@endtemplate} + ColorGroupInterface get content; + + /// {@template contentFill} + /// The content fill color group. + /// {@endtemplate} + ColorGroupInterface get contentFill; + + /// {@template error} + /// The error color group. + /// {@endtemplate} + ColorGroupInterface get error; + + /// {@template errorFill} + /// The error fill color group. + /// {@endtemplate} + ColorGroupInterface get errorFill; + + /// {@template success} + /// The success color group. + /// {@endtemplate} + ColorGroupInterface get success; + + /// {@template successFill} + /// The success fill color group. + /// {@endtemplate} + ColorGroupInterface get successFill; + + /// {@template surface} + /// The surface group. + /// {@endtemplate} + SurfaceGroupInterface get surface; +} diff --git a/lib/style/interface/surface_group_interface.dart b/lib/style/interface/surface_group_interface.dart new file mode 100644 index 0000000..7736a3d --- /dev/null +++ b/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 { + /// {@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 lerp( + covariant SurfaceGroupInterface? other, + double t, + ); +} diff --git a/lib/style/kleurplaat/color_group.dart b/lib/style/kleurplaat/color_group.dart new file mode 100644 index 0000000..de3e568 --- /dev/null +++ b/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 { + /// {@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), + ); + } +} diff --git a/lib/style/kleurplaat/katjas_kleurplaat.dart b/lib/style/kleurplaat/katjas_kleurplaat.dart new file mode 100644 index 0000000..3a410ba --- /dev/null +++ b/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 + implements KleurplaatInterface { + /// {@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 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, + ); +} diff --git a/lib/style/kleurplaat/surface_group.dart b/lib/style/kleurplaat/surface_group.dart new file mode 100644 index 0000000..eb53292 --- /dev/null +++ b/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 { + /// {@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)!, + ); + } +} diff --git a/lib/style/style.dart b/lib/style/style.dart new file mode 100644 index 0000000..6e73aa6 --- /dev/null +++ b/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'; diff --git a/lib/style/text_style/text_style_color_group.dart b/lib/style/text_style/text_style_color_group.dart new file mode 100644 index 0000000..0a1e3e7 --- /dev/null +++ b/lib/style/text_style/text_style_color_group.dart @@ -0,0 +1,24 @@ +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.onColor, + this.onColorSubtle, + }); + + @override + final TextStyle color; + + @override + final TextStyle onColor; + + @override + final TextStyle? onColorSubtle; + + @override + TextStyleColorGroup lerp(TextStyleColorGroup? other, double t) => this; +} diff --git a/lib/style/text_style/text_style_decorator.dart b/lib/style/text_style/text_style_decorator.dart new file mode 100644 index 0000000..3657a55 --- /dev/null +++ b/lib/style/text_style/text_style_decorator.dart @@ -0,0 +1,159 @@ +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'; + +/// {@template text_style_decorator} +/// Decorates a [TextStyle] with [KatjasKleurplaat] colors. +/// {@endtemplate} +class TextStyleDecorator implements KleurplaatInterface { + /// {@macro text_style_decorator} + const TextStyleDecorator( + this._textStyle, + this._kleurplaat, + ); + + final TextStyle _textStyle; + final KatjasKleurplaat _kleurplaat; + + @override + ColorGroupInterface get content => TextStyleColorGroup( + color: _textStyle.copyWith( + color: _kleurplaat.content.color, + ), + onColor: _textStyle.copyWith( + color: _kleurplaat.content.onColor, + ), + onColorSubtle: _textStyle.copyWith( + color: _kleurplaat.content.onColorSubtle, + ), + ); + + @override + ColorGroupInterface get contentFill => TextStyleColorGroup( + color: _textStyle.copyWith( + color: _kleurplaat.contentFill.color, + ), + onColor: _textStyle.copyWith( + color: _kleurplaat.contentFill.onColor, + ), + onColorSubtle: _textStyle.copyWith( + color: _kleurplaat.contentFill.onColorSubtle, + ), + ); + + @override + ColorGroupInterface get error => TextStyleColorGroup( + color: _textStyle.copyWith( + color: _kleurplaat.error.color, + ), + onColor: _textStyle.copyWith( + color: _kleurplaat.error.onColor, + ), + onColorSubtle: _textStyle.copyWith( + color: _kleurplaat.error.onColorSubtle, + ), + ); + + @override + ColorGroupInterface get errorFill => TextStyleColorGroup( + color: _textStyle.copyWith( + color: _kleurplaat.errorFill.color, + ), + onColor: _textStyle.copyWith( + color: _kleurplaat.errorFill.onColor, + ), + onColorSubtle: _textStyle.copyWith( + color: _kleurplaat.errorFill.onColorSubtle, + ), + ); + + @override + ColorGroupInterface get primary => TextStyleColorGroup( + color: _textStyle.copyWith( + color: _kleurplaat.primary.color, + ), + onColor: _textStyle.copyWith( + color: _kleurplaat.primary.onColor, + ), + onColorSubtle: _textStyle.copyWith( + color: _kleurplaat.primary.onColorSubtle, + ), + ); + + @override + ColorGroupInterface get primaryFill => TextStyleColorGroup( + color: _textStyle.copyWith( + color: _kleurplaat.primaryFill.color, + ), + onColor: _textStyle.copyWith( + color: _kleurplaat.primaryFill.onColor, + ), + onColorSubtle: _textStyle.copyWith( + color: _kleurplaat.primaryFill.onColorSubtle, + ), + ); + + @override + ColorGroupInterface get success => TextStyleColorGroup( + color: _textStyle.copyWith( + color: _kleurplaat.success.color, + ), + onColor: _textStyle.copyWith( + color: _kleurplaat.success.onColor, + ), + onColorSubtle: _textStyle.copyWith( + color: _kleurplaat.success.onColorSubtle, + ), + ); + + @override + ColorGroupInterface get successFill => TextStyleColorGroup( + color: _textStyle.copyWith( + color: _kleurplaat.successFill.color, + ), + onColor: _textStyle.copyWith( + color: _kleurplaat.successFill.onColor, + ), + onColorSubtle: _textStyle.copyWith( + color: _kleurplaat.successFill.onColorSubtle, + ), + ); + + @override + SurfaceGroupInterface get surface => TextStyleSurfaceGroup( + color: _textStyle.copyWith( + color: _kleurplaat.surface.color, + ), + onColorContrastPlus: _textStyle.copyWith( + color: _kleurplaat.surface.onColorContrastPlus, + ), + onColorContrastMinus: _textStyle.copyWith( + color: _kleurplaat.surface.onColorContrastMinus, + ), + onColorSubtlePlus: _textStyle.copyWith( + color: _kleurplaat.surface.onColorSubtlePlus, + ), + onColorSubtleMinus: _textStyle.copyWith( + color: _kleurplaat.surface.onColorSubtleMinus, + ), + containerLowest: _textStyle.copyWith( + color: _kleurplaat.surface.containerLowest, + ), + containerLow: _textStyle.copyWith( + color: _kleurplaat.surface.containerLow, + ), + container: _textStyle.copyWith( + color: _kleurplaat.surface.container, + ), + containerHigh: _textStyle.copyWith( + color: _kleurplaat.surface.containerHigh, + ), + containerHighest: _textStyle.copyWith( + color: _kleurplaat.surface.containerHighest, + ), + ); +} diff --git a/lib/style/text_style/text_style_surface_group.dart b/lib/style/text_style/text_style_surface_group.dart new file mode 100644 index 0000000..f6a6273 --- /dev/null +++ b/lib/style/text_style/text_style_surface_group.dart @@ -0,0 +1,44 @@ +import 'package:dcc_toolkit/style/interface/surface_group_interface.dart'; +import 'package:flutter/material.dart'; + +/// {@macro surface_group} +class TextStyleSurfaceGroup implements SurfaceGroupInterface { + /// {@macro surface_group} + const TextStyleSurfaceGroup({ + 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 TextStyle color; + @override + final TextStyle onColorContrastPlus; + @override + final TextStyle onColorContrastMinus; + @override + final TextStyle onColorSubtlePlus; + @override + final TextStyle onColorSubtleMinus; + + @override + final TextStyle containerLowest; + @override + final TextStyle containerLow; + @override + final TextStyle container; + @override + final TextStyle containerHigh; + @override + final TextStyle containerHighest; + + @override + TextStyleSurfaceGroup lerp(TextStyleSurfaceGroup? other, double t) => this; +} diff --git a/lib/style/text_style/text_themes_decorator.dart b/lib/style/text_style/text_themes_decorator.dart new file mode 100644 index 0000000..01fe26b --- /dev/null +++ b/lib/style/text_style/text_themes_decorator.dart @@ -0,0 +1,139 @@ +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; +}