diff --git a/custom_docs/components/Color/flutter.md b/custom_docs/components/Color/flutter.md index b183f74b..8afda978 100644 --- 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 index 66d52334..6e13cca9 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: 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 index da441b7c..8789529c 100644 --- a/example/lib/pages/theme/color_example.dart +++ b/example/lib/pages/theme/color_example.dart @@ -108,17 +108,13 @@ class _ColorExampleState extends State { 'borderDisabled': colors.borderDisabled, 'borderSelected': colors.borderSelected, }; - final Map links = { - 'linkDefault': colors.link, - 'linkVisited': colors.linkVisited, - }; final Map 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 { }; final Map 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 { 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 index b5b55037..8ed0a812 100644 --- 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 index c6788f9f..d33b0765 100644 --- 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 index a9feb3b0..5083dfe9 100644 --- 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 index d0dfad1c..db4f327c 100644 --- 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 index 9ade978e..1654e7a0 100644 --- 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 index 05b08a90..4e4289f3 100644 --- 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 links = { - 'linkDefault': colors.link, - 'linkVisited': colors.linkVisited, - }; final Map 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 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 index 40c84b60..35df0e13 100644 --- 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 index ff77a5ad..f70163ed 100644 --- 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 index 70b73f1b..2abeb4b4 100644 --- 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 index 1c9a29f6..ebb38d6b 100644 --- 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 index 267d9394..bfe5bb9a 100644 --- 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 { 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 index 269cd311..52c16ef8 100644 --- 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 index 0732cad9..1ccef81d 100644 --- 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 index 5996357b..d5eac29a 100644 --- a/lib/src/components/chips/chip.dart +++ b/lib/src/components/chips/chip.dart @@ -111,7 +111,7 @@ class _ZetaChipState extends State { } 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 index 88c9410e..4ab5034e 100644 --- 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 index 32672c8e..1d9d883e 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -388,7 +388,7 @@ class _DropdownItemState extends State<_DropdownItem> { 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 index 274cdc64..e6546bd9 100644 --- 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 index 239dae56..c657dea1 100644 --- 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 index e5250583..7dce0e50 100644 --- 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 index 0669592b..dcd9f28f 100644 --- a/lib/src/components/stepper/stepper.dart +++ b/lib/src/components/stepper/stepper.dart @@ -253,7 +253,7 @@ class _ZetaStepperState extends State 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, }; diff --git a/lib/src/theme/color_extensions.dart b/lib/src/theme/color_extensions.dart index a5c3f56a..51f96968 100644 --- a/lib/src/theme/color_extensions.dart +++ b/lib/src/theme/color_extensions.dart @@ -70,9 +70,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.greyCool].shade90. + /// * 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.greyCool.shade90 : ZetaColorBase.white; + Color get onColor => isLight ? ZetaColorBase.cool.shade90 : ZetaColorBase.white; /// Returns true if the color's brightness is [Brightness.light], else false. bool get isLight => ThemeData.estimateBrightnessForColor(this) == Brightness.light; diff --git a/lib/src/theme/color_swatch.dart b/lib/src/theme/color_swatch.dart index 405a0440..470eb16d 100644 --- a/lib/src/theme/color_swatch.dart +++ b/lib/src/theme/color_swatch.dart @@ -26,7 +26,7 @@ class ZetaColorSwatch extends ColorSwatch { /// 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.greyWarm] shade10. + /// [background] color defaults to [ZetaColorBase.warm] shade10. /// {@endtemplate} factory ZetaColorSwatch.fromColor( Color primary, { diff --git a/lib/src/theme/colors.dart b/lib/src/theme/colors.dart index 507bc576..e51b927b 100644 --- a/lib/src/theme/colors.dart +++ b/lib/src/theme/colors.dart @@ -15,9 +15,6 @@ class ZetaColors { ZetaColors({ this.brightness = Brightness.light, this.contrast = ZetaContrast.aa, - this.link = ZetaColorBase.linkLight, - this.linkVisited = ZetaColorBase.linkVisitedLight, - this.shadow = ZetaColorBase.shadowLight, this.white = ZetaColorBase.white, this.black = ZetaColorBase.black, ZetaColorSwatch? primary, @@ -25,28 +22,25 @@ class ZetaColors { ZetaColorSwatch? error, ZetaColorSwatch? cool, ZetaColorSwatch? warm, + ZetaColorSwatch? 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.greyCool, adjust, brightness, ZetaContrast.aa), - warm = _adjustedValue(warm, ZetaColorBase.greyWarm, adjust, brightness, ZetaContrast.aa), - blue = _adjustedBase(ZetaColorBase.blue, adjust, brightness, contrast), - green = _adjustedBase(ZetaColorBase.green, adjust, brightness, contrast), - red = _adjustedBase(ZetaColorBase.red, adjust, brightness, contrast), - orange = _adjustedBase(ZetaColorBase.orange, adjust, brightness, contrast), - purple = _adjustedBase(ZetaColorBase.purple, adjust, brightness, contrast), - yellow = _adjustedBase(ZetaColorBase.yellow, adjust, brightness, contrast), - teal = _adjustedBase(ZetaColorBase.teal, adjust, brightness, contrast), - pink = _adjustedBase(ZetaColorBase.pink, 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), surfacePrimary = surfacePrimary ?? white, surfaceSecondary = surfaceSecondary ?? _adjustedValue( cool, - ZetaColorBase.greyCool, + ZetaColorBase.cool, adjust, brightness, ZetaContrast.aa, @@ -54,11 +48,19 @@ class ZetaColors { surfaceTertiary = surfaceTertiary ?? _adjustedValue( warm, - ZetaColorBase.greyWarm, + ZetaColorBase.warm, adjust, brightness, ZetaContrast.aa, - ).shade10; + ).shade10, + blue = _adjustedBase(ZetaColorBase.blue, adjust, brightness, contrast), + green = _adjustedBase(ZetaColorBase.green, adjust, brightness, contrast), + red = _adjustedBase(ZetaColorBase.red, adjust, brightness, contrast), + orange = _adjustedBase(ZetaColorBase.orange, adjust, brightness, contrast), + purple = _adjustedBase(ZetaColorBase.purple, adjust, brightness, contrast), + yellow = _adjustedBase(ZetaColorBase.yellow, adjust, brightness, contrast), + teal = _adjustedBase(ZetaColorBase.teal, adjust, brightness, contrast), + pink = _adjustedBase(ZetaColorBase.pink, adjust, brightness, contrast); /// Factory constructor for a light theme for [ZetaColors]. /// @@ -72,9 +74,6 @@ class ZetaColors { /// [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. - /// [link] A color option for links. Defaults to null. - /// [linkVisited] A color option for visited links. Defaults to null. - /// [shadow] A color option for shadows. Defaults to null. factory ZetaColors.light({ ZetaContrast contrast = ZetaContrast.aa, ZetaColorSwatch? primary, @@ -84,9 +83,9 @@ class ZetaColors { ZetaColorSwatch? warm, Color? white, Color? black, - Color? link, - Color? linkVisited, - Color? shadow, + @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, }) { return ZetaColors( white: white ?? ZetaColorBase.white, @@ -100,9 +99,6 @@ class ZetaColors { surfaceTertiary: warm?.shade10, surfaceSecondary: cool?.shade10, surfacePrimary: white ?? ZetaColorBase.white, - link: link ?? ZetaColorBase.linkLight, - shadow: shadow ?? ZetaColorBase.shadowLight, - linkVisited: linkVisited ?? ZetaColorBase.linkVisitedLight, ); } @@ -118,9 +114,6 @@ class ZetaColors { /// [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. - /// [link] A color option for links. Defaults to null. - /// [linkVisited] A color option for visited links. Defaults to null. - /// [shadow] A color option for shadows. Defaults to null. factory ZetaColors.dark({ ZetaContrast contrast = ZetaContrast.aa, ZetaColorSwatch? primary, @@ -130,9 +123,9 @@ class ZetaColors { ZetaColorSwatch? warm, Color? white, Color? black, - Color? link, - Color? linkVisited, - Color? shadow, + @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, }) { return ZetaColors( cool: cool, @@ -147,12 +140,47 @@ class ZetaColors { surfaceTertiary: warm?.shade10, surfaceSecondary: cool?.shade10, surfacePrimary: black ?? ZetaColorBase.black, - link: link ?? ZetaColorBase.linkDark, - shadow: shadow ?? ZetaColorBase.shadowLight, - linkVisited: linkVisited ?? ZetaColorBase.linkVisitedDark, ); } + /// 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. final Brightness brightness; @@ -181,26 +209,26 @@ class ZetaColors { /// Maps to [ColorScheme.error]. final ZetaColorSwatch error; - /// Cool grey color swatch. + /// Cool color swatch. /// - /// Defaults to [ZetaColorBase.greyCool]. + /// Defaults to [ZetaColorBase.cool]. /// /// {@macro zeta-color-dark} final ZetaColorSwatch cool; - /// Warm grey color swatch. + /// Warm color swatch. /// - /// Defaults to [ZetaColorBase.greyWarm]. + /// Defaults to [ZetaColorBase.warm]. /// /// {@macro zeta-color-dark} final ZetaColorSwatch warm; - /// Shadow color. + /// Pure color swatch. /// - /// Maps to [ColorScheme.shadow]. + /// Defaults to [ZetaColorBase.pure]. /// - /// Defaults to #49505E at 10% opacity. - final Color shadow; + /// {@macro zeta-color-dark} + final ZetaColorSwatch pure; /// White color. /// @@ -216,6 +244,26 @@ class ZetaColors { /// Defaults to [ZetaColorBase.black]. final Color black; + /// Surface color. + /// + /// Maps to [ColorScheme.surface]. + /// + /// * Light mode: `ZetaColors.black` + /// * Dark mode: `ZetaColors.white`. + final Color surfacePrimary; + + /// Secondary surface color. + /// + /// * `ZetaColors.cool.10`. + final Color surfaceSecondary; + + /// Tertiary surface color. + /// + /// Maps to [ColorScheme.surface] and [ThemeData.scaffoldBackgroundColor] + /// + /// * `ZetaColors.warm.10`. + final Color surfaceTertiary; + // Text / icons. /// {@template zeta-color-dark} @@ -286,197 +334,255 @@ class ZetaColors { /// {@macro zeta-color-dark} Color get iconInverse => textInverse; - // Border variants. - - /// Default border color. + /// Default Surface Color /// - /// Defaults to `ZetaColors.cool.50`. + /// {@macro zeta-color-dark} + Color get surfaceDefault => pure.shade(0); + + /// Default-inverse Surface Color /// /// {@macro zeta-color-dark} - Color get borderDefault => cool.shade50; + Color get surfaceDefaultInverse => warm.shade(100); - /// Subtle border color. + /// Hover Surface Color /// - /// `ZetaColors.cool.40`. + /// {@macro zeta-color-dark} + Color get surfaceHover => cool.shade(20); + + /// Selected Surface Color /// /// {@macro zeta-color-dark} - Color get borderSubtle => cool.shade40; + Color get surfaceSelected => blue.shade(10); - /// Disabled border color. + /// Selected-hover Surface Color /// - /// Defaults to `ZetaColors.cool.30`. + /// {@macro zeta-color-dark} + Color get surfaceSelectedHover => blue.shade(20); + + /// Disabled Surface Color /// /// {@macro zeta-color-dark} - Color get borderDisabled => cool.shade30; + Color get surfaceDisabled => cool.shade(30); - /// Selected border color. + /// Cool Surface Color /// - /// Defaults to `ZetaColors.cool.90`. + /// {@macro zeta-color-dark} + Color get surfaceCool => cool.shade(10); + + /// Warm Surface Color /// /// {@macro zeta-color-dark} - Color get borderSelected => cool.shade90; + Color get surfaceWarm => warm.shade(10); - /// True if current [ZetaColors] object uses dark mode colors. - bool get isDarkMode => brightness == Brightness.dark; + /// Primary-subtle Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfacePrimarySubtle => blue.shade(10); - // Links + /// Avatar Avatar Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceAvatarBlue => blue.shade(80); - /// Link color. + /// Avatar Avatar Surface Color /// - /// Defaults to [ZetaColorBase.linkLight] or [ZetaColorBase.linkDark]. - final Color link; + /// {@macro zeta-color-dark} + ZetaColorSwatch get surfaceAvatarGreen => green; - /// Link color. + /// Avatar Avatar Surface Color /// - /// Defaults to [ZetaColorBase.linkVisitedLight] or [ZetaColorBase.linkVisitedDark]. - final Color linkVisited; + /// {@macro zeta-color-dark} + Color get surfaceAvatarOrange => orange.shade(50); - // Backdrop colors. + /// Avatar Avatar Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceAvatarPink => pink.shade(80); - /// Surface color. + /// Avatar Avatar Surface Color /// - /// Maps to [ColorScheme.surface]. + /// {@macro zeta-color-dark} + Color get surfaceAvatarPurple => purple.shade(80); + + /// Avatar Avatar Surface Color /// - /// * Light mode: `ZetaColors.black` - /// * Dark mode: `ZetaColors.white`. - final Color surfacePrimary; + /// {@macro zeta-color-dark} + Color get surfaceAvatarTeal => teal.shade(80); - /// Secondary surface color. + /// Avatar Avatar Surface Color /// - /// * `ZetaColors.cool.10`. - final Color surfaceSecondary; + /// {@macro zeta-color-dark} + Color get surfaceAvatarYellow => yellow.shade(50); - /// Tertiary surface color. + /// Secondary-subtle Surface Color /// - /// Maps to [ThemeData.scaffoldBackgroundColor] + /// {@macro zeta-color-dark} + Color get surfaceSecondarySubtle => yellow.shade(10); + + /// Positive Surface Color /// - /// * `ZetaColors.warm.10`. - final Color surfaceTertiary; + /// {@macro zeta-color-dark} + ZetaColorSwatch get surfacePositive => green; - /// Disabled surface color. + /// Positive-subtle Surface Color /// - /// Defaults to `ZetaColors.cool.30`. + /// {@macro zeta-color-dark} + Color get surfacePositiveSubtle => green.shade(10); + + /// Warning Surface Color /// /// {@macro zeta-color-dark} - Color get surfaceDisabled => cool.shade30; + ZetaColorSwatch get surfaceWarning => orange; - /// Hover surface color. + /// Warning-subtle Surface Color /// - /// Defaults to `ZetaColors.cool.20`. + /// {@macro zeta-color-dark} + Color get surfaceWarningSubtle => orange.shade(10); + + /// Negative Surface Color /// /// {@macro zeta-color-dark} - Color get surfaceHovered => cool.shade20; + ZetaColorSwatch get surfaceNegative => red; - /// Selected hover surface color. + /// Negative-subtle Surface Color /// - /// Defaults to: `ZetaColors.blue.20`. - Color get surfaceSelectedHovered => primary.shade20; + /// {@macro zeta-color-dark} + Color get surfaceNegativeSubtle => red.shade(10); - /// Selected surface color. + /// Info Surface Color /// - /// Defaults to: `ZetaColors.blue.10`. - Color get surfaceSelected => primary.shade10; + /// {@macro zeta-color-dark} + ZetaColorSwatch get surfaceInfo => purple; - // Alert Colors + /// Info-subtle Surface Color + /// + /// {@macro zeta-color-dark} + Color get surfaceInfoSubtle => purple.shade(10); - /// Green positive color. + /// Default Border Color /// - /// Defaults to `ZetaColors.green.60` in AA system. - /// Defaults to `ZetaColors.green.80` in AAA system. + /// {@macro zeta-color-dark} + Color get borderDefault => cool.shade(40); + + /// Subtle Border Color /// /// {@macro zeta-color-dark} + Color get borderSubtle => cool.shade(30); + + /// Hover Border Color /// - /// {@macro zeta-color-aaa} - ZetaColorSwatch get positive => green; + /// {@macro zeta-color-dark} + Color get borderHover => cool.shade(90); - /// Red negative color. + /// Selected Border Color /// - /// Defaults to `ZetaColors.red.60` in AA system. - /// Defaults to `ZetaColors.red.80` in AAA system. + /// {@macro zeta-color-dark} + Color get borderSelected => cool.shade(90); + + /// Disabled Border Color /// - /// Maps to [ColorScheme.error]. + /// {@macro zeta-color-dark} + Color get borderDisabled => cool.shade(20); + + /// Pure Border Color /// /// {@macro zeta-color-dark} + Color get borderPure => pure.shade(0); + + /// Primary-main Border Color /// - /// {@macro zeta-color-aaa} - ZetaColorSwatch get negative => error; + /// {@macro zeta-color-dark} + ZetaColorSwatch get borderPrimaryMain => blue; - /// Orange warning color. + /// Primary Border Color /// - /// Defaults to `ZetaColors.orange.60` in AA system. - /// Defaults to `ZetaColors.orange.80` in AAA system. + /// {@macro zeta-color-dark} + Color get borderPrimary => blue.shade(50); + + /// Secondary Border Color /// /// {@macro zeta-color-dark} + Color get borderSecondary => yellow.shade(50); + + /// Positive Border Color /// - /// {@macro zeta-color-aaa} - ZetaColorSwatch get warning => orange; + /// {@macro zeta-color-dark} + Color get borderPositive => green.shade(50); - /// Purple info color. + /// Warning Border Color /// - /// Defaults to `ZetaColors.purple.60` in AA system. - /// Defaults to `ZetaColors.purple.80` in AAA system. + /// {@macro zeta-color-dark} + Color get borderWarning => orange.shade(50); + + /// Negative Border Color /// /// {@macro zeta-color-dark} + Color get borderNegative => red.shade(50); + + /// Info Border Color /// - /// {@macro zeta-color-aaa} - ZetaColorSwatch get info => purple; + /// {@macro zeta-color-dark} + Color get borderInfo => purple.shade(50); - /// Blue color swatch. + /// Blue color swatch /// - /// Defaults to [ZetaColorBase.blue]. + /// Defaults to [ZetaColorBase.blue] /// /// {@macro zeta-color-dark} final ZetaColorSwatch blue; - /// Green color swatch. + /// Green color swatch /// - /// Defaults to [ZetaColorBase.green]. + /// Defaults to [ZetaColorBase.green] /// /// {@macro zeta-color-dark} final ZetaColorSwatch green; - /// Red color swatch. + /// Red color swatch /// - /// Defaults to [ZetaColorBase.red]. + /// Defaults to [ZetaColorBase.red] /// /// {@macro zeta-color-dark} final ZetaColorSwatch red; - /// Orange color swatch. + /// Orange color swatch /// - /// Defaults to [ZetaColorBase.orange]. + /// Defaults to [ZetaColorBase.orange] /// /// {@macro zeta-color-dark} final ZetaColorSwatch orange; - /// Purple color swatch. + /// Purple color swatch /// - /// Defaults to [ZetaColorBase.purple]. + /// Defaults to [ZetaColorBase.purple] /// /// {@macro zeta-color-dark} final ZetaColorSwatch purple; - /// Yellow color swatch. + /// Yellow color swatch /// - /// Defaults to [ZetaColorBase.yellow]. + /// Defaults to [ZetaColorBase.yellow] /// /// {@macro zeta-color-dark} final ZetaColorSwatch yellow; - /// Teal color swatch. + /// Teal color swatch /// - /// Defaults to [ZetaColorBase.teal]. + /// Defaults to [ZetaColorBase.teal] /// /// {@macro zeta-color-dark} final ZetaColorSwatch teal; - /// Pink color swatch. + /// Pink color swatch /// - /// Defaults to [ZetaColorBase.pink]. + /// Defaults to [ZetaColorBase.pink] /// /// {@macro zeta-color-dark} final ZetaColorSwatch pink; + /// True if current [ZetaColors] object uses dark mode colors. + bool get isDarkMode => brightness == Brightness.dark; + /// Colorful colors. List get rainbow => [red, orange, yellow, green, blue, teal, pink]; @@ -515,12 +621,12 @@ class ZetaColors { ZetaColorSwatch? warm, Color? white, Color? black, - Color? shadow, - Color? link, - Color? linkVisited, Color? surfacePrimary, Color? surfaceSecondary, Color? surfaceTertiary, + @Deprecated('This color has been deprecated as of v0.10.0') Color? link, + @Deprecated('This color has been deprecated as of v0.10.0') Color? linkVisited, + @Deprecated('This color has been deprecated as of v0.10.0') Color? shadow, }) { return ZetaColors( white: white ?? this.white, @@ -532,9 +638,6 @@ class ZetaColors { error: error ?? this.error, cool: cool ?? this.cool, warm: warm ?? this.warm, - shadow: shadow ?? this.shadow, - link: link ?? this.link, - linkVisited: linkVisited ?? this.linkVisited, surfacePrimary: surfacePrimary ?? this.surfacePrimary, surfaceSecondary: surfaceSecondary ?? this.surfaceSecondary, surfaceTertiary: surfaceTertiary ?? this.surfaceTertiary, @@ -587,11 +690,8 @@ class ZetaColors { error == other.error && cool == other.cool && warm == other.warm && - shadow == other.shadow && white == other.white && black == other.black && - link == other.link && - linkVisited == other.linkVisited && surfacePrimary == other.surfacePrimary && surfaceSecondary == other.surfaceSecondary && surfaceTertiary == other.surfaceTertiary && @@ -613,11 +713,8 @@ class ZetaColors { error.hashCode ^ cool.hashCode ^ warm.hashCode ^ - shadow.hashCode ^ white.hashCode ^ black.hashCode ^ - link.hashCode ^ - linkVisited.hashCode ^ surfacePrimary.hashCode ^ surfaceSecondary.hashCode ^ surfaceTertiary.hashCode ^ @@ -636,7 +733,6 @@ enum _ZetaColorProperties { secondarySwatch, cool, warm, - shadow, textDefault, textSubtle, pink, @@ -648,14 +744,12 @@ enum _ZetaColorProperties { green, blue, surfaceSelected, - surfaceSelectedHovered, - surfaceHovered, + surfaceSelectedHover, + surfaceHover, surfaceDisabled, surfaceTertiary, surfaceSecondary, surfacePrimary, - linkVisited, - link, borderSelected, borderDisabled, borderSubtle, @@ -689,30 +783,23 @@ extension ZetaColorGetters on ColorScheme { ZetaColorSwatch get secondarySwatch => _resolve?.zetaColors.secondary ?? _resolveDefault(_ZetaColorProperties.secondarySwatch); - /// Cool grey color swatch. + /// Cool color swatch. /// - /// Defaults to [ZetaColorBase.greyCool]. + /// Defaults to [ZetaColorBase.cool]. /// /// {@macro zeta-color-dark} ZetaColorSwatch get cool => _resolve?.zetaColors.cool ?? _resolveDefault(_ZetaColorProperties.cool); - /// Warm grey color swatch. + /// Warm color swatch. /// - /// Defaults to [ZetaColorBase.greyWarm]. + /// Defaults to [ZetaColorBase.warm]. /// /// {@macro zeta-color-dark} ZetaColorSwatch get warm => _resolve?.zetaColors.warm ?? _resolveDefault(_ZetaColorProperties.warm); - /// Shadow color. - /// - /// Maps to [ColorScheme.shadow]. - /// - /// Defaults to #49505E at 10% opacity. - Color get shadow => _resolve?.zetaColors.shadow ?? _resolveDefault(_ZetaColorProperties.shadow); - - /// Cool grey color swatch. + /// Cool color swatch. /// - /// Defaults to [ZetaColorBase.greyCool]. + /// Defaults to [ZetaColorBase.cool]. /// /// {@macro zeta-color-dark} Color get textDefault => _resolve?.zetaColors.textDefault ?? _resolveDefault(_ZetaColorProperties.textDefault); @@ -774,18 +861,6 @@ extension ZetaColorGetters on ColorScheme { Color get borderSelected => _resolve?.zetaColors.borderSelected ?? _resolveDefault(_ZetaColorProperties.borderSelected); - // Links - - /// Link color. - /// - /// Defaults to [ZetaColorBase.linkLight] or [ZetaColorBase.linkDark]. - Color get link => _resolve?.zetaColors.link ?? _resolveDefault(_ZetaColorProperties.link); - - /// Link color. - /// - /// Defaults to [ZetaColorBase.linkVisitedLight] or [ZetaColorBase.linkVisitedDark]. - Color get linkVisited => _resolve?.zetaColors.linkVisited ?? _resolveDefault(_ZetaColorProperties.linkVisited); - // Backdrop colors. /// Surface color. @@ -825,14 +900,13 @@ extension ZetaColorGetters on ColorScheme { /// Defaults to `ZetaColors.cool.20`. /// /// {@macro zeta-color-dark} - Color get surfaceHovered => - _resolve?.zetaColors.surfaceHovered ?? _resolveDefault(_ZetaColorProperties.surfaceHovered); + Color get surfaceHover => _resolve?.zetaColors.surfaceHover ?? _resolveDefault(_ZetaColorProperties.surfaceHover); /// Selected hover surface color. /// /// Defaults to: `ZetaColors.blue.20`. - Color get surfaceSelectedHovered => - _resolve?.zetaColors.surfaceSelectedHovered ?? _resolveDefault(_ZetaColorProperties.surfaceSelectedHovered); + Color get surfaceSelectedHover => + _resolve?.zetaColors.surfaceSelectedHover ?? _resolveDefault(_ZetaColorProperties.surfaceSelectedHover); /// Selected surface color. /// @@ -946,17 +1020,16 @@ extension ZetaColorGetters on ColorScheme { case _ZetaColorProperties.secondarySwatch: return ZetaColorBase.blue.apply(brightness: brightness, contrast: contrast) as T; case _ZetaColorProperties.cool: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast) as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast) as T; case _ZetaColorProperties.warm: - return ZetaColorBase.greyWarm.apply(brightness: brightness, contrast: contrast) as T; case _ZetaColorProperties.textDefault: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade90 as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade90 as T; case _ZetaColorProperties.textSubtle: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade70 as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade70 as T; case _ZetaColorProperties.textInverse: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade20 as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade20 as T; case _ZetaColorProperties.textDisabled: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade50 as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade50 as T; case _ZetaColorProperties.pink: return ZetaColorBase.pink.apply(brightness: brightness, contrast: contrast) as T; case _ZetaColorProperties.teal: @@ -975,32 +1048,26 @@ extension ZetaColorGetters on ColorScheme { return ZetaColorBase.blue.apply(brightness: brightness, contrast: contrast) as T; case _ZetaColorProperties.surfaceSelected: return ZetaColorBase.blue.apply(brightness: brightness, contrast: contrast).shade10 as T; - case _ZetaColorProperties.surfaceSelectedHovered: + case _ZetaColorProperties.surfaceSelectedHover: return ZetaColorBase.blue.apply(brightness: brightness, contrast: contrast).shade20 as T; - case _ZetaColorProperties.surfaceHovered: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade20 as T; + case _ZetaColorProperties.surfaceHover: + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade20 as T; case _ZetaColorProperties.surfaceDisabled: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade30 as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade30 as T; case _ZetaColorProperties.surfaceTertiary: - return ZetaColorBase.greyWarm.apply(brightness: brightness, contrast: contrast).shade10 as T; + return ZetaColorBase.warm.apply(brightness: brightness, contrast: contrast).shade10 as T; case _ZetaColorProperties.surfaceSecondary: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade10 as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade10 as T; case _ZetaColorProperties.borderSelected: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade90 as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade90 as T; case _ZetaColorProperties.borderDisabled: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade30 as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade30 as T; case _ZetaColorProperties.borderSubtle: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade40 as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade40 as T; case _ZetaColorProperties.borderDefault: - return ZetaColorBase.greyCool.apply(brightness: brightness, contrast: contrast).shade50 as T; - case _ZetaColorProperties.shadow: - return (brightness == Brightness.light ? ZetaColorBase.shadowLight : ZetaColorBase.shadowDark) as T; + return ZetaColorBase.cool.apply(brightness: brightness, contrast: contrast).shade50 as T; case _ZetaColorProperties.surfacePrimary: return (brightness == Brightness.light ? ZetaColorBase.white : ZetaColorBase.black) as T; - case _ZetaColorProperties.linkVisited: - return (brightness == Brightness.light ? ZetaColorBase.linkVisitedLight : ZetaColorBase.linkVisitedDark) as T; - case _ZetaColorProperties.link: - return (brightness == Brightness.light ? ZetaColorBase.linkLight : ZetaColorBase.linkVisitedDark) as T; } } } diff --git a/lib/src/theme/colors_base.dart b/lib/src/theme/colors_base.dart index 7fb92178..56919cd5 100644 --- a/lib/src/theme/colors_base.dart +++ b/lib/src/theme/colors_base.dart @@ -13,203 +13,243 @@ import '../../zeta_flutter.dart'; /// * [yellow] /// * [teal] /// * [pink] -/// * [greyWarm] -/// * [greyCool]. +/// * [warm] +/// * [pure] +/// * [cool]. class ZetaColorBase { ZetaColorBase._(); - /// Blue swatch. + /// 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 + /// + /// {@macro zeta-colors-swatch} + static const ZetaColorSwatch pure = ZetaColorSwatch( + primary: 0xFF151519, + swatch: { + 0: Color(0xFFffffff), + 500: Color(0xFF151519), + 1000: Color(0xFF151519), + }, + ); + + /// Cool /// - /// {@template zeta-colors-swatch} - /// Contains shades from 10 (light) to 100 (dark). + /// {@macro zeta-colors-swatch} + static const ZetaColorSwatch cool = ZetaColorSwatch( + primary: 0xFF7a8190, + swatch: { + 10: Color(0xFFf8fbff), + 20: Color(0xFFf3f6fa), + 30: Color(0xFFe0e3e9), + 40: Color(0xFFced2db), + 50: Color(0xFF8d95a3), + 60: Color(0xFF7a8190), + 70: Color(0xFF545963), + 80: Color(0xFF2c2f36), + 90: Color(0xFF1d1e23), + 100: Color(0xFF0c0d0e), + }, + ); + + /// Warm /// - /// See also: - /// * [ZetaColorSwatch]. - /// {@endtemplate} + /// {@macro zeta-colors-swatch} + static const ZetaColorSwatch warm = ZetaColorSwatch( + primary: 0xFF858585, + swatch: { + 10: Color(0xFFfafafa), + 20: Color(0xFFf6f6f6), + 30: Color(0xFFececec), + 40: Color(0xFFdedede), + 50: Color(0xFFb9b9b9), + 60: Color(0xFF858585), + 70: Color(0xFF585858), + 80: Color(0xFF313131), + 90: Color(0xFF1d1e23), + 100: Color(0xFF151519), + }, + ); + + /// Blue + /// + /// {@macro zeta-colors-swatch} static const ZetaColorSwatch blue = ZetaColorSwatch( primary: 0xFF0073e6, swatch: { - 100: Color(0xFF101B25), - 90: Color(0xFF002C58), - 80: Color(0xFF004D99), - 70: Color(0xFF0061C2), - 60: Color(0xFF0073E6), - 50: Color(0xFF599FE5), - 40: Color(0xFF7EBEFF), - 30: Color(0xFFB7DBFF), - 20: Color(0xFFE2F1FF), - 10: Color(0xFFF1F8FF), + 10: Color(0xFFf1f8ff), + 20: Color(0xFFe2f1ff), + 30: Color(0xFFb7dbff), + 40: Color(0xFF7ebeff), + 50: Color(0xFF599fe5), + 60: Color(0xFF0073e6), + 70: Color(0xFF0061c2), + 80: Color(0xFF004d99), + 90: Color(0xFF002c58), + 100: Color(0xFF101b25), }, ); - /// Green swatch. + /// Green /// /// {@macro zeta-colors-swatch} static const ZetaColorSwatch green = ZetaColorSwatch( - primary: 0xFF00864F, + primary: 0xFF00864f, swatch: { + 10: Color(0xFFecfff7), + 20: Color(0xFFd8ffef), + 30: Color(0xFFbeefdb), + 40: Color(0xFF84dab6), + 50: Color(0xFF67b796), + 60: Color(0xFF00864f), + 70: Color(0xFF006d3f), + 80: Color(0xFF005f38), + 90: Color(0xFF00331e), 100: Color(0xFF081711), - 90: Color(0xFF00331E), - 80: Color(0xFF005F38), - 70: Color(0xFF006D3F), - 60: Color(0xFF00864F), - 50: Color(0xFF67B796), - 40: Color(0xFF84DAB6), - 30: Color(0xFFBEEFDB), - 20: Color(0xFFD8FFEF), - 10: Color(0xFFECFFF7), }, ); - /// Red swatch. + /// Red /// /// {@macro zeta-colors-swatch} static const ZetaColorSwatch red = ZetaColorSwatch( - primary: 0xFFD70015, + primary: 0xFFd70015, swatch: { - 100: Color(0xFF220F11), + 10: Color(0xFFfff0f1), + 20: Color(0xFFffe1e4), + 30: Color(0xFFffb3bb), + 40: Color(0xFFf98c97), + 50: Color(0xFFf36170), + 60: Color(0xFFd70015), + 70: Color(0xFFb50012), + 80: Color(0xFF8f000e), 90: Color(0xFF520008), - 80: Color(0xFF8F000E), - 70: Color(0xFFB50012), - 60: Color(0xFFD70015), - 50: Color(0xFFF36170), - 40: Color(0xFFF98C97), - 30: Color(0xFFFFB3BB), - 20: Color(0xFFFFE1E4), - 10: Color(0xFFFFF0F1), + 100: Color(0xFF220f11), }, ); - /// Orange swatch. + /// Orange /// /// {@macro zeta-colors-swatch} static const ZetaColorSwatch orange = ZetaColorSwatch( - primary: 0xFFC87500, + primary: 0xFFae6500, swatch: { - 100: Color(0xFF1E1100), - 90: Color(0xFF402600), - 80: Color(0xFF764502), + 10: Color(0xFFfef2e2), + 20: Color(0xFFffe7c6), + 30: Color(0xFFffd292), + 40: Color(0xFFffb348), + 50: Color(0xFFf5a230), + 60: Color(0xFFae6500), 70: Color(0xFF965802), - 60: Color(0xFFAE6500), - 50: Color(0xFFD78E26), - 40: Color(0xFFF5A230), - 30: Color(0xFFFFB348), - 20: Color(0xFFFFD292), - 10: Color(0xFFFFE7C6), + 80: Color(0xFF764502), + 90: Color(0xFF402600), + 100: Color(0xFF1e1100), }, ); - /// Purple swatch. + /// Purple /// /// {@macro zeta-colors-swatch} static const ZetaColorSwatch purple = ZetaColorSwatch( - primary: 0xFF6400D6, + primary: 0xFF7e0cff, swatch: { - 100: Color(0xFF180F22), + 10: Color(0xFFf7f0ff), + 20: Color(0xFFefe1ff), + 30: Color(0xFFdcc1fb), + 40: Color(0xFFcea4ff), + 50: Color(0xFF9b71df), + 60: Color(0xFF7e0cff), + 70: Color(0xFF6400d6), + 80: Color(0xFF43008f), 90: Color(0xFF260052), - 80: Color(0xFF43008F), - 70: Color(0xFF6400D6), - 60: Color(0xFF7E0CFF), - 50: Color(0xFF9B71DF), - 40: Color(0xFFCEA4FF), - 30: Color(0xFFDCC1FB), - 20: Color(0xFFEFE1FF), - 10: Color(0xFFF7F0FF), + 100: Color(0xFF180f22), }, ); - /// Yellow swatch. + /// Yellow /// /// {@macro zeta-colors-swatch} static const ZetaColorSwatch yellow = ZetaColorSwatch( - primary: 0xFFA38600, + primary: 0xFF8d7400, swatch: { - 100: Color(0xFF181400), - 90: Color(0xFF352B00), - 80: Color(0xFF564908), + 10: Color(0xFFfff7d4), + 20: Color(0xFFffea89), + 30: Color(0xFFf3d961), + 40: Color(0xFFdbb91c), + 50: Color(0xFFc2a728), + 60: Color(0xFF8d7400), 70: Color(0xFF766200), - 60: Color(0xFF8D7400), - 50: Color(0xFFC2A728), - 40: Color(0xFFDBB91C), - 30: Color(0xFFF3D961), - 20: Color(0xFFFFEA89), - 10: Color(0xFFFFF7D4), + 80: Color(0xFF564908), + 90: Color(0xFF352b00), + 100: Color(0xFF181400), }, ); - /// Teal swatch. + /// Teal /// /// {@macro zeta-colors-swatch} static const ZetaColorSwatch teal = ZetaColorSwatch( - primary: 0xFF018786, + primary: 0xFF1a8080, swatch: { - 100: Color(0xFF0A1616), - 90: Color(0xFF003535), - 80: Color(0xFF005B5B), + 10: Color(0xFFecffff), + 20: Color(0xFFd9ffff), + 30: Color(0xFFbcfbfb), + 40: Color(0xFF91e1e1), + 50: Color(0xFF65c4c4), + 60: Color(0xFF1a8080), 70: Color(0xFF017474), - 60: Color(0xFF1A8080), - 50: Color(0xFF65C5C5), - 40: Color(0xFF91E1E1), - 30: Color(0xFFBCFBFB), - 20: Color(0xFFD9FFFF), - 10: Color(0xFFECFFFF), + 80: Color(0xFF005b5b), + 90: Color(0xFF003535), + 100: Color(0xFF0a1616), }, ); - /// Pink swatch. + /// Pink /// /// {@macro zeta-colors-swatch} static const ZetaColorSwatch pink = ZetaColorSwatch( - primary: 0xFFAB006D, + primary: 0xFFd30589, swatch: { - 100: Color(0xFF2E001E), - 90: Color(0xFF640040), + 10: Color(0xFFfff7fc), + 20: Color(0xFFffe3f5), + 30: Color(0xFFffbee7), + 40: Color(0xFFff94d8), + 50: Color(0xFFee78c3), + 60: Color(0xFFd30589), + 70: Color(0xFFab006d), 80: Color(0xFF840054), - 70: Color(0xFFAB006D), - 60: Color(0xFFD30589), - 50: Color(0xFFEE78C3), - 40: Color(0xFFFF94D8), - 30: Color(0xFFFFBEE7), - 20: Color(0xFFFFE3F5), - 10: Color(0xFFFFF7FC), - }, - ); - - /// Grey warm swatch. - /// - /// {@macro zeta-colors-swatch} - static const ZetaColorSwatch greyWarm = ZetaColorSwatch( - primary: 0xFF858585, - swatch: { - 100: Color(0xFF151519), - 90: Color(0xFF202020), - 80: Color(0xFF313131), - 70: Color(0xFF585858), - 60: Color(0xFF858585), - 50: Color(0xFFB9B9B9), - 40: Color(0xFFDEDEDE), - 30: Color(0xFFEDEDED), - 20: Color(0xFFF7F7F7), - 10: Color(0xFFFAFAFA), - }, - ); - - /// Grey cool swatch. - /// - /// {@macro zeta-colors-swatch} - static const ZetaColorSwatch greyCool = ZetaColorSwatch( - primary: 0xFF7A8190, - swatch: { - 100: Color(0xFF0C0D0E), - 90: Color(0xFF1D1E23), - 80: Color(0xFF2C2F36), - 70: Color(0xFF545963), - 60: Color(0xFF7A8190), - 50: Color(0xFF8D95A3), - 40: Color(0xFFCED2DB), - 30: Color(0xFFE0E3E9), - 20: Color(0xFFF3F6FA), - 10: Color(0xFFF8FBFF), + 90: Color(0xFF640040), + 100: Color(0xFF2e001e), }, ); @@ -225,22 +265,4 @@ class ZetaColorBase { /// Default text color. static const Color text = Color(0xFF1D1E23); - - /// Link color for light mode. - static const Color linkLight = Color(0xFF0257AC); - - /// Visited link color for light mode. - static const Color linkVisitedLight = Color(0xFF205386); - - /// Link color for dark mode. - static const Color linkDark = Color(0xFF7ABDFF); - - /// Visited link color for dark mode. - static const Color linkVisitedDark = Color(0xFF47A3FF); - - /// Default shadow color. - static const Color shadowLight = Color(0x1A49505E); - - /// Default shadow color. - static const Color shadowDark = Color(0x1A49505E); } diff --git a/lib/src/utils/extensions.dart b/lib/src/utils/extensions.dart index 643ad0e7..486b3709 100644 --- a/lib/src/utils/extensions.dart +++ b/lib/src/utils/extensions.dart @@ -76,13 +76,13 @@ extension ColorSwatches on ZetaWidgetStatus { final colors = Zeta.of(context).colors; switch (this) { case ZetaWidgetStatus.info: - return colors.info; + return colors.surfaceInfo; case ZetaWidgetStatus.positive: - return colors.positive; + return colors.surfacePositive; case ZetaWidgetStatus.warning: - return colors.warning; + return colors.surfaceWarning; case ZetaWidgetStatus.negative: - return colors.negative; + return colors.surfaceNegative; case ZetaWidgetStatus.neutral: return colors.cool; }