feat: Update colors tokens (#81)

chore: Add deprecation warning on breaking colors
ZebraDevs · May 24, 2024 · 418cc1d · 418cc1d
1 parent 57c72f4
commit 418cc1d
Show file tree

Hide file tree

Showing 28 changed files with 493 additions and 416 deletions.
diff --git a/custom_docs/components/Color/flutter.md b/custom_docs/components/Color/flutter.md
@@ -75,7 +75,7 @@ ZetaColors has the following modifiers:
 - primary, onPrimary
 - secondary, onSecondary
 - positive, onPositive, negative, onNegative, warning, onWarning, info, onInfo
-- surface, onSurface, surfaceDisabled, surfaceHovered, surfaceSecondary, surfaceTertiary, surfaceSelectedHovered, surfaceSelected
+- surface, onSurface, surfaceDisabled, surfaceHover, surfaceSecondary, surfaceTertiary, surfaceSelectedHover, surfaceSelected
 - background, onBackground
 - textDefault, textSubtle, textDisabled, textInverse,
 - borderDefault, borderSubtle, borderDisabled, borderSelected,

diff --git 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: Icon(
                   ZetaIcons.warning_round,
-                  color: zeta.colors.warning,
+                  color: zeta.colors.surfaceWarning,
                 ),
                 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: Icon(
                   ZetaIcons.warning_round,
-                  color: zeta.colors.warning,
+                  color: zeta.colors.surfaceWarning,
                 ),
                 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: Icon(
                   ZetaIcons.warning_round,
-                  color: zeta.colors.warning,
+                  color: zeta.colors.surfaceWarning,
                 ),
                 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: Icon(
                   ZetaIcons.warning_round,
-                  color: zeta.colors.warning,
+                  color: zeta.colors.surfaceWarning,
                 ),
                 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/theme/color_example.dart b/example/lib/pages/theme/color_example.dart
@@ -108,17 +108,13 @@ class _ColorExampleState extends State<ColorExample> {
           'borderDisabled': colors.borderDisabled,
           'borderSelected': colors.borderSelected,
         };
-        final Map<String, Color> links = {
-          'linkDefault': colors.link,
-          'linkVisited': colors.linkVisited,
-        };
         final Map<String, Color> backdrop = {
           'surfacePrimary': colors.surfacePrimary,
           'surfaceDisabled': colors.surfaceDisabled,
-          'surfaceHovered': colors.surfaceHovered,
+          'surfaceHover': colors.surfaceHover,
           'surfaceSecondary': colors.surfaceSecondary,
           'surfaceTertiary': colors.surfaceTertiary,
-          'surfaceSelectedHovered': colors.surfaceSelectedHovered,
+          'surfaceSelectedHover': colors.surfaceSelectedHover,
           'surfaceSelected': colors.surfaceSelected,
         };
 
@@ -128,10 +124,9 @@ class _ColorExampleState extends State<ColorExample> {
         };
 
         final Map<String, Color> alerts = {
-          'positive': colors.positive.text,
-          'negative': colors.negative.text,
-          'warning': colors.warning.text,
-          'info': colors.info.text,
+          'negative': colors.surfaceNegative,
+          'warning': colors.surfaceWarning,
+          'info': colors.surfaceInfo,
         };
 
         return ExampleScaffold(
@@ -142,7 +137,6 @@ class _ColorExampleState extends State<ColorExample> {
               children: [
                 MyRow(children: textIcon, title: 'Text and icon styles'),
                 MyRow(children: border, title: 'Border styles'),
-                MyRow(children: links, title: 'Links'),
                 MyRow(children: backdrop, title: 'Backdrop colors'),
                 MyRow(children: primaries, title: 'Primary colors'),
                 MyRow(children: alerts, title: 'Alert colors'),

diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock
@@ -28,10 +28,10 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
-  path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
+  path_provider_foundation: 3784922295ac71e43754bd15e0653ccfd36a147c
   shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
   sqflite: 673a0e54cc04b7d6dba8d24fb8095b31c3a99eec
 
 PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7
 
-COCOAPODS: 1.15.1
+COCOAPODS: 1.15.2
diff --git a/example/test/color_test.dart b/example/test/color_test.dart
@@ -25,7 +25,7 @@ void main() {
 
   testWidgets('Scheme generator', (tester) async {
     final blueSwatch = ZetaColorSwatch.fromColor(ZetaColorBase.blue);
-    final greySwatch = ZetaColorSwatch.fromColor(ZetaColorBase.greyCool);
+    final greySwatch = ZetaColorSwatch.fromColor(ZetaColorBase.cool);
     final blackSwatch = ZetaColorSwatch.fromColor(ZetaColorBase.black);
 
     expect(blueSwatch.shade10 != blueSwatch.shade20, true);

diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
@@ -110,11 +110,11 @@ class HotReload extends StatelessWidget {
               ],
             ),
             WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)),
-            WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
             WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)),
-            WidgetbookUseCase(name: 'Contact Item', builder: (context) => contactItemUseCase(context)),
             WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)),
             WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)),
