diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 65bd4d26..c58f8ab5 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -24,7 +24,7 @@ jobs: - uses: ZebraDevs/flutter-code-quality@main with: token: ${{secrets.GITHUB_TOKEN}} - coverage-pass-score: '1' + coverage-pass-score: '90' check-secret: diff --git a/example/lib/home.dart b/example/lib/home.dart index 134ee502..0b0c4c44 100644 --- a/example/lib/home.dart +++ b/example/lib/home.dart @@ -161,30 +161,40 @@ class _HomeState extends State { child: SingleChildScrollView( child: Column( children: [ - ExpansionTile( - title: Text('Widgets'), - backgroundColor: Zeta.of(context).colors.warm.shade30, - children: _components - .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}'))) - .toList(), - ), - ExpansionTile( - title: Text('Theme'), - backgroundColor: Zeta.of(context).colors.warm.shade30, - children: _theme - .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}'))) - .toList(), - ), - ExpansionTile( - title: Text('Assets'), - backgroundColor: Zeta.of(context).colors.warm.shade30, - children: _assets - .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}'))) - .toList(), - ), + ExampleListTile(name: 'Components', children: _components), + ExampleListTile(name: 'Theme', children: _theme), + ExampleListTile(name: 'Assets', children: _assets), ], ), ), ); } } + +class ExampleListTile extends StatelessWidget { + const ExampleListTile({ + super.key, + required this.children, + required this.name, + }); + + final List children; + final String name; + + @override + Widget build(BuildContext context) { + return ExpansionTile( + title: Text(name), + children: children + .map( + (item) => ListTile( + title: Text(item.name), + onTap: () => context.go('/${item.name}'), + hoverColor: Zeta.of(context).colors.surface.hover, + tileColor: Zeta.of(context).colors.surface.defaultColor, + ), + ) + .toList(), + ); + } +} diff --git a/example/lib/main.dart b/example/lib/main.dart index 3bffbb27..2edd9dc9 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,46 +1,19 @@ import 'package:flutter/material.dart'; -import 'package:shared_preferences/shared_preferences.dart'; -import 'package:zeta_example/theme_service.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import 'home.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); - final preferences = await SharedPreferences.getInstance(); - final themeService = SharedPrefsThemeService(preferences); - final themePreferences = await themeService.loadTheme(); - - runApp( - ZetaExample( - themeService: themeService, - initialZetaThemeData: themePreferences.$1 ?? ZetaThemeData(), - initialThemeMode: themePreferences.$2 ?? ThemeMode.system, - initialContrast: themePreferences.$3 ?? ZetaContrast.aa, - ), - ); + runApp(ZetaExample()); } class ZetaExample extends StatelessWidget { - const ZetaExample({ - super.key, - required this.themeService, - required this.initialContrast, - required this.initialThemeMode, - required this.initialZetaThemeData, - }); - - final ZetaThemeService themeService; - final ZetaContrast initialContrast; - final ThemeMode initialThemeMode; - final ZetaThemeData initialZetaThemeData; + const ZetaExample({super.key}); @override Widget build(BuildContext context) { return ZetaProvider.base( - initialZetaThemeData: initialZetaThemeData, - initialThemeMode: initialThemeMode, - initialContrast: initialContrast, builder: (context, lightTheme, darkTheme, themeMode) { return MaterialApp.router( routerConfig: router, diff --git a/example/lib/pages/assets/icons_example.dart b/example/lib/pages/assets/icons_example.dart index e33d29de..f4a218e1 100644 --- a/example/lib/pages/assets/icons_example.dart +++ b/example/lib/pages/assets/icons_example.dart @@ -40,7 +40,7 @@ class _IconsExampleState extends State { height: 120, child: InkWell( borderRadius: Zeta.of(context).radius.rounded, - hoverColor: Zeta.of(context).colors.surfaceHover, + hoverColor: Zeta.of(context).colors.surface.hover, onTap: () async { await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key)); ScaffoldMessenger.of(context).showMaterialBanner( diff --git a/example/lib/pages/components/avatar_example.dart b/example/lib/pages/components/avatar_example.dart index 990f3c68..dc8d733f 100644 --- a/example/lib/pages/components/avatar_example.dart +++ b/example/lib/pages/components/avatar_example.dart @@ -52,32 +52,6 @@ class AvatarExample extends StatelessWidget { ); }).toList(), ), - const SizedBox(width: 15), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image(size: size), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 15), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - borderColor: Zeta.of(context).colors.green, - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 15), Column( children: ZetaAvatarSize.values .map((size) => Column( @@ -91,15 +65,14 @@ class AvatarExample extends StatelessWidget { )) .toList(), ), - const SizedBox(width: 15), Column( children: ZetaAvatarSize.values .map((size) => Column( children: [ ZetaAvatar.image( size: size, - borderColor: Zeta.of(context).colors.green, image: image, + borderColor: Zeta.of(context).colors.border.defaultColor, ), const SizedBox(height: 20), ], @@ -143,6 +116,7 @@ class AvatarExample extends StatelessWidget { .map((size) => Column( children: [ ZetaAvatar.initials( + backgroundColor: Zeta.of(context).colors.surface.avatar.pink, size: size, initials: 'AB', ), @@ -159,7 +133,8 @@ class AvatarExample extends StatelessWidget { ZetaAvatar.initials( size: size, initials: 'AB', - borderColor: Zeta.of(context).colors.green, + borderColor: Zeta.of(context).colors.border.defaultColor, + backgroundColor: Zeta.of(context).colors.surface.avatar.teal, ), const SizedBox(height: 20), ], @@ -198,35 +173,6 @@ class AvatarExample extends StatelessWidget { }).toList(), ), const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - upperBadge: ZetaAvatarBadge.notification(value: 3), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - borderColor: Zeta.of(context).colors.green, - upperBadge: ZetaAvatarBadge.notification(value: 3), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), Column( children: ZetaAvatarSize.values .map((size) => Column( @@ -248,7 +194,6 @@ class AvatarExample extends StatelessWidget { children: [ ZetaAvatar.image( size: size, - borderColor: Zeta.of(context).colors.green, upperBadge: ZetaAvatarBadge.notification(value: 3), image: image, ), @@ -311,7 +256,7 @@ class AvatarExample extends StatelessWidget { ZetaAvatar.initials( size: size, initials: 'AB', - borderColor: Zeta.of(context).colors.green, + borderColor: Zeta.of(context).colors.main.positive, upperBadge: ZetaAvatarBadge.notification(value: 3), ), const SizedBox(height: 20), @@ -351,35 +296,6 @@ class AvatarExample extends StatelessWidget { }).toList(), ), const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - borderColor: Zeta.of(context).colors.green, - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), Column( children: ZetaAvatarSize.values .map((size) => Column( @@ -401,8 +317,6 @@ class AvatarExample extends StatelessWidget { children: [ ZetaAvatar.image( size: size, - borderColor: Zeta.of(context).colors.green, - lowerBadge: ZetaAvatarBadge.icon(), image: image, ), const SizedBox(height: 20), @@ -464,7 +378,7 @@ class AvatarExample extends StatelessWidget { ZetaAvatar.initials( size: size, initials: 'AB', - borderColor: Zeta.of(context).colors.green, + borderColor: Zeta.of(context).colors.main.positive, lowerBadge: ZetaAvatarBadge.icon(), ), const SizedBox(height: 20), @@ -520,38 +434,6 @@ class AvatarExample extends StatelessWidget { .toList(), ), const SizedBox(width: 12), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.image( - size: size, - image: image, - borderColor: Zeta.of(context).colors.green, - upperBadge: ZetaAvatarBadge.notification(value: 3), - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - Column( - children: ZetaAvatarSize.values - .map((size) => Column( - children: [ - ZetaAvatar.initials( - size: size, - initials: 'AB', - upperBadge: ZetaAvatarBadge.notification(value: 3), - lowerBadge: ZetaAvatarBadge.icon(), - ), - const SizedBox(height: 20), - ], - )) - .toList(), - ), - const SizedBox(width: 12), Column( children: ZetaAvatarSize.values .map((size) => Column( @@ -559,9 +441,10 @@ class AvatarExample extends StatelessWidget { ZetaAvatar.initials( size: size, initials: 'AB', - borderColor: Zeta.of(context).colors.green, upperBadge: ZetaAvatarBadge.notification(value: 3), lowerBadge: ZetaAvatarBadge.icon(), + borderColor: Zeta.of(context).colors.border.defaultColor, + backgroundColor: Zeta.of(context).colors.surface.avatar.purple, ), const SizedBox(height: 20), ], diff --git a/example/lib/pages/components/chip_example.dart b/example/lib/pages/components/chip_example.dart index 72a96407..6fb7e495 100644 --- a/example/lib/pages/components/chip_example.dart +++ b/example/lib/pages/components/chip_example.dart @@ -80,7 +80,7 @@ class _ChipExampleState extends State { builder: (context, _, __) { return Container( padding: EdgeInsets.all(Zeta.of(context).spacing.medium), - color: colors.surfaceSelectedHover, + color: colors.surface.selectedHover, height: 100, width: 200, child: Center(child: Text('Last chip dragged here: $chipType')), diff --git a/example/lib/pages/components/dialog_example.dart b/example/lib/pages/components/dialog_example.dart index aa286591..a51989d9 100644 --- a/example/lib/pages/components/dialog_example.dart +++ b/example/lib/pages/components/dialog_example.dart @@ -22,7 +22,7 @@ class DialogExample extends StatelessWidget { title: 'Dialog Title', icon: ZetaIcon( ZetaIcons.warning, - color: zeta.colors.surfaceWarning, + color: zeta.colors.surface.warning, ), message: 'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.', @@ -37,7 +37,7 @@ class DialogExample extends StatelessWidget { title: 'Dialog Title', icon: ZetaIcon( ZetaIcons.warning, - color: zeta.colors.surfaceWarning, + color: zeta.colors.surface.warning, ), message: 'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.', @@ -53,7 +53,7 @@ class DialogExample extends StatelessWidget { title: 'Dialog Title', icon: ZetaIcon( ZetaIcons.warning, - color: zeta.colors.surfaceWarning, + color: zeta.colors.surface.warning, ), message: 'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.', @@ -71,7 +71,7 @@ class DialogExample extends StatelessWidget { title: 'Dialog Title', icon: ZetaIcon( ZetaIcons.warning, - color: zeta.colors.surfaceWarning, + color: zeta.colors.surface.warning, ), message: 'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.', diff --git a/example/lib/pages/components/list_item_example.dart b/example/lib/pages/components/list_item_example.dart index cc0cf1d4..720605cc 100644 --- a/example/lib/pages/components/list_item_example.dart +++ b/example/lib/pages/components/list_item_example.dart @@ -26,7 +26,7 @@ class _ListItemExampleState extends State { return ExampleScaffold( name: ListItemExample.name, child: Container( - color: zetaColors.surfaceSecondary, + color: zetaColors.surface.warm, child: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(16), diff --git a/example/lib/pages/components/navigation_rail_example.dart b/example/lib/pages/components/navigation_rail_example.dart index f1429f9b..13bfb823 100644 --- a/example/lib/pages/components/navigation_rail_example.dart +++ b/example/lib/pages/components/navigation_rail_example.dart @@ -63,7 +63,7 @@ class _NavigationRailExampleState extends State { _titles[_selectedIndex!], textAlign: TextAlign.center, style: ZetaTextStyles.titleMedium.copyWith( - color: zeta.colors.textDefault, + color: zeta.colors.main.defaultColor, fontWeight: FontWeight.bold, ), ), diff --git a/example/lib/pages/components/top_app_bar_example.dart b/example/lib/pages/components/top_app_bar_example.dart index 6adc0827..9e1aa91b 100644 --- a/example/lib/pages/components/top_app_bar_example.dart +++ b/example/lib/pages/components/top_app_bar_example.dart @@ -43,7 +43,7 @@ class _TopAppBarExampleState extends State { return ExampleScaffold( name: TopAppBarExample.name, child: ColoredBox( - color: colors.surfaceWarm, + color: colors.surface.warm, child: SingleChildScrollView( child: Column( children: [ @@ -178,9 +178,9 @@ class _TopAppBarExampleState extends State { child: Container( width: 800, height: 800, - color: Zeta.of(context).colors.surfaceSelectedHover, + color: Zeta.of(context).colors.surface.selectedHover, child: CustomPaint( - painter: Painter(context: context), + painter: Painter(zeta: Zeta.of(context)), size: Size(800, 800), ), ), @@ -220,9 +220,9 @@ class _TopAppBarExampleState extends State { child: Container( width: 800, height: 800, - color: Zeta.of(context).colors.surfaceSelectedHover, + color: Zeta.of(context).colors.surface.selectedHover, child: CustomPaint( - painter: Painter(context: context), + painter: Painter(zeta: Zeta.of(context)), size: Size(800, 800), ), ), @@ -239,9 +239,9 @@ class _TopAppBarExampleState extends State { } class Painter extends CustomPainter { - final BuildContext context; + final Zeta zeta; - Painter({super.repaint, required this.context}); + Painter({super.repaint, required this.zeta}); @override void paint(Canvas canvas, Size size) { @@ -249,8 +249,8 @@ class Painter extends CustomPainter { var p1 = Offset(i, -10); var p2 = Offset(800 + i, 810); var paint = Paint() - ..color = Zeta.of(context).colors.surfaceDefault - ..strokeWidth = Zeta.of(context).spacing.minimum; + ..color = zeta.colors.surface.defaultColor + ..strokeWidth = zeta.spacing.minimum; canvas.drawLine(p1, p2, paint); } } diff --git a/example/lib/pages/theme/color_example.dart b/example/lib/pages/theme/color_example.dart index 9bb96c64..ea5c98cf 100644 --- a/example/lib/pages/theme/color_example.dart +++ b/example/lib/pages/theme/color_example.dart @@ -16,117 +16,131 @@ class _ColorExampleState extends State { @override Widget build(BuildContext context) { - final zeta = Zeta.of(context); - final colors = zeta.colors; + final colors = Zeta.of(context).colors; return LayoutBuilder( builder: (context, constraints) { - final Map swatches = { - 'Blue': colors.blue, - 'Green': colors.green, - 'Red': colors.red, - 'Orange': colors.orange, - 'Purple': colors.purple, - 'Yellow': colors.yellow, - 'Teal': colors.teal, - 'Pink': colors.pink, - 'Grey Warm': colors.warm, - 'Grey Cool': colors.cool, + final blockSize = constraints.maxWidth / 11; + final Map primitives = { + 'cool': colors.primitives.cool, + 'warm': colors.primitives.warm, + 'blue': colors.primitives.blue, + 'green': colors.primitives.green, + 'red': colors.primitives.red, + 'orange': colors.primitives.orange, + 'purple': colors.primitives.purple, + 'yellow': colors.primitives.yellow, + 'teal': colors.primitives.teal, + 'pink': colors.primitives.pink, }; - - final Map generatedSwatches = { - 'Gen-Blue': ZetaColorSwatch.fromColor( - colors.blue, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Blue': colors.blue, - 'Gen-Green': ZetaColorSwatch.fromColor( - colors.green, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Green': colors.green, - 'Gen-Red': ZetaColorSwatch.fromColor( - colors.red, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Red': colors.red, - 'Gen-Orange': ZetaColorSwatch.fromColor( - colors.orange, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Orange': colors.orange, - 'Gen-Purple': ZetaColorSwatch.fromColor( - colors.purple, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Purple': colors.purple, - 'Gen-Yellow': ZetaColorSwatch.fromColor( - colors.yellow, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Yellow': colors.yellow, - 'Gen-Teal': ZetaColorSwatch.fromColor( - colors.teal, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Teal': colors.teal, - 'Gen-Pink': ZetaColorSwatch.fromColor( - colors.pink, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Pink': colors.pink, - 'Gen-Grey Warm': ZetaColorSwatch.fromColor( - colors.warm, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Grey Warm': colors.warm, - 'Gen-Grey Cool': ZetaColorSwatch.fromColor( - colors.cool, - brightness: zeta.brightness, - contrast: colors.contrast, - ), - 'Grey Cool': colors.cool, + final Map primitivesPure = { + 'white': colors.primitives.pure.shade0, + 'mid': colors.primitives.pure.shade500, + 'black': colors.primitives.pure.shade1000, }; - final Map textIcon = { - 'textDefault': colors.textDefault, - 'textSubtle': colors.textSubtle, - 'textDisabled': colors.textDisabled, - 'textInverse': colors.textInverse, + final Map mainColors = { + 'defaultColor': colors.main.defaultColor, + 'subtle': colors.main.subtle, + 'light': colors.main.light, + 'inverse': colors.main.inverse, + 'disabled': colors.main.disabled, + 'primary': colors.main.primary, + 'secondary': colors.main.secondary, + 'positive': colors.main.positive, + 'warning': colors.main.warning, + 'negative': colors.main.negative, + 'info': colors.main.info, }; - final Map border = { - 'borderDefault': colors.borderDefault, - 'borderSubtle': colors.borderSubtle, - 'borderDisabled': colors.borderDisabled, - 'borderSelected': colors.borderSelected, + final Map borderColors = { + 'defaultColor': colors.border.defaultColor, + 'subtle': colors.border.subtle, + 'hover': colors.border.hover, + 'selected': colors.border.selected, + 'disabled': colors.border.disabled, + 'pure': colors.border.pure, + 'primaryMain': colors.border.primaryMain, + 'primary': colors.border.primary, + 'secondary': colors.border.secondary, + 'positive': colors.border.positive, + 'warning': colors.border.warning, + 'negative': colors.border.negative, + 'info': colors.border.info, }; - final Map backdrop = { - 'surfacePrimary': colors.surfacePrimary, - 'surfaceDisabled': colors.surfaceDisabled, - 'surfaceHover': colors.surfaceHover, - 'surfaceSecondary': colors.surfaceSecondary, - 'surfaceTertiary': colors.surfaceTertiary, - 'surfaceSelectedHover': colors.surfaceSelectedHover, - 'surfaceSelected': colors.surfaceSelected, + final Map surfaceColors = { + 'defaultColor': colors.surface.defaultColor, + 'defaultInverse': colors.surface.defaultInverse, + 'hover': colors.surface.hover, + 'selected': colors.surface.selected, + 'selectedHover': colors.surface.selectedHover, + 'disabled': colors.surface.disabled, + 'cool': colors.surface.cool, + 'warm': colors.surface.warm, + 'primary': colors.surface.primary, + 'primarySubtle': colors.surface.primarySubtle, + 'secondary': colors.surface.secondary, + 'secondarySubtle': colors.surface.secondarySubtle, + 'positive': colors.surface.positive, + 'positiveSubtle': colors.surface.positiveSubtle, + 'warning': colors.surface.warning, + 'warningSubtle': colors.surface.warningSubtle, + 'negative': colors.surface.negative, + 'negativeSubtle': colors.surface.negativeSubtle, + 'info': colors.surface.info, + 'infoSubtle': colors.surface.infoSubtle, }; - - final Map primaries = { - 'primaryColor': colors.primary.text, - 'secondaryColor': colors.secondary.text, + final Map avatarColors = { + 'blue': colors.surface.avatar.blue, + 'green': colors.surface.avatar.green, + 'orange': colors.surface.avatar.orange, + 'pink': colors.surface.avatar.pink, + 'purple': colors.surface.avatar.purple, + 'teal': colors.surface.avatar.teal, + 'yellow': colors.surface.avatar.yellow, }; - - final Map alerts = { - 'negative': colors.surfaceNegative, - 'warning': colors.surfaceWarning, - 'info': colors.surfaceInfo, + final Map disabled = { + 'disabled': colors.state.disabled.disabled, + }; + final Map defaultColors = { + 'enabled': colors.state.defaultColor.enabled, + 'hover': colors.state.defaultColor.hover, + 'selected': colors.state.defaultColor.selected, + 'focus': colors.state.defaultColor.focus, + }; + final Map primary = { + 'enabled': colors.state.primary.enabled, + 'hover': colors.state.primary.hover, + 'selected': colors.state.primary.selected, + 'focus': colors.state.primary.focus, + }; + final Map secondary = { + 'enabled': colors.state.secondary.enabled, + 'hover': colors.state.secondary.hover, + 'selected': colors.state.secondary.selected, + 'focus': colors.state.secondary.focus, + }; + final Map positive = { + 'enabled': colors.state.positive.enabled, + 'hover': colors.state.positive.hover, + 'selected': colors.state.positive.selected, + 'focus': colors.state.positive.focus, + }; + final Map negative = { + 'enabled': colors.state.negative.enabled, + 'hover': colors.state.negative.hover, + 'selected': colors.state.negative.selected, + 'focus': colors.state.negative.focus, + }; + final Map info = { + 'enabled': colors.state.info.enabled, + 'hover': colors.state.info.hover, + 'selected': colors.state.info.selected, + 'focus': colors.state.info.focus, + }; + final Map inverse = { + 'enabled': colors.state.inverse.enabled, + 'hover': colors.state.inverse.hover, + 'selected': colors.state.inverse.selected, + 'focus': colors.state.inverse.focus, }; return ExampleScaffold( @@ -135,90 +149,102 @@ class _ColorExampleState extends State { padding: EdgeInsets.all(Zeta.of(context).spacing.medium), child: Column( children: [ - MyRow(children: textIcon, title: 'Text and icon styles'), - MyRow(children: border, title: 'Border styles'), - MyRow(children: backdrop, title: 'Backdrop colors'), - MyRow(children: primaries, title: 'Primary colors'), - MyRow(children: alerts, title: 'Alert colors'), - Row(children: [Text('Full color swatches', style: ZetaTextStyles.displayMedium)]) - .paddingVertical(Zeta.of(context).spacing.xl_4), - ...swatches.entries.map( - (value) => Row( - children: List.generate(10, (index) => 100 - (10 * index)) - .map( - (e) => Expanded( - child: Container( - height: constraints.maxWidth / 10, - color: value.value[e], - child: FittedBox( - fit: BoxFit.scaleDown, - child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - DefaultTextStyle( - style: ZetaTextStyles.bodyMedium - .copyWith(color: calculateTextColor(value.value[e] ?? Colors.white)), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Text('${value.key.toLowerCase().replaceAll(' ', '')}-$e'), - Text(value.value[e].toString().replaceAll('Color(0xff', '#').substring(0, 7)), - ], - ), - ), - ]), - ), - ), - ), - ) - .toList(), - ), + Text('Semantic colors', style: ZetaTextStyles.displaySmall), + MyRow(children: mainColors, title: 'Main Colors'), + MyRow(children: borderColors, title: 'Main Colors'), + MyRow(children: surfaceColors, title: 'Surface Colors'), + MyRow(children: avatarColors, title: 'Surface / Avatar Colors'), + MyRow(children: disabled, title: 'State / disabled Colors'), + MyRow(children: defaultColors, title: 'State / default Colors'), + MyRow(children: primary, title: 'State / primary Colors'), + MyRow(children: secondary, title: 'State / secondary Colors'), + MyRow(children: positive, title: 'State / positive Colors'), + MyRow(children: negative, title: 'State / negative Colors'), + MyRow(children: info, title: 'State / info Colors'), + MyRow(children: inverse, title: 'State / inverse Colors'), + + Row(children: [ + Text('Full color swatches', style: ZetaTextStyles.displayMedium), + ]).paddingVertical(Zeta.of(context).spacing.xl_4), + Row( + children: primitivesPure.entries + .map( + (value) => SwatchBox( + color: value.value, + name: 'pure', + blockSize: blockSize, + value: value.key == 'mid' + ? 500 + : value.key == 'white' + ? 0 + : 1000, + ), + ) + .toList(), ), - ElevatedButton( - onPressed: () => setState(() => showGeneratedColors = !showGeneratedColors), - child: const Text('Toggle generated colors').paddingAll(Zeta.of(context).spacing.medium), - ).paddingAll(Zeta.of(context).spacing.medium), - if (showGeneratedColors) - Row(children: [Text('Generated color swatches', style: ZetaTextStyles.displayMedium)]) - .paddingVertical(Zeta.of(context).spacing.xl_4), - if (showGeneratedColors) - ...generatedSwatches.entries.map( - (value) => Row( - children: List.generate(11, (index) => 110 - (10 * index)) - .map( - (e) => Expanded( - child: Container( - height: constraints.maxWidth / 10, - color: e == 110 ? colors.surfacePrimary : value.value[e], - child: e == 110 - ? Nothing() - : FittedBox( - fit: BoxFit.scaleDown, - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - DefaultTextStyle( - style: ZetaTextStyles.bodyMedium - .copyWith(color: calculateTextColor(value.value[e] ?? Colors.white)), - child: Column( - children: [ - Text('${value.key.toLowerCase().replaceAll(' ', '')}-$e'), - Text( - value.value[e] - .toString() - .replaceAll('Color(0xff', '#') - .substring(0, 7), - ), - ], - ), - ), - ], - ), - ), - ), - ), - ) - .toList(), - ), - ), + ...primitives.entries + .map( + (value) => Row( + children: List.generate(10, (index) => 100 - (10 * index)) + .map( + (e) => SwatchBox( + color: value.value[e] ?? Colors.white, + name: value.key, + blockSize: blockSize, + value: e, + ), + ) + .toList()), + ) + .toList(), + + // ElevatedButton( + // onPressed: () => setState(() => showGeneratedColors = !showGeneratedColors), + // child: const Text('Toggle generated colors').paddingAll(Zeta.of(context).spacing.medium), + // ).paddingAll(Zeta.of(context).spacing.medium), + // if (showGeneratedColors) + // Row(children: [Text('Generated color swatches', style: ZetaTextStyles.displayMedium)]) + // .paddingVertical(Zeta.of(context).spacing.xl_4), + // if (showGeneratedColors) + // ...generatedSwatches.entries.map( + // (value) => Row( + // children: List.generate(11, (index) => 110 - (10 * index)) + // .map( + // (e) => Expanded( + // child: Container( + // height: constraints.maxWidth / 10, + // color: e == 110 ? colors.surface.primary : value.value[e], + // child: e == 110 + // ? Nothing() + // : FittedBox( + // fit: BoxFit.scaleDown, + // child: Column( + // mainAxisAlignment: MainAxisAlignment.spaceEvenly, + // children: [ + // DefaultTextStyle( + // style: ZetaTextStyles.bodyMedium + // .copyWith(color: calculateTextColor(value.value[e] ?? Colors.white)), + // child: Column( + // children: [ + // Text('${value.key.toLowerCase().replaceAll(' ', '')}-$e'), + // Text( + // value.value[e] + // .toString() + // .replaceAll('Color(0xff', '#') + // .substring(0, 7), + // ), + // ], + // ), + // ), + // ], + // ), + // ), + // ), + // ), + // ) + // .toList(), + // ), + // ), ], ), ), @@ -228,6 +254,39 @@ class _ColorExampleState extends State { } } +class SwatchBox extends StatelessWidget { + const SwatchBox({super.key, required this.color, required this.name, required this.blockSize, required this.value}); + + final Color color; + final int value; + final String name; + final double blockSize; + + @override + Widget build(BuildContext context) { + return Container( + height: blockSize, + width: blockSize, + color: color, + child: FittedBox( + fit: BoxFit.scaleDown, + child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ + DefaultTextStyle( + style: ZetaTextStyles.bodyMedium.copyWith(color: calculateTextColor(color)), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Text('${name.toLowerCase().replaceAll(' ', '')}-$value'), + Text(color.toString().replaceAll('Color(0xff', '#').substring(0, 7)), + ], + ), + ), + ]), + ), + ); + } +} + class MyRow extends StatelessWidget { final Map children; final String title; diff --git a/example/lib/pages/theme/radius_example.dart b/example/lib/pages/theme/radius_example.dart index 199ce397..2d8e7c1a 100644 --- a/example/lib/pages/theme/radius_example.dart +++ b/example/lib/pages/theme/radius_example.dart @@ -31,21 +31,21 @@ class RadiusExample extends StatelessWidget { height: 100, decoration: BoxDecoration( borderRadius: rad, - color: Zeta.of(context).colors.blue.shade30, - border: Border.all(color: colors.blue.shade80, width: 3), + color: Zeta.of(context).colors.primitives.blue.shade30, + border: Border.all(color: colors.primitives.blue.shade80, width: 3), ), child: Center( child: Container( decoration: BoxDecoration( borderRadius: rad, - color: Zeta.of(context).colors.surfacePrimary, - border: Border.all(color: colors.blue.shade50, width: 3), + color: Zeta.of(context).colors.surface.defaultColor, + border: Border.all(color: colors.primitives.blue.shade50, width: 3), ), padding: EdgeInsets.all(Zeta.of(context).spacing.large), child: Text( rad.radiusString.split('.').last.capitalize(), style: ZetaTextStyles.titleMedium.apply( - color: Zeta.of(context).colors.textDefault, + color: Zeta.of(context).colors.main.defaultColor, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ), diff --git a/example/lib/pages/theme/spacing_example.dart b/example/lib/pages/theme/spacing_example.dart index 6ab0e78d..25464e99 100644 --- a/example/lib/pages/theme/spacing_example.dart +++ b/example/lib/pages/theme/spacing_example.dart @@ -55,11 +55,11 @@ class SpacingExample extends StatelessWidget { children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, - children: baseSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + children: semanticSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), ), Column( crossAxisAlignment: CrossAxisAlignment.start, - children: semanticSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), + children: baseSpacings.entries.map((obj) => _SpacingDemo(obj, true)).toList(), ) ], ), @@ -71,26 +71,27 @@ class SpacingExample extends StatelessWidget { class _SpacingDemo extends StatelessWidget { final MapEntry size; + final bool primitive; - const _SpacingDemo(this.size); + const _SpacingDemo(this.size, [this.primitive = false]); @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; return Container( - color: colors.blue.shade30, + color: colors.primitives.blue.shade30, margin: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: CustomPaint( - painter: _TagPainter(color: colors.pink), + painter: _TagPainter(color: colors.primitives.pink), child: LayoutBuilder(builder: (context, c2) { return Container( margin: EdgeInsets.all(size.value), padding: EdgeInsets.all(Zeta.of(context).spacing.medium), - color: colors.surfacePrimary, + color: colors.surface.primary, child: Text( 'Zeta.of(context).spacing.' + size.key, style: ZetaTextStyles.titleMedium.apply( - color: Zeta.of(context).colors.textDefault, + color: Zeta.of(context).colors.main.defaultColor, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ), diff --git a/example/lib/theme_service.dart b/example/lib/theme_service.dart deleted file mode 100644 index 3c80a1b9..00000000 --- a/example/lib/theme_service.dart +++ /dev/null @@ -1,47 +0,0 @@ -import 'package:flutter/src/material/app.dart'; -import 'package:shared_preferences/shared_preferences.dart'; -import 'package:zeta_example/utils/theme_color_switch.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; - -class SharedPrefsThemeService extends ZetaThemeService { - SharedPrefsThemeService(this.preferences); - - final SharedPreferences preferences; - - @override - Future<(ZetaThemeData?, ThemeMode?, ZetaContrast?)> loadTheme() async { - final theme = preferences.getString('theme') ?? 'default'; - final themeData = appThemes[theme]; - - final modeString = preferences.getString('themeMode'); - final themeMode = modeString == 'light' - ? ThemeMode.light - : modeString == 'dark' - ? ThemeMode.dark - : ThemeMode.system; - - final contrastString = preferences.getString('contrast'); - final contrast = contrastString == 'aaa' ? ZetaContrast.aaa : ZetaContrast.aa; - - return (themeData, themeMode, contrast); - } - - @override - Future saveTheme({ - required ZetaThemeData themeData, - required ThemeMode themeMode, - required ZetaContrast contrast, - }) async { - await preferences.setString('theme', themeData.identifier); - - final modeString = themeMode == ThemeMode.light - ? 'light' - : themeMode == ThemeMode.dark - ? 'dark' - : 'system'; - await preferences.setString('themeMode', modeString); - - final contrastString = contrast == ZetaContrast.aaa ? 'aaa' : 'aa'; - await preferences.setString('contrast', contrastString); - } -} diff --git a/example/lib/utils/rounded_switch.dart b/example/lib/utils/rounded_switch.dart index f8d3acd7..4f69ec81 100644 --- a/example/lib/utils/rounded_switch.dart +++ b/example/lib/utils/rounded_switch.dart @@ -14,18 +14,18 @@ class ZetaRoundedSwitch extends StatelessWidget { padding: EdgeInsets.all(8), elevation: 0, icon: Nothing(), - dropdownColor: zeta.colors.borderDisabled, + dropdownColor: zeta.colors.border.disabled, items: [true, false].map((e) { return DropdownMenuItem( value: e, alignment: Alignment.center, child: ZetaAvatar( size: ZetaAvatarSize.xxs, - image: Icon(e ? Icons.circle : Icons.square, color: zeta.colors.primary), + image: Icon(e ? Icons.circle : Icons.square, color: zeta.colors.main.primary), initialTextStyle: TextStyle( fontSize: 28, letterSpacing: Zeta.of(context).spacing.none, - color: Zeta.of(context).colors.primary, + color: Zeta.of(context).colors.main.primary, fontWeight: FontWeight.w500, ), ), diff --git a/example/lib/utils/theme_color_switch.dart b/example/lib/utils/theme_color_switch.dart index c205ed11..66dfca08 100644 --- a/example/lib/utils/theme_color_switch.dart +++ b/example/lib/utils/theme_color_switch.dart @@ -1,68 +1,49 @@ -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; +// TODO: Re implement this widget +// import 'package:flutter/material.dart'; +// import 'package:zeta_flutter/zeta_flutter.dart'; -late final appThemes = { - "default": ZetaThemeData(), - "teal": ZetaThemeData( - identifier: 'teal', - primary: ZetaColorBase.teal, - ), - "yellow": ZetaThemeData( - identifier: 'yellow', - primary: ZetaColorBase.yellow, - ), - "red": ZetaThemeData( - identifier: 'red', - primary: ZetaColorBase.red, - ), - "purple": ZetaThemeData( - identifier: 'purple', - primary: ZetaColorBase.purple, - ), -}; +// class ZetaThemeColorSwitch extends StatelessWidget { +// ZetaThemeColorSwitch({super.key}); -class ZetaThemeColorSwitch extends StatelessWidget { - ZetaThemeColorSwitch({super.key}); +// @override +// Widget build(BuildContext context) { +// final zeta = Zeta.of(context); - @override - Widget build(BuildContext context) { - final zeta = Zeta.of(context); +// ZetaColors primary(ZetaThemeData data) { +// if (zeta.brightness == Brightness.light) { +// return data.colorsLight; +// } else { +// return data.colorsDark; +// } +// } - ZetaColors primary(ZetaThemeData data) { - if (zeta.brightness == Brightness.light) { - return data.colorsLight; - } else { - return data.colorsDark; - } - } - - return DropdownButtonHideUnderline( - child: DropdownButton( - value: zeta.themeData.identifier, - elevation: 0, - padding: EdgeInsets.all(8), - icon: Nothing(), - dropdownColor: zeta.colors.borderDisabled, - items: appThemes.entries.map((e) { - final zetaColors = primary(appThemes[e.key]!); - final color = zetaColors.primary; - return DropdownMenuItem( - value: e.value.identifier, - alignment: Alignment.center, - child: ZetaAvatar( - size: ZetaAvatarSize.xxs, - backgroundColor: color.surface, - image: ZetaIcon(Icons.color_lens, color: color), - ), - ); - }).toList(), - onChanged: (value) { - final theme = appThemes[value]; - if (theme != null) { - ZetaProvider.of(context).updateThemeData(theme); - } - }, - ), - ); - } -} +// return DropdownButtonHideUnderline( +// child: DropdownButton( +// value: zeta.themeData?.identifier, +// elevation: 0, +// padding: EdgeInsets.all(8), +// icon: Nothing(), +// dropdownColor: zeta.colors.border.disabled, +// items: appThemes.entries.map((e) { +// final zetaColors = primary(appThemes[e.key]!); +// final color = zetaColors.primary; +// return DropdownMenuItem( +// value: e.value.identifier, +// alignment: Alignment.center, +// child: ZetaAvatar( +// size: ZetaAvatarSize.xxs, +// backgroundColor: color.surface, +// image: ZetaIcon(Icons.color_lens, color: color), +// ), +// ); +// }).toList(), +// onChanged: (value) { +// final theme = appThemes[value]; +// if (theme != null) { +// ZetaProvider.of(context).updateThemeData(theme); +// } +// }, +// ), +// ); +// } +// } diff --git a/example/lib/utils/theme_constrast_switch.dart b/example/lib/utils/theme_constrast_switch.dart index de59993d..6957baf0 100644 --- a/example/lib/utils/theme_constrast_switch.dart +++ b/example/lib/utils/theme_constrast_switch.dart @@ -13,34 +13,28 @@ class ZetaThemeContrastSwitch extends StatelessWidget { Widget build(BuildContext context) { final zeta = Zeta.of(context); - ZetaColors zetaColors(ZetaContrast contrast) { - if (zeta.brightness == Brightness.light) { - return zeta.themeData.apply(contrast: contrast).colorsLight; - } else { - return zeta.themeData.apply(contrast: contrast).colorsDark; - } - } - return DropdownButtonHideUnderline( child: DropdownButton( value: zeta.contrast, padding: EdgeInsets.all(8), elevation: 0, icon: Nothing(), - dropdownColor: zeta.colors.borderDisabled, + dropdownColor: zeta.colors.border.disabled, items: _themes.map((e) { - final colors = zetaColors(e); + final colors = e == ZetaContrast.aa + ? ZetaSemanticColorsAA(primitives: Zeta.of(context).colors.primitives) + : ZetaSemanticColorsAAA(primitives: Zeta.of(context).colors.primitives); return DropdownMenuItem( value: e, alignment: Alignment.center, child: ZetaAvatar( size: ZetaAvatarSize.xxs, - backgroundColor: colors.primary.surface, - initials: e == ZetaContrast.aa ? 'AA' : 'AAA', + backgroundColor: colors.surface.defaultColor, + initials: e.name.toUpperCase(), initialTextStyle: TextStyle( fontSize: 14, letterSpacing: Zeta.of(context).spacing.none, - color: colors.primary, + color: colors.main.primary, fontWeight: FontWeight.w500, ), ), diff --git a/example/lib/utils/theme_mode_switch.dart b/example/lib/utils/theme_mode_switch.dart index 1250c93b..5df2a90c 100644 --- a/example/lib/utils/theme_mode_switch.dart +++ b/example/lib/utils/theme_mode_switch.dart @@ -14,37 +14,30 @@ class ZetaThemeModeSwitch extends StatelessWidget { Widget build(BuildContext context) { final zeta = Zeta.of(context); - ZetaColors zetaColors(ThemeMode mode) { - if ((mode == ThemeMode.system && MediaQuery.of(context).platformBrightness == Brightness.light) || - mode == ThemeMode.light) { - return zeta.themeData.colorsLight; - } else { - return zeta.themeData.colorsDark; - } - } - return DropdownButtonHideUnderline( child: DropdownButton( padding: EdgeInsets.all(8), value: zeta.themeMode, elevation: 0, icon: Nothing(), - dropdownColor: zeta.colors.borderDisabled, + dropdownColor: zeta.colors.border.disabled, items: _themes.map((e) { - final colors = zetaColors(e); + final colors = e == ThemeMode.dark + ? ZetaSemanticColorsAA(primitives: ZetaPrimitivesDark()) + : ZetaSemanticColorsAA(primitives: ZetaPrimitivesLight()); return DropdownMenuItem( value: e, alignment: Alignment.center, child: ZetaAvatar( size: ZetaAvatarSize.xxs, - backgroundColor: colors.primary.surface, + backgroundColor: colors.surface.defaultColor, image: ZetaIcon( e == ThemeMode.system ? Icons.system_security_update_good : e == ThemeMode.light ? Icons.light_mode : Icons.dark_mode, - color: colors.primary, + color: colors.main.primary, ), ), ); diff --git a/example/lib/widgets.dart b/example/lib/widgets.dart index dcaa892b..b32dd4ab 100644 --- a/example/lib/widgets.dart +++ b/example/lib/widgets.dart @@ -1,6 +1,5 @@ import 'package:flutter/material.dart'; import 'package:zeta_example/utils/rounded_switch.dart'; -import 'package:zeta_example/utils/theme_color_switch.dart'; import 'package:zeta_example/utils/theme_constrast_switch.dart'; import 'package:zeta_example/utils/theme_mode_switch.dart'; @@ -37,7 +36,7 @@ class ExampleScaffold extends StatelessWidget { ZetaRoundedSwitch(), ZetaThemeModeSwitch(), ZetaThemeContrastSwitch(), - ZetaThemeColorSwitch(), + // ZetaThemeColorSwitch(), ], ), backgroundColor: colors.surface, diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart index e746f90d..d9088813 100644 --- a/example/widgetbook/pages/assets/icon_widgetbook.dart +++ b/example/widgetbook/pages/assets/icon_widgetbook.dart @@ -27,7 +27,7 @@ Widget iconsUseCase(BuildContext context) { height: 140, child: InkWell( borderRadius: Zeta.of(context).radius.rounded, - hoverColor: Zeta.of(context).colors.surfaceHover, + hoverColor: Zeta.of(context).colors.surface.hover, onTap: () async { await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key)); ScaffoldMessenger.of(context).showMaterialBanner( @@ -51,7 +51,7 @@ Widget iconsUseCase(BuildContext context) { nameArr, textAlign: TextAlign.center, maxLines: 2, - ) + ), ], ), ), diff --git a/example/widgetbook/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart index 13d1a6cd..37b2ba84 100644 --- a/example/widgetbook/pages/components/avatar_widgetbook.dart +++ b/example/widgetbook/pages/components/avatar_widgetbook.dart @@ -20,18 +20,19 @@ Widget avatarUseCase(BuildContext context) { upperBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaAvatarBadge.icon( icon: ZetaIcons.close, - color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.green) ?? - colors.iconDefault, + color: context.knobs.colorOrNull(label: "Upper Badge Color", initialValue: colors.primitives.green) ?? + colors.main.defaultColor, ) : null, - borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.green), + borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: colors.primitives.green), lowerBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false) ? ZetaAvatarBadge.notification( value: context.knobs.intOrNull.input(label: "Value", initialValue: 1), ) : null, initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AZ'), - backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: colors.purple.shade80), + backgroundColor: + context.knobs.colorOrNull(label: 'Background color', initialValue: colors.primitives.purple.shade80), ), ); } diff --git a/example/widgetbook/pages/components/dialog_widgetbook.dart b/example/widgetbook/pages/components/dialog_widgetbook.dart index db88bf5a..9ff56b1c 100644 --- a/example/widgetbook/pages/components/dialog_widgetbook.dart +++ b/example/widgetbook/pages/components/dialog_widgetbook.dart @@ -42,7 +42,7 @@ Widget dialogUseCase(BuildContext context) { title: title, icon: ZetaIcon( iconData, - color: zeta.colors.surfaceWarning, + color: zeta.colors.surface.warning, ), message: message, primaryButtonLabel: 'Confirm', @@ -58,7 +58,7 @@ Widget dialogUseCase(BuildContext context) { title: title, icon: ZetaIcon( iconData, - color: zeta.colors.surfaceWarning, + color: zeta.colors.surface.warning, ), message: message, primaryButtonLabel: 'Confirm', @@ -75,7 +75,7 @@ Widget dialogUseCase(BuildContext context) { title: title, icon: ZetaIcon( iconData, - color: zeta.colors.surfaceWarning, + color: zeta.colors.surface.warning, ), message: message, primaryButtonLabel: 'Confirm', diff --git a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart index bafbf9f2..4b9b52f9 100644 --- a/example/widgetbook/pages/components/navigation_rail_widgetbook.dart +++ b/example/widgetbook/pages/components/navigation_rail_widgetbook.dart @@ -48,7 +48,7 @@ Widget navigationRailUseCase(BuildContext context) { itemsList[selectedIndex!], textAlign: TextAlign.center, style: ZetaTextStyles.titleMedium.copyWith( - color: zeta.colors.textDefault, + color: zeta.colors.main.defaultColor, fontWeight: FontWeight.bold, ), ), diff --git a/example/widgetbook/pages/components/progress_widgetbook.dart b/example/widgetbook/pages/components/progress_widgetbook.dart index 249b5896..4444d0a4 100644 --- a/example/widgetbook/pages/components/progress_widgetbook.dart +++ b/example/widgetbook/pages/components/progress_widgetbook.dart @@ -1,3 +1,4 @@ +import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; diff --git a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart index 96f80616..6476bb39 100644 --- a/example/widgetbook/pages/components/top_app_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart @@ -206,7 +206,7 @@ class _ExtendedSearchState extends State { child: Container( width: constraints.maxWidth, height: constraints.maxHeight * 4, - color: Zeta.of(context).colors.surfaceSecondary, + color: Zeta.of(context).colors.surface.secondary, child: CustomPaint( painter: Painter(context: context, constraints: constraints), size: Size(constraints.maxWidth, constraints.maxHeight * 4), @@ -232,7 +232,7 @@ class Painter extends CustomPainter { var p1 = Offset(i, -10); var p2 = Offset(constraints.maxHeight + i, constraints.maxHeight * 4); var paint = Paint() - ..color = Zeta.of(context).colors.primary + ..color = Zeta.of(context).colors.main.primary ..strokeWidth = Zeta.of(context).spacing.minimum; canvas.drawLine(p1, p2, paint); } diff --git a/example/widgetbook/pages/introduction.dart b/example/widgetbook/pages/introduction.dart index 3cfe397f..11395985 100644 --- a/example/widgetbook/pages/introduction.dart +++ b/example/widgetbook/pages/introduction.dart @@ -32,7 +32,7 @@ class _IntroductionWidgetbookState extends State { return LayoutBuilder(builder: (context, constraints) { final bool largeScreen = constraints.maxWidth > 480; return Scaffold( - backgroundColor: colors.black, + backgroundColor: Colors.black, body: SingleChildScrollView( child: Padding( padding: EdgeInsets.symmetric( @@ -42,7 +42,7 @@ class _IntroductionWidgetbookState extends State { children: [ Container( decoration: BoxDecoration( - color: colors.cool.shade20, + color: colors.surface.hover, borderRadius: BorderRadius.only(topLeft: radius, topRight: radius), ), child: Padding( @@ -82,7 +82,7 @@ class _IntroductionWidgetbookState extends State { ), Container( decoration: BoxDecoration( - color: isDark ? colors.warm.shade10 : colors.surfacePrimary, + color: colors.surface.defaultColor, borderRadius: BorderRadius.only(bottomLeft: radius, bottomRight: radius), ), width: double.infinity, @@ -97,7 +97,7 @@ class _IntroductionWidgetbookState extends State { configs: [ LinkConfig( style: TextStyle( - color: colors.blue.shade50, + color: colors.main.primary, decoration: TextDecoration.underline, ), onTap: (url) { @@ -151,7 +151,7 @@ class _CodeWrapperWidget extends StatelessWidget { return Stack( children: [ DefaultTextStyle( - style: GoogleFonts.ibmPlexMono(color: Zeta.of(context).colors.textDefault), + style: GoogleFonts.ibmPlexMono(color: Zeta.of(context).colors.main.defaultColor), child: child, ), if (language.isNotEmpty) @@ -163,7 +163,8 @@ class _CodeWrapperWidget extends StatelessWidget { child: Text(language), padding: EdgeInsets.symmetric( vertical: Zeta.of(context).spacing.minimum, horizontal: Zeta.of(context).spacing.medium), - decoration: BoxDecoration(color: colors.cool.shade40, borderRadius: Zeta.of(context).radius.rounded), + decoration: + BoxDecoration(color: colors.surface.selectedHover, borderRadius: Zeta.of(context).radius.rounded), ), ), ), diff --git a/example/widgetbook/pages/theme/color_widgetbook.dart b/example/widgetbook/pages/theme/color_widgetbook.dart index 23ccec58..44eb554a 100644 --- a/example/widgetbook/pages/theme/color_widgetbook.dart +++ b/example/widgetbook/pages/theme/color_widgetbook.dart @@ -2,6 +2,8 @@ import 'package:flutter/material.dart'; import 'package:zeta_example/pages/theme/color_example.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; +import '../../utils/scaffold.dart'; + Widget colorUseCase(BuildContext context) => ColorBody(); class ColorBody extends StatelessWidget { @@ -9,107 +11,185 @@ class ColorBody extends StatelessWidget { @override Widget build(BuildContext context) { - return LayoutBuilder(builder: (_, constraints) { - final colors = Zeta.of(context).colors; + final colors = Zeta.of(context).colors; + + return WidgetbookScaffold(builder: (context, constraints) { + final blockSize = constraints.maxWidth / 11; + final Map primitives = { + 'cool': colors.primitives.cool, + 'warm': colors.primitives.warm, + 'blue': colors.primitives.blue, + 'green': colors.primitives.green, + 'red': colors.primitives.red, + 'orange': colors.primitives.orange, + 'purple': colors.primitives.purple, + 'yellow': colors.primitives.yellow, + 'teal': colors.primitives.teal, + 'pink': colors.primitives.pink, + }; + final Map primitivesPure = { + 'white': colors.primitives.pure.shade0, + 'mid': colors.primitives.pure.shade500, + 'black': colors.primitives.pure.shade1000, + }; - final Map swatches = { - 'Blue': colors.blue, - 'Green': colors.green, - 'Red': colors.red, - 'Orange': colors.orange, - 'Purple': colors.purple, - 'Yellow': colors.yellow, - 'Teal': colors.teal, - 'Pink': colors.pink, - 'Grey Warm': colors.warm, - 'Grey Cool': colors.cool, + final Map mainColors = { + 'defaultColor': colors.main.defaultColor, + 'subtle': colors.main.subtle, + 'light': colors.main.light, + 'inverse': colors.main.inverse, + 'disabled': colors.main.disabled, + 'primary': colors.main.primary, + 'secondary': colors.main.secondary, + 'positive': colors.main.positive, + 'warning': colors.main.warning, + 'negative': colors.main.negative, + 'info': colors.main.info, + }; + final Map borderColors = { + 'defaultColor': colors.border.defaultColor, + 'subtle': colors.border.subtle, + 'hover': colors.border.hover, + 'selected': colors.border.selected, + 'disabled': colors.border.disabled, + 'pure': colors.border.pure, + 'primaryMain': colors.border.primaryMain, + 'primary': colors.border.primary, + 'secondary': colors.border.secondary, + 'positive': colors.border.positive, + 'warning': colors.border.warning, + 'negative': colors.border.negative, + 'info': colors.border.info, + }; + final Map surfaceColors = { + 'defaultColor': colors.surface.defaultColor, + 'defaultInverse': colors.surface.defaultInverse, + 'hover': colors.surface.hover, + 'selected': colors.surface.selected, + 'selectedHover': colors.surface.selectedHover, + 'disabled': colors.surface.disabled, + 'cool': colors.surface.cool, + 'warm': colors.surface.warm, + 'primary': colors.surface.primary, + 'primarySubtle': colors.surface.primarySubtle, + 'secondary': colors.surface.secondary, + 'secondarySubtle': colors.surface.secondarySubtle, + 'positive': colors.surface.positive, + 'positiveSubtle': colors.surface.positiveSubtle, + 'warning': colors.surface.warning, + 'warningSubtle': colors.surface.warningSubtle, + 'negative': colors.surface.negative, + 'negativeSubtle': colors.surface.negativeSubtle, + 'info': colors.surface.info, + 'infoSubtle': colors.surface.infoSubtle, + }; + final Map avatarColors = { + 'blue': colors.surface.avatar.blue, + 'green': colors.surface.avatar.green, + 'orange': colors.surface.avatar.orange, + 'pink': colors.surface.avatar.pink, + 'purple': colors.surface.avatar.purple, + 'teal': colors.surface.avatar.teal, + 'yellow': colors.surface.avatar.yellow, }; - final Map textIcon = { - 'textDefault': colors.textDefault, - 'textSubtle': colors.textSubtle, - 'textDisabled': colors.textDisabled, - 'textInverse': colors.textInverse, + final Map disabled = { + 'disabled': colors.state.disabled.disabled, }; - final Map border = { - 'borderDefault': colors.borderDefault, - 'borderSubtle': colors.borderSubtle, - 'borderDisabled': colors.borderDisabled, - 'borderSelected': colors.borderSelected, + final Map defaultColors = { + 'enabled': colors.state.defaultColor.enabled, + 'hover': colors.state.defaultColor.hover, + 'selected': colors.state.defaultColor.selected, + 'focus': colors.state.defaultColor.focus, }; - final Map backdrop = { - 'surfacePrimary': colors.surfacePrimary, - 'surfaceDisabled': colors.surfaceDisabled, - 'surfaceHover': colors.surfaceHover, - 'surfaceSecondary': colors.surfaceSecondary, - 'surfaceTertiary': colors.surfaceTertiary, - 'surfaceSelectedHover': colors.surfaceSelectedHover, - 'surfaceSelected': colors.surfaceSelected, + final Map primary = { + 'enabled': colors.state.primary.enabled, + 'hover': colors.state.primary.hover, + 'selected': colors.state.primary.selected, + 'focus': colors.state.primary.focus, }; - final Map alerts = { - 'positive': colors.surfacePositive, - 'negative': colors.surfaceNegative, - 'warning': colors.surfaceWarning, - 'info': colors.surfaceInfo, + final Map secondary = { + 'enabled': colors.state.secondary.enabled, + 'hover': colors.state.secondary.hover, + 'selected': colors.state.secondary.selected, + 'focus': colors.state.secondary.focus, + }; + final Map positive = { + 'enabled': colors.state.positive.enabled, + 'hover': colors.state.positive.hover, + 'selected': colors.state.positive.selected, + 'focus': colors.state.positive.focus, + }; + final Map negative = { + 'enabled': colors.state.negative.enabled, + 'hover': colors.state.negative.hover, + 'selected': colors.state.negative.selected, + 'focus': colors.state.negative.focus, + }; + final Map info = { + 'enabled': colors.state.info.enabled, + 'hover': colors.state.info.hover, + 'selected': colors.state.info.selected, + 'focus': colors.state.info.focus, + }; + final Map inverse = { + 'enabled': colors.state.inverse.enabled, + 'hover': colors.state.inverse.hover, + 'selected': colors.state.inverse.selected, + 'focus': colors.state.inverse.focus, }; - return DefaultTextStyle( - style: ZetaTextStyles.displayMedium.apply( - color: Zeta.of(context).colors.cool, - decoration: TextDecoration.none, - ), - child: Container( - padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.xl_4), - child: SingleChildScrollView( - key: PageStorageKey(0), - child: Column( - children: [ - SizedBox(height: Zeta.of(context).spacing.xl_4), - MyRow(children: textIcon, title: 'Text and icon styles'), - MyRow(children: border, title: 'Border styles'), - MyRow(children: backdrop, title: 'Backdrop colors'), - MyRow(children: alerts, title: 'Alert colors'), - Row(children: [Text('Full color swatches')]).paddingVertical(Zeta.of(context).spacing.xl_4), - ...swatches.entries.map( - (value) { - return Row( - children: List.generate(10, (index) => 100 - (10 * index)).map( - (e) { - return Expanded( - child: Container( - height: constraints.maxWidth / 10, - color: value.value[e], - child: FittedBox( - fit: BoxFit.scaleDown, - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - DefaultTextStyle( - style: ZetaTextStyles.bodyMedium.copyWith( - color: calculateTextColor(value.value[e] ?? Colors.white), - ), - child: Column( - children: [ - Text('${value.key.toLowerCase().replaceAll(' ', '')}-$e'), - Text( - value.value[e].toString().replaceAll('Color(0xff', '#').substring(0, 7), - ), - ], - ), - ), - ], - ), - ), - ), - ); - }, - ).toList(), - ); - }, - ), - SizedBox(height: Zeta.of(context).spacing.xl_4), - ], + return SingleChildScrollView( + padding: EdgeInsets.all(Zeta.of(context).spacing.medium), + child: Column( + children: [ + Text('Semantic colors', style: ZetaTextStyles.displaySmall), + MyRow(children: mainColors, title: 'Main Colors'), + MyRow(children: borderColors, title: 'Main Colors'), + MyRow(children: surfaceColors, title: 'Surface Colors'), + MyRow(children: avatarColors, title: 'Surface / Avatar Colors'), + MyRow(children: disabled, title: 'State / disabled Colors'), + MyRow(children: defaultColors, title: 'State / default Colors'), + MyRow(children: primary, title: 'State / primary Colors'), + MyRow(children: secondary, title: 'State / secondary Colors'), + MyRow(children: positive, title: 'State / positive Colors'), + MyRow(children: negative, title: 'State / negative Colors'), + MyRow(children: info, title: 'State / info Colors'), + MyRow(children: inverse, title: 'State / inverse Colors'), + Row(children: [ + Text('Full color swatches', style: ZetaTextStyles.displayMedium), + ]).paddingVertical(Zeta.of(context).spacing.xl_4), + Row( + children: primitivesPure.entries + .map( + (value) => SwatchBox( + color: value.value, + name: 'pure', + blockSize: blockSize, + value: value.key == 'mid' + ? 500 + : value.key == 'white' + ? 0 + : 1000, + ), + ) + .toList(), ), - ), + ...primitives.entries + .map( + (value) => Row( + children: List.generate(10, (index) => 100 - (10 * index)) + .map( + (e) => SwatchBox( + color: value.value[e] ?? Colors.white, + name: value.key, + blockSize: blockSize, + value: e, + ), + ) + .toList()), + ) + .toList(), + ], ), ); }); diff --git a/example/widgetbook/pages/theme/radius_widgetbook.dart b/example/widgetbook/pages/theme/radius_widgetbook.dart index 69a3a72e..9f431b88 100644 --- a/example/widgetbook/pages/theme/radius_widgetbook.dart +++ b/example/widgetbook/pages/theme/radius_widgetbook.dart @@ -27,21 +27,21 @@ Widget radiusUseCase(BuildContext context) { height: 250, decoration: BoxDecoration( borderRadius: rad, - color: Zeta.of(context).colors.blue.shade30, - border: Border.all(color: colors.blue.shade80, width: 3), + color: Zeta.of(context).colors.primitives.blue.shade30, + border: Border.all(color: colors.primitives.blue.shade80, width: 3), ), child: Center( child: Container( decoration: BoxDecoration( borderRadius: rad, - color: Zeta.of(context).colors.surfacePrimary, - border: Border.all(color: colors.blue.shade50, width: 3), + color: Zeta.of(context).colors.surface.primary, + border: Border.all(color: colors.primitives.blue.shade50, width: 3), ), padding: EdgeInsets.all(Zeta.of(context).spacing.large), child: Text( rad.radiusString.split('.').last.capitalize(), style: ZetaTextStyles.titleMedium.apply( - color: Zeta.of(context).colors.textDefault, + color: Zeta.of(context).colors.main.defaultColor, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ), diff --git a/example/widgetbook/pages/theme/spacing_widgetbook.dart b/example/widgetbook/pages/theme/spacing_widgetbook.dart index 51a441c1..4f65182b 100644 --- a/example/widgetbook/pages/theme/spacing_widgetbook.dart +++ b/example/widgetbook/pages/theme/spacing_widgetbook.dart @@ -66,19 +66,19 @@ class _SpacingDemo extends StatelessWidget { Widget build(BuildContext context) { final colors = Zeta.of(context).colors; return Container( - color: colors.blue.shade30, + color: colors.primitives.blue.shade30, margin: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: CustomPaint( - painter: _TagPainter(color: colors.pink), + painter: _TagPainter(color: colors.primitives.pink), child: LayoutBuilder(builder: (context, c2) { return Container( margin: EdgeInsets.all(size.value), padding: EdgeInsets.all(Zeta.of(context).spacing.medium), - color: colors.surfacePrimary, + color: colors.surface.primary, child: Text( 'Zeta.of(context).spacing.' + size.key, style: ZetaTextStyles.titleMedium.apply( - color: Zeta.of(context).colors.textDefault, + color: Zeta.of(context).colors.main.defaultColor, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ), diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart index 900e36b1..067b6c2b 100644 --- a/example/widgetbook/pages/theme/typography_widgetbook.dart +++ b/example/widgetbook/pages/theme/typography_widgetbook.dart @@ -23,7 +23,8 @@ const Map allTypes = { 'Label indicator': ZetaTextStyles.labelIndicator, }; -Widget typographyUseCase(BuildContext context) => Padding( +Widget typographyUseCase(BuildContext context) => Container( + color: Zeta.of(context).colors.surface.primary, padding: EdgeInsets.all(Zeta.of(context).spacing.xl_2), child: Text( context.knobs.string(label: 'Text', initialValue: 'The quick brown fox jumps over the lazy dog.'), @@ -34,7 +35,7 @@ Widget typographyUseCase(BuildContext context) => Padding( options: allTypes.values.toList(), ) .apply( - color: Zeta.of(context).colors.textDefault, + color: Zeta.of(context).colors.main.defaultColor, fontStyle: FontStyle.normal, decoration: TextDecoration.none, ), diff --git a/example/widgetbook/utils/scaffold.dart b/example/widgetbook/utils/scaffold.dart index 2dbaccdf..53d06aec 100644 --- a/example/widgetbook/utils/scaffold.dart +++ b/example/widgetbook/utils/scaffold.dart @@ -16,7 +16,7 @@ class WidgetbookScaffold extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - backgroundColor: backgroundColor ?? Zeta.of(context).colors.surfaceDefault, + backgroundColor: backgroundColor ?? Zeta.of(context).colors.surface.defaultColor, body: LayoutBuilder(builder: (context, constraints) { return Center( child: ListView( diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart index 14d50a34..16c1f8f8 100644 --- a/lib/src/components/accordion/accordion.dart +++ b/lib/src/components/accordion/accordion.dart @@ -96,9 +96,10 @@ class _ZetaAccordionState extends State with TickerProviderStateM @override Widget build(BuildContext context) { final zetaColors = Zeta.of(context).colors; - final borderColor = _disabled ? zetaColors.borderDisabled : zetaColors.borderSubtle; - final childTextStyle = ZetaTextStyles.h5.apply(color: zetaColors.textDefault); + final borderColor = _disabled ? zetaColors.border.disabled : zetaColors.border.subtle; + final childTextStyle = ZetaTextStyles.h5.apply(color: zetaColors.main.defaultColor); final rounded = context.rounded; + final Color color = _disabled ? zetaColors.main.disabled : zetaColors.main.defaultColor; return ZetaRoundedScope( rounded: rounded, child: DecoratedBox( @@ -120,10 +121,10 @@ class _ZetaAccordionState extends State with TickerProviderStateM ), overlayColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.hovered)) { - return zetaColors.cool.shade20; + return zetaColors.surface.hover; } if (states.contains(WidgetState.pressed)) { - return zetaColors.cool.shade30; + return zetaColors.surface.selectedHover; } if (states.contains(WidgetState.focused)) { @@ -134,7 +135,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM }), side: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.focused)) { - return BorderSide(color: zetaColors.blue.shade50, width: 2); + return BorderSide(color: zetaColors.border.primary, width: 2); } return null; }), @@ -157,7 +158,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM children: [ DefaultTextStyle( style: ZetaTextStyles.titleMedium.apply( - color: _disabled ? zetaColors.textDisabled : zetaColors.textDefault, + color: color, ), child: Flexible(child: Text(widget.title)), ), @@ -165,7 +166,7 @@ class _ZetaAccordionState extends State with TickerProviderStateM padding: EdgeInsets.only(left: Zeta.of(context).spacing.large), child: ZetaIcon( _isOpen ? ZetaIcons.remove : ZetaIcons.add, - color: _disabled ? zetaColors.iconDisabled : zetaColors.iconDefault, + color: color, ), ), ], diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart index 1437d5f6..5d9a1299 100644 --- a/lib/src/components/avatars/avatar.dart +++ b/lib/src/components/avatars/avatar.dart @@ -216,14 +216,14 @@ class ZetaAvatar extends ZetaStatelessWidget { decoration: BoxDecoration( border: borderColor != null ? Border.all(color: borderColor!, width: 0) : null, borderRadius: Zeta.of(context).radius.full, - color: backgroundColor ?? (_showPlaceholder ? zetaColors.surfacePrimary : zetaColors.cool.shade20), + color: backgroundColor ?? (_showPlaceholder ? zetaColors.surface.primary : zetaColors.surface.warm), ), child: borderColor != null ? Container( width: pSize, height: pSize, decoration: BoxDecoration( - color: backgroundColor ?? zetaColors.surfaceHover, + color: backgroundColor ?? zetaColors.surface.hover, border: Border.all(color: borderColor!, width: borderSize(context)), borderRadius: Zeta.of(context).radius.full, ), @@ -235,7 +235,7 @@ class ZetaAvatar extends ZetaStatelessWidget { : DecoratedBox( decoration: BoxDecoration( borderRadius: Zeta.of(context).radius.full, - color: backgroundColor ?? zetaColors.surfaceHover, + color: backgroundColor ?? zetaColors.surface.hover, ), child: ClipRRect( borderRadius: Zeta.of(context).radius.full, @@ -326,7 +326,7 @@ extension on ZetaAvatarSize { case ZetaAvatarSize.xs: case ZetaAvatarSize.xxs: case ZetaAvatarSize.xxxs: - return ZetaBorders.borderWidth; + return ZetaBorders.medium; } } @@ -433,7 +433,7 @@ class ZetaAvatarBadge extends StatelessWidget { Widget build(BuildContext context) { final colors = Zeta.of(context).colors; final Color backgroundColor = - type == ZetaAvatarBadgeType.notification ? colors.surfaceNegative : (color ?? colors.primary); + type == ZetaAvatarBadgeType.notification ? colors.surface.negative : (color ?? colors.main.primary); final badgeSize = _getContainerSize(context); final borderSize = _getBorderSize(context); final paddedSize = badgeSize + Zeta.of(context).spacing.minimum; @@ -472,7 +472,7 @@ class ZetaAvatarBadge extends StatelessWidget { border: type != ZetaAvatarBadgeType.notification ? Border.all( width: borderSize, - color: Zeta.of(context).colors.surfacePrimary, + color: Zeta.of(context).colors.surface.primary, ) : null, ), diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart index 53fdc3bd..e3c4da18 100644 --- a/lib/src/components/badges/indicator.dart +++ b/lib/src/components/badges/indicator.dart @@ -102,8 +102,9 @@ class ZetaIndicator extends ZetaStatelessWidget { @override Widget build(BuildContext context) { final zetaColors = Zeta.of(context).colors; - final Color backgroundColor = (type == ZetaIndicatorType.icon ? zetaColors.blue : zetaColors.surfaceNegative); - final Color foregroundColor = backgroundColor.onColor; + final Color backgroundColor = + (type == ZetaIndicatorType.icon ? zetaColors.main.primary : zetaColors.surface.negative); + final Color foregroundColor = zetaColors.main.inverse; final sizePixels = _getSizePixels(size, type, context); return Semantics( @@ -113,8 +114,8 @@ class ZetaIndicator extends ZetaStatelessWidget { height: sizePixels + Zeta.of(context).spacing.minimum, decoration: BoxDecoration( border: Border.all( - width: ZetaBorders.borderWidth, - color: Zeta.of(context).colors.borderSubtle, + width: ZetaBorders.medium, + color: Zeta.of(context).colors.border.pure, ), color: (inverse ? foregroundColor : Colors.transparent), borderRadius: Zeta.of(context).radius.full, diff --git a/lib/src/components/badges/label.dart b/lib/src/components/badges/label.dart index 1ba10300..19e24e5b 100644 --- a/lib/src/components/badges/label.dart +++ b/lib/src/components/badges/label.dart @@ -39,6 +39,7 @@ class ZetaLabel extends ZetaStatelessWidget { @override Widget build(BuildContext context) { final Color backgroundColor = status.labelBackgroundColor(context); + final Color foregroundColor = status.labelForegroundColor(context); return Semantics( label: semanticLabel ?? label, @@ -50,7 +51,7 @@ class ZetaLabel extends ZetaStatelessWidget { ), child: Text( label, - style: ZetaTextStyles.labelSmall.apply(color: backgroundColor.onColor), + style: ZetaTextStyles.labelSmall.apply(color: foregroundColor), overflow: TextOverflow.ellipsis, ), ), @@ -73,15 +74,28 @@ extension on ZetaWidgetStatus { final colors = Zeta.of(context).colors; switch (this) { case ZetaWidgetStatus.info: - return colors.surfaceInfo; + return colors.surface.info; case ZetaWidgetStatus.positive: - return colors.surfacePositive; + return colors.surface.positive; case ZetaWidgetStatus.warning: - return colors.surfaceWarning.shade40; + return colors.surface.warning; case ZetaWidgetStatus.negative: - return colors.surfaceNegative; + return colors.surface.negative; case ZetaWidgetStatus.neutral: - return colors.cool.shade30; + return colors.main.light; + } + } + + Color labelForegroundColor(BuildContext context) { + final colors = Zeta.of(context).colors; + switch (this) { + case ZetaWidgetStatus.info: + case ZetaWidgetStatus.positive: + case ZetaWidgetStatus.warning: + case ZetaWidgetStatus.negative: + return colors.main.inverse; + case ZetaWidgetStatus.neutral: + return colors.main.defaultColor; } } } diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart index 707878eb..45c7bfb8 100644 --- a/lib/src/components/badges/priority_pill.dart +++ b/lib/src/components/badges/priority_pill.dart @@ -30,17 +30,31 @@ enum ZetaPriorityPillSize { } extension on ZetaPriorityPillType { - ZetaColorSwatch color(BuildContext context) { + Color badgeColor(BuildContext context) { final colors = Zeta.of(context).colors; switch (this) { case ZetaPriorityPillType.urgent: - return colors.red; + return colors.main.negative; case ZetaPriorityPillType.high: - return colors.orange; + return colors.main.warning; case ZetaPriorityPillType.medium: - return colors.blue; + return colors.main.primary; case ZetaPriorityPillType.low: - return colors.green; + return colors.main.positive; + } + } + + Color lozengeColor(BuildContext context) { + final colors = Zeta.of(context).colors; + switch (this) { + case ZetaPriorityPillType.urgent: + return colors.surface.negativeSubtle; + case ZetaPriorityPillType.high: + return colors.surface.warningSubtle; + case ZetaPriorityPillType.medium: + return colors.surface.primarySubtle; + case ZetaPriorityPillType.low: + return colors.surface.positiveSubtle; } } } @@ -105,7 +119,9 @@ class ZetaPriorityPill extends ZetaStatelessWidget { @override Widget build(BuildContext context) { - final ZetaColorSwatch color = customColor ?? type.color(context); + final Color badgeColor = customColor?.shade60 ?? type.badgeColor(context); + final Color lozengeColor = customColor?.shade10 ?? type.lozengeColor(context); + final size = this.size == ZetaPriorityPillSize.small ? Zeta.of(context).spacing.xl : Zeta.of(context).spacing.xl_3; final label = (this.label ?? priority) ?? type.name.capitalize(); final rounded = context.rounded; @@ -115,7 +131,7 @@ class ZetaPriorityPill extends ZetaStatelessWidget { child: DecoratedBox( decoration: BoxDecoration( borderRadius: rounded ? Zeta.of(context).radius.full : Zeta.of(context).radius.none, - color: color.shade10, + color: lozengeColor, ), child: Row( mainAxisSize: MainAxisSize.min, @@ -126,7 +142,7 @@ class ZetaPriorityPill extends ZetaStatelessWidget { width: size, decoration: BoxDecoration( shape: rounded ? BoxShape.circle : BoxShape.rectangle, - color: color, + color: badgeColor, ), child: Text( (index?.isEmpty ?? true) @@ -138,9 +154,9 @@ class ZetaPriorityPill extends ZetaStatelessWidget { ? ZetaTextStyles.labelSmall.copyWith( fontSize: 10, height: 13 / 10, - color: color.onColor, + color: Zeta.of(context).colors.main.inverse, ) - : ZetaTextStyles.labelMedium.apply(color: color.onColor), + : ZetaTextStyles.labelMedium.apply(color: Zeta.of(context).colors.main.inverse), ), ), if (!isBadge) diff --git a/lib/src/components/badges/status_label.dart b/lib/src/components/badges/status_label.dart index f048a163..b3e59a93 100644 --- a/lib/src/components/badges/status_label.dart +++ b/lib/src/components/badges/status_label.dart @@ -34,14 +34,19 @@ class ZetaStatusLabel extends ZetaStatelessWidget { @override Widget build(BuildContext context) { - final ZetaColorSwatch colors = status.colorSwatch(context); + final colors = Zeta.of(context).colors; + + final Color backgroundColor = status.backgroundColor(colors); + final Color borderColor = status.borderColor(colors); + final Color iconColor = status.foregroundColor(colors); + final Color textColor = colors.main.defaultColor; return Semantics( value: semanticLabel ?? label, child: DecoratedBox( decoration: BoxDecoration( - color: colors.shade10, - border: Border.all(color: colors.border), + color: backgroundColor, + border: Border.all(color: borderColor), borderRadius: context.rounded ? Zeta.of(context).radius.full : Zeta.of(context).radius.none, ), child: Padding( @@ -55,12 +60,12 @@ class ZetaStatusLabel extends ZetaStatelessWidget { Icon( customIcon ?? Icons.circle, size: customIcon != null ? Zeta.of(context).spacing.xl : Zeta.of(context).spacing.small, - color: colors.icon, + color: iconColor, ), SizedBox(width: Zeta.of(context).spacing.small), Text( label, - style: ZetaTextStyles.bodyMedium.apply(color: colors.shade10.onColor), + style: ZetaTextStyles.bodyMedium.apply(color: textColor), overflow: TextOverflow.ellipsis, ), ], @@ -81,3 +86,54 @@ class ZetaStatusLabel extends ZetaStatelessWidget { ..add(StringProperty('semanticLabel', semanticLabel)); } } + +/// Extensions on [ZetaWidgetStatus]. +extension on ZetaWidgetStatus { + /// Gets background color from [ZetaWidgetStatus]. + Color backgroundColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaWidgetStatus.info: + return colors.surface.infoSubtle; + case ZetaWidgetStatus.positive: + return colors.surface.positiveSubtle; + case ZetaWidgetStatus.warning: + return colors.surface.warningSubtle; + case ZetaWidgetStatus.negative: + return colors.surface.negativeSubtle; + case ZetaWidgetStatus.neutral: + return colors.main.light; + } + } + + /// Gets foreground color from [ZetaWidgetStatus]. + Color foregroundColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaWidgetStatus.info: + return colors.main.info; + case ZetaWidgetStatus.positive: + return colors.main.positive; + case ZetaWidgetStatus.warning: + return colors.main.warning; + case ZetaWidgetStatus.negative: + return colors.main.negative; + case ZetaWidgetStatus.neutral: + return colors.main.subtle; + } + } + + /// Gets border color from [ZetaWidgetStatus]. + Color borderColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaWidgetStatus.info: + return colors.border.info; + case ZetaWidgetStatus.positive: + return colors.border.positive; + case ZetaWidgetStatus.warning: + return colors.border.warning; + case ZetaWidgetStatus.negative: + return colors.border.negative; + case ZetaWidgetStatus.neutral: + return colors.border.defaultColor; + } + } +} diff --git a/lib/src/components/badges/tag.dart b/lib/src/components/badges/tag.dart index 75aa24ed..b3e2dc57 100644 --- a/lib/src/components/badges/tag.dart +++ b/lib/src/components/badges/tag.dart @@ -59,7 +59,7 @@ class ZetaTag extends ZetaStatelessWidget { if (direction == ZetaTagDirection.left) _buildCustomPaint(context), Container( decoration: BoxDecoration( - color: Zeta.of(context).colors.surfaceHover, + color: Zeta.of(context).colors.main.light, borderRadius: _getBorderRadius(context), ), height: containerSize.height, @@ -97,7 +97,7 @@ class ZetaTag extends ZetaStatelessWidget { return CustomPaint( size: Size(Zeta.of(context).spacing.medium, Zeta.of(context).spacing.xl_3), painter: _TagPainter( - color: Zeta.of(context).colors.surfaceHover, + color: Zeta.of(context).colors.main.light, direction: direction, rounded: context.rounded, ), diff --git a/lib/src/components/banner/banner.dart b/lib/src/components/banner/banner.dart index bde064d1..4dc84a74 100644 --- a/lib/src/components/banner/banner.dart +++ b/lib/src/components/banner/banner.dart @@ -61,73 +61,74 @@ class ZetaBanner extends MaterialBanner { String? semanticLabel, }) : super( dividerColor: Colors.transparent, - content: Builder( - builder: (context) { - final backgroundColor = _backgroundColorFromType(context, type); - final foregroundColor = backgroundColor.onColor; - if (!kIsWeb && Platform.isAndroid && context.mounted) { - // ignore: invalid_use_of_visible_for_testing_member - final statusBarColor = SystemChrome.latestStyle?.statusBarColor; - if (statusBarColor != backgroundColor) { - SystemChrome.setSystemUIOverlayStyle( - SystemUiOverlayStyle( - statusBarColor: backgroundColor, - systemNavigationBarIconBrightness: backgroundColor.isDark ? Brightness.light : Brightness.dark, - ), - ); - } + content: () { + final colors = Zeta.of(context).colors; + final backgroundColor = type.backgroundColor(context); + final foregroundColor = colors.main.inverse; + + if (!kIsWeb && Platform.isAndroid && context.mounted) { + // ignore: invalid_use_of_visible_for_testing_member + final statusBarColor = SystemChrome.latestStyle?.statusBarColor; + if (statusBarColor != backgroundColor) { + SystemChrome.setSystemUIOverlayStyle( + SystemUiOverlayStyle( + statusBarColor: backgroundColor, + systemNavigationBarIconBrightness: Brightness.light, + ), + ); } - - return ZetaRoundedScope( - rounded: rounded ?? context.rounded, - child: Semantics( - label: semanticLabel ?? title, - child: DefaultTextStyle( - style: ZetaTextStyles.labelLarge.copyWith( - color: foregroundColor, - overflow: TextOverflow.ellipsis, - ), - child: Row( - mainAxisAlignment: titleStart ? MainAxisAlignment.center : MainAxisAlignment.start, - children: [ - if (leadingIcon != null) - Padding( - padding: EdgeInsets.only(right: Zeta.of(context).spacing.small), - child: Icon( - leadingIcon, - color: foregroundColor, - size: Zeta.of(context).spacing.xl_2, - ), + } + + return ZetaRoundedScope( + rounded: rounded ?? context.rounded, + child: Semantics( + label: semanticLabel ?? title, + child: DefaultTextStyle( + style: ZetaTextStyles.labelLarge.copyWith( + color: foregroundColor, + overflow: TextOverflow.ellipsis, + ), + child: Row( + mainAxisAlignment: titleStart ? MainAxisAlignment.center : MainAxisAlignment.start, + children: [ + if (leadingIcon != null) + Padding( + padding: EdgeInsets.only(right: Zeta.of(context).spacing.small), + child: Icon( + leadingIcon, + color: foregroundColor, + size: Zeta.of(context).spacing.xl_2, ), - Flexible(child: Text(title)), - ], - ), + ), + Flexible(child: Text(title)), + ], ), ), - ); - }, - ), - backgroundColor: _backgroundColorFromType(context, type), + ), + ); + }(), + backgroundColor: type.backgroundColor(context), actions: [ IconTheme( - data: IconThemeData(color: _backgroundColorFromType(context, type).onColor), + data: IconThemeData(color: Zeta.of(context).colors.main.inverse), child: trailing ?? const Nothing(), ), ], ); +} - static ZetaColorSwatch _backgroundColorFromType(BuildContext context, ZetaBannerStatus type) { - final zeta = Zeta.of(context); - - switch (type) { +extension on ZetaBannerStatus { + Color backgroundColor(BuildContext context) { + final colors = Zeta.of(context).colors; + switch (this) { case ZetaBannerStatus.primary: - return zeta.colors.primary; + return colors.surface.primary; case ZetaBannerStatus.positive: - return zeta.colors.surfacePositive; + return colors.surface.positive; case ZetaBannerStatus.warning: - return zeta.colors.orange; + return colors.surface.warning; case ZetaBannerStatus.negative: - return zeta.colors.surfaceNegative; + return colors.surface.negative; } } } diff --git a/lib/src/components/bottom sheets/bottom_sheet.dart b/lib/src/components/bottom sheets/bottom_sheet.dart index 964eae6d..6b745cfc 100644 --- a/lib/src/components/bottom sheets/bottom_sheet.dart +++ b/lib/src/components/bottom sheets/bottom_sheet.dart @@ -44,7 +44,7 @@ class ZetaBottomSheet extends ZetaStatelessWidget { Zeta.of(context).spacing.xl, ), decoration: BoxDecoration( - color: colors.surfaceSecondary, + color: colors.surface.defaultColor, borderRadius: BorderRadius.only( topLeft: Radius.circular(Zeta.of(context).spacing.xl_2), topRight: Radius.circular(Zeta.of(context).spacing.xl_2), @@ -61,7 +61,7 @@ class ZetaBottomSheet extends ZetaStatelessWidget { child: ZetaIcon( Icons.maximize, size: Zeta.of(context).spacing.xl_9, - color: colors.surfaceDisabled, + color: colors.surface.disabled, ), ), ), @@ -81,7 +81,7 @@ class ZetaBottomSheet extends ZetaStatelessWidget { ), ), Material( - color: colors.surfaceSecondary, + color: colors.surface.defaultColor, child: body ?? const Nothing(), ), ], diff --git a/lib/src/components/bottom sheets/menu_items.dart b/lib/src/components/bottom sheets/menu_items.dart index 848e10f5..31a31f7f 100644 --- a/lib/src/components/bottom sheets/menu_items.dart +++ b/lib/src/components/bottom sheets/menu_items.dart @@ -83,7 +83,7 @@ class ZetaMenuItem extends ZetaStatelessWidget { final colors = Zeta.of(context).colors; final Widget text = DefaultTextStyle( - style: ZetaTextStyles.labelLarge.apply(color: _enabled ? colors.textDefault : colors.textDisabled), + style: ZetaTextStyles.labelLarge.apply(color: _enabled ? colors.main.defaultColor : colors.main.disabled), child: label, ); @@ -151,8 +151,8 @@ class ZetaMenuItem extends ZetaStatelessWidget { ); } - static IconThemeData _iconThemeData(ZetaColors colors, bool enabled, double size) => IconThemeData( - color: enabled ? colors.iconSubtle : colors.iconDisabled, + static IconThemeData _iconThemeData(ZetaSemanticColors colors, bool enabled, double size) => IconThemeData( + color: enabled ? colors.main.subtle : colors.main.disabled, size: size, ); diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart index e2f7fad5..6d2aa2b7 100644 --- a/lib/src/components/breadcrumbs/breadcrumbs.dart +++ b/lib/src/components/breadcrumbs/breadcrumbs.dart @@ -195,6 +195,8 @@ class _ZetaBreadCrumbState extends State { @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; + + final foregroundColor = getColor(controller.value, colors); return Semantics( label: widget.semanticLabel ?? widget.label, selected: widget.isSelected, @@ -211,14 +213,12 @@ class _ZetaBreadCrumbState extends State { if (widget.isSelected) Icon( widget.activeIcon ?? ZetaIcons.star_round, - color: getColor(controller.value, colors), + color: foregroundColor, ), - SizedBox( - width: Zeta.of(context).spacing.small, - ), + SizedBox(width: Zeta.of(context).spacing.small), Text( widget.label, - style: ZetaTextStyles.bodySmall.apply(color: getColor(controller.value, colors)), + style: ZetaTextStyles.bodySmall.apply(color: foregroundColor), ), ], ), @@ -227,12 +227,12 @@ class _ZetaBreadCrumbState extends State { } /// Get color of breadcrumb based on state. - Color getColor(Set states, ZetaColors colors) { + Color getColor(Set states, ZetaSemanticColors colors) { if (states.contains(WidgetState.hovered)) { - return colors.blue; + return colors.main.primary; } - if (widget.isSelected) return colors.black; - return colors.textSubtle; + if (widget.isSelected) return colors.main.defaultColor; + return colors.main.subtle; } @override @@ -297,21 +297,21 @@ class _BreadCrumbsTruncatedState extends State<_BreadCrumbsTruncated> { style: ButtonStyle( backgroundColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.hovered)) { - return colors.surfaceHover; + return colors.surface.hover; } if (states.contains(WidgetState.pressed)) { - return colors.primary.shade10; + return colors.surface.selected; } if (states.contains(WidgetState.disabled)) { - return colors.surfaceDisabled; + return colors.surface.disabled; } - return colors.warm.shade10; + return colors.surface.warm; }), foregroundColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.disabled)) { - return colors.textDisabled; + return colors.main.disabled; } - return colors.textDefault; + return colors.main.defaultColor; }), shape: WidgetStatePropertyAll( RoundedRectangleBorder( @@ -321,14 +321,18 @@ class _BreadCrumbsTruncatedState extends State<_BreadCrumbsTruncated> { side: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.focused)) { return BorderSide( - width: ZetaBorders.borderWidth, - color: colors.primary.shade100, + width: ZetaBorders.medium, + color: colors.border.primary, ); } - if (states.isEmpty) { - return BorderSide(color: colors.borderDefault, width: 0.5); + if (states.contains(WidgetState.hovered)) { + return BorderSide(color: colors.border.hover, width: ZetaBorders.small); + } + if (states.contains(WidgetState.pressed)) { + return BorderSide(color: colors.border.selected, width: ZetaBorders.small); } - return null; + + return BorderSide(color: colors.border.defaultColor, width: ZetaBorders.small); }), padding: WidgetStateProperty.all(EdgeInsets.zero), minimumSize: WidgetStateProperty.all(Size.zero), diff --git a/lib/src/components/button_group/button_group.dart b/lib/src/components/button_group/button_group.dart index e3274e4c..e6915d30 100644 --- a/lib/src/components/button_group/button_group.dart +++ b/lib/src/components/button_group/button_group.dart @@ -234,17 +234,18 @@ class _ZetaGroupButtonState extends State { double get _padding => widget.isLarge ? Zeta.of(context).spacing.large : Zeta.of(context).spacing.medium; BorderSide _getBorderSide( - ZetaColors colors, + ZetaSemanticColors colors, bool finalButton, ) { + // TODO(UX-1200): Focus border does not work as expected. if (_controller.value.contains(WidgetState.focused)) { - return BorderSide(color: colors.blue.shade50, width: ZetaBorders.borderWidth); + return BorderSide(color: colors.border.primary, width: ZetaBorders.medium); } if (_controller.value.contains(WidgetState.disabled)) { - return BorderSide(color: colors.cool.shade40); + return BorderSide(color: colors.border.disabled); } return BorderSide( - color: finalButton ? colors.borderDefault : colors.borderSubtle, + color: finalButton ? colors.border.defaultColor : colors.border.subtle, ); } @@ -303,7 +304,7 @@ class _ZetaGroupButtonState extends State { left: borderSide, bottom: borderSide, right: _controller.value.contains(WidgetState.focused) - ? BorderSide(color: colors.blue.shade50, width: 2) + ? BorderSide(color: colors.border.primary, width: 2) : (widget.isFinal) ? borderSide : BorderSide.none, @@ -323,24 +324,24 @@ class _ZetaGroupButtonState extends State { ), backgroundColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.disabled)) { - return colors.surfaceDisabled; + return colors.surface.disabled; } if (states.contains(WidgetState.pressed)) { - return widget.isInverse ? colors.cool.shade100 : colors.primary.shade10; + return widget.isInverse ? colors.state.inverse.selected : colors.state.defaultColor.selected; } if (states.contains(WidgetState.hovered)) { - return widget.isInverse ? colors.cool.shade90 : colors.cool.shade20; + return widget.isInverse ? colors.state.inverse.hover : colors.surface.hover; } - if (widget.isInverse) return colors.cool.shade100; + if (widget.isInverse) return colors.state.inverse.enabled; - return colors.surfacePrimary; + return colors.surface.defaultColor; }), foregroundColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.disabled)) { - return colors.textDisabled; + return colors.main.disabled; } - if (widget.isInverse) return colors.cool.shade100.onColor; - return colors.textDefault; + if (widget.isInverse) return colors.main.inverse; + return colors.main.defaultColor; }), elevation: WidgetStatePropertyAll(Zeta.of(context).spacing.none), padding: WidgetStateProperty.all(EdgeInsets.zero), diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart index 031ea4a2..cd18c99c 100644 --- a/lib/src/components/buttons/button.dart +++ b/lib/src/components/buttons/button.dart @@ -186,7 +186,6 @@ class ZetaButton extends ZetaStatelessWidget { context, borderType ?? (context.rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp), type, - null, ), child: SelectionContainer.disabled( child: Row( diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index 4aeee30b..452212ed 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -36,21 +36,57 @@ enum ZetaButtonType { /// Button utility functions for styling extension ButtonFunctions on ZetaButtonType { - /// Returns color based on [ZetaButtonType] - ZetaColorSwatch color(ZetaColors colors) { + /// Returns background color based on [ZetaButtonType] + Color backgroundColor(ZetaColorSemantics colors) { switch (this) { + case ZetaButtonType.primary: + return colors.state.primary.enabled; case ZetaButtonType.secondary: - return colors.secondary; + return colors.state.secondary.enabled; case ZetaButtonType.positive: - return colors.surfacePositive; + return colors.state.positive.enabled; case ZetaButtonType.negative: - return colors.surfaceNegative; + return colors.state.negative.enabled; case ZetaButtonType.outline: + case ZetaButtonType.outlineSubtle: + case ZetaButtonType.text: + return colors.state.defaultColor.enabled; + } + } + + /// Returns hover color based on [ZetaButtonType] + Color hoverColor(ZetaColorSemantics colors) { + switch (this) { case ZetaButtonType.primary: - return colors.primary; + return colors.state.primary.hover; + case ZetaButtonType.secondary: + return colors.state.secondary.hover; + case ZetaButtonType.positive: + return colors.state.positive.hover; + case ZetaButtonType.negative: + return colors.state.negative.hover; + case ZetaButtonType.outline: case ZetaButtonType.outlineSubtle: case ZetaButtonType.text: - return colors.cool; + return colors.state.defaultColor.hover; + } + } + + /// Returns pressed color based on [ZetaButtonType] + Color pressedColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaButtonType.primary: + return colors.state.primary.selected; + case ZetaButtonType.secondary: + return colors.state.secondary.selected; + case ZetaButtonType.positive: + return colors.state.positive.selected; + case ZetaButtonType.negative: + return colors.state.negative.selected; + case ZetaButtonType.outline: + case ZetaButtonType.outlineSubtle: + case ZetaButtonType.text: + return colors.state.defaultColor.selected; } } @@ -81,13 +117,11 @@ ButtonStyle buttonStyle( BuildContext context, ZetaWidgetBorder borderType, ZetaButtonType type, - Color? backgroundColor, ) { - final ZetaColors colors = Zeta.of(context).colors; - final ZetaColorSwatch color = - backgroundColor != null ? ZetaColorSwatch.fromColor(backgroundColor) : type.color(colors); - - final bool isSolid = type.solid || backgroundColor != null; + final ZetaColorSemantics colors = Zeta.of(context).colors; + final Color backgroundColor = type.backgroundColor(colors); + final Color backgroundColorHover = type.hoverColor(colors); + final Color backgroundColorPressed = type.pressedColor(colors); return ButtonStyle( minimumSize: WidgetStateProperty.all(Size.square(Zeta.of(context).spacing.xl_4)), @@ -97,34 +131,33 @@ ButtonStyle buttonStyle( backgroundColor: WidgetStateProperty.resolveWith( (states) { if (states.contains(WidgetState.disabled)) { - return colors.surfaceDisabled; + return colors.state.disabled.disabled; } if (states.contains(WidgetState.pressed)) { - return isSolid ? color.shade70 : colors.primary.shade10; + return backgroundColorPressed; } if (states.contains(WidgetState.hovered)) { - return isSolid ? color.shade50 : colors.cool.shade20; + return backgroundColorHover; } - if (backgroundColor != null) return backgroundColor; - return isSolid ? color : colors.surfacePrimary; + return backgroundColor; }, ), foregroundColor: WidgetStateProperty.resolveWith( (states) { if (states.contains(WidgetState.disabled)) { - return colors.textDisabled; + return colors.main.disabled; } switch (type) { case ZetaButtonType.outline: case ZetaButtonType.text: - return colors.primary; + return colors.main.primary; case ZetaButtonType.outlineSubtle: - return colors.textDefault; + return colors.main.defaultColor; case ZetaButtonType.primary: case ZetaButtonType.secondary: case ZetaButtonType.positive: case ZetaButtonType.negative: - return color.onColor; + return colors.main.inverse; } }, ), @@ -133,15 +166,15 @@ ButtonStyle buttonStyle( }), side: WidgetStateProperty.resolveWith((Set states) { if (type.border && states.contains(WidgetState.disabled)) { - return BorderSide(color: colors.borderDisabled); + return BorderSide(color: colors.border.disabled); } // TODO(UX-1134): This removes a defualt border when focused, rather than adding a second border when focused. if (states.contains(WidgetState.focused)) { - return BorderSide(color: colors.blue, width: ZetaBorders.borderWidth); + return BorderSide(color: colors.border.primary, width: ZetaBorders.medium); } if (type.border) { return BorderSide( - color: type == ZetaButtonType.outline ? colors.primary.border : colors.borderSubtle, + color: type == ZetaButtonType.outline ? colors.border.primaryMain : colors.border.subtle, ); } diff --git a/lib/src/components/buttons/icon_button.dart b/lib/src/components/buttons/icon_button.dart index 2449b73b..27cea181 100644 --- a/lib/src/components/buttons/icon_button.dart +++ b/lib/src/components/buttons/icon_button.dart @@ -129,7 +129,6 @@ class ZetaIconButton extends ZetaStatelessWidget { context, borderType ?? (context.rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp), type, - null, ), child: SelectionContainer.disabled( child: ZetaIcon(icon, size: _iconSize(context)).paddingAll(_iconPadding(context)), diff --git a/lib/src/components/buttons/input_icon_button.dart b/lib/src/components/buttons/input_icon_button.dart index 4c6695a4..065f22f9 100644 --- a/lib/src/components/buttons/input_icon_button.dart +++ b/lib/src/components/buttons/input_icon_button.dart @@ -66,7 +66,7 @@ class InputIconButton extends StatelessWidget { minHeight: iconSize * 2, minWidth: iconSize * 2, ), - color: !disabled ? color : colors.iconDisabled, + color: !disabled ? color : colors.main.disabled, onPressed: disabled ? null : onTap, iconSize: iconSize, icon: ZetaIcon(icon), diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart index 654b73d7..1729db40 100644 --- a/lib/src/components/chat_item/chat_item.dart +++ b/lib/src/components/chat_item/chat_item.dart @@ -1,5 +1,4 @@ // ignore_for_file: deprecated_member_use_from_same_package - import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; @@ -134,22 +133,16 @@ class ZetaChatItem extends ZetaStatelessWidget { // coverage:ignore-start if (onMenuMoreTap != null) { - actions.add( - ZetaSlidableAction(onPressed: onMenuMoreTap, color: colors.purple, icon: ZetaIcons.more_vertical), - ); + actions.add(ZetaSlidableAction.menuMore(onPressed: onMenuMoreTap)); } if (onCallTap != null) { - actions.add( - ZetaSlidableAction(onPressed: onCallTap, color: colors.green, icon: ZetaIcons.phone), - ); + actions.add(ZetaSlidableAction.call(onPressed: onCallTap)); } if (onPttTap != null) { - actions.add( - ZetaSlidableAction(onPressed: onPttTap, color: colors.blue, icon: ZetaIcons.ptt), - ); + actions.add(ZetaSlidableAction.ptt(onPressed: onPttTap)); } if (onDeleteTap != null) { - actions.add(ZetaSlidableAction(onPressed: onDeleteTap, color: colors.red, icon: ZetaIcons.delete)); + actions.add(ZetaSlidableAction.delete(onPressed: onDeleteTap)); } // coverage:ignore-end @@ -176,7 +169,7 @@ class ZetaChatItem extends ZetaStatelessWidget { : actions, ), child: ColoredBox( - color: highlighted ? colors.blue.shade10 : colors.surfacePrimary, + color: highlighted ? colors.surface.selected : colors.surface.defaultColor, child: Material( color: Colors.transparent, child: InkWell( @@ -205,7 +198,10 @@ class ZetaChatItem extends ZetaStatelessWidget { margin: EdgeInsets.only(right: Zeta.of(context).spacing.minimum), height: Zeta.of(context).spacing.small, width: Zeta.of(context).spacing.small, - decoration: BoxDecoration(color: colors.primary, shape: BoxShape.circle), + decoration: BoxDecoration( + color: colors.main.primary, + shape: BoxShape.circle, + ), ), Flexible( child: Row( @@ -218,7 +214,7 @@ class ZetaChatItem extends ZetaStatelessWidget { style: (highlighted ? ZetaTextStyles.labelLarge : ZetaTextStyles.bodyMedium) - .copyWith(color: colors.textDefault), + .copyWith(color: colors.main.defaultColor), child: title, ), ), @@ -243,7 +239,7 @@ class ZetaChatItem extends ZetaStatelessWidget { ), child: ZetaIcon( ZetaIcons.error, - color: colors.cool.shade70, + color: colors.main.subtle, ), ), if (enabledWarningIcon) @@ -253,7 +249,7 @@ class ZetaChatItem extends ZetaStatelessWidget { ), child: Icon( Icons.circle_notifications, - color: colors.surfaceNegative, + color: colors.surface.negative, ), ), if (_count != null) @@ -265,13 +261,13 @@ class ZetaChatItem extends ZetaStatelessWidget { horizontal: Zeta.of(context).spacing.small, ), decoration: BoxDecoration( - color: colors.primary, + color: colors.main.primary, borderRadius: Zeta.of(context).radius.full, ), child: Text( _count!, style: ZetaTextStyles.labelSmall.copyWith( - color: colors.textInverse, + color: colors.main.inverse, ), ), ), @@ -294,7 +290,7 @@ class ZetaChatItem extends ZetaStatelessWidget { maxLines: 2, overflow: TextOverflow.ellipsis, style: ZetaTextStyles.bodySmall.copyWith( - color: colors.textSubtle, + color: colors.main.subtle, ), child: subtitle!, ), @@ -306,7 +302,7 @@ class ZetaChatItem extends ZetaStatelessWidget { ), child: ZetaIcon( starred! ? ZetaIcons.star : ZetaIcons.star_outline, - color: starred! ? colors.yellow.shade60 : null, + color: starred! ? colors.main.secondary : null, ), ), ], @@ -354,19 +350,59 @@ class ZetaChatItem extends ZetaStatelessWidget { enum _ZetaSlidableActionType { menuMore, call, ptt, delete, custom } extension on _ZetaSlidableActionType { - ZetaColorSwatch getColor(BuildContext context) { + Color _getMainColor(BuildContext context) { final colors = Zeta.of(context).colors; switch (this) { case _ZetaSlidableActionType.menuMore: - return colors.purple; + return colors.surface.info; case _ZetaSlidableActionType.call: - return colors.green; + return colors.surface.positive; case _ZetaSlidableActionType.ptt: - return colors.blue; + return colors.surface.primary; case _ZetaSlidableActionType.delete: - return colors.red; + return colors.surface.negative; case _ZetaSlidableActionType.custom: - return colors.primary; + return colors.surface.primary; + } + } + + Color getBackgroundColor(BuildContext context, {bool pale = false}) { + final colors = Zeta.of(context).colors; + if (pale) { + switch (this) { + case _ZetaSlidableActionType.menuMore: + return colors.surface.infoSubtle; + case _ZetaSlidableActionType.call: + return colors.surface.positiveSubtle; + case _ZetaSlidableActionType.ptt: + return colors.surface.primarySubtle; + case _ZetaSlidableActionType.delete: + return colors.surface.negativeSubtle; + case _ZetaSlidableActionType.custom: + return colors.surface.primarySubtle; + } + } else { + return _getMainColor(context); + } + } + + Color getForegroundColor(BuildContext context, {bool pale = false}) { + final colors = Zeta.of(context).colors; + if (pale) { + switch (this) { + case _ZetaSlidableActionType.menuMore: + return colors.surface.info; + case _ZetaSlidableActionType.call: + return colors.surface.positive; + case _ZetaSlidableActionType.ptt: + return colors.surface.primary; + case _ZetaSlidableActionType.delete: + return colors.surface.negative; + case _ZetaSlidableActionType.custom: + return colors.surface.primary; + } + } else { + return colors.surface.defaultColor; } } } @@ -378,16 +414,12 @@ class ZetaSlidableAction extends StatelessWidget { super.key, this.onPressed, required this.icon, - this.color = ZetaColorBase.blue, + this.color, this.customForegroundColor, this.customBackgroundColor, this.semanticLabel, this.paleColor = false, - }) : _type = _ZetaSlidableActionType.custom, - assert( - color != null || (customForegroundColor != null && customBackgroundColor != null), - 'Ensure either color, or both customForegroundColor and customBackgroundColor are provided.', - ); + }) : _type = _ZetaSlidableActionType.custom; const ZetaSlidableAction._({ super.key, @@ -488,6 +520,19 @@ class ZetaSlidableAction extends StatelessWidget { @override Widget build(BuildContext context) { + final Color backgroundColor = customBackgroundColor ?? + (color != null + ? paleColor + ? color!.shade10 + : color!.shade60 + : _type.getBackgroundColor(context, pale: paleColor)); + final Color foregroundColor = customForegroundColor ?? + (color != null + ? paleColor + ? Zeta.of(context).colors.surface.defaultColor + : color!.shade10 + : _type.getForegroundColor(context, pale: paleColor)); + return Expanded( child: SizedBox.expand( child: Padding( @@ -500,9 +545,8 @@ class ZetaSlidableAction extends StatelessWidget { child: IconButton( onPressed: () => onPressed?.call(), style: IconButton.styleFrom( - backgroundColor: customBackgroundColor ?? (color ?? _type.getColor(context)).shade(paleColor ? 10 : 60), - foregroundColor: customForegroundColor ?? - (paleColor ? (color ?? _type.getColor(context)).shade60 : Zeta.of(context).colors.surfaceDefault), + backgroundColor: backgroundColor, + foregroundColor: foregroundColor, shape: RoundedRectangleBorder(borderRadius: Zeta.of(context).radius.minimal), side: BorderSide.none, ), diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart index 7a70e67d..00237b0c 100644 --- a/lib/src/components/checkbox/checkbox.dart +++ b/lib/src/components/checkbox/checkbox.dart @@ -219,7 +219,7 @@ class _CheckboxState extends State { ? const Nothing() : ZetaIcon( widget.useIndeterminate ? ZetaIcons.remove : ZetaIcons.check_mark, - color: widget.disabled ? theme.colors.iconDisabled : theme.colors.white, + color: widget.disabled ? theme.colors.main.disabled : theme.colors.main.inverse, size: 14, // TODO(UX-1202): ZetaSpacingBase ); @@ -235,7 +235,7 @@ class _CheckboxState extends State { BoxShadow( spreadRadius: 2, blurStyle: BlurStyle.solid, - color: theme.colors.blue.shade50, + color: theme.colors.border.primary, ), ], color: _getBackground(theme), @@ -258,12 +258,11 @@ class _CheckboxState extends State { } Color _getBackground(Zeta theme) { - final ZetaColorSwatch color = widget.error ? theme.colors.error : theme.colors.primary; - if (widget.disabled) return theme.colors.surfaceDisabled; - if (!_checked) return theme.colors.surfacePrimary; - if (_isHovered) return theme.colors.borderHover; + if (widget.disabled) return theme.colors.surface.disabled; + if (!_checked) return theme.colors.surface.defaultColor; + if (_isHovered) return theme.colors.main.defaultColor; - return color; + return theme.colors.main.primary; } Color _getBorderColor(Zeta theme) { @@ -271,9 +270,9 @@ class _CheckboxState extends State { return _getBackground(theme); } if (_isHovered) { - return theme.colors.cool.shade90; + return theme.colors.border.hover; } - return theme.colors.cool.shade70; + return theme.colors.main.subtle; } } diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart index 12ea4a16..bfeaad0d 100644 --- a/lib/src/components/chips/chip.dart +++ b/lib/src/components/chips/chip.dart @@ -120,7 +120,7 @@ class _ZetaChipState extends State { @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final foregroundColor = selected ? colors.textInverse : colors.textDefault; + final foregroundColor = selected ? colors.main.inverse : colors.main.defaultColor; return ZetaRoundedScope( rounded: context.rounded, @@ -172,7 +172,7 @@ class _ZetaChipState extends State { } ValueListenableBuilder> child( - ZetaColors colors, + ZetaSemanticColors colors, Color foregroundColor, { bool isDragging = false, }) { @@ -204,28 +204,30 @@ class _ZetaChipState extends State { decoration: BoxDecoration( color: () { if (states.contains(WidgetState.disabled)) { - return colors.surfaceDisabled; + return colors.surface.disabled; } if (selected) { if (states.contains(WidgetState.hovered)) { - return colors.borderHover; + return colors.border.hover; } - return colors.surfaceDefaultInverse; + return colors.surface.defaultInverse; } if (states.contains(WidgetState.pressed) || isDragging) { - return colors.surfaceSelected; + return colors.surface.selected; } if (states.contains(WidgetState.hovered)) { - return colors.surfaceHover; + return colors.surface.hover; } - return colors.surfacePrimary; + return colors.surface.defaultColor; }(), borderRadius: rounded ? Zeta.of(context).radius.full : Zeta.of(context).radius.none, border: Border.fromBorderSide( BorderSide( - color: _controller.value.contains(WidgetState.focused) ? colors.blue.shade50 : colors.borderDefault, + color: _controller.value.contains(WidgetState.focused) + ? colors.border.primary + : colors.border.defaultColor, width: _controller.value.contains(WidgetState.focused) - ? ZetaBorders.borderWidth + ? ZetaBorders.medium : !selected ? 1 : 0, @@ -242,7 +244,7 @@ class _ZetaChipState extends State { child: (selected ? ZetaIcon( ZetaIcons.check_mark, - color: widget.selected! ? colors.iconInverse : Colors.transparent, + color: widget.selected! ? colors.main.inverse : Colors.transparent, ) : const Nothing()), ) diff --git a/lib/src/components/contact_item/contact_item.dart b/lib/src/components/contact_item/contact_item.dart index 376f9546..c04864cc 100644 --- a/lib/src/components/contact_item/contact_item.dart +++ b/lib/src/components/contact_item/contact_item.dart @@ -45,10 +45,10 @@ class ZetaContactItem extends ZetaStatelessWidget { button: true, child: SelectionContainer.disabled( child: Material( - color: colors.surfacePrimary, + color: colors.surface.defaultColor, child: DecoratedBox( decoration: BoxDecoration( - border: enabledDivider ? Border(bottom: BorderSide(color: colors.borderDisabled)) : null, + border: enabledDivider ? Border(bottom: BorderSide(color: colors.border.disabled)) : null, ), child: InkWell( onTap: onTap, @@ -72,7 +72,7 @@ class ZetaContactItem extends ZetaStatelessWidget { children: [ DefaultTextStyle( style: ZetaTextStyles.bodyMedium.copyWith( - color: colors.textDefault, + color: colors.main.defaultColor, ), maxLines: 1, overflow: TextOverflow.ellipsis, @@ -80,7 +80,7 @@ class ZetaContactItem extends ZetaStatelessWidget { ), DefaultTextStyle( style: ZetaTextStyles.bodySmall.copyWith( - color: colors.textSubtle, + color: colors.main.subtle, ), maxLines: 1, overflow: TextOverflow.ellipsis, diff --git a/lib/src/components/date_input/date_input.dart b/lib/src/components/date_input/date_input.dart index 72515012..a71e95b1 100644 --- a/lib/src/components/date_input/date_input.dart +++ b/lib/src/components/date_input/date_input.dart @@ -65,7 +65,7 @@ class ZetaDateInput extends ZetaFormField { onTap: state.clear, disabled: disabled, size: size, - color: colors.iconSubtle, + color: colors.main.subtle, semanticLabel: clearSemanticLabel, ), InputIconButton( @@ -73,7 +73,7 @@ class ZetaDateInput extends ZetaFormField { onTap: state.pickDate, disabled: disabled, size: size, - color: colors.iconDefault, + color: colors.main.defaultColor, semanticLabel: datePickerSemanticLabel, ), ], @@ -233,14 +233,14 @@ class _ZetaDateInputState extends FormFieldState { builder: (BuildContext context, Widget? child) { return Theme( data: Theme.of(context).copyWith( - dividerTheme: DividerThemeData(color: colors.borderSubtle), + dividerTheme: DividerThemeData(color: colors.border.subtle), datePickerTheme: DatePickerThemeData( shape: RoundedRectangleBorder( borderRadius: rounded ? Zeta.of(context).radius.rounded : Zeta.of(context).radius.none, ), headerHeadlineStyle: ZetaTextStyles.titleLarge, headerHelpStyle: ZetaTextStyles.labelLarge, - dividerColor: colors.borderSubtle, + dividerColor: colors.border.subtle, dayStyle: ZetaTextStyles.bodyMedium, ), ), diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart index ebb059d0..199b609f 100644 --- a/lib/src/components/dial_pad/dial_pad.dart +++ b/lib/src/components/dial_pad/dial_pad.dart @@ -197,8 +197,8 @@ class ZetaDialPadButton extends StatelessWidget { height: Zeta.of(context).spacing.xl_9, decoration: ShapeDecoration( shape: const CircleBorder(), - color: colors.warm.shade10, - shadows: [BoxShadow(color: colors.black.withOpacity(0.15), blurRadius: 4, offset: const Offset(0, 2))], + color: colors.surface.warm, + shadows: [BoxShadow(color: Colors.black.withOpacity(0.15), blurRadius: 4, offset: const Offset(0, 2))], ), child: Material( color: Colors.transparent, @@ -207,10 +207,10 @@ class ZetaDialPadButton extends StatelessWidget { borderRadius: Zeta.of(context).radius.full, overlayColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.pressed)) { - return colors.surfaceSelectedHover; + return colors.surface.selectedHover; } if (states.contains(WidgetState.hovered)) { - return colors.surfaceHover; + return colors.surface.hover; } return null; }), diff --git a/lib/src/components/dialog/dialog.dart b/lib/src/components/dialog/dialog.dart index b39902eb..1efa8c1a 100644 --- a/lib/src/components/dialog/dialog.dart +++ b/lib/src/components/dialog/dialog.dart @@ -99,7 +99,7 @@ class _ZetaDialog extends ZetaStatelessWidget { return ZetaRoundedScope( rounded: context.rounded, child: AlertDialog( - surfaceTintColor: zeta.colors.surfacePrimary, + surfaceTintColor: zeta.colors.surface.defaultColor, shape: RoundedRectangleBorder(borderRadius: Zeta.of(context).radius.large), title: icon != null || title != null ? Column( @@ -133,7 +133,7 @@ class _ZetaDialog extends ZetaStatelessWidget { top: Zeta.of(context).spacing.xl_2, ), titleTextStyle: zetaTextTheme.headlineSmall?.copyWith( - color: zeta.colors.textDefault, + color: zeta.colors.main.defaultColor, ), content: Text(message), contentPadding: context.deviceType == DeviceType.mobilePortrait @@ -145,8 +145,8 @@ class _ZetaDialog extends ZetaStatelessWidget { bottom: Zeta.of(context).spacing.xl_2, ), contentTextStyle: context.deviceType == DeviceType.mobilePortrait - ? zetaTextTheme.bodySmall?.copyWith(color: zeta.colors.textDefault) - : zetaTextTheme.bodyMedium?.copyWith(color: zeta.colors.textDefault), + ? zetaTextTheme.bodySmall?.copyWith(color: zeta.colors.main.defaultColor) + : zetaTextTheme.bodyMedium?.copyWith(color: zeta.colors.main.defaultColor), actions: [ if (context.deviceType == DeviceType.mobilePortrait) Column( diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index 92143b38..39606696 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -488,7 +488,7 @@ class _DropdownItemState extends State<_DropdownItem> { Expanded( child: Text( widget.value.label, - style: ZetaTextStyles.bodyMedium.copyWith(color: colors.textDefault, height: 1.5), + style: ZetaTextStyles.bodyMedium.copyWith(color: colors.main.defaultColor, height: 1.5), ), ), ], @@ -522,29 +522,29 @@ class _DropdownItemState extends State<_DropdownItem> { } } - ButtonStyle _getStyle(ZetaColors colors) { + ButtonStyle _getStyle(ZetaSemanticColors colors) { return ButtonStyle( backgroundColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.disabled)) { - return colors.surfaceDisabled; + return colors.surface.disabled; } if (widget.selected) { - return colors.surfaceSelected; + return colors.surface.selected; } if (states.contains(WidgetState.pressed)) { - return colors.surfaceSelectedHover; + return colors.surface.selectedHover; } if (states.contains(WidgetState.hovered)) { - return colors.surfaceHover; + return colors.surface.hover; } - return colors.surfacePrimary; + return colors.surface.defaultColor; }), foregroundColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.disabled)) { - return colors.textDisabled; + return colors.main.disabled; } - return colors.textDefault; + return colors.main.defaultColor; }), shape: WidgetStateProperty.all( RoundedRectangleBorder( @@ -553,7 +553,7 @@ class _DropdownItemState extends State<_DropdownItem> { ), side: WidgetStateBorderSide.resolveWith((states) { if (states.contains(WidgetState.focused)) { - return BorderSide(color: colors.borderPrimary, width: Zeta.of(context).spacing.xl); + return BorderSide(color: colors.border.primary, width: Zeta.of(context).spacing.xl); } return BorderSide.none; }), @@ -624,7 +624,7 @@ class _ZetaDropDownMenuState extends State<_ZetaDropDownMenu> { return Container( padding: EdgeInsets.all(Zeta.of(context).spacing.medium), decoration: BoxDecoration( - color: colors.surfaceDefault, + color: colors.surface.defaultColor, borderRadius: context.rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, boxShadow: const [ BoxShadow(blurRadius: 2, color: Color.fromRGBO(40, 51, 61, 0.04)), diff --git a/lib/src/components/fabs/fab.dart b/lib/src/components/fabs/fab.dart index 2f946f4a..bc191b4a 100644 --- a/lib/src/components/fabs/fab.dart +++ b/lib/src/components/fabs/fab.dart @@ -110,8 +110,11 @@ class ZetaFAB extends StatefulWidget { class _ZetaFABState extends State { @override Widget build(BuildContext context) { - final colors = widget.type.colors(context); - final backgroundColor = widget.type == ZetaFabType.inverse ? colors.shade80 : colors.shade60; + final colors = Zeta.of(context).colors; + final Color backgroundColor = widget.type.backgroundColor(colors); + final Color foregroundColor = widget.type.foregroundColor(colors); + final Color backgroundColorHover = widget.type.hoverColor(colors); + final Color backgroundColorSelected = widget.type.selectedColor(colors); return FilledButton( onPressed: widget.onPressed, @@ -123,13 +126,13 @@ class _ZetaFABState extends State { ), backgroundColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.disabled)) { - return Zeta.of(context).colors.surfaceDisabled; + return colors.state.disabled.disabled; } if (states.contains(WidgetState.pressed)) { - return colors.selected; + return backgroundColorSelected; } if (states.contains(WidgetState.hovered)) { - return colors.hover; + return backgroundColorHover; } return backgroundColor; }), @@ -137,7 +140,7 @@ class _ZetaFABState extends State { (Set states) { if (states.contains(WidgetState.focused)) { // TODO(UX-1134): This removes a defualt border when focused, rather than adding a second border when focused. - return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaBorders.borderWidth); + return BorderSide(color: Zeta.of(context).colors.border.primary, width: ZetaBorders.medium); } return null; }, @@ -155,11 +158,15 @@ class _ZetaFABState extends State { child: Row( mainAxisSize: MainAxisSize.min, children: [ - ZetaIcon(widget.icon, size: widget.size.iconSize(context)), + ZetaIcon( + widget.icon, + size: widget.size.iconSize(context), + color: foregroundColor, + ), if (widget.expanded && widget.label != null) Row( mainAxisSize: MainAxisSize.min, - children: [Text(widget.label!, style: ZetaTextStyles.labelLarge)], + children: [Text(widget.label!, style: ZetaTextStyles.labelLarge.apply(color: foregroundColor))], ), ].divide(SizedBox(width: Zeta.of(context).spacing.small)).toList(), ), @@ -170,15 +177,46 @@ class _ZetaFABState extends State { } extension on ZetaFabType { - ZetaColorSwatch colors(BuildContext context) { - final zetaColors = Zeta.of(context).colors; + Color backgroundColor(ZetaColorSemantics colors) { switch (this) { case ZetaFabType.primary: - return zetaColors.primary; + return colors.state.primary.enabled; case ZetaFabType.secondary: - return zetaColors.secondary; + return colors.state.secondary.enabled; case ZetaFabType.inverse: - return zetaColors.cool; + return colors.state.inverse.enabled; + } + } + + Color foregroundColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaFabType.secondary: + return colors.main.defaultColor; + case ZetaFabType.primary: + case ZetaFabType.inverse: + return colors.main.inverse; + } + } + + Color hoverColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaFabType.primary: + return colors.state.primary.hover; + case ZetaFabType.secondary: + return colors.state.secondary.hover; + case ZetaFabType.inverse: + return colors.state.inverse.hover; + } + } + + Color selectedColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaFabType.primary: + return colors.state.primary.selected; + case ZetaFabType.secondary: + return colors.state.secondary.selected; + case ZetaFabType.inverse: + return colors.state.inverse.selected; } } } diff --git a/lib/src/components/filter_selection/filter_selection.dart b/lib/src/components/filter_selection/filter_selection.dart index 81728b86..d3e93ade 100644 --- a/lib/src/components/filter_selection/filter_selection.dart +++ b/lib/src/components/filter_selection/filter_selection.dart @@ -45,11 +45,14 @@ class ZetaFilterSelection extends ZetaStatelessWidget { enabled: onPressed != null, child: Container( height: Zeta.of(context).spacing.xl_7, - color: Zeta.of(context).colors.surfaceDefault, + color: Zeta.of(context).colors.surface.defaultColor, child: IconButton( visualDensity: VisualDensity.compact, onPressed: onPressed, - icon: ZetaIcon(icon, size: Zeta.of(context).spacing.xl_2), + icon: ZetaIcon( + icon, + size: Zeta.of(context).spacing.xl_2, + ), ), ), ), diff --git a/lib/src/components/global_header/global_header.dart b/lib/src/components/global_header/global_header.dart index 50830a34..58449708 100644 --- a/lib/src/components/global_header/global_header.dart +++ b/lib/src/components/global_header/global_header.dart @@ -80,7 +80,7 @@ class _GlobalHeaderState extends State { vertical: Zeta.of(context).spacing.medium, horizontal: Zeta.of(context).spacing.large, ), - decoration: BoxDecoration(color: colors.surfacePrimary), + decoration: BoxDecoration(color: colors.surface.defaultColor), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -113,7 +113,7 @@ class _GlobalHeaderState extends State { ), if (widget.onAppsButton != null) ...[ Container( - color: colors.borderDefault, + color: colors.border.defaultColor, width: 1, height: Zeta.of(context).spacing.xl_2, margin: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.minimum), @@ -175,7 +175,7 @@ class _GlobalHeaderState extends State { setState(() { _selectedIndex = index; }); - child.handlePress!.call(); + child.handlePress?.call(); }, ), ); diff --git a/lib/src/components/global_header/header_tab_item.dart b/lib/src/components/global_header/header_tab_item.dart index 787d4ace..1e2716c3 100644 --- a/lib/src/components/global_header/header_tab_item.dart +++ b/lib/src/components/global_header/header_tab_item.dart @@ -61,7 +61,7 @@ class _ZetaGlobalHeaderItemState extends State { Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final foregroundColor = widget.active! ? colors.primary : colors.textSubtle; + final foregroundColor = widget.active! ? colors.main.primary : colors.main.subtle; return ZetaRoundedScope( rounded: context.rounded, diff --git a/lib/src/components/in_page_banner/in_page_banner.dart b/lib/src/components/in_page_banner/in_page_banner.dart index 38f52592..7163a35d 100644 --- a/lib/src/components/in_page_banner/in_page_banner.dart +++ b/lib/src/components/in_page_banner/in_page_banner.dart @@ -43,16 +43,18 @@ class ZetaInPageBanner extends ZetaStatelessWidget { @override Widget build(BuildContext context) { final theme = Zeta.of(context); - final colors = status.colorSwatch(context); final hasTitle = title != null; final rounded = context.rounded; + final Color backgroundColor = status.backgroundColor(theme.colors); + final Color borderColor = status.borderColor(theme.colors); + final Color iconColor = status.foregroundColor(theme.colors); return ZetaRoundedScope( rounded: rounded, child: Container( decoration: BoxDecoration( - color: colors.surface, - border: Border.all(color: colors.border), + color: backgroundColor, + border: Border.all(color: borderColor), borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, ), padding: EdgeInsetsDirectional.only( @@ -73,7 +75,7 @@ class ZetaInPageBanner extends ZetaStatelessWidget { ZetaIcon( customIcon ?? status.icon, size: Zeta.of(context).spacing.xl, - color: status == ZetaWidgetStatus.neutral ? theme.colors.textDefault : colors.icon, + color: iconColor, ), SizedBox(width: Zeta.of(context).spacing.small), Expanded( @@ -86,7 +88,7 @@ class ZetaInPageBanner extends ZetaStatelessWidget { style: ZetaTextStyles.labelLarge.copyWith(height: 20 / 16), ).paddingBottom(Zeta.of(context).spacing.minimum), DefaultTextStyle( - style: ZetaTextStyles.bodySmall.apply(color: theme.colors.textDefault), + style: ZetaTextStyles.bodySmall.apply(color: theme.colors.main.defaultColor), child: content, ), if (actions.isNotEmpty) @@ -145,3 +147,54 @@ extension on ZetaWidgetStatus { } } } + +/// Extensions on [ZetaWidgetStatus]. +extension on ZetaWidgetStatus { + /// Gets background color from [ZetaWidgetStatus]. + Color backgroundColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaWidgetStatus.info: + return colors.surface.infoSubtle; + case ZetaWidgetStatus.positive: + return colors.surface.positiveSubtle; + case ZetaWidgetStatus.warning: + return colors.surface.warningSubtle; + case ZetaWidgetStatus.negative: + return colors.surface.negativeSubtle; + case ZetaWidgetStatus.neutral: + return colors.surface.defaultColor; + } + } + + /// Gets foreground color from [ZetaWidgetStatus]. + Color foregroundColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaWidgetStatus.info: + return colors.main.info; + case ZetaWidgetStatus.positive: + return colors.main.positive; + case ZetaWidgetStatus.warning: + return colors.main.warning; + case ZetaWidgetStatus.negative: + return colors.main.negative; + case ZetaWidgetStatus.neutral: + return colors.main.defaultColor; + } + } + + /// Gets border color from [ZetaWidgetStatus]. + Color borderColor(ZetaColorSemantics colors) { + switch (this) { + case ZetaWidgetStatus.info: + return colors.border.info; + case ZetaWidgetStatus.positive: + return colors.border.positive; + case ZetaWidgetStatus.warning: + return colors.border.warning; + case ZetaWidgetStatus.negative: + return colors.border.negative; + case ZetaWidgetStatus.neutral: + return colors.border.defaultColor; + } + } +} diff --git a/lib/src/components/list_item/dropdown_list_item.dart b/lib/src/components/list_item/dropdown_list_item.dart index 8e1f1576..59f63845 100644 --- a/lib/src/components/list_item/dropdown_list_item.dart +++ b/lib/src/components/list_item/dropdown_list_item.dart @@ -128,7 +128,7 @@ class _ZetaDropdownListItemState extends State with Single decoration: BoxDecoration( border: Border( bottom: BorderSide( - color: divide ? colors.borderDefault : Colors.transparent, + color: divide ? colors.border.defaultColor : Colors.transparent, ), ), ), @@ -147,7 +147,7 @@ class _ZetaDropdownListItemState extends State with Single duration: ZetaAnimationLength.fast, child: ZetaIcon( ZetaIcons.expand_more, - color: colors.iconSubtle, + color: colors.main.subtle, ), ), onPressed: _onTap, diff --git a/lib/src/components/list_item/list_item.dart b/lib/src/components/list_item/list_item.dart index 7beb9973..5410e3b5 100644 --- a/lib/src/components/list_item/list_item.dart +++ b/lib/src/components/list_item/list_item.dart @@ -169,7 +169,7 @@ class ZetaListItem extends ZetaStatelessWidget { return SelectionContainer.disabled( child: MergeSemantics( child: Material( - color: Zeta.of(context).colors.surfaceDefault, + color: Zeta.of(context).colors.surface.defaultColor, child: InkWell( onTap: onTap, excludeFromSemantics: true, @@ -178,7 +178,7 @@ class ZetaListItem extends ZetaStatelessWidget { decoration: BoxDecoration( border: Border( bottom: BorderSide( - color: divide ? colors.borderDefault : Colors.transparent, + color: divide ? colors.border.defaultColor : Colors.transparent, ), ), ), diff --git a/lib/src/components/list_item/notification_list_item.dart b/lib/src/components/list_item/notification_list_item.dart index 9e88dc3e..0608dfc6 100644 --- a/lib/src/components/list_item/notification_list_item.dart +++ b/lib/src/components/list_item/notification_list_item.dart @@ -89,7 +89,7 @@ class ZetaNotificationListItem extends ZetaStatelessWidget { children: [ if (!notificationRead) ZetaIndicator( - color: colors.blue, + color: colors.main.primary, size: ZetaWidgetSize.small, ), Text( @@ -104,17 +104,17 @@ class ZetaNotificationListItem extends ZetaStatelessWidget { if (notificationTime != null) Text( notificationTime!, - style: ZetaTextStyles.bodySmall.apply(color: colors.textDisabled), + style: ZetaTextStyles.bodySmall.apply(color: colors.main.disabled), ), Container( padding: const EdgeInsets.all(2), decoration: BoxDecoration( - color: colors.surfaceNegative, + color: colors.surface.negative, borderRadius: Zeta.of(context).radius.full, ), child: ZetaIcon( ZetaIcons.important_notification, - color: colors.white, + color: colors.main.inverse, size: Zeta.of(context).spacing.medium, ), ), @@ -140,10 +140,10 @@ class ZetaNotificationListItem extends ZetaStatelessWidget { final colors = Zeta.of(context).colors; return BoxDecoration( - color: notificationRead ? colors.surfacePrimary : colors.surfaceSelected, + color: notificationRead ? colors.surface.primary : colors.surface.selected, borderRadius: Zeta.of(context).radius.rounded, border: (showDivider ?? false) - ? Border(bottom: BorderSide(width: Zeta.of(context).spacing.minimum, color: colors.blue)) + ? Border(bottom: BorderSide(width: Zeta.of(context).spacing.minimum, color: colors.main.primary)) : null, ); } @@ -202,13 +202,8 @@ class ZetaNotificationBadge extends StatelessWidget { @override Widget build(BuildContext context) { - final colors = Zeta.of(context).colors; return avatar != null - ? avatar!.copyWith( - size: ZetaAvatarSize.m, - lowerBadge: ZetaAvatarBadge.icon(icon: ZetaIcons.check_mark, color: colors.green), - backgroundColor: colors.purple.shade80, - ) + ? avatar!.copyWith(size: ZetaAvatarSize.m) : icon != null ? ZetaIcon( icon, diff --git a/lib/src/components/navigation bar/navigation_bar.dart b/lib/src/components/navigation bar/navigation_bar.dart index bbd939fd..5809fefd 100644 --- a/lib/src/components/navigation bar/navigation_bar.dart +++ b/lib/src/components/navigation bar/navigation_bar.dart @@ -142,7 +142,7 @@ class ZetaNavigationBar extends ZetaStatelessWidget { _generateNavigationItemRow(leftItems, context), if (dividerIndex != null) Container( - color: colors.borderSubtle, + color: colors.border.subtle, width: _navigationItemBorderWidth, height: Zeta.of(context).spacing.xl_7, ), @@ -164,8 +164,8 @@ class ZetaNavigationBar extends ZetaStatelessWidget { return Container( padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.medium), decoration: BoxDecoration( - color: colors.surfacePrimary, - border: Border(top: BorderSide(color: colors.borderSubtle)), + color: colors.surface.defaultColor, + border: Border(top: BorderSide(color: colors.border.subtle)), ), child: Semantics( child: child, @@ -200,13 +200,13 @@ class _NavigationItem extends ZetaStatelessWidget { final BuildContext context; Widget get badge { - final ZetaColors colors = Zeta.of(context).colors; + final colors = Zeta.of(context).colors; return Positioned( top: Zeta.of(context).spacing.minimum, right: Zeta.of(context).spacing.minimum, child: DecoratedBox( decoration: BoxDecoration( - color: colors.surfacePrimary, + color: colors.surface.primary, borderRadius: Zeta.of(context).radius.full, ), child: item.badge?.copyWith( @@ -224,10 +224,10 @@ class _NavigationItem extends ZetaStatelessWidget { @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final elementColor = selected ? colors.primary : colors.textSubtle; + final elementColor = selected ? colors.surface.primary : colors.main.subtle; return Material( - color: colors.surfacePrimary, + color: colors.surface.defaultColor, child: InkWell( borderRadius: context.rounded ? Zeta.of(context).radius.rounded : Zeta.of(context).radius.none, onTap: onTap, diff --git a/lib/src/components/navigation_rail/navigation_rail.dart b/lib/src/components/navigation_rail/navigation_rail.dart index 5d4e7595..1f10da35 100644 --- a/lib/src/components/navigation_rail/navigation_rail.dart +++ b/lib/src/components/navigation_rail/navigation_rail.dart @@ -143,6 +143,12 @@ class _ZetaNavigationRailItemContent extends ZetaStatelessWidget { @override Widget build(BuildContext context) { final zeta = Zeta.of(context); + + final Color foregroundColor = disabled + ? zeta.colors.main.disabled + : selected + ? zeta.colors.main.defaultColor + : zeta.colors.main.subtle; return Semantics( button: true, enabled: !disabled, @@ -156,7 +162,7 @@ class _ZetaNavigationRailItemContent extends ZetaStatelessWidget { color: disabled ? null : selected - ? zeta.colors.blue.shade10 + ? zeta.colors.state.defaultColor.selected : null, borderRadius: context.rounded ? Zeta.of(context).radius.rounded : null, ), @@ -178,11 +184,7 @@ class _ZetaNavigationRailItemContent extends ZetaStatelessWidget { if (icon != null) IconTheme( data: IconThemeData( - color: disabled - ? zeta.colors.cool.shade50 - : selected - ? zeta.colors.textDefault - : zeta.colors.cool.shade70, + color: foregroundColor, size: Zeta.of(context).spacing.xl_2, ), child: icon!, @@ -190,13 +192,7 @@ class _ZetaNavigationRailItemContent extends ZetaStatelessWidget { Text( (wordWrap ?? true) ? label.replaceAll(' ', '\n') : label, textAlign: TextAlign.center, - style: ZetaTextStyles.titleSmall.copyWith( - color: disabled - ? zeta.colors.cool.shade50 - : selected - ? zeta.colors.textDefault - : zeta.colors.cool.shade70, - ), + style: ZetaTextStyles.titleSmall.copyWith(color: foregroundColor), ), ], ), diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart index e4b7b929..34bd0163 100644 --- a/lib/src/components/pagination/pagination.dart +++ b/lib/src/components/pagination/pagination.dart @@ -217,7 +217,7 @@ class _ZetaPaginationState extends State { height: Zeta.of(context).spacing.xl_6, decoration: BoxDecoration( - border: Border.all(color: colors.borderSubtle), + border: Border.all(color: colors.border.subtle), borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, ), // TODO(UX-1135): Replace with Zeta Dropdown @@ -227,7 +227,9 @@ class _ZetaPaginationState extends State { value: _currentPage, icon: const ZetaIcon(ZetaIcons.expand_more).paddingStart(Zeta.of(context).spacing.small), underline: const Nothing(), - style: Theme.of(context).textTheme.bodyLarge?.copyWith(color: colors.textSubtle), + style: Theme.of(context).textTheme.bodyLarge?.copyWith( + color: colors.main.subtle, + ), padding: EdgeInsets.symmetric( horizontal: Zeta.of(context).spacing.medium, ), @@ -316,16 +318,16 @@ class _PaginationItem extends ZetaStatelessWidget { maxLines: 1, style: Theme.of(context).textTheme.bodyMedium?.copyWith( color: disabled - ? colors.textDisabled + ? colors.main.disabled : selected - ? colors.textInverse - : colors.textDefault, + ? colors.main.inverse + : colors.main.defaultColor, ), ); } else if (icon != null) { child = ZetaIcon( icon, - color: disabled ? colors.textDisabled : colors.textDefault, + color: disabled ? colors.main.disabled : colors.main.defaultColor, semanticLabel: semanticLabel, ); } @@ -345,15 +347,14 @@ class _PaginationItem extends ZetaStatelessWidget { child: Material( borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, color: disabled - ? colors.surfaceDisabled + ? colors.state.disabled.disabled : selected - ? colors.cool[100] - : colors.surfacePrimary, + ? colors.state.inverse.selected + : colors.state.defaultColor.enabled, child: InkWell( onTap: disabled ? null : onPressed, borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, - highlightColor: selected ? colors.cool[100] : colors.surfaceSelected, - hoverColor: selected ? colors.cool[100] : colors.surfaceHover, + hoverColor: selected ? colors.state.inverse.hover : colors.state.defaultColor.hover, enableFeedback: false, child: Container( alignment: Alignment.center, diff --git a/lib/src/components/phone_input/phone_input.dart b/lib/src/components/phone_input/phone_input.dart index c6ce6a5f..b401b1f7 100644 --- a/lib/src/components/phone_input/phone_input.dart +++ b/lib/src/components/phone_input/phone_input.dart @@ -89,7 +89,7 @@ class ZetaPhoneInput extends ZetaFormField { items: state._dropdownItems, builder: (context, selectedItem, dropdowncontroller) { final borderSide = BorderSide( - color: disabled ? colors.borderDefault : colors.borderSubtle, + color: disabled ? colors.border.defaultColor : colors.border.subtle, ); return GestureDetector( @@ -110,7 +110,7 @@ class ZetaPhoneInput extends ZetaFormField { top: borderSide, bottom: borderSide, ), - color: disabled ? colors.surfaceDisabled : colors.surfaceDefault, + color: disabled ? colors.surface.disabled : colors.surface.defaultColor, ), child: Column( children: [ @@ -128,7 +128,7 @@ class ZetaPhoneInput extends ZetaFormField { ), ZetaIcon( !dropdowncontroller.isOpen ? ZetaIcons.expand_more : ZetaIcons.expand_less, - color: !disabled ? colors.iconDefault : colors.iconDisabled, + color: !disabled ? colors.main.defaultColor : colors.main.disabled, size: Zeta.of(context).spacing.xl, ), ], diff --git a/lib/src/components/progress/progress_bar.dart b/lib/src/components/progress/progress_bar.dart index cb373cfc..ba6a8bd7 100644 --- a/lib/src/components/progress/progress_bar.dart +++ b/lib/src/components/progress/progress_bar.dart @@ -25,7 +25,7 @@ class ZetaProgressBar extends ZetaProgress { super.key, super.rounded, required super.progress, - required this.type, + this.type = ZetaProgressBarType.standard, this.isThin = false, this.label, }); @@ -118,7 +118,7 @@ class _ZetaProgressBarState extends ZetaProgressState { borderRadius: context.rounded ? Zeta.of(context).radius.rounded : Zeta.of(context).radius.none, value: widget.type == ZetaProgressBarType.indeterminate ? null : animation.value, backgroundColor: - widget.type == ZetaProgressBarType.buffering ? colors.surfaceDisabled : Colors.transparent, + widget.type == ZetaProgressBarType.buffering ? colors.surface.disabled : Colors.transparent, ), ), ), @@ -133,7 +133,7 @@ class _ZetaProgressBarState extends ZetaProgressState { /// Returns thickness of progress bar based on its weight. double get _weight => widget.isThin ? Zeta.of(context).spacing.small : Zeta.of(context).spacing.large; - Widget bufferingWidget(ZetaColors colors) { + Widget bufferingWidget(ZetaSemanticColors colors) { final Iterable> extraList = List.generate( 3, (e) => [ @@ -142,7 +142,7 @@ class _ZetaProgressBarState extends ZetaProgressState { width: _weight, height: _weight, decoration: BoxDecoration( - color: colors.surfaceDisabled, + color: colors.surface.disabled, borderRadius: Zeta.of(context).radius.rounded, ), ), diff --git a/lib/src/components/progress/progress_circle.dart b/lib/src/components/progress/progress_circle.dart index b678c946..830afebb 100644 --- a/lib/src/components/progress/progress_circle.dart +++ b/lib/src/components/progress/progress_circle.dart @@ -89,14 +89,15 @@ class _ZetaProgressCircleState extends ZetaProgressState { ? ZetaTextStyles.labelSmall : ZetaTextStyles.labelSmall.copyWith(fontSize: Zeta.of(context).spacing.small), ); + final size = _getSize(context); return ConstrainedBox( - constraints: BoxConstraints.tight(_getSize()), + constraints: BoxConstraints.tight(size), child: AnimatedBuilder( animation: controller, builder: (_, child) { return CustomPaint( - size: _getSize(), + size: _getSize(context), painter: _CirclePainter( progress: animation.value, rounded: context.rounded, @@ -125,7 +126,7 @@ class _ZetaProgressCircleState extends ZetaProgressState { borderRadius: Zeta.of(context).radius.full, child: Container( decoration: BoxDecoration( - color: colors.surfaceHover, + color: colors.surface.hover, borderRadius: Zeta.of(context).radius.full, ), padding: EdgeInsets.all(Zeta.of(context).spacing.small), @@ -149,7 +150,7 @@ class _ZetaProgressCircleState extends ZetaProgressState { ); } - Size _getSize() { + Size _getSize(BuildContext context) { switch (widget.size) { case ZetaCircleSizes.xs: return Size(Zeta.of(context).spacing.xl_2, Zeta.of(context).spacing.xl_2); @@ -199,7 +200,7 @@ class _CirclePainter extends CustomPainter { _paint ..strokeWidth = Zeta.of(context).spacing.minimum ..style = PaintingStyle.stroke - ..color = Zeta.of(context).colors.primary; + ..color = Zeta.of(context).colors.main.primary; const double fullCircle = 2 * math.pi; diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart index 38786490..493c23f7 100644 --- a/lib/src/components/radio/radio.dart +++ b/lib/src/components/radio/radio.dart @@ -82,23 +82,23 @@ class _ZetaRadioState extends State> with TickerProviderStateMix ..inactiveReactionColor = Colors.transparent ..reactionColor = Colors.transparent ..hoverColor = Colors.transparent - ..focusColor = zetaColors.blue.shade50 + ..focusColor = zetaColors.main.primary ..splashRadius = Zeta.of(context).spacing.medium ..downPosition = downPosition ..isFocused = states.contains(WidgetState.focused) ..isHovered = states.contains(WidgetState.hovered) ..activeColor = states.contains(WidgetState.hovered) - ? zetaColors.cool.shade90 + ? zetaColors.border.hover : states.contains(WidgetState.disabled) - ? zetaColors.cool.shade30 - : zetaColors.blue.shade60 + ? zetaColors.surface.disabled + : zetaColors.main.primary ..inactiveColor = states.contains(WidgetState.hovered) - ? zetaColors.cool.shade90 + ? zetaColors.border.hover : states.contains(WidgetState.disabled) - ? zetaColors.cool.shade30 + ? zetaColors.main.disabled : states.contains(WidgetState.focused) - ? zetaColors.blue.shade50 - : zetaColors.cool.shade70, + ? zetaColors.border.primary + : zetaColors.main.subtle, mouseCursor: WidgetStateProperty.all( states.contains(WidgetState.disabled) ? SystemMouseCursors.forbidden : SystemMouseCursors.click, ), @@ -106,8 +106,9 @@ class _ZetaRadioState extends State> with TickerProviderStateMix if (widget.label != null) DefaultTextStyle( style: ZetaTextStyles.bodyMedium.copyWith( - color: - states.contains(WidgetState.disabled) ? zetaColors.textDisabled : zetaColors.textDefault, + color: states.contains(WidgetState.disabled) + ? zetaColors.main.disabled + : zetaColors.main.defaultColor, height: 4 / 3, ), child: widget.label!, @@ -172,20 +173,20 @@ class _RadioPainter extends ToggleablePainter { // Background mask for focus final Paint paint = Paint() - ..color = colors.surfacePrimary + ..color = colors.surface.primary ..style = PaintingStyle.stroke - ..strokeWidth = Zeta.of(context).spacing.small + ZetaBorders.borderWidth; + ..strokeWidth = Zeta.of(context).spacing.small + ZetaBorders.medium; if (isFocused) canvas.drawCircle(center, _kInnerRadius, paint); // Outer circle paint ..color = isHovered - ? colors.black + ? colors.border.hover : position.isDismissed ? inactiveColor : activeColor ..style = PaintingStyle.stroke - ..strokeWidth = ZetaBorders.borderWidth; + ..strokeWidth = ZetaBorders.medium; canvas.drawCircle(center, _kOuterRadius, paint); // Inner circle diff --git a/lib/src/components/search_bar/search_bar.dart b/lib/src/components/search_bar/search_bar.dart index 85a3f2d1..e1ecc2ef 100644 --- a/lib/src/components/search_bar/search_bar.dart +++ b/lib/src/components/search_bar/search_bar.dart @@ -47,18 +47,18 @@ class ZetaSearchBar extends ZetaTextFormField { final defaultInputBorder = OutlineInputBorder( borderRadius: borderRadius, - borderSide: BorderSide(color: zeta.colors.cool.shade40), + borderSide: BorderSide(color: zeta.colors.border.defaultColor), ); final focusedBorder = defaultInputBorder.copyWith( borderSide: BorderSide( - color: zeta.colors.blue.shade50, + color: zeta.colors.border.primary, width: zeta.spacing.minimum, ), ); final disabledborder = defaultInputBorder.copyWith( - borderSide: BorderSide(color: zeta.colors.borderDisabled), + borderSide: BorderSide(color: zeta.colors.border.disabled), ); late final double iconSize; @@ -99,13 +99,13 @@ class ZetaSearchBar extends ZetaTextFormField { ), hintText: hintText ?? 'Search', // TODO(UX-1003): Localize hintStyle: ZetaTextStyles.bodyMedium.copyWith( - color: !disabled ? zeta.colors.textSubtle : zeta.colors.textDisabled, + color: !disabled ? zeta.colors.main.subtle : zeta.colors.main.disabled, ), prefixIcon: Padding( padding: EdgeInsets.only(left: zeta.spacing.medium, right: zeta.spacing.small), child: ZetaIcon( ZetaIcons.search, - color: !disabled ? zeta.colors.cool.shade70 : zeta.colors.cool.shade50, + color: !disabled ? zeta.colors.main.subtle : zeta.colors.main.disabled, size: iconSize, ), ), @@ -128,7 +128,7 @@ class ZetaSearchBar extends ZetaTextFormField { onTap: () => state.onChange(''), disabled: disabled, size: size, - color: zeta.colors.iconSubtle, + color: zeta.colors.main.subtle, key: const ValueKey('search-clear-btn'), ), ), @@ -136,7 +136,7 @@ class ZetaSearchBar extends ZetaTextFormField { SizedBox( height: iconSize, child: VerticalDivider( - color: zeta.colors.cool.shade40, + color: zeta.colors.main.subtle, width: 5, thickness: 1, ), @@ -154,7 +154,7 @@ class ZetaSearchBar extends ZetaTextFormField { key: const ValueKey('speech-to-text-btn'), disabled: disabled, size: size, - color: zeta.colors.iconDefault, + color: zeta.colors.main.defaultColor, ), ), ], @@ -165,7 +165,7 @@ class ZetaSearchBar extends ZetaTextFormField { minWidth: zeta.spacing.xl_2, ), filled: !disabled ? null : true, - fillColor: !disabled ? null : zeta.colors.cool.shade30, + fillColor: !disabled ? null : zeta.colors.surface.disabled, enabledBorder: defaultInputBorder, focusedBorder: focusedBorder, disabledBorder: disabledborder, diff --git a/lib/src/components/segmented_control/segmented_control.dart b/lib/src/components/segmented_control/segmented_control.dart index d03969e7..9ba853c6 100644 --- a/lib/src/components/segmented_control/segmented_control.dart +++ b/lib/src/components/segmented_control/segmented_control.dart @@ -140,7 +140,7 @@ class _ZetaSegmentedControlState extends State> child: Container( padding: EdgeInsets.all(Zeta.of(context).spacing.minimum), decoration: BoxDecoration( - color: colors.surfaceDisabled, + color: colors.surface.disabled, borderRadius: rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, ), child: AnimatedBuilder( @@ -148,7 +148,7 @@ class _ZetaSegmentedControlState extends State> builder: (BuildContext context, Widget? child) { return _SegmentedControlRenderWidget( highlightedIndex: highlightedIndex, - thumbColor: colors.surfacePrimary, + thumbColor: colors.surface.defaultColor, thumbScale: _thumbScaleAnimation.value, rounded: rounded, state: this, @@ -228,7 +228,7 @@ class _SegmentState extends State<_Segment> with TickerProviderStateMixin< data: IconThemeData(size: Zeta.of(context).spacing.xl), child: DefaultTextStyle( style: ZetaTextStyles.labelMedium.copyWith( - color: colors.textDefault, + color: colors.main.defaultColor, ), child: Padding( padding: EdgeInsets.symmetric( diff --git a/lib/src/components/select_input/select_input.dart b/lib/src/components/select_input/select_input.dart index 630e0675..d44f3533 100644 --- a/lib/src/components/select_input/select_input.dart +++ b/lib/src/components/select_input/select_input.dart @@ -69,7 +69,7 @@ class ZetaSelectInput extends ZetaFormField { icon: controller.isOpen ? ZetaIcons.expand_less : ZetaIcons.expand_more, disabled: disabled, size: size, - color: colors.iconSubtle, + color: colors.main.subtle, onTap: () => state.onIconTapped(controller), ), ); diff --git a/lib/src/components/slider/slider.dart b/lib/src/components/slider/slider.dart index dedd953b..388bbc44 100644 --- a/lib/src/components/slider/slider.dart +++ b/lib/src/components/slider/slider.dart @@ -72,18 +72,18 @@ class _ZetaSliderState extends State { /// Active Track activeTrackColor: _activeColor, - disabledActiveTrackColor: colors.surfaceDisabled, + disabledActiveTrackColor: colors.surface.disabled, /// Inactive Track - inactiveTrackColor: colors.surfaceInfoSubtle, + inactiveTrackColor: colors.surface.infoSubtle, /// Ticks - activeTickMarkColor: colors.surfaceDefault, - inactiveTickMarkColor: colors.surfaceDefault, + activeTickMarkColor: colors.surface.defaultColor, + inactiveTickMarkColor: colors.surface.defaultColor, /// Thumb - thumbColor: colors.surfaceDefaultInverse, - disabledThumbColor: colors.surfaceDisabled, + thumbColor: colors.surface.defaultInverse, + disabledThumbColor: colors.surface.disabled, overlayShape: _SliderThumb( size: Zeta.of(context).spacing.xl / 2, rounded: context.rounded, @@ -120,9 +120,9 @@ class _ZetaSliderState extends State { Color get _activeColor { final colors = Zeta.of(context).colors; if (widget.onChange == null) { - return colors.surfaceDisabled; + return colors.surface.disabled; } - return _selected ? colors.primary : colors.surfaceDefaultInverse; + return _selected ? colors.main.primary : colors.surface.defaultInverse; } } diff --git a/lib/src/components/snack_bar/snack_bar.dart b/lib/src/components/snack_bar/snack_bar.dart index 4b11974d..73107791 100644 --- a/lib/src/components/snack_bar/snack_bar.dart +++ b/lib/src/components/snack_bar/snack_bar.dart @@ -132,12 +132,12 @@ class ZetaSnackBar extends SnackBar { final colors = Zeta.of(context).colors; return switch (type) { - ZetaSnackBarType.positive => colors.green.shade10, - ZetaSnackBarType.info => colors.purple.shade10, - ZetaSnackBarType.warning => colors.orange.shade10, - ZetaSnackBarType.deletion || ZetaSnackBarType.error => colors.red.shade10, - ZetaSnackBarType.view => colors.blue.shade10, - _ => colors.warm.shade100, + ZetaSnackBarType.positive => colors.surface.positiveSubtle, + ZetaSnackBarType.info => colors.surface.infoSubtle, + ZetaSnackBarType.warning => colors.surface.warningSubtle, + ZetaSnackBarType.deletion || ZetaSnackBarType.error => colors.surface.negativeSubtle, + ZetaSnackBarType.view => colors.surface.primarySubtle, + _ => colors.surface.defaultInverse, }; } } @@ -157,7 +157,7 @@ class _Content extends StatelessWidget { } Color _getColorForType( - ZetaColors colors, + ZetaColorSemantics colors, ZetaSnackBarType? type, ) { return switch (type) { @@ -167,8 +167,8 @@ class _Content extends StatelessWidget { ZetaSnackBarType.deletion || ZetaSnackBarType.error || ZetaSnackBarType.view => - colors.textDefault, - _ => colors.textInverse, + colors.main.defaultColor, + _ => colors.main.inverse, }; } @@ -237,12 +237,12 @@ class _Action extends StatelessWidget { return switch (type) { ZetaSnackBarType.defaultType => _IconButton( onPressed: () => ScaffoldMessenger.of(context).removeCurrentSnackBar(), - color: colors.iconInverse, + color: colors.surface.defaultInverse, ), ZetaSnackBarType.action => _ActionButton( onPressed: onPressed, label: label, - color: colors.borderPrimaryMain, + color: colors.border.primaryMain, ), ZetaSnackBarType.positive || ZetaSnackBarType.info || @@ -250,22 +250,22 @@ class _Action extends StatelessWidget { ZetaSnackBarType.error => _IconButton( onPressed: () => ScaffoldMessenger.of(context).removeCurrentSnackBar(), - color: colors.cool.shade90, + color: colors.main.defaultColor, ), ZetaSnackBarType.deletion => _ActionButton( onPressed: onPressed, label: label, - color: colors.cool.shade90, + color: colors.main.defaultColor, ), ZetaSnackBarType.view => _ActionButton( onPressed: onPressed, label: label, - color: colors.cool.shade90, + color: colors.main.defaultColor, ), _ => _ActionButton( onPressed: onPressed, label: label, - color: colors.blue.shade50, + color: colors.border.primaryMain, ), }; }(), @@ -366,14 +366,14 @@ class _LeadingIcon extends StatelessWidget { properties.add(EnumProperty('type', type)); } - Color _getIconColor(ZetaColors colors, ZetaSnackBarType? type) { + Color _getIconColor(ZetaColorSemantics colors, ZetaSnackBarType? type) { return switch (type) { - ZetaSnackBarType.positive => colors.surfacePositive, - ZetaSnackBarType.info => colors.surfaceInfo, - ZetaSnackBarType.warning => colors.surfaceWarning, - ZetaSnackBarType.error || ZetaSnackBarType.deletion => colors.surfaceNegative, - ZetaSnackBarType.view => colors.primary, - _ => colors.iconInverse, + ZetaSnackBarType.positive => colors.surface.positive, + ZetaSnackBarType.info => colors.surface.info, + ZetaSnackBarType.warning => colors.surface.warning, + ZetaSnackBarType.error || ZetaSnackBarType.deletion => colors.surface.negative, + ZetaSnackBarType.view => colors.main.primary, + _ => colors.main.inverse, }; } diff --git a/lib/src/components/stepper/stepper.dart b/lib/src/components/stepper/stepper.dart index 89e3b7fb..ac978306 100644 --- a/lib/src/components/stepper/stepper.dart +++ b/lib/src/components/stepper/stepper.dart @@ -72,7 +72,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin ); } - ZetaColors get _colors => Zeta.of(context).colors; + ZetaSemanticColors get _colors => Zeta.of(context).colors; bool _isFirst(int index) { return index == 0; @@ -103,12 +103,12 @@ class _ZetaStepperState extends State with TickerProviderStateMixin child: switch (widget.steps[index].type) { ZetaStepType.complete => ZetaIcon( ZetaIcons.check_mark, - color: _colors.textInverse, + color: _colors.main.inverse, ), ZetaStepType.enabled || ZetaStepType.disabled => Text( (index + 1).toString(), style: ZetaTextStyles.labelLarge.copyWith( - color: _colors.textInverse, + color: _colors.main.inverse, ), ), }, @@ -132,12 +132,12 @@ class _ZetaStepperState extends State with TickerProviderStateMixin child: switch (widget.steps[index].type) { ZetaStepType.complete => ZetaIcon( ZetaIcons.check_mark, - color: _colors.textInverse, + color: _colors.main.inverse, ), ZetaStepType.enabled || ZetaStepType.disabled => Text( (index + 1).toString(), style: ZetaTextStyles.titleLarge.copyWith( - color: _colors.textInverse, + color: _colors.main.inverse, ), ), }, @@ -154,10 +154,10 @@ class _ZetaStepperState extends State with TickerProviderStateMixin AnimatedDefaultTextStyle( style: switch (widget.steps[index].type) { ZetaStepType.enabled || ZetaStepType.complete => ZetaTextStyles.bodySmall.copyWith( - color: _colors.textDefault, + color: _colors.main.defaultColor, ), ZetaStepType.disabled => ZetaTextStyles.bodySmall.copyWith( - color: _colors.textDisabled, + color: _colors.main.disabled, ), }, maxLines: 1, @@ -186,11 +186,7 @@ class _ZetaStepperState extends State with TickerProviderStateMixin height: Zeta.of(context).spacing.xl_8, decoration: BoxDecoration( borderRadius: Zeta.of(context).radius.full, - color: switch (widget.steps[index].type) { - ZetaStepType.complete => _colors.green.shade50, - ZetaStepType.disabled => _colors.borderSubtle, - ZetaStepType.enabled => _colors.blue.shade50, - }, + color: getLineColor(index), ), ), ], @@ -215,10 +211,10 @@ class _ZetaStepperState extends State with TickerProviderStateMixin AnimatedDefaultTextStyle( style: switch (widget.steps[index].type) { ZetaStepType.enabled || ZetaStepType.complete => ZetaTextStyles.titleLarge.copyWith( - color: _colors.textDefault, + color: _colors.main.defaultColor, ), ZetaStepType.disabled => ZetaTextStyles.titleLarge.copyWith( - color: _colors.textDisabled, + color: _colors.main.disabled, ), }, maxLines: 1, @@ -253,9 +249,9 @@ class _ZetaStepperState extends State with TickerProviderStateMixin Color _getColorForType(ZetaStepType type) { return switch (type) { - ZetaStepType.complete => _colors.surfacePositive, - ZetaStepType.disabled => _colors.cool.shade50, - ZetaStepType.enabled => _colors.primary, + ZetaStepType.complete => _colors.surface.positive, + ZetaStepType.disabled => _colors.main.disabled, + ZetaStepType.enabled => _colors.main.primary, }; } @@ -313,14 +309,10 @@ class _ZetaStepperState extends State with TickerProviderStateMixin right: Zeta.of(context).spacing.large, left: Zeta.of(context).spacing.large, ), - height: ZetaBorders.borderWidth, + height: ZetaBorders.medium, decoration: BoxDecoration( borderRadius: Zeta.of(context).radius.full, - color: switch (widget.steps[index].type) { - ZetaStepType.complete => _colors.green.shade50, - ZetaStepType.disabled => _colors.borderSubtle, - ZetaStepType.enabled => _colors.blue.shade50, - }, + color: getLineColor(index), ), ), ), @@ -367,6 +359,14 @@ class _ZetaStepperState extends State with TickerProviderStateMixin }, ); } + + Color getLineColor(int index) { + return switch (widget.steps[index].type) { + ZetaStepType.complete => _colors.border.positive, + ZetaStepType.disabled => _colors.border.defaultColor, + ZetaStepType.enabled => _colors.border.primary, + }; + } } /// Zeta step used in [ZetaStepper]. The step can have a title and subtitle, diff --git a/lib/src/components/stepper_input/stepper_input.dart b/lib/src/components/stepper_input/stepper_input.dart index e8d72af3..7989f862 100644 --- a/lib/src/components/stepper_input/stepper_input.dart +++ b/lib/src/components/stepper_input/stepper_input.dart @@ -128,7 +128,7 @@ class ZetaStepperInputState extends State { return OutlineInputBorder( borderSide: BorderSide( - color: !disabled ? colors.borderSubtle : colors.borderDisabled, + color: !disabled ? colors.border.subtle : colors.border.disabled, ), borderRadius: context.rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none, ); @@ -197,7 +197,7 @@ class ZetaStepperInputState extends State { textAlign: TextAlign.center, inputFormatters: [FilteringTextInputFormatter.digitsOnly], style: Theme.of(context).textTheme.bodyMedium?.copyWith( - color: disabled ? colors.textDisabled : null, + color: disabled ? colors.main.disabled : null, ), onTapOutside: (_) { if (_controller.text.isEmpty) { @@ -206,7 +206,7 @@ class ZetaStepperInputState extends State { }, decoration: InputDecoration( filled: true, - fillColor: disabled ? colors.surfaceDisabled : null, + fillColor: disabled ? colors.surface.disabled : null, contentPadding: EdgeInsets.zero, constraints: BoxConstraints(maxHeight: _height), border: _border, diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart index 8afaba2b..535bb789 100644 --- a/lib/src/components/switch/zeta_switch.dart +++ b/lib/src/components/switch/zeta_switch.dart @@ -88,13 +88,15 @@ class ZetaSwitch extends StatelessWidget { trackOutlineColor: const WidgetStatePropertyAll(Colors.transparent), trackColor: WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.disabled)) { - return zetaColors.cool.shade30; + return zetaColors.surface.disabled; + } else if (states.contains(WidgetState.selected)) { + return zetaColors.main.primary; } else { - return states.contains(WidgetState.selected) ? zetaColors.primary : zetaColors.cool.shade50; + return zetaColors.main.disabled; } }), thumbColor: WidgetStateProperty.resolveWith( - (states) => states.contains(WidgetState.disabled) ? zetaColors.cool.shade50 : zetaColors.cool.shade20, + (states) => states.contains(WidgetState.disabled) ? zetaColors.main.disabled : zetaColors.main.inverse, ), value: value ?? false, onChanged: onChanged, diff --git a/lib/src/components/tabs/tab_bar.dart b/lib/src/components/tabs/tab_bar.dart index e4a561e5..fe6c1cdc 100644 --- a/lib/src/components/tabs/tab_bar.dart +++ b/lib/src/components/tabs/tab_bar.dart @@ -21,17 +21,17 @@ class ZetaTabBar extends TabBar { labelPadding: isScrollable ? null : EdgeInsets.zero, indicator: UnderlineTabIndicator( borderSide: BorderSide( - color: Zeta.of(context).colors.primary, + color: Zeta.of(context).colors.main.primary, width: onTap != null ? Zeta.of(context).spacing.minimum : Zeta.of(context).spacing.none, ), borderRadius: Zeta.of(context).radius.none, ), splashFactory: null, labelStyle: ZetaTextStyles.labelLarge.copyWith( - color: onTap != null ? Zeta.of(context).colors.textDefault : Zeta.of(context).colors.textDisabled, + color: onTap != null ? Zeta.of(context).colors.main.defaultColor : Zeta.of(context).colors.main.disabled, ), unselectedLabelStyle: ZetaTextStyles.labelLarge.copyWith( - color: onTap != null ? Zeta.of(context).colors.textSubtle : Zeta.of(context).colors.textDisabled, + color: onTap != null ? Zeta.of(context).colors.main.subtle : Zeta.of(context).colors.main.disabled, ), ); } diff --git a/lib/src/components/text_input/hint_text.dart b/lib/src/components/text_input/hint_text.dart index 3631b507..84ad9b8c 100644 --- a/lib/src/components/text_input/hint_text.dart +++ b/lib/src/components/text_input/hint_text.dart @@ -30,12 +30,12 @@ class ZetaHintText extends ZetaStatelessWidget { final text = error && !disabled ? errorText : hintText; - Color elementColor = colors.textSubtle; + Color elementColor = colors.main.subtle; if (disabled) { - elementColor = colors.textDisabled; + elementColor = colors.main.disabled; } else if (error) { - elementColor = colors.error; + elementColor = colors.main.negative; } if (text == null || text.isEmpty) { diff --git a/lib/src/components/text_input/input_label.dart b/lib/src/components/text_input/input_label.dart index 6e08b575..1508f36d 100644 --- a/lib/src/components/text_input/input_label.dart +++ b/lib/src/components/text_input/input_label.dart @@ -35,13 +35,13 @@ class ZetaInputLabel extends ZetaStatelessWidget { if (requirementLevel == ZetaFormFieldRequirement.optional) { requirementWidget = Text( '(optional)', // TODO(UX-1003): needs localizing. - style: textStyle.copyWith(color: disabled ? colors.textDisabled : colors.textSubtle), + style: textStyle.copyWith(color: disabled ? colors.main.disabled : colors.main.subtle), ); } else if (requirementLevel == ZetaFormFieldRequirement.mandatory) { requirementWidget = Text( '*', style: ZetaTextStyles.labelIndicator.copyWith( - color: disabled ? colors.textDisabled : colors.error, // TODO(mikecoomber): change to textNegative when added + color: disabled ? colors.main.disabled : colors.main.negative, ), ); } @@ -51,7 +51,7 @@ class ZetaInputLabel extends ZetaStatelessWidget { Text( label, style: textStyle.copyWith( - color: disabled ? colors.textDisabled : colors.textDefault, + color: disabled ? colors.main.disabled : colors.main.defaultColor, ), ), if (requirementWidget != null) requirementWidget.paddingStart(Zeta.of(context).spacing.minimum), diff --git a/lib/src/components/text_input/internal_text_input.dart b/lib/src/components/text_input/internal_text_input.dart index 2a4488b8..09a60720 100644 --- a/lib/src/components/text_input/internal_text_input.dart +++ b/lib/src/components/text_input/internal_text_input.dart @@ -163,19 +163,19 @@ class InternalTextInput extends ZetaStatefulWidget { /// The current state of a [InternalTextInput] class InternalTextInputState extends State { late final TextEditingController _controller; - ZetaColors get _colors => Zeta.of(context).colors; + ZetaSemanticColors get _colors => Zeta.of(context).colors; // TODO(UX-1143): refactor to use WidgetStateController bool _hovered = false; Color get _backgroundColor { if (widget.disabled) { - return _colors.surfaceDisabled; + return _colors.surface.disabled; } if (widget.errorText != null) { - return _colors.error.shade10; + return _colors.surface.negativeSubtle; } - return _colors.surfacePrimary; + return _colors.surface.defaultColor; } TextStyle get _baseTextStyle { @@ -203,9 +203,9 @@ class InternalTextInputState extends State { } TextStyle get _affixStyle { - Color color = _colors.textSubtle; + Color color = _colors.main.subtle; if (widget.disabled) { - color = _colors.textDisabled; + color = _colors.main.disabled; } return _baseTextStyle.copyWith(color: color); } @@ -272,16 +272,17 @@ class InternalTextInputState extends State { OutlineInputBorder _baseBorder(bool rounded) => OutlineInputBorder( borderRadius: widget.borderRadius ?? (rounded ? Zeta.of(context).radius.minimal : Zeta.of(context).radius.none), borderSide: BorderSide( - color: !widget.disabled ? (_hovered ? _colors.borderSelected : _colors.borderSubtle) : _colors.borderDefault, + color: !widget.disabled + ? (_hovered ? _colors.border.selected : _colors.border.subtle) + : _colors.border.defaultColor, ), ); OutlineInputBorder _focusedBorder(bool rounded) => _baseBorder(rounded).copyWith( - borderSide: BorderSide(color: _colors.primary.shade50, width: ZetaBorders.borderWidth), - ); // TODO(mikecoomber): change to colors.borderPrimary when added - + borderSide: BorderSide(color: _colors.border.primary, width: ZetaBorders.medium), + ); OutlineInputBorder _errorBorder(bool rounded) => _baseBorder(rounded).copyWith( - borderSide: BorderSide(color: _colors.error, width: ZetaBorders.borderWidth), + borderSide: BorderSide(color: _colors.border.negative, width: ZetaBorders.medium), ); @override @@ -337,7 +338,7 @@ class InternalTextInputState extends State { onChanged: widget.onChange, onSubmitted: widget.onSubmit, style: _baseTextStyle, - cursorErrorColor: _colors.error, + cursorErrorColor: _colors.main.negative, obscureText: widget.obscureText, focusNode: widget.focusNode, decoration: InputDecoration( diff --git a/lib/src/components/time_input/time_input.dart b/lib/src/components/time_input/time_input.dart index 00bf6cd4..d5df24e6 100644 --- a/lib/src/components/time_input/time_input.dart +++ b/lib/src/components/time_input/time_input.dart @@ -67,7 +67,7 @@ class ZetaTimeInput extends ZetaFormField { onTap: state.clear, disabled: disabled, size: size, - color: colors.iconSubtle, + color: colors.main.subtle, ), InputIconButton( icon: ZetaIcons.clock_outline, @@ -75,7 +75,7 @@ class ZetaTimeInput extends ZetaFormField { onTap: state.pickTime, disabled: disabled, size: size, - color: colors.iconDefault, + color: colors.main.defaultColor, ), ], ), @@ -233,8 +233,8 @@ class _ZetaTimeInputState extends FormFieldState { return Theme( data: Theme.of(context).copyWith( timePickerTheme: TimePickerThemeData( - dialBackgroundColor: colors.warm.shade30, - dayPeriodColor: colors.primary, + dialBackgroundColor: colors.surface.primarySubtle, + dayPeriodColor: colors.main.primary, shape: RoundedRectangleBorder( borderRadius: rounded ? Zeta.of(context).radius.rounded : Zeta.of(context).radius.none, ), diff --git a/lib/src/components/tooltip/tooltip.dart b/lib/src/components/tooltip/tooltip.dart index b3f8204a..907da82e 100644 --- a/lib/src/components/tooltip/tooltip.dart +++ b/lib/src/components/tooltip/tooltip.dart @@ -50,14 +50,14 @@ class ZetaTooltip extends ZetaStatelessWidget { final EdgeInsets? padding; /// The color of the tooltip. - /// Default is `zeta.colors.textDefault`. + /// Default is `zeta.colors.main.defaultColor`. final Color? color; /// The text style of the tooltip. /// Default is: /// ``` /// ZetaTextStyles.bodyXSmall.copyWith( - /// color: zeta.colors.textInverse, + /// color: zeta.colors.main.inverse, /// fontWeight: FontWeight.w500, /// ), /// ``` @@ -73,7 +73,7 @@ class ZetaTooltip extends ZetaStatelessWidget { @override Widget build(BuildContext context) { final zeta = Zeta.of(context); - final color = this.color ?? zeta.colors.textDefault; + final color = this.color ?? zeta.colors.main.defaultColor; final horizontalArrowWidth = [ZetaTooltipArrowDirection.left, ZetaTooltipArrowDirection.right].contains(arrowDirection) ? _horizontalArrowSize.width @@ -131,7 +131,7 @@ class ZetaTooltip extends ZetaStatelessWidget { child: DefaultTextStyle( style: textStyle ?? ZetaTextStyles.bodyXSmall.copyWith( - color: zeta.colors.textInverse, + color: zeta.colors.main.inverse, fontWeight: FontWeight.w500, ), child: child, diff --git a/lib/src/components/top_app_bar/extended_top_app_bar.dart b/lib/src/components/top_app_bar/extended_top_app_bar.dart index 90fe6cc3..7b3c5eca 100644 --- a/lib/src/components/top_app_bar/extended_top_app_bar.dart +++ b/lib/src/components/top_app_bar/extended_top_app_bar.dart @@ -48,7 +48,7 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate { return ConstrainedBox( constraints: BoxConstraints(minHeight: Zeta.of(context).spacing.xl_9, maxHeight: maxExtent), child: ColoredBox( - color: Zeta.of(context).colors.surfacePrimary, + color: Zeta.of(context).colors.surface.defaultColor, child: Stack( children: [ Positioned( diff --git a/lib/src/components/top_app_bar/search_top_app_bar.dart b/lib/src/components/top_app_bar/search_top_app_bar.dart index 50e40668..daf18de2 100644 --- a/lib/src/components/top_app_bar/search_top_app_bar.dart +++ b/lib/src/components/top_app_bar/search_top_app_bar.dart @@ -164,13 +164,13 @@ class _ZetaTopAppBarSearchFieldState extends State wit controller: widget.searchController?.textEditingController, focusNode: _textFocusNode, style: ZetaTextStyles.bodyMedium, - cursorColor: colors.cool.shade90, + cursorColor: colors.main.defaultColor, decoration: InputDecoration( - iconColor: colors.cool.shade90, + iconColor: colors.main.defaultColor, filled: true, border: InputBorder.none, hintStyle: ZetaTextStyles.bodyMedium.copyWith( - color: colors.textDisabled, + color: colors.main.disabled, ), hintText: widget.hintText, ), diff --git a/lib/src/components/top_app_bar/top_app_bar.dart b/lib/src/components/top_app_bar/top_app_bar.dart index a1570584..0838ff01 100644 --- a/lib/src/components/top_app_bar/top_app_bar.dart +++ b/lib/src/components/top_app_bar/top_app_bar.dart @@ -135,7 +135,7 @@ class _ZetaTopAppBarState extends State { super.dispose(); } - Widget _getTitleText(ZetaColors colors) { + Widget _getTitleText(ZetaColorSemantics colors) { var title = widget.title; if (widget.title is Row) { final oldRow = widget.title! as Row; @@ -159,12 +159,12 @@ class _ZetaTopAppBarState extends State { } return DefaultTextStyle( - style: (widget.titleTextStyle ?? ZetaTextStyles.bodyLarge).copyWith(color: colors.textDefault), + style: (widget.titleTextStyle ?? ZetaTextStyles.bodyLarge).copyWith(color: colors.main.defaultColor), child: title ?? const Text(' '), ); } - List? _getActions(ZetaColors colors) { + List? _getActions(ZetaColorSemantics colors) { return _isSearchEnabled ? [ IconButtonTheme( @@ -175,14 +175,14 @@ class _ZetaTopAppBarState extends State { mainAxisSize: MainAxisSize.min, children: [ IconButton( - color: colors.cool.shade50, + color: colors.main.defaultColor, onPressed: () => widget.searchController?.clearText(), icon: const ZetaIcon(ZetaIcons.cancel), ), if (widget.onSearchMicrophoneIconPressed != null) ...[ SizedBox( height: Zeta.of(context).spacing.xl_2, - child: VerticalDivider(width: ZetaBorders.borderWidth, color: colors.cool.shade70), + child: VerticalDivider(width: ZetaBorders.medium, color: colors.main.subtle), ), IconButton( onPressed: widget.onSearchMicrophoneIconPressed, @@ -230,7 +230,7 @@ class _ZetaTopAppBarState extends State { return ZetaRoundedScope( rounded: context.rounded, child: ColoredBox( - color: colors.surfacePrimary, + color: colors.surface.defaultColor, child: IconButtonTheme( data: IconButtonThemeData(style: IconButton.styleFrom(tapTargetSize: MaterialTapTargetSize.shrinkWrap)), child: Padding( @@ -238,15 +238,15 @@ class _ZetaTopAppBarState extends State { child: AppBar( elevation: 0, scrolledUnderElevation: 0, - iconTheme: IconThemeData(color: colors.cool.shade90), + iconTheme: IconThemeData(color: colors.main.defaultColor), leadingWidth: Zeta.of(context).spacing.xl_6, leading: widget.leading, automaticallyImplyLeading: widget.automaticallyImplyLeading, surfaceTintColor: Colors.transparent, centerTitle: widget.type == ZetaTopAppBarType.centeredTitle, titleTextStyle: widget.titleTextStyle == null - ? ZetaTextStyles.bodyLarge.copyWith(color: colors.textDefault) - : widget.titleTextStyle!.copyWith(color: colors.textDefault), + ? ZetaTextStyles.bodyLarge.copyWith(color: colors.main.defaultColor) + : widget.titleTextStyle!.copyWith(color: colors.main.defaultColor), title: title, actions: actions, ), diff --git a/lib/src/temp_colors.dart b/lib/src/temp_colors.dart new file mode 100644 index 00000000..5226c918 --- /dev/null +++ b/lib/src/temp_colors.dart @@ -0,0 +1,398 @@ +import 'package:flutter/material.dart'; + +import '../zeta_flutter.dart'; + +// TODO(UX-1144): Do this better + +/// Colors to be removed at v1.0.0 +@Deprecated('This has been deprecated as of 0.16.0') +extension TempColors on ZetaSemanticColors { + /// Primary color swatch. + /// + /// Defaults to [ZetaColorBase.blue]. + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get primary => primitives.blue; + + /// Secondary color used in app. + /// + /// Defaults to [ZetaColorBase.yellow] + /// + /// Maps to [ColorScheme.secondary]. + ZetaColorSwatch get secondary => primitives.yellow; + + /// Secondary color used in app. + /// + /// Defaults to `ZetaColors.red.60`. + /// + /// Maps to [ColorScheme.error]. + ZetaColorSwatch get error => primitives.red; + + /// Cool color swatch. + /// + /// Defaults to [ZetaColorBase.cool]. + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get cool => primitives.cool; + + /// Warm color swatch. + /// + /// Defaults to [ZetaColorBase.warm]. + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get warm => primitives.warm; + + /// Pure color swatch. + /// + /// Defaults to [ZetaColorBase.pure]. + /// + /// {@macro zeta-color-dark} + ZetaPureColorSwatch get pure => primitives.pure; + + /// White color. + /// + /// Maps to [ColorScheme.surface]. + /// + /// Defaults to [ZetaColorBase.white]. + Color get white => primitives.pure.shade0; + + /// Shadow color. + /// + /// Maps to [ColorScheme.surface]. + /// + /// Defaults to [ZetaColorBase.black]. + Color get black => primitives.pure.shade1000; + + /// Surface color. + /// + /// Maps to [ColorScheme.surface]. + /// + /// * Light mode: `ZetaColors.black` + /// * Dark mode: `ZetaColors.white`. + Color get surfacePrimary => surface.primary; + + /// Secondary surface color. + /// + /// * `ZetaColors.cool.10`. + Color get surfaceSecondary => surface.secondary; + + /// Tertiary surface color. + /// + /// Maps to [ColorScheme.surface] and [ThemeData.scaffoldBackgroundColor] + /// + /// * `ZetaColors.warm.10`. + Color get surfaceTertiary => primitives.warm.shade10; + + /// Default text /icon color. + /// + /// Defaults to `ZetaColors.cool.90`. + /// + /// {@template zeta-color-dark} + /// Color swatches are inverted if [ZetaColors.brightness] is Dark. + /// {@endtemplate} + Color get textDefault => main.defaultColor; + + /// Subtle text /icon color. + /// + /// Defaults to `ZetaColors.cool.70`. + /// + /// Maps to [ColorScheme.onSurface]. + /// + /// {@macro zeta-color-dark} + Color get textSubtle => main.subtle; + + /// Disabled text / icon color. + /// + /// Defaults to `ZetaColors.cool.50`. + /// + /// {@macro zeta-color-dark} + Color get textDisabled => main.disabled; + + /// Inverse text / icon color. + /// + /// Used for text that is not on [ColorScheme.surface] or [ThemeData.scaffoldBackgroundColor]. + /// + /// Defaults to `ZetaColors.cool.20`. + /// + /// {@macro zeta-color-dark} + Color get textInverse => main.inverse; + + /// Default icon color. + /// + /// Defaults to `ZetaColors.cool.90`. + /// + /// {@macro zeta-color-dark} + Color get iconDefault => main.defaultColor; + + /// Subtle icon color. + /// + /// Defaults to `ZetaColors.cool.70`. + /// + /// Maps to [ColorScheme.onSurface]. + /// + /// {@macro zeta-color-dark} + Color get iconSubtle => main.subtle; + + /// Disabled icon color. + /// + /// Defaults to `ZetaColors.cool.50`. + /// + /// {@macro zeta-color-dark} + Color get iconDisabled => main.disabled; + + /// Inverse icon color. + /// + /// Used for text that is not on [ColorScheme.surface] or [ThemeData.scaffoldBackgroundColor]. + /// + /// Defaults to `ZetaColors.cool.20`. + /// + /// {@macro zeta-color-dark} + Color get iconInverse => main.inverse; + + /// Default Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceDefault => surface.defaultColor; + + /// Default-inverse Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceDefaultInverse => surface.defaultInverse; + + /// Hover Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceHover => surface.hover; + + /// Selected Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceSelected => surface.selected; + + /// Selected-hover Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceSelectedHover => surface.selectedHover; + + /// Disabled Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceDisabled => surface.disabled; + + /// Cool Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceCool => surface.cool; + + /// Warm Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceWarm => surface.warm; + + /// Primary-subtle Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfacePrimarySubtle => surface.primarySubtle; + + /// Avatar Avatar Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceAvatarBlue => surface.avatar.blue; + + /// Avatar Avatar Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceAvatarGreen => surface.avatar.green; + + /// Avatar Avatar Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceAvatarOrange => surface.avatar.orange; + + /// Avatar Avatar Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceAvatarPink => surface.avatar.pink; + + /// Avatar Avatar Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceAvatarPurple => surface.avatar.purple; + + /// Avatar Avatar Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceAvatarTeal => surface.avatar.teal; + + /// Avatar Avatar Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceAvatarYellow => surface.avatar.yellow; + + /// Secondary-subtle Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceSecondarySubtle => surface.secondarySubtle; + + /// Positive Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfacePositive => surface.positive; + + /// Positive-subtle Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfacePositiveSubtle => surface.positiveSubtle; + + /// Warning Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceWarning => surface.warning; + + /// Warning-subtle Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceWarningSubtle => surface.warningSubtle; + + /// Negative Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceNegative => surface.negative; + + /// Negative-subtle Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceNegativeSubtle => surface.negativeSubtle; + + /// Info Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceInfo => surface.info; + + /// Info-subtle Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceInfoSubtle => surface.infoSubtle; + + /// Default Border Color + /// + /// {@macro zeta-color-dark} + Color get borderDefault => border.defaultColor; + + /// Subtle Border Color + /// + /// {@macro zeta-color-dark} + Color get borderSubtle => border.subtle; + + /// Hover Border Color + /// + /// {@macro zeta-color-dark} + Color get borderHover => border.hover; + + /// Selected Border Color + /// + /// {@macro zeta-color-dark} + Color get borderSelected => border.selected; + + /// Disabled Border Color + /// + /// {@macro zeta-color-dark} + Color get borderDisabled => border.disabled; + + /// Pure Border Color + /// + /// {@macro zeta-color-dark} + Color get borderPure => border.pure; + + /// Primary-main Border Color + /// + /// {@macro zeta-color-dark} + Color get borderPrimaryMain => border.primaryMain; + + /// Primary Border Color + /// + /// {@macro zeta-color-dark} + Color get borderPrimary => border.primary; + + /// Secondary Border Color + /// + /// {@macro zeta-color-dark} + Color get borderSecondary => border.secondary; + + /// Positive Border Color + /// + /// {@macro zeta-color-dark} + Color get borderPositive => border.positive; + + /// Warning Border Color + /// + /// {@macro zeta-color-dark} + Color get borderWarning => border.warning; + + /// Negative Border Color + /// + /// {@macro zeta-color-dark} + Color get borderNegative => border.negative; + + /// Info Border Color + /// + /// {@macro zeta-color-dark} + Color get borderInfo => border.info; + + /// Blue color swatch + /// + /// Defaults to [ZetaColorBase.blue] + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get blue => primitives.blue; + + /// Green color swatch + /// + /// Defaults to [ZetaColorBase.green] + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get green => primitives.green; + + /// Red color swatch + /// + /// Defaults to [ZetaColorBase.red] + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get red => primitives.red; + + /// Orange color swatch + /// + /// Defaults to [ZetaColorBase.orange] + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get orange => primitives.orange; + + /// Purple color swatch + /// + /// Defaults to [ZetaColorBase.purple] + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get purple => primitives.purple; + + /// Yellow color swatch + /// + /// Defaults to [ZetaColorBase.yellow] + /// + /// {@macro zeta-color-dark} + + ZetaColorSwatch get yellow => primitives.yellow; + + /// Teal color swatch + /// + /// Defaults to [ZetaColorBase.teal] + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get teal => primitives.teal; + + /// Pink color swatch + /// + /// Defaults to [ZetaColorBase.pink] + /// + /// {@macro zeta-color-dark} + ZetaColorSwatch get pink => primitives.pink; +} diff --git a/lib/src/theme/color_extensions.dart b/lib/src/theme/color_extensions.dart index 51f96968..20a797d7 100644 --- a/lib/src/theme/color_extensions.dart +++ b/lib/src/theme/color_extensions.dart @@ -1,10 +1,7 @@ import 'dart:math' as math; import 'package:flutter/material.dart'; -import 'color_swatch.dart'; -import 'colors_base.dart'; -import 'constants.dart'; -import 'contrast.dart'; +import '../../zeta_flutter.dart'; /// Extensions on [Color] to brighten, lighten, darken and blend colors and /// can get a shade for gradients. @@ -70,9 +67,9 @@ extension ZetaColorExtensions on Color { /// It will return a color chosen according to the brightness of this color. /// /// * The [Color] instance on which this getter is called is used to determine the brightness based on [ThemeData.estimateBrightnessForColor] method. - /// * If the estimated brightness is light, it will return a color [ZetaColorBase.cool].shade90. - /// * If the estimated brightness is not light (meaning it's dark), it will return [ZetaColorBase.white]. - Color get onColor => isLight ? ZetaColorBase.cool.shade90 : ZetaColorBase.white; + /// * If the estimated brightness is light, it will return a color [Colors.black87]. + /// * If the estimated brightness is not light (meaning it's dark), it will return [Colors.white]. + Color get onColor => isLight ? Colors.black87 : Colors.white; /// Returns true if the color's brightness is [Brightness.light], else false. bool get isLight => ThemeData.estimateBrightnessForColor(this) == Brightness.light; @@ -247,14 +244,14 @@ extension ZetaColorExtensions on Color { /// /// * [primary] (Default = [kZetaSwatchPrimaryIndex]) - The primary color index for the swatch. This number should be a key in the swatch map. /// * [targetContrasts] (Default = [kZetaSwatchTargetContrasts]) - Map of target contrast values for each color index. - /// * [background] (Default = [ZetaColorBase.white]) - The color used to determine the contrast of the colors in the swatch. Generally, this should be the background color that the color swatch will be displayed on. + /// * [background] (Default = [Colors.white]) - The color used to determine the contrast of the colors in the swatch. Generally, this should be the background color that the color swatch will be displayed on. /// * [adjustPrimary] (Default = true) - Determines whether to adjust the contrast of the primary color on the background color. Useful in cases the brand color is being used. /// /// Returns a Map object. Map generateSwatch({ int primary = kZetaSwatchPrimaryIndex, Map targetContrasts = kZetaSwatchTargetContrasts, - Color background = ZetaColorBase.white, + Color background = Colors.white, bool adjustPrimary = true, }) { assert( @@ -305,3 +302,31 @@ extension ZetaColorExtensions on Color { return adjustContrast(on: on, target: standard.targetContrast); } } + +/// Extensions on [ZetaSemanticColors] to provide additional functionality. +/// +/// ZetaSemanticColors is a generated class, and so should not be manually edited. +/// Hence, any functions or properties needed should be added in this extension instead. +extension ZetaSemanticColorExtension on ZetaSemanticColors { + /// List of colorful colors. + List get rainbow => [ + primitives.red, + primitives.orange, + primitives.yellow, + primitives.green, + primitives.blue, + primitives.teal, + primitives.pink, + ]; + + /// Map of colorful colors. + Map get rainbowMap => { + 'red': primitives.red, + 'orange': primitives.orange, + 'yellow': primitives.yellow, + 'green': primitives.green, + 'blue': primitives.blue, + 'teal': primitives.teal, + 'pink': primitives.pink, + }; +} diff --git a/lib/src/theme/color_scheme.dart b/lib/src/theme/color_scheme.dart index 3626ea52..ddedabde 100644 --- a/lib/src/theme/color_scheme.dart +++ b/lib/src/theme/color_scheme.dart @@ -22,11 +22,13 @@ import 'constants.dart'; /// Adjusting the themed background of the [AppBar] is straightforward with [ZetaColorScheme], ensuring it aligns with themed colors. /// {@category Theme} @immutable +@Deprecated('This has been deprecated as of 0.16.0') class ZetaColorScheme extends ColorScheme with Diagnosticable { /// Default constructor with no required properties. /// /// Creates a light theme by default using the M2 colors as its default /// theme. + @Deprecated('This has been deprecated as of 0.16.0') const ZetaColorScheme({ required this.zetaColors, diff --git a/lib/src/theme/color_swatch.dart b/lib/src/theme/color_swatch.dart index 25b247f3..087c5976 100644 --- a/lib/src/theme/color_swatch.dart +++ b/lib/src/theme/color_swatch.dart @@ -2,7 +2,6 @@ import 'package:equatable/equatable.dart'; import 'package:flutter/material.dart'; import 'color_extensions.dart'; -import 'colors_base.dart'; import 'contrast.dart'; /// A swatch of colors with values from 10 (light) to 100 (dark). @@ -27,9 +26,9 @@ class ZetaColorSwatch extends ColorSwatch with EquatableMixin { /// This factory constructor creates a color swatch based on a provided primary color. /// The darker and lighter shades are determined by predefined percentage values. /// - /// It ensures that the 60th and 80th shades from swatch are abide by the AA and AAA accessibility standards on `background`, respectively. - /// `background` color defaults to [ZetaColorBase.warm] shade10. + /// It ensures that the 60th and 80th shades from swatch abide by AA and AAA accessibility standards on `background`, respectively. /// {@endtemplate} + // TODO(UX-1144): Find a way to make this better factory ZetaColorSwatch.fromColor( Color primary, { Brightness brightness = Brightness.light, @@ -110,47 +109,55 @@ class ZetaColorSwatch extends ColorSwatch with EquatableMixin { /// /// For [ZetaContrast.aa], it returns 60. /// For [ZetaContrast.aaa], it returns 80. + @Deprecated('This has been deprecated as of 0.16.0') Color get text => shade(contrast.text); /// Returns the color shade for an icon depending on the ZetaContrast value. /// /// For [ZetaContrast.aa], it returns 60. /// For [ZetaContrast.aaa], it returns 80. + @Deprecated('This has been deprecated as of 0.16.0') Color get icon => shade(contrast.icon); /// Returns the color shade for a hover state depending on the ZetaContrast value. /// /// For [ZetaContrast.aa], it returns 70. /// For [ZetaContrast.aaa], it returns 90. + @Deprecated('This has been deprecated as of 0.16.0') Color get hover => shade(contrast.hover); /// Returns the color shade for a selected state depending on the ZetaContrast value. /// /// For [ZetaContrast.aa], it returns 80. /// For [ZetaContrast.aaa], it returns 100. + @Deprecated('This has been deprecated as of 0.16.0') Color get selected => shade(contrast.selected); /// Returns the color shade for a focus state depending on the ZetaContrast value. /// /// For [ZetaContrast.aa], it returns 80. /// For [ZetaContrast.aaa], it returns 100. + @Deprecated('This has been deprecated as of 0.16.0') Color get focus => shade(contrast.focus); /// Returns the color shade for a border depending on the ZetaContrast value. /// /// For [ZetaContrast.aa], it returns 60. /// For [ZetaContrast.aaa], it returns 80. + @Deprecated('This has been deprecated as of 0.16.0') Color get border => shade(contrast.border); /// Returns the color shade for a subtle visual element depending on the ZetaContrast value. /// /// For [ZetaContrast.aa], it returns 40. /// For [ZetaContrast.aaa], it returns 60. + @Deprecated('This has been deprecated as of 0.16.0') Color get subtle => shade(contrast.subtle); /// Returns the color shade for a surface depending on the ZetaContrast value. /// /// For both [ZetaContrast.aa] and [ZetaContrast.aaa], it returns 10. + @Deprecated('This has been deprecated as of 0.16.0') Color get surface => shade(contrast.surface); /// Creates a copy of the current [ZetaColorSwatch] with potential modifications diff --git a/lib/src/theme/colors.dart b/lib/src/theme/colors.dart index 801b8f4e..87b5ffae 100644 --- a/lib/src/theme/colors.dart +++ b/lib/src/theme/colors.dart @@ -1,6 +1,7 @@ import 'package:equatable/equatable.dart'; import 'package:flutter/material.dart'; +import '../../generated/generated.dart'; import 'color_extensions.dart'; import 'color_scheme.dart'; import 'color_swatch.dart'; @@ -10,8 +11,10 @@ import 'contrast.dart'; /// A customizable, token-based color palette, adapting Zeta colors to Flutter's colorScheme. /// {@category Theme} @immutable -class ZetaColors extends Equatable { +@Deprecated('This has been deprecated as of 0.16.0') +class ZetaColors extends Equatable implements ZetaColorSemantics { /// Default constructor for instance of [ZetaColors]. + @Deprecated('This has been deprecated as of 0.16.0') ZetaColors({ this.brightness = Brightness.light, this.contrast = ZetaContrast.aa, @@ -22,20 +25,17 @@ class ZetaColors extends Equatable { ZetaColorSwatch? error, ZetaColorSwatch? cool, ZetaColorSwatch? warm, - ZetaColorSwatch? pure, + ZetaPureColorSwatch? pure, Color? surfacePrimary, Color? surfaceSecondary, Color? surfaceTertiary, bool adjust = true, - @Deprecated('This color has been deprecated as of v0.10.0') link, - @Deprecated('This color has been deprecated as of v0.10.0') linkVisited, - @Deprecated('This color has been deprecated as of v0.10.0') shadow, }) : primary = _adjustedValue(primary, ZetaColorBase.blue, adjust, brightness, contrast), secondary = _adjustedValue(secondary, primary ?? ZetaColorBase.yellow, adjust, brightness, contrast), error = _adjustedValue(error, ZetaColorBase.red, adjust, brightness, contrast), cool = _adjustedValue(cool, ZetaColorBase.cool, adjust, brightness, ZetaContrast.aa), warm = _adjustedValue(warm, ZetaColorBase.warm, adjust, brightness, ZetaContrast.aa), - pure = _adjustedValue(pure, ZetaColorBase.pure, adjust, brightness, ZetaContrast.aa), + pure = _adjustedValuePure(pure, ZetaColorBase.pure, adjust, brightness, ZetaContrast.aa), surfacePrimary = surfacePrimary ?? white, surfaceSecondary = surfaceSecondary ?? _adjustedValue( @@ -74,6 +74,7 @@ class ZetaColors extends Equatable { /// [warm] A color swatch for warmer color tones. Defaults to null. /// [white] A color option for white color. Defaults to null. /// [black] A color option for black color. Defaults to null. + @Deprecated('This has been deprecated as of 0.16.0') factory ZetaColors.light({ ZetaContrast contrast = ZetaContrast.aa, ZetaColorSwatch? primary, @@ -114,6 +115,7 @@ class ZetaColors extends Equatable { /// [warm] A color swatch for warmer color tones. Defaults to null. /// [white] A color option for white color. Defaults to null. /// [black] A color option for black color. Defaults to null. + @Deprecated('This has been deprecated as of 0.16.0') factory ZetaColors.dark({ ZetaContrast contrast = ZetaContrast.aa, ZetaColorSwatch? primary, @@ -143,42 +145,6 @@ class ZetaColors extends Equatable { ); } - /// Hover surface color. - @Deprecated('Use surfaceHover instead. ' 'This color has been deprecated as of v0.10.0.') - Color get surfaceHovered => surfaceHover; - - /// Selected hover surface color. - @Deprecated('Use surfaceSelectedHover instead. ' 'This color has been deprecated as of v0.10.0.') - Color get surfaceSelectedHovered => surfaceSelectedHover; - - /// Positive color. - @Deprecated('Use surfacePositive instead. ' 'This color has been deprecated as of v0.10.0.') - ZetaColorSwatch get positive => surfacePositive; - - /// Negative color. - @Deprecated('Use surfaceNegative instead. ' 'This color has been deprecated as of v0.10.0.') - ZetaColorSwatch get negative => surfaceNegative; - - /// Warning color. - @Deprecated('Use surfaceWarning instead. ' 'This color has been deprecated as of v0.10.0.') - ZetaColorSwatch get warning => surfaceWarning; - - /// Info color. - @Deprecated('Use surfaceInfo instead. ' 'This color has been deprecated as of v0.10.0.') - ZetaColorSwatch get info => surfaceInfo; - - /// Shadow color. - @Deprecated('This color has been deprecated as of v0.10.0.') - Color get shadow => const Color(0x1A49505E); - - /// Link color - @Deprecated('This color has been deprecated as of v0.10.0.') - Color get link => ZetaColorBase.linkLight; - - /// Visited link color - @Deprecated('This color has been deprecated as of v0.10.0.') - Color get linkVisited => ZetaColorBase.linkVisitedLight; - /// Constructor Fields /// Represents the brightness value. @@ -227,7 +193,7 @@ class ZetaColors extends Equatable { /// Defaults to [ZetaColorBase.pure]. /// /// {@macro zeta-color-dark} - final ZetaColorSwatch pure; + final ZetaPureColorSwatch pure; /// White color. /// @@ -606,6 +572,17 @@ class ZetaColors extends Equatable { return adjust ? swatch.apply(brightness: brightness, contrast: contrast) : swatch; } + static ZetaPureColorSwatch _adjustedValuePure( + ZetaPureColorSwatch? value, + ZetaPureColorSwatch defaultValue, + bool adjust, + Brightness brightness, + ZetaContrast contrast, + ) { + final swatch = value ?? defaultValue; + return adjust ? swatch.apply(brightness: brightness, contrast: contrast) : swatch; + } + /// Helper function to adjust color base values based on brightness and contrast static ZetaColorSwatch _adjustedBase( ZetaColorSwatch baseColor, @@ -701,6 +678,21 @@ class ZetaColors extends Equatable { surfaceSecondary, surfaceTertiary, ]; + + @override + ZetaSemanticBorderColors get border => ZetaSemanticBorderColorsAA(primitives: primitives); + + @override + ZetaSemanticMainColors get main => ZetaSemanticMainColorsAA(primitives: primitives); + + @override + ZetaPrimitives get primitives => brightness == Brightness.dark ? ZetaPrimitivesDark() : ZetaPrimitivesLight(); + + @override + ZetaSemanticStateColors get state => ZetaSemanticStateColorsAA(primitives: primitives); + + @override + ZetaSemanticSurfaceColors get surface => ZetaSemanticSurfaceColorsAA(primitives: primitives); } enum _ZetaColorProperties { @@ -736,6 +728,7 @@ enum _ZetaColorProperties { /// Custom extension on ColorScheme which makes [ZetaColors] available through theme context. /// /// A customizable, token-based color palette, adapting Zeta colors to Flutter's colorScheme. +@Deprecated('This has been deprecated as of 0.16.0') extension ZetaColorGetters on ColorScheme { ZetaColorScheme? get _resolve => this is ZetaColorScheme ? this as ZetaColorScheme : null; diff --git a/lib/src/theme/colors_base.dart b/lib/src/theme/colors_base.dart index 96402a2e..5e967bf8 100644 --- a/lib/src/theme/colors_base.dart +++ b/lib/src/theme/colors_base.dart @@ -17,37 +17,30 @@ import '../../zeta_flutter.dart'; /// * [pure] /// * [cool]. /// {@category Theme} +@Deprecated('This has been deprecated as of 0.16.0') abstract final class ZetaColorBase { /// Link color for light mode. - @Deprecated('This color has been deprecated as of v0.10.0') static const Color linkLight = Color(0xFF0257AC); /// Visited link color for light mode. - @Deprecated('This color has been deprecated as of v0.10.0') static const Color linkVisitedLight = Color(0xFF205386); /// Link color for dark mode. - @Deprecated('This color has been deprecated as of v0.10.0') static const Color linkDark = Color(0xFF7ABDFF); /// Visited link color for dark mode. - @Deprecated('This color has been deprecated as of v0.10.0') static const Color linkVisitedDark = Color(0xFF47A3FF); /// Default shadow color. - @Deprecated('This color has been deprecated as of v0.10.0') static const Color shadowLight = Color(0x1A49505E); /// Default shadow color. - @Deprecated('This color has been deprecated as of v0.10.0') static const Color shadowDark = Color(0x1A49505E); /// Grey warm swatch - @Deprecated('Use warm instead. ' 'This color has been deprecated as of v0.10.0.') static const ZetaColorSwatch greyWarm = ZetaColorBase.warm; /// Grey cool swatch - @Deprecated('Use cool instead. ' 'This color has been deprecated as of v0.10.0.') static const ZetaColorSwatch greyCool = ZetaColorBase.cool; /// Pure @@ -58,7 +51,7 @@ abstract final class ZetaColorBase { /// See also: /// * [ZetaColorSwatch]. /// {@endtemplate} - static const ZetaColorSwatch pure = ZetaColorSwatch( + static const ZetaPureColorSwatch pure = ZetaPureColorSwatch( primary: 0xFF151519, swatch: { 0: Color(0xFFffffff), diff --git a/lib/src/theme/constants.dart b/lib/src/theme/constants.dart index bbb6f11e..54aa71d1 100644 --- a/lib/src/theme/constants.dart +++ b/lib/src/theme/constants.dart @@ -21,4 +21,4 @@ const kZetaSwatchTargetContrasts = { }; /// Default icon size for Zeta System. -const double kZetaIconSize = 24; +const double kZetaIconSize = 20; diff --git a/lib/src/theme/theme_data.dart b/lib/src/theme/theme_data.dart index 45e0fd83..8a1dcd01 100644 --- a/lib/src/theme/theme_data.dart +++ b/lib/src/theme/theme_data.dart @@ -1,6 +1,9 @@ +// ignore_for_file: deprecated_member_use_from_same_package + import 'package:equatable/equatable.dart'; import 'package:flutter/material.dart'; +import '../../generated/generated.dart'; import 'color_extensions.dart'; import 'colors.dart'; import 'constants.dart'; @@ -23,11 +26,13 @@ class ZetaThemeData extends Equatable { ZetaThemeData({ this.fontFamily = kZetaFontFamily, this.identifier = 'default', - ZetaContrast contrast = ZetaContrast.aa, - ZetaColors? colorsLight, - ZetaColors? colorsDark, - Color? primary, - Color? secondary, + this.primitives, + this.semantics, + @Deprecated('This has been deprecated as of 0.16.0') ZetaContrast contrast = ZetaContrast.aa, + @Deprecated('This has been deprecated as of 0.16.0') ZetaColors? colorsLight, + @Deprecated('This has been deprecated as of 0.16.0') ZetaColors? colorsDark, + @Deprecated('This has been deprecated as of 0.16.0') Color? primary, + @Deprecated('This has been deprecated as of 0.16.0') Color? secondary, }) : _colorsDark = (primary != null ? ZetaColors.dark( contrast: contrast, @@ -62,6 +67,7 @@ class ZetaThemeData extends Equatable { /// The colors used for the light mode of the Zeta theme. /// /// Defaults to a light mode color palette with default Zeta colors if not explicitly provided. + @Deprecated('This has been deprecated as of 0.16.0') ZetaColors get colorsLight => _colorsLight; final ZetaColors _colorsDark; @@ -69,8 +75,15 @@ class ZetaThemeData extends Equatable { /// The colors used for the dark mode of the Zeta theme. /// /// Defaults to a dark mode color palette with default Zeta colors if not explicitly provided. + @Deprecated('This has been deprecated as of 0.16.0') ZetaColors get colorsDark => _colorsDark; + /// The semantics used for the Zeta theme. + final ZetaSemantics? semantics; + + /// The primitives used for the Zeta theme. + final ZetaPrimitives? primitives; + /// Applies the given [contrast] to the current [ZetaThemeData] and returns a new [ZetaThemeData] with the updated contrast. ZetaThemeData apply({ required ZetaContrast contrast, @@ -88,7 +101,5 @@ class ZetaThemeData extends Equatable { List get props => [ fontFamily, identifier, - _colorsLight, - _colorsDark, ]; } diff --git a/lib/src/theme/theme_service.dart b/lib/src/theme/theme_service.dart index fc2d7af0..9ce4f206 100644 --- a/lib/src/theme/theme_service.dart +++ b/lib/src/theme/theme_service.dart @@ -1,13 +1,23 @@ import 'package:flutter/material.dart'; +import 'package:shared_preferences/shared_preferences.dart'; import 'contrast.dart'; import 'theme_data.dart'; +const String _kThemeMode = 'themeMode'; +const String _kContrast = 'contrast'; +const String _kLight = 'light'; +const String _kDark = 'dark'; +const String _kAAA = 'aaa'; + /// `ZetaThemeService` is an abstract class. /// It provides the structure for loading and saving themes in Zeta application. /// {@category Theme} abstract class ZetaThemeService { + /// Constructor for `ZetaThemeService`. + const ZetaThemeService(); + /// Asynchronously load the theme data. /// /// This method returns a `Future` that when complete will produce a @@ -36,3 +46,45 @@ abstract class ZetaThemeService { required ZetaContrast contrast, }); } + +/// A default implementation of `ZetaThemeService` that uses `SharedPreferences` to store the theme data. +class ZetaDefaultThemeService extends ZetaThemeService { + /// Constructor for `ZetaDefaultThemeService`. + const ZetaDefaultThemeService(); + + @override + Future<(ZetaThemeData?, ThemeMode?, ZetaContrast?)> loadTheme() async { + final preferences = await SharedPreferences.getInstance(); + + final modeString = preferences.getString(_kThemeMode); + final themeMode = modeString == _kLight + ? ThemeMode.light + : modeString == _kDark + ? ThemeMode.dark + : ThemeMode.system; + + final contrastString = preferences.getString(_kContrast); + final contrast = contrastString == _kAAA ? ZetaContrast.aaa : ZetaContrast.aa; + + return (null, themeMode, contrast); + } + + @override + Future saveTheme({ + required ZetaThemeData themeData, + required ThemeMode themeMode, + required ZetaContrast contrast, + }) async { + final preferences = await SharedPreferences.getInstance(); + await preferences.setString('theme', themeData.identifier); + final modeString = themeMode == ThemeMode.light + ? 'light' + : themeMode == ThemeMode.dark + ? 'dark' + : 'system'; + await preferences.setString('themeMode', modeString); + + final contrastString = contrast == ZetaContrast.aaa ? 'aaa' : 'aa'; + await preferences.setString('contrast', contrastString); + } +} diff --git a/lib/src/theme/tokens.dart b/lib/src/theme/tokens.dart index 4ec1e093..35ff9bb9 100644 --- a/lib/src/theme/tokens.dart +++ b/lib/src/theme/tokens.dart @@ -191,7 +191,7 @@ class ZetaSpacing { /// Semantic zeta radii. /// {@category Theme} -@Deprecated('Use Zeta.of(contest).radius instead ' 'This size has been deprecated as of 0.11.0') +@Deprecated('Use Zeta.of(contest).radius instead ' 'This size has been deprecated as of 0.16.0') class ZetaRadius { /// No radius => 0px radius. static const BorderRadius none = BorderRadius.zero; @@ -292,7 +292,7 @@ class ZetaSpacingBase { ///Tokens that are used for Border Radius ///{@category Theme} -@Deprecated('Use Zeta.of(contest).radius instead ' 'This size has been deprecated as of 0.11.0') +@Deprecated('Use Zeta.of(contest).radius instead ' 'This size has been deprecated as of 0.16.0') class ZetaRadiusBase { /// 4px radius static const BorderRadius s = BorderRadius.all(Radius.circular(4)); @@ -338,6 +338,9 @@ class ZetaAnimationLength { /// Temporary class to hold border values. // TODO(Tokens): Remove this class and design / develop Zeta.of(context).border instead. abstract final class ZetaBorders { - /// Border width - static double get borderWidth => 2; + /// Small border width. + static double get small => 0.5; + + /// Medium border width + static double get medium => 2; } diff --git a/lib/src/utils/extensions.dart b/lib/src/utils/extensions.dart index 014819ec..b54aea82 100644 --- a/lib/src/utils/extensions.dart +++ b/lib/src/utils/extensions.dart @@ -1,7 +1,5 @@ import 'package:flutter/material.dart'; -import '../../zeta_flutter.dart'; - /// Extension to add dividers to any view that can take an iterable. /// /// Iterable can be converted to a list with [toList]. @@ -69,26 +67,6 @@ extension NumExtensions on num? { } } -/// Extensions on [ZetaWidgetStatus]. -extension ColorSwatches on ZetaWidgetStatus { - /// Gets color swatch from [ZetaWidgetStatus] - ZetaColorSwatch colorSwatch(BuildContext context) { - final colors = Zeta.of(context).colors; - switch (this) { - case ZetaWidgetStatus.info: - return colors.surfaceInfo; - case ZetaWidgetStatus.positive: - return colors.surfacePositive; - case ZetaWidgetStatus.warning: - return colors.surfaceWarning; - case ZetaWidgetStatus.negative: - return colors.surfaceNegative; - case ZetaWidgetStatus.neutral: - return colors.cool; - } - } -} - /// Extensions on [String]. extension StringExtensions on String? { /// Returns initials from a name. diff --git a/lib/src/utils/zeta.dart b/lib/src/utils/zeta.dart index 511706b5..e22121d6 100644 --- a/lib/src/utils/zeta.dart +++ b/lib/src/utils/zeta.dart @@ -1,3 +1,5 @@ +// ignore_for_file: deprecated_member_use_from_same_package + import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @@ -17,7 +19,7 @@ class Zeta extends InheritedWidget { required Brightness mediaBrightness, required this.contrast, required this.themeMode, - required this.themeData, + this.themeData, required super.child, this.rounded = true, }) : _mediaBrightness = mediaBrightness; @@ -32,7 +34,7 @@ class Zeta extends InheritedWidget { final ThemeMode themeMode; /// Provides the theme data for the app, which contains all the theming information. - final ZetaThemeData themeData; + final ZetaThemeData? themeData; /// Internal property to get the system brightness. /// Used to determine the theme mode when it's set to [ThemeMode.system]. @@ -49,13 +51,17 @@ class Zeta extends InheritedWidget { /// /// It determines the appropriate color set (light or dark) based on the theme mode /// and system brightness. - ZetaColors get colors { - if (themeMode == ThemeMode.system) { - return _mediaBrightness == Brightness.light ? themeData.colorsLight : themeData.colorsDark; - } else if (themeMode == ThemeMode.light) { - return themeData.colorsLight; + ZetaColorSemantics get colors { + if (themeData == null) { + return _semantics.colors; } else { - return themeData.colorsDark; + if (themeMode == ThemeMode.system) { + return _mediaBrightness == Brightness.light ? themeData!.colorsLight : themeData!.colorsDark; + } else if (themeMode == ThemeMode.light) { + return themeData!.colorsLight; + } else { + return themeData!.colorsDark; + } } } @@ -134,9 +140,9 @@ class Zeta extends InheritedWidget { properties ..add(EnumProperty('themeMode', themeMode)) ..add(EnumProperty('contrast', contrast)) - ..add(DiagnosticsProperty('themeData', themeData)) + ..add(DiagnosticsProperty('themeData', themeData)) ..add(DiagnosticsProperty('rounded', rounded)) - ..add(DiagnosticsProperty('colors', colors)) + ..add(DiagnosticsProperty('colors', colors)) ..add(EnumProperty('brightness', brightness)) ..add(DiagnosticsProperty('radius', radius)) ..add(DiagnosticsProperty('spacing', spacing)); diff --git a/lib/src/utils/zeta_provider.dart b/lib/src/utils/zeta_provider.dart index 62ff001f..218ad17a 100644 --- a/lib/src/utils/zeta_provider.dart +++ b/lib/src/utils/zeta_provider.dart @@ -1,4 +1,4 @@ -// ignore_for_file: prefer_function_declarations_over_variables +// ignore_for_file: prefer_function_declarations_over_variables, deprecated_member_use_from_same_package import 'dart:async'; @@ -36,7 +36,7 @@ class ZetaProvider extends StatefulWidget with Diagnosticable { this.initialThemeMode = ThemeMode.system, this.initialContrast = ZetaContrast.aa, ZetaThemeData? initialThemeData, - this.themeService, + this.themeService = const ZetaDefaultThemeService(), this.initialRounded = true, }) : initialZetaThemeData = initialThemeData ?? ZetaThemeData(), baseBuilder = _emptyBase, @@ -50,22 +50,22 @@ class ZetaProvider extends StatefulWidget with Diagnosticable { ZetaProvider.base({ super.key, required ZetaBaseAppBuilder builder, - this.initialThemeMode = ThemeMode.system, - this.initialContrast = ZetaContrast.aa, + this.initialThemeMode, + this.initialContrast, ZetaThemeData? initialZetaThemeData, this.initialLightThemeData, this.initialDarkThemeData, this.initialRounded = true, + this.themeService = const ZetaDefaultThemeService(), }) : baseBuilder = builder, initialZetaThemeData = initialZetaThemeData ?? ZetaThemeData(), - builder = _emptyBuilder, - themeService = null; + builder = _emptyBuilder; /// Specifies the initial theme mode for the app. /// /// It can be one of the values: [ThemeMode.system], [ThemeMode.light], or [ThemeMode.dark]. /// Defaults to [ThemeMode.system]. - final ThemeMode initialThemeMode; + final ThemeMode? initialThemeMode; /// Provides the initial theme data for the app. /// @@ -76,7 +76,7 @@ class ZetaProvider extends StatefulWidget with Diagnosticable { /// Specifies the initial contrast setting for the app. /// /// Defaults to [ZetaContrast.aa]. - final ZetaContrast initialContrast; + final ZetaContrast? initialContrast; /// A builder function to construct the widget tree using the provided theming information. /// @@ -92,7 +92,7 @@ class ZetaProvider extends StatefulWidget with Diagnosticable { /// A `ZetaThemeService` /// /// It provides the structure for loading and saving themes in Zeta application. - final ZetaThemeService? themeService; + final ZetaThemeService themeService; /// Light [ThemeData] used in [ZetaProvider.base] constructor as the foundation for a custom theme. final ThemeData? initialLightThemeData; @@ -149,6 +149,8 @@ class ZetaProvider extends StatefulWidget with Diagnosticable { /// The state associated with [ZetaProvider]. /// {@category Utils} class ZetaProviderState extends State with Diagnosticable, WidgetsBindingObserver { + bool _gotTheme = false; + // Fields for ZetaThemeManager. /// Represents the late initialization of the ZetaContrast value. @@ -193,23 +195,39 @@ class ZetaProviderState extends State with Diagnosticable, Widgets // Set the initial brightness with the system's current brightness from the first view of the platform dispatcher. _platformBrightness = MediaQueryData.fromView(PlatformDispatcher.instance.views.first).platformBrightness; - // Set the initial theme mode. - _themeMode = widget.initialThemeMode; - - // Set the initial contrast. - _contrast = widget.initialContrast; - // Sets the initial rounded. _rounded = widget.initialRounded; - // Apply the initial contrast to the theme data. - _zetaThemeData = widget.initialZetaThemeData.apply(contrast: _contrast); - // Set the initial light [ThemeData]. _lightThemeData = widget.initialLightThemeData; // Set the initial light [ThemeData]. _darkThemeData = widget.initialDarkThemeData; + + if (widget.initialThemeMode != null) { + _themeMode = widget.initialThemeMode!; + } + if (widget.initialContrast != null) { + _contrast = widget.initialContrast!; + _zetaThemeData = widget.initialZetaThemeData.apply(contrast: _contrast); + } + } + + /// Retrieves the theme values from the shared preferences. + Future getThemeValuesFromPreferences() async { + final (themeData, themeMode, contrast) = await widget.themeService.loadTheme(); + + // Set the initial theme mode. + _themeMode = themeMode ?? widget.initialThemeMode ?? ThemeMode.system; + + // Set the initial contrast. + _contrast = contrast ?? widget.initialContrast ?? ZetaContrast.aa; + + // Apply the initial contrast to the theme data. + _zetaThemeData = widget.initialZetaThemeData.apply(contrast: _contrast); + + // Ensure this is only triggered once. + _gotTheme = true; } /// Clean up function to be called when this object is removed from the tree. @@ -259,14 +277,31 @@ class ZetaProviderState extends State with Diagnosticable, Widgets @override Widget build(BuildContext context) { + if ((widget.initialContrast != null && widget.initialThemeMode != null) || _gotTheme) { + return _getChild(); + } + return FutureBuilder( + // ignore: discarded_futures + future: getThemeValuesFromPreferences(), + builder: (BuildContext context, AsyncSnapshot snapshot) { + if (snapshot.connectionState == ConnectionState.waiting) { + return const Center(child: CircularProgressIndicator()); + } + + return _getChild(); + }, + ); + } + + Widget _getChild() { if (widget.baseBuilder != _emptyBase) { - return Zeta( - themeMode: _themeMode, - themeData: _zetaThemeData, + return _InternalProvider( contrast: _contrast, - mediaBrightness: _platformBrightness, + themeMode: _themeMode, + zetaThemeData: _zetaThemeData, rounded: _rounded, - child: widget.baseBuilder( + platformBrightness: _platformBrightness, + widget: widget.baseBuilder( context, generateZetaTheme( brightness: Brightness.light, @@ -281,16 +316,16 @@ class ZetaProviderState extends State with Diagnosticable, Widgets _themeMode, ), ); + } else { + return _InternalProvider( + contrast: _contrast, + themeMode: _themeMode, + zetaThemeData: _zetaThemeData, + rounded: _rounded, + platformBrightness: _platformBrightness, + widget: widget.builder(context, _zetaThemeData, _themeMode), + ); } - - return Zeta( - themeMode: _themeMode, - themeData: _zetaThemeData, - contrast: _contrast, - rounded: _rounded, - mediaBrightness: _platformBrightness, - child: widget.builder(context, _zetaThemeData, _themeMode), - ); } @override @@ -302,8 +337,8 @@ class ZetaProviderState extends State with Diagnosticable, Widgets oldWidget.initialZetaThemeData != widget.initialZetaThemeData || oldWidget.initialRounded != widget.initialRounded) { setState(() { - _themeMode = widget.initialThemeMode; - _contrast = widget.initialContrast; + _themeMode = widget.initialThemeMode ?? _themeMode; + _contrast = widget.initialContrast ?? _contrast; _zetaThemeData = widget.initialZetaThemeData.apply(contrast: _contrast); _lightThemeData = widget.initialLightThemeData; _rounded = widget.initialRounded; @@ -347,7 +382,7 @@ class ZetaProviderState extends State with Diagnosticable, Widgets void _saveThemeChange() { unawaited( - widget.themeService?.saveTheme( + widget.themeService.saveTheme( themeData: _zetaThemeData, themeMode: _themeMode, contrast: _contrast, @@ -365,6 +400,59 @@ class ZetaProviderState extends State with Diagnosticable, Widgets } } +class _InternalProvider extends StatefulWidget { + const _InternalProvider({ + required this.contrast, + required this.themeMode, + required this.zetaThemeData, + required this.rounded, + required this.platformBrightness, + required this.widget, + }); + + /// Represents the late initialization of the ZetaContrast value. + final ZetaContrast contrast; + + /// Represents the late initialization of the ThemeMode value. + final ThemeMode themeMode; + + final ZetaThemeData zetaThemeData; + + final bool rounded; + + final Brightness platformBrightness; + + final Widget widget; + + @override + State<_InternalProvider> createState() => __InternalProviderState(); + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(EnumProperty('themeMode', themeMode)) + ..add(EnumProperty('contrast', contrast)) + ..add(EnumProperty('platformBrightness', platformBrightness)) + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(DiagnosticsProperty('zetaThemeData', zetaThemeData)); + } +} + +class __InternalProviderState extends State<_InternalProvider> { + @override + Widget build(BuildContext context) { + return Zeta( + themeMode: widget.themeMode, + themeData: widget.zetaThemeData, + contrast: widget.contrast, + rounded: widget.rounded, + mediaBrightness: widget.platformBrightness, + child: widget.widget, + ); + } +} + /// Creates a variant of [ThemeData] with added [Zeta] styles. ThemeData generateZetaTheme({ required Brightness brightness, @@ -484,7 +572,8 @@ ThemeData generateZetaTheme({ iconTheme: IconThemeData( size: kZetaIconSize, color: (zetaThemeData != null - ? (brightness == Brightness.dark ? zetaThemeData.colorsDark : zetaThemeData.colorsLight).iconDefault + ? (zetaThemeData.semantics?.colors.main.defaultColor ?? + (brightness == Brightness.dark ? zetaThemeData.colorsDark : zetaThemeData.colorsLight).main.defaultColor) : colorScheme.onSurface), ), ); diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart index 27172c51..eeff2f0e 100644 --- a/lib/zeta_flutter.dart +++ b/lib/zeta_flutter.dart @@ -3,5 +3,6 @@ library zeta_flutter; export 'generated/generated.dart'; export 'src/components/components.dart'; +export 'src/temp_colors.dart'; export 'src/theme/theme.dart'; export 'src/utils/utils.dart'; diff --git a/pubspec.yaml b/pubspec.yaml index 6f2d6a47..bb6bdb54 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -28,6 +28,7 @@ dependencies: flutter_slidable: ^3.1.0 intl: ^0.19.0 mask_text_input_formatter: ^2.9.0 + shared_preferences: ^2.3.2 web: ^1.0.0 dev_dependencies: diff --git a/test/src/components/accordion/accordion_test.dart b/test/src/components/accordion/accordion_test.dart index 7cc78fe4..2120e703 100644 --- a/test/src/components/accordion/accordion_test.dart +++ b/test/src/components/accordion/accordion_test.dart @@ -142,12 +142,12 @@ void main() { // Verify that the textButton color matches the hover color expect( textButton.style!.overlayColor?.resolve({WidgetState.hovered}), - ZetaColorBase.cool.shade20, + ZetaPrimitivesLight().cool.shade20, ); expect( textButton.style!.overlayColor?.resolve({WidgetState.focused}), Colors.transparent, ); - expect(textButton.style!.side?.resolve({WidgetState.focused})?.color, ZetaColorBase.blue.shade50); + expect(textButton.style!.side?.resolve({WidgetState.focused})?.color, ZetaPrimitivesLight().blue.shade50); }); } diff --git a/test/src/components/badge/priority_pill_test.dart b/test/src/components/badge/priority_pill_test.dart index 28c53e1b..6e3db321 100644 --- a/test/src/components/badge/priority_pill_test.dart +++ b/test/src/components/badge/priority_pill_test.dart @@ -111,10 +111,10 @@ void main() { }); testWidgets('debugFillProperties works correctly', (WidgetTester tester) async { final diagnostics = DiagnosticPropertiesBuilder(); - const ZetaPriorityPill( + ZetaPriorityPill( label: 'Test label', rounded: false, - customColor: ZetaColorBase.blue, + customColor: ZetaPrimitivesLight().blue, index: '1', ).debugFillProperties(diagnostics); diff --git a/test/src/components/button/button_test.dart b/test/src/components/button/button_test.dart index 4acf577a..bedde70b 100644 --- a/test/src/components/button/button_test.dart +++ b/test/src/components/button/button_test.dart @@ -228,11 +228,11 @@ void main() { await gesture.moveTo(tester.getCenter(find.byType(ZetaButton))); await tester.pumpAndSettle(); - expect(filledButton.style?.backgroundColor?.resolve({WidgetState.hovered}), ZetaColorBase.blue.shade50); + expect(filledButton.style?.backgroundColor?.resolve({WidgetState.hovered}), ZetaPrimitivesLight().blue.shade50); await gesture.down(tester.getCenter(find.byType(ZetaButton))); await tester.pumpAndSettle(); - expect(filledButton.style?.backgroundColor?.resolve({WidgetState.pressed}), ZetaColorBase.blue.shade70); + expect(filledButton.style?.backgroundColor?.resolve({WidgetState.pressed}), ZetaPrimitivesLight().blue.shade70); await gesture.up(); @@ -262,7 +262,7 @@ void main() { expect(button.size, ZetaWidgetSize.medium); expect( filledButton.style?.side?.resolve({WidgetState.focused}), - BorderSide(color: ZetaColorBase.blue, width: ZetaBorders.borderWidth), + BorderSide(color: ZetaPrimitivesLight().blue.shade50, width: ZetaBorders.medium), ); }); testWidgets('debugFillProperties works correctly', (WidgetTester tester) async { diff --git a/test/src/components/button/golden/button_secondary.png b/test/src/components/button/golden/button_secondary.png index 984e16f5..a21aab5f 100644 Binary files a/test/src/components/button/golden/button_secondary.png and b/test/src/components/button/golden/button_secondary.png differ diff --git a/test/src/components/chat_item/chat_item_test.dart b/test/src/components/chat_item/chat_item_test.dart index d2a685b5..3168ef0d 100644 --- a/test/src/components/chat_item/chat_item_test.dart +++ b/test/src/components/chat_item/chat_item_test.dart @@ -2,17 +2,28 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:intl/intl.dart'; +import 'package:mockito/annotations.dart'; +import 'package:mockito/mockito.dart'; import 'package:path/path.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; import '../../../test_utils/test_app.dart'; import '../../../test_utils/tolerant_comparator.dart'; import '../../../test_utils/utils.dart'; +import 'chat_item_test.mocks.dart'; +@GenerateNiceMocks([ + MockSpec(), +]) void main() { + late MockZetaSemanticColors mockZetaColors; + setUpAll(() { final testUri = Uri.parse(getCurrentPath('chat_item')); goldenFileComparator = TolerantComparator(testUri, tolerance: 0.01); + + mockZetaColors = MockZetaSemanticColors(); + when(mockZetaColors.primitives).thenReturn(ZetaPrimitivesLight()); }); group('ZetaChatItem Tests', () { @@ -384,27 +395,31 @@ void main() { await tester.pumpWidget( TestApp( - home: Column( - children: [ - ZetaChatItem( - time: time, - leading: const ZetaAvatar(initials: 'AZ'), - slidableActions: [ - ZetaSlidableAction( - onPressed: () {}, - color: ZetaColorBase.orange, - icon: Icons.star, - ), - ZetaSlidableAction( - onPressed: () {}, - color: ZetaColorBase.red, - icon: Icons.delete, + home: Builder( + builder: (context) { + return Column( + children: [ + ZetaChatItem( + time: time, + leading: const ZetaAvatar(initials: 'AZ'), + slidableActions: [ + ZetaSlidableAction( + onPressed: () {}, + color: Zeta.of(context).colors.primitives.orange, + icon: Icons.star, + ), + ZetaSlidableAction( + onPressed: () {}, + color: Zeta.of(context).colors.primitives.red, + icon: Icons.delete, + ), + ], + title: title, + subtitle: subtitle, ), ], - title: title, - subtitle: subtitle, - ), - ], + ); + }, ), ), ); @@ -477,7 +492,7 @@ void main() { expect(diagnosticsZetaSlidableAction.finder('icon'), 'IconData(U+0E5F9)'); expect(diagnosticsZetaSlidableAction.finder('foregroundColor'), null); expect(diagnosticsZetaSlidableAction.finder('backgroundColor'), null); - expect(diagnosticsZetaSlidableAction.finder('color'), ZetaColorBase.blue.toString()); + expect(diagnosticsZetaSlidableAction.finder('color'), 'null'); expect(diagnosticsZetaSlidableAction.finder('semanticLabel'), 'null'); expect(diagnosticsZetaSlidableAction.finder('paleColor'), 'false'); }); diff --git a/test/src/components/chat_item/chat_item_test.mocks.dart b/test/src/components/chat_item/chat_item_test.mocks.dart new file mode 100644 index 00000000..8dca17f8 --- /dev/null +++ b/test/src/components/chat_item/chat_item_test.mocks.dart @@ -0,0 +1,141 @@ +// Mocks generated by Mockito 5.4.4 from annotations +// in zeta_flutter/test/src/components/chat_item/chat_item_test.dart. +// Do not manually edit this file. + +// ignore_for_file: no_leading_underscores_for_library_prefixes +import 'package:mockito/mockito.dart' as _i1; +import 'package:zeta_flutter/generated/tokens/primitives.g.dart' as _i2; +import 'package:zeta_flutter/generated/tokens/semantics.g.dart' as _i3; + +// ignore_for_file: type=lint +// ignore_for_file: avoid_redundant_argument_values +// ignore_for_file: avoid_setters_without_getters +// ignore_for_file: comment_references +// ignore_for_file: deprecated_member_use +// ignore_for_file: deprecated_member_use_from_same_package +// ignore_for_file: implementation_imports +// ignore_for_file: invalid_use_of_visible_for_testing_member +// ignore_for_file: prefer_const_constructors +// ignore_for_file: unnecessary_parenthesis +// ignore_for_file: camel_case_types +// ignore_for_file: subtype_of_sealed_class + +class _FakeZetaPrimitives_0 extends _i1.SmartFake implements _i2.ZetaPrimitives { + _FakeZetaPrimitives_0( + Object parent, + Invocation parentInvocation, + ) : super( + parent, + parentInvocation, + ); +} + +class _FakeZetaSemanticMainColors_1 extends _i1.SmartFake implements _i3.ZetaSemanticMainColors { + _FakeZetaSemanticMainColors_1( + Object parent, + Invocation parentInvocation, + ) : super( + parent, + parentInvocation, + ); +} + +class _FakeZetaSemanticBorderColors_2 extends _i1.SmartFake implements _i3.ZetaSemanticBorderColors { + _FakeZetaSemanticBorderColors_2( + Object parent, + Invocation parentInvocation, + ) : super( + parent, + parentInvocation, + ); +} + +class _FakeZetaSemanticSurfaceColors_3 extends _i1.SmartFake implements _i3.ZetaSemanticSurfaceColors { + _FakeZetaSemanticSurfaceColors_3( + Object parent, + Invocation parentInvocation, + ) : super( + parent, + parentInvocation, + ); +} + +class _FakeZetaSemanticStateColors_4 extends _i1.SmartFake implements _i3.ZetaSemanticStateColors { + _FakeZetaSemanticStateColors_4( + Object parent, + Invocation parentInvocation, + ) : super( + parent, + parentInvocation, + ); +} + +/// A class which mocks [ZetaSemanticColors]. +/// +/// See the documentation for Mockito's code generation for more information. +class MockZetaSemanticColors extends _i1.Mock implements _i3.ZetaSemanticColors { + @override + _i2.ZetaPrimitives get primitives => (super.noSuchMethod( + Invocation.getter(#primitives), + returnValue: _FakeZetaPrimitives_0( + this, + Invocation.getter(#primitives), + ), + returnValueForMissingStub: _FakeZetaPrimitives_0( + this, + Invocation.getter(#primitives), + ), + ) as _i2.ZetaPrimitives); + + @override + _i3.ZetaSemanticMainColors get main => (super.noSuchMethod( + Invocation.getter(#main), + returnValue: _FakeZetaSemanticMainColors_1( + this, + Invocation.getter(#main), + ), + returnValueForMissingStub: _FakeZetaSemanticMainColors_1( + this, + Invocation.getter(#main), + ), + ) as _i3.ZetaSemanticMainColors); + + @override + _i3.ZetaSemanticBorderColors get border => (super.noSuchMethod( + Invocation.getter(#border), + returnValue: _FakeZetaSemanticBorderColors_2( + this, + Invocation.getter(#border), + ), + returnValueForMissingStub: _FakeZetaSemanticBorderColors_2( + this, + Invocation.getter(#border), + ), + ) as _i3.ZetaSemanticBorderColors); + + @override + _i3.ZetaSemanticSurfaceColors get surface => (super.noSuchMethod( + Invocation.getter(#surface), + returnValue: _FakeZetaSemanticSurfaceColors_3( + this, + Invocation.getter(#surface), + ), + returnValueForMissingStub: _FakeZetaSemanticSurfaceColors_3( + this, + Invocation.getter(#surface), + ), + ) as _i3.ZetaSemanticSurfaceColors); + + @override + _i3.ZetaSemanticStateColors get state => (super.noSuchMethod( + Invocation.getter(#state), + returnValue: _FakeZetaSemanticStateColors_4( + this, + Invocation.getter(#state), + ), + returnValueForMissingStub: _FakeZetaSemanticStateColors_4( + this, + Invocation.getter(#state), + ), + ) as _i3.ZetaSemanticStateColors); +} diff --git a/test/src/components/chat_item/golden/chat_item_highlighted.png b/test/src/components/chat_item/golden/chat_item_highlighted.png index 27b3a7bd..1c72ca3f 100644 Binary files a/test/src/components/chat_item/golden/chat_item_highlighted.png and b/test/src/components/chat_item/golden/chat_item_highlighted.png differ diff --git a/test/src/components/checkbox/checkbox_test.dart b/test/src/components/checkbox/checkbox_test.dart index f7c85810..117d8cf2 100644 --- a/test/src/components/checkbox/checkbox_test.dart +++ b/test/src/components/checkbox/checkbox_test.dart @@ -100,7 +100,10 @@ void main() { final animatedContainerFinder = find.byType(AnimatedContainer); final AnimatedContainer animatedContainer = tester.firstWidget(animatedContainerFinder); - expect((animatedContainer.decoration as BoxDecoration?)?.boxShadow?.first.color, ZetaColorBase.blue.shade50); + expect( + (animatedContainer.decoration as BoxDecoration?)?.boxShadow?.first.color, + ZetaPrimitivesLight().blue.shade50, + ); final gesture = await tester.createGesture(kind: PointerDeviceKind.mouse); await gesture.addPointer(location: Offset.zero); diff --git a/test/src/components/dialpad/dialpad_test.dart b/test/src/components/dialpad/dialpad_test.dart index 1b19da10..9921bfbd 100644 --- a/test/src/components/dialpad/dialpad_test.dart +++ b/test/src/components/dialpad/dialpad_test.dart @@ -255,7 +255,7 @@ void main() { await gesture.moveTo(tester.getCenter(buttonFinder)); await tester.pumpAndSettle(); - expect(inkWell.overlayColor?.resolve({WidgetState.hovered}), ZetaColorBase.cool.shade20); + expect(inkWell.overlayColor?.resolve({WidgetState.hovered}), ZetaPrimitivesLight().cool.shade20); await expectLater( buttonFinder, diff --git a/test/src/components/fabs/fab_test.dart b/test/src/components/fabs/fab_test.dart index 422ef853..7ddb016b 100644 --- a/test/src/components/fabs/fab_test.dart +++ b/test/src/components/fabs/fab_test.dart @@ -138,7 +138,7 @@ void main() { await gesture.moveTo(tester.getCenter(fabFinder)); await tester.pumpAndSettle(); - expect(filledButton.style?.backgroundColor?.resolve({WidgetState.hovered}), ZetaColorBase.yellow.shade70); + expect(filledButton.style?.backgroundColor?.resolve({WidgetState.hovered}), ZetaPrimitivesLight().yellow.shade30); await gesture.moveTo(Offset.zero); await tester.pumpAndSettle(); @@ -147,7 +147,7 @@ void main() { await tester.pumpAndSettle(); expect( filledButton.style?.side?.resolve({WidgetState.focused}), - BorderSide(color: ZetaColorBase.blue[50]!, width: ZetaBorders.borderWidth), + BorderSide(color: ZetaPrimitivesLight().blue.shade50, width: ZetaBorders.medium), ); }); diff --git a/test/src/components/fabs/golden/FAB_inverse.png b/test/src/components/fabs/golden/FAB_inverse.png index 41bf5c0f..c6d630fc 100644 Binary files a/test/src/components/fabs/golden/FAB_inverse.png and b/test/src/components/fabs/golden/FAB_inverse.png differ diff --git a/test/src/components/fabs/golden/FAB_pressed.png b/test/src/components/fabs/golden/FAB_pressed.png index 10365d11..6be7b8db 100644 Binary files a/test/src/components/fabs/golden/FAB_pressed.png and b/test/src/components/fabs/golden/FAB_pressed.png differ diff --git a/test/src/components/fabs/golden/FAB_secondary.png b/test/src/components/fabs/golden/FAB_secondary.png index 40f2cf3b..a55e9f06 100644 Binary files a/test/src/components/fabs/golden/FAB_secondary.png and b/test/src/components/fabs/golden/FAB_secondary.png differ diff --git a/test/src/components/in_page_banner/golden/in_page_banner_buttons.png b/test/src/components/in_page_banner/golden/in_page_banner_buttons.png index 1b34beed..e7ed4b12 100644 Binary files a/test/src/components/in_page_banner/golden/in_page_banner_buttons.png and b/test/src/components/in_page_banner/golden/in_page_banner_buttons.png differ diff --git a/test/src/components/in_page_banner/in_page_banner_test.dart b/test/src/components/in_page_banner/in_page_banner_test.dart index a15b4205..dc33852f 100644 --- a/test/src/components/in_page_banner/in_page_banner_test.dart +++ b/test/src/components/in_page_banner/in_page_banner_test.dart @@ -28,7 +28,7 @@ void main() { expect(box.decoration.runtimeType, BoxDecoration); final BoxDecoration decoration = box.decoration as BoxDecoration; - expect(decoration.color, ZetaColorBase.purple.shade10); + expect(decoration.color, ZetaPrimitivesLight().purple.shade10); await expectLater( find.byType(ZetaInPageBanner), @@ -47,7 +47,7 @@ void main() { final DecoratedBox box = tester.firstWidget(decoratedBoxFinder); expect(box.decoration.runtimeType, BoxDecoration); final BoxDecoration decoration = box.decoration as BoxDecoration; - expect(decoration.color, ZetaColorBase.red.shade10); + expect(decoration.color, ZetaPrimitivesLight().red.shade10); await expectLater( find.byType(ZetaInPageBanner), matchesGoldenFile(join(getCurrentPath('in_page_banner'), 'in_page_banner_negative.png')), @@ -63,7 +63,7 @@ void main() { final DecoratedBox box = tester.firstWidget(decoratedBoxFinder); expect(box.decoration.runtimeType, BoxDecoration); final BoxDecoration decoration = box.decoration as BoxDecoration; - expect(decoration.color, ZetaColorBase.green.shade10); + expect(decoration.color, ZetaPrimitivesLight().green.shade10); await expectLater( find.byType(ZetaInPageBanner), matchesGoldenFile(join(getCurrentPath('in_page_banner'), 'in_page_banner_positive.png')), @@ -93,7 +93,7 @@ void main() { final DecoratedBox box = tester.firstWidget(decoratedBoxFinder); expect(box.decoration.runtimeType, BoxDecoration); final BoxDecoration decoration = box.decoration as BoxDecoration; - expect(decoration.color, ZetaColorBase.cool.shade10); + expect(decoration.color, ZetaPrimitivesLight().pure.shade0); await tester.tap(find.byKey(key)); await tester.pumpAndSettle(); diff --git a/test/src/components/tooltip/tooltip_test.mocks.dart b/test/src/components/tooltip/tooltip_test.mocks.dart index 100599a8..fd260b9d 100644 --- a/test/src/components/tooltip/tooltip_test.mocks.dart +++ b/test/src/components/tooltip/tooltip_test.mocks.dart @@ -24,8 +24,9 @@ import 'package:zeta_flutter/zeta_flutter.dart' as _i2; // ignore_for_file: camel_case_types // ignore_for_file: subtype_of_sealed_class -class _FakeZetaThemeData_0 extends _i1.SmartFake implements _i2.ZetaThemeData { - _FakeZetaThemeData_0( +class _FakeZetaSemanticColors_0 extends _i1.SmartFake + implements _i2.ZetaSemanticColors { + _FakeZetaSemanticColors_0( Object parent, Invocation parentInvocation, ) : super( @@ -34,8 +35,9 @@ class _FakeZetaThemeData_0 extends _i1.SmartFake implements _i2.ZetaThemeData { ); } -class _FakeZetaColors_1 extends _i1.SmartFake implements _i2.ZetaColors { - _FakeZetaColors_1( +class _FakeZetaRadiiSemantics_1 extends _i1.SmartFake + implements _i2.ZetaRadiiSemantics { + _FakeZetaRadiiSemantics_1( Object parent, Invocation parentInvocation, ) : super( @@ -44,8 +46,9 @@ class _FakeZetaColors_1 extends _i1.SmartFake implements _i2.ZetaColors { ); } -class _FakeZetaRadiiSemantics_2 extends _i1.SmartFake implements _i2.ZetaRadiiSemantics { - _FakeZetaRadiiSemantics_2( +class _FakeZetaSpacingSemantics_2 extends _i1.SmartFake + implements _i2.ZetaSpacingSemantics { + _FakeZetaSpacingSemantics_2( Object parent, Invocation parentInvocation, ) : super( @@ -54,18 +57,8 @@ class _FakeZetaRadiiSemantics_2 extends _i1.SmartFake implements _i2.ZetaRadiiSe ); } -class _FakeZetaSpacingSemantics_3 extends _i1.SmartFake implements _i2.ZetaSpacingSemantics { - _FakeZetaSpacingSemantics_3( - Object parent, - Invocation parentInvocation, - ) : super( - parent, - parentInvocation, - ); -} - -class _FakeWidget_4 extends _i1.SmartFake implements _i3.Widget { - _FakeWidget_4( +class _FakeWidget_3 extends _i1.SmartFake implements _i3.Widget { + _FakeWidget_3( Object parent, Invocation parentInvocation, ) : super( @@ -74,11 +67,13 @@ class _FakeWidget_4 extends _i1.SmartFake implements _i3.Widget { ); @override - String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); + String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => + super.toString(); } -class _FakeInheritedElement_5 extends _i1.SmartFake implements _i3.InheritedElement { - _FakeInheritedElement_5( +class _FakeInheritedElement_4 extends _i1.SmartFake + implements _i3.InheritedElement { + _FakeInheritedElement_4( Object parent, Invocation parentInvocation, ) : super( @@ -87,11 +82,13 @@ class _FakeInheritedElement_5 extends _i1.SmartFake implements _i3.InheritedElem ); @override - String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); + String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => + super.toString(); } -class _FakeDiagnosticsNode_6 extends _i1.SmartFake implements _i4.DiagnosticsNode { - _FakeDiagnosticsNode_6( +class _FakeDiagnosticsNode_5 extends _i1.SmartFake + implements _i4.DiagnosticsNode { + _FakeDiagnosticsNode_5( Object parent, Invocation parentInvocation, ) : super( @@ -125,19 +122,6 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { returnValueForMissingStub: _i3.ThemeMode.system, ) as _i3.ThemeMode); - @override - _i2.ZetaThemeData get themeData => (super.noSuchMethod( - Invocation.getter(#themeData), - returnValue: _FakeZetaThemeData_0( - this, - Invocation.getter(#themeData), - ), - returnValueForMissingStub: _FakeZetaThemeData_0( - this, - Invocation.getter(#themeData), - ), - ) as _i2.ZetaThemeData); - @override bool get rounded => (super.noSuchMethod( Invocation.getter(#rounded), @@ -146,17 +130,17 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { ) as bool); @override - _i2.ZetaColors get colors => (super.noSuchMethod( + _i2.ZetaSemanticColors get colors => (super.noSuchMethod( Invocation.getter(#colors), - returnValue: _FakeZetaColors_1( + returnValue: _FakeZetaSemanticColors_0( this, Invocation.getter(#colors), ), - returnValueForMissingStub: _FakeZetaColors_1( + returnValueForMissingStub: _FakeZetaSemanticColors_0( this, Invocation.getter(#colors), ), - ) as _i2.ZetaColors); + ) as _i2.ZetaSemanticColors); @override _i5.Brightness get brightness => (super.noSuchMethod( @@ -168,11 +152,11 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { @override _i2.ZetaRadiiSemantics get radius => (super.noSuchMethod( Invocation.getter(#radius), - returnValue: _FakeZetaRadiiSemantics_2( + returnValue: _FakeZetaRadiiSemantics_1( this, Invocation.getter(#radius), ), - returnValueForMissingStub: _FakeZetaRadiiSemantics_2( + returnValueForMissingStub: _FakeZetaRadiiSemantics_1( this, Invocation.getter(#radius), ), @@ -181,11 +165,11 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { @override _i2.ZetaSpacingSemantics get spacing => (super.noSuchMethod( Invocation.getter(#spacing), - returnValue: _FakeZetaSpacingSemantics_3( + returnValue: _FakeZetaSpacingSemantics_2( this, Invocation.getter(#spacing), ), - returnValueForMissingStub: _FakeZetaSpacingSemantics_3( + returnValueForMissingStub: _FakeZetaSpacingSemantics_2( this, Invocation.getter(#spacing), ), @@ -194,18 +178,19 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { @override _i3.Widget get child => (super.noSuchMethod( Invocation.getter(#child), - returnValue: _FakeWidget_4( + returnValue: _FakeWidget_3( this, Invocation.getter(#child), ), - returnValueForMissingStub: _FakeWidget_4( + returnValueForMissingStub: _FakeWidget_3( this, Invocation.getter(#child), ), ) as _i3.Widget); @override - bool updateShouldNotify(_i3.InheritedWidget? oldWidget) => (super.noSuchMethod( + bool updateShouldNotify(_i3.InheritedWidget? oldWidget) => + (super.noSuchMethod( Invocation.method( #updateShouldNotify, [oldWidget], @@ -215,7 +200,8 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { ) as bool); @override - void debugFillProperties(_i4.DiagnosticPropertiesBuilder? properties) => super.noSuchMethod( + void debugFillProperties(_i4.DiagnosticPropertiesBuilder? properties) => + super.noSuchMethod( Invocation.method( #debugFillProperties, [properties], @@ -229,14 +215,14 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { #createElement, [], ), - returnValue: _FakeInheritedElement_5( + returnValue: _FakeInheritedElement_4( this, Invocation.method( #createElement, [], ), ), - returnValueForMissingStub: _FakeInheritedElement_5( + returnValueForMissingStub: _FakeInheritedElement_4( this, Invocation.method( #createElement, @@ -361,7 +347,7 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { #style: style, }, ), - returnValue: _FakeDiagnosticsNode_6( + returnValue: _FakeDiagnosticsNode_5( this, Invocation.method( #toDiagnosticsNode, @@ -372,7 +358,7 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { }, ), ), - returnValueForMissingStub: _FakeDiagnosticsNode_6( + returnValueForMissingStub: _FakeDiagnosticsNode_5( this, Invocation.method( #toDiagnosticsNode, @@ -396,5 +382,6 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { ) as List<_i4.DiagnosticsNode>); @override - String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); + String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => + super.toString(); } diff --git a/test/src/components/top_app_bar/extended_top_app_bar_test.dart b/test/src/components/top_app_bar/extended_top_app_bar_test.dart index 379b2a14..7ed3f4e8 100644 --- a/test/src/components/top_app_bar/extended_top_app_bar_test.dart +++ b/test/src/components/top_app_bar/extended_top_app_bar_test.dart @@ -33,7 +33,7 @@ void main() { child: Container( width: 800, height: 700, - color: Zeta.of(context).colors.surfaceSelectedHover, + color: Zeta.of(context).colors.surface.selectedHover, key: boxKey, ), ), @@ -89,7 +89,7 @@ void main() { child: Container( width: 800, height: 700, - color: Zeta.of(context).colors.surfaceSelectedHover, + color: Zeta.of(context).colors.surface.selectedHover, key: boxKey, ), ), @@ -135,7 +135,7 @@ void main() { child: Container( width: 800, height: 700, - color: Zeta.of(context).colors.surfaceSelectedHover, + color: Zeta.of(context).colors.surface.selectedHover, key: boxKey, ), ), diff --git a/test/src/theme/color_extensions_test.dart b/test/src/theme/color_extensions_test.dart index be017c94..24d78169 100644 --- a/test/src/theme/color_extensions_test.dart +++ b/test/src/theme/color_extensions_test.dart @@ -33,10 +33,10 @@ void main() { test('onColor returns the correct on color', () { const color = Colors.blue; - expect(color.onColor, ZetaColorBase.white); + expect(color.onColor, ZetaPrimitivesLight().pure.shade0); const lightColor = Colors.white; - expect(lightColor.onColor, ZetaColorBase.cool.shade90); + expect(lightColor.onColor, ZetaPrimitivesLight().warm.shade90); }); test('isLight returns true for light colors', () { diff --git a/test/src/theme/color_scheme_test.dart b/test/src/theme/color_scheme_test.dart index 0e2cb063..22704d64 100644 --- a/test/src/theme/color_scheme_test.dart +++ b/test/src/theme/color_scheme_test.dart @@ -1,3 +1,5 @@ +// ignore_for_file: deprecated_member_use_from_same_package + import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; @@ -7,11 +9,11 @@ void main() { group('ZetaColorScheme', () { const String fontFamily = 'TestFontFamily'; final ZetaColors zetaColors = ZetaColors( - primary: ZetaColorBase.blue, - secondary: ZetaColorBase.green, - surfacePrimary: ZetaColorBase.white, - surfaceTertiary: ZetaColorBase.white, - error: ZetaColorBase.red, + primary: ZetaPrimitivesLight().blue, + secondary: ZetaPrimitivesLight().green, + surfacePrimary: ZetaPrimitivesLight().pure.shade0, + surfaceTertiary: ZetaPrimitivesLight().pure.shade0, + error: ZetaPrimitivesLight().red, ); final ZetaColorScheme zetaColorScheme = ZetaColorScheme( @@ -44,11 +46,11 @@ void main() { test('copyWith copies and overrides properties correctly', () { final newZetaColors = ZetaColors( - primary: ZetaColorBase.purple, - secondary: ZetaColorBase.orange, - surfacePrimary: ZetaColorBase.yellow, - surfaceTertiary: ZetaColorBase.yellow, - error: ZetaColorBase.pink, + primary: ZetaPrimitivesLight().purple, + secondary: ZetaPrimitivesLight().orange, + surfacePrimary: ZetaPrimitivesLight().yellow, + surfaceTertiary: ZetaPrimitivesLight().yellow, + error: ZetaPrimitivesLight().pink, ); const newFontFamily = 'NewTestFontFamily'; diff --git a/test/src/theme/color_swatch_test.dart b/test/src/theme/color_swatch_test.dart index 11eadba5..5090ed0d 100644 --- a/test/src/theme/color_swatch_test.dart +++ b/test/src/theme/color_swatch_test.dart @@ -1,3 +1,5 @@ +// ignore_for_file: deprecated_member_use_from_same_package + import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; @@ -44,9 +46,11 @@ void main() { Colors.blue, ); - expect(swatch.value, Colors.blue.value); expect(swatch.brightness, Brightness.light); expect(swatch.contrast, ZetaContrast.aa); + + expect(num.parse(swatch.shade60.contrastRatio(Colors.white).toStringAsFixed(1)) >= 4.5, true); + expect(num.parse(swatch.shade80.contrastRatio(Colors.white).toStringAsFixed(1)) >= 7, true); }); test('apply method', () { diff --git a/test/src/theme/colors_test.dart b/test/src/theme/colors_test.dart index cb4d6367..c3050f12 100644 --- a/test/src/theme/colors_test.dart +++ b/test/src/theme/colors_test.dart @@ -19,15 +19,15 @@ void main() { expect(zetaColors.cool, isNotNull); expect(zetaColors.warm, isNotNull); expect(zetaColors.pure, isNotNull); - expect(zetaColors.surfacePrimary, ZetaColorBase.white); - expect(zetaColors.surfaceSecondary, isNotNull); + expect(zetaColors.surface.defaultColor, ZetaColorBase.white); + expect(zetaColors.surface.secondary, isNotNull); expect(zetaColors.surfaceTertiary, isNotNull); }); test('light constructor initializes correctly', () { final zetaColors = ZetaColors.light( - warm: ZetaColorBase.warm, - cool: ZetaColorBase.cool, + warm: ZetaPrimitivesLight().warm, + cool: ZetaPrimitivesLight().cool, ); expect(zetaColors.brightness, Brightness.light); @@ -40,15 +40,15 @@ void main() { expect(zetaColors.cool, isNotNull); expect(zetaColors.warm, isNotNull); expect(zetaColors.pure, isNotNull); - expect(zetaColors.surfacePrimary, ZetaColorBase.white); - expect(zetaColors.surfaceSecondary, isNotNull); + expect(zetaColors.surface.defaultColor, ZetaColorBase.white); + expect(zetaColors.surface.secondary, isNotNull); expect(zetaColors.surfaceTertiary, isNotNull); }); test('dark constructor initializes correctly', () { final zetaColors = ZetaColors.dark( - warm: ZetaColorBase.warm, - cool: ZetaColorBase.cool, + warm: ZetaPrimitivesLight().warm, + cool: ZetaPrimitivesLight().cool, ); expect(zetaColors.brightness, Brightness.dark); @@ -61,8 +61,8 @@ void main() { expect(zetaColors.cool, isNotNull); expect(zetaColors.warm, isNotNull); expect(zetaColors.pure, isNotNull); - expect(zetaColors.surfacePrimary, ZetaColorBase.black); - expect(zetaColors.surfaceSecondary, isNotNull); + expect(zetaColors.surface.defaultColor, ZetaPrimitivesDark().pure.shade0); + expect(zetaColors.surface.secondary, isNotNull); expect(zetaColors.surfaceTertiary, isNotNull); }); @@ -71,15 +71,21 @@ void main() { final newColors = zetaColors.copyWith( brightness: Brightness.dark, contrast: ZetaContrast.aaa, - primary: ZetaColorBase.green, - secondary: ZetaColorBase.orange, + primary: ZetaPrimitivesLight().green, + secondary: ZetaPrimitivesLight().orange, ); expect(newColors.isDarkMode, true); expect(newColors.brightness, Brightness.dark); expect(newColors.contrast, ZetaContrast.aaa); - expect(newColors.primary, ZetaColorBase.green.apply(brightness: Brightness.dark, contrast: ZetaContrast.aaa)); - expect(newColors.secondary, ZetaColorBase.orange.apply(brightness: Brightness.dark, contrast: ZetaContrast.aaa)); + expect( + newColors.primary, + ZetaPrimitivesLight().green.apply(brightness: Brightness.dark, contrast: ZetaContrast.aaa), + ); + expect( + newColors.secondary, + ZetaPrimitivesLight().orange.apply(brightness: Brightness.dark, contrast: ZetaContrast.aaa), + ); expect(newColors.white, zetaColors.white); expect(newColors.black, zetaColors.black); }); @@ -124,73 +130,59 @@ void main() { expect(scheme.brightness, zetaColors.brightness); expect(scheme.primary, zetaColors.primary.shade(zetaColors.contrast.primary)); expect(scheme.secondary, zetaColors.secondary.shade(zetaColors.contrast.primary)); - expect(scheme.surface, zetaColors.surfacePrimary); + expect(scheme.surface, zetaColors.surface.defaultColor); expect(scheme.error, zetaColors.error); }); test('Color getter returns correct values', () { final zetaColors = ZetaColors(); - expect(zetaColors.textDefault, ZetaColorBase.cool.shade90); - expect(zetaColors.textSubtle, ZetaColorBase.cool.shade70); - expect(zetaColors.textDisabled, ZetaColorBase.cool.shade50); - expect(zetaColors.textInverse, ZetaColorBase.cool.shade20); - expect(zetaColors.iconDefault, ZetaColorBase.cool.shade90); - expect(zetaColors.iconSubtle, ZetaColorBase.cool.shade70); - expect(zetaColors.iconDisabled, ZetaColorBase.cool.shade50); - expect(zetaColors.iconInverse, ZetaColorBase.cool.shade20); - expect(zetaColors.surfaceDefault, ZetaColorBase.pure.shade(0)); - expect(zetaColors.surfaceDefaultInverse, ZetaColorBase.warm.shade(100)); - expect(zetaColors.surfaceHover, ZetaColorBase.cool.shade(20)); - expect(zetaColors.surfaceSelected, ZetaColorBase.blue.shade(10)); - expect(zetaColors.surfaceSelectedHover, ZetaColorBase.blue.shade(20)); - expect(zetaColors.surfaceDisabled, ZetaColorBase.cool.shade(30)); - expect(zetaColors.surfaceCool, ZetaColorBase.cool.shade(10)); - expect(zetaColors.surfaceWarm, ZetaColorBase.warm.shade(10)); - expect(zetaColors.surfacePrimarySubtle, ZetaColorBase.blue.shade(10)); - expect(zetaColors.surfaceAvatarBlue, ZetaColorBase.blue.shade(80)); - expect(zetaColors.surfaceAvatarOrange, ZetaColorBase.orange.shade(50)); - expect(zetaColors.surfaceAvatarPink, ZetaColorBase.pink.shade(80)); - expect(zetaColors.surfaceAvatarPurple, ZetaColorBase.purple.shade(80)); - expect(zetaColors.surfaceAvatarTeal, ZetaColorBase.teal.shade(80)); - expect(zetaColors.surfaceAvatarYellow, ZetaColorBase.yellow.shade(50)); - expect(zetaColors.surfaceSecondarySubtle, ZetaColorBase.yellow.shade(10)); - expect(zetaColors.surfacePositiveSubtle, ZetaColorBase.green.shade(10)); - expect(zetaColors.surfaceWarningSubtle, ZetaColorBase.orange.shade(10)); - expect(zetaColors.surfaceNegativeSubtle, ZetaColorBase.red.shade(10)); - expect(zetaColors.surfaceInfoSubtle, ZetaColorBase.purple.shade(10)); - expect(zetaColors.borderDefault, ZetaColorBase.cool.shade(40)); - expect(zetaColors.borderSubtle, ZetaColorBase.cool.shade(30)); - expect(zetaColors.borderHover, ZetaColorBase.cool.shade(90)); - expect(zetaColors.borderSelected, ZetaColorBase.cool.shade(90)); - expect(zetaColors.borderDisabled, ZetaColorBase.cool.shade(20)); - expect(zetaColors.borderPure, ZetaColorBase.pure.shade(0)); - expect(zetaColors.borderPrimary, ZetaColorBase.blue.shade(50)); - expect(zetaColors.borderSecondary, ZetaColorBase.yellow.shade(50)); - expect(zetaColors.borderPositive, ZetaColorBase.green.shade(50)); - expect(zetaColors.borderWarning, ZetaColorBase.orange.shade(50)); - expect(zetaColors.borderNegative, ZetaColorBase.red.shade(50)); - expect(zetaColors.borderInfo, ZetaColorBase.purple.shade(50)); - expect(zetaColors.surfacePositive, ZetaColorBase.green); - expect(zetaColors.surfaceWarning, ZetaColorBase.orange); - expect(zetaColors.surfaceNegative, ZetaColorBase.red); - expect(zetaColors.surfaceAvatarGreen, ZetaColorBase.green); - expect(zetaColors.surfaceInfo, ZetaColorBase.purple); - expect(zetaColors.borderPrimaryMain, ZetaColorBase.blue); - }); - - test('deprecated properties return correct values', () { - final zetaColors = ZetaColors(); - - expect(zetaColors.surfaceHovered, zetaColors.surfaceHover); - expect(zetaColors.surfaceSelectedHovered, zetaColors.surfaceSelectedHover); - expect(zetaColors.positive, zetaColors.surfacePositive); - expect(zetaColors.negative, zetaColors.surfaceNegative); - expect(zetaColors.warning, zetaColors.surfaceWarning); - expect(zetaColors.info, zetaColors.surfaceInfo); - expect(zetaColors.shadow, const Color(0x1A49505E)); - expect(zetaColors.link, ZetaColorBase.linkLight); - expect(zetaColors.linkVisited, ZetaColorBase.linkVisitedLight); + expect(zetaColors.main.defaultColor, ZetaPrimitivesLight().cool.shade90); + expect(zetaColors.main.subtle, ZetaPrimitivesLight().cool.shade70); + expect(zetaColors.main.disabled, ZetaPrimitivesLight().cool.shade50); + expect(zetaColors.main.inverse, ZetaPrimitivesLight().cool.shade20); + expect(zetaColors.main.defaultColor, ZetaPrimitivesLight().cool.shade90); + expect(zetaColors.main.subtle, ZetaPrimitivesLight().cool.shade70); + expect(zetaColors.main.disabled, ZetaPrimitivesLight().cool.shade50); + expect(zetaColors.iconInverse, ZetaPrimitivesLight().cool.shade20); + expect(zetaColors.surface.defaultColor, ZetaPrimitivesLight().pure.shade(0)); + expect(zetaColors.surface.defaultInverse, ZetaPrimitivesLight().warm.shade(100)); + expect(zetaColors.surface.hover, ZetaPrimitivesLight().cool.shade(20)); + expect(zetaColors.surface.selected, ZetaPrimitivesLight().blue.shade(10)); + expect(zetaColors.surface.selectedHover, ZetaPrimitivesLight().blue.shade(20)); + expect(zetaColors.surface.disabled, ZetaPrimitivesLight().cool.shade(30)); + expect(zetaColors.surfaceCool, ZetaPrimitivesLight().cool.shade(10)); + expect(zetaColors.surfaceWarm, ZetaPrimitivesLight().warm.shade(10)); + expect(zetaColors.surface.primarySubtle, ZetaPrimitivesLight().blue.shade(10)); + expect(zetaColors.surfaceAvatarBlue, ZetaPrimitivesLight().blue.shade(80)); + expect(zetaColors.surfaceAvatarOrange, ZetaPrimitivesLight().orange.shade(50)); + expect(zetaColors.surfaceAvatarPink, ZetaPrimitivesLight().pink.shade(80)); + expect(zetaColors.surfaceAvatarPurple, ZetaPrimitivesLight().purple.shade(80)); + expect(zetaColors.surfaceAvatarTeal, ZetaPrimitivesLight().teal.shade(80)); + expect(zetaColors.surfaceAvatarYellow, ZetaPrimitivesLight().yellow.shade(50)); + expect(zetaColors.surface.secondarySubtle, ZetaPrimitivesLight().yellow.shade(10)); + expect(zetaColors.surface.positiveSubtle, ZetaPrimitivesLight().green.shade(10)); + expect(zetaColors.surface.warningSubtle, ZetaPrimitivesLight().orange.shade(10)); + expect(zetaColors.surface.negativeSubtle, ZetaPrimitivesLight().red.shade(10)); + expect(zetaColors.surface.infoSubtle, ZetaPrimitivesLight().purple.shade(10)); + expect(zetaColors.border.defaultColor, ZetaPrimitivesLight().cool.shade(40)); + expect(zetaColors.border.subtle, ZetaPrimitivesLight().cool.shade(30)); + expect(zetaColors.borderHover, ZetaPrimitivesLight().cool.shade(90)); + expect(zetaColors.border.selected, ZetaPrimitivesLight().cool.shade(90)); + expect(zetaColors.border.disabled, ZetaPrimitivesLight().cool.shade(20)); + expect(zetaColors.borderPure, ZetaPrimitivesLight().pure.shade(0)); + expect(zetaColors.borderPrimary, ZetaPrimitivesLight().blue.shade(50)); + expect(zetaColors.borderSecondary, ZetaPrimitivesLight().yellow.shade(50)); + expect(zetaColors.borderPositive, ZetaPrimitivesLight().green.shade(50)); + expect(zetaColors.borderWarning, ZetaPrimitivesLight().orange.shade(50)); + expect(zetaColors.borderNegative, ZetaPrimitivesLight().red.shade(50)); + expect(zetaColors.borderInfo, ZetaPrimitivesLight().purple.shade(50)); + expect(zetaColors.surface.positive, ZetaPrimitivesLight().green.shade60); + expect(zetaColors.surface.warning, ZetaPrimitivesLight().orange.shade60); + expect(zetaColors.surface.negative, ZetaPrimitivesLight().red.shade60); + expect(zetaColors.surfaceAvatarGreen, ZetaPrimitivesLight().green); + expect(zetaColors.surface.info, ZetaPrimitivesLight().purple.shade60); + expect(zetaColors.borderPrimaryMain, ZetaPrimitivesLight().blue); }); test('props returns correct list of properties', () { @@ -224,21 +216,21 @@ void main() { expect(themeData.colorScheme.secondarySwatch, zetaColors.secondary); expect(themeData.colorScheme.cool, zetaColors.cool); expect(themeData.colorScheme.warm, zetaColors.warm); - expect(themeData.colorScheme.textDefault, zetaColors.textDefault); - expect(themeData.colorScheme.textSubtle, zetaColors.textSubtle); - expect(themeData.colorScheme.textDisabled, zetaColors.textDisabled); - expect(themeData.colorScheme.textInverse, zetaColors.textInverse); - expect(themeData.colorScheme.surfacePrimary, zetaColors.surfacePrimary); - expect(themeData.colorScheme.surfaceSecondary, zetaColors.surfaceSecondary); + expect(themeData.colorScheme.textDefault, zetaColors.main.defaultColor); + expect(themeData.colorScheme.textSubtle, zetaColors.main.subtle); + expect(themeData.colorScheme.textDisabled, zetaColors.main.disabled); + expect(themeData.colorScheme.textInverse, zetaColors.main.inverse); + expect(themeData.colorScheme.surfacePrimary, zetaColors.surface.defaultColor); + expect(themeData.colorScheme.surfaceSecondary, zetaColors.surface.cool); expect(themeData.colorScheme.surfaceTertiary, zetaColors.surfaceTertiary); - expect(themeData.colorScheme.surfaceDisabled, zetaColors.surfaceDisabled); - expect(themeData.colorScheme.surfaceHover, zetaColors.surfaceHover); - expect(themeData.colorScheme.surfaceSelected, zetaColors.surfaceSelected); - expect(themeData.colorScheme.surfaceSelectedHover, zetaColors.surfaceSelectedHover); - expect(themeData.colorScheme.borderDefault, zetaColors.borderDefault); - expect(themeData.colorScheme.borderSubtle, zetaColors.borderSubtle); - expect(themeData.colorScheme.borderDisabled, zetaColors.borderDisabled); - expect(themeData.colorScheme.borderSelected, zetaColors.borderSelected); + expect(themeData.colorScheme.surfaceDisabled, zetaColors.surface.disabled); + expect(themeData.colorScheme.surfaceHover, zetaColors.surface.hover); + expect(themeData.colorScheme.surfaceSelected, zetaColors.surface.selected); + expect(themeData.colorScheme.surfaceSelectedHover, zetaColors.surface.selectedHover); + expect(themeData.colorScheme.borderDefault, zetaColors.border.defaultColor); + expect(themeData.colorScheme.borderSubtle, zetaColors.border.subtle); + expect(themeData.colorScheme.borderDisabled, zetaColors.border.disabled); + expect(themeData.colorScheme.borderSelected, zetaColors.border.selected); expect(themeData.colorScheme.blue, zetaColors.blue); expect(themeData.colorScheme.green, zetaColors.green); expect(themeData.colorScheme.red, zetaColors.red); @@ -255,37 +247,37 @@ void main() { test('ColorScheme extension getters should return default colors when ZetaColorScheme scheme is not injected', () { final themeData = ThemeData.light(); - expect(themeData.colorScheme.primarySwatch, ZetaColorBase.blue); - expect(themeData.colorScheme.secondarySwatch, ZetaColorBase.yellow); - expect(themeData.colorScheme.cool, ZetaColorBase.cool); - expect(themeData.colorScheme.warm, ZetaColorBase.warm); - expect(themeData.colorScheme.textDefault, ZetaColorBase.cool.shade90); - expect(themeData.colorScheme.textSubtle, ZetaColorBase.cool.shade70); - expect(themeData.colorScheme.textDisabled, ZetaColorBase.cool.shade50); - expect(themeData.colorScheme.textInverse, ZetaColorBase.cool.shade20); - expect(themeData.colorScheme.surfacePrimary, ZetaColorBase.white); - expect(themeData.colorScheme.surfaceSecondary, ZetaColorBase.cool.shade10); - expect(themeData.colorScheme.surfaceTertiary, ZetaColorBase.warm.shade10); - expect(themeData.colorScheme.surfaceDisabled, ZetaColorBase.cool.shade30); - expect(themeData.colorScheme.surfaceHover, ZetaColorBase.cool.shade20); - expect(themeData.colorScheme.surfaceSelected, ZetaColorBase.blue.shade10); - expect(themeData.colorScheme.surfaceSelectedHover, ZetaColorBase.blue.shade20); - expect(themeData.colorScheme.borderDefault, ZetaColorBase.cool.shade50); - expect(themeData.colorScheme.borderSubtle, ZetaColorBase.cool.shade40); - expect(themeData.colorScheme.borderDisabled, ZetaColorBase.cool.shade30); - expect(themeData.colorScheme.borderSelected, ZetaColorBase.cool.shade90); - expect(themeData.colorScheme.blue, ZetaColorBase.blue); - expect(themeData.colorScheme.green, ZetaColorBase.green); - expect(themeData.colorScheme.red, ZetaColorBase.red); - expect(themeData.colorScheme.orange, ZetaColorBase.orange); - expect(themeData.colorScheme.purple, ZetaColorBase.purple); - expect(themeData.colorScheme.yellow, ZetaColorBase.yellow); - expect(themeData.colorScheme.teal, ZetaColorBase.teal); - expect(themeData.colorScheme.pink, ZetaColorBase.pink); - expect(themeData.colorScheme.positive, ZetaColorBase.green); - expect(themeData.colorScheme.negative, ZetaColorBase.red); - expect(themeData.colorScheme.warning, ZetaColorBase.orange); - expect(themeData.colorScheme.info, ZetaColorBase.purple); + expect(themeData.colorScheme.primarySwatch, ZetaPrimitivesLight().blue); + expect(themeData.colorScheme.secondarySwatch, ZetaPrimitivesLight().yellow); + expect(themeData.colorScheme.cool, ZetaPrimitivesLight().cool); + expect(themeData.colorScheme.warm, ZetaPrimitivesLight().warm); + expect(themeData.colorScheme.textDefault, ZetaPrimitivesLight().cool.shade90); + expect(themeData.colorScheme.textSubtle, ZetaPrimitivesLight().cool.shade70); + expect(themeData.colorScheme.textDisabled, ZetaPrimitivesLight().cool.shade50); + expect(themeData.colorScheme.textInverse, ZetaPrimitivesLight().cool.shade20); + expect(themeData.colorScheme.surfacePrimary, ZetaPrimitivesLight().pure.shade0); + expect(themeData.colorScheme.surfaceSecondary, ZetaPrimitivesLight().cool.shade10); + expect(themeData.colorScheme.surfaceTertiary, ZetaPrimitivesLight().warm.shade10); + expect(themeData.colorScheme.surfaceDisabled, ZetaPrimitivesLight().cool.shade30); + expect(themeData.colorScheme.surfaceHover, ZetaPrimitivesLight().cool.shade20); + expect(themeData.colorScheme.surfaceSelected, ZetaPrimitivesLight().blue.shade10); + expect(themeData.colorScheme.surfaceSelectedHover, ZetaPrimitivesLight().blue.shade20); + expect(themeData.colorScheme.borderDefault, ZetaPrimitivesLight().cool.shade50); + expect(themeData.colorScheme.borderSubtle, ZetaPrimitivesLight().cool.shade40); + expect(themeData.colorScheme.borderDisabled, ZetaPrimitivesLight().cool.shade30); + expect(themeData.colorScheme.borderSelected, ZetaPrimitivesLight().cool.shade90); + expect(themeData.colorScheme.blue, ZetaPrimitivesLight().blue); + expect(themeData.colorScheme.green, ZetaPrimitivesLight().green); + expect(themeData.colorScheme.red, ZetaPrimitivesLight().red); + expect(themeData.colorScheme.orange, ZetaPrimitivesLight().orange); + expect(themeData.colorScheme.purple, ZetaPrimitivesLight().purple); + expect(themeData.colorScheme.yellow, ZetaPrimitivesLight().yellow); + expect(themeData.colorScheme.teal, ZetaPrimitivesLight().teal); + expect(themeData.colorScheme.pink, ZetaPrimitivesLight().pink); + expect(themeData.colorScheme.positive, ZetaPrimitivesLight().green); + expect(themeData.colorScheme.negative, ZetaPrimitivesLight().red); + expect(themeData.colorScheme.warning, ZetaPrimitivesLight().orange); + expect(themeData.colorScheme.info, ZetaPrimitivesLight().purple); }); }); } diff --git a/test/src/theme/theme_data_test.dart b/test/src/theme/theme_data_test.dart index 4ddeb3cb..d4921711 100644 --- a/test/src/theme/theme_data_test.dart +++ b/test/src/theme/theme_data_test.dart @@ -1,3 +1,5 @@ +// ignore_for_file: deprecated_member_use_from_same_package + import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:zeta_flutter/src/theme/color_extensions.dart'; diff --git a/test/src/utils/extensions_test.dart b/test/src/utils/extensions_test.dart index 5d1e8b4d..ece31f43 100644 --- a/test/src/utils/extensions_test.dart +++ b/test/src/utils/extensions_test.dart @@ -1,3 +1,5 @@ +// ignore_for_file: deprecated_member_use_from_same_package + import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:mockito/annotations.dart'; @@ -9,7 +11,7 @@ import 'extensions_test.mocks.dart'; @GenerateNiceMocks([ MockSpec(), - MockSpec(), + MockSpec(), MockSpec(), ]) void main() { @@ -197,28 +199,20 @@ void main() { group('ColorSwatches extension', () { late MockBuildContext mockContext; - late MockZetaColors mockZetaColors; + late MockZetaSemanticColors mockZetaColors; late MockZeta mockZeta; setUp(() { mockZeta = MockZeta(); mockContext = MockBuildContext(); - mockZetaColors = MockZetaColors(); + mockZetaColors = MockZetaSemanticColors(); when(mockContext.dependOnInheritedWidgetOfExactType()).thenReturn(mockZeta as Zeta?); when(mockZeta.colors).thenReturn(mockZetaColors); - when(mockZetaColors.surfaceInfo).thenReturn(ZetaColorBase.purple); - when(mockZetaColors.surfacePositive).thenReturn(ZetaColorBase.green); - when(mockZetaColors.surfaceWarning).thenReturn(ZetaColorBase.orange); - when(mockZetaColors.surfaceNegative).thenReturn(ZetaColorBase.red); - when(mockZetaColors.cool).thenReturn(ZetaColorBase.cool); - }); - - test('colorSwatch returns correct color swatch for status', () { - expect(ZetaWidgetStatus.info.colorSwatch(mockContext), ZetaColorBase.purple); - expect(ZetaWidgetStatus.positive.colorSwatch(mockContext), ZetaColorBase.green); - expect(ZetaWidgetStatus.warning.colorSwatch(mockContext), ZetaColorBase.orange); - expect(ZetaWidgetStatus.negative.colorSwatch(mockContext), ZetaColorBase.red); - expect(ZetaWidgetStatus.neutral.colorSwatch(mockContext), ZetaColorBase.cool); + when(mockZetaColors.surface.info).thenReturn(ZetaPrimitivesLight().purple); + when(mockZetaColors.surface.positive).thenReturn(ZetaPrimitivesLight().green); + when(mockZetaColors.surface.warning).thenReturn(ZetaPrimitivesLight().orange); + when(mockZetaColors.surface.negative).thenReturn(ZetaPrimitivesLight().red); + when(mockZetaColors.cool).thenReturn(ZetaPrimitivesLight().cool); }); }); diff --git a/test/src/utils/extensions_test.mocks.dart b/test/src/utils/extensions_test.mocks.dart index f4c8d9a7..08919dda 100644 --- a/test/src/utils/extensions_test.mocks.dart +++ b/test/src/utils/extensions_test.mocks.dart @@ -3,17 +3,15 @@ // Do not manually edit this file. // ignore_for_file: no_leading_underscores_for_library_prefixes -import 'dart:ui' as _i5; +import 'dart:ui' as _i7; import 'package:flutter/foundation.dart' as _i3; import 'package:flutter/material.dart' as _i2; -import 'package:flutter/src/widgets/notification_listener.dart' as _i8; +import 'package:flutter/src/widgets/notification_listener.dart' as _i6; import 'package:mockito/mockito.dart' as _i1; -import 'package:mockito/src/dummies.dart' as _i10; -import 'package:zeta_flutter/src/theme/color_scheme.dart' as _i7; -import 'package:zeta_flutter/src/theme/color_swatch.dart' as _i4; -import 'package:zeta_flutter/src/theme/contrast.dart' as _i9; -import 'package:zeta_flutter/zeta_flutter.dart' as _i6; +import 'package:mockito/src/dummies.dart' as _i8; +import 'package:zeta_flutter/generated/tokens/primitives.g.dart' as _i4; +import 'package:zeta_flutter/zeta_flutter.dart' as _i5; // ignore_for_file: type=lint // ignore_for_file: avoid_redundant_argument_values @@ -38,10 +36,12 @@ class _FakeWidget_0 extends _i1.SmartFake implements _i2.Widget { ); @override - String toString({_i3.DiagnosticLevel? minLevel = _i3.DiagnosticLevel.info}) => super.toString(); + String toString({_i3.DiagnosticLevel? minLevel = _i3.DiagnosticLevel.info}) => + super.toString(); } -class _FakeInheritedWidget_1 extends _i1.SmartFake implements _i2.InheritedWidget { +class _FakeInheritedWidget_1 extends _i1.SmartFake + implements _i2.InheritedWidget { _FakeInheritedWidget_1( Object parent, Invocation parentInvocation, @@ -51,10 +51,12 @@ class _FakeInheritedWidget_1 extends _i1.SmartFake implements _i2.InheritedWidge ); @override - String toString({_i3.DiagnosticLevel? minLevel = _i3.DiagnosticLevel.info}) => super.toString(); + String toString({_i3.DiagnosticLevel? minLevel = _i3.DiagnosticLevel.info}) => + super.toString(); } -class _FakeDiagnosticsNode_2 extends _i1.SmartFake implements _i3.DiagnosticsNode { +class _FakeDiagnosticsNode_2 extends _i1.SmartFake + implements _i3.DiagnosticsNode { _FakeDiagnosticsNode_2( Object parent, Invocation parentInvocation, @@ -71,8 +73,9 @@ class _FakeDiagnosticsNode_2 extends _i1.SmartFake implements _i3.DiagnosticsNod super.toString(); } -class _FakeZetaColorSwatch_3 extends _i1.SmartFake implements _i4.ZetaColorSwatch { - _FakeZetaColorSwatch_3( +class _FakeZetaPrimitives_3 extends _i1.SmartFake + implements _i4.ZetaPrimitives { + _FakeZetaPrimitives_3( Object parent, Invocation parentInvocation, ) : super( @@ -81,8 +84,9 @@ class _FakeZetaColorSwatch_3 extends _i1.SmartFake implements _i4.ZetaColorSwatc ); } -class _FakeColor_4 extends _i1.SmartFake implements _i5.Color { - _FakeColor_4( +class _FakeZetaSemanticMainColors_4 extends _i1.SmartFake + implements _i5.ZetaSemanticMainColors { + _FakeZetaSemanticMainColors_4( Object parent, Invocation parentInvocation, ) : super( @@ -91,8 +95,9 @@ class _FakeColor_4 extends _i1.SmartFake implements _i5.Color { ); } -class _FakeZetaColors_5 extends _i1.SmartFake implements _i6.ZetaColors { - _FakeZetaColors_5( +class _FakeZetaSemanticBorderColors_5 extends _i1.SmartFake + implements _i5.ZetaSemanticBorderColors { + _FakeZetaSemanticBorderColors_5( Object parent, Invocation parentInvocation, ) : super( @@ -101,21 +106,31 @@ class _FakeZetaColors_5 extends _i1.SmartFake implements _i6.ZetaColors { ); } -class _FakeZetaColorScheme_6 extends _i1.SmartFake implements _i7.ZetaColorScheme { - _FakeZetaColorScheme_6( +class _FakeZetaSemanticSurfaceColors_6 extends _i1.SmartFake + implements _i5.ZetaSemanticSurfaceColors { + _FakeZetaSemanticSurfaceColors_6( Object parent, Invocation parentInvocation, ) : super( parent, parentInvocation, ); +} - @override - String toString({_i3.DiagnosticLevel? minLevel = _i3.DiagnosticLevel.info}) => super.toString(); +class _FakeZetaSemanticStateColors_7 extends _i1.SmartFake + implements _i5.ZetaSemanticStateColors { + _FakeZetaSemanticStateColors_7( + Object parent, + Invocation parentInvocation, + ) : super( + parent, + parentInvocation, + ); } -class _FakeZetaThemeData_7 extends _i1.SmartFake implements _i6.ZetaThemeData { - _FakeZetaThemeData_7( +class _FakeZetaSemanticColors_8 extends _i1.SmartFake + implements _i5.ZetaSemanticColors { + _FakeZetaSemanticColors_8( Object parent, Invocation parentInvocation, ) : super( @@ -124,8 +139,9 @@ class _FakeZetaThemeData_7 extends _i1.SmartFake implements _i6.ZetaThemeData { ); } -class _FakeZetaRadiiSemantics_8 extends _i1.SmartFake implements _i6.ZetaRadiiSemantics { - _FakeZetaRadiiSemantics_8( +class _FakeZetaRadiiSemantics_9 extends _i1.SmartFake + implements _i5.ZetaRadiiSemantics { + _FakeZetaRadiiSemantics_9( Object parent, Invocation parentInvocation, ) : super( @@ -134,8 +150,9 @@ class _FakeZetaRadiiSemantics_8 extends _i1.SmartFake implements _i6.ZetaRadiiSe ); } -class _FakeZetaSpacingSemantics_9 extends _i1.SmartFake implements _i6.ZetaSpacingSemantics { - _FakeZetaSpacingSemantics_9( +class _FakeZetaSpacingSemantics_10 extends _i1.SmartFake + implements _i5.ZetaSpacingSemantics { + _FakeZetaSpacingSemantics_10( Object parent, Invocation parentInvocation, ) : super( @@ -144,8 +161,9 @@ class _FakeZetaSpacingSemantics_9 extends _i1.SmartFake implements _i6.ZetaSpaci ); } -class _FakeInheritedElement_10 extends _i1.SmartFake implements _i2.InheritedElement { - _FakeInheritedElement_10( +class _FakeInheritedElement_11 extends _i1.SmartFake + implements _i2.InheritedElement { + _FakeInheritedElement_11( Object parent, Invocation parentInvocation, ) : super( @@ -154,7 +172,8 @@ class _FakeInheritedElement_10 extends _i1.SmartFake implements _i2.InheritedEle ); @override - String toString({_i3.DiagnosticLevel? minLevel = _i3.DiagnosticLevel.info}) => super.toString(); + String toString({_i3.DiagnosticLevel? minLevel = _i3.DiagnosticLevel.info}) => + super.toString(); } /// A class which mocks [BuildContext]. @@ -218,7 +237,8 @@ class MockBuildContext extends _i1.Mock implements _i2.BuildContext { ) as _i2.InheritedWidget); @override - void visitAncestorElements(_i2.ConditionalElementVisitor? visitor) => super.noSuchMethod( + void visitAncestorElements(_i2.ConditionalElementVisitor? visitor) => + super.noSuchMethod( Invocation.method( #visitAncestorElements, [visitor], @@ -236,7 +256,8 @@ class MockBuildContext extends _i1.Mock implements _i2.BuildContext { ); @override - void dispatchNotification(_i8.Notification? notification) => super.noSuchMethod( + void dispatchNotification(_i6.Notification? notification) => + super.noSuchMethod( Invocation.method( #dispatchNotification, [notification], @@ -303,7 +324,9 @@ class MockBuildContext extends _i1.Mock implements _i2.BuildContext { ) as _i3.DiagnosticsNode); @override - List<_i3.DiagnosticsNode> describeMissingAncestor({required Type? expectedAncestorType}) => (super.noSuchMethod( + List<_i3.DiagnosticsNode> describeMissingAncestor( + {required Type? expectedAncestorType}) => + (super.noSuchMethod( Invocation.method( #describeMissingAncestor, [], @@ -314,7 +337,8 @@ class MockBuildContext extends _i1.Mock implements _i2.BuildContext { ) as List<_i3.DiagnosticsNode>); @override - _i3.DiagnosticsNode describeOwnershipChain(String? name) => (super.noSuchMethod( + _i3.DiagnosticsNode describeOwnershipChain(String? name) => + (super.noSuchMethod( Invocation.method( #describeOwnershipChain, [name], @@ -336,1163 +360,87 @@ class MockBuildContext extends _i1.Mock implements _i2.BuildContext { ) as _i3.DiagnosticsNode); } -/// A class which mocks [ZetaColors]. +/// A class which mocks [ZetaSemanticColors]. /// /// See the documentation for Mockito's code generation for more information. -// ignore: must_be_immutable -class MockZetaColors extends _i1.Mock implements _i6.ZetaColors { - @override - _i5.Brightness get brightness => (super.noSuchMethod( - Invocation.getter(#brightness), - returnValue: _i5.Brightness.dark, - returnValueForMissingStub: _i5.Brightness.dark, - ) as _i5.Brightness); - - @override - _i9.ZetaContrast get contrast => (super.noSuchMethod( - Invocation.getter(#contrast), - returnValue: _i9.ZetaContrast.aa, - returnValueForMissingStub: _i9.ZetaContrast.aa, - ) as _i9.ZetaContrast); - - @override - _i4.ZetaColorSwatch get primary => (super.noSuchMethod( - Invocation.getter(#primary), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#primary), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#primary), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get secondary => (super.noSuchMethod( - Invocation.getter(#secondary), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#secondary), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#secondary), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get error => (super.noSuchMethod( - Invocation.getter(#error), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#error), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#error), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get cool => (super.noSuchMethod( - Invocation.getter(#cool), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#cool), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#cool), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get warm => (super.noSuchMethod( - Invocation.getter(#warm), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#warm), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#warm), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get pure => (super.noSuchMethod( - Invocation.getter(#pure), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#pure), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#pure), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i5.Color get white => (super.noSuchMethod( - Invocation.getter(#white), - returnValue: _FakeColor_4( - this, - Invocation.getter(#white), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#white), - ), - ) as _i5.Color); - - @override - _i5.Color get black => (super.noSuchMethod( - Invocation.getter(#black), - returnValue: _FakeColor_4( - this, - Invocation.getter(#black), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#black), - ), - ) as _i5.Color); - - @override - _i5.Color get surfacePrimary => (super.noSuchMethod( - Invocation.getter(#surfacePrimary), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfacePrimary), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfacePrimary), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceSecondary => (super.noSuchMethod( - Invocation.getter(#surfaceSecondary), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceSecondary), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceSecondary), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceTertiary => (super.noSuchMethod( - Invocation.getter(#surfaceTertiary), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceTertiary), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceTertiary), - ), - ) as _i5.Color); - - @override - _i4.ZetaColorSwatch get blue => (super.noSuchMethod( - Invocation.getter(#blue), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#blue), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#blue), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get green => (super.noSuchMethod( - Invocation.getter(#green), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#green), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#green), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get red => (super.noSuchMethod( - Invocation.getter(#red), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#red), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#red), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get orange => (super.noSuchMethod( - Invocation.getter(#orange), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#orange), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#orange), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get purple => (super.noSuchMethod( - Invocation.getter(#purple), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#purple), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#purple), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get yellow => (super.noSuchMethod( - Invocation.getter(#yellow), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#yellow), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#yellow), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get teal => (super.noSuchMethod( - Invocation.getter(#teal), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#teal), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#teal), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get pink => (super.noSuchMethod( - Invocation.getter(#pink), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#pink), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#pink), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i5.Color get surfaceHovered => (super.noSuchMethod( - Invocation.getter(#surfaceHovered), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceHovered), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceHovered), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceSelectedHovered => (super.noSuchMethod( - Invocation.getter(#surfaceSelectedHovered), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceSelectedHovered), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceSelectedHovered), - ), - ) as _i5.Color); - - @override - _i4.ZetaColorSwatch get positive => (super.noSuchMethod( - Invocation.getter(#positive), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#positive), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#positive), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get negative => (super.noSuchMethod( - Invocation.getter(#negative), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#negative), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#negative), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get warning => (super.noSuchMethod( - Invocation.getter(#warning), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#warning), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#warning), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i4.ZetaColorSwatch get info => (super.noSuchMethod( - Invocation.getter(#info), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#info), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#info), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i5.Color get shadow => (super.noSuchMethod( - Invocation.getter(#shadow), - returnValue: _FakeColor_4( - this, - Invocation.getter(#shadow), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#shadow), - ), - ) as _i5.Color); - - @override - _i5.Color get link => (super.noSuchMethod( - Invocation.getter(#link), - returnValue: _FakeColor_4( - this, - Invocation.getter(#link), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#link), - ), - ) as _i5.Color); - - @override - _i5.Color get linkVisited => (super.noSuchMethod( - Invocation.getter(#linkVisited), - returnValue: _FakeColor_4( - this, - Invocation.getter(#linkVisited), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#linkVisited), - ), - ) as _i5.Color); - - @override - _i5.Color get textDefault => (super.noSuchMethod( - Invocation.getter(#textDefault), - returnValue: _FakeColor_4( - this, - Invocation.getter(#textDefault), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#textDefault), - ), - ) as _i5.Color); - - @override - _i5.Color get textSubtle => (super.noSuchMethod( - Invocation.getter(#textSubtle), - returnValue: _FakeColor_4( - this, - Invocation.getter(#textSubtle), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#textSubtle), - ), - ) as _i5.Color); - - @override - _i5.Color get textDisabled => (super.noSuchMethod( - Invocation.getter(#textDisabled), - returnValue: _FakeColor_4( - this, - Invocation.getter(#textDisabled), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#textDisabled), - ), - ) as _i5.Color); - - @override - _i5.Color get textInverse => (super.noSuchMethod( - Invocation.getter(#textInverse), - returnValue: _FakeColor_4( - this, - Invocation.getter(#textInverse), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#textInverse), - ), - ) as _i5.Color); - - @override - _i5.Color get iconDefault => (super.noSuchMethod( - Invocation.getter(#iconDefault), - returnValue: _FakeColor_4( - this, - Invocation.getter(#iconDefault), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#iconDefault), - ), - ) as _i5.Color); - - @override - _i5.Color get iconSubtle => (super.noSuchMethod( - Invocation.getter(#iconSubtle), - returnValue: _FakeColor_4( - this, - Invocation.getter(#iconSubtle), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#iconSubtle), - ), - ) as _i5.Color); - - @override - _i5.Color get iconDisabled => (super.noSuchMethod( - Invocation.getter(#iconDisabled), - returnValue: _FakeColor_4( - this, - Invocation.getter(#iconDisabled), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#iconDisabled), - ), - ) as _i5.Color); - - @override - _i5.Color get iconInverse => (super.noSuchMethod( - Invocation.getter(#iconInverse), - returnValue: _FakeColor_4( - this, - Invocation.getter(#iconInverse), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#iconInverse), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceDefault => (super.noSuchMethod( - Invocation.getter(#surfaceDefault), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceDefault), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceDefault), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceDefaultInverse => (super.noSuchMethod( - Invocation.getter(#surfaceDefaultInverse), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceDefaultInverse), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceDefaultInverse), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceHover => (super.noSuchMethod( - Invocation.getter(#surfaceHover), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceHover), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceHover), - ), - ) as _i5.Color); - +class MockZetaSemanticColors extends _i1.Mock + implements _i5.ZetaSemanticColors { @override - _i5.Color get surfaceSelected => (super.noSuchMethod( - Invocation.getter(#surfaceSelected), - returnValue: _FakeColor_4( + _i4.ZetaPrimitives get primitives => (super.noSuchMethod( + Invocation.getter(#primitives), + returnValue: _FakeZetaPrimitives_3( this, - Invocation.getter(#surfaceSelected), + Invocation.getter(#primitives), ), - returnValueForMissingStub: _FakeColor_4( + returnValueForMissingStub: _FakeZetaPrimitives_3( this, - Invocation.getter(#surfaceSelected), + Invocation.getter(#primitives), ), - ) as _i5.Color); + ) as _i4.ZetaPrimitives); @override - _i5.Color get surfaceSelectedHover => (super.noSuchMethod( - Invocation.getter(#surfaceSelectedHover), - returnValue: _FakeColor_4( + _i5.ZetaSemanticMainColors get main => (super.noSuchMethod( + Invocation.getter(#main), + returnValue: _FakeZetaSemanticMainColors_4( this, - Invocation.getter(#surfaceSelectedHover), + Invocation.getter(#main), ), - returnValueForMissingStub: _FakeColor_4( + returnValueForMissingStub: _FakeZetaSemanticMainColors_4( this, - Invocation.getter(#surfaceSelectedHover), + Invocation.getter(#main), ), - ) as _i5.Color); + ) as _i5.ZetaSemanticMainColors); @override - _i5.Color get surfaceDisabled => (super.noSuchMethod( - Invocation.getter(#surfaceDisabled), - returnValue: _FakeColor_4( + _i5.ZetaSemanticBorderColors get border => (super.noSuchMethod( + Invocation.getter(#border), + returnValue: _FakeZetaSemanticBorderColors_5( this, - Invocation.getter(#surfaceDisabled), + Invocation.getter(#border), ), - returnValueForMissingStub: _FakeColor_4( + returnValueForMissingStub: _FakeZetaSemanticBorderColors_5( this, - Invocation.getter(#surfaceDisabled), + Invocation.getter(#border), ), - ) as _i5.Color); + ) as _i5.ZetaSemanticBorderColors); @override - _i5.Color get surfaceCool => (super.noSuchMethod( - Invocation.getter(#surfaceCool), - returnValue: _FakeColor_4( + _i5.ZetaSemanticSurfaceColors get surface => (super.noSuchMethod( + Invocation.getter(#surface), + returnValue: _FakeZetaSemanticSurfaceColors_6( this, - Invocation.getter(#surfaceCool), + Invocation.getter(#surface), ), - returnValueForMissingStub: _FakeColor_4( + returnValueForMissingStub: _FakeZetaSemanticSurfaceColors_6( this, - Invocation.getter(#surfaceCool), + Invocation.getter(#surface), ), - ) as _i5.Color); + ) as _i5.ZetaSemanticSurfaceColors); @override - _i5.Color get surfaceWarm => (super.noSuchMethod( - Invocation.getter(#surfaceWarm), - returnValue: _FakeColor_4( + _i5.ZetaSemanticStateColors get state => (super.noSuchMethod( + Invocation.getter(#state), + returnValue: _FakeZetaSemanticStateColors_7( this, - Invocation.getter(#surfaceWarm), + Invocation.getter(#state), ), - returnValueForMissingStub: _FakeColor_4( + returnValueForMissingStub: _FakeZetaSemanticStateColors_7( this, - Invocation.getter(#surfaceWarm), + Invocation.getter(#state), ), - ) as _i5.Color); - - @override - _i5.Color get surfacePrimarySubtle => (super.noSuchMethod( - Invocation.getter(#surfacePrimarySubtle), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfacePrimarySubtle), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfacePrimarySubtle), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceAvatarBlue => (super.noSuchMethod( - Invocation.getter(#surfaceAvatarBlue), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarBlue), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarBlue), - ), - ) as _i5.Color); - - @override - _i4.ZetaColorSwatch get surfaceAvatarGreen => (super.noSuchMethod( - Invocation.getter(#surfaceAvatarGreen), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfaceAvatarGreen), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfaceAvatarGreen), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i5.Color get surfaceAvatarOrange => (super.noSuchMethod( - Invocation.getter(#surfaceAvatarOrange), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarOrange), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarOrange), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceAvatarPink => (super.noSuchMethod( - Invocation.getter(#surfaceAvatarPink), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarPink), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarPink), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceAvatarPurple => (super.noSuchMethod( - Invocation.getter(#surfaceAvatarPurple), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarPurple), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarPurple), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceAvatarTeal => (super.noSuchMethod( - Invocation.getter(#surfaceAvatarTeal), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarTeal), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarTeal), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceAvatarYellow => (super.noSuchMethod( - Invocation.getter(#surfaceAvatarYellow), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarYellow), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceAvatarYellow), - ), - ) as _i5.Color); - - @override - _i5.Color get surfaceSecondarySubtle => (super.noSuchMethod( - Invocation.getter(#surfaceSecondarySubtle), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceSecondarySubtle), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceSecondarySubtle), - ), - ) as _i5.Color); - - @override - _i4.ZetaColorSwatch get surfacePositive => (super.noSuchMethod( - Invocation.getter(#surfacePositive), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfacePositive), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfacePositive), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i5.Color get surfacePositiveSubtle => (super.noSuchMethod( - Invocation.getter(#surfacePositiveSubtle), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfacePositiveSubtle), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfacePositiveSubtle), - ), - ) as _i5.Color); - - @override - _i4.ZetaColorSwatch get surfaceWarning => (super.noSuchMethod( - Invocation.getter(#surfaceWarning), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfaceWarning), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfaceWarning), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i5.Color get surfaceWarningSubtle => (super.noSuchMethod( - Invocation.getter(#surfaceWarningSubtle), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceWarningSubtle), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceWarningSubtle), - ), - ) as _i5.Color); - - @override - _i4.ZetaColorSwatch get surfaceNegative => (super.noSuchMethod( - Invocation.getter(#surfaceNegative), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfaceNegative), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfaceNegative), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i5.Color get surfaceNegativeSubtle => (super.noSuchMethod( - Invocation.getter(#surfaceNegativeSubtle), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceNegativeSubtle), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceNegativeSubtle), - ), - ) as _i5.Color); - - @override - _i4.ZetaColorSwatch get surfaceInfo => (super.noSuchMethod( - Invocation.getter(#surfaceInfo), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfaceInfo), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#surfaceInfo), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i5.Color get surfaceInfoSubtle => (super.noSuchMethod( - Invocation.getter(#surfaceInfoSubtle), - returnValue: _FakeColor_4( - this, - Invocation.getter(#surfaceInfoSubtle), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#surfaceInfoSubtle), - ), - ) as _i5.Color); - - @override - _i5.Color get borderDefault => (super.noSuchMethod( - Invocation.getter(#borderDefault), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderDefault), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderDefault), - ), - ) as _i5.Color); - - @override - _i5.Color get borderSubtle => (super.noSuchMethod( - Invocation.getter(#borderSubtle), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderSubtle), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderSubtle), - ), - ) as _i5.Color); - - @override - _i5.Color get borderHover => (super.noSuchMethod( - Invocation.getter(#borderHover), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderHover), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderHover), - ), - ) as _i5.Color); - - @override - _i5.Color get borderSelected => (super.noSuchMethod( - Invocation.getter(#borderSelected), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderSelected), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderSelected), - ), - ) as _i5.Color); - - @override - _i5.Color get borderDisabled => (super.noSuchMethod( - Invocation.getter(#borderDisabled), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderDisabled), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderDisabled), - ), - ) as _i5.Color); - - @override - _i5.Color get borderPure => (super.noSuchMethod( - Invocation.getter(#borderPure), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderPure), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderPure), - ), - ) as _i5.Color); - - @override - _i4.ZetaColorSwatch get borderPrimaryMain => (super.noSuchMethod( - Invocation.getter(#borderPrimaryMain), - returnValue: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#borderPrimaryMain), - ), - returnValueForMissingStub: _FakeZetaColorSwatch_3( - this, - Invocation.getter(#borderPrimaryMain), - ), - ) as _i4.ZetaColorSwatch); - - @override - _i5.Color get borderPrimary => (super.noSuchMethod( - Invocation.getter(#borderPrimary), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderPrimary), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderPrimary), - ), - ) as _i5.Color); - - @override - _i5.Color get borderSecondary => (super.noSuchMethod( - Invocation.getter(#borderSecondary), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderSecondary), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderSecondary), - ), - ) as _i5.Color); - - @override - _i5.Color get borderPositive => (super.noSuchMethod( - Invocation.getter(#borderPositive), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderPositive), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderPositive), - ), - ) as _i5.Color); - - @override - _i5.Color get borderWarning => (super.noSuchMethod( - Invocation.getter(#borderWarning), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderWarning), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderWarning), - ), - ) as _i5.Color); - - @override - _i5.Color get borderNegative => (super.noSuchMethod( - Invocation.getter(#borderNegative), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderNegative), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderNegative), - ), - ) as _i5.Color); - - @override - _i5.Color get borderInfo => (super.noSuchMethod( - Invocation.getter(#borderInfo), - returnValue: _FakeColor_4( - this, - Invocation.getter(#borderInfo), - ), - returnValueForMissingStub: _FakeColor_4( - this, - Invocation.getter(#borderInfo), - ), - ) as _i5.Color); - - @override - bool get isDarkMode => (super.noSuchMethod( - Invocation.getter(#isDarkMode), - returnValue: false, - returnValueForMissingStub: false, - ) as bool); - - @override - List<_i4.ZetaColorSwatch> get rainbow => (super.noSuchMethod( - Invocation.getter(#rainbow), - returnValue: <_i4.ZetaColorSwatch>[], - returnValueForMissingStub: <_i4.ZetaColorSwatch>[], - ) as List<_i4.ZetaColorSwatch>); - - @override - Map get rainbowMap => (super.noSuchMethod( - Invocation.getter(#rainbowMap), - returnValue: {}, - returnValueForMissingStub: {}, - ) as Map); - - @override - List get props => (super.noSuchMethod( - Invocation.getter(#props), - returnValue: [], - returnValueForMissingStub: [], - ) as List); - - @override - _i6.ZetaColors copyWith({ - _i5.Brightness? brightness, - _i9.ZetaContrast? contrast, - _i4.ZetaColorSwatch? primary, - _i4.ZetaColorSwatch? secondary, - _i4.ZetaColorSwatch? error, - _i4.ZetaColorSwatch? cool, - _i4.ZetaColorSwatch? warm, - _i5.Color? white, - _i5.Color? black, - _i5.Color? surfacePrimary, - _i5.Color? surfaceSecondary, - _i5.Color? surfaceTertiary, - _i5.Color? link, - _i5.Color? linkVisited, - _i5.Color? shadow, - }) => - (super.noSuchMethod( - Invocation.method( - #copyWith, - [], - { - #brightness: brightness, - #contrast: contrast, - #primary: primary, - #secondary: secondary, - #error: error, - #cool: cool, - #warm: warm, - #white: white, - #black: black, - #surfacePrimary: surfacePrimary, - #surfaceSecondary: surfaceSecondary, - #surfaceTertiary: surfaceTertiary, - #link: link, - #linkVisited: linkVisited, - #shadow: shadow, - }, - ), - returnValue: _FakeZetaColors_5( - this, - Invocation.method( - #copyWith, - [], - { - #brightness: brightness, - #contrast: contrast, - #primary: primary, - #secondary: secondary, - #error: error, - #cool: cool, - #warm: warm, - #white: white, - #black: black, - #surfacePrimary: surfacePrimary, - #surfaceSecondary: surfaceSecondary, - #surfaceTertiary: surfaceTertiary, - #link: link, - #linkVisited: linkVisited, - #shadow: shadow, - }, - ), - ), - returnValueForMissingStub: _FakeZetaColors_5( - this, - Invocation.method( - #copyWith, - [], - { - #brightness: brightness, - #contrast: contrast, - #primary: primary, - #secondary: secondary, - #error: error, - #cool: cool, - #warm: warm, - #white: white, - #black: black, - #surfacePrimary: surfacePrimary, - #surfaceSecondary: surfaceSecondary, - #surfaceTertiary: surfaceTertiary, - #link: link, - #linkVisited: linkVisited, - #shadow: shadow, - }, - ), - ), - ) as _i6.ZetaColors); - - @override - _i6.ZetaColors apply({required _i9.ZetaContrast? contrast}) => (super.noSuchMethod( - Invocation.method( - #apply, - [], - {#contrast: contrast}, - ), - returnValue: _FakeZetaColors_5( - this, - Invocation.method( - #apply, - [], - {#contrast: contrast}, - ), - ), - returnValueForMissingStub: _FakeZetaColors_5( - this, - Invocation.method( - #apply, - [], - {#contrast: contrast}, - ), - ), - ) as _i6.ZetaColors); - - @override - _i7.ZetaColorScheme toScheme() => (super.noSuchMethod( - Invocation.method( - #toScheme, - [], - ), - returnValue: _FakeZetaColorScheme_6( - this, - Invocation.method( - #toScheme, - [], - ), - ), - returnValueForMissingStub: _FakeZetaColorScheme_6( - this, - Invocation.method( - #toScheme, - [], - ), - ), - ) as _i7.ZetaColorScheme); + ) as _i5.ZetaSemanticStateColors); } /// A class which mocks [Zeta]. /// /// See the documentation for Mockito's code generation for more information. -class MockZeta extends _i1.Mock implements _i6.Zeta { +class MockZeta extends _i1.Mock implements _i5.Zeta { @override - _i9.ZetaContrast get contrast => (super.noSuchMethod( + _i5.ZetaContrast get contrast => (super.noSuchMethod( Invocation.getter(#contrast), - returnValue: _i9.ZetaContrast.aa, - returnValueForMissingStub: _i9.ZetaContrast.aa, - ) as _i9.ZetaContrast); + returnValue: _i5.ZetaContrast.aa, + returnValueForMissingStub: _i5.ZetaContrast.aa, + ) as _i5.ZetaContrast); @override _i2.ThemeMode get themeMode => (super.noSuchMethod( @@ -1501,19 +449,6 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { returnValueForMissingStub: _i2.ThemeMode.system, ) as _i2.ThemeMode); - @override - _i6.ZetaThemeData get themeData => (super.noSuchMethod( - Invocation.getter(#themeData), - returnValue: _FakeZetaThemeData_7( - this, - Invocation.getter(#themeData), - ), - returnValueForMissingStub: _FakeZetaThemeData_7( - this, - Invocation.getter(#themeData), - ), - ) as _i6.ZetaThemeData); - @override bool get rounded => (super.noSuchMethod( Invocation.getter(#rounded), @@ -1522,50 +457,50 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { ) as bool); @override - _i6.ZetaColors get colors => (super.noSuchMethod( + _i5.ZetaSemanticColors get colors => (super.noSuchMethod( Invocation.getter(#colors), - returnValue: _FakeZetaColors_5( + returnValue: _FakeZetaSemanticColors_8( this, Invocation.getter(#colors), ), - returnValueForMissingStub: _FakeZetaColors_5( + returnValueForMissingStub: _FakeZetaSemanticColors_8( this, Invocation.getter(#colors), ), - ) as _i6.ZetaColors); + ) as _i5.ZetaSemanticColors); @override - _i5.Brightness get brightness => (super.noSuchMethod( + _i7.Brightness get brightness => (super.noSuchMethod( Invocation.getter(#brightness), - returnValue: _i5.Brightness.dark, - returnValueForMissingStub: _i5.Brightness.dark, - ) as _i5.Brightness); + returnValue: _i7.Brightness.dark, + returnValueForMissingStub: _i7.Brightness.dark, + ) as _i7.Brightness); @override - _i6.ZetaRadiiSemantics get radius => (super.noSuchMethod( + _i5.ZetaRadiiSemantics get radius => (super.noSuchMethod( Invocation.getter(#radius), - returnValue: _FakeZetaRadiiSemantics_8( + returnValue: _FakeZetaRadiiSemantics_9( this, Invocation.getter(#radius), ), - returnValueForMissingStub: _FakeZetaRadiiSemantics_8( + returnValueForMissingStub: _FakeZetaRadiiSemantics_9( this, Invocation.getter(#radius), ), - ) as _i6.ZetaRadiiSemantics); + ) as _i5.ZetaRadiiSemantics); @override - _i6.ZetaSpacingSemantics get spacing => (super.noSuchMethod( + _i5.ZetaSpacingSemantics get spacing => (super.noSuchMethod( Invocation.getter(#spacing), - returnValue: _FakeZetaSpacingSemantics_9( + returnValue: _FakeZetaSpacingSemantics_10( this, Invocation.getter(#spacing), ), - returnValueForMissingStub: _FakeZetaSpacingSemantics_9( + returnValueForMissingStub: _FakeZetaSpacingSemantics_10( this, Invocation.getter(#spacing), ), - ) as _i6.ZetaSpacingSemantics); + ) as _i5.ZetaSpacingSemantics); @override _i2.Widget get child => (super.noSuchMethod( @@ -1581,7 +516,8 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { ) as _i2.Widget); @override - bool updateShouldNotify(_i2.InheritedWidget? oldWidget) => (super.noSuchMethod( + bool updateShouldNotify(_i2.InheritedWidget? oldWidget) => + (super.noSuchMethod( Invocation.method( #updateShouldNotify, [oldWidget], @@ -1591,7 +527,8 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { ) as bool); @override - void debugFillProperties(_i3.DiagnosticPropertiesBuilder? properties) => super.noSuchMethod( + void debugFillProperties(_i3.DiagnosticPropertiesBuilder? properties) => + super.noSuchMethod( Invocation.method( #debugFillProperties, [properties], @@ -1605,14 +542,14 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { #createElement, [], ), - returnValue: _FakeInheritedElement_10( + returnValue: _FakeInheritedElement_11( this, Invocation.method( #createElement, [], ), ), - returnValueForMissingStub: _FakeInheritedElement_10( + returnValueForMissingStub: _FakeInheritedElement_11( this, Invocation.method( #createElement, @@ -1627,14 +564,14 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { #toStringShort, [], ), - returnValue: _i10.dummyValue( + returnValue: _i8.dummyValue( this, Invocation.method( #toStringShort, [], ), ), - returnValueForMissingStub: _i10.dummyValue( + returnValueForMissingStub: _i8.dummyValue( this, Invocation.method( #toStringShort, @@ -1657,7 +594,7 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { #minLevel: minLevel, }, ), - returnValue: _i10.dummyValue( + returnValue: _i8.dummyValue( this, Invocation.method( #toStringShallow, @@ -1668,7 +605,7 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { }, ), ), - returnValueForMissingStub: _i10.dummyValue( + returnValueForMissingStub: _i8.dummyValue( this, Invocation.method( #toStringShallow, @@ -1697,7 +634,7 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { #minLevel: minLevel, }, ), - returnValue: _i10.dummyValue( + returnValue: _i8.dummyValue( this, Invocation.method( #toStringDeep, @@ -1709,7 +646,7 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { }, ), ), - returnValueForMissingStub: _i10.dummyValue( + returnValueForMissingStub: _i8.dummyValue( this, Invocation.method( #toStringDeep, @@ -1772,5 +709,6 @@ class MockZeta extends _i1.Mock implements _i6.Zeta { ) as List<_i3.DiagnosticsNode>); @override - String toString({_i3.DiagnosticLevel? minLevel = _i3.DiagnosticLevel.info}) => super.toString(); + String toString({_i3.DiagnosticLevel? minLevel = _i3.DiagnosticLevel.info}) => + super.toString(); } diff --git a/test/src/utils/rounded_test.mocks.dart b/test/src/utils/rounded_test.mocks.dart index 1ea97859..9bf63019 100644 --- a/test/src/utils/rounded_test.mocks.dart +++ b/test/src/utils/rounded_test.mocks.dart @@ -24,8 +24,9 @@ import 'package:zeta_flutter/zeta_flutter.dart' as _i2; // ignore_for_file: camel_case_types // ignore_for_file: subtype_of_sealed_class -class _FakeZetaThemeData_0 extends _i1.SmartFake implements _i2.ZetaThemeData { - _FakeZetaThemeData_0( +class _FakeZetaSemanticColors_0 extends _i1.SmartFake + implements _i2.ZetaSemanticColors { + _FakeZetaSemanticColors_0( Object parent, Invocation parentInvocation, ) : super( @@ -34,8 +35,9 @@ class _FakeZetaThemeData_0 extends _i1.SmartFake implements _i2.ZetaThemeData { ); } -class _FakeZetaColors_1 extends _i1.SmartFake implements _i2.ZetaColors { - _FakeZetaColors_1( +class _FakeZetaRadiiSemantics_1 extends _i1.SmartFake + implements _i2.ZetaRadiiSemantics { + _FakeZetaRadiiSemantics_1( Object parent, Invocation parentInvocation, ) : super( @@ -44,8 +46,9 @@ class _FakeZetaColors_1 extends _i1.SmartFake implements _i2.ZetaColors { ); } -class _FakeZetaRadiiSemantics_2 extends _i1.SmartFake implements _i2.ZetaRadiiSemantics { - _FakeZetaRadiiSemantics_2( +class _FakeZetaSpacingSemantics_2 extends _i1.SmartFake + implements _i2.ZetaSpacingSemantics { + _FakeZetaSpacingSemantics_2( Object parent, Invocation parentInvocation, ) : super( @@ -54,18 +57,8 @@ class _FakeZetaRadiiSemantics_2 extends _i1.SmartFake implements _i2.ZetaRadiiSe ); } -class _FakeZetaSpacingSemantics_3 extends _i1.SmartFake implements _i2.ZetaSpacingSemantics { - _FakeZetaSpacingSemantics_3( - Object parent, - Invocation parentInvocation, - ) : super( - parent, - parentInvocation, - ); -} - -class _FakeWidget_4 extends _i1.SmartFake implements _i3.Widget { - _FakeWidget_4( +class _FakeWidget_3 extends _i1.SmartFake implements _i3.Widget { + _FakeWidget_3( Object parent, Invocation parentInvocation, ) : super( @@ -74,11 +67,13 @@ class _FakeWidget_4 extends _i1.SmartFake implements _i3.Widget { ); @override - String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); + String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => + super.toString(); } -class _FakeInheritedElement_5 extends _i1.SmartFake implements _i3.InheritedElement { - _FakeInheritedElement_5( +class _FakeInheritedElement_4 extends _i1.SmartFake + implements _i3.InheritedElement { + _FakeInheritedElement_4( Object parent, Invocation parentInvocation, ) : super( @@ -87,11 +82,13 @@ class _FakeInheritedElement_5 extends _i1.SmartFake implements _i3.InheritedElem ); @override - String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); + String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => + super.toString(); } -class _FakeDiagnosticsNode_6 extends _i1.SmartFake implements _i4.DiagnosticsNode { - _FakeDiagnosticsNode_6( +class _FakeDiagnosticsNode_5 extends _i1.SmartFake + implements _i4.DiagnosticsNode { + _FakeDiagnosticsNode_5( Object parent, Invocation parentInvocation, ) : super( @@ -125,19 +122,6 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { returnValueForMissingStub: _i3.ThemeMode.system, ) as _i3.ThemeMode); - @override - _i2.ZetaThemeData get themeData => (super.noSuchMethod( - Invocation.getter(#themeData), - returnValue: _FakeZetaThemeData_0( - this, - Invocation.getter(#themeData), - ), - returnValueForMissingStub: _FakeZetaThemeData_0( - this, - Invocation.getter(#themeData), - ), - ) as _i2.ZetaThemeData); - @override bool get rounded => (super.noSuchMethod( Invocation.getter(#rounded), @@ -146,17 +130,17 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { ) as bool); @override - _i2.ZetaColors get colors => (super.noSuchMethod( + _i2.ZetaSemanticColors get colors => (super.noSuchMethod( Invocation.getter(#colors), - returnValue: _FakeZetaColors_1( + returnValue: _FakeZetaSemanticColors_0( this, Invocation.getter(#colors), ), - returnValueForMissingStub: _FakeZetaColors_1( + returnValueForMissingStub: _FakeZetaSemanticColors_0( this, Invocation.getter(#colors), ), - ) as _i2.ZetaColors); + ) as _i2.ZetaSemanticColors); @override _i5.Brightness get brightness => (super.noSuchMethod( @@ -168,11 +152,11 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { @override _i2.ZetaRadiiSemantics get radius => (super.noSuchMethod( Invocation.getter(#radius), - returnValue: _FakeZetaRadiiSemantics_2( + returnValue: _FakeZetaRadiiSemantics_1( this, Invocation.getter(#radius), ), - returnValueForMissingStub: _FakeZetaRadiiSemantics_2( + returnValueForMissingStub: _FakeZetaRadiiSemantics_1( this, Invocation.getter(#radius), ), @@ -181,11 +165,11 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { @override _i2.ZetaSpacingSemantics get spacing => (super.noSuchMethod( Invocation.getter(#spacing), - returnValue: _FakeZetaSpacingSemantics_3( + returnValue: _FakeZetaSpacingSemantics_2( this, Invocation.getter(#spacing), ), - returnValueForMissingStub: _FakeZetaSpacingSemantics_3( + returnValueForMissingStub: _FakeZetaSpacingSemantics_2( this, Invocation.getter(#spacing), ), @@ -194,18 +178,19 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { @override _i3.Widget get child => (super.noSuchMethod( Invocation.getter(#child), - returnValue: _FakeWidget_4( + returnValue: _FakeWidget_3( this, Invocation.getter(#child), ), - returnValueForMissingStub: _FakeWidget_4( + returnValueForMissingStub: _FakeWidget_3( this, Invocation.getter(#child), ), ) as _i3.Widget); @override - bool updateShouldNotify(_i3.InheritedWidget? oldWidget) => (super.noSuchMethod( + bool updateShouldNotify(_i3.InheritedWidget? oldWidget) => + (super.noSuchMethod( Invocation.method( #updateShouldNotify, [oldWidget], @@ -215,7 +200,8 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { ) as bool); @override - void debugFillProperties(_i4.DiagnosticPropertiesBuilder? properties) => super.noSuchMethod( + void debugFillProperties(_i4.DiagnosticPropertiesBuilder? properties) => + super.noSuchMethod( Invocation.method( #debugFillProperties, [properties], @@ -229,14 +215,14 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { #createElement, [], ), - returnValue: _FakeInheritedElement_5( + returnValue: _FakeInheritedElement_4( this, Invocation.method( #createElement, [], ), ), - returnValueForMissingStub: _FakeInheritedElement_5( + returnValueForMissingStub: _FakeInheritedElement_4( this, Invocation.method( #createElement, @@ -361,7 +347,7 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { #style: style, }, ), - returnValue: _FakeDiagnosticsNode_6( + returnValue: _FakeDiagnosticsNode_5( this, Invocation.method( #toDiagnosticsNode, @@ -372,7 +358,7 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { }, ), ), - returnValueForMissingStub: _FakeDiagnosticsNode_6( + returnValueForMissingStub: _FakeDiagnosticsNode_5( this, Invocation.method( #toDiagnosticsNode, @@ -396,5 +382,6 @@ class MockZeta extends _i1.Mock implements _i2.Zeta { ) as List<_i4.DiagnosticsNode>); @override - String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => super.toString(); + String toString({_i4.DiagnosticLevel? minLevel = _i4.DiagnosticLevel.info}) => + super.toString(); } diff --git a/test/src/zeta_provider_test.dart b/test/src/zeta_provider_test.dart index ecf19b76..0c2c6979 100644 --- a/test/src/zeta_provider_test.dart +++ b/test/src/zeta_provider_test.dart @@ -1,3 +1,4 @@ +// ignore_for_file: deprecated_member_use_from_same_package import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; @@ -221,7 +222,7 @@ void main() { await tester.pumpAndSettle(); // Verifying through the public interface of Zeta widget - expect(tester.widget(find.byType(Zeta)).themeData.identifier, 'default'); + expect(tester.widget(find.byType(Zeta)).themeData?.identifier, 'default'); await tester.pumpWidget( ZetaProvider( @@ -237,7 +238,7 @@ void main() { await tester.pumpAndSettle(const Duration(milliseconds: 250)); // Verifying through the public interface of Zeta widget - expect(tester.widget(find.byType(Zeta)).themeData.identifier, 'different'); + expect(tester.widget(find.byType(Zeta)).themeData?.identifier, 'different'); }); testWidgets('didUpdateWidget in ZetaProviderState works correctly with change rounded', (WidgetTester tester) async { @@ -371,7 +372,7 @@ void main() { zetaThemeData: initialThemeData, ); - expect(theme2.iconTheme.color, initialThemeData.colorsLight.iconDefault); + expect(theme2.iconTheme.color, initialThemeData.colorsLight.main.defaultColor); }); testWidgets('debugFillProperties works correctly', (WidgetTester tester) async { diff --git a/test/src/zeta_provider_test.mocks.dart b/test/src/zeta_provider_test.mocks.dart index 04681f4b..dacd694b 100644 --- a/test/src/zeta_provider_test.mocks.dart +++ b/test/src/zeta_provider_test.mocks.dart @@ -29,15 +29,26 @@ import 'package:zeta_flutter/src/theme/theme_service.dart' as _i2; /// See the documentation for Mockito's code generation for more information. class MockZetaThemeService extends _i1.Mock implements _i2.ZetaThemeService { @override - _i3.Future<(_i4.ZetaThemeData?, _i5.ThemeMode?, _i6.ZetaContrast?)> loadTheme() => (super.noSuchMethod( - Invocation.method( - #loadTheme, - [], - ), - returnValue: _i3.Future<(_i4.ZetaThemeData?, _i5.ThemeMode?, _i6.ZetaContrast?)>.value((null, null, null)), - returnValueForMissingStub: - _i3.Future<(_i4.ZetaThemeData?, _i5.ThemeMode?, _i6.ZetaContrast?)>.value((null, null, null)), - ) as _i3.Future<(_i4.ZetaThemeData?, _i5.ThemeMode?, _i6.ZetaContrast?)>); + _i3.Future<(_i4.ZetaThemeData?, _i5.ThemeMode?, _i6.ZetaContrast?)> + loadTheme() => (super.noSuchMethod( + Invocation.method( + #loadTheme, + [], + ), + returnValue: _i3.Future< + ( + _i4.ZetaThemeData?, + _i5.ThemeMode?, + _i6.ZetaContrast? + )>.value((null, null, null)), + returnValueForMissingStub: _i3.Future< + ( + _i4.ZetaThemeData?, + _i5.ThemeMode?, + _i6.ZetaContrast? + )>.value((null, null, null)), + ) as _i3 + .Future<(_i4.ZetaThemeData?, _i5.ThemeMode?, _i6.ZetaContrast?)>); @override _i3.Future saveTheme({ diff --git a/test/src/zeta_test.dart b/test/src/zeta_test.dart index 98b95eb9..563ea26b 100644 --- a/test/src/zeta_test.dart +++ b/test/src/zeta_test.dart @@ -1,3 +1,5 @@ +// ignore_for_file: deprecated_member_use_from_same_package + import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; diff --git a/test/test_utils/test_app.dart b/test/test_utils/test_app.dart index 97272772..d935b783 100644 --- a/test/test_utils/test_app.dart +++ b/test/test_utils/test_app.dart @@ -10,6 +10,7 @@ class TestApp extends StatelessWidget { this.themeMode, this.removeBody = true, this.rounded, + this.contrast, }); final Widget home; @@ -17,12 +18,14 @@ class TestApp extends StatelessWidget { final ThemeMode? themeMode; final bool removeBody; final bool? rounded; + final ZetaContrast? contrast; @override Widget build(BuildContext context) { return ZetaProvider.base( initialThemeMode: themeMode ?? ThemeMode.system, initialRounded: rounded ?? true, + initialContrast: contrast ?? ZetaContrast.aa, builder: (context, lightTheme, darkTheme, themeMode) { return MaterialApp( theme: lightTheme, @@ -52,6 +55,7 @@ class TestApp extends StatelessWidget { ..add(DiagnosticsProperty('screenSize', screenSize)) ..add(EnumProperty('themeMode', themeMode)) ..add(DiagnosticsProperty('removeBody', removeBody)) - ..add(DiagnosticsProperty('rounded', rounded)); + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(EnumProperty('contrast', contrast)); } }