+            WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
+            WidgetbookUseCase(name: 'Contact Item', builder: (context) => contactItemUseCase(context)),
             WidgetbookUseCase(name: "Dropdown", builder: (context) => dropdownUseCase(context)),
             WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)),
             WidgetbookUseCase(name: 'Password Input', builder: (context) => passwordInputUseCase(context)),

diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart
@@ -36,7 +36,7 @@ Widget iconsUseCase(BuildContext context) {
                     height: 120,
                     child: InkWell(
                       borderRadius: ZetaRadius.rounded,
-                      hoverColor: Zeta.of(context).colors.surfaceHovered,
+                      hoverColor: Zeta.of(context).colors.surfaceHover,
                       onTap: () async {
                         await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key));
                         ScaffoldMessenger.of(context).showMaterialBanner(

diff --git a/example/widgetbook/pages/components/dialog_widgetbook.dart b/example/widgetbook/pages/components/dialog_widgetbook.dart
@@ -45,7 +45,7 @@ Widget dialogUseCase(BuildContext context) {
                 title: title,
                 icon: Icon(
                   iconData,
-                  color: zeta.colors.warning,
+                  color: zeta.colors.surfaceWarning,
                 ),
                 message: message,
                 primaryButtonLabel: 'Confirm',
@@ -62,7 +62,7 @@ Widget dialogUseCase(BuildContext context) {
                 title: title,
                 icon: Icon(
                   iconData,
-                  color: zeta.colors.warning,
+                  color: zeta.colors.surfaceWarning,
                 ),
                 message: message,
                 primaryButtonLabel: 'Confirm',
@@ -80,7 +80,7 @@ Widget dialogUseCase(BuildContext context) {
                 title: title,
                 icon: Icon(
                   iconData,
-                  color: zeta.colors.warning,
+                  color: zeta.colors.surfaceWarning,
                 ),
                 message: message,
                 primaryButtonLabel: 'Confirm',

diff --git a/example/widgetbook/pages/theme/color_widgetbook.dart b/example/widgetbook/pages/theme/color_widgetbook.dart
@@ -36,24 +36,20 @@ class ColorBody extends StatelessWidget {
         'borderDisabled': colors.borderDisabled,
         'borderSelected': colors.borderSelected,
       };
-      final Map<String, Color> links = {
-        'linkDefault': colors.link,
-        'linkVisited': colors.linkVisited,
-      };
       final Map<String, Color> backdrop = {
         'surfacePrimary': colors.surfacePrimary,
         'surfaceDisabled': colors.surfaceDisabled,
-        'surfaceHovered': colors.surfaceHovered,
+        'surfaceHover': colors.surfaceHover,
         'surfaceSecondary': colors.surfaceSecondary,
         'surfaceTertiary': colors.surfaceTertiary,
-        'surfaceSelectedHovered': colors.surfaceSelectedHovered,
+        'surfaceSelectedHover': colors.surfaceSelectedHover,
         'surfaceSelected': colors.surfaceSelected,
       };
       final Map<String, Color> alerts = {
-        'positive': colors.positive,
-        'negative': colors.negative,
-        'warning': colors.warning,
-        'info': colors.info,
+        'positive': colors.surfacePositive,
+        'negative': colors.surfaceNegative,
+        'warning': colors.surfaceWarning,
+        'info': colors.surfaceInfo,
       };
 
       return DefaultTextStyle(
@@ -70,7 +66,6 @@ class ColorBody extends StatelessWidget {
                 const SizedBox(height: ZetaSpacing.l),
                 MyRow(children: textIcon, title: 'Text and icon styles'),
                 MyRow(children: border, title: 'Border styles'),
-                MyRow(children: links, title: 'Links'),
                 MyRow(children: backdrop, title: 'Backdrop colors'),
                 MyRow(children: alerts, title: 'Alert colors'),
                 Row(children: [Text('Full color swatches')]).paddingVertical(ZetaSpacing.x8),

diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart
@@ -170,7 +170,7 @@ class ZetaAvatar extends StatelessWidget {
                     width: contentSizePixels,
                     height: contentSizePixels,
                     decoration: BoxDecoration(
-                      color: backgroundColor ?? zetaColors.surfaceHovered,
+                      color: backgroundColor ?? zetaColors.surfaceHover,
                       border: Border.all(color: borderColor!, width: borderSize),
                       borderRadius: ZetaRadius.full,
                     ),
@@ -182,7 +182,7 @@ class ZetaAvatar extends StatelessWidget {
                 : DecoratedBox(
                     decoration: BoxDecoration(
                       borderRadius: ZetaRadius.full,
-                      color: backgroundColor ?? zetaColors.surfaceHovered,
+                      color: backgroundColor ?? zetaColors.surfaceHover,
                     ),
                     child: ClipRRect(
                       borderRadius: ZetaRadius.full,
@@ -364,7 +364,7 @@ class ZetaAvatarBadge extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final colors = Zeta.of(context).colors;
-    final backgroundColor = type == ZetaAvatarBadgeType.notification ? colors.negative : color;
+    final backgroundColor = type == ZetaAvatarBadgeType.notification ? colors.surfaceNegative : color;
     final badgeSize = _getContainerSize();
     final borderSize = _getBorderSize();
     final paddedSize = badgeSize + ZetaSpacing.x1;

diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart
@@ -82,7 +82,7 @@ class ZetaIndicator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final zetaColors = Zeta.of(context).colors;
-    final Color backgroundColor = (type == ZetaIndicatorType.icon ? zetaColors.blue : zetaColors.negative);
+    final Color backgroundColor = (type == ZetaIndicatorType.icon ? zetaColors.blue : zetaColors.surfaceNegative);
     final Color foregroundColor = backgroundColor.onColor;
     final sizePixels = _getSizePixels(size, type);
 

diff --git a/lib/src/components/badges/tag.dart b/lib/src/components/badges/tag.dart
@@ -49,7 +49,7 @@ class ZetaTag extends StatelessWidget {
         if (direction == ZetaTagDirection.right) _buildCustomPaint(context),
         Container(
           decoration: BoxDecoration(
-            color: Zeta.of(context).colors.surfaceHovered,
+            color: Zeta.of(context).colors.surfaceHover,
             borderRadius: _getBorderRadius(),
           ),
           height: _containerSize.height,
@@ -91,7 +91,7 @@ class ZetaTag extends StatelessWidget {
     return CustomPaint(
       size: const Size(ZetaSpacing.x3, ZetaSpacing.x7),
       painter: _TagPainter(
-        color: Zeta.of(context).colors.surfaceHovered,
+        color: Zeta.of(context).colors.surfaceHover,
         direction: direction,
         rounded: rounded,
       ),

diff --git a/lib/src/components/banners/system_banner.dart b/lib/src/components/banners/system_banner.dart
@@ -92,11 +92,11 @@ class ZetaSystemBanner extends MaterialBanner {
       case ZetaSystemBannerStatus.primary:
         return zeta.colors.primary;
       case ZetaSystemBannerStatus.positive:
-        return zeta.colors.positive;
+        return zeta.colors.surfacePositive;
       case ZetaSystemBannerStatus.warning:
         return zeta.colors.orange;
       case ZetaSystemBannerStatus.negative:
-        return zeta.colors.negative;
+        return zeta.colors.surfaceNegative;
     }
   }
 }
diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart
@@ -1,6 +1,5 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-
 import '../../../zeta_flutter.dart';
 
 ///Class for [ZetaBreadCrumbs]
@@ -274,7 +273,7 @@ class _BreadCrumbsTruncatedState extends State<BreadCrumbsTruncated> {
             style: ButtonStyle(
               backgroundColor: WidgetStateProperty.resolveWith((states) {
                 if (states.contains(WidgetState.hovered)) {
-                  return colors.surfaceHovered;
+                  return colors.surfaceHover;
                 }
                 if (states.contains(WidgetState.pressed)) {
                   return colors.primary.shade10;

diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart
@@ -42,9 +42,9 @@ extension ButtonFunctions on ZetaButtonType {
       case ZetaButtonType.secondary:
         return colors.secondary;
       case ZetaButtonType.positive:
-        return colors.positive;
+        return colors.surfacePositive;
       case ZetaButtonType.negative:
-        return colors.negative;
+        return colors.surfaceNegative;
       case ZetaButtonType.outline:
       case ZetaButtonType.primary:
         return colors.primary;

diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart
@@ -106,7 +106,7 @@ class ZetaChatItem extends StatelessWidget {
         _ZetaSlidableAction(
           onPressed: onCallTap,
           backgroundColor: colors.green.shade10,
-          foregroundColor: colors.positive,
+          foregroundColor: colors.surfacePositive,
           icon: Icons.call,
         ),
       if (onPttTap != null)
@@ -120,7 +120,7 @@ class ZetaChatItem extends StatelessWidget {
         _ZetaSlidableAction(
           onPressed: onDeleteTap,
           backgroundColor: colors.red.shade10,
-          foregroundColor: colors.negative,
+          foregroundColor: colors.surfaceNegative,
           icon: ZetaIcons.delete_round,
         ),
     ];
@@ -218,7 +218,7 @@ class ZetaChatItem extends StatelessWidget {
                                                       ),
                                                       child: Icon(
                                                         Icons.circle_notifications,
-                                                        color: colors.negative,
+                                                        color: colors.surfaceNegative,
                                                       ),
                                                     ),
                                                   if (_count != null)

diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart
@@ -111,7 +111,7 @@ class _ZetaChipState extends State<ZetaChip> {
           }
 
           if (states.contains(WidgetState.hovered)) {
-            return colors.surfaceHovered;
+            return colors.surfaceHover;
           }
 
           return colors.surfacePrimary;

diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart
@@ -204,10 +204,10 @@ class ZetaDialPadButton extends StatelessWidget {
             borderRadius: ZetaRadius.full,
             overlayColor: WidgetStateProperty.resolveWith((states) {
               if (states.contains(WidgetState.pressed)) {
-                return colors.surfaceSelectedHovered;
+                return colors.surfaceSelectedHover;
               }
               if (states.contains(WidgetState.hovered)) {
-                return colors.surfaceHovered;
+                return colors.surfaceHover;
               }
               return null;
             }),

diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart
@@ -388,7 +388,7 @@ class _DropdownItemState<T> extends State<_DropdownItem<T>> {
           return colors.surfaceSelected;
         }
         if (states.contains(WidgetState.hovered)) {
-          return colors.surfaceHovered;
+          return colors.surfaceHover;
         }
 
         return colors.surfacePrimary;

diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart
@@ -317,7 +317,7 @@ class _PaginationItem extends StatelessWidget {
           onTap: disabled ? null : onPressed,
           borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none,
           highlightColor: selected ? colors.cool[100] : colors.surfaceSelected,
-          hoverColor: selected ? colors.cool[100] : colors.surfaceHovered,
+          hoverColor: selected ? colors.cool[100] : colors.surfaceHover,
           enableFeedback: false,
           child: Container(
             alignment: Alignment.center,

diff --git a/lib/src/components/select_input/select_input.dart b/lib/src/components/select_input/select_input.dart
@@ -520,7 +520,7 @@ class ZetaSelectInputItem extends StatelessWidget {
     return ButtonStyle(
       backgroundColor: WidgetStateProperty.resolveWith((states) {
         if (states.contains(WidgetState.hovered)) {
-          return colors.surfaceHovered;
+          return colors.surfaceHover;
         }
 
         if (states.contains(WidgetState.pressed)) {

diff --git a/lib/src/components/snack_bar/snack_bar.dart b/lib/src/components/snack_bar/snack_bar.dart
@@ -312,10 +312,10 @@ class _LeadingIcon extends StatelessWidget {
 
   Color _getIconColor(ZetaColors colors, ZetaSnackBarType? type) {
     return switch (type) {
-      ZetaSnackBarType.positive => colors.positive,
-      ZetaSnackBarType.info => colors.info,
-      ZetaSnackBarType.warning => colors.warning,
-      ZetaSnackBarType.error || ZetaSnackBarType.deletion => colors.negative,
+      ZetaSnackBarType.positive => colors.surfacePositive,
+      ZetaSnackBarType.info => colors.surfaceInfo,
+      ZetaSnackBarType.warning => colors.surfaceWarning,
+      ZetaSnackBarType.error || ZetaSnackBarType.deletion => colors.surfaceNegative,
       ZetaSnackBarType.view => colors.primary,
       _ => colors.iconInverse,
     };

diff --git a/lib/src/components/stepper/stepper.dart b/lib/src/components/stepper/stepper.dart
@@ -253,7 +253,7 @@ class _ZetaStepperState extends State<ZetaStepper> with TickerProviderStateMixin
 
   Color _getColorForType(ZetaStepType type) {
     return switch (type) {
-      ZetaStepType.complete => _colors.positive,
+      ZetaStepType.complete => _colors.surfacePositive,
       ZetaStepType.disabled => _colors.cool.shade50,
       ZetaStepType.enabled => _colors.primary,
     };