diff --git a/.github/workflows/on-main.yml b/.github/workflows/on-main.yml index c0a51861..fe4eac6e 100644 --- a/.github/workflows/on-main.yml +++ b/.github/workflows/on-main.yml @@ -27,7 +27,7 @@ jobs: with: cache: true channel: stable - flutter-version: 3.24.x # TODO UX-1347 + flutter-version: 3.32.x - name: Setup flutter run: flutter pub get - name: Lint and format diff --git a/.github/workflows/on-release.yml b/.github/workflows/on-release.yml index 4e0999bd..56dfa449 100644 --- a/.github/workflows/on-release.yml +++ b/.github/workflows/on-release.yml @@ -18,7 +18,7 @@ jobs: with: cache: true channel: stable - flutter-version: 3.24.x # TODO UX-1347 + flutter-version: 3.32.x - name: Install dependencies run: flutter pub get - name: Format code @@ -38,7 +38,7 @@ jobs: with: cache: true channel: stable - flutter-version: 3.24.x # TODO UX-1347 + flutter-version: 3.32.x - name: Setup flutter run: flutter pub get - name: Build example app diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 3193a289..a9bf324d 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -20,7 +20,7 @@ jobs: with: cache: true channel: stable - flutter-version: 3.24.x # TODO UX-1347 + flutter-version: 3.32.x - uses: ZebraDevs/flutter-code-quality@main with: token: ${{secrets.GITHUB_TOKEN}} @@ -54,7 +54,7 @@ jobs: with: cache: true channel: stable - flutter-version: 3.24.x # TODO UX-1347 + flutter-version: 3.32.x - name: Setup flutter run: flutter pub get - name: Build example app diff --git a/.gitignore b/.gitignore index 83d63d64..9c60b192 100644 --- a/.gitignore +++ b/.gitignore @@ -78,3 +78,4 @@ pubspec.lock .master/ **/.fvm/ .fvmrc +**/ios/Flutter/ diff --git a/example/.gitignore b/example/.gitignore index 1eab1a22..13f41015 100644 --- a/example/.gitignore +++ b/example/.gitignore @@ -5,9 +5,11 @@ *.swp .DS_Store .atom/ +.build/ .buildlog/ .history .svn/ +.swiftpm/ migrate_working_dir/ # IntelliJ related diff --git a/example/devtools_options.yaml b/example/devtools_options.yaml new file mode 100644 index 00000000..fa0b357c --- /dev/null +++ b/example/devtools_options.yaml @@ -0,0 +1,3 @@ +description: This file stores settings for Dart & Flutter DevTools. +documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states +extensions: diff --git a/example/lib/home.dart b/example/lib/home.dart index 044c05cf..287a843d 100644 --- a/example/lib/home.dart +++ b/example/lib/home.dart @@ -41,9 +41,7 @@ class _HomePageState extends State { return ZdsExpansionTile( title: Text( rec.key, - style: Theme.of(context).textTheme.titleMedium?.copyWith( - color: zeta.colors.textDefault, - ), + style: Theme.of(context).textTheme.titleMedium, ), child: ZdsListGroup( items: items.map((route) { @@ -51,7 +49,7 @@ class _HomePageState extends State { title: Text(route.title), trailing: Icon( Icons.keyboard_arrow_right, - color: zeta.colors.iconSubtle, + color: zeta.colors.mainSubtle, ), onTap: () => Navigator.of(context).pushNamed(route.routeName)); }).toList(), diff --git a/example/lib/main.dart b/example/lib/main.dart index b4ad05f6..a5af5edc 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -22,19 +22,25 @@ void main() async { } class DemoApp extends StatelessWidget { - const DemoApp({Key? key, required this.data, required this.themeService}) : super(key: key); + const DemoApp({ + Key? key, + required this.data, + this.themeService, + }) : super(key: key); - final ZetaThemeService themeService; + final ZetaThemeService? themeService; final ZdsThemeData data; @override Widget build(BuildContext context) { return ZetaProvider( - themeService: themeService, + themeService: themeService ?? const ZetaDefaultThemeService(), initialThemeMode: data.themeMode, - initialThemeData: data.themeData, + fontFamily: data.fontFamily, + initialTheme: 'zds', initialContrast: data.contrast, - builder: (context, themeData, themeMode) { + customThemes: [data.toCustomTheme()], + builder: (context, themeData, darkTheme, themeMode) { return MaterialApp( title: 'Zds Demo', localeResolutionCallback: (Locale? locale, Iterable supportedLocales) { @@ -56,14 +62,8 @@ class DemoApp extends StatelessWidget { ], routes: kAllRoutes, themeMode: themeMode, - theme: themeData.colorsLight.toScheme().toTheme( - fontFamily: themeData.fontFamily, - appBarStyle: data.lightAppBarStyle, - ), - darkTheme: themeData.colorsDark.toScheme().toTheme( - fontFamily: themeData.fontFamily, - appBarStyle: data.darkAppBarStyle, - ), + theme: themeData, + darkTheme: darkTheme, ); }, ); diff --git a/example/lib/pages/components/app_bar.dart b/example/lib/pages/components/app_bar.dart index c77bde42..47474257 100644 --- a/example/lib/pages/components/app_bar.dart +++ b/example/lib/pages/components/app_bar.dart @@ -94,7 +94,7 @@ class _AppBarDemoState extends State with SingleTickerProviderStateM title: const Text('Basic color scheme'), icon: CircleAvatar( radius: 15, - backgroundColor: zetaColors.iconInverse, + backgroundColor: zetaColors.mainInverse, child: Text( 'DM', style: TextStyle( @@ -115,7 +115,7 @@ class _AppBarDemoState extends State with SingleTickerProviderStateM color: ZdsTabBarColor.surface, icon: CircleAvatar( radius: 15, - backgroundColor: zetaColors.secondary, + backgroundColor: zetaColors.mainSecondary, child: Text( 'DM', style: TextStyle( diff --git a/example/lib/pages/components/bottom_sheet.dart b/example/lib/pages/components/bottom_sheet.dart index fd5e104a..3b2031b1 100644 --- a/example/lib/pages/components/bottom_sheet.dart +++ b/example/lib/pages/components/bottom_sheet.dart @@ -245,14 +245,14 @@ class _BottomSheetDemoState extends State with SingleTickerProv ZdsListTile( leading: Text('Urgent'), trailing: ZdsIndex( - color: Zeta.of(context).colors.red, + color: Zeta.of(context).colors.mainNegative, child: Text('U'), ), ), ZdsListTile( leading: Text('Height'), trailing: ZdsIndex( - color: Zeta.of(context).colors.orange, + color: Zeta.of(context).colors.mainWarning, child: Text('1'), ), ), @@ -266,7 +266,7 @@ class _BottomSheetDemoState extends State with SingleTickerProv ZdsListTile( leading: Text('Low'), trailing: ZdsIndex( - color: Zeta.of(context).colors.green, + color: Zeta.of(context).colors.mainPositive, child: Text('3'), ), ), @@ -308,7 +308,7 @@ class _BottomSheetDemoState extends State with SingleTickerProv ExcludeSemantics( child: Text( 'Date range', - style: themeData.textTheme.titleSmall?.copyWith(color: zetaColors.textSubtle), + style: themeData.textTheme.titleSmall?.copyWith(color: zetaColors.mainSubtle), ).paddingOnly(left: 8), ), const SizedBox(height: 8), @@ -323,7 +323,7 @@ class _BottomSheetDemoState extends State with SingleTickerProv child: Text( 'Type', style: themeData.textTheme.titleSmall?.copyWith( - color: zetaColors.textSubtle, + color: zetaColors.mainSubtle, ), ).paddingOnly(left: 8), ), @@ -398,7 +398,7 @@ class _BottomSheetDemoState extends State with SingleTickerProv child: Text( 'Date range', style: Theme.of(context).textTheme.titleSmall?.copyWith( - color: Zeta.of(context).colors.textSubtle, + color: Zeta.of(context).colors.mainSubtle, ), ).paddingOnly(left: 10), ), @@ -414,7 +414,7 @@ class _BottomSheetDemoState extends State with SingleTickerProv child: Text( 'Type', style: Theme.of(context).textTheme.titleSmall?.copyWith( - color: Zeta.of(context).colors.textSubtle, + color: Zeta.of(context).colors.mainSubtle, ), ).paddingOnly(left: 10), ), diff --git a/example/lib/pages/components/button.dart b/example/lib/pages/components/button.dart index 2998a4a5..77134dd1 100644 --- a/example/lib/pages/components/button.dart +++ b/example/lib/pages/components/button.dart @@ -189,7 +189,7 @@ class _ButtonDemoState extends State { splashRadius: 20, visualDensity: VisualDensity.compact, onPressed: open, - color: Zeta.of(context).colors.iconSubtle, + color: Zeta.of(context).colors.mainSubtle, icon: const Icon(ZdsIcons.more_vert), ), items: const [ @@ -301,9 +301,9 @@ class _ButtonDemoState extends State { ), const SizedBox(height: 12), ZdsSlidableButton( - buttonColor: Zeta.of(context).colors.iconDefault, + buttonColor: Zeta.of(context).colors.mainDefault, buttonText: 'Clock Out', - buttonSliderColor: Zeta.of(context).colors.warm.surface, + buttonSliderColor: Zeta.of(context).colors.surfaceWarm, buttonIcon: ZdsIcons.clock_stop, ), const SizedBox(height: 36), @@ -332,10 +332,10 @@ class _ButtonDemoState extends State { Text('Active, basic without animation', style: Theme.of(context).textTheme.headlineMedium), const SizedBox(height: 12), ZdsSlidableButton( - buttonColor: Zeta.of(context).colors.iconDefault, + buttonColor: Zeta.of(context).colors.mainDefault, buttonText: 'Clock Out', buttonIcon: ZdsIcons.clock_stop, - buttonSliderColor: Zeta.of(context).colors.warm.surface, + buttonSliderColor: Zeta.of(context).colors.surfaceWarm, onSlideComplete: () async { debugPrint('Done!'); return true; @@ -348,13 +348,13 @@ class _ButtonDemoState extends State { ), const SizedBox(height: 12), ZdsSlidableButton( - buttonColor: Zeta.of(context).colors.iconDefault, + buttonColor: Zeta.of(context).colors.mainDefault, buttonColorEnd: Theme.of(context).colorScheme.secondary, buttonText: 'Clock Out', buttonTextEnd: DateTime.now().format('KK:mm a'), buttonIcon: ZdsIcons.clock_stop, buttonIconEnd: ZdsIcons.check_circle, - buttonSliderColor: Zeta.of(context).colors.warm.surface, + buttonSliderColor: Zeta.of(context).colors.surfaceWarm, buttonSliderColorEnd: Theme.of(context).primaryColorLight, onSlideComplete: () async { debugPrint('Done!'); @@ -366,19 +366,19 @@ class _ButtonDemoState extends State { Text('Disabled, no message', style: Theme.of(context).textTheme.headlineMedium), const SizedBox(height: 12), ZdsSlidableButton( - buttonColor: Zeta.of(context).colors.iconDefault, + buttonColor: Zeta.of(context).colors.mainDefault, buttonText: 'Clock Out', buttonIcon: ZdsIcons.clock_stop, - buttonSliderColor: Zeta.of(context).colors.warm.surface, + buttonSliderColor: Zeta.of(context).colors.surfaceWarm, ), const SizedBox(height: 36), Text('Disabled with message', style: Theme.of(context).textTheme.headlineMedium), const SizedBox(height: 12), ZdsSlidableButton( - buttonColor: Zeta.of(context).colors.iconDefault, + buttonColor: Zeta.of(context).colors.mainDefault, buttonText: 'Clock Out', buttonIcon: ZdsIcons.clock_stop, - buttonSliderColor: Zeta.of(context).colors.warm.surface, + buttonSliderColor: Zeta.of(context).colors.surfaceWarm, disabledMessage: 'Disabled message that is quite long and goes over two lines', ), ], diff --git a/example/lib/pages/components/calendar.dart b/example/lib/pages/components/calendar.dart index 394cabe9..63153605 100644 --- a/example/lib/pages/components/calendar.dart +++ b/example/lib/pages/components/calendar.dart @@ -103,7 +103,9 @@ class _CalendarDemoState extends State { singleMarkerBuilder: (BuildContext context, DateTime date, dynamic _) { return Container( decoration: BoxDecoration( - color: date.isAfter(DateTime.now()) ? Zeta.of(context).colors.red : Zeta.of(context).colors.green, + color: date.isAfter(DateTime.now()) + ? Zeta.of(context).colors.mainNegative + : Zeta.of(context).colors.mainPositive, shape: BoxShape.circle, ), width: 5, diff --git a/example/lib/pages/components/card.dart b/example/lib/pages/components/card.dart index 993dd7f4..fda0a4e8 100644 --- a/example/lib/pages/components/card.dart +++ b/example/lib/pages/components/card.dart @@ -80,7 +80,7 @@ class CardDemo extends StatelessWidget { onPressed: () {}, icon: Transform.rotate( angle: math.pi / 2, - child: Icon(ZdsIcons.more_vert, color: Zeta.of(context).colors.iconSubtle), + child: Icon(ZdsIcons.more_vert, color: Zeta.of(context).colors.mainSubtle), ), ), child: const Text('With Header'), diff --git a/example/lib/pages/components/card_actions.dart b/example/lib/pages/components/card_actions.dart index 2e1207da..32b15c7b 100644 --- a/example/lib/pages/components/card_actions.dart +++ b/example/lib/pages/components/card_actions.dart @@ -120,14 +120,14 @@ class CardActionsDemo extends StatelessWidget { Text( '04/19/2021 03:35 PM', style: themeData.textTheme.titleSmall?.copyWith( - color: Zeta.of(context).colors.textSubtle, + color: Zeta.of(context).colors.mainSubtle, ), ), const SizedBox(height: 16), Text( 'SR-ROC-Rockford IL.00102', style: themeData.textTheme.titleSmall?.copyWith( - color: Zeta.of(context).colors.textSubtle, + color: Zeta.of(context).colors.mainSubtle, ), ), ], diff --git a/example/lib/pages/components/expansion_tile.dart b/example/lib/pages/components/expansion_tile.dart index c8bf695c..ebbbf683 100644 --- a/example/lib/pages/components/expansion_tile.dart +++ b/example/lib/pages/components/expansion_tile.dart @@ -88,7 +88,7 @@ class _ExpansionTileDemoState extends State { ZdsExpansionTile( title: const Text('Collect feedback from customers who was'), initiallyExpanded: true, - titleColor: const Color(0xff007ABA).withOpacity(0.1), + titleColor: const Color(0xff007ABA).withValues(alpha: 0.1), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ diff --git a/example/lib/pages/components/icon_text_button.dart b/example/lib/pages/components/icon_text_button.dart index 127b01f8..b4ec3656 100644 --- a/example/lib/pages/components/icon_text_button.dart +++ b/example/lib/pages/components/icon_text_button.dart @@ -23,13 +23,13 @@ class IconTextButtonDemo extends StatelessWidget { onTap: () => {onButtonTapped(context)}, icon: ZdsIcons.clock_switch, label: 'Shift Trade', - backgroundColor: zeta.colors.orange, + backgroundColor: zeta.colors.mainWarning, ), ZdsIconTextButton( onTap: () => {onButtonTapped(context)}, icon: ZdsIcons.clock_available, label: 'Availability', - backgroundColor: zeta.colors.pink, + backgroundColor: zeta.colors.primitives.pink, ) ], ), diff --git a/example/lib/pages/components/index.dart b/example/lib/pages/components/index.dart index cae918f7..683e74ce 100644 --- a/example/lib/pages/components/index.dart +++ b/example/lib/pages/components/index.dart @@ -15,14 +15,14 @@ class IndexDemo extends StatelessWidget { ZdsListTile( leading: ZdsIndex( child: Text('2'), - color: Zeta.of(context).colors.blue, + color: Zeta.of(context).colors.mainPrimary, ), title: Text('Showcase Extravaganza'), ), ZdsListTile( leading: ZdsIndex( child: Text('2'), - color: Zeta.of(context).colors.purple, + color: Zeta.of(context).colors.mainInfo, ), title: Text('Showcase Extravaganza'), ), diff --git a/example/lib/pages/components/information_bar.dart b/example/lib/pages/components/information_bar.dart index b2640f6e..11014654 100644 --- a/example/lib/pages/components/information_bar.dart +++ b/example/lib/pages/components/information_bar.dart @@ -10,19 +10,19 @@ class InformationBarDemo extends StatelessWidget { return Scaffold( body: Column(children: [ ZdsInformationBar( - zetaColorSwatch: zeta.colors.green, + zetaColorSwatch: zeta.colors.primitives.green, icon: ZdsIcons.check, label: 'Approved', ), SizedBox(height: 10), ZdsInformationBar( - zetaColorSwatch: zeta.colors.blue, + zetaColorSwatch: zeta.colors.primitives.blue, icon: ZdsIcons.hourglass, label: 'Pending', ), SizedBox(height: 10), ZdsInformationBar( - zetaColorSwatch: zeta.colors.red, + zetaColorSwatch: zeta.colors.primitives.red, icon: ZdsIcons.close, label: 'Declined', ), @@ -30,7 +30,7 @@ class InformationBarDemo extends StatelessWidget { ZdsInformationBar( icon: Icons.category, label: 'Neutral text', - zetaColorSwatch: zeta.colors.warm, + zetaColorSwatch: zeta.colors.primitives.warm, ) ]), ); diff --git a/example/lib/pages/components/list_tile.dart b/example/lib/pages/components/list_tile.dart index 4ae0252c..b06d5d6d 100644 --- a/example/lib/pages/components/list_tile.dart +++ b/example/lib/pages/components/list_tile.dart @@ -17,22 +17,22 @@ class ListTileDemo extends StatelessWidget { title: const Text('Urgent'), subTitle: const Text('32 hours available'), selected: true, - trailing: ZdsIndex(color: zeta.colors.red, child: const Text('U')), + trailing: ZdsIndex(color: zeta.colors.mainNegative, child: const Text('U')), onTap: () {}, ), ZdsSelectableListTile( title: const Text('High'), - trailing: ZdsIndex(color: zeta.colors.orange, child: const Text('1')), + trailing: ZdsIndex(color: zeta.colors.mainWarning, child: const Text('1')), onTap: () {}, ), ZdsSelectableListTile( title: const Text('Medium'), - trailing: ZdsIndex(color: zeta.colors.teal, child: const Text('2')), + trailing: ZdsIndex(color: zeta.colors.primitives.teal, child: const Text('2')), onTap: () {}, ), ZdsSelectableListTile( title: const Text('Low'), - trailing: ZdsIndex(color: zeta.colors.green, child: const Text('3')), + trailing: ZdsIndex(color: zeta.colors.mainPositive, child: const Text('3')), onTap: () {}, ), ZdsSelectableListTile.checkable( @@ -235,7 +235,7 @@ class ListTileDemo extends StatelessWidget { leading: Container( width: 6, height: 65, - color: zeta.colors.red, + color: zeta.colors.mainNegative, ), ), ZdsNotificationTile( @@ -248,7 +248,7 @@ class ListTileDemo extends StatelessWidget { content: 'Meeting with Jordan Smith at Jan 11 at 11:00 am', leadingData: Icon( ZdsIcons.lightbulb, - color: zeta.colors.orange, + color: zeta.colors.mainWarning, size: 16, ), ), diff --git a/example/lib/pages/components/popover.dart b/example/lib/pages/components/popover.dart index 7d78db26..9c391c9b 100644 --- a/example/lib/pages/components/popover.dart +++ b/example/lib/pages/components/popover.dart @@ -48,11 +48,11 @@ class _PopOverDemoState extends State { ), ZdsPopOverIconButton( icon: const Icon(ZdsIcons.sort), - backgroundColor: Zeta.of(context).colors.red, + backgroundColor: Zeta.of(context).colors.mainNegative, popOverBuilder: (context) { return Container( child: const Text('Lorem ipsum dolor sit amet.').textStyle( - Theme.of(context).textTheme.bodyLarge?.copyWith(color: Zeta.of(context).colors.red.onColor), + Theme.of(context).textTheme.bodyLarge?.copyWith(color: Zeta.of(context).colors.mainNegative.onColor), ), ).paddingInsets(_contentPadding); }, diff --git a/example/lib/pages/components/quill_editor_demo.dart b/example/lib/pages/components/quill_editor_demo.dart index 6008e797..86c54e23 100644 --- a/example/lib/pages/components/quill_editor_demo.dart +++ b/example/lib/pages/components/quill_editor_demo.dart @@ -55,7 +55,6 @@ class _QuillEditorDemoState extends State { Expanded( child: Scaffold( resizeToAvoidBottomInset: false, - backgroundColor: Zeta.of(context).colors.surfacePrimary, appBar: AppBar( title: const Text('Quill Editor'), actions: [ @@ -121,7 +120,6 @@ class _QuillEditorDemoState extends State { Expanded( child: Scaffold( resizeToAvoidBottomInset: false, - backgroundColor: Zeta.of(context).colors.surfacePrimary, body: Builder(builder: (context) { final html = ZdsQuillDelta(document: controller.document).toHtml(); return SingleChildScrollView( diff --git a/example/lib/pages/components/search.dart b/example/lib/pages/components/search.dart index 2b828a71..a0bc1213 100644 --- a/example/lib/pages/components/search.dart +++ b/example/lib/pages/components/search.dart @@ -50,7 +50,7 @@ class _SearchDemoState extends State { Widget build(BuildContext context) { final clearButton = _showSuffixClearButton ? IconButton( - icon: Icon(ZdsIcons.close_circle, color: Zeta.of(context).colors.iconSubtle), + icon: Icon(ZdsIcons.close_circle, color: Zeta.of(context).colors.mainSubtle), onPressed: _clearButtonFieldController.clear, ) : null; diff --git a/example/lib/pages/components/sheet_header.dart b/example/lib/pages/components/sheet_header.dart index b30bfbef..769fff88 100644 --- a/example/lib/pages/components/sheet_header.dart +++ b/example/lib/pages/components/sheet_header.dart @@ -71,20 +71,20 @@ class SheetHeaderDemo extends StatelessWidget { children: [ ZdsListTile( leading: const Text('Urgent'), - trailing: ZdsIndex(color: Zeta.of(context).colors.red, child: const Text('U')), + trailing: ZdsIndex(color: Zeta.of(context).colors.mainNegative, child: const Text('U')), ), ZdsListTile( leading: const Text('High'), - trailing: ZdsIndex(color: Zeta.of(context).colors.orange, child: const Text('1')), + trailing: ZdsIndex(color: Zeta.of(context).colors.mainWarning, child: const Text('1')), ), ZdsListTile( leading: const Text('Medium'), - trailing: ZdsIndex(color: Zeta.of(context).colors.teal, child: const Text('2')), + trailing: ZdsIndex(color: Zeta.of(context).colors.primitives.teal, child: const Text('2')), ), ZdsListTile( leading: const Text('Low'), trailing: ZdsIndex( - color: Zeta.of(context).colors.green, + color: Zeta.of(context).colors.mainPositive, child: const Text('3'), ), ), diff --git a/example/lib/pages/components/slidable_list_tile.dart b/example/lib/pages/components/slidable_list_tile.dart index 5f5b0cbf..4f5e51ab 100644 --- a/example/lib/pages/components/slidable_list_tile.dart +++ b/example/lib/pages/components/slidable_list_tile.dart @@ -111,7 +111,7 @@ class SlidableListTileDemo extends StatelessWidget { height: 60, child: ZdsSlidableListTile( slideButtonWidth: 120, - backgroundColor: zetaColors.red, + backgroundColor: zetaColors.mainNegative, width: MediaQuery.of(context).size.width, actions: [ ZdsSlidableAction( @@ -121,13 +121,13 @@ class SlidableListTileDemo extends StatelessWidget { ), ZdsSlidableAction( label: 'Direct swap', - backgroundColor: zetaColors.purple, - foregroundColor: zetaColors.purple.onColor, + backgroundColor: zetaColors.mainInfo, + foregroundColor: zetaColors.mainInfo.onColor, ), ZdsSlidableAction( label: 'Swap with anyone', - backgroundColor: themeData.colorScheme.secondaryContainer, - foregroundColor: themeData.colorScheme.secondaryContainer.onColor, + backgroundColor: themeData.colorScheme.secondary, + foregroundColor: themeData.colorScheme.secondary.onColor, textOverflow: TextOverflow.visible) ], child: const Center(child: Text('A list tile with 3 slidable action buttons')), diff --git a/example/lib/pages/components/stats_card.dart b/example/lib/pages/components/stats_card.dart index a2c75ef6..906dae8c 100644 --- a/example/lib/pages/components/stats_card.dart +++ b/example/lib/pages/components/stats_card.dart @@ -22,7 +22,7 @@ class StatsCardDemo extends StatelessWidget { ZdsStat( value: 32.4, description: 'Remaining', - color: Zeta.of(context).colors.green, + color: Zeta.of(context).colors.mainPositive, ) ], title: 'Medical', @@ -35,7 +35,7 @@ class StatsCardDemo extends StatelessWidget { ZdsStat( value: 1.75, description: 'Remaining', - color: Zeta.of(context).colors.green, + color: Zeta.of(context).colors.mainPositive, ) ], title: 'Floating Holidays', @@ -48,7 +48,7 @@ class StatsCardDemo extends StatelessWidget { ZdsStat( value: 5, description: 'Remaining', - color: Zeta.of(context).colors.green, + color: Zeta.of(context).colors.mainPositive, ) ], title: 'Vacation', diff --git a/example/lib/pages/components/tag.dart b/example/lib/pages/components/tag.dart index 304fe5e5..fbd86cfe 100644 --- a/example/lib/pages/components/tag.dart +++ b/example/lib/pages/components/tag.dart @@ -135,7 +135,7 @@ class TagDemo extends StatelessWidget { child: ZdsListTile( trailing: ZdsTag( filled: true, - customColor: zetaColors.cool, + customColor: zetaColors.primitives.cool, child: const Text('Custom onClose'), onClose: () {}, ), @@ -188,7 +188,7 @@ class TagDemo extends StatelessWidget { trailing: ZdsTag( rectangular: true, color: ZdsTagColor.success, - prefix: Icon(Icons.check, size: 18, color: zetaColors.green), + prefix: Icon(Icons.check, size: 18, color: zetaColors.mainPositive), child: const Text( 'Approved', ), @@ -212,7 +212,7 @@ class TagDemo extends StatelessWidget { trailing: ZdsTag( rectangular: true, color: ZdsTagColor.error, - prefix: Icon(Icons.close, size: 18, color: zetaColors.red), + prefix: Icon(Icons.close, size: 18, color: zetaColors.mainNegative), child: const Text('Declined'), ), ), diff --git a/example/lib/pages/components/toolbar.dart b/example/lib/pages/components/toolbar.dart index b0e4c1b2..35a103ac 100644 --- a/example/lib/pages/components/toolbar.dart +++ b/example/lib/pages/components/toolbar.dart @@ -32,7 +32,7 @@ class _ToolBarDemoState extends State { ), ), ZdsToolbar( - backgroundColor: zetaColors.iconDefault, + backgroundColor: zetaColors.mainDefault, title: ZdsDateRange( emptyLabel: 'Select range', isSelectable: false, @@ -47,7 +47,7 @@ class _ToolBarDemoState extends State { ), ), ZdsToolbar( - backgroundColor: zetaColors.primary, + backgroundColor: zetaColors.mainPrimary, title: ZdsDateRange( emptyLabel: 'Select range', initialDateRange: r, @@ -87,11 +87,11 @@ class _ToolBarDemoState extends State { ), ), ZdsToolbar( - backgroundColor: zetaColors.yellow.surface, + backgroundColor: zetaColors.surfaceSecondary, title: ZdsDateRange( textStyle: Theme.of(context).textTheme.titleSmall?.copyWith( fontWeight: FontWeight.w500, - color: zetaColors.yellow.selected, + color: zetaColors.stateSecondarySelected, ), initialDateRange: DateTimeRange( start: DateTime(2022, 05, 12), @@ -110,7 +110,7 @@ class _ToolBarDemoState extends State { ), ], child: Container( - color: Theme.of(context).colorScheme.surfacePrimary, + color: Theme.of(context).colorScheme.surface, height: 400, ), ), diff --git a/example/lib/pages/theme/colors.dart b/example/lib/pages/theme/colors.dart index 241f1dba..0738f759 100644 --- a/example/lib/pages/theme/colors.dart +++ b/example/lib/pages/theme/colors.dart @@ -36,11 +36,11 @@ class ColorsDemo extends StatelessWidget { 'name': 'Tertiary', 'subtitle': 'Theme.of(context).colorScheme.primaryContainer', }, - { - 'color': Theme.of(context).colorScheme.secondaryContainer, - 'name': 'Quaternary', - 'subtitle': 'Theme.of(context).colorScheme.secondaryContainer', - }, + // { + // 'color': Theme.of(context).colorScheme.mainSecondaryContainer, + // 'name': 'Quaternary', + // 'subtitle': 'Theme.of(context).colorScheme.mainSecondaryContainer', + // }, ]; final theme = [ @@ -74,11 +74,11 @@ class ColorsDemo extends StatelessWidget { 'name': 'onSecondary', 'subtitle': 'Theme.of(context).colorScheme.onSecondary', }, - { - 'color': Theme.of(context).colorScheme.secondaryContainer, - 'name': 'secondaryContainer', - 'subtitle': 'Theme.of(context).colorScheme.secondaryContainer', - }, + // { + // 'color': Theme.of(context).colorScheme.mainSecondaryContainer, + // 'name': 'secondaryContainer', + // 'subtitle': 'Theme.of(context).colorScheme.mainSecondaryContainer', + // }, { 'color': Theme.of(context).colorScheme.onSecondaryContainer, 'name': 'onSecondaryContainer', @@ -105,18 +105,6 @@ class ColorsDemo extends StatelessWidget { 'subtitle': 'Theme.of(context).colorScheme.onError', }, ]; - final List> greys = [ - { - 'color': Zeta.of(context).colors.black, - 'name': 'Black', - 'subtitle': 'Zeta.of(context).colors.black', - }, - { - 'color': Zeta.of(context).colors.white, - 'name': 'White', - 'subtitle': 'Zeta.of(context).colors.white', - }, - ]; final alertColors = [ { 'color': Zeta.of(context).colors.surfacePositive, @@ -129,9 +117,9 @@ class ColorsDemo extends StatelessWidget { 'subtitle': 'Zeta.of(context).colors.surfaceNegative', }, { - 'color': Zeta.of(context).colors.surfaceNegative, + 'color': Zeta.of(context).colors.surfaceWarning, 'name': 'Warning', - 'subtitle': 'Zeta.of(context).colors.surfaceNegative', + 'subtitle': 'Zeta.of(context).colors.surfaceWarning', }, { 'color': Zeta.of(context).colors.surfaceInfo, @@ -151,7 +139,7 @@ class ColorsDemo extends StatelessWidget { children: [ _ColorRow(colors: theme, title: 'Theme colors'), _ColorRow(colors: primaryColors, title: 'Primary colors'), - _ColorRow(colors: greys, title: 'Greys'), + // _ColorRow(colors: greys, title: 'Greys'), _ColorRow(colors: alertColors, title: 'Alert colors'), const _PrimarySwatches(), const _OtherSwatches(), @@ -229,31 +217,31 @@ class _OtherSwatches extends StatelessWidget { final swatches = [ { 'key': 'Red', - 'value': Zeta.of(context).colors.red, + 'value': Zeta.of(context).colors.primitives.red, }, { 'key': 'Orange', - 'value': Zeta.of(context).colors.orange, + 'value': Zeta.of(context).colors.primitives.orange, }, { 'key': 'Yellow', - 'value': Zeta.of(context).colors.yellow, + 'value': Zeta.of(context).colors.primitives.yellow, }, { 'key': 'Green', - 'value': Zeta.of(context).colors.green, + 'value': Zeta.of(context).colors.primitives.green, }, { 'key': 'Blue', - 'value': Zeta.of(context).colors.blue, + 'value': Zeta.of(context).colors.primitives.blue, }, { 'key': 'Teal', - 'value': Zeta.of(context).colors.teal, + 'value': Zeta.of(context).colors.primitives.teal, }, { 'key': 'Pink', - 'value': Zeta.of(context).colors.pink, + 'value': Zeta.of(context).colors.primitives.pink, }, ]; return Column( @@ -329,30 +317,30 @@ class _PrimarySwatches extends StatelessWidget { children: [ const _Spacer(), _Swatch( - swatch: Zeta.of(context).colors.primary, + swatch: Zeta.of(context).colors.primitives.primary, values: List.generate(10, (i) => {'val': (i + 1) * 10, 'display': '${(i + 1) * 10}%'}), headColor: Theme.of(context).colorScheme.primary, headText: 'Primary', ), const _Spacer(), _Swatch( - swatch: Zeta.of(context).colors.secondary, + swatch: Zeta.of(context).colors.primitives.secondary, values: List.generate(10, (i) => {'val': (i + 1) * 10, 'display': '${(i + 1) * 10}%'}), headColor: Theme.of(context).colorScheme.secondary, headText: 'Secondary', ), const _Spacer(), _Swatch( - swatch: Zeta.of(context).colors.warm, + swatch: Zeta.of(context).colors.primitives.warm, values: List.generate(10, (i) => {'val': (i + 1) * 10, 'display': '${(i + 1) * 10}%'}), - headColor: Zeta.of(context).colors.warm, + headColor: Zeta.of(context).colors.primitives.warm, headText: 'Warm grey', ), const _Spacer(), _Swatch( - swatch: Zeta.of(context).colors.cool, + swatch: Zeta.of(context).colors.primitives.cool, values: List.generate(10, (i) => {'val': (i + 1) * 10, 'display': '${(i + 1) * 10}%'}), - headColor: Zeta.of(context).colors.cool, + headColor: Zeta.of(context).colors.primitives.cool, headText: 'Cool grey', ), const _Spacer(), diff --git a/example/lib/pages/theme/text.dart b/example/lib/pages/theme/text.dart index cab46642..bfac5052 100644 --- a/example/lib/pages/theme/text.dart +++ b/example/lib/pages/theme/text.dart @@ -115,7 +115,7 @@ class _FontGroup extends StatelessWidget { Text(e['header'].toString(), style: style), Text( 'Font: ${style.fontFamily}\nSize: ${style.fontSize?.toInt()}\nLine height: ${((style.height ?? 1) * style.fontSize!).toInt()}', - style: TextStyle(color: Zeta.of(context).colors.textSubtle), + style: TextStyle(color: Zeta.of(context).colors.mainSubtle), ), const _Spacer(), ], diff --git a/example/lib/pages/utils/theme_color_switch.dart b/example/lib/pages/utils/theme_color_switch.dart index 2490ac3a..6236d067 100644 --- a/example/lib/pages/utils/theme_color_switch.dart +++ b/example/lib/pages/utils/theme_color_switch.dart @@ -1,67 +1,57 @@ import 'package:flutter/material.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; -class ZetaThemeColorSwitch extends StatelessWidget { +class ZetaThemeColorSwitch extends StatefulWidget { ZetaThemeColorSwitch({super.key}); - late final _themes = { - "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, - ), - }; + @override + State createState() => _ZetaThemeColorSwitchState(); +} +class _ZetaThemeColorSwitchState extends State { @override Widget build(BuildContext context) { - var zeta = Zeta.of(context); + final zeta = Zeta.of(context); + final zetaProvider = ZetaProvider.of(context); + + final Map items = {}; + items.putIfAbsent(null, () => Icon(ZetaIcons.block)); - ZetaColors primary(ZetaThemeData data) { - if (zeta.brightness == Brightness.light) { - return data.colorsLight; - } else { - return data.colorsDark; - } - } + zetaProvider.customThemes.forEach((e) { + final color = e.primary; + final name = e.id; + items.putIfAbsent( + name, + () => ZetaAvatar( + size: ZetaAvatarSize.xxs, + backgroundColor: zeta.colors.surfaceDefault, + image: Icon( + Icons.color_lens, + color: color ?? + (Zeta.of(context).brightness == Brightness.light + ? ZetaPrimitivesLight().blue + : ZetaPrimitivesDark().blue), + ), + ), + ); + }); return DropdownButtonHideUnderline( - child: DropdownButton( - value: zeta.themeData.identifier, + child: DropdownButton( + value: zeta.customThemeId, elevation: 0, - isDense: true, - alignment: Alignment.center, - icon: SizedBox(width: 8), + padding: EdgeInsets.all(8), + icon: Nothing(), dropdownColor: zeta.colors.borderDisabled, - items: _themes.entries.map((e) { - var zetaColors = primary(_themes[e.key]!).apply(contrast: zeta.contrast); - var color = zetaColors.primary; - return DropdownMenuItem( - value: e.value.identifier, - alignment: Alignment.center, - child: CircleAvatar( - backgroundColor: color.surface, - foregroundColor: color, - child: Icon(Icons.color_lens, color: color), - ), - ); - }).toList(), + items: items.entries + .map((e) => DropdownMenuItem( + value: e.key, + alignment: Alignment.center, + child: e.value, + )) + .toList(), onChanged: (value) { - final theme = _themes[value]; - if (theme != null) { - ZetaProvider.of(context).updateThemeData(theme); - } + ZetaProvider.of(context).updateCustomTheme(themeId: value); }, ), ); diff --git a/example/lib/pages/utils/theme_constrast_switch.dart b/example/lib/pages/utils/theme_constrast_switch.dart index 3078bb55..658e6b82 100644 --- a/example/lib/pages/utils/theme_constrast_switch.dart +++ b/example/lib/pages/utils/theme_constrast_switch.dart @@ -11,38 +11,31 @@ class ZetaThemeContrastSwitch extends StatelessWidget { @override Widget build(BuildContext context) { - var 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; - } - } + final zeta = Zeta.of(context); return DropdownButtonHideUnderline( child: DropdownButton( value: zeta.contrast, + padding: EdgeInsets.all(8), elevation: 0, - isDense: true, - alignment: Alignment.center, - icon: SizedBox(width: 8), + icon: Nothing(), dropdownColor: zeta.colors.borderDisabled, items: _themes.map((e) { - final colors = zetaColors(e); + final ZetaColors colors = (e == ZetaContrast.aa + ? ZetaColorsAA(primitives: Zeta.of(context).colors.primitives) + : ZetaColorsAAA(primitives: Zeta.of(context).colors.primitives)) as ZetaColors; return DropdownMenuItem( value: e, alignment: Alignment.center, - child: CircleAvatar( - backgroundColor: colors.primary.surface, - foregroundColor: colors.primary, - child: Text( - e == ZetaContrast.aa ? 'AA' : 'AAA', - style: ZetaTextStyles.bodyMedium.copyWith( - color: colors.primary, - fontWeight: FontWeight.w700, - ), + child: ZetaAvatar( + size: ZetaAvatarSize.xxs, + backgroundColor: colors.surfaceDefault, + initials: e.name.toUpperCase(), + initialTextStyle: TextStyle( + fontSize: 14, + letterSpacing: Zeta.of(context).spacing.none, + color: colors.mainPrimary, + fontWeight: FontWeight.w500, ), ), ); diff --git a/example/lib/pages/utils/theme_mode_switch.dart b/example/lib/pages/utils/theme_mode_switch.dart index 3531827c..595d3133 100644 --- a/example/lib/pages/utils/theme_mode_switch.dart +++ b/example/lib/pages/utils/theme_mode_switch.dart @@ -12,40 +12,31 @@ class ZetaThemeModeSwitch extends StatelessWidget { @override Widget build(BuildContext context) { - var 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; - } - } + final zeta = Zeta.of(context); + final colors = zeta.colors; return DropdownButtonHideUnderline( child: DropdownButton( + padding: EdgeInsets.all(8), value: zeta.themeMode, elevation: 0, - isDense: true, - alignment: Alignment.center, - icon: SizedBox(width: 8), + icon: Nothing(), dropdownColor: zeta.colors.borderDisabled, items: _themes.map((e) { - final colors = zetaColors(e).apply(contrast: zeta.contrast); return DropdownMenuItem( value: e, alignment: Alignment.center, - child: CircleAvatar( - backgroundColor: colors.primary.surface, - foregroundColor: colors.primary, - child: Icon( - e == ThemeMode.system - ? Icons.system_security_update_good - : e == ThemeMode.light - ? Icons.light_mode - : Icons.dark_mode, - color: colors.primary), + child: ZetaAvatar( + size: ZetaAvatarSize.xxs, + backgroundColor: colors.surfaceDefault, + image: Icon( + e == ThemeMode.system + ? Icons.system_security_update_good + : e == ThemeMode.light + ? Icons.light_mode + : Icons.dark_mode, + color: colors.mainPrimary, + ), ), ); }).toList(), diff --git a/example/macos/Flutter/GeneratedPluginRegistrant.swift b/example/macos/Flutter/GeneratedPluginRegistrant.swift index cc8208c6..bba4b0a3 100644 --- a/example/macos/Flutter/GeneratedPluginRegistrant.swift +++ b/example/macos/Flutter/GeneratedPluginRegistrant.swift @@ -18,7 +18,7 @@ import open_file_mac import package_info_plus import path_provider_foundation import quill_native_bridge_macos -import record_darwin +import record_macos import share_plus import shared_preferences_foundation import sqflite_darwin @@ -42,7 +42,7 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) { FPPPackageInfoPlusPlugin.register(with: registry.registrar(forPlugin: "FPPPackageInfoPlusPlugin")) PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin")) QuillNativeBridgePlugin.register(with: registry.registrar(forPlugin: "QuillNativeBridgePlugin")) - RecordPlugin.register(with: registry.registrar(forPlugin: "RecordPlugin")) + RecordMacOsPlugin.register(with: registry.registrar(forPlugin: "RecordMacOsPlugin")) SharePlusMacosPlugin.register(with: registry.registrar(forPlugin: "SharePlusMacosPlugin")) SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin")) SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin")) diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock index 291111a6..b0064b42 100644 --- a/example/macos/Podfile.lock +++ b/example/macos/Podfile.lock @@ -31,7 +31,7 @@ PODS: - FlutterMacOS - quill_native_bridge_macos (0.0.1): - FlutterMacOS - - record_darwin (1.0.0): + - record_macos (1.0.0): - FlutterMacOS - share_plus (0.0.1): - FlutterMacOS @@ -68,7 +68,7 @@ DEPENDENCIES: - package_info_plus (from `Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos`) - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin`) - quill_native_bridge_macos (from `Flutter/ephemeral/.symlinks/plugins/quill_native_bridge_macos/macos`) - - record_darwin (from `Flutter/ephemeral/.symlinks/plugins/record_darwin/macos`) + - record_macos (from `Flutter/ephemeral/.symlinks/plugins/record_macos/macos`) - share_plus (from `Flutter/ephemeral/.symlinks/plugins/share_plus/macos`) - shared_preferences_foundation (from `Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/darwin`) - sqflite_darwin (from `Flutter/ephemeral/.symlinks/plugins/sqflite_darwin/darwin`) @@ -111,8 +111,8 @@ EXTERNAL SOURCES: :path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin quill_native_bridge_macos: :path: Flutter/ephemeral/.symlinks/plugins/quill_native_bridge_macos/macos - record_darwin: - :path: Flutter/ephemeral/.symlinks/plugins/record_darwin/macos + record_macos: + :path: Flutter/ephemeral/.symlinks/plugins/record_macos/macos share_plus: :path: Flutter/ephemeral/.symlinks/plugins/share_plus/macos shared_preferences_foundation: @@ -146,7 +146,7 @@ SPEC CHECKSUMS: package_info_plus: 12f1c5c2cfe8727ca46cbd0b26677728972d9a5b path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46 quill_native_bridge_macos: 3a5f378bc757eb92825193853020b759b56cbb2c - record_darwin: a0d515a0ef78c440c123ea3ac76184c9927a94d6 + record_macos: 3ead198d39fad25d10163780132a96b6fd162a1c share_plus: 1fa619de8392a4398bfaf176d441853922614e89 shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78 sqflite_darwin: 5a7236e3b501866c1c9befc6771dfd73ffb8702d diff --git a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme index 15368ecc..ac78810c 100644 --- a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme +++ b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme @@ -59,6 +59,7 @@ ignoresPersistentStateOnLaunch = "NO" debugDocumentVersioning = "YES" debugServiceExtension = "internal" + enableGPUValidationMode = "1" allowLocationSimulation = "YES"> diff --git a/example/macos/Runner/AppDelegate.swift b/example/macos/Runner/AppDelegate.swift index 8e02df28..b3c17614 100644 --- a/example/macos/Runner/AppDelegate.swift +++ b/example/macos/Runner/AppDelegate.swift @@ -6,4 +6,8 @@ class AppDelegate: FlutterAppDelegate { override func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool { return true } + + override func applicationSupportsSecureRestorableState(_ app: NSApplication) -> Bool { + return true + } } diff --git a/example/macos/Runner/DebugProfile.entitlements b/example/macos/Runner/DebugProfile.entitlements index 053b4e74..d414d3b5 100644 --- a/example/macos/Runner/DebugProfile.entitlements +++ b/example/macos/Runner/DebugProfile.entitlements @@ -10,6 +10,7 @@ com.apple.security.files.user-selected.read-only - + com.apple.security.network.client + diff --git a/example/macos/Runner/Release.entitlements b/example/macos/Runner/Release.entitlements index 852fa1a4..48271acc 100644 --- a/example/macos/Runner/Release.entitlements +++ b/example/macos/Runner/Release.entitlements @@ -4,5 +4,7 @@ com.apple.security.app-sandbox + com.apple.security.network.client + diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 42b4c839..c0c92394 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -5,30 +5,22 @@ version: 1.0.0+1 environment: sdk: ">=3.0.0 <4.0.0" - flutter: ">=3.7.0" + flutter: ">=3.16.0" dependencies: flutter: sdk: flutter - flutter_localizations: - sdk: flutter - intl: ^0.19.0 - lottie: ^3.1.2 - path_provider: ^2.1.2 + lottie: ^3.3.1 scrollable_positioned_list: ^0.3.8 - shared_preferences: ^2.2.2 - table_calendar: ^3.0.9 zds_flutter: path: ../ - url_launcher: any - cross_file: any - zeta_flutter: any - flutter_quill: any - flutter_quill_extensions: any - image_picker: any +dependency_overrides: + intl: ^0.20.2 + zeta_flutter_theme: + path: ../../../zeta/zeta_flutter/packages/zeta_flutter_theme + flutter: uses-material-design: true assets: - - assets/colors.json - - assets/notification.wav + - assets/ diff --git a/lib/src/components/atoms/button.dart b/lib/src/components/atoms/button.dart index 6bff3888..23188814 100644 --- a/lib/src/components/atoms/button.dart +++ b/lib/src/components/atoms/button.dart @@ -248,14 +248,15 @@ class ZdsButton extends StatelessWidget { final EdgeInsetsGeometry tp = textPadding ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 6); // Determine the default background color. - final Color defaultBackground = customColor ?? (isDangerButton ? zetaColors.surfaceNegative : zetaColors.secondary); + final Color defaultBackground = + customColor ?? (isDangerButton ? zetaColors.surfaceNegative : zetaColors.mainSecondary); // Common textStyle for all variants. final textStyle = WidgetStateProperty.all(textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w500)); // Helper function to calculate the overlay color. Color calculateOverlay({double opacity = 0.1, Color? background}) { - return customColor?.withOpacity(opacity) ?? (background ?? defaultBackground).withOpacity(opacity); + return customColor?.withValues(alpha: opacity) ?? (background ?? defaultBackground).withValues(alpha: opacity); } switch (variant) { @@ -265,7 +266,7 @@ class ZdsButton extends StatelessWidget { textStyle: textStyle, foregroundColor: widgetStatePropertyResolver( defaultValue: defaultBackground.onColor, - disabledValue: zetaColors.textDisabled, + disabledValue: zetaColors.mainDisabled, ), backgroundColor: widgetStatePropertyResolver( defaultValue: defaultBackground, @@ -277,7 +278,7 @@ class ZdsButton extends StatelessWidget { defaultValue: Colors.transparent, ), side: widgetStatePropertyResolver( - focusedValue: BorderSide(color: zetaColors.secondary.subtle, width: 3), + focusedValue: BorderSide(color: zetaColors.surfaceSecondarySubtle, width: 3), disabledValue: BorderSide(color: zetaColors.borderDisabled), ), ); @@ -287,7 +288,7 @@ class ZdsButton extends StatelessWidget { textStyle: textStyle, foregroundColor: widgetStatePropertyResolver( defaultValue: defaultBackground, - disabledValue: zetaColors.textDisabled, + disabledValue: zetaColors.mainDisabled, ), backgroundColor: widgetStatePropertyResolver( defaultValue: Colors.transparent, @@ -299,7 +300,7 @@ class ZdsButton extends StatelessWidget { pressedValue: calculateOverlay(opacity: 0.2), ), side: widgetStatePropertyResolver( - focusedValue: BorderSide(color: zetaColors.secondary.subtle, width: 3), + focusedValue: BorderSide(color: zetaColors.surfaceSecondarySubtle, width: 3), defaultValue: BorderSide(color: defaultBackground), disabledValue: BorderSide(color: zetaColors.borderDisabled), ), @@ -309,8 +310,8 @@ class ZdsButton extends StatelessWidget { padding: WidgetStateProperty.all(tp), textStyle: textStyle, foregroundColor: widgetStatePropertyResolver( - defaultValue: isOnDarkBackground ? zetaColors.textInverse : defaultBackground, - disabledValue: zetaColors.textDisabled, + defaultValue: isOnDarkBackground ? zetaColors.mainInverse : defaultBackground, + disabledValue: zetaColors.mainDisabled, ), backgroundColor: widgetStatePropertyResolver( defaultValue: Colors.transparent, @@ -321,7 +322,7 @@ class ZdsButton extends StatelessWidget { pressedValue: calculateOverlay(opacity: 0.2), ), side: widgetStatePropertyResolver( - focusedValue: BorderSide(color: zetaColors.secondary.subtle, width: 3), + focusedValue: BorderSide(color: zetaColors.surfaceSecondarySubtle, width: 3), disabledValue: const BorderSide(color: Colors.transparent), ), ); @@ -330,8 +331,8 @@ class ZdsButton extends StatelessWidget { padding: WidgetStateProperty.all(tp), textStyle: textStyle, foregroundColor: widgetStatePropertyResolver( - defaultValue: zetaColors.textDefault, - disabledValue: zetaColors.textDisabled, + defaultValue: zetaColors.mainDefault, + disabledValue: zetaColors.mainDisabled, ), backgroundColor: widgetStatePropertyResolver( defaultValue: Colors.transparent, @@ -343,7 +344,7 @@ class ZdsButton extends StatelessWidget { pressedValue: calculateOverlay(background: zetaColors.borderDefault, opacity: 0.2), ), side: widgetStatePropertyResolver( - focusedValue: BorderSide(color: zetaColors.secondary.subtle, width: 3), + focusedValue: BorderSide(color: zetaColors.surfaceSecondarySubtle, width: 3), disabledValue: BorderSide(color: zetaColors.borderDisabled), defaultValue: BorderSide(color: zetaColors.borderDefault), ), diff --git a/lib/src/components/atoms/circle_icon_button.dart b/lib/src/components/atoms/circle_icon_button.dart index a051c9fe..84d3c94e 100644 --- a/lib/src/components/atoms/circle_icon_button.dart +++ b/lib/src/components/atoms/circle_icon_button.dart @@ -36,9 +36,9 @@ extension on CircleButtonType { ZetaColorSwatch color(ZetaColors colors) { switch (this) { case CircleButtonType.positive: - return colors.surfacePositive; + return colors.primitives.green; case CircleButtonType.negative: - return colors.surfaceNegative; + return colors.primitives.red; case CircleButtonType.alert: return ZetaColorSwatch.fromColor(Colors.white); case CircleButtonType.base: diff --git a/lib/src/components/atoms/expandable.dart b/lib/src/components/atoms/expandable.dart index 20451781..05c990f7 100644 --- a/lib/src/components/atoms/expandable.dart +++ b/lib/src/components/atoms/expandable.dart @@ -53,7 +53,7 @@ class ZdsExpandable extends StatelessWidget { return child.readMore( collapsedButtonText: collapsedButtonText, expandedButtonText: expandedButtonText, - color: color ?? Zeta.of(context).colors.surfaceTertiary, + color: color ?? Zeta.of(context).colors.surfaceDefault, minHeight: minHeight, ); } @@ -262,7 +262,7 @@ class _FadeOpacity extends StatelessWidget { stops: const [0, 1], colors: [ color, - color.withOpacity(0.1), + color.withValues(alpha: 0.1), ], ), ), @@ -317,7 +317,7 @@ extension ExpandableTextExtension on Widget { collapsedButtonText.isEmpty ? strings.get('READ_MORE', 'Read more') : collapsedButtonText, expandedButtonText: expandedButtonText.isEmpty ? strings.get('COLLAPSE', 'Collapse') : expandedButtonText, minHeight: minHeight, - color: color ?? Zeta.of(context).colors.surfaceTertiary, + color: color ?? Zeta.of(context).colors.surfaceDefault, child: this, ); }, diff --git a/lib/src/components/atoms/icon_text_button.dart b/lib/src/components/atoms/icon_text_button.dart index a471463f..e9007c0f 100644 --- a/lib/src/components/atoms/icon_text_button.dart +++ b/lib/src/components/atoms/icon_text_button.dart @@ -62,9 +62,9 @@ class ZdsIconTextButton extends StatelessWidget with Diagnosticable { width: 112, decoration: BoxDecoration( borderRadius: borderRadius, - color: backgroundColor ?? zetaColors.primary, + color: backgroundColor ?? zetaColors.mainPrimary, boxShadow: [ - BoxShadow(blurRadius: 4, color: zetaColors.textDefault.withOpacity(0.2)), + BoxShadow(blurRadius: 4, color: zetaColors.mainDefault..withValues(alpha: 0.2)), ], ), child: Material( @@ -78,13 +78,13 @@ class ZdsIconTextButton extends StatelessWidget with Diagnosticable { Icon( icon, size: 56, - color: iconColor ?? (backgroundColor ?? zetaColors.primary).onColor, + color: iconColor ?? (backgroundColor ?? zetaColors.mainPrimary).onColor, ), const SizedBox(height: 8), Text( label, style: themeData.textTheme.titleSmall?.copyWith( - color: labelColor ?? (backgroundColor ?? zetaColors.primary).onColor, + color: labelColor ?? (backgroundColor ?? zetaColors.mainPrimary).onColor, ), ), ], diff --git a/lib/src/components/atoms/label.dart b/lib/src/components/atoms/label.dart index 216e7ea7..7309a5c1 100644 --- a/lib/src/components/atoms/label.dart +++ b/lib/src/components/atoms/label.dart @@ -39,14 +39,14 @@ class ZdsLabel extends StatelessWidget { Icon( icon, size: size, - color: zetaColors.secondary.icon, + color: zetaColors.mainSecondary, ), const SizedBox(width: 4), ], if (child != null) DefaultTextStyle( style: safeTextStyle(Theme.of(context).textTheme.titleSmall).copyWith( - color: zetaColors.textSubtle, + color: zetaColors.mainSubtle, ), child: child!, ), diff --git a/lib/src/components/atoms/selection_pills.dart b/lib/src/components/atoms/selection_pills.dart index 6fb30259..c6354b75 100644 --- a/lib/src/components/atoms/selection_pills.dart +++ b/lib/src/components/atoms/selection_pills.dart @@ -29,8 +29,6 @@ class ZdsSelectionPill extends StatelessWidget { this.onClose, this.padding = const EdgeInsets.all(9), this.color, - this.selectedColor, - this.borderColor, }); /// The button's label. @@ -66,44 +64,30 @@ class ZdsSelectionPill extends StatelessWidget { /// Defaults to primary. final ZetaColorSwatch? color; - ///Use [color] instead. Will be deprecated in future release. - /// - /// Custom color to override pill background color. - /// - ///Defaults to `colorScheme.secondary.withOpacity(0.1)` - final Color? selectedColor; - - ///Use [color] instead. Will be deprecated in future release. - /// - /// Custom color to override unselected pill border color. - /// - /// Defaults to `ZdsColors.greyCoolSwatch[100]`. - final Color? borderColor; - @override Widget build(BuildContext context) { final zetaColors = Zeta.of(context).colors; final themeData = Theme.of(context); final bool disabled = onTap == null; + final ZetaColorSwatch colorSwatch = color ?? zetaColors.primitives.primary; final Color background = disabled ? zetaColors.surfaceDisabled : selected - ? color?.surface ?? selectedColor?.withOpacity(0.2) ?? zetaColors.secondary.surface + ? colorSwatch.shade10 : themeData.colorScheme.surface; final Color foreground = disabled - ? zetaColors.iconDisabled + ? zetaColors.mainDisabled : selected - ? color?.icon ?? selectedColor ?? zetaColors.secondary.icon - : zetaColors.iconSubtle; + ? colorSwatch.shade60 + : zetaColors.mainSubtle; - final Color border = borderColor ?? - (disabled - ? zetaColors.borderDisabled - : selected - ? color?.border ?? zetaColors.secondary.border - : zetaColors.borderDefault); + final Color border = (disabled + ? zetaColors.borderDisabled + : selected + ? colorSwatch.shade60 + : zetaColors.borderDefault); return ExpandTapWidget( onTap: onTap ?? () {}, @@ -142,9 +126,9 @@ class ZdsSelectionPill extends StatelessWidget { textAlign: TextAlign.center, style: themeData.textTheme.bodyMedium?.copyWith( color: disabled - ? zetaColors.textDisabled + ? zetaColors.mainDisabled : selected - ? color?.text ?? foreground + ? color ?? foreground : themeData.colorScheme.onSurface, fontWeight: selected && !disabled ? FontWeight.w600 : null, ), @@ -179,8 +163,6 @@ class ZdsSelectionPill extends StatelessWidget { ..add(ObjectFlagProperty.has('onTap', onTap)) ..add(ObjectFlagProperty.has('onClose', onClose)) ..add(DiagnosticsProperty('padding', padding)) - ..add(ColorProperty('selectedColor', selectedColor)) - ..add(ColorProperty('borderColor', borderColor)) ..add(ColorProperty('color', color)); } } diff --git a/lib/src/components/atoms/speed_slider.dart b/lib/src/components/atoms/speed_slider.dart index 465e7691..2deb0e2f 100644 --- a/lib/src/components/atoms/speed_slider.dart +++ b/lib/src/components/atoms/speed_slider.dart @@ -197,17 +197,17 @@ class _Letter extends StatelessWidget { final zeta = Zeta.of(context); final colors = zeta.colors; - Color color = colors.textSubtle; + Color color = colors.mainSubtle; final diff = (index - selectedIndex).abs(); if (diff == 0) { - color = colors.primary; + color = colors.mainPrimary; } else if (diff == 1) { - color = colors.textDefault; + color = colors.mainDefault; } else if (diff > 1 && diff < 4) { - color = colors.textSubtle; + color = colors.mainSubtle; } else { - color = colors.textDisabled; + color = colors.mainDisabled; } return Padding( diff --git a/lib/src/components/atoms/toggle_button.dart b/lib/src/components/atoms/toggle_button.dart index 314dd1d1..b5b44abd 100644 --- a/lib/src/components/atoms/toggle_button.dart +++ b/lib/src/components/atoms/toggle_button.dart @@ -100,7 +100,7 @@ class ZdsToggleButtonState extends State { Container( height: kBigToggleHeight, decoration: ShapeDecoration( - color: Zeta.of(context).colors.warm.shade30, + color: Zeta.of(context).colors.primitives.warm.shade30, shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(28))), ), ), @@ -136,7 +136,7 @@ class ZdsToggleButtonState extends State { color: (index == _selectedValue) ? widget.foregroundColor ?? (widget.backgroundColor ?? Theme.of(context).colorScheme.primary).onColor - : Zeta.of(context).colors.textSubtle, + : Zeta.of(context).colors.mainSubtle, ), child: Text(widget.values[index]).semantics(identifier: 'TOGGLED_TAB_$index'), ), diff --git a/lib/src/components/molecules/block_table.dart b/lib/src/components/molecules/block_table.dart index 9b3ba0e0..3855dfca 100644 --- a/lib/src/components/molecules/block_table.dart +++ b/lib/src/components/molecules/block_table.dart @@ -180,7 +180,7 @@ class _BlockTable extends State with WidgetsBindingObserver { @override Widget build(BuildContext context) { return ColoredBox( - color: Zeta.of(context).colors.surfacePrimary, + color: Zeta.of(context).colors.borderSubtle, child: IntrinsicHeight( child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -362,7 +362,10 @@ class _BlockTable extends State with WidgetsBindingObserver { final List cells = []; final List rows = widget.rows; final double cellHeight = _cellHeight + widget.cellPadding; - final zetaColors = Zeta.of(context).colors; + final zeta = Zeta.of(context); + + final zetaColors = zeta.colors; + for (int j = 0; j < rows[index].data.length; j++) { final List columnWidgets = []; @@ -395,7 +398,7 @@ class _BlockTable extends State with WidgetsBindingObserver { child: DecoratedBox( decoration: BoxDecoration( border: isSelected - ? Border.all(color: themeData.colorScheme.secondary, width: 2) + ? Border.all(color: zetaColors.borderPrimary, width: 2) : Border( bottom: BorderSide( width: 1.5, @@ -407,10 +410,7 @@ class _BlockTable extends State with WidgetsBindingObserver { ), ), color: isSelected - ? themeData.colorScheme.secondary.withLight( - 0.1, - background: zetaColors.surfaceTertiary, - ) + ? zetaColors.primitives.primary.shade90 : tableCell.backgroundColor ?? themeData.colorScheme.surface, ), child: Align( @@ -422,7 +422,7 @@ class _BlockTable extends State with WidgetsBindingObserver { themeData.textTheme.bodySmall?.copyWith( fontSize: 12, fontWeight: FontWeight.w400, - color: tableCell.textColor ?? themeData.colorScheme.onSurface, + color: tableCell.textColor ?? zetaColors.mainDefault, ), ), ), diff --git a/lib/src/components/molecules/bottom_sheet.dart b/lib/src/components/molecules/bottom_sheet.dart index eba91996..39a0ea72 100644 --- a/lib/src/components/molecules/bottom_sheet.dart +++ b/lib/src/components/molecules/bottom_sheet.dart @@ -56,7 +56,7 @@ class ZdsBottomSheet extends StatelessWidget { @override Widget build(BuildContext context) { final ColorScheme colorScheme = Theme.of(context).colorScheme; - final Color sheetBackgroundColor = backgroundColor ?? Zeta.of(context).colors.surfaceTertiary; + final Color sheetBackgroundColor = backgroundColor ?? Zeta.of(context).colors.surfaceDefault; final Color headerColor = header != null ? colorScheme.surface : sheetBackgroundColor; final _BottomSheetHeader headerWidget = _BottomSheetHeader(header: header, backgroundColor: headerColor); final MediaQueryData media = MediaQuery.of(context); @@ -345,7 +345,7 @@ class _BottomSheetHeader extends StatelessWidget implements PreferredSizeWidget final zetaColors = Zeta.of(context).colors; return DecoratedBox( decoration: BoxDecoration( - border: header != null ? Border(bottom: BorderSide(color: zetaColors.textDefault.withOpacity(0.1))) : null, + border: header != null ? Border(bottom: BorderSide(color: zetaColors.borderSubtle)) : null, ), child: Column( children: [ diff --git a/lib/src/components/molecules/check_button.dart b/lib/src/components/molecules/check_button.dart index 9bfc0a95..3510592e 100644 --- a/lib/src/components/molecules/check_button.dart +++ b/lib/src/components/molecules/check_button.dart @@ -51,19 +51,19 @@ class ZdsCheckableButton extends StatelessWidget { final Color foreground = isChecked ? themeData.colorScheme.secondary.onColor : enabled - ? zetaColors.iconSubtle - : zetaColors.iconDisabled; + ? zetaColors.mainSubtle + : zetaColors.mainDisabled; final Color background = !enabled && isChecked - ? zetaColors.secondary.subtle + ? zetaColors.surfaceSecondarySubtle : isChecked - ? zetaColors.secondary + ? zetaColors.mainSecondary : enabled ? zetaColors.surfacePrimary : zetaColors.surfaceDisabled; final Color borderColor = isChecked - ? zetaColors.secondary + ? zetaColors.mainSecondary : enabled ? zetaColors.borderDefault : zetaColors.borderDisabled; diff --git a/lib/src/components/molecules/comment.dart b/lib/src/components/molecules/comment.dart index ccfb3682..fd7e1715 100644 --- a/lib/src/components/molecules/comment.dart +++ b/lib/src/components/molecules/comment.dart @@ -90,12 +90,12 @@ class ZdsComment extends StatelessWidget { /// The background color of the comment. /// - /// Defaults to [ZetaColors.surfacePrimary]. + /// Defaults to [ZetaColors.surfaceDefault]. final Color? backgroundColor; /// The background color of the popup menu. /// - /// Defaults to [ZetaColors.surfacePrimary]. + /// Defaults to [ZetaColors.surfaceDefault]. final Color? popupMenuBackgroundColor; @override @@ -103,7 +103,7 @@ class ZdsComment extends StatelessWidget { final colors = Zeta.of(context).colors; final spacing = Zeta.of(context).spacing; - final backgroundColor = this.backgroundColor ?? colors.surfacePrimary; + final backgroundColor = this.backgroundColor ?? colors.surfaceDefault; return ColoredBox( color: backgroundColor, @@ -134,7 +134,7 @@ class ZdsComment extends StatelessWidget { ZdsSlidableAction( icon: ZetaIcons.reply, semanticLabel: replySemanticLabel, - foregroundColor: colors.primary, + foregroundColor: colors.mainPrimary, backgroundColor: colors.surfacePrimarySubtle, onPressed: (_) => onReply!(), ), @@ -144,7 +144,7 @@ class ZdsComment extends StatelessWidget { semanticLabel: deleteSemanticLabel, onPressed: (_) => onDelete!(), backgroundColor: colors.surfaceNegativeSubtle, - foregroundColor: colors.error, + foregroundColor: colors.mainNegative, ), ], child: Builder( @@ -177,9 +177,9 @@ class ZdsComment extends StatelessWidget { Expanded( child: Text( author!, - style: ZetaTextStyles.labelLarge.copyWith( - fontWeight: FontWeight.w500, - ), + style: Zeta.of(context).textStyles.labelLarge.copyWith( + fontWeight: FontWeight.w500, + ), maxLines: 1, overflow: TextOverflow.ellipsis, ), @@ -189,7 +189,8 @@ class ZdsComment extends StatelessWidget { padding: EdgeInsets.only(left: spacing.small), child: Text( timeStamp!, - style: ZetaTextStyles.bodyXSmall.copyWith(color: colors.textSubtle), + style: + Zeta.of(context).textStyles.bodyXSmall.copyWith(color: colors.mainSubtle), ), ), ], @@ -297,7 +298,7 @@ class _AttachmentRow extends StatelessWidget { return Material( color: backgroundColor, child: InkWell( - borderRadius: radius.minimal, + borderRadius: BorderRadius.all(radius.minimal), onTap: downloadCallback, child: Padding( padding: EdgeInsets.all(spacing.minimum), @@ -323,14 +324,14 @@ class _AttachmentRow extends StatelessWidget { children: [ Text( attachment.name, - style: ZetaTextStyles.bodySmall, + style: Zeta.of(context).textStyles.bodySmall, maxLines: 1, overflow: TextOverflow.ellipsis, ), if (attachment.size != null) Text( attachment.size!, - style: ZetaTextStyles.bodySmall.copyWith(color: colors.textSubtle), + style: Zeta.of(context).textStyles.bodySmall.copyWith(color: colors.mainSubtle), maxLines: 1, overflow: TextOverflow.ellipsis, ), diff --git a/lib/src/components/molecules/date_range_picker.dart b/lib/src/components/molecules/date_range_picker.dart index 5017e8d6..d8f7540b 100644 --- a/lib/src/components/molecules/date_range_picker.dart +++ b/lib/src/components/molecules/date_range_picker.dart @@ -1354,7 +1354,7 @@ class _ZdsDateRangePickerDialogState extends State wit shortMonthDayFormat: widget.shortMonthDayFormat, shortDateFormat: widget.shortDateFormat, ); - final DialogTheme dialogTheme = Theme.of(context).dialogTheme; + final DialogThemeData dialogTheme = Theme.of(context).dialogTheme; size = orientation == Orientation.portrait ? _inputPortraitDialogSize : _inputRangeLandscapeDialogSize; insetPadding = const EdgeInsets.symmetric(horizontal: 16, vertical: 24); shape = dialogTheme.shape; @@ -1443,8 +1443,8 @@ class _CalendarRangePickerDialog extends StatelessWidget { final zetaColors = Zeta.of(context).colors; final TextTheme textTheme = theme.textTheme; - final Color headerForeground = zetaColors.textDefault; - final Color headerDisabledForeground = zetaColors.textDisabled; + final Color headerForeground = zetaColors.mainDefault; + final Color headerDisabledForeground = zetaColors.mainDisabled; final String startDateText = _formatRangeStartDate( localizations, @@ -2378,7 +2378,7 @@ class MonthItemState extends State { } Color _highlightColor(BuildContext context) { - return Theme.of(context).colorScheme.secondary.withOpacity(0.12); + return Theme.of(context).colorScheme.secondary.withValues(alpha: 0.12); } void _dayFocusChanged(bool focused) { @@ -2456,7 +2456,7 @@ class MonthItemState extends State { textDirection: textDirection, ); } else if (isDisabled) { - itemStyle = textTheme.bodyMedium?.apply(color: colorScheme.onSurface.withOpacity(0.38)); + itemStyle = textTheme.bodyMedium?.apply(color: colorScheme.onSurface.withValues(alpha: 0.38)); } else if (DateUtils.isSameDay(widget.currentDate, dayToBuild)) { // The current day gets a different text color and a circle stroke // border. @@ -2505,7 +2505,7 @@ class MonthItemState extends State { focusNode: _dayFocusNodes[day - 1], onTap: () => widget.onChanged(dayToBuild), radius: _monthItemRowHeight / 2 + 4, - splashColor: colorScheme.primary.withOpacity(0.38), + splashColor: colorScheme.primary.withValues(alpha: 0.38), onFocusChange: _dayFocusChanged, child: dayWidget, ); diff --git a/lib/src/components/molecules/date_time_picker.dart b/lib/src/components/molecules/date_time_picker.dart index 20b205d6..8f221dbf 100644 --- a/lib/src/components/molecules/date_time_picker.dart +++ b/lib/src/components/molecules/date_time_picker.dart @@ -266,7 +266,7 @@ class ZdsDateTimePickerState extends State { textAlign: widget.textAlign, style: widget.textStyle ?? textTheme.bodyLarge?.copyWith( - color: _dateTime == null ? zetaColors.textSubtle : textTheme.bodyLarge?.color, + color: _dateTime == null ? zetaColors.mainSubtle : textTheme.bodyLarge?.color, ), ); diff --git a/lib/src/components/molecules/dropdown.dart b/lib/src/components/molecules/dropdown.dart index a834aa15..a6bc1beb 100644 --- a/lib/src/components/molecules/dropdown.dart +++ b/lib/src/components/molecules/dropdown.dart @@ -158,7 +158,7 @@ class ZdsDropdownListState extends State> { widget.label!, style: widget.labelStyle ?? themeData.textTheme.headlineSmall?.copyWith( - color: zetaColors.textSubtle, + color: zetaColors.mainSubtle, ), ), const SizedBox(height: 4), @@ -183,7 +183,7 @@ class ZdsDropdownListState extends State> { suffixPadding: const EdgeInsets.only(right: 8), suffixIcon: Icon( _isOpen ? ZdsIcons.chevron_up : ZdsIcons.chevron_down, - color: zetaColors.iconSubtle, + color: zetaColors.mainSubtle, ), border: border, errorBorder: border, @@ -210,7 +210,7 @@ class ZdsDropdownListState extends State> { menuItemStyleData: MenuItemStyleData( selectedMenuItemBuilder: (BuildContext context, Widget child) { return ColoredBox( - color: themeData.colorScheme.secondary.withOpacity(0.1), + color: themeData.colorScheme.secondary.withValues(alpha: 0.1), child: child, ); }, diff --git a/lib/src/components/molecules/expansion_tile.dart b/lib/src/components/molecules/expansion_tile.dart index 0375cff0..e9fc3ac4 100644 --- a/lib/src/components/molecules/expansion_tile.dart +++ b/lib/src/components/molecules/expansion_tile.dart @@ -323,7 +323,7 @@ class ZdsExpansionTileState extends State with SingleTickerPro turns: _iconTurns, child: Icon( widget.expansionTileType == ExpansionTileType.regular ? ZdsIcons.chevron_down : ZdsIcons.chevron_right, - color: zeta.colors.iconDefault, + color: zeta.colors.mainDefault, size: 24, ), ), @@ -367,7 +367,7 @@ class ZdsExpansionTileState extends State with SingleTickerPro children: [ DefaultTextStyle( style: safeTextStyle(themeData.textTheme.bodyLarge) - .copyWith(color: zeta.colors.textDefault), + .copyWith(color: zeta.colors.mainDefault), maxLines: 1, overflow: TextOverflow.ellipsis, child: widget.title, @@ -376,7 +376,7 @@ class ZdsExpansionTileState extends State with SingleTickerPro const SizedBox(height: 5), DefaultTextStyle( style: themeData.textTheme.bodySmall!.copyWith( - color: zeta.colors.textSubtle, + color: zeta.colors.mainSubtle, ), child: widget.subtitle!, ), @@ -393,7 +393,7 @@ class ZdsExpansionTileState extends State with SingleTickerPro child: widget.expandWithIconOnly ? chevronIcon : IconTheme( - data: IconThemeData(color: zeta.colors.iconSubtle, size: 24), + data: IconThemeData(color: zeta.colors.mainSubtle, size: 24), child: RotationTransition( turns: _iconTurns, child: const Icon(ZdsIcons.chevron_down), diff --git a/lib/src/components/molecules/fields_list_tile.dart b/lib/src/components/molecules/fields_list_tile.dart index 16a90f3a..894bd12f 100644 --- a/lib/src/components/molecules/fields_list_tile.dart +++ b/lib/src/components/molecules/fields_list_tile.dart @@ -62,7 +62,7 @@ class ZdsFieldsListTile extends StatelessWidget { /// The textStyle used for the starting elements of each field. /// - /// Defaults to [TextTheme.titleSmall] with [ZetaColorSwatch.text] color. + /// Defaults to [TextTheme.titleSmall] with [ZetaColors.mainDefault] color. final TextStyle? fieldsStartTextStyle; /// The textStyle used for the end elements of each field. @@ -133,7 +133,7 @@ class ZdsFieldsListTile extends StatelessWidget { const SizedBox(height: 8), DefaultTextStyle( style: safeTextStyle(themeData.textTheme.bodyMedium).copyWith( - color: Zeta.of(context).colors.textDisabled, + color: Zeta.of(context).colors.mainDisabled, ), child: footnote!, ), @@ -176,7 +176,7 @@ extension _UIBuilder on ZdsFieldsListTile { DefaultTextStyle( style: fieldsStartDefaultStyle ?? safeTextStyle(themeData.textTheme.titleSmall).copyWith( - color: Zeta.of(context).colors.textSubtle, + color: Zeta.of(context).colors.mainSubtle, ), textAlign: TextAlign.start, child: Flexible(flex: startFieldFlexFactor ?? 0, child: field.start!), diff --git a/lib/src/components/molecules/information_bar.dart b/lib/src/components/molecules/information_bar.dart index 00e502cb..53f37e10 100644 --- a/lib/src/components/molecules/information_bar.dart +++ b/lib/src/components/molecules/information_bar.dart @@ -117,7 +117,7 @@ class ZdsInformationBar extends StatelessWidget { Color _getBarColor(ZdsInformationBarTheme color, ZetaColors colors) { switch (color) { case ZdsInformationBarTheme.neutral: - return colors.cool.surface; + return colors.surfaceCool; case ZdsInformationBarTheme.positive: return colors.surfacePositiveSubtle; case ZdsInformationBarTheme.inProgress: @@ -130,7 +130,7 @@ Color _getBarColor(ZdsInformationBarTheme color, ZetaColors colors) { Color _getIconColor(ZdsInformationBarTheme color, ZetaColors colors) { switch (color) { case ZdsInformationBarTheme.neutral: - return colors.iconDefault; + return colors.mainDefault; case ZdsInformationBarTheme.positive: return colors.borderPositive; case ZdsInformationBarTheme.inProgress: diff --git a/lib/src/components/molecules/input_dialog.dart b/lib/src/components/molecules/input_dialog.dart index a0f172d2..50ac7b77 100644 --- a/lib/src/components/molecules/input_dialog.dart +++ b/lib/src/components/molecules/input_dialog.dart @@ -162,7 +162,7 @@ class ZdsInputDialogState extends State { Text( widget.title!, style: theme.textTheme.displaySmall?.copyWith( - color: zetaColors.textDefault, + color: zetaColors.mainDefault, ), ), Padding( @@ -203,7 +203,7 @@ class ZdsInputDialogState extends State { hintText: widget.hint, errorText: _error, errorStyle: theme.textTheme.bodyMedium?.copyWith( - color: zetaColors.error, + color: zetaColors.mainNegative, ), ), ), diff --git a/lib/src/components/molecules/interval_time_picker.dart b/lib/src/components/molecules/interval_time_picker.dart index fbbd0696..1f69a649 100644 --- a/lib/src/components/molecules/interval_time_picker.dart +++ b/lib/src/components/molecules/interval_time_picker.dart @@ -280,8 +280,8 @@ class _HourMinuteControl extends StatelessWidget { final Color backgroundColor = timePickerTheme.hourMinuteColor ?? WidgetStateColor.resolveWith((Set states) { return states.contains(WidgetState.selected) - ? themeData.colorScheme.primary.withOpacity(isDark ? 0.24 : 0.12) - : themeData.colorScheme.onSurface.withOpacity(0.12); + ? themeData.colorScheme.primary.withValues(alpha: isDark ? 0.24 : 0.12) + : themeData.colorScheme.onSurface.withValues(alpha: 0.12); }); final TextStyle style = timePickerTheme.hourMinuteTextStyle ?? themeData.textTheme.displayMedium!; final ShapeBorder shape = timePickerTheme.hourMinuteShape ?? _kDefaultShape; @@ -554,7 +554,9 @@ class _DayPeriodControl extends StatelessWidget { final bool isDark = colorScheme.brightness == Brightness.dark; final Color textColor = timePickerTheme.dayPeriodTextColor ?? WidgetStateColor.resolveWith((Set states) { - return states.contains(WidgetState.selected) ? colorScheme.primary : colorScheme.onSurface.withOpacity(0.60); + return states.contains(WidgetState.selected) + ? colorScheme.primary + : colorScheme.onSurface.withValues(alpha: 0.60); }); final Color backgroundColor = timePickerTheme.dayPeriodColor ?? WidgetStateColor.resolveWith((Set states) { @@ -563,7 +565,7 @@ class _DayPeriodControl extends StatelessWidget { // and allows the optional elevation overlay for dark mode to be // visible. return states.contains(WidgetState.selected) - ? colorScheme.primary.withOpacity(isDark ? 0.24 : 0.12) + ? colorScheme.primary.withValues(alpha: isDark ? 0.24 : 0.12) : Colors.transparent; }); final bool amSelected = selectedTime.period == DayPeriod.am; @@ -581,7 +583,7 @@ class _DayPeriodControl extends StatelessWidget { timePickerTheme.dayPeriodShape ?? const RoundedRectangleBorder(borderRadius: _kDefaultBorderRadius); final BorderSide borderSide = timePickerTheme.dayPeriodBorderSide ?? BorderSide( - color: Color.alphaBlend(colorScheme.onSurface.withOpacity(0.38), colorScheme.surface), + color: Color.alphaBlend(colorScheme.onSurface.withValues(alpha: 0.38), colorScheme.surface), ); // Apply the custom borderSide. shape = shape.copyWith( @@ -1289,7 +1291,8 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin { Widget build(BuildContext context) { final ThemeData theme = Theme.of(context); final TimePickerThemeData pickerTheme = TimePickerTheme.of(context); - final Color backgroundColor = pickerTheme.dialBackgroundColor ?? themeData.colorScheme.onSurface.withOpacity(0.12); + final Color backgroundColor = + pickerTheme.dialBackgroundColor ?? themeData.colorScheme.onSurface.withValues(alpha: 0.12); final Color accentColor = pickerTheme.dialHandColor ?? themeData.colorScheme.primary; final Color primaryLabelColor = WidgetStateProperty.resolveAs(pickerTheme.dialTextColor, {}) ?? themeData.colorScheme.onSurface; @@ -1865,12 +1868,12 @@ class _HourMinuteTextFieldState extends State<_HourMinuteTextField> with Restora focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide(color: colorScheme.error, width: 2), ), - hintStyle: widget.style.copyWith(color: colorScheme.onSurface.withOpacity(0.36)), + hintStyle: widget.style.copyWith(color: colorScheme.onSurface.withValues(alpha: 0.36)), // TODO(rami-a): Remove this logic once https://github.com/flutter/flutter/issues/54104 is fixed. errorStyle: const TextStyle(fontSize: 0, height: 0), // Prevent the error text from appearing. ); } - final Color unfocusedFillColor = timePickerTheme.hourMinuteColor ?? colorScheme.onSurface.withOpacity(0.12); + final Color unfocusedFillColor = timePickerTheme.hourMinuteColor ?? colorScheme.onSurface.withValues(alpha: 0.12); // If screen reader is in use, make the hint text say hours/minutes. // Otherwise, remove the hint text when focused because the centered cursor // appears odd above the hint text. @@ -2381,8 +2384,8 @@ class _IntervalTimePickerDialogState extends State wit if (_entryMode.value == TimePickerEntryMode.dial || _entryMode.value == TimePickerEntryMode.input) IconButton( color: TimePickerTheme.of(context).entryModeIconColor ?? - theme.colorScheme.onSurface.withOpacity( - theme.colorScheme.brightness == Brightness.dark ? 1.0 : 0.6, + theme.colorScheme.onSurface.withValues( + alpha: theme.colorScheme.brightness == Brightness.dark ? 1.0 : 0.6, ), onPressed: _handleEntryModeToggle, icon: Icon(_entryMode.value == TimePickerEntryMode.dial ? Icons.keyboard : Icons.access_time), diff --git a/lib/src/components/molecules/menu_item.dart b/lib/src/components/molecules/menu_item.dart index 5ebadb42..fb849580 100644 --- a/lib/src/components/molecules/menu_item.dart +++ b/lib/src/components/molecules/menu_item.dart @@ -69,7 +69,7 @@ class ZdsMenuItem extends StatelessWidget { child: InkWell( onTap: onTap, child: IconTheme.merge( - data: IconThemeData(size: 24, color: Zeta.of(context).colors.iconSubtle), + data: IconThemeData(size: 24, color: Zeta.of(context).colors.mainSubtle), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -92,7 +92,7 @@ class ZdsMenuItem extends StatelessWidget { ), ], ).textStyle( - themeData.textTheme.bodyLarge?.copyWith(color: Zeta.of(context).colors.textSubtle), + themeData.textTheme.bodyLarge?.copyWith(color: Zeta.of(context).colors.mainSubtle), ), ), if (trailing != null) trailing!, diff --git a/lib/src/components/molecules/resizeable_text_area.dart b/lib/src/components/molecules/resizeable_text_area.dart index d95afa58..83c4a7e4 100644 --- a/lib/src/components/molecules/resizeable_text_area.dart +++ b/lib/src/components/molecules/resizeable_text_area.dart @@ -174,7 +174,7 @@ class _ZdsResizableTextAreaState extends State { child: Icon( ZdsIcons.expand, size: 18, - color: zetaColors.iconSubtle, + color: zetaColors.mainSubtle, ).padding(4), ), onVerticalDragUpdate: (DragUpdateDetails details) { @@ -199,7 +199,7 @@ class _ZdsResizableTextAreaState extends State { offset: const Offset(0, -8), child: Text( widget.footerText!, - style: Theme.of(context).textTheme.bodySmall?.copyWith(color: zetaColors.textDisabled), + style: Theme.of(context).textTheme.bodySmall?.copyWith(color: zetaColors.mainDisabled), overflow: TextOverflow.ellipsis, maxLines: 2, ), diff --git a/lib/src/components/molecules/selectable_list_tile.dart b/lib/src/components/molecules/selectable_list_tile.dart index 51f7bd3f..8e9ffbc4 100644 --- a/lib/src/components/molecules/selectable_list_tile.dart +++ b/lib/src/components/molecules/selectable_list_tile.dart @@ -84,17 +84,17 @@ class ZdsSelectableListTile extends StatelessWidget { final zetaColors = Zeta.of(context).colors; return IconTheme( - data: themeData.iconTheme.copyWith(size: 24, color: zetaColors.secondary.icon), + data: themeData.iconTheme.copyWith(size: 24, color: zetaColors.mainSecondary), child: Padding( padding: kZdsSelectableListTilePadding, child: ClipRRect( borderRadius: const BorderRadius.all(Radius.circular(kZdsSelectableListTileBorderRadius)), child: Material( - color: showSelected ? zetaColors.secondary.surface : themeData.colorScheme.surface, + color: showSelected ? zetaColors.surfaceSecondary : themeData.colorScheme.surface, child: DecoratedBox( decoration: BoxDecoration( border: showSelected - ? Border.all(color: zetaColors.secondary.border) + ? Border.all(color: zetaColors.borderSecondary) : Border.all(color: zetaColors.borderSubtle), borderRadius: const BorderRadius.all(Radius.circular(kZdsSelectableListTileBorderRadius)), ), @@ -135,7 +135,7 @@ class ZdsSelectableListTile extends StatelessWidget { if (subTitle != null) Container(child: subTitle).textStyle( themeData.textTheme.titleSmall! - .copyWith(color: zetaColors.textSubtle, fontSize: 12), + .copyWith(color: zetaColors.mainSubtle, fontSize: 12), ), ], ), diff --git a/lib/src/components/molecules/sheet_header.dart b/lib/src/components/molecules/sheet_header.dart index 3c7f422b..c819d8e7 100644 --- a/lib/src/components/molecules/sheet_header.dart +++ b/lib/src/components/molecules/sheet_header.dart @@ -72,7 +72,7 @@ class ZdsSheetHeader extends StatelessWidget implements PreferredSizeWidget { sortKey: const OrdinalSortKey(1), child: IconTheme( data: themeData.iconTheme.copyWith( - color: Zeta.of(context).colors.iconSubtle, + color: Zeta.of(context).colors.mainSubtle, size: 24, ), child: leading!, diff --git a/lib/src/components/molecules/slidable_button.dart b/lib/src/components/molecules/slidable_button.dart index a5a3ea0c..559e3eb0 100644 --- a/lib/src/components/molecules/slidable_button.dart +++ b/lib/src/components/molecules/slidable_button.dart @@ -162,7 +162,7 @@ class ZdsSlidableButtonState extends State { ? widget.buttonColorEnd! : widget.onSlideComplete != null ? widget.buttonColor - : widget.buttonColor.withOpacity(0.5); + : widget.buttonColor.withValues(alpha: 0.5); return Semantics( slider: true, diff --git a/lib/src/components/molecules/slidable_list_tile.dart b/lib/src/components/molecules/slidable_list_tile.dart index 224f5336..13ecde5f 100644 --- a/lib/src/components/molecules/slidable_list_tile.dart +++ b/lib/src/components/molecules/slidable_list_tile.dart @@ -205,8 +205,8 @@ class _ActionBuilderState extends State<_ActionBuilder> { onPressed: widget.action.onPressed, label: size.height < 60 && widget.action.icon != null ? null : widget.action.label, icon: widget.action.icon, - backgroundColor: widget.action.backgroundColor ?? zetaColors.surfaceTertiary, - foregroundColor: widget.action.foregroundColor ?? zetaColors.textSubtle, + backgroundColor: widget.action.backgroundColor ?? zetaColors.surfaceDefault, + foregroundColor: widget.action.foregroundColor ?? zetaColors.mainSubtle, autoClose: widget.action.autoclose, spacing: 16, padding: EdgeInsets.zero, diff --git a/lib/src/components/molecules/star_rating.dart b/lib/src/components/molecules/star_rating.dart index df1ef855..f6175f53 100644 --- a/lib/src/components/molecules/star_rating.dart +++ b/lib/src/components/molecules/star_rating.dart @@ -42,7 +42,7 @@ class ZdsStarRating extends StatefulWidget { /// Optional color for the stars. /// - /// Defaults to [ZetaColors.iconDefault]. + /// Defaults to [ZetaColors.mainDefault]. final Color? color; @override @@ -118,8 +118,8 @@ class _ZdsStarRatingState extends State { child: AnimatedContainer( duration: const Duration(milliseconds: 250), decoration: BoxDecoration( - color: colors.cool.shade30.withOpacity(_selected ? 1 : 0), - borderRadius: borderRadius, + color: colors.primitives.cool.shade30.withValues(alpha: _selected ? 1 : 0), + borderRadius: BorderRadius.all(borderRadius), ), child: Row( mainAxisSize: MainAxisSize.min, @@ -128,8 +128,8 @@ class _ZdsStarRatingState extends State { (int index) => SizedBox.square( dimension: _boxSize, child: InkWell( - borderRadius: borderRadius, - splashColor: colors.cool.shade30, + borderRadius: BorderRadius.all(borderRadius), + splashColor: colors.primitives.cool.shade30, onTap: () { if (widget.halfIncrements && index + 0.5 == _valueTapped) { setValue(index.toDouble()); @@ -144,7 +144,7 @@ class _ZdsStarRatingState extends State { child: Icon( _starValue(index).icon(rounded: widget.rounded), size: _starSize, - color: widget.color ?? colors.iconDefault, + color: widget.color ?? colors.mainDefault, ), ), ), diff --git a/lib/src/components/molecules/stats_card.dart b/lib/src/components/molecules/stats_card.dart index b1385898..733b539c 100644 --- a/lib/src/components/molecules/stats_card.dart +++ b/lib/src/components/molecules/stats_card.dart @@ -111,7 +111,7 @@ class ZdsStatCard extends StatelessWidget { subtitle ?? '', textAlign: TextAlign.end, style: themeData.textTheme.bodySmall?.copyWith( - color: Zeta.of(context).colors.textSubtle, + color: Zeta.of(context).colors.mainSubtle, ), ), ) diff --git a/lib/src/components/molecules/tab_bar.dart b/lib/src/components/molecules/tab_bar.dart index b1df65f5..c6350c72 100644 --- a/lib/src/components/molecules/tab_bar.dart +++ b/lib/src/components/molecules/tab_bar.dart @@ -146,28 +146,28 @@ class ZdsTabBar extends StatelessWidget implements PreferredSizeWidget { return _tabBarStyle( context, hasIcons, - background: zetaColors.primary, - indicator: zetaColors.primary.onColor, - selectedText: zetaColors.primary.onColor, - unselectedText: zetaColors.primary.onColor.withOpacity(0.7), + background: zetaColors.mainPrimary, + indicator: zetaColors.mainPrimary.onColor, + selectedText: zetaColors.mainPrimary.onColor, + unselectedText: zetaColors.mainPrimary.onColor.withValues(alpha: 0.7), ); case ZdsTabBarColor.basic: return _tabBarStyle( context, hasIcons, - background: zetaColors.surfaceTertiary, - indicator: zetaColors.primary, - selectedText: zetaColors.textDefault, - unselectedText: zetaColors.textSubtle, + background: zetaColors.surfaceDefault, + indicator: zetaColors.mainPrimary, + selectedText: zetaColors.mainDefault, + unselectedText: zetaColors.mainSubtle, ); case ZdsTabBarColor.surface: return _tabBarStyle( context, hasIcons, - background: zetaColors.surfacePrimary, - indicator: zetaColors.primary, - selectedText: zetaColors.textDefault, - unselectedText: zetaColors.textSubtle, + background: zetaColors.mainInverse, + indicator: zetaColors.mainPrimary, + selectedText: zetaColors.mainDefault, + unselectedText: zetaColors.mainSubtle, ); case ZdsTabBarColor.appBar: final appBarTheme = Theme.of(context).appBarTheme; @@ -175,9 +175,9 @@ class ZdsTabBar extends StatelessWidget implements PreferredSizeWidget { context, hasIcons, background: appBarTheme.backgroundColor ?? zetaColors.surfacePrimary, - indicator: appBarTheme.foregroundColor ?? zetaColors.primary, - selectedText: appBarTheme.foregroundColor ?? zetaColors.textDefault, - unselectedText: appBarTheme.foregroundColor?.withOpacity(0.7) ?? zetaColors.textSubtle, + indicator: appBarTheme.foregroundColor ?? zetaColors.mainPrimary, + selectedText: appBarTheme.foregroundColor ?? zetaColors.mainDefault, + unselectedText: appBarTheme.foregroundColor?.withValues(alpha: 0.7) ?? zetaColors.mainSubtle, ); } } @@ -194,7 +194,7 @@ class ZdsTabBar extends StatelessWidget implements PreferredSizeWidget { final double height = hasIcons ? 56.0 : 48.0; final ThemeData theme = Theme.of(context); - final TabBarTheme tabBarTheme = theme.tabBarTheme.copyWith(indicatorSize: TabBarIndicatorSize.tab); + final TabBarThemeData tabBarTheme = theme.tabBarTheme.copyWith(indicatorSize: TabBarIndicatorSize.tab); final TextStyle? labelStyle = hasIcons ? theme.textTheme.bodySmall : theme.textTheme.bodyLarge; return ZdsTabBarStyleContainer( diff --git a/lib/src/components/molecules/tag.dart b/lib/src/components/molecules/tag.dart index dd7913f8..fda24f1a 100644 --- a/lib/src/components/molecules/tag.dart +++ b/lib/src/components/molecules/tag.dart @@ -9,23 +9,42 @@ import '../../../../zds_flutter.dart'; /// /// Otherwise, the background will the same color, but with 10% opacity. enum ZdsTagColor { - /// [ColorScheme.error]. + /// [ZetaPrimitives.red]. error, - /// [ZetaColors.orange]. + /// [ZetaPrimitives.orange]. alert, - /// Primary color. + /// [ZetaPrimitives.primary]. + primary, - /// Secondary color. + /// [ZetaPrimitives.secondary]. secondary, - /// [ZetaColors.green]. + /// [ZetaPrimitives.green]. success, - /// [ZetaColors.warm] - basic, + /// [ZetaPrimitives.warm] + basic; + + /// Returns the color swatch for this tag color. + ZetaColorSwatch toColorSwatch(ZetaPrimitives colors) { + switch (this) { + case ZdsTagColor.error: + return colors.red; + case ZdsTagColor.alert: + return colors.orange; + case ZdsTagColor.primary: + return colors.primary; + case ZdsTagColor.secondary: + return colors.secondary; + case ZdsTagColor.success: + return colors.green; + case ZdsTagColor.basic: + return colors.warm; + } + } } /// A tag used to show status information or selected options. @@ -123,14 +142,16 @@ class ZdsTag extends StatelessWidget { Widget build(BuildContext context) { final zetaColors = Zeta.of(context).colors; - Color fgColor = customColor ?? _resolveFgColor(zetaColors, color); + final ZetaColorSwatch swatch = color.toColorSwatch(zetaColors.primitives); + + Color fgColor = customColor ?? swatch.shade60; Color bgColor; if (filled) { bgColor = fgColor; fgColor = fgColor.onColor; } else { - bgColor = customBackgroundColor ?? _resolveBgColor(zetaColors, color); + bgColor = customBackgroundColor ?? swatch.shade30; } final double height = onClose == null @@ -200,40 +221,6 @@ class ZdsTag extends StatelessWidget { ); } - Color _resolveFgColor(ZetaColors zetaColors, ZdsTagColor tagColor) { - switch (tagColor) { - case ZdsTagColor.error: - return zetaColors.surfaceNegative; - case ZdsTagColor.alert: - return zetaColors.surfaceWarning; - case ZdsTagColor.primary: - return zetaColors.primary; - case ZdsTagColor.secondary: - return zetaColors.secondary; - case ZdsTagColor.success: - return zetaColors.surfacePositive; - case ZdsTagColor.basic: - return zetaColors.warm.shade80; - } - } - - Color _resolveBgColor(ZetaColors zetaColors, ZdsTagColor tagColor) { - switch (tagColor) { - case ZdsTagColor.error: - return zetaColors.error.surface; - case ZdsTagColor.alert: - return zetaColors.orange.surface; - case ZdsTagColor.primary: - return zetaColors.primary.surface; - case ZdsTagColor.secondary: - return zetaColors.secondary.surface; - case ZdsTagColor.success: - return zetaColors.green.surface; - case ZdsTagColor.basic: - return zetaColors.warm.shade30; - } - } - @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); diff --git a/lib/src/components/molecules/toast.dart b/lib/src/components/molecules/toast.dart index cd542e3e..19a6dc67 100644 --- a/lib/src/components/molecules/toast.dart +++ b/lib/src/components/molecules/toast.dart @@ -104,36 +104,36 @@ class ZdsToast extends StatelessWidget implements PreferredSizeWidget { case ZdsToastColors.info: return colors.surfaceInfoSubtle; case ZdsToastColors.error: - return colors.error.shade10; + return colors.surfaceNegativeSubtle; case ZdsToastColors.primary: - return colors.primary.shade10; + return colors.surfacePrimarySubtle; case ZdsToastColors.dark: - return colors.textDefault; + return colors.mainDefault; } } Color _iconColor(ZetaColors colors, ZdsToastColors toastColor) { switch (toastColor) { case ZdsToastColors.success: - return colors.green.shade60; + return colors.mainPositive; case ZdsToastColors.warning: - return colors.orange.shade60; + return colors.mainWarning; case ZdsToastColors.info: - return colors.surfaceInfo.shade60; + return colors.mainInfo; case ZdsToastColors.error: - return colors.error.shade60; + return colors.mainNegative; case ZdsToastColors.primary: - return colors.primary.shade60; + return colors.mainPrimary; case ZdsToastColors.dark: - return colors.textInverse; + return colors.mainInverse; } } Color _foregroundColor(ZetaColors colors, ZdsToastColors toastColor) { if (toastColor == ZdsToastColors.dark) { - return colors.textInverse; + return colors.mainInverse; } else { - return colors.textDefault; + return colors.mainDefault; } } diff --git a/lib/src/components/molecules/toolbar.dart b/lib/src/components/molecules/toolbar.dart index 634db23d..883ec3ab 100644 --- a/lib/src/components/molecules/toolbar.dart +++ b/lib/src/components/molecules/toolbar.dart @@ -101,7 +101,7 @@ class ZdsToolbar extends StatelessWidget { maxLines: 1, overflow: TextOverflow.ellipsis, style: safeTextStyle(theme.primaryTextTheme.titleSmall).copyWith( - color: effectiveForeground.withOpacity(0.8), + color: effectiveForeground.withValues(alpha: 0.8), ), child: subtitle!, ), diff --git a/lib/src/components/molecules/vertical_nav.dart b/lib/src/components/molecules/vertical_nav.dart index af365ea1..4ecbc52c 100644 --- a/lib/src/components/molecules/vertical_nav.dart +++ b/lib/src/components/molecules/vertical_nav.dart @@ -121,7 +121,7 @@ class _ZdsVerticalNavState extends State { data: IconThemeData( color: selected ? Theme.of(context).colorScheme.secondary - : Zeta.of(context).colors.iconSubtle, + : Zeta.of(context).colors.mainSubtle, size: 24, ), child: item.icon, @@ -173,7 +173,7 @@ class _ZdsVerticalNavState extends State { color: themeData.colorScheme.surface, boxShadow: [ BoxShadow( - color: themeData.colorScheme.onSurface.withOpacity(0.25), + color: themeData.colorScheme.onSurface.withValues(alpha: 0.25), blurRadius: 1, offset: const Offset(1, 0), ), @@ -240,16 +240,14 @@ class _SelectedBackground extends StatelessWidget { margin: const EdgeInsets.fromLTRB(2, 2, 0, 2), padding: const EdgeInsets.only(left: 1), decoration: BoxDecoration( - gradient: LinearGradient( - colors: [colors.surfaceTertiary, colors.surfacePrimary], - ), + color: colors.surfaceDefault, borderRadius: const BorderRadius.only( topLeft: Radius.circular(4), bottomLeft: Radius.circular(4), ), boxShadow: [ BoxShadow( - color: themeData.cardTheme.shadowColor ?? Colors.black.withOpacity(0.25), + color: themeData.cardTheme.shadowColor ?? Colors.black.withValues(alpha: 0.25), blurRadius: 1, spreadRadius: 1, offset: const Offset(-1, 1), diff --git a/lib/src/components/organisms/app_bar.dart b/lib/src/components/organisms/app_bar.dart index 1aed65a5..20d2f797 100644 --- a/lib/src/components/organisms/app_bar.dart +++ b/lib/src/components/organisms/app_bar.dart @@ -140,7 +140,7 @@ class ZdsAppBar extends StatelessWidget implements PreferredSizeWidget { DefaultTextStyle.merge( child: subtitle!, style: theme.primaryTextTheme.titleSmall - ?.copyWith(color: appBarTheme.foregroundColor?.withOpacity(0.8)), + ?.copyWith(color: appBarTheme.foregroundColor?.withValues(alpha: 0.8)), ), ], ), @@ -202,8 +202,8 @@ class ZdsAppBar extends StatelessWidget implements PreferredSizeWidget { case ZdsTabBarColor.appBar: return Theme.of(context).appBarTheme; case ZdsTabBarColor.primary: - final fgColor = zetaColors.primary.onColor; - final bgColor = zetaColors.primary; + final fgColor = zetaColors.mainPrimary.onColor; + final bgColor = zetaColors.mainDefault; return AppBarTheme( systemOverlayStyle: computeSystemOverlayStyle(bgColor), backgroundColor: bgColor, @@ -215,8 +215,8 @@ class ZdsAppBar extends StatelessWidget implements PreferredSizeWidget { actionsIconTheme: IconThemeData(color: fgColor), ); case ZdsTabBarColor.basic: - final fgColor = zetaColors.textDefault; - final bgColor = zetaColors.surfaceTertiary; + final fgColor = zetaColors.mainDefault; + final bgColor = zetaColors.surfaceDefault; return AppBarTheme( systemOverlayStyle: computeSystemOverlayStyle(bgColor), backgroundColor: bgColor, @@ -228,8 +228,8 @@ class ZdsAppBar extends StatelessWidget implements PreferredSizeWidget { actionsIconTheme: IconThemeData(color: fgColor), ); case ZdsTabBarColor.surface: - final fgColor = zetaColors.textDefault; - final bgColor = zetaColors.surfacePrimary; + final fgColor = zetaColors.mainDefault; + final bgColor = zetaColors.mainInverse; return AppBarTheme( systemOverlayStyle: computeSystemOverlayStyle(bgColor), backgroundColor: bgColor, diff --git a/lib/src/components/organisms/calendar.dart b/lib/src/components/organisms/calendar.dart index 102616b0..3beed797 100644 --- a/lib/src/components/organisms/calendar.dart +++ b/lib/src/components/organisms/calendar.dart @@ -66,8 +66,6 @@ class ZdsCalendar extends StatefulWidget { this.nextTooltip, this.selectedRange, this.backgroundColor, - @Deprecated('This parameter is no longer used and will be removed in the next major version.') - bool showSelectedDateHeader = false, }) : _variant = _ZdsCalendarVariant.switchable, hasHeader = true; @@ -105,8 +103,6 @@ class ZdsCalendar extends StatefulWidget { this.nextTooltip, this.selectedRange, this.backgroundColor, - @Deprecated('This parameter is no longer used and will be removed in the next major version.') - bool showSelectedDateHeader = false, }) : _variant = _ZdsCalendarVariant.monthly; /// Shows a calendar in a fixed weekly format. @@ -142,8 +138,6 @@ class ZdsCalendar extends StatefulWidget { this.previousTooltip, this.nextTooltip, this.selectedRange, - @Deprecated('This parameter is no longer used and will be removed in the next major version.') - bool showSelectedDateHeader = false, }) : _variant = _ZdsCalendarVariant.weekly, hasHeader = false; @@ -241,7 +235,7 @@ class ZdsCalendar extends StatefulWidget { /// Color of the text on the calendar header /// - /// Defaults to Zeta.of(context).colors.textSubtle + /// Defaults to Zeta.of(context).colors.mainSubtle final Color? calendarHeaderTextColor; /// Custom color override for unselected days. @@ -474,7 +468,7 @@ class _ZdsCalendarState extends State { text, style: Theme.of(context).textTheme.titleSmall?.copyWith( fontWeight: FontWeight.w500, - color: colors.textSubtle, + color: colors.mainSubtle, ), textAlign: TextAlign.center, ), @@ -507,34 +501,34 @@ class _ZdsCalendarState extends State { cellMargin: EdgeInsets.all(widget.weekIcons != null && widget.weekIcons!.isNotEmpty ? 5 : 8), defaultTextStyle: textTheme.copyWith( - color: widget.calendarTextColor ?? colors.textSubtle, + color: widget.calendarTextColor ?? colors.mainSubtle, ), weekendTextStyle: textTheme.copyWith( - color: widget.calendarTextColor ?? colors.textSubtle, + color: widget.calendarTextColor ?? colors.mainSubtle, ), holidayDecoration: BoxDecoration( - color: colors.warm.surface, + color: colors.surfaceWarm, shape: BoxShape.circle, ), - selectedTextStyle: textTheme.copyWith(color: colors.secondary.onColor), - outsideTextStyle: textTheme.copyWith(color: colors.textSubtle), - rangeStartTextStyle: textTheme.copyWith(color: colors.secondary.onColor), - rangeEndTextStyle: textTheme.copyWith(color: colors.secondary.onColor), - rangeHighlightColor: colors.secondary.surface, + selectedTextStyle: textTheme.copyWith(color: colors.mainSecondary.onColor), + outsideTextStyle: textTheme.copyWith(color: colors.mainSubtle), + rangeStartTextStyle: textTheme.copyWith(color: colors.mainSecondary.onColor), + rangeEndTextStyle: textTheme.copyWith(color: colors.mainSecondary.onColor), + rangeHighlightColor: colors.surfaceSecondary, rangeStartDecoration: BoxDecoration( - color: colors.secondary, + color: colors.mainSecondary, shape: BoxShape.circle, ), rangeEndDecoration: BoxDecoration( - color: colors.secondary, + color: colors.mainSecondary, shape: BoxShape.circle, ), markerDecoration: BoxDecoration( - color: colors.iconSubtle, + color: colors.mainSubtle, shape: BoxShape.circle, ), selectedDecoration: BoxDecoration( - color: colors.secondary, + color: colors.mainSecondary, shape: BoxShape.circle, ), todayTextStyle: textTheme, @@ -619,7 +613,7 @@ class _ZdsCalendarState extends State { child: Text( _focusedDay.format('MMMM', languageCode), style: Theme.of(context).textTheme.headlineMedium!.copyWith( - color: widget.calendarHeaderTextColor ?? colors.textSubtle, + color: widget.calendarHeaderTextColor ?? colors.mainSubtle, ), ), ), @@ -670,7 +664,7 @@ class _ZdsCalendarState extends State { child: Text( _focusedDay.format('yyyy', languageCode), style: Theme.of(context).textTheme.headlineMedium!.copyWith( - color: widget.calendarHeaderTextColor ?? colors.textSubtle, + color: widget.calendarHeaderTextColor ?? colors.mainSubtle, ), ), ), @@ -753,7 +747,7 @@ class _ZdsCalendarState extends State { widget.allCustomLabel ?? ComponentStrings.of(context).get('ALL', 'All'), style: Theme.of(context).textTheme.titleSmall!.copyWith( fontWeight: FontWeight.w500, - color: colors.textSubtle, + color: colors.mainSubtle, ), ), ), @@ -883,7 +877,7 @@ class _ZdsCalendarState extends State { label: week.semanticLabel, child: IconTheme( data: IconThemeData( - color: colors.iconDefault, + color: colors.mainDefault, size: context.isSmallScreen() ? 18 : 24, ), child: week.child, diff --git a/lib/src/components/organisms/camera/camera_page.dart b/lib/src/components/organisms/camera/camera_page.dart index 56aa3bfe..190e4618 100644 --- a/lib/src/components/organisms/camera/camera_page.dart +++ b/lib/src/components/organisms/camera/camera_page.dart @@ -372,7 +372,7 @@ class _CameraWrapperState extends State<_CameraWrapper> { child: AwesomeCircleWidget( theme: theme, size: 45, - child: const Icon(Icons.close, color: ZetaColorBase.white), + child: const Icon(Icons.close, color: Colors.white), ), ), const Spacer(), @@ -492,13 +492,13 @@ class _ElapsedTime extends StatelessWidget { final elapsedTimeStr = _formatDuration(elapsedTime); final totalTimeStr = totalTime != null ? _formatDuration(totalTime!) : null; return ZdsTag( - customBackgroundColor: ZetaColorBase.red, + customBackgroundColor: Zeta.of(context).colors.mainNegative, child: Text( totalTimeStr != null ? '$elapsedTimeStr/$totalTimeStr' : elapsedTimeStr, style: const TextStyle( fontSize: 14, fontWeight: FontWeight.w500, - color: ZetaColorBase.white, // Use the determined text color + color: Colors.white, // Use the determined text color ), ), ); @@ -664,10 +664,10 @@ class _CameraButtonPainter extends CustomPainter { ..isAntiAlias = true; final radius = size.width / 2; final center = Offset(size.width / 2, size.height / 2); - bgPainter.color = ZetaColorBase.white.withOpacity(.5); + bgPainter.color = Colors.white.withValues(alpha: .5); canvas.drawCircle(center, radius, bgPainter); - bgPainter.color = ZetaColorBase.white; + bgPainter.color = Colors.white; canvas.drawCircle(center, radius - 8, bgPainter); } @@ -687,11 +687,11 @@ class _VideoButtonPainter extends CustomPainter { ..isAntiAlias = true; final radius = size.width / 2; final center = Offset(size.width / 2, size.height / 2); - bgPainter.color = ZetaColorBase.white.withOpacity(.5); + bgPainter.color = Colors.white.withValues(alpha: .5); canvas.drawCircle(center, radius, bgPainter); if (isRecording) { - bgPainter.color = ZetaColorBase.red; + bgPainter.color = const ZetaPrimitivesLight().red; canvas.drawRRect( RRect.fromRectAndRadius( Rect.fromLTWH( @@ -705,7 +705,7 @@ class _VideoButtonPainter extends CustomPainter { bgPainter, ); } else { - bgPainter.color = ZetaColorBase.red; + bgPainter.color = const ZetaPrimitivesLight().red; canvas.drawCircle(center, radius - 8, bgPainter); } } @@ -794,14 +794,14 @@ class _PreviewActions extends StatelessWidget { shape: const CircleBorder(), backgroundColor: Colors.black38, onPressed: () async => _onPop(context, false), - child: const Icon(Icons.close, color: ZetaColorBase.white), + child: const Icon(Icons.close, color: Colors.white), ), FloatingActionButton( elevation: 0, shape: const CircleBorder(), backgroundColor: Colors.black38, onPressed: () async => _onPop(context, true), - child: const Icon(Icons.done, color: ZetaColorBase.white), + child: const Icon(Icons.done, color: Colors.white), ), ], ), diff --git a/lib/src/components/organisms/chat/audio_decoration.dart b/lib/src/components/organisms/chat/audio_decoration.dart index cba3201d..77c48e32 100644 --- a/lib/src/components/organisms/chat/audio_decoration.dart +++ b/lib/src/components/organisms/chat/audio_decoration.dart @@ -27,7 +27,7 @@ abstract class _AudioDecoration { /// Resolves the background color to the secondary container color if not defined Color resolveBackgroundColor(BuildContext context) { - return backgroundColor ?? Theme.of(context).colorScheme.secondaryContainer; + return backgroundColor ?? Zeta.of(context).colors.mainPrimary; } /// Resolves the foreground color to the on secondary container color if not defined @@ -118,12 +118,12 @@ class ZdsAudioRecorderDecoration extends _AudioDecoration { /// Resolves the microphone icon color to orange if not defined Color resolveMicIconTint(BuildContext context) { - return micIconTint ?? Zeta.of(context).colors.orange; + return micIconTint ?? Zeta.of(context).colors.mainWarning; } /// Resolves the send icon color to the secondary color if not defined Color resolveSendIconTint(BuildContext context) { - return sendIconTint ?? Theme.of(context).colorScheme.secondary; + return sendIconTint ?? Zeta.of(context).colors.mainSecondary; } /// Copies the given properties into a new [ZdsAudioRecorderDecoration] diff --git a/lib/src/components/organisms/chat/audio_player.dart b/lib/src/components/organisms/chat/audio_player.dart index e3c7d51c..936a2cfd 100644 --- a/lib/src/components/organisms/chat/audio_player.dart +++ b/lib/src/components/organisms/chat/audio_player.dart @@ -239,7 +239,7 @@ class ZdsAudioPlayerState extends State { final backgroundColor = widget.decoration.resolveBackgroundColor(context); final thumbColor = widget.decoration.resolveThumbColor(context); final waveColor = widget.decoration.resolveWaveColor(context); - final inactiveTrackColor = backgroundColor.withOpacity(0.5); + final inactiveTrackColor = backgroundColor.withValues(alpha: 0.5); return Material( color: backgroundColor, @@ -253,7 +253,7 @@ class ZdsAudioPlayerState extends State { IconButton( icon: Icon( playing ? Icons.pause_circle_outline : Icons.play_circle_outline, - color: !_disabled ? foregroundColor : foregroundColor.withOpacity(0.5), + color: !_disabled ? foregroundColor : foregroundColor.withValues(alpha: 0.5), ), onPressed: !_disabled ? playing @@ -353,14 +353,14 @@ class _PlaybackProgress extends StatelessWidget { child: SliderTheme( data: SliderTheme.of(context).copyWith( activeTrackColor: Colors.transparent, - inactiveTrackColor: backgroundColor.withOpacity(0.4), + inactiveTrackColor: backgroundColor.withValues(alpha: 0.4), trackShape: const RectangularSliderTrackShape(), thumbShape: enabled ? const RoundSliderThumbShape() : SliderComponentShape.noThumb, trackHeight: box.maxHeight, thumbColor: thumbColor, disabledThumbColor: thumbColor, disabledActiveTrackColor: Colors.transparent, - disabledInactiveTrackColor: backgroundColor.withOpacity(0.4), + disabledInactiveTrackColor: backgroundColor.withValues(alpha: 0.4), ), child: Slider( value: min(value, maxValue), diff --git a/lib/src/components/organisms/chat/audio_recorder.dart b/lib/src/components/organisms/chat/audio_recorder.dart index 847c79e6..27e8ae64 100644 --- a/lib/src/components/organisms/chat/audio_recorder.dart +++ b/lib/src/components/organisms/chat/audio_recorder.dart @@ -125,7 +125,7 @@ class ZdsVoiceNoteRecorderState extends State { _waveform.add(0); }); if (_duration >= widget.maxDuration.inMilliseconds) { - stop(); + unawaited(stop()); } }); } else { @@ -271,11 +271,11 @@ class ZdsVoiceNoteRecorderState extends State { }, child: CircleAvatar( backgroundColor: widget.recorderDecoration.resolveMicIconTint(context), - foregroundColor: zetaColors.surfacePrimary, + foregroundColor: zetaColors.surfaceDefault, radius: 27.5, child: Icon( _isRecording ? Icons.pause : Icons.mic, - color: zetaColors.surfacePrimary, + color: zetaColors.surfaceDefault, size: 30, ), ), diff --git a/lib/src/components/organisms/chat/message_body/attachment.dart b/lib/src/components/organisms/chat/message_body/attachment.dart index ffbf1003..6dba9629 100644 --- a/lib/src/components/organisms/chat/message_body/attachment.dart +++ b/lib/src/components/organisms/chat/message_body/attachment.dart @@ -48,8 +48,8 @@ class ZdsChatAttachmentWidget extends StatelessWidget { height: 80, margin: const EdgeInsets.all(12), decoration: BoxDecoration( - color: colors.surfacePrimary, - borderRadius: zeta.radius.rounded, + color: colors.surfaceDefault, + borderRadius: BorderRadius.all(zeta.radius.rounded), border: Border.all(color: colors.borderSubtle), ), child: Column( @@ -71,17 +71,17 @@ class ZdsChatAttachmentWidget extends StatelessWidget { children: [ Text( ComponentStrings.of(context).get('SHARE_FILE', 'Shared a file:'), - style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: colors.textSubtle), + style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: colors.mainSubtle), ), const SizedBox.square(dimension: 2), Text( _fileName, - style: Theme.of(context).textTheme.bodyLarge?.copyWith(color: colors.textDefault), + style: Theme.of(context).textTheme.bodyLarge?.copyWith(color: colors.mainDefault), maxLines: 3, overflow: TextOverflow.ellipsis, ), const SizedBox.square(dimension: 12), - Icon(ZdsIcons.download, size: 20, color: colors.iconSubtle), + Icon(ZdsIcons.download, size: 20, color: colors.mainSubtle), ], ), ), diff --git a/lib/src/components/organisms/chat/message_body/chat_message.dart b/lib/src/components/organisms/chat/message_body/chat_message.dart index ccd760d5..a80705ce 100644 --- a/lib/src/components/organisms/chat/message_body/chat_message.dart +++ b/lib/src/components/organisms/chat/message_body/chat_message.dart @@ -113,11 +113,11 @@ class ZdsChatMessage extends StatelessWidget { ZetaColorSwatch _getColor(BuildContext context) { final colors = Zeta.of(context).colors; if (highlight) { - return colors.yellow; + return colors.primitives.yellow; } else if (isLocalUser) { - return colors.secondary; + return colors.primitives.primary; } else { - return colors.cool; + return colors.primitives.cool; } } @@ -193,7 +193,7 @@ class ZdsChatMessage extends StatelessWidget { style: Theme.of(context) .textTheme .titleSmall - ?.copyWith(color: message.senderColor ?? Zeta.of(context).colors.textDefault), + ?.copyWith(color: message.senderColor ?? Zeta.of(context).colors.mainDefault), ), ), ), @@ -206,8 +206,8 @@ class ZdsChatMessage extends StatelessWidget { child: AnimatedContainer( duration: const Duration(milliseconds: 500), decoration: BoxDecoration( - color: color.surface, - border: Border.all(color: color.subtle), + color: color.shade10, + border: Border.all(color: color.shade50), borderRadius: _borderRadius, ), child: Material( diff --git a/lib/src/components/organisms/chat/message_body/chat_utils.dart b/lib/src/components/organisms/chat/message_body/chat_utils.dart index 4c822040..8de253bf 100644 --- a/lib/src/components/organisms/chat/message_body/chat_utils.dart +++ b/lib/src/components/organisms/chat/message_body/chat_utils.dart @@ -296,7 +296,7 @@ class ZdsMessage { /// Optional custom color used to display sender name. /// - /// Defaults to using [ZetaColors.textDefault]. + /// Defaults to using [ZetaColors.mainDefault]. final Color? senderColor; /// [ZdsChatMessageStatus] of message. diff --git a/lib/src/components/organisms/chat/message_body/deleted.dart b/lib/src/components/organisms/chat/message_body/deleted.dart index ede60de0..940cbc20 100644 --- a/lib/src/components/organisms/chat/message_body/deleted.dart +++ b/lib/src/components/organisms/chat/message_body/deleted.dart @@ -24,7 +24,7 @@ class ZdsChatDeletedText extends StatelessWidget { style: Theme.of(context) .textTheme .bodyLarge - ?.copyWith(fontStyle: FontStyle.italic, color: Zeta.of(context).colors.textSubtle), + ?.copyWith(fontStyle: FontStyle.italic, color: Zeta.of(context).colors.mainSubtle), ), ); } diff --git a/lib/src/components/organisms/chat/message_body/file_preview.dart b/lib/src/components/organisms/chat/message_body/file_preview.dart index 0786412b..9fb44513 100644 --- a/lib/src/components/organisms/chat/message_body/file_preview.dart +++ b/lib/src/components/organisms/chat/message_body/file_preview.dart @@ -86,7 +86,7 @@ class _ZdsChatFilePreviewState extends State { child: Row( mainAxisSize: MainAxisSize.min, children: [ - Icon(ZdsIcons.download, size: 24, color: Zeta.of(context).colors.iconSubtle), + Icon(ZdsIcons.download, size: 24, color: Zeta.of(context).colors.mainSubtle), const SizedBox.square(dimension: 10), Text( ComponentStrings.of(context).get('DOWNLOAD', 'Download'), @@ -126,7 +126,7 @@ class _ZdsChatFilePreviewState extends State { ? widget.attachment.content : null, imageUrl: widget.attachment.type == ZdsChatAttachmentType.imageNetwork - ? widget.attachment.content + ? widget.attachment.content ?? widget.attachment.url.toString() : null, body: heroWidget, ), @@ -234,12 +234,12 @@ class __VideoState extends State<_Video> { : await _videoController!.play(); setState(() {}); }, - backgroundColor: Zeta.of(context).colors.cool.shade30.withOpacity(0.7), - hoverColor: Zeta.of(context).colors.cool.shade30.withOpacity(0.5), + backgroundColor: Zeta.of(context).colors.primitives.cool.shade30.withValues(alpha: 0.7), + hoverColor: Zeta.of(context).colors.primitives.cool.shade30.withValues(alpha: 0.5), hoverElevation: 0, child: Icon( _videoController!.value.isPlaying ? Icons.pause : Icons.play_arrow, - color: Zeta.of(context).colors.cool.shade30.onColor, + color: Zeta.of(context).colors.primitives.cool.shade30.onColor, ), ), ), @@ -275,7 +275,7 @@ class _FullScreenViewer extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - backgroundColor: Colors.black.withOpacity(0.8), + backgroundColor: Colors.black.withValues(alpha: 0.8), extendBodyBehindAppBar: true, appBar: AppBar( backgroundColor: Colors.black, @@ -293,13 +293,13 @@ class _FullScreenViewer extends StatelessWidget { const Base64Decoder().convert(imageBytes!.base64!), mimeType: imageBytes!.base64Extension, ); - await Share.shareXFiles([image]); + await SharePlus.instance.share(ShareParams(files: [image])); } if (imagePath != null) { - await Share.shareXFiles([XFile(imagePath!)]); + await SharePlus.instance.share(ShareParams(files: [XFile(imagePath!)])); } if (imageUrl != null) { - await Share.shareUri(Uri.parse(imageUrl!)); + await SharePlus.instance.share(ShareParams(uri: Uri.parse(imageUrl!))); } } : null, diff --git a/lib/src/components/organisms/chat/message_body/forwarded.dart b/lib/src/components/organisms/chat/message_body/forwarded.dart index a7b3a065..cc2a31e8 100644 --- a/lib/src/components/organisms/chat/message_body/forwarded.dart +++ b/lib/src/components/organisms/chat/message_body/forwarded.dart @@ -17,13 +17,13 @@ class ZdsChatForwarded extends StatelessWidget { children: [ Icon( ZdsIcons.email_forward, - color: zetaColors.iconSubtle, + color: zetaColors.mainSubtle, size: 16, ), const SizedBox(width: 4), Text( ComponentStrings.of(context).get('FORWARDED', 'Forwarded'), - style: Theme.of(context).textTheme.bodySmall?.copyWith(color: zetaColors.textSubtle), + style: Theme.of(context).textTheme.bodySmall?.copyWith(color: zetaColors.mainSubtle), ), ], ), diff --git a/lib/src/components/organisms/chat/message_body/link_preview.dart b/lib/src/components/organisms/chat/message_body/link_preview.dart index 79b3e010..7b3a15f3 100644 --- a/lib/src/components/organisms/chat/message_body/link_preview.dart +++ b/lib/src/components/organisms/chat/message_body/link_preview.dart @@ -92,9 +92,9 @@ class _ZdsChatLinkPreviewState extends State { final colors = Zeta.of(context).colors; return Shimmer.fromColors( - baseColor: colors.warm.shade40, - highlightColor: colors.warm.shade60, - child: Container(height: 16, color: colors.white), + baseColor: colors.primitives.warm.shade40, + highlightColor: colors.primitives.warm.shade60, + child: Container(height: 16, color: Colors.white), ); } @@ -113,7 +113,7 @@ class _ZdsChatLinkPreviewState extends State { } return Text( text, - style: Theme.of(context).textTheme.bodySmall?.copyWith(color: Zeta.of(context).colors.textSubtle), + style: Theme.of(context).textTheme.bodySmall?.copyWith(color: Zeta.of(context).colors.mainSubtle), ); } @@ -132,7 +132,7 @@ class _ZdsChatLinkPreviewState extends State { borderRadius: const BorderRadius.all(Radius.circular(6)), child: Container( decoration: BoxDecoration( - color: Zeta.of(context).colors.warm.shade30.withOpacity(0.2), + color: Zeta.of(context).colors.primitives.warm.shade30.withValues(alpha: 0.2), borderRadius: const BorderRadius.all(Radius.circular(6)), ), padding: const EdgeInsets.all(14), @@ -144,7 +144,8 @@ class _ZdsChatLinkPreviewState extends State { Container( width: 40, height: 40, - decoration: BoxDecoration(color: zetaColors.secondary.shade10, shape: BoxShape.circle), + decoration: + BoxDecoration(color: zetaColors.primitives.secondary.shade10, shape: BoxShape.circle), child: buildImage, ), Expanded( diff --git a/lib/src/components/organisms/chat/message_body/reacts_tags.dart b/lib/src/components/organisms/chat/message_body/reacts_tags.dart index 2a78a29e..1259720d 100644 --- a/lib/src/components/organisms/chat/message_body/reacts_tags.dart +++ b/lib/src/components/organisms/chat/message_body/reacts_tags.dart @@ -109,12 +109,12 @@ class _ChatReactionsPill extends StatelessWidget { borderRadius: const BorderRadius.all(Radius.circular(10)), boxShadow: [ BoxShadow( - color: Theme.of(context).colorScheme.shadow.withOpacity(0.1), + color: Theme.of(context).colorScheme.shadow.withValues(alpha: 0.1), blurRadius: 1, offset: const Offset(0, 1), ), ], - color: zetaColors.surfacePrimary, + color: zetaColors.surfaceDefault, border: Border.all(color: zetaColors.borderSubtle), ), child: Row( @@ -131,7 +131,7 @@ class _ChatReactionsPill extends StatelessWidget { ExcludeSemantics( child: Text( reactionsAmount, - style: Theme.of(context).textTheme.labelSmall?.copyWith(color: zetaColors.textSubtle), + style: Theme.of(context).textTheme.labelSmall?.copyWith(color: zetaColors.mainSubtle), ), ), const SizedBox(width: 6), @@ -217,23 +217,23 @@ class _ChatTagsPill extends StatelessWidget { borderRadius: const BorderRadius.all(Radius.circular(10)), boxShadow: [ BoxShadow( - color: Theme.of(context).colorScheme.shadow.withOpacity(0.1), + color: Theme.of(context).colorScheme.shadow.withValues(alpha: 0.1), blurRadius: 1, offset: const Offset(0, 1), ), ], - color: zetaColors.secondary, + color: zetaColors.mainSecondary, ), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 5), child: Row( children: [ - Icon(ZdsIcons.tag, size: 10, color: zetaColors.secondary.onColor), + Icon(ZdsIcons.tag, size: 10, color: zetaColors.mainSecondary.onColor), const SizedBox(width: 4), ExcludeSemantics( child: Text( tags.length < 10 ? tags.length.toString() : '9+', - style: Theme.of(context).textTheme.labelSmall?.copyWith(color: zetaColors.secondary.onColor), + style: Theme.of(context).textTheme.labelSmall?.copyWith(color: zetaColors.mainSecondary.onColor), ), ), ], diff --git a/lib/src/components/organisms/chat/message_body/read_receipt.dart b/lib/src/components/organisms/chat/message_body/read_receipt.dart index 583d137f..e9d3a8f7 100644 --- a/lib/src/components/organisms/chat/message_body/read_receipt.dart +++ b/lib/src/components/organisms/chat/message_body/read_receipt.dart @@ -43,7 +43,7 @@ class ZdsReadReceipt extends StatelessWidget { children: [ Text( timeString, - style: themeData.textTheme.bodySmall?.copyWith(color: zetaColors.textSubtle, fontWeight: FontWeight.w500), + style: themeData.textTheme.bodySmall?.copyWith(color: zetaColors.mainSubtle, fontWeight: FontWeight.w500), ), if (isLocalUser) const SizedBox(width: 6), if (isLocalUser && status != ZdsChatMessageStatus.notSent && !messageDeleted) @@ -52,7 +52,7 @@ class ZdsReadReceipt extends StatelessWidget { ? Icons.done_all : Icons.done, size: 16, - color: status == ZdsChatMessageStatus.read ? themeData.colorScheme.secondary : zetaColors.iconSubtle, + color: status == ZdsChatMessageStatus.read ? themeData.colorScheme.secondary : zetaColors.mainSubtle, ), ], ), diff --git a/lib/src/components/organisms/chat/message_body/reply.dart b/lib/src/components/organisms/chat/message_body/reply.dart index 0f37b827..b410c3e0 100644 --- a/lib/src/components/organisms/chat/message_body/reply.dart +++ b/lib/src/components/organisms/chat/message_body/reply.dart @@ -25,14 +25,14 @@ class ZdsChatReplyMessageBody extends StatelessWidget { child: ClipRRect( borderRadius: BorderRadius.circular(6), child: ColoredBox( - color: zetaColors.warm.shade40, + color: zetaColors.primitives.warm.shade40, child: Stack( children: [ Positioned( top: 0, bottom: 0, left: 0, - child: Container(color: zetaColors.iconSubtle, width: 4), + child: Container(color: zetaColors.mainSubtle, width: 4), ), Padding( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), diff --git a/lib/src/components/organisms/chat/message_body/text.dart b/lib/src/components/organisms/chat/message_body/text.dart index e1200752..66c3152c 100644 --- a/lib/src/components/organisms/chat/message_body/text.dart +++ b/lib/src/components/organisms/chat/message_body/text.dart @@ -46,14 +46,14 @@ class ZdsChatTextMessage extends StatelessWidget { [...urls].map((e) { return MapEntry( e, - HighlightedWord(textStyle: textStyle?.apply(color: zetaColors.blue.shade70), onTap: onLinkTapped), + HighlightedWord(textStyle: textStyle?.apply(color: zetaColors.primitives.blue.shade70), onTap: onLinkTapped), ); }), ); if (searchTerm != null && searchTerm!.isNotEmpty) { wordsMapping[searchTerm!] = HighlightedWord( - decoration: BoxDecoration(color: zetaColors.yellow, borderRadius: BorderRadius.circular(2)), + decoration: BoxDecoration(color: zetaColors.primitives.yellow, borderRadius: BorderRadius.circular(2)), ); } return Padding( diff --git a/lib/src/components/organisms/chat/message_input.dart b/lib/src/components/organisms/chat/message_input.dart index 04c2e55c..869d79f7 100644 --- a/lib/src/components/organisms/chat/message_input.dart +++ b/lib/src/components/organisms/chat/message_input.dart @@ -260,7 +260,7 @@ class ZdsMessageInputState extends State with SingleTickerProvi if (mounted) { return showZdsBottomSheet( enforceSheet: true, - backgroundColor: Zeta.of(context).colors.surfacePrimary, + backgroundColor: Zeta.of(context).colors.surfaceDefault, context: context, builder: (context) { return SingleChildScrollView( @@ -284,7 +284,7 @@ class ZdsMessageInputState extends State with SingleTickerProvi final recordingPath = recorderKey.currentState?.recordingDestination; if (recordingPath != null) { final recording = File(recordingPath); - if (recording.existsSync()) recording.delete(); + if (recording.existsSync()) unawaited(recording.delete()); } } return value; @@ -305,14 +305,14 @@ class ZdsMessageInputState extends State with SingleTickerProvi boxShadow: [ BoxShadow( offset: const Offset(0, -1), - color: Theme.of(context).colorScheme.shadow.withOpacity(0.1), + color: Theme.of(context).colorScheme.shadow.withValues(alpha: 0.1), blurRadius: 2, ), - BoxShadow(offset: const Offset(0, 1), color: zetaColors.surfacePrimary, blurRadius: 2), + BoxShadow(offset: const Offset(0, 1), color: zetaColors.surfaceDefault, blurRadius: 2), ], ), child: Material( - color: zetaColors.surfacePrimary, + color: zetaColors.surfaceDefault, child: AnimatedSize( duration: const Duration(milliseconds: 250), child: Row( @@ -321,7 +321,7 @@ class ZdsMessageInputState extends State with SingleTickerProvi IconButton( padding: EdgeInsets.zero, icon: const Icon(ZdsIcons.add), - color: zetaColors.iconSubtle, + color: zetaColors.mainSubtle, tooltip: ComponentStrings.of(context).get( 'EXPAND_MESSAGE_OPTIONS', 'Expand message options', @@ -388,7 +388,7 @@ class ZdsMessageInputState extends State with SingleTickerProvi ), if (widget.allowVoiceNotes && !kIsWeb) IconButton( - icon: Icon(Icons.mic, size: 24, color: zetaColors.iconSubtle), + icon: Icon(Icons.mic, size: 24, color: zetaColors.mainSubtle), tooltip: ComponentStrings.of(context).get( 'ADD_VOICE_NOTE', 'Add voice note', @@ -454,7 +454,7 @@ class ZdsMessageInputState extends State with SingleTickerProvi unawaited( showZdsBottomSheet( enforceSheet: widget.enforceSheet, - backgroundColor: zetaColors.surfacePrimary, + backgroundColor: zetaColors.surfaceDefault, context: context, maxHeight: maxSheetHeight, builder: (_) { @@ -475,7 +475,7 @@ class ZdsMessageInputState extends State with SingleTickerProvi container: true, child: Text( widget.addAttachment ?? ComponentStrings.of(context).get('ADD', 'Add'), - style: ZetaTextStyles.h5, + style: Zeta.of(context).textStyles.h5, overflow: TextOverflow.ellipsis, ), ), @@ -485,7 +485,7 @@ class ZdsMessageInputState extends State with SingleTickerProvi child: IconButton( icon: const Icon(ZdsIcons.close, size: 20), onPressed: Navigator.of(context).pop, - color: zetaColors.iconSubtle, + color: zetaColors.mainSubtle, splashRadius: 24, ), ), diff --git a/lib/src/components/organisms/date_range.dart b/lib/src/components/organisms/date_range.dart index 2db3c223..810251c5 100644 --- a/lib/src/components/organisms/date_range.dart +++ b/lib/src/components/organisms/date_range.dart @@ -4,11 +4,6 @@ import 'package:intl/intl.dart'; import '../../../../zds_flutter.dart'; -/// A date range selector that also allows to quickly change the range selected by jumping to the next or -/// previous set of dates. -@Deprecated('Use ZdsDateRange instead') -typedef DateRange = ZdsDateRange; - /// A date range selector that also allows to quickly change the range selected by jumping to the next or /// previous set of dates. /// diff --git a/lib/src/components/organisms/date_range_picker_tile.dart b/lib/src/components/organisms/date_range_picker_tile.dart index 255fe703..d61c1d7b 100644 --- a/lib/src/components/organisms/date_range_picker_tile.dart +++ b/lib/src/components/organisms/date_range_picker_tile.dart @@ -534,7 +534,7 @@ class _DateField extends StatelessWidget { isInitialDate ? ComponentStrings.of(context).get('FROM', 'From') : ComponentStrings.of(context).get('TO', 'To'), - style: Theme.of(context).textTheme.bodySmall?.copyWith(color: zetaColors.textSubtle), + style: Theme.of(context).textTheme.bodySmall?.copyWith(color: zetaColors.mainSubtle), ).paddingOnly(left: 2), InkWell( onTap: () async { @@ -589,7 +589,7 @@ class _DateField extends StatelessWidget { ), Icon( ZdsIcons.calendar, - color: zetaColors.iconSubtle, + color: zetaColors.mainSubtle, size: 22, ), ], diff --git a/lib/src/components/organisms/day_picker.dart b/lib/src/components/organisms/day_picker.dart index fdff9a11..d9848d0a 100644 --- a/lib/src/components/organisms/day_picker.dart +++ b/lib/src/components/organisms/day_picker.dart @@ -276,7 +276,7 @@ class _ZdsDayPickerState extends State { if (widget.header != null) Text( widget.header!, - style: Theme.of(context).textTheme.titleSmall?.copyWith(color: Zeta.of(context).colors.textDefault), + style: Theme.of(context).textTheme.titleSmall?.copyWith(color: Zeta.of(context).colors.mainDefault), ).paddingOnly(left: 6), if (widget.allowMultiSelect) SizedBox( diff --git a/lib/src/components/organisms/file_picker/file_picker.dart b/lib/src/components/organisms/file_picker/file_picker.dart index 99a8d9d6..d2b3ab7a 100644 --- a/lib/src/components/organisms/file_picker/file_picker.dart +++ b/lib/src/components/organisms/file_picker/file_picker.dart @@ -43,10 +43,6 @@ typedef ZdsFileValidator = Future Function( ZdsFilePickerOptions option, ); -/// The configuration used in a [ZdsFilePicker]. -@Deprecated('Use ZdsFilePickerConfig instead of FilePickerConfig.') -typedef FilePickerConfig = ZdsFilePickerConfig; - /// The configuration used in a [ZdsFilePicker]. /// /// [maxPixelSize] is used to set a maximum side dimension for an image. For example, if the [maxPixelSize] is 500, @@ -482,14 +478,14 @@ class ZdsFilePickerState extends State with AutomaticKeepAliveCli Icon( option.icon, size: 24 + ((widget.visualDensity?.horizontal ?? 0) * 4), - color: zetaColors.iconSubtle, + color: zetaColors.mainSubtle, ), const SizedBox(width: 20), Text( option.getLabel(context), maxLines: 1, overflow: TextOverflow.ellipsis, - style: style?.copyWith(color: zetaColors.textDefault), + style: style?.copyWith(color: zetaColors.mainDefault), textScaler: MediaQuery.textScalerOf(context).clamp(maxScaleFactor: 2.7), ).semantics(identifier: option.getLabel(context)), ], @@ -951,7 +947,7 @@ extension on ZdsFilePickerState { Icon( option.icon, size: 24 + ((widget.visualDensity?.vertical ?? 0) * 4), - color: zetaColors.iconSubtle, + color: zetaColors.mainSubtle, ), if (widget.optionDisplay == ZdsOptionDisplay.standard) ...[ SizedBox(height: 10 + ((widget.visualDensity?.vertical ?? 0) * 4)), @@ -959,7 +955,7 @@ extension on ZdsFilePickerState { option.getLabel(context), maxLines: 1, overflow: TextOverflow.ellipsis, - style: style?.copyWith(color: zetaColors.textSubtle), + style: style?.copyWith(color: zetaColors.mainSubtle), textScaler: MediaQuery.textScalerOf(context).clamp(maxScaleFactor: 2.7), ), ], diff --git a/lib/src/components/organisms/file_picker/file_wrapper.dart b/lib/src/components/organisms/file_picker/file_wrapper.dart index d32dd396..d6bd2209 100644 --- a/lib/src/components/organisms/file_picker/file_wrapper.dart +++ b/lib/src/components/organisms/file_picker/file_wrapper.dart @@ -13,12 +13,6 @@ import 'package:mime/mime.dart' as mime; import 'package:path/path.dart' as path; import 'file_picker.dart'; -/// Extension on FilePickerException to show message - -/// Types of files the [ZdsFilePicker] can be used to pick. -@Deprecated('Use ZdsFilePickerOptions instead of FilePickerOptions.') -typedef FilePickerOptions = ZdsFilePickerOptions; - /// Types of files the [ZdsFilePicker] can be used to pick. enum ZdsFilePickerOptions { /// Opens native video file picker. @@ -40,10 +34,6 @@ enum ZdsFilePickerOptions { GIF } -/// Wrapper around files picked using [ZdsFilePicker]. -@Deprecated('Use ZdsFileWrapper instead of FileWrapper.') -typedef FileWrapper = ZdsFileWrapper; - /// Wrapper around files picked using [ZdsFilePicker]. @immutable class ZdsFileWrapper { diff --git a/lib/src/components/organisms/file_picker/giphy_picker.dart b/lib/src/components/organisms/file_picker/giphy_picker.dart index 57395263..b0fb24d9 100644 --- a/lib/src/components/organisms/file_picker/giphy_picker.dart +++ b/lib/src/components/organisms/file_picker/giphy_picker.dart @@ -146,7 +146,7 @@ class _ZdsGiphyPickerState extends State { ] : [], ), - backgroundColor: Zeta.of(context).colors.surfaceTertiary, + backgroundColor: Zeta.of(context).colors.surfaceDefault, body: LayoutBuilder( builder: (BuildContext context, BoxConstraints box) { return Column( diff --git a/lib/src/components/organisms/file_preview.dart b/lib/src/components/organisms/file_preview.dart index 3e2a09dc..0931be8d 100644 --- a/lib/src/components/organisms/file_preview.dart +++ b/lib/src/components/organisms/file_preview.dart @@ -92,7 +92,7 @@ class ZdsFilePreview extends StatelessWidget { padding: EdgeInsets.zero, splashRadius: 24, visualDensity: VisualDensity.compact, - icon: Icon(ZdsIcons.close_circle, size: 24, color: Zeta.of(context).colors.error), + icon: Icon(ZdsIcons.close_circle, size: 24, color: Zeta.of(context).colors.mainNegative), onPressed: onDelete, ), ), @@ -180,7 +180,7 @@ class ZdsFileSize extends StatelessWidget { Widget _sizeText(BuildContext context, int size) { return Text( fileSizeWithUnit(size), - style: Theme.of(context).textTheme.bodySmall?.copyWith(color: Zeta.of(context).colors.textSubtle), + style: Theme.of(context).textTheme.bodySmall?.copyWith(color: Zeta.of(context).colors.mainSubtle), ); } diff --git a/lib/src/components/organisms/fiscal_date_picker.dart b/lib/src/components/organisms/fiscal_date_picker.dart index 26ff7475..92e8dc1b 100644 --- a/lib/src/components/organisms/fiscal_date_picker.dart +++ b/lib/src/components/organisms/fiscal_date_picker.dart @@ -165,8 +165,8 @@ class _ZdsDatePickerDialogState extends State { lastDay: widget.lastDate, calendarRowHeight: orientation == Orientation.portrait ? 44 : 38, headerPadding: EdgeInsets.zero, - calendarHeaderIconColor: Zeta.of(context).colors.iconDefault, - calendarHeaderTextColor: Zeta.of(context).colors.textSubtle, + calendarHeaderIconColor: Zeta.of(context).colors.mainDefault, + calendarHeaderTextColor: Zeta.of(context).colors.mainSubtle, startingDayOfWeek: _getStartingDayOfWeek(widget.startDayOfWeek), onDaySelected: (selectedDay, focusedDay) { setState(() { diff --git a/lib/src/components/organisms/html_preview/html_body.dart b/lib/src/components/organisms/html_preview/html_body.dart index d56f337d..9bd2b731 100644 --- a/lib/src/components/organisms/html_preview/html_body.dart +++ b/lib/src/components/organisms/html_preview/html_body.dart @@ -196,21 +196,22 @@ class ZdsHtml extends StatelessWidget { margin: Margins.zero, padding: HtmlPaddings.symmetric(horizontal: 14, vertical: 8), border: Border(left: BorderSide(color: zetaColors.borderDisabled, width: 4)), - color: zetaColors.textSubtle, + color: zetaColors.mainSubtle, ), 'pre': Style( margin: Margins.zero, padding: HtmlPaddings.all(14), - backgroundColor: zetaColors.surfaceTertiary, + backgroundColor: zetaColors.surfaceDefault, lineHeight: LineHeight.percent(100), - color: zetaColors.primary.selected, + color: zetaColors.statePrimarySelected, ), 'code': Style( margin: Margins.zero, - backgroundColor: zetaColors.surfaceTertiary, + backgroundColor: zetaColors.surfaceDefault, lineHeight: LineHeight.percent(100), - color: zetaColors.primary, + color: zetaColors.mainPrimary, ), + 'strong': Style(color: zetaColors.mainDefault), ...style, }; } diff --git a/lib/src/components/organisms/html_preview/html_container.dart b/lib/src/components/organisms/html_preview/html_container.dart index 0af8768c..e28de0eb 100644 --- a/lib/src/components/organisms/html_preview/html_container.dart +++ b/lib/src/components/organisms/html_preview/html_container.dart @@ -323,13 +323,13 @@ class _ZdsHtmlContainerState extends State with FrameCallbackM begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ - surfaceColor.surface.withOpacity(0.3), - surfaceColor.surface.withOpacity(0.4), - surfaceColor.surface.withOpacity(0.5), - surfaceColor.surface.withOpacity(0.6), - surfaceColor.surface.withOpacity(0.7), - surfaceColor.surface.withOpacity(0.8), - surfaceColor.surface.withOpacity(0.9), + surfaceColor.surface.withValues(alpha: 0.3), + surfaceColor.surface.withValues(alpha: 0.4), + surfaceColor.surface.withValues(alpha: 0.5), + surfaceColor.surface.withValues(alpha: 0.6), + surfaceColor.surface.withValues(alpha: 0.7), + surfaceColor.surface.withValues(alpha: 0.8), + surfaceColor.surface.withValues(alpha: 0.9), surfaceColor.surface, ], ), diff --git a/lib/src/components/organisms/html_preview/table_html_extension.dart b/lib/src/components/organisms/html_preview/table_html_extension.dart index ffa9c0e9..483c4f54 100644 --- a/lib/src/components/organisms/html_preview/table_html_extension.dart +++ b/lib/src/components/organisms/html_preview/table_html_extension.dart @@ -269,7 +269,7 @@ class ZdsTableHtmlExtension extends HtmlExtension { children: children, href: context.attributes['href'], style: Style( - color: ZetaColorBase.blue.shade50, + color: const ZetaPrimitivesLight().blue.shade50, textDecoration: TextDecoration.underline, ), node: context.node, diff --git a/lib/src/components/organisms/html_preview/video_html_extension.dart b/lib/src/components/organisms/html_preview/video_html_extension.dart index 91c5c9f5..33ab902c 100644 --- a/lib/src/components/organisms/html_preview/video_html_extension.dart +++ b/lib/src/components/organisms/html_preview/video_html_extension.dart @@ -38,7 +38,7 @@ class ZdsVideoHtmlExtension extends HtmlExtension { builder: (BuildContext ctx, BoxConstraints box) { return DecoratedBox( decoration: BoxDecoration( - border: Border.all(color: Theme.of(ctx).colorScheme.onSurface.withOpacity(0.4), width: 0.5), + border: Border.all(color: Theme.of(ctx).colorScheme.onSurface.withValues(alpha: 0.4), width: 0.5), ), child: ZdsVideoWidget( context: context, diff --git a/lib/src/components/organisms/image_editor/pages/draw_page.dart b/lib/src/components/organisms/image_editor/pages/draw_page.dart index df6ac565..84d79421 100644 --- a/lib/src/components/organisms/image_editor/pages/draw_page.dart +++ b/lib/src/components/organisms/image_editor/pages/draw_page.dart @@ -158,7 +158,7 @@ class _DrawPageState extends State { isSelected: selectedTab == DrawOptions.pen, icon: Icon( Icons.edit, - color: selectedTab == DrawOptions.pen ? zetaColors.primary : null, + color: selectedTab == DrawOptions.pen ? zetaColors.mainPrimary : null, ), label: strings.get('PEN', 'Pen'), onPressed: () { @@ -175,7 +175,7 @@ class _DrawPageState extends State { isSelected: selectedTab == DrawOptions.highlight, icon: Icon( Icons.highlight, - color: selectedTab == DrawOptions.highlight ? zetaColors.primary : null, + color: selectedTab == DrawOptions.highlight ? zetaColors.mainPrimary : null, ), label: strings.get('HIGHLIGHT', 'Highlight'), onPressed: () { diff --git a/lib/src/components/organisms/image_editor/pages/draw_shape_page.dart b/lib/src/components/organisms/image_editor/pages/draw_shape_page.dart index 1d9a9f98..cc1aab43 100644 --- a/lib/src/components/organisms/image_editor/pages/draw_shape_page.dart +++ b/lib/src/components/organisms/image_editor/pages/draw_shape_page.dart @@ -172,7 +172,7 @@ class _DrawShapePageState extends State { isSelected: _selectedShapeType == ShapeType.square, icon: Icon( Icons.square_outlined, - color: _selectedShapeType == ShapeType.square ? zetaColors.primary : null, + color: _selectedShapeType == ShapeType.square ? zetaColors.mainPrimary : null, ), label: strings.get('SQUARE', 'Square'), onPressed: () { @@ -185,7 +185,7 @@ class _DrawShapePageState extends State { isSelected: _selectedShapeType == ShapeType.circle, icon: Icon( Icons.circle_outlined, - color: _selectedShapeType == ShapeType.circle ? zetaColors.primary : null, + color: _selectedShapeType == ShapeType.circle ? zetaColors.mainPrimary : null, ), label: strings.get('CIRCLE', 'Circle'), onPressed: () { @@ -198,7 +198,7 @@ class _DrawShapePageState extends State { isSelected: _selectedShapeType == ShapeType.arrow, icon: Icon( Icons.arrow_forward, - color: _selectedShapeType == ShapeType.arrow ? zetaColors.primary : null, + color: _selectedShapeType == ShapeType.arrow ? zetaColors.mainPrimary : null, ), label: strings.get('ARROW', 'Arrow'), onPressed: () { @@ -211,7 +211,7 @@ class _DrawShapePageState extends State { isSelected: _selectedShapeType == ShapeType.line, icon: Icon( Icons.horizontal_rule, - color: _selectedShapeType == ShapeType.line ? zetaColors.primary : null, + color: _selectedShapeType == ShapeType.line ? zetaColors.mainPrimary : null, ), label: strings.get('LINE', 'Line'), onPressed: () { diff --git a/lib/src/components/organisms/image_editor/pages/text_page.dart b/lib/src/components/organisms/image_editor/pages/text_page.dart index fe9439cc..484ae0df 100644 --- a/lib/src/components/organisms/image_editor/pages/text_page.dart +++ b/lib/src/components/organisms/image_editor/pages/text_page.dart @@ -49,7 +49,7 @@ class _TextPageState extends State { Widget build(BuildContext context) { final strings = ComponentStrings.of(context); final zetaColors = Zeta.of(context).colors; - final backgroundColor = widget.image.color ?? zetaColors.black.withAlpha(110); + final backgroundColor = widget.image.color ?? zetaColors.primitives.pure.shade1000.withAlpha(110); return PopScope( canPop: false, diff --git a/lib/src/components/organisms/image_editor/utils/editor_icon.dart b/lib/src/components/organisms/image_editor/utils/editor_icon.dart index cb0782b5..c061254a 100644 --- a/lib/src/components/organisms/image_editor/utils/editor_icon.dart +++ b/lib/src/components/organisms/image_editor/utils/editor_icon.dart @@ -42,7 +42,7 @@ class EditorIcon extends StatelessWidget { const SizedBox(height: 12), Text( label, - style: TextStyle(color: isSelected ? zetaColors.primary : null), + style: TextStyle(color: isSelected ? zetaColors.mainPrimary : null), ), ], ), diff --git a/lib/src/components/organisms/image_editor/utils/shape_painter.dart b/lib/src/components/organisms/image_editor/utils/shape_painter.dart index 320fa029..78531411 100644 --- a/lib/src/components/organisms/image_editor/utils/shape_painter.dart +++ b/lib/src/components/organisms/image_editor/utils/shape_painter.dart @@ -51,7 +51,7 @@ class ShapePainter extends CustomPainter { // Draw the preview shape if it exists if (previewShape != null) { - paint.color = previewShape!.color.withOpacity(0.5); // Semi-transparent preview + paint.color = previewShape!.color.withValues(alpha: 0.5); // Semi-transparent preview _drawShape(canvas, paint, previewShape!); } } diff --git a/lib/src/components/organisms/list_group.dart b/lib/src/components/organisms/list_group.dart index 1a49995d..00974b83 100644 --- a/lib/src/components/organisms/list_group.dart +++ b/lib/src/components/organisms/list_group.dart @@ -85,15 +85,15 @@ class ZdsListGroup extends StatelessWidget { children: [ Expanded( child: DefaultTextStyle( - style: safeTextStyle(themeData.textTheme.titleSmall).copyWith(color: zetaColors.textSubtle), + style: safeTextStyle(themeData.textTheme.titleSmall).copyWith(color: zetaColors.mainSubtle), child: headerLabel != null ? headerLabel! : const SizedBox(), ), ), if (headerActions?.isNotEmpty ?? false) IconTheme.merge( - data: IconThemeData(color: zetaColors.secondary.icon, size: 20), + data: IconThemeData(color: zetaColors.mainSecondary, size: 20), child: DefaultTextStyle( - style: safeTextStyle(themeData.textTheme.titleSmall).copyWith(color: zetaColors.secondary.text), + style: safeTextStyle(themeData.textTheme.titleSmall).copyWith(color: zetaColors.mainSecondary), child: Align( alignment: Alignment.centerRight, child: Row( diff --git a/lib/src/components/organisms/list_tile.dart b/lib/src/components/organisms/list_tile.dart index ec793f29..50afa91a 100644 --- a/lib/src/components/organisms/list_tile.dart +++ b/lib/src/components/organisms/list_tile.dart @@ -55,7 +55,7 @@ class ZdsListTile extends StatelessWidget { /// Typically a [Text] widget. /// /// The subtitle's default [TextStyle] depends on [TextTheme.bodyMedium] except - /// [TextStyle.color]. The [TextStyle.color] is Zeta.of(context).colors.textSubtle. + /// [TextStyle.color]. The [TextStyle.color] is Zeta.of(context).colors.mainSubtle. final Widget? subtitle; /// A widget to display after the title. @@ -123,7 +123,7 @@ class ZdsListTile extends StatelessWidget { final EdgeInsets padding = contentPadding ?? kZdsListTileTheme.contentPadding; final TextStyle? titleStyle = themeData.textTheme.bodyMedium; final zetaColors = Zeta.of(context).colors; - final Color subtitleColor = zetaColors.textSubtle; + final Color subtitleColor = zetaColors.mainSubtle; final EdgeInsets insets = _resolveInsets(padding); final Color effectiveBackground = backgroundColor ?? (context.findAncestorWidgetOfExactType() != null diff --git a/lib/src/components/organisms/navigation_menu.dart b/lib/src/components/organisms/navigation_menu.dart index e25f04f5..7a982e68 100644 --- a/lib/src/components/organisms/navigation_menu.dart +++ b/lib/src/components/organisms/navigation_menu.dart @@ -63,7 +63,7 @@ class ZdsNavigationMenu extends StatelessWidget { .toList(), ), ), - if (withSpacer) Container(height: 12, color: Zeta.of(context).colors.surfaceTertiary), + if (withSpacer) Container(height: 12, color: Zeta.of(context).colors.surfaceDefault), ], ), ); @@ -91,7 +91,7 @@ class ZdsNavigationMenuLabel extends StatelessWidget { @override Widget build(BuildContext context) { return child.textStyle( - Theme.of(context).textTheme.titleSmall?.copyWith(color: Zeta.of(context).colors.textSubtle), + Theme.of(context).textTheme.titleSmall?.copyWith(color: Zeta.of(context).colors.mainSubtle), ); } } diff --git a/lib/src/components/organisms/profile.dart b/lib/src/components/organisms/profile.dart index f292f9a4..1706eb94 100644 --- a/lib/src/components/organisms/profile.dart +++ b/lib/src/components/organisms/profile.dart @@ -83,7 +83,7 @@ class ZdsProfile extends StatelessWidget { label: semanticLabelTitle, child: nameText.textStyle( themeData.textTheme.displaySmall?.copyWith( - color: zetaColors.textDefault, + color: zetaColors.mainDefault, ), ), ), @@ -101,7 +101,7 @@ class ZdsProfile extends StatelessWidget { label: semanticLabelSubTitle, child: jobTitleText.textStyle( themeData.textTheme.titleMedium?.copyWith( - color: zetaColors.textSubtle, + color: zetaColors.mainSubtle, ), ), ), diff --git a/lib/src/components/organisms/properties_list.dart b/lib/src/components/organisms/properties_list.dart index f6ee885d..bb3d9f89 100644 --- a/lib/src/components/organisms/properties_list.dart +++ b/lib/src/components/organisms/properties_list.dart @@ -110,7 +110,7 @@ class ZdsPropertiesList extends StatelessWidget { label.textStyle(themeData.textTheme.bodyLarge), Flexible( child: value.textStyle( - themeData.textTheme.titleSmall?.copyWith(color: zetaColors.textDefault), + themeData.textTheme.titleSmall?.copyWith(color: zetaColors.mainDefault), ), ), ], @@ -122,9 +122,9 @@ class ZdsPropertiesList extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - label.textStyle(themeData.textTheme.titleSmall?.copyWith(color: zetaColors.textSubtle)).space(8), + label.textStyle(themeData.textTheme.titleSmall?.copyWith(color: zetaColors.mainSubtle)).space(8), value.textStyle( - themeData.textTheme.bodyLarge?.copyWith(color: zetaColors.textDefault), + themeData.textTheme.bodyLarge?.copyWith(color: zetaColors.mainDefault), overflow: TextOverflow.clip, ), ], diff --git a/lib/src/components/organisms/quill_editor/color_button.dart b/lib/src/components/organisms/quill_editor/color_button.dart index a4746ce6..4965e67d 100644 --- a/lib/src/components/organisms/quill_editor/color_button.dart +++ b/lib/src/components/organisms/quill_editor/color_button.dart @@ -466,9 +466,7 @@ Color _hexToColor(String? hexString) { return Color(int.tryParse(buffer.toString(), radix: 16) ?? 0xFF000000); } -String _colorToHex(Color color) { - return color.value.toRadixString(16).padLeft(8, '0').toUpperCase(); -} +String _colorToHex(Color color) => color.toHex(); Color _stringToColor(String? colorString, [Color? originalColor]) { if (colorString == null) return originalColor ?? Colors.black; diff --git a/lib/src/components/organisms/quill_editor/html_parser.dart b/lib/src/components/organisms/quill_editor/html_parser.dart index 29cd3680..05454243 100644 --- a/lib/src/components/organisms/quill_editor/html_parser.dart +++ b/lib/src/components/organisms/quill_editor/html_parser.dart @@ -64,7 +64,7 @@ extension DeltaToHtml on Delta { completer.complete(''); } // Dispose the WebView after getting the HTML. - webView.dispose(); + unawaited(webView.dispose()); }, ); }, @@ -127,7 +127,7 @@ extension HtmlToDelta on String { callback: (List args) { try { // Dispose the WebView after getting the Delta. - webView.dispose(); + unawaited(webView.dispose()); // Parse the Delta from the callback arguments. final dynamic resp = jsonDecode(args.first as String); // This ignore is used because the `resp['ops']` value is accessed dynamically. diff --git a/lib/src/components/organisms/quill_editor/material_picker.dart b/lib/src/components/organisms/quill_editor/material_picker.dart index e3342489..f496838b 100644 --- a/lib/src/components/organisms/quill_editor/material_picker.dart +++ b/lib/src/components/organisms/quill_editor/material_picker.dart @@ -125,7 +125,7 @@ class _ZdsMaterialPickerState extends State { void initState() { for (final List colors in _colorTypes) { _shadingTypes(colors).forEach((Map color) { - if (widget.pickerColor.value == color.keys.first.value) { + if (widget.pickerColor.toARGB32() == color.keys.first.toARGB32()) { return setState(() { _currentColorType = colors; _currentShading = color.keys.first; diff --git a/lib/src/components/organisms/quill_editor/quill_editor_page.dart b/lib/src/components/organisms/quill_editor/quill_editor_page.dart index 2740fe14..add632cb 100644 --- a/lib/src/components/organisms/quill_editor/quill_editor_page.dart +++ b/lib/src/components/organisms/quill_editor/quill_editor_page.dart @@ -425,7 +425,7 @@ class _ZdsQuillEditorPageState extends State with FrameCallb iconSize: 24, controller: _quillController, enabledColor: appBarFg, - disabledColor: appBarFg.withOpacity(0.3), + disabledColor: appBarFg.withValues(alpha: 0.3), afterPressed: _afterUndoRedo, undo: true, ), @@ -435,7 +435,7 @@ class _ZdsQuillEditorPageState extends State with FrameCallb iconSize: 24, controller: _quillController, enabledColor: appBarFg, - disabledColor: appBarFg.withOpacity(0.3), + disabledColor: appBarFg.withValues(alpha: 0.3), afterPressed: _afterUndoRedo, undo: false, ), diff --git a/lib/src/components/organisms/search_app_bar.dart b/lib/src/components/organisms/search_app_bar.dart index 0acd0088..7c49a3f3 100644 --- a/lib/src/components/organisms/search_app_bar.dart +++ b/lib/src/components/organisms/search_app_bar.dart @@ -269,7 +269,7 @@ class ZdsSearchAppBarState extends State { icon: Icon( ZdsIcons.close_circle, size: 20, - color: Zeta.of(context).colors.iconSubtle, + color: Zeta.of(context).colors.mainSubtle, ), onPressed: () { _textEditingController.clear(); diff --git a/lib/src/components/organisms/selectable_widget.dart b/lib/src/components/organisms/selectable_widget.dart index b4818e34..f3042aa3 100644 --- a/lib/src/components/organisms/selectable_widget.dart +++ b/lib/src/components/organisms/selectable_widget.dart @@ -75,7 +75,7 @@ class _ZdsSelectableWidgetState extends State { if (!(widget.copyable ?? false)) return widget.child; final zeta = Zeta.of(context).colors; return GestureDetector( - child: ColoredBox(color: isSelected ? zeta.primary.surface : Colors.transparent, child: widget.child), + child: ColoredBox(color: isSelected ? zeta.surfacePrimarySubtle : Colors.transparent, child: widget.child), onLongPress: () async { if (isSelected) return; toggleSelection(); diff --git a/lib/src/utils/assets/icons.dart b/lib/src/utils/assets/icons.dart index d053f706..1be3372c 100644 --- a/lib/src/utils/assets/icons.dart +++ b/lib/src/utils/assets/icons.dart @@ -405,13 +405,13 @@ Color iconColor(String ext, {BuildContext? context}) { case '.rtf': case '.ttf': case '.txt': - return colors?.blue ?? const Color(0xFF376FC9); + return colors?.primitives.blue ?? const Color(0xFF376FC9); case '.pdf': case '.ppt': case '.ppr': case '.pptx': - return colors?.red ?? const Color(0xFFDB0D00); + return colors?.primitives.red ?? const Color(0xFFDB0D00); case '.gif': case '.ico': @@ -421,7 +421,7 @@ Color iconColor(String ext, {BuildContext? context}) { case '.tif': case '.tiff': case '.bmp': - return colors?.orange ?? const Color(0xFFF56200); + return colors?.primitives.orange ?? const Color(0xFFF56200); case '.flv': case '.m4v': @@ -429,7 +429,7 @@ Color iconColor(String ext, {BuildContext? context}) { case '.mpeg': case '.mpg': case '.qt': - return colors?.purple ?? const Color(0xFF6F00C6); + return colors?.primitives.purple ?? const Color(0xFF6F00C6); case '.aac': case '.au': @@ -438,22 +438,22 @@ Color iconColor(String ext, {BuildContext? context}) { case '.mp3': case '.mp4': case '.wav': - return colors?.teal ?? const Color(0xFF70A300); + return colors?.primitives.teal ?? const Color(0xFF70A300); case '.csv': case '.xml': case '.xls': case '.xlsx': - return colors?.green ?? const Color(0xFF1F802E); + return colors?.primitives.green ?? const Color(0xFF1F802E); case '.htm': case '.rar': case '.url': case '.zip': - return colors?.warm ?? const Color(0xFF888888); + return colors?.primitives.warm ?? const Color(0xFF888888); default: - return colors?.iconDefault ?? const Color(0xFF1d1e23); + return colors?.mainDefault ?? const Color(0xFF1d1e23); } } @@ -481,11 +481,6 @@ extension IconDataFromExt on String { return _extensions[_safeExt] ?? ZdsIcons.file_o; } - @Deprecated('Use fileIconColor instead.') - Icon coloredFileIcon() { - return Icon(fileIcon(), color: iconColor(_safeExt)); - } - Color fileIconColor(BuildContext context) { return iconColor(_safeExt, context: context); } diff --git a/lib/src/utils/theme/input_border.dart b/lib/src/utils/theme/input_border.dart index 4e3bd05f..291d97b0 100644 --- a/lib/src/utils/theme/input_border.dart +++ b/lib/src/utils/theme/input_border.dart @@ -74,7 +74,7 @@ class ZdsInputDecoration extends InputDecoration { ), Text( ' *', - style: TextStyle(color: Zeta.of(context).colors.error), + style: TextStyle(color: Zeta.of(context).colors.mainNegative), ).excludeSemantics(), ], ); diff --git a/lib/src/utils/theme/theme.dart b/lib/src/utils/theme/theme.dart index 864217bf..7af8696b 100644 --- a/lib/src/utils/theme/theme.dart +++ b/lib/src/utils/theme/theme.dart @@ -11,7 +11,7 @@ ZdsBottomBarThemeData buildZdsBottomBarThemeData(BuildContext context) { shadows: [ BoxShadow( offset: const Offset(0, -1), - color: Zeta.of(context).colors.textDefault.withOpacity(0.1), + color: Zeta.of(context).colors.mainDefault.withValues(alpha: 0.1), blurRadius: 2, ), ], @@ -288,18 +288,10 @@ extension ThemeExtension on ThemeData { /// Gets prefix icon used for [ZdsSearchField]. Widget get prefixIcon => Builder( builder: (context) { - return Icon(ZdsIcons.search, color: Zeta.of(context).colors.iconSubtle); + return Icon(ZdsIcons.search, color: Zeta.of(context).colors.mainSubtle); }, ); - /// Gets default theme data for [ZdsListTile]. - @Deprecated('Use kZdsListTileTheme instead') - ZdsListTileTheme get zdsListTileThemeData => kZdsListTileTheme; - - ///Gets default theme data for [ZdsToolbar]. - @Deprecated('Use kZdsToolbarTheme instead') - ZdsToolbarThemeData get zdsToolbarThemeData => kZdsToolbarTheme; - /// Gets default theme data for [ZdsSearchField] ThemeData zdsSearchThemeData(ThemeData baseTheme, ZdsSearchFieldVariant variant, ZetaColors zetaColors) { final OutlineInputBorder border = OutlineInputBorder( @@ -321,7 +313,7 @@ extension ThemeExtension on ThemeData { ); } - final CardTheme cardTheme = this.cardTheme.copyWith( + final CardThemeData cardTheme = this.cardTheme.copyWith( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(kSearchBorderRadius), ), @@ -336,7 +328,7 @@ extension ThemeExtension on ThemeData { ), ), textSelectionTheme: TextSelectionThemeData(cursorColor: colorScheme.onSurface), - hintColor: colorScheme.onSurface.withOpacity(0.5), + hintColor: colorScheme.onSurface.withValues(alpha: 0.5), cardTheme: cardTheme.copyWith(shadowColor: Colors.transparent), ); case ZdsSearchFieldVariant.elevated: @@ -346,7 +338,7 @@ extension ThemeExtension on ThemeData { cursorColor: colorScheme.onSurface, ), cardTheme: cardTheme, - hintColor: colorScheme.onSurface.withOpacity(0.5), + hintColor: colorScheme.onSurface.withValues(alpha: 0.5), ); } } @@ -354,7 +346,9 @@ extension ThemeExtension on ThemeData { /// Custom theme for [ZdsDateTimePicker]. ThemeData get zdsDateTimePickerTheme { return copyWith( - dialogBackgroundColor: colorScheme.brightness == Brightness.dark ? colorScheme.surface : null, + dialogTheme: dialogTheme.copyWith( + backgroundColor: colorScheme.brightness == Brightness.dark ? colorScheme.surface : null, + ), colorScheme: colorScheme.copyWith( primary: colorScheme.secondary.withLight(colorScheme.brightness == Brightness.dark ? 0.75 : 1), onPrimary: colorScheme.onSecondary, @@ -362,144 +356,6 @@ extension ThemeExtension on ThemeData { ); } - /// Generates theme for [ZdsTabBar]. - @Deprecated('Use ZdsTabBar.buildTheme() instead') - ZdsTabBarStyleContainer zdsTabBarThemeData( - BuildContext context, { - required bool hasIcons, - required ZdsTabBarColor color, - Color? indicatorColor, - }) { - /// Builds [ZdsTabBarStyleContainer]. Defaults to primary color. - ZdsTabBarStyleContainer tabBarStyle( - BuildContext context, { - required bool hasIcons, - required Color selectedText, - required Color background, - required Color unselectedText, - required Color indicator, - }) { - final double height = hasIcons ? 56.0 : 48.0; - final ThemeData theme = Theme.of(context); - - final TabBarTheme tabBarTheme = theme.tabBarTheme.copyWith(indicatorSize: TabBarIndicatorSize.tab); - final TextStyle? labelStyle = hasIcons ? theme.textTheme.bodySmall : theme.textTheme.bodyLarge; - - return ZdsTabBarStyleContainer( - customTheme: ZdsTabBarThemeData( - decoration: BoxDecoration(color: background), - height: height, - ), - theme: theme.copyWith( - tabBarTheme: tabBarTheme.copyWith( - labelStyle: labelStyle, - unselectedLabelStyle: labelStyle, - unselectedLabelColor: unselectedText, - labelColor: selectedText, - indicator: UnderlineTabIndicator( - borderSide: BorderSide( - width: 3, - color: indicator, - ), - ), - ), - ), - ); - } - - final zetaColors = Zeta.of(context).colors; - switch (color) { - case ZdsTabBarColor.primary: - return tabBarStyle( - context, - hasIcons: hasIcons, - background: zetaColors.primary, - indicator: zetaColors.primary.onColor, - selectedText: zetaColors.primary.onColor, - unselectedText: zetaColors.primary.onColor.withOpacity(0.5), - ); - case ZdsTabBarColor.basic: - return tabBarStyle( - context, - hasIcons: hasIcons, - background: colorScheme.background, - indicator: zetaColors.primary, - selectedText: zetaColors.textDefault, - unselectedText: zetaColors.textSubtle, - ); - case ZdsTabBarColor.surface: - return tabBarStyle( - context, - hasIcons: hasIcons, - background: zetaColors.surfacePrimary, - indicator: zetaColors.primary, - selectedText: zetaColors.textDefault, - unselectedText: zetaColors.textSubtle, - ); - case ZdsTabBarColor.appBar: - final appBarTheme = Theme.of(context).appBarTheme; - return tabBarStyle( - context, - hasIcons: hasIcons, - background: appBarTheme.backgroundColor ?? zetaColors.surfacePrimary, - indicator: appBarTheme.foregroundColor ?? zetaColors.primary, - selectedText: appBarTheme.foregroundColor ?? zetaColors.textDefault, - unselectedText: appBarTheme.foregroundColor?.withOpacity(0.5) ?? zetaColors.textSubtle, - ); - } - } - - /// Builds theme variants for [ZdsAppBar]. - /// - /// See also - /// * [ZdsTabBarColor]. - @Deprecated('Use ZdsAppBar.buildTheme() instead.') - AppBarTheme buildAppBarTheme(ZdsTabBarColor color) { - final isDarkMode = brightness == Brightness.dark; - switch (color) { - case ZdsTabBarColor.primary: - case ZdsTabBarColor.appBar: - final fgColor = isDarkMode ? colorScheme.cool.shade90 : colorScheme.onPrimary; - final bgColor = isDarkMode ? colorScheme.cool.shade10 : colorScheme.primary; - return AppBarTheme( - systemOverlayStyle: computeSystemOverlayStyle(bgColor), - backgroundColor: bgColor, - foregroundColor: fgColor, - centerTitle: false, - titleSpacing: 0, - elevation: 0.5, - iconTheme: IconThemeData(color: fgColor), - actionsIconTheme: IconThemeData(color: fgColor), - ); - case ZdsTabBarColor.basic: - final fgColor = isDarkMode ? colorScheme.cool.shade90 : colorScheme.cool.shade10; - final bgColor = isDarkMode ? colorScheme.cool.shade10 : colorScheme.cool.shade90; - return AppBarTheme( - systemOverlayStyle: computeSystemOverlayStyle(bgColor), - backgroundColor: bgColor, - foregroundColor: fgColor, - centerTitle: false, - titleSpacing: 0, - elevation: 0.5, - iconTheme: IconThemeData(color: fgColor), - actionsIconTheme: IconThemeData(color: fgColor), - ); - case ZdsTabBarColor.surface: - final fgColor = isDarkMode ? colorScheme.cool.shade90 : colorScheme.onSurface; - final bgColor = isDarkMode ? colorScheme.cool.shade10 : colorScheme.surface; - return AppBarTheme( - systemOverlayStyle: computeSystemOverlayStyle(bgColor), - backgroundColor: bgColor, - foregroundColor: fgColor, - centerTitle: false, - titleSpacing: 0, - elevation: 0.5, - iconTheme: IconThemeData(color: fgColor), - actionsIconTheme: IconThemeData(color: fgColor), - ); - } - } - /// Theme data used to create compact buttons. /// /// Should not be used often as buttons typically should not be too small. diff --git a/lib/src/utils/theme/theme_builders/app_bar_theme.dart b/lib/src/utils/theme/theme_builders/app_bar_theme.dart index 763b8e03..8484865f 100644 --- a/lib/src/utils/theme/theme_builders/app_bar_theme.dart +++ b/lib/src/utils/theme/theme_builders/app_bar_theme.dart @@ -1,11 +1,11 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorExtensions, ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart' show ZetaSemantics; import '../../tools.dart' show computeSystemOverlayStyle; -/// An extension on the [ZetaColorScheme] class that adds the method +/// An extension on the [ZetaSemantics] class that adds the method /// [appBarTheme] for creating an [AppBarTheme] object. -extension ZetaAppBarTheme on ZetaColorScheme { +extension ZetaAppBarTheme on ZetaSemantics { /// Returns an [AppBarTheme] object created based on the provided [textTheme] /// and [background]. /// @@ -15,9 +15,9 @@ extension ZetaAppBarTheme on ZetaColorScheme { /// The `foreground` color is determined based on the [background] color. AppBarTheme appBarTheme(TextTheme textTheme, Color background) { // Calculate the preferred foreground color based on the given background color. - final foreground = background.onColor; + final foreground = primitives.cool.shade90; // Replace with appropriate logic if needed. - // Return an AppBarTheme instant built using the resolved foreground color and provided parameters. + // Return an AppBarTheme instance built using the resolved foreground color and provided parameters. return AppBarTheme( // Compute the SystemUiOverlayStyle to be set given the appBar's background color. systemOverlayStyle: computeSystemOverlayStyle(background), diff --git a/lib/src/utils/theme/theme_builders/bottom_app_bar_theme.dart b/lib/src/utils/theme/theme_builders/bottom_app_bar_theme.dart index 91c76458..e9ec5d81 100644 --- a/lib/src/utils/theme/theme_builders/bottom_app_bar_theme.dart +++ b/lib/src/utils/theme/theme_builders/bottom_app_bar_theme.dart @@ -1,26 +1,26 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart' show ZetaSemantics; -/// This extension provides a [BottomAppBarTheme] instance for a given [ZetaColorScheme]. -extension ZetaBottomAppBartTheme on ZetaColorScheme { - /// Creates and returns a [BottomAppBarTheme] based on the defined [ZetaColorScheme]. +/// This extension provides a [BottomAppBarTheme] instance for a given [ZetaSemantics]. +extension ZetaBottomAppBarTheme on ZetaSemantics { + /// Creates and returns a [BottomAppBarTheme] based on the defined [ZetaSemantics]. /// /// The [BottomAppBarTheme] has its color, surface tint color, shadow color, and padding values - /// influenced by the [ZetaColorScheme]. + /// influenced by the [ZetaSemantics]. BottomAppBarTheme bottomAppBarTheme() { return BottomAppBarTheme( - /// The color of the `BottomAppBar`. This is set to the `surface` color of the - /// `ZetaColorScheme`. - color: surface, + /// The color of the `BottomAppBar`. This is set to the `surfaceDefault` color of the + /// `ZetaSemantics`. + color: colors.surfaceDefault, - /// The surface tint color of the `BottomAppBar`. This is set to the `onSurface` color of the - /// `ZetaColorScheme`. - surfaceTintColor: onSurface, + /// The surface tint color of the `BottomAppBar`. This is set to the `mainDefault` color of the + /// `ZetaSemantics`. + surfaceTintColor: colors.mainDefault, - /// The shadow color of the `BottomAppBar` is set to the `onBackground` color of the `ZetaColorScheme`, + /// The shadow color of the `BottomAppBar` is set to the `mainSubtle` color of the `ZetaSemantics`, /// but with an opacity of 0.1. - shadowColor: onSurface.withOpacity(0.1), + shadowColor: colors.mainSubtle.withValues(alpha: 0.1), /// Padding inside the `BottomAppBar`. This is constant and set to be symmetric both horizontally /// and vertically. When running on the web, vertical padding is 8, otherwise it's 4. diff --git a/lib/src/utils/theme/theme_builders/bottom_navigation_bar_theme.dart b/lib/src/utils/theme/theme_builders/bottom_navigation_bar_theme.dart index 038d475f..48e23084 100644 --- a/lib/src/utils/theme/theme_builders/bottom_navigation_bar_theme.dart +++ b/lib/src/utils/theme/theme_builders/bottom_navigation_bar_theme.dart @@ -1,13 +1,13 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart' show ZetaSemantics; -/// An extension on [ZetaColorScheme] class, offering a collection of +/// An extension on [ZetaSemantics] class, offering a collection of /// methods for convenient creation of bottom sheet related /// themes such as [BottomSheetThemeData], [BottomAppBarTheme] and /// [BottomNavigationBarThemeData] objects. -extension ZetaBottomNavigationBarTheme on ZetaColorScheme { +extension ZetaBottomNavigationBarTheme on ZetaSemantics { /// Returns a [BottomNavigationBarTheme] object taking into account - /// the [textTheme] style and the color scheme of this [ZetaColorScheme]. + /// the [textTheme] style and the color scheme of this [ZetaSemantics]. BottomNavigationBarThemeData bottomNavigationBarTheme(TextTheme textTheme) { return BottomNavigationBarThemeData( // Set the type of the bottom navigation bar @@ -15,11 +15,11 @@ extension ZetaBottomNavigationBarTheme on ZetaColorScheme { // Sets the style of the selected and unselected labels of the navigation bar selectedLabelStyle: textTheme.bodySmall, unselectedLabelStyle: textTheme.bodySmall, - unselectedItemColor: zetaColors.textSubtle, - selectedItemColor: secondary, + unselectedItemColor: colors.mainSubtle, + selectedItemColor: colors.mainSecondary, // Sets the icon theme for selected and unselected items - selectedIconTheme: IconThemeData(size: 24, color: secondary), - unselectedIconTheme: IconThemeData(size: 24, color: zetaColors.iconSubtle), + selectedIconTheme: IconThemeData(size: 24, color: colors.mainSecondary), + unselectedIconTheme: IconThemeData(size: 24, color: colors.mainSubtle), ); } } diff --git a/lib/src/utils/theme/theme_builders/bottom_sheet_theme.dart b/lib/src/utils/theme/theme_builders/bottom_sheet_theme.dart index fcfea868..b9144b68 100644 --- a/lib/src/utils/theme/theme_builders/bottom_sheet_theme.dart +++ b/lib/src/utils/theme/theme_builders/bottom_sheet_theme.dart @@ -1,8 +1,8 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart' show ZetaSemantics; -/// An extension of the [ZetaColorScheme] that provides a BottomSheet theme design. -extension ZetaBottomSheetTheme on ZetaColorScheme { +/// An extension of the [ZetaSemantics] that provides a BottomSheet theme design. +extension ZetaBottomSheetTheme on ZetaSemantics { /// Creates and returns a themed [BottomSheetThemeData]. /// /// The [BottomSheetThemeData] uses a custom shape border for diff --git a/lib/src/utils/theme/theme_builders/button_theme.dart b/lib/src/utils/theme/theme_builders/button_theme.dart index 3b19ba59..59dec0ce 100644 --- a/lib/src/utils/theme/theme_builders/button_theme.dart +++ b/lib/src/utils/theme/theme_builders/button_theme.dart @@ -1,23 +1,22 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; -import '../../../components/atoms/button.dart' show ZdsButton, ZdsButtonVariant; +import '../../../../zds_flutter.dart'; -/// An extension on [ZetaColorScheme] class, offering methods for creating -/// text, elevated, and outlined button themes for this [ZetaColorScheme]. -extension ZetaButtonTheme on ZetaColorScheme { +/// An extension on [ZetaSemantics] class, offering methods for creating +/// text, elevated, and outlined button themes for this [ZetaSemantics]. +extension ZetaButtonTheme on ZetaSemantics { /// Returns a [BorderSide] with no outline. This is meant for buttons /// that should not have any border. WidgetStateProperty baseButtonBorderSide() => WidgetStateProperty.all(BorderSide.none); - /// Provides a standard padding for buttons across this [ZetaColorScheme]. + /// Provides a standard padding for buttons across this [ZetaSemantics]. EdgeInsets buttonPadding() => const EdgeInsets.symmetric(horizontal: 24, vertical: 10); - /// Provides the border radius for round buttons in this [ZetaColorScheme]. + /// Provides the border radius for round buttons in this [ZetaSemantics]. BorderRadius buttonBorderRadius() => const BorderRadius.all(Radius.circular(71)); /// Returns a [WidgetStateProperty] of [OutlinedBorder] which could - /// be used when round buttons are required in this [ZetaColorScheme]. + /// be used when round buttons are required in this [ZetaSemantics]. WidgetStateProperty buttonCircularShapeBorder() { return WidgetStateProperty.all( RoundedRectangleBorder( @@ -27,12 +26,12 @@ extension ZetaButtonTheme on ZetaColorScheme { } /// Builds a [TextButtonThemeData] with styles specified by the [ZdsButton.getStyle] function - /// and the [ZetaColorScheme] colors. + /// and the [ZetaSemantics] colors. TextButtonThemeData textButtonTheme(TextTheme textTheme) { return TextButtonThemeData( style: ZdsButton.getStyle( variant: ZdsButtonVariant.text, - zetaColors: zetaColors, + zetaColors: colors, textTheme: textTheme, ).copyWith( padding: WidgetStateProperty.all(buttonPadding()), @@ -44,12 +43,12 @@ extension ZetaButtonTheme on ZetaColorScheme { } /// Builds a [ElevatedButtonThemeData] with properties specified by - /// the [ZdsButton.getStyle] function and the [ZetaColorScheme] colors. + /// the [ZdsButton.getStyle] function and the [ZetaSemantics] colors. ElevatedButtonThemeData elevatedButtonTheme(TextTheme textTheme) { return ElevatedButtonThemeData( style: ZdsButton.getStyle( variant: ZdsButtonVariant.filled, - zetaColors: zetaColors, + zetaColors: colors, textTheme: textTheme, ).copyWith( padding: WidgetStateProperty.all(buttonPadding()), @@ -61,12 +60,12 @@ extension ZetaButtonTheme on ZetaColorScheme { } /// Builds a [OutlinedButtonThemeData] with properties specified by - /// the [ZdsButton.getStyle] function and the [ZetaColorScheme] colors. + /// the [ZdsButton.getStyle] function and the [ZetaSemantics] colors. OutlinedButtonThemeData outlinedButtonTheme(TextTheme textTheme) { return OutlinedButtonThemeData( style: ZdsButton.getStyle( variant: ZdsButtonVariant.outlined, - zetaColors: zetaColors, + zetaColors: colors, textTheme: textTheme, ).copyWith( padding: WidgetStateProperty.all(buttonPadding()), diff --git a/lib/src/utils/theme/theme_builders/card_theme.dart b/lib/src/utils/theme/theme_builders/card_theme.dart index c02f9d2c..bee2e4b6 100644 --- a/lib/src/utils/theme/theme_builders/card_theme.dart +++ b/lib/src/utils/theme/theme_builders/card_theme.dart @@ -1,32 +1,28 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart' show ZetaSemantics; -import '../../theme.dart'; - -/// This extension method is used to add additional properties to the [ZetaColorScheme]. -extension ZetaCardTheme on ZetaColorScheme { - /// This function returns a [CardTheme] after applying some properties to the [ZetaColorScheme]. +/// This extension method is used to add additional properties to the [ZetaSemantics]. +extension ZetaCardTheme on ZetaSemantics { + /// This function returns a [CardTheme] after applying some properties to the [ZetaSemantics]. /// /// Returns: /// A CardTheme with the applied properties. - CardTheme cardTheme() { - /// Returns CardTheme after customizing properties like color, - /// elevation, margin, shadowColor and shape. - return CardTheme( - /// Assigning color to surface - color: surface, + CardThemeData cardTheme() { + return CardThemeData( + /// Assigning color to surfaceDefault + color: colors.surfaceDefault, - /// Settings elevation to 1 + /// Settings elevation to 2 elevation: 2, /// Setting margin to EdgeInsets.all(3) - margin: const EdgeInsets.all(kZdsCardMargin), + margin: EdgeInsets.all(primitives.x1), /// Setting shadowColor with a bit of opacity - shadowColor: kZdsCardShadowColor, + shadowColor: colors.mainSubtle.withValues(alpha: 0.1), /// Customizing the shape of the Card - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(kZdsCardRadius)), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(primitives.x4)), ); } } diff --git a/lib/src/utils/theme/theme_builders/checkbox_theme.dart b/lib/src/utils/theme/theme_builders/checkbox_theme.dart index 64d55804..cae18b0a 100644 --- a/lib/src/utils/theme/theme_builders/checkbox_theme.dart +++ b/lib/src/utils/theme/theme_builders/checkbox_theme.dart @@ -1,11 +1,11 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorExtensions, ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; import '../../tools.dart' show widgetStatePropertyResolver; -/// This is an extension method on [ZetaColorScheme] which is used to customize the [CheckboxThemeData]. -extension ZetaCheckboxTheme on ZetaColorScheme { - /// This function returns a [CheckboxThemeData] customized with properties taken from the [ZetaColorScheme]. +/// This is an extension method on [ZetaSemantics] which is used to customize the [CheckboxThemeData]. +extension ZetaCheckboxTheme on ZetaSemantics { + /// This function returns a [CheckboxThemeData] customized with properties taken from the [ZetaSemantics]. /// /// Returns: /// A [CheckboxThemeData] with the applied properties. @@ -20,29 +20,33 @@ extension ZetaCheckboxTheme on ZetaColorScheme { defaultValue: SystemMouseCursors.basic, ), - /// Setting up custom fill color for different material states. - fillColor: widgetStatePropertyResolver( - selectedValue: zetaColors.secondary, - hoveredValue: zetaColors.secondary, - focusedValue: zetaColors.secondary.hover, - disabledValue: zetaColors.secondary.subtle, - defaultValue: Colors.transparent, - ), + fillColor: WidgetStateProperty.resolveWith((states) { + if (states.contains(WidgetState.selected)) { + return colors.mainSecondary; + } + if (states.contains(WidgetState.disabled)) { + return colors.mainDisabled; + } + if (states.contains(WidgetState.hovered)) { + return colors.stateDefaultHover; + } + return Colors.transparent; + }), /// Setting up the side property. - side: BorderSide(color: zetaColors.iconDefault, width: 2), + side: BorderSide(color: colors.mainDefault, width: 2), /// Setting up custom checkColor for different material states. checkColor: widgetStatePropertyResolver( - selectedValue: onSecondary, - hoveredValue: onSecondary, - defaultValue: zetaColors.secondary.onColor, + selectedValue: colors.mainInverse, + hoveredValue: colors.mainInverse, + defaultValue: colors.mainInverse, ), /// Setting up custom overlayColor for different material states. overlayColor: widgetStatePropertyResolver( - hoveredValue: zetaColors.surfaceHover, - ), + // hoveredValue: colors.surfaceHover, + ), /// Setting tap target size to "padded". materialTapTargetSize: MaterialTapTargetSize.padded, diff --git a/lib/src/utils/theme/theme_builders/chip_theme.dart b/lib/src/utils/theme/theme_builders/chip_theme.dart index fc3d3347..f22f6d76 100644 --- a/lib/src/utils/theme/theme_builders/chip_theme.dart +++ b/lib/src/utils/theme/theme_builders/chip_theme.dart @@ -1,10 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; -/// This is an extension method on [ZetaColorScheme] which is used to customize the [ChipThemeData]. -extension ZetaChipTheme on ZetaColorScheme { +/// This is an extension method on [ZetaSemantics] which is used to customize the [ChipThemeData]. +extension ZetaChipTheme on ZetaSemantics { /// This function requires a [TextTheme] object as a parameter, and - /// returns a [ChipThemeData] customized with properties taken from the [ZetaColorScheme] and the passed TextTheme. + /// returns a [ChipThemeData] customized with properties taken from the [ZetaSemantics] and the passed TextTheme. /// /// Parameter: /// [textTheme] : A TextTheme object used to copy styles for label and secondary label. @@ -17,31 +17,28 @@ extension ZetaChipTheme on ZetaColorScheme { /// checkmarkColor, labelStyle, secondaryLabelStyle and iconTheme. return ChipThemeData( /// Setting up the background color. - backgroundColor: zetaColors.secondary.surface, + backgroundColor: colors.surfaceSecondarySubtle, /// Setting up the selected color. - selectedColor: zetaColors.secondary.surface, + selectedColor: colors.surfaceSecondarySubtle, /// Setting up the disabled color. - disabledColor: zetaColors.borderDisabled, + disabledColor: colors.borderDisabled, /// Setting up the delete icon color. - deleteIconColor: zetaColors.secondary.selected, + deleteIconColor: colors.stateSecondarySelected, /// Setting up the checkmark color. - checkmarkColor: zetaColors.secondary.selected, + checkmarkColor: colors.stateSecondarySelected, /// Defining the label style using the provided textTheme. - labelStyle: textTheme.bodyMedium?.copyWith(color: zetaColors.secondary.selected), + labelStyle: textTheme.bodyMedium?.copyWith(color: colors.stateSecondarySelected), /// Defining the secondary label style using the provided textTheme. - secondaryLabelStyle: textTheme.bodyMedium?.copyWith(color: zetaColors.textSubtle), + secondaryLabelStyle: textTheme.bodyMedium?.copyWith(color: colors.mainSubtle), // Defining an icon theme data. - iconTheme: IconThemeData( - size: 24, - color: zetaColors.secondary.selected, - ), + iconTheme: IconThemeData(size: 24, color: colors.stateSecondarySelected), ); } } diff --git a/lib/src/utils/theme/theme_builders/date_picker_theme.dart b/lib/src/utils/theme/theme_builders/date_picker_theme.dart index 0892845b..602ee3e9 100644 --- a/lib/src/utils/theme/theme_builders/date_picker_theme.dart +++ b/lib/src/utils/theme/theme_builders/date_picker_theme.dart @@ -2,10 +2,10 @@ import 'package:flutter/material.dart'; import '../../../../zds_flutter.dart'; -/// This is an extension method on [ZetaColorScheme] which is used to customize the [DatePickerThemeData]. -extension ZetaDatePickerTheme on ZetaColorScheme { +/// This is an extension method on [ZetaSemantics] which is used to customize the [DatePickerThemeData]. +extension ZetaDatePickerTheme on ZetaSemantics { /// This function returns a [DatePickerThemeData] customized with properties - /// taken from the [ZetaColorScheme]. + /// taken from the [ZetaSemantics]. /// /// Returns: /// A [DatePickerThemeData] with the applied properties. @@ -15,10 +15,10 @@ extension ZetaDatePickerTheme on ZetaColorScheme { return DatePickerThemeData( headerBackgroundColor: appBarTheme.backgroundColor, headerForegroundColor: appBarTheme.foregroundColor, - backgroundColor: zetaColors.surfacePrimary, - rangePickerBackgroundColor: zetaColors.surfacePrimary, + backgroundColor: colors.surfacePrimary, + rangePickerBackgroundColor: colors.surfacePrimary, rangePickerHeaderForegroundColor: appBarTheme.foregroundColor, - rangeSelectionBackgroundColor: zetaColors.secondary.shade20, + rangeSelectionBackgroundColor: colors.primitives.secondary.shade20, ); } } diff --git a/lib/src/utils/theme/theme_builders/dialog_theme.dart b/lib/src/utils/theme/theme_builders/dialog_theme.dart index cd6431e8..9466d895 100644 --- a/lib/src/utils/theme/theme_builders/dialog_theme.dart +++ b/lib/src/utils/theme/theme_builders/dialog_theme.dart @@ -1,24 +1,24 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; -/// Extension method on the [ZetaColorScheme] class. +/// Extension method on the [ZetaSemantics] class. /// /// Returns a custom [DialogTheme]. -extension ZetaDialogTheme on ZetaColorScheme { +extension ZetaDialogTheme on ZetaSemantics { /// Generates a [DialogTheme] based on the current color scheme. /// /// The background color of the dialog will be set to the tertiary surface color /// of the current color scheme. /// /// The shape of the dialog is set to a [RoundedRectangleBorder] with a border radius of 8. - DialogTheme dialogTheme() { + DialogThemeData dialogTheme() { // Return a DialogTheme with custom properties - return DialogTheme( + return DialogThemeData( // Set the background color to the tertiary color of this ZetaColorScheme - backgroundColor: zetaColors.surfaceTertiary, + backgroundColor: colors.surfaceDefault, // sets dialog barrier color to white12 if the brightness is dark, otherwise black54 - barrierColor: zetaColors.brightness == Brightness.dark ? Colors.white12 : Colors.black54, + barrierColor: colors.primitives.brightness == Brightness.dark ? Colors.white12 : Colors.black54, // Set the shape to a RoundedRectangle with a borderRadius of 8 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), diff --git a/lib/src/utils/theme/theme_builders/divider_theme.dart b/lib/src/utils/theme/theme_builders/divider_theme.dart index 933c29b4..bcaa0634 100644 --- a/lib/src/utils/theme/theme_builders/divider_theme.dart +++ b/lib/src/utils/theme/theme_builders/divider_theme.dart @@ -1,10 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; -/// This is an extension method on [ZetaColorScheme] which is used to customize the [DividerThemeData]. -extension ZetaDividerTheme on ZetaColorScheme { +/// This is an extension method on [ZetaSemantics] which is used to customize the [DividerThemeData]. +extension ZetaDividerTheme on ZetaSemantics { /// This function returns a [DividerThemeData] customized with properties - /// taken from the [ZetaColorScheme]. + /// taken from the [ZetaSemantics]. /// /// Returns: /// A [DividerThemeData] with the applied properties. @@ -19,7 +19,7 @@ extension ZetaDividerTheme on ZetaColorScheme { space: 1, /// Using a color from the zetaColors for the divider color - color: zetaColors.borderSubtle, + color: colors.borderSubtle, ); } } diff --git a/lib/src/utils/theme/theme_builders/icon_theme.dart b/lib/src/utils/theme/theme_builders/icon_theme.dart index f0c4f849..efceed41 100644 --- a/lib/src/utils/theme/theme_builders/icon_theme.dart +++ b/lib/src/utils/theme/theme_builders/icon_theme.dart @@ -1,9 +1,9 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; /// ZetaIconTheme extension on ZetaColorScheme. /// Provides an IconThemeData instance with predefined size and color. -extension ZetaIconTheme on ZetaColorScheme { +extension ZetaIconTheme on ZetaSemantics { /// Returns a [IconThemeData] object taking the given parameters into account. /// /// [color] is used to define the icon color. diff --git a/lib/src/utils/theme/theme_builders/input_decoration_theme.dart b/lib/src/utils/theme/theme_builders/input_decoration_theme.dart index 6efb0fac..8cb4ab55 100644 --- a/lib/src/utils/theme/theme_builders/input_decoration_theme.dart +++ b/lib/src/utils/theme/theme_builders/input_decoration_theme.dart @@ -1,12 +1,12 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; import '../../theme.dart' show ZdsInputBorder; -/// This extension on [ZetaColorScheme] allows to create and customize [InputDecorationTheme]. -extension ZetaDividerTheme on ZetaColorScheme { +/// This extension on [ZetaSemantics] allows to create and customize [InputDecorationTheme]. +extension ZetaDividerTheme on ZetaSemantics { /// Creates a custom [InputDecorationTheme] using the specified - /// properties and styles obtained from the [ZetaColorScheme] and [TextTheme]. + /// properties and styles obtained from the [ZetaSemantics] and [TextTheme]. /// /// Parameter: /// [textTheme] : A TextTheme object to copy text styles from. @@ -21,16 +21,16 @@ extension ZetaDividerTheme on ZetaColorScheme { /// labelStyle, and counterStyle. return InputDecorationTheme( /// Setting up the border using custom ZdsInputBorder. - border: ZdsInputBorder(borderSide: BorderSide(color: zetaColors.borderDefault)), + border: ZdsInputBorder(borderSide: BorderSide(color: colors.borderDefault)), /// Setting up the border when the input is focussed. - focusedBorder: ZdsInputBorder(borderSide: BorderSide(color: zetaColors.borderSelected)), + focusedBorder: ZdsInputBorder(borderSide: BorderSide(color: colors.borderSelected)), /// Setting up the border when the input is enabled. - enabledBorder: ZdsInputBorder(borderSide: BorderSide(color: zetaColors.borderDefault)), + enabledBorder: ZdsInputBorder(borderSide: BorderSide(color: colors.borderDefault)), /// Setting up the border when the input is disabled. - disabledBorder: ZdsInputBorder(borderSide: BorderSide(color: zetaColors.borderDisabled)), + disabledBorder: ZdsInputBorder(borderSide: BorderSide(color: colors.borderDisabled)), /// Always displaying the floating label. floatingLabelBehavior: FloatingLabelBehavior.always, @@ -39,40 +39,40 @@ extension ZetaDividerTheme on ZetaColorScheme { contentPadding: const EdgeInsets.fromLTRB(12, 27, 12, 27), /// Setting up the border to indicate an error. - errorBorder: ZdsInputBorder(borderSide: BorderSide(color: errorContainer)), + errorBorder: ZdsInputBorder(borderSide: BorderSide(color: colors.borderNegative)), - /// Setting up the colour of input when focused. - focusColor: zetaColors.borderSelected, + /// Setting up the color of input when focused. + focusColor: colors.borderSelected, /// Custom border setup for when the input has focus and also has an error. - focusedErrorBorder: ZdsInputBorder(borderSide: BorderSide(color: error)), + focusedErrorBorder: ZdsInputBorder(borderSide: BorderSide(color: colors.mainNegative)), /// Setting up the label text style using the provided textTheme. labelStyle: textTheme.titleSmall?.copyWith( fontSize: 19, fontWeight: FontWeight.w500, - color: zetaColors.textSubtle, + color: colors.mainSubtle, height: 0, ), /// Setting up the Icon color for suffix - prefixIconColor: zetaColors.iconDefault, + prefixIconColor: colors.mainDefault, /// Setting up the Icon color for suffix - suffixIconColor: zetaColors.iconSubtle, + suffixIconColor: colors.mainSubtle, /// Setting up the label text style using the provided textTheme. suffixStyle: textTheme.titleSmall?.copyWith( fontSize: 19, fontWeight: FontWeight.w500, - color: zetaColors.textSubtle, + color: colors.mainSubtle, height: 0, ), /// Setting up the counter text style using the provided textTheme. counterStyle: textTheme.bodySmall?.copyWith( height: 0.1, - color: zetaColors.textSubtle, + color: colors.mainSubtle, ), ); } diff --git a/lib/src/utils/theme/theme_builders/list_tile_theme.dart b/lib/src/utils/theme/theme_builders/list_tile_theme.dart index 502edc9b..157ec0cc 100644 --- a/lib/src/utils/theme/theme_builders/list_tile_theme.dart +++ b/lib/src/utils/theme/theme_builders/list_tile_theme.dart @@ -1,12 +1,12 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; import '../../tools.dart' show widgetStatePropertyResolver; -/// This extension on [ZetaColorScheme] allows to create and customize [ListTileThemeData]. -extension ListTileExtension on ZetaColorScheme { +/// This extension on [ZetaSemantics] allows to create and customize [ListTileThemeData]. +extension ListTileExtension on ZetaSemantics { /// Creates a custom [ListTileThemeData] using the specified - /// properties and styles obtained from the [ZetaColorScheme] and [TextTheme]. + /// properties and styles obtained from the [ZetaSemantics] and [TextTheme]. /// /// Parameter: /// [textTheme] : A TextTheme object to copy text styles from. @@ -20,22 +20,22 @@ extension ListTileExtension on ZetaColorScheme { /// mouseCursor. return ListTileThemeData( /// Setting up the selected list tile color. - selectedColor: zetaColors.primary.selected, + selectedColor: colors.statePrimarySelected, /// Selected tile color - selectedTileColor: zetaColors.primary.surface, + selectedTileColor: colors.surfacePrimarySubtle, /// Setting up the icon color. - iconColor: zetaColors.iconDefault, + iconColor: colors.mainDefault, /// Setting up the title text style using the provided textTheme. - titleTextStyle: textTheme.bodyMedium?.copyWith(color: zetaColors.textDefault), + titleTextStyle: textTheme.bodyMedium?.copyWith(color: colors.mainDefault), /// Setting up the subtitle text style using the provided textTheme. - subtitleTextStyle: textTheme.bodySmall?.copyWith(color: zetaColors.textSubtle), + subtitleTextStyle: textTheme.bodySmall?.copyWith(color: colors.mainSubtle), /// Setting up the styles for both leading and trailing texts. - leadingAndTrailingTextStyle: textTheme.bodySmall?.copyWith(color: zetaColors.textSubtle), + leadingAndTrailingTextStyle: textTheme.bodySmall?.copyWith(color: colors.mainSubtle), /// Setting up custom mouse cursors for different material states. mouseCursor: widgetStatePropertyResolver( diff --git a/lib/src/utils/theme/theme_builders/popup_menu_theme.dart b/lib/src/utils/theme/theme_builders/popup_menu_theme.dart index c7e5568d..86b33788 100644 --- a/lib/src/utils/theme/theme_builders/popup_menu_theme.dart +++ b/lib/src/utils/theme/theme_builders/popup_menu_theme.dart @@ -1,10 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; -/// This extension on [ZetaColorScheme] allows to create and customize [PopupMenuThemeData]. -extension PopupMenuExtension on ZetaColorScheme { +/// This extension on [ZetaSemantics] allows to create and customize [PopupMenuThemeData]. +extension PopupMenuExtension on ZetaSemantics { /// Creates a custom [PopupMenuThemeData] using the specified - /// properties and styles obtained from the [ZetaColorScheme] and [TextTheme]. + /// properties and styles obtained from the [ZetaSemantics] and [TextTheme]. /// /// Parameter: /// [textTheme] : A TextTheme object to copy text styles from. @@ -23,10 +23,10 @@ extension PopupMenuExtension on ZetaColorScheme { elevation: 5, /// Setting up the color. - color: surface, + color: colors.surfaceDefault, /// Setting up the tint color of the surface. - surfaceTintColor: onSurface, + surfaceTintColor: colors.mainDefault, ); } } diff --git a/lib/src/utils/theme/theme_builders/progress_indicator_theme.dart b/lib/src/utils/theme/theme_builders/progress_indicator_theme.dart index acbee263..ecd01bb9 100644 --- a/lib/src/utils/theme/theme_builders/progress_indicator_theme.dart +++ b/lib/src/utils/theme/theme_builders/progress_indicator_theme.dart @@ -1,10 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; -/// An extension on [ZetaColorScheme] for customizing the [ProgressIndicatorThemeData]. -extension ProgressIndicatorExtension on ZetaColorScheme { +/// An extension on [ZetaSemantics] for customizing the [ProgressIndicatorThemeData]. +extension ProgressIndicatorExtension on ZetaSemantics { /// Creates a custom [ProgressIndicatorThemeData] using the properties obtained - /// from the [ZetaColorScheme]. + /// from the [ZetaSemantics]. /// /// Returns: /// A [ProgressIndicatorThemeData] with the applied properties. @@ -13,7 +13,7 @@ extension ProgressIndicatorExtension on ZetaColorScheme { /// Returns ProgressIndicatorThemeData after assigning the color property. return ProgressIndicatorThemeData( /// Setting up the color. - color: secondary, + color: colors.mainSecondary, linearTrackColor: Colors.transparent, circularTrackColor: Colors.transparent, ); diff --git a/lib/src/utils/theme/theme_builders/radio_theme.dart b/lib/src/utils/theme/theme_builders/radio_theme.dart index 43db8deb..bf7eae29 100644 --- a/lib/src/utils/theme/theme_builders/radio_theme.dart +++ b/lib/src/utils/theme/theme_builders/radio_theme.dart @@ -1,13 +1,13 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; import '../../tools/utils.dart' show widgetStatePropertyResolver; -/// An extension on [ZetaColorScheme]. +/// An extension on [ZetaSemantics]. /// /// This extension adds a method [radioThemeData], which allows for customizing -/// the appearance of a radio button using the [ZetaColorScheme]. -extension RadioExtension on ZetaColorScheme { +/// the appearance of a radio button using the [ZetaSemantics]. +extension RadioExtension on ZetaSemantics { /// Creates and returns a [RadioThemeData] object. /// /// Mouse cursors, fill color, overlay color, tap target size, and visual density @@ -25,16 +25,16 @@ extension RadioExtension on ZetaColorScheme { /// Defines the fill color for the different states of radio button. fillColor: widgetStatePropertyResolver( - selectedValue: zetaColors.secondary, - hoveredValue: zetaColors.secondary.hover, - focusedValue: zetaColors.secondary.hover, - disabledValue: zetaColors.secondary.subtle, - defaultValue: zetaColors.iconDefault, + selectedValue: colors.mainSecondary, + hoveredValue: colors.mainDefault, + focusedValue: colors.stateSecondaryHover, + disabledValue: colors.surfaceSecondarySubtle, + defaultValue: colors.mainDefault, ), /// Defines the overlay color for hover state of radio button. overlayColor: widgetStatePropertyResolver( - hoveredValue: zetaColors.surfaceHover, + hoveredValue: colors.surfaceHover, ), /// Defines the size of the material tap target. diff --git a/lib/src/utils/theme/theme_builders/search_bar_theme.dart b/lib/src/utils/theme/theme_builders/search_bar_theme.dart index 765eceee..7e4a552e 100644 --- a/lib/src/utils/theme/theme_builders/search_bar_theme.dart +++ b/lib/src/utils/theme/theme_builders/search_bar_theme.dart @@ -1,11 +1,11 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; -/// An extension on [ZetaColorScheme]. +/// An extension on [ZetaSemantics]. /// /// This extension adds a method [searchBarTheme], which allows for customizing -/// the appearance of a SearchBar using the [ZetaColorScheme] and a given [TextTheme]. -extension SearchBarExtension on ZetaColorScheme { +/// the appearance of a SearchBar using the [ZetaSemantics] and a given [TextTheme]. +extension SearchBarExtension on ZetaSemantics { /// Creates and returns a [SearchBarThemeData] object. /// /// Text styles, color and elevation of the SearchBar can be customized through this method. @@ -15,7 +15,7 @@ extension SearchBarExtension on ZetaColorScheme { return SearchBarThemeData( /// Defines the hintStyle - The style of hint text to display in the SearchBar /// when no text has been entered. - hintStyle: WidgetStateProperty.all(textTheme.bodyMedium?.copyWith(color: zetaColors.textSubtle)), + hintStyle: WidgetStateProperty.all(textTheme.bodyMedium?.copyWith(color: colors.mainSubtle)), /// Defines the textStyle - The style of text to display in the SearchBar /// when the user has entered text. diff --git a/lib/src/utils/theme/theme_builders/slider_theme.dart b/lib/src/utils/theme/theme_builders/slider_theme.dart index edad2c02..40eaa627 100644 --- a/lib/src/utils/theme/theme_builders/slider_theme.dart +++ b/lib/src/utils/theme/theme_builders/slider_theme.dart @@ -1,11 +1,11 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; -/// An extension on [ZetaColorScheme]. +/// An extension on [ZetaSemantics]. /// /// This extension adds a method [sliderTheme], which allows for customizing -/// the appearance of a [Slider] using the [ZetaColorScheme]. -extension ZetaDividerTheme on ZetaColorScheme { +/// the appearance of a [Slider] using the [ZetaSemantics]. +extension ZetaDividerTheme on ZetaSemantics { /// Creates and returns a [SliderThemeData] object. /// /// Track height, active and inactive track colors, active and inactive tick mark @@ -16,19 +16,19 @@ extension ZetaDividerTheme on ZetaColorScheme { trackHeight: 3, /// Defines the color of the active part of the slider track - activeTrackColor: zetaColors.secondary, + activeTrackColor: colors.mainSecondary, /// Defines the color of the active tick mark in the slider - activeTickMarkColor: onSecondary, + activeTickMarkColor: colors.mainInverse, /// Defines the color of the inactive tick mark in the slider - inactiveTickMarkColor: zetaColors.borderSelected, + inactiveTickMarkColor: colors.borderSelected, /// Defines the color of the inactive part of the slider track - inactiveTrackColor: zetaColors.borderSubtle, + inactiveTrackColor: colors.borderSubtle, /// Defines the color of the secondary active part of the slider track - secondaryActiveTrackColor: zetaColors.borderDefault, + secondaryActiveTrackColor: colors.borderDefault, ); } } diff --git a/lib/src/utils/theme/theme_builders/switch_theme.dart b/lib/src/utils/theme/theme_builders/switch_theme.dart index 765b2c99..adb68e2d 100644 --- a/lib/src/utils/theme/theme_builders/switch_theme.dart +++ b/lib/src/utils/theme/theme_builders/switch_theme.dart @@ -1,16 +1,16 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; import '../../tools/utils.dart' show widgetStatePropertyResolver; -/// This code defines a Dart extension method for [ZetaColorScheme], which uses Material UI components. -/// It provides a new [switchTheme] method that allows for customization of a [SwitchThemeData] according to the [ZetaColorScheme]. +/// This code defines a Dart extension method for [ZetaSemantics], which uses Material UI components. +/// It provides a new [switchTheme] method that allows for customization of a [SwitchThemeData] according to the [ZetaSemantics]. /// The [SwitchThemeData] object returned by the [switchTheme] method has three customized properties: /// 1. mouseCursor: A [MouseCursor] determined by the Material State. /// 2. overlayColor: A [Color] determined by the Material State. /// 3. materialTapTargetSize: Defines the size of the tap target. -extension SwitchExtension on ZetaColorScheme { +extension SwitchExtension on ZetaSemantics { /// Generates a [SwitchThemeData] object with properties /// inherited from the parent [ThemeData]. /// @@ -33,7 +33,7 @@ extension SwitchExtension on ZetaColorScheme { /// Defines the overlay [Color] for the [Switch] when it's hovered. overlayColor: widgetStatePropertyResolver( - hoveredValue: zetaColors.black.withOpacity(0.1), + hoveredValue: Colors.black.withValues(alpha: 0.1), ), /// The smallest detectable part of [Switch] that can lead to a tap event. diff --git a/lib/src/utils/theme/theme_builders/tab_bar_theme.dart b/lib/src/utils/theme/theme_builders/tab_bar_theme.dart index 1139215f..b9684165 100644 --- a/lib/src/utils/theme/theme_builders/tab_bar_theme.dart +++ b/lib/src/utils/theme/theme_builders/tab_bar_theme.dart @@ -1,8 +1,8 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart' show ZetaSemantics; -/// This extension method for the [ZetaColorScheme] class provides a new [tabBarTheme] -/// method. It enables the customization of a [TabBarTheme] to match the [ZetaColorScheme]. +/// This extension method for the [ZetaSemantics] class provides a new [tabBarTheme] +/// method. It enables the customization of a [TabBarTheme] to match the [ZetaSemantics]. /// /// The [TabBarTheme] object returned has several properties: /// 1. indicatorColor: The color of the selected tab's underline. @@ -10,23 +10,23 @@ import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; /// 3. unselectedLabelColor: The color of the text within any unselected tabs. /// 4. labelStyle: The text styling applied to text within the selected tab. /// 5. unselectedLabelStyle: The text styling applied to text within any unselected tabs. -extension TabBarExtension on ZetaColorScheme { +extension TabBarExtension on ZetaSemantics { /// Generate a [TabBarTheme] object with visual properties for a [TabBar]. /// [TabBar]s display a horizontal row of tabs, one tab per [TabController]. /// /// [textTheme] is used to style the labels of the selected and unselected tabs. /// - /// Returns a [TabBarTheme] that matches the [ZetaColorScheme]. - TabBarTheme tabBarTheme(TextTheme textTheme) { - return TabBarTheme( + /// Returns a [TabBarTheme] that matches the [ZetaSemantics]. + TabBarThemeData tabBarTheme(TextTheme textTheme) { + return TabBarThemeData( /// The color of the line that appears below the selected tab. - indicatorColor: zetaColors.secondary, + indicatorColor: colors.mainSecondary, /// The color to use for [Tab] labels when a [Tab] is selected. - labelColor: zetaColors.secondary, + labelColor: colors.mainSecondary, /// The color to use for [Tab] labels when the associated [Tab] is not selected. - unselectedLabelColor: zetaColors.textSubtle, + unselectedLabelColor: colors.mainSubtle, /// The [TextStyle] to apply to [Tab] labels when a [Tab] is selected. labelStyle: textTheme.bodySmall, diff --git a/lib/src/utils/theme/theme_builders/text_selection_theme.dart b/lib/src/utils/theme/theme_builders/text_selection_theme.dart index 7aa15cb3..16228797 100644 --- a/lib/src/utils/theme/theme_builders/text_selection_theme.dart +++ b/lib/src/utils/theme/theme_builders/text_selection_theme.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; -/// This extends the [ZetaColorScheme] class with a method [textSelectionTheme] +/// This extends the [ZetaSemantics] class with a method [textSelectionTheme] /// which allows you to generate a new [TextSelectionThemeData]. /// /// The [TextSelectionThemeData] object returned holds configurations for components @@ -9,23 +9,23 @@ import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; /// 1. cursorColor: Defines the color of the cursor in a text field. /// 2. selectionColor: Color of the text selection toolbar. /// 3. selectionHandleColor: Color of the text selection handle. -extension TextSelectionExtension on ZetaColorScheme { +extension TextSelectionExtension on ZetaSemantics { /// Defines a [TextSelectionThemeData] using ZetaColorScheme. /// /// A [TextSelectionThemeData] holds the color and style parameters which /// defines a material design text selection toolbar. /// - /// Returns a [TextSelectionThemeData] object matching the [ZetaColorScheme]. + /// Returns a [TextSelectionThemeData] object matching the [ZetaSemantics]. TextSelectionThemeData textSelectionTheme() { return TextSelectionThemeData( /// Defines the color of the cursor in a text field. - cursorColor: zetaColors.secondary, + cursorColor: colors.mainSecondary, /// Indicates the color of the text selection toolbar. - selectionColor: zetaColors.secondary.subtle.withOpacity(0.5), + selectionColor: colors.surfaceSecondarySubtle.withValues(alpha: 0.5), /// Color of the text selection handle. - selectionHandleColor: zetaColors.secondary.selected, + selectionHandleColor: colors.stateSecondarySelected, ); } } diff --git a/lib/src/utils/theme/theme_builders/zeta_theme.dart b/lib/src/utils/theme/theme_builders/zeta_theme.dart index 3168ef8d..a9bca377 100644 --- a/lib/src/utils/theme/theme_builders/zeta_theme.dart +++ b/lib/src/utils/theme/theme_builders/zeta_theme.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart' show ZetaColorScheme; +import 'package:zeta_flutter/zeta_flutter.dart'; import '../text.dart'; import 'app_bar_theme.dart'; @@ -25,7 +25,7 @@ import 'switch_theme.dart'; import 'tab_bar_theme.dart'; import 'text_selection_theme.dart'; -/// Enum to select the used AppBarTheme style in [ZetaColorScheme] based themes. +/// Enum to select the used AppBarTheme style in [ZetaSemantics] based themes. enum ZetaAppBarStyle { /// Use the scheme primary color as the AppBar's themed background color. /// @@ -40,54 +40,33 @@ enum ZetaAppBarStyle { /// Use scheme surface color as the AppBar's themed background color, /// including any blend (surface tint) color it may have. surface, - - /// Use scheme background color as the AppBar's themed background color, - /// including any blend (surface tint) color it may have. - @Deprecated('Use surface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') - background, } /// Extension method on ZetaAppBarStyle to add appBar color functionality. extension AppBarColor on ZetaAppBarStyle { /// Returns effective appBar color depending upon the color scheme. /// - /// [colorScheme] is the color palette maintained by the app/theme - /// for standard color consistency across the app. - /// - /// [ZetaAppBarStyle] is the style variant for AppBar, which determines - /// the colour that should be derived from the [colorScheme]. - /// - /// Returns [Color], the final colour to be applied to the appBar. - Color effectiveAppBarColor(ZetaColorScheme colorScheme) { + /// Returns [Color], the final color to be applied to the appBar. + Color effectiveAppBarColor(ZetaColors colors) { switch (this) { case ZetaAppBarStyle.primary: // Applying primary color of color scheme - return colorScheme.primary; + return colors.mainPrimary; case ZetaAppBarStyle.secondary: // Applying secondary color of color scheme - return colorScheme.secondary; + return colors.mainSecondary; case ZetaAppBarStyle.surface: // Applying surface color of color scheme - return colorScheme.surface; - // This ignore is used because the `ZetaAppBarStyle.background` value is marked - // as deprecated within the same package. However, it is still in use in the - // codebase as part of the conversion process. Refactoring to remove the - // deprecated value requires replacing all instances of it, which will be done - // in a future update. This usage of the deprecated member is temporary until - // the transition is complete. - // ignore: deprecated_member_use_from_same_package - case ZetaAppBarStyle.background: - // Applying background color of color scheme - return colorScheme.surface; + return colors.surfaceDefault; } } } -/// A Dart extension on [ZetaColorScheme] +/// A Dart extension on [ZetaSemantics] /// /// Allows the client to easily interface with the more verbose ThemeData class of Flutter /// and generate a theme configuration based on the simpler ZetaColorScheme object. -extension ZetaThemeBuilder on ZetaColorScheme { +extension ZetaThemeBuilder on ZetaSemantics { /// Converts the ZetaColorScheme to a ThemeData object. /// /// Takes optional parameters [fontFamily] , a string representing @@ -100,58 +79,58 @@ extension ZetaThemeBuilder on ZetaColorScheme { String? fontFamily, ZetaAppBarStyle appBarStyle = ZetaAppBarStyle.primary, bool useMaterial3 = false, + Brightness? brightness, }) { // A TextTheme object for the colors onPrimary. final primaryTextTheme = buildZdsTextTheme( - textColor: onPrimary, + textColor: colors.mainInverse, fontFamily: fontFamily, ); // A TextTheme object for the colors onSurface. final TextTheme textTheme = buildZdsTextTheme( - textColor: onSurface, + textColor: colors.mainDefault, fontFamily: fontFamily, ); // The actual appBar color defined by the appBarStyle, based on the color scheme. - final effectiveAppBarColor = appBarStyle.effectiveAppBarColor(this); + final effectiveAppBarColor = appBarStyle.effectiveAppBarColor(colors); // Returns a ThemeData that is constructed from the ZetaColorScheme. final barTheme = appBarTheme(primaryTextTheme, effectiveAppBarColor); return ThemeData( - colorScheme: this, + colorScheme: ZetaSemanticsAA(primitives: primitives).colors.toColorScheme, appBarTheme: barTheme, useMaterial3: useMaterial3, bottomAppBarTheme: bottomAppBarTheme(), bottomNavigationBarTheme: bottomNavigationBarTheme(textTheme), bottomSheetTheme: bottomSheetTheme(), - brightness: brightness, - canvasColor: surface, + brightness: brightness ?? colors.primitives.brightness, + canvasColor: colors.surfaceDefault, cardTheme: cardTheme(), checkboxTheme: checkboxTheme(), chipTheme: chipThemeData(textTheme), datePickerTheme: datePickerTheme(barTheme), - dividerColor: zetaColors.borderSubtle, + dividerColor: colors.borderSubtle, dividerTheme: dividerTheme(), elevatedButtonTheme: elevatedButtonTheme(primaryTextTheme), fontFamily: fontFamily, - iconTheme: iconTheme(color: zetaColors.iconDefault), - indicatorColor: secondary, + iconTheme: iconTheme(color: colors.mainDefault), inputDecorationTheme: inputDecorationTheme(textTheme), listTileTheme: listTileTheme(textTheme), outlinedButtonTheme: outlinedButtonTheme(primaryTextTheme), popupMenuTheme: popupMenuTheme(textTheme), - primaryColor: primary, - primaryIconTheme: iconTheme(color: onPrimary), + primaryColor: colors.mainPrimary, + primaryIconTheme: iconTheme(color: colors.mainDefault), primaryTextTheme: primaryTextTheme, progressIndicatorTheme: progressIndicatorTheme(), radioTheme: radioThemeData(), - scaffoldBackgroundColor: zetaColors.surfaceTertiary, + scaffoldBackgroundColor: colors.surfaceWarm, searchBarTheme: searchBarTheme(textTheme), - shadowColor: zetaColors.borderDisabled.withOpacity(0.7), + shadowColor: colors.borderDisabled.withValues(alpha: 0.7), sliderTheme: sliderTheme(), - splashColor: zetaColors.surfaceSelected, + splashColor: colors.surfaceSelected, switchTheme: switchTheme(), tabBarTheme: tabBarTheme(textTheme), textButtonTheme: textButtonTheme(primaryTextTheme), diff --git a/lib/src/utils/theme/theme_constants.dart b/lib/src/utils/theme/theme_constants.dart index 4716906c..2668eb4e 100644 --- a/lib/src/utils/theme/theme_constants.dart +++ b/lib/src/utils/theme/theme_constants.dart @@ -76,10 +76,6 @@ const double calendarDaysOfWeekHeight = 36; /// Width / height of circular buttons in [ZdsCheckableButton]. const double kZdsCheckableButtonSize = 48; -/// Width / height of circular buttons in [ZdsCheckableButton]. -@Deprecated('Use kZdsCheckableButtonSize instead') -const double checkableButtonSize = 48; - /// ListTile theme const ZdsListTileTheme kZdsListTileTheme = ZdsListTileTheme( contentPadding: EdgeInsets.only(left: 24, top: 18, bottom: 18, right: 24), diff --git a/lib/src/utils/theme/theme_data.dart b/lib/src/utils/theme/theme_data.dart index ea9bf0b8..58122e41 100644 --- a/lib/src/utils/theme/theme_data.dart +++ b/lib/src/utils/theme/theme_data.dart @@ -1,5 +1,4 @@ import 'dart:convert'; - import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; @@ -12,14 +11,14 @@ class _ZdsBaseColors { factory _ZdsBaseColors.fromJson(Map? json) { // Extracts primary, secondary, and error colors from JSON, with default fallbacks. - final primary = (json?['primary'] as String?)?.toColor() ?? ZetaColorBase.blue; - final secondary = (json?['secondary'] as String?)?.toColor() ?? ZetaColorBase.blue; + final primary = (json?['primary'] as String?)?.toColor() ?? const ZetaPrimitivesLight().blue; + final secondary = (json?['secondary'] as String?)?.toColor() ?? const ZetaPrimitivesLight().blue; var error = (json?['error'] as String?)?.toColor(); if (error == null && isShadeOfRed(primary)) { - error = ZetaColorBase.warm; + error = const ZetaPrimitivesLight().warm; } else { - error = ZetaColorBase.red; + error = const ZetaPrimitivesLight().red; } return _ZdsBaseColors(primary: primary, secondary: secondary, error: error); @@ -31,9 +30,9 @@ class _ZdsBaseColors { static bool isShadeOfRed(Color color) { // Get the red, green, and blue components of the color - final red = color.red; - final green = color.green; - final blue = color.blue; + final red = color.r; + final green = color.g; + final blue = color.b; // Check if the red component is dominant return red > green && red > blue; @@ -56,26 +55,25 @@ class _ZdsBaseColors { /// See also: /// * [ZetaProvider] /// * [Zeta] -/// * [ZetaThemeData] -/// * [ZetaColorScheme] +/// * [ZetaColors] /// * [ZetaAppBarStyle] @immutable class ZdsThemeData { /// Creates a `ZdsThemeData`. /// - /// The [themeData] and [themeMode] must not be null. + /// The [themeMode] must not be null. /// - /// The [themeData] parameter, which is required, defines the theme data to be used with [ZetaProvider]. /// The [themeMode] parameter, which is required, defines the theme mode for the [Zeta], and defaults to [ThemeMode.system]. - /// The [darkAppBarStyle] parameter defines the AppBar style for the dark theme, used to select the colors used in AppBarTheme style from [ZetaColorScheme]. Defaults to [ZetaAppBarStyle.surface]. - /// The [lightAppBarStyle] parameter defines the AppBar style for the light theme, used to select the colors used in AppBarTheme style from [ZetaColorScheme]. Defaults to [ZetaAppBarStyle.primary]. + // /// The [darkAppBarStyle] parameter defines the AppBar style for the dark theme, used to select the colors used in AppBarTheme style from [ZetaColorScheme]. Defaults to [ZetaAppBarStyle.surface]. + // /// The [lightAppBarStyle] parameter defines the AppBar style for the light theme, used to select the colors used in AppBarTheme style from [ZetaColorScheme]. Defaults to [ZetaAppBarStyle.primary]. const ZdsThemeData._({ - required this.themeData, + // required this.themeData, required this.themeMode, required this.darkAppBarStyle, required this.lightAppBarStyle, required this.contrast, required this.adjustAccessibility, + required this.fontFamily, required _ZdsBaseColors lightColors, required _ZdsBaseColors darkColors, }) : _lightColors = lightColors, @@ -96,14 +94,16 @@ class ZdsThemeData { factory ZdsThemeData.defaultData() { // Initialize base colors with default primary, secondary, and error colors. final baseColors = _ZdsBaseColors( - primary: ZetaColorBase.blue, // Default primary color set to blue. - secondary: ZetaColorBase.blue, // Default secondary color set to blue. - error: ZetaColorBase.red, // Default error color set to red. + primary: const ZetaPrimitivesLight().blue, // Default primary color set to blue. + secondary: const ZetaPrimitivesLight().blue, // Default secondary color set to blue. + error: const ZetaPrimitivesLight().red, // Default error color set to red. ); // Return a new instance of ZdsThemeData with default settings. return ZdsThemeData._( - themeData: ZetaThemeData(), + // themeData: ThemeData(), + // themeData: generateZetaTheme(brightness: Brightness.light, colorScheme: , textTheme: textTheme), + // themeData: ZetaThemeData(), // Initialize with default ZetaThemeData. themeMode: ThemeMode.system, // Use system default theme mode. @@ -118,6 +118,7 @@ class ZdsThemeData { lightColors: baseColors, // Apply the base colors to light theme. darkColors: baseColors, // Apply the same base colors to dark theme. + fontFamily: kZetaFontFamily, ); } @@ -138,6 +139,8 @@ class ZdsThemeData { final lightColors = _ZdsBaseColors.fromJson(light); final darkColors = dark != null ? _ZdsBaseColors.fromJson(light) : lightColors; + final fontFamily = json['fontFamily'] as String? ?? kZetaFontFamily; + return ZdsThemeData._( themeMode: themeMode, contrast: contrast, @@ -146,13 +149,14 @@ class ZdsThemeData { adjustAccessibility: adjustAccessibility, lightAppBarStyle: _zetaAppBarStyle(light), darkAppBarStyle: _zetaAppBarStyle(dark), - themeData: _zetaThemeDataFromJson( - json, - contrast, - adjustAccessibility, - lightColors, - darkColors, - ), + fontFamily: fontFamily, + // themeData: _zetaThemeDataFromJson( + // json, + // contrast, + // adjustAccessibility, + // lightColors, + // darkColors, + // ), ); } @@ -201,10 +205,10 @@ class ZdsThemeData { return ZdsThemeData.fromJsonString(json); } - /// Theme data to be used with [ZetaProvider] - /// - /// This field hold the instance of [ZetaThemeData] which is used by `ZetaProvider` class. - final ZetaThemeData themeData; + // /// Theme data to be used with [ZetaProvider] + // /// + // /// This field hold the instance of [ZetaThemeServiceData] which is used by `ZetaProvider` class. + // final ZetaThemeServiceData themeData; /// The theme mode for the [Zeta] /// @@ -215,13 +219,13 @@ class ZdsThemeData { /// AppBar style for the dark theme /// /// This holds the AppBar style for dark theme mode which is used to - /// select the colors from [ZetaColorScheme]. + /// select the colors from [ZetaColors]. final ZetaAppBarStyle darkAppBarStyle; /// AppBar style for the light theme /// /// This holds the AppBar style for light theme mode which is used to - /// select the colors from [ZetaColorScheme]. + /// select the colors from [ZetaColors]. final ZetaAppBarStyle lightAppBarStyle; /// Represents the Zeta accessibility standard. @@ -239,12 +243,15 @@ class ZdsThemeData { /// Base dark colors, used internally to save and retrieve the colors from JSON final _ZdsBaseColors _darkColors; + /// Font override to use + final String fontFamily; + /// Converts the [ZdsThemeData] instance to a JSON map. Map toJson() { return { - 'identifier': themeData.identifier, + // 'identifier': themeData.identifier, 'themeMode': _themeModeToString(themeMode), - 'fontFamily': themeData.fontFamily, + // 'fontFamily': themeData.fontFamily, 'adjustAccessibility': adjustAccessibility, 'contrast': _contrastToString(contrast), 'light': { @@ -278,70 +285,61 @@ class ZdsThemeData { final appBarStyleString = json?['appBarStyle'] as String?; return appBarStyleString == 'surface' ? ZetaAppBarStyle.surface - : appBarStyleString == 'background' - // This ignore is used because the `ZetaAppBarStyle.background`, - // `ZetaAppBarStyle.secondary`, and `ZetaAppBarStyle.primary` values are marked - // as deprecated within the same package. However, they are still in use in the - // codebase, and replacing them requires refactoring to a new style system. - // The deprecated usage is temporary, and a future update will remove it once - // the new styles are fully integrated and tested. - // ignore: deprecated_member_use_from_same_package - ? ZetaAppBarStyle.background - : appBarStyleString == 'secondary' - ? ZetaAppBarStyle.secondary - : ZetaAppBarStyle.primary; + : appBarStyleString == 'secondary' + ? ZetaAppBarStyle.secondary + : ZetaAppBarStyle.primary; } - /// Parses the given JSON map into [ZetaThemeData]. - static ZetaThemeData _zetaThemeDataFromJson( - Map json, - ZetaContrast contrast, - bool adjustAccessibility, - _ZdsBaseColors lightColors, - _ZdsBaseColors darkColors, - ) { - // Constructs and returns a new instance of ZetaThemeData. - final light = _colors(lightColors, Brightness.light, contrast, adjustAccessibility); - final dark = _colors(darkColors, Brightness.dark, contrast, adjustAccessibility); - - return ZetaThemeData( - identifier: json['identifier'] as String? ?? 'default', - // Sets the identifier, defaulting to 'default'. - fontFamily: json['fontFamily'] as String? ?? kZetaFontFamily, - // Sets the font family, with a default value. - contrast: contrast, - // Sets the determined contrast. - colorsLight: light, - // Processes light theme colors. - colorsDark: dark, // Processes dark theme colors. - ); - } + // // /// Parses the given JSON map into [ZetaThemeServiceData]. + // static ZetaThemeServiceData _zetaThemeDataFromJson( + // Map json, + // ZetaContrast contrast, + // bool adjustAccessibility, + // _ZdsBaseColors lightColors, + // _ZdsBaseColors darkColors, + // ) { + // // Constructs and returns a new instance of ZetaThemeData. + // final light = _colors(lightColors, Brightness.light, contrast, adjustAccessibility); + // final dark = _colors(darkColors, Brightness.dark, contrast, adjustAccessibility); + + // return ZetaThemeServiceData( + // identifier: json['identifier'] as String? ?? 'default', + // // Sets the identifier, defaulting to 'default'. + // fontFamily: json['fontFamily'] as String? ?? kZetaFontFamily, + // // Sets the font family, with a default value. + // contrast: contrast, + // // Sets the determined contrast. + // colorsLight: light, + // // Processes light theme colors. + // colorsDark: dark, // Processes dark theme colors. + // ); + // } /// Creates a [ZetaColors] object from the given JSON, brightness, and contrast. - static ZetaColors _colors( - _ZdsBaseColors colors, - Brightness brightness, - ZetaContrast contrast, - bool adjustAccessibility, - ) { - // Helper function to create a color swatch based on the given base color. - ZetaColorSwatch swatch(Color base) => ZetaColorSwatch.fromColor(base).apply(brightness: brightness); - - // Returns either a dark or light themed [ZetaColors] object based on the brightness. - return brightness == Brightness.dark - ? ZetaColors.dark( - contrast: contrast, - primary: swatch(colors.primary), - secondary: swatch(colors.secondary), - error: swatch(colors.error), - ) - : ZetaColors.light( - contrast: contrast, - primary: swatch(colors.primary), - secondary: swatch(colors.secondary), - error: swatch(colors.error), - ); - } + // static ZetaColors _colors( + // _ZdsBaseColors colors, + // Brightness brightness, + // ZetaContrast contrast, + // bool adjustAccessibility, + // ) { + // // Helper function to create a color swatch based on the given base color. + // ZetaColorSwatch swatch(Color base) => ZetaColorSwatch.fromColor(base).apply(brightness: brightness); + + // // Returns either a dark or light themed [ZetaColors] object based on the brightness. + // return brightness == Brightness.dark + // ? ZetaColors.dark( + // contrast: contrast, + // primary: swatch(colors.primary), + // secondary: swatch(colors.mainSecondary), + // error: swatch(colors.error), + // ) + // : ZetaColors.light( + // contrast: contrast, + // primary: swatch(colors.primary), + // secondary: swatch(colors.mainSecondary), + // error: swatch(colors.error), + // ); + // } /// Helper function to convert [ThemeMode] to string representation. static String _themeModeToString(ThemeMode themeMode) { @@ -360,15 +358,6 @@ class ZdsThemeData { switch (appBarStyle) { case ZetaAppBarStyle.surface: return 'surface'; - // This ignore is used because the `ZetaAppBarStyle.background` value is marked - // as deprecated within the same package. However, it is still in use in the - // codebase as part of the conversion process. Refactoring to remove the - // deprecated value requires replacing all instances of it, which will be done - // in a future update. This usage of the deprecated member is temporary until - // the transition is complete. - // ignore: deprecated_member_use_from_same_package - case ZetaAppBarStyle.background: - return 'background'; case ZetaAppBarStyle.secondary: return 'secondary'; case ZetaAppBarStyle.primary: @@ -411,9 +400,6 @@ class ZdsThemeData { /// Creates a copy of this [ZdsThemeData] but with the given fields replaced with the new values. /// - /// [themeData] (optional): The [ZetaThemeData] that is paired with [ZdsThemeData]. - /// This is the raw ThemeData instance that is used to construct the [ZdsThemeData] object. - /// /// [themeMode] (optional): Specifies the mode of the theme - light, dark etc. If a themeMode /// is not provided, it will default to the current [ZdsThemeData] theme mode. /// @@ -431,39 +417,54 @@ class ZdsThemeData { /// /// Returns a new [ZdsThemeData] instance. ZdsThemeData copyWith({ - ZetaThemeData? themeData, + ZetaCustomTheme? themeData, ThemeMode? themeMode, ZetaAppBarStyle? darkAppBarStyle, ZetaAppBarStyle? lightAppBarStyle, ZetaContrast? contrast, bool? adjustAccessibility, + String? fontFamily, }) { var lightColors = _lightColors; var darkColors = _darkColors; if (themeData != null) { lightColors = _ZdsBaseColors( - primary: themeData.colorsLight.primary.shade60, - secondary: themeData.colorsLight.secondary.shade60, - error: themeData.colorsLight.error.shade60, + primary: themeData.primary ?? const ZetaPrimitivesLight().blue, + secondary: themeData.secondary ?? const ZetaPrimitivesLight().blue, + error: const ZetaPrimitivesLight().red, ); darkColors = _ZdsBaseColors( - primary: themeData.colorsLight.primary.shade50, - secondary: themeData.colorsLight.secondary.shade50, - error: themeData.colorsLight.error.shade50, + primary: themeData.primaryDark ?? const ZetaPrimitivesDark().blue, + secondary: themeData.secondaryDark ?? const ZetaPrimitivesDark().blue, + error: const ZetaPrimitivesDark().red, ); } return ZdsThemeData._( lightColors: lightColors, darkColors: darkColors, - themeData: themeData ?? this.themeData, + // themeData: + // themeData: ThemeData(), + // themeData: themeData ?? this.themeData, themeMode: themeMode ?? this.themeMode, darkAppBarStyle: darkAppBarStyle ?? this.darkAppBarStyle, lightAppBarStyle: lightAppBarStyle ?? this.lightAppBarStyle, contrast: contrast ?? this.contrast, adjustAccessibility: adjustAccessibility ?? this.adjustAccessibility, + fontFamily: fontFamily ?? this.fontFamily, + ); + } + + /// Converts ZDS legacy theme to Zeta theme. + ZetaCustomTheme toCustomTheme() { + return ZetaCustomTheme( + id: 'zds', + primary: _lightColors.primary, + secondary: _lightColors.secondary, + primaryDark: _darkColors.primary, + secondaryDark: _darkColors.secondary, ); } } @@ -484,9 +485,9 @@ class ZetaSwatchGenerator { bool adjustAccessibility = false, }) { return ZetaColorSwatch( - contrast: contrast, - brightness: brightness, - primary: primary.value, + // contrast: contrast, + // brightness: brightness, + primary: primary.toARGB32(), swatch: primary.generateSwatch(background: background, adjustPrimary: adjustAccessibility), ).apply(brightness: brightness); } diff --git a/lib/src/utils/theme/theme_service.dart b/lib/src/utils/theme/theme_service.dart index 6183510b..9b558df4 100644 --- a/lib/src/utils/theme/theme_service.dart +++ b/lib/src/utils/theme/theme_service.dart @@ -1,6 +1,4 @@ import 'dart:convert'; - -import 'package:flutter/material.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; @@ -19,26 +17,6 @@ class ZdsThemeService extends ZetaThemeService { /// The optional [assetPath] parameter defines the path to theme assets. /// - This asset path should point to a valid json file. /// - The JSON string should conform to the structure of [ZdsThemeData]. - /// Example: - /// { - /// "identifier": "default", - /// "themeMode": "system", // Possible values "dark", "light", "system" - /// "contrast": "aa", // Possible values "aa", "aaa" - /// "fontFamily": "packages/zeta_flutter/IBMPlexSans", - /// "adjustAccessibility": true, - /// "light": { - /// "appBarStyle": "primary", // Possible values "surface", "background", "secondary", "primary" - /// "primary": "#0073e6", - /// "secondary": "#0073e6", - /// "error": "#D70015" - /// }, - /// "dark": { - /// "appBarStyle": "surface", // Possible values "surface", "background", "secondary", "primary" - /// "primary": "#0073e6", - /// "secondary": "#0073e6", - /// "error": "#D70015" - /// } - /// The [preferences] parameter manages local storage for user settings. ZdsThemeService({required this.preferences, this.assetPath}); /// The path to load theme assets from. @@ -63,26 +41,32 @@ class ZdsThemeService extends ZetaThemeService { /// An overridden method to load theme, theme mode, and contrast. /// - /// Returns a tuple containing `ZetaThemeData`, `ThemeMode`, and `ZetaContrast`. + /// Returns a `ZetaThemeServiceData` object containing theme data, mode, and contrast. @override - Future<(ZetaThemeData?, ThemeMode?, ZetaContrast?)> loadTheme() async { + Future loadTheme() async { final data = await load(); - return (data.themeData, data.themeMode, data.contrast); + return ZetaThemeServiceData( + // themeId: data.identifier, + themeMode: data.themeMode, + contrast: data.contrast, + // fontFamily: data.fontFamily, + ); } /// An overridden method to save the theme, theme mode, and contrast. /// /// Save the setting as a JSON string to local storage (`SharedPreferences`). /// - /// Called from [ZetaProvider] when any theme attribute is changed + /// Called from [ZetaProvider] when any theme attribute is changed. @override - Future saveTheme({ - required ZetaThemeData themeData, - required ThemeMode themeMode, - required ZetaContrast contrast, - }) async { + Future saveTheme({required ZetaThemeServiceData themeData}) async { final data = await load(); - final newData = data.copyWith(themeData: themeData, themeMode: themeMode, contrast: contrast); + final newData = data.copyWith( + // identifier: themeData.themeId, + themeMode: themeData.themeMode, + contrast: themeData.contrast, + // fontFamily: themeData.fontFamily, + ); await preferences.setString('zds.theme.preferences.json', jsonEncode(newData.toJson())); } } diff --git a/lib/src/utils/tools/modifiers.dart b/lib/src/utils/tools/modifiers.dart index 7cb93474..a1494226 100644 --- a/lib/src/utils/tools/modifiers.dart +++ b/lib/src/utils/tools/modifiers.dart @@ -443,27 +443,6 @@ extension RowLayout on Row { } } -/// A selection of modifiers on TextTheme. -extension TextThemeExtension on TextTheme { - /// TextStyle for tab item 1 - @Deprecated('Use bodyTextLarge, or bodyTextMedium if tab has icons.') - TextStyle get tabItem1 { - return bodyLarge!.copyWith(letterSpacing: 0.2); - } - - /// TextStyle tabitem2 - @Deprecated('Use bodyTextLarge, or bodyTextMedium if tab has icons.') - TextStyle get tabItem2 { - return bodyMedium!; - } - - /// TextStyle bodyText3 - @Deprecated('Use bodyTextSmall') - TextStyle get bodyText3 { - return titleLarge!.copyWith(fontWeight: FontWeight.w400); - } -} - /// Applies Semanctics to [Widget] extension SemanticsModifier on Widget { /// Include Semantics with label this widget. diff --git a/lib/src/utils/tools/nested_flow.dart b/lib/src/utils/tools/nested_flow.dart index 6fadb69e..097bae4b 100644 --- a/lib/src/utils/tools/nested_flow.dart +++ b/lib/src/utils/tools/nested_flow.dart @@ -30,25 +30,13 @@ class ZdsNestedFlow extends StatefulWidget { const ZdsNestedFlow({ super.key, this.onGenerateRoute, - @Deprecated('Use of shouldClose is redundant') this.shouldClose = true, - @Deprecated('Use child or builder property instead') this.rootPage, this.child, this.builder, }) : assert( - (child != null ? 1 : 0) + (builder != null ? 1 : 0) + (rootPage != null ? 1 : 0) == 1, - 'Exactly one of child, builder, or rootPage must be provided', + (child != null ? 1 : 0) + (builder != null ? 1 : 0) == 1, + 'Exactly one of child, or builder must be provided', ); - /// Root page for the navigator. - @Deprecated('Use child or builder property instead') - final Page? rootPage; - - /// Should page be closed when just root page remains on the stack, useful when added as root widget in TabBar. - /// - /// Defaults to true. - @Deprecated('Use of shouldClose is redundant') - final bool shouldClose; - /// Child widget for the navigator root page. final Widget? child; @@ -74,8 +62,6 @@ class ZdsNestedFlow extends StatefulWidget { void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties - ..add(DiagnosticsProperty>('rootPage', rootPage)) - ..add(DiagnosticsProperty('shouldClose', shouldClose)) ..add(DiagnosticsProperty('child', child)) ..add(ObjectFlagProperty.has('builder', builder)) ..add(ObjectFlagProperty.has('onGenerateRoute', onGenerateRoute)); @@ -111,9 +97,7 @@ class ZdsNestedFlowState extends State implements NavigatorObserv onGenerateRoute: widget.onGenerateRoute, onGenerateInitialRoutes: (navigator, initialRoute) { return [ - if (widget.rootPage != null) - widget.rootPage!.createRoute(context) - else if (widget.builder != null) + if (widget.builder != null) ZdsFadePageRouteBuilder( builder: (BuildContext context) { return PopScope( @@ -173,4 +157,7 @@ class ZdsNestedFlowState extends State implements NavigatorObserv Navigator.of(context).pop(await route.popped); } } + + @override + void didChangeTop(Route topRoute, Route? previousTopRoute) {} } diff --git a/lib/src/utils/tools/tab_navigator.dart b/lib/src/utils/tools/tab_navigator.dart index 39d76aee..0e61dd2b 100644 --- a/lib/src/utils/tools/tab_navigator.dart +++ b/lib/src/utils/tools/tab_navigator.dart @@ -356,6 +356,9 @@ class ZdsSplitNavigatorState extends State with FrameCallback ..add(DiagnosticsProperty>('navigatorKey', navigatorKey)) ..add(DiagnosticsProperty>('currentRoute', currentRoute)); } + + @override + void didChangeTop(Route topRoute, Route? previousTopRoute) {} } class _SplitContent extends StatelessWidget { @@ -395,7 +398,7 @@ class _SplitContent extends StatelessWidget { final List? boxShadow = boxShadowDivider ? [ BoxShadow( - color: themeData.colorScheme.onSurface.withOpacity(0.1), + color: themeData.colorScheme.onSurface.withValues(alpha: 0.1), blurRadius: 2, offset: const Offset(-1, 0), ), diff --git a/lib/src/utils/tools/utils.dart b/lib/src/utils/tools/utils.dart index 5e1960a4..4225bc44 100644 --- a/lib/src/utils/tools/utils.dart +++ b/lib/src/utils/tools/utils.dart @@ -261,9 +261,9 @@ extension LightHexColor on Color { /// Lightens this [Color]. Color withLight(double opacity, {Color? background}) { return Color.fromRGBO( - _transform(opacity, red, (background ?? Colors.white).red), - _transform(opacity, green, (background ?? Colors.white).green), - _transform(opacity, blue, (background ?? Colors.white).blue), + _transform(opacity, r, (background ?? Colors.white).r), + _transform(opacity, g, (background ?? Colors.white).g), + _transform(opacity, b, (background ?? Colors.white).b), 1, ); } @@ -290,22 +290,22 @@ extension LightHexColor on Color { /// /// Prefixes a hash sign if [leadingHashSign] is set to true (defaults to true). String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}' - '${alpha.toRadixString(16).padLeft(2, '0')}' - '${red.toRadixString(16).padLeft(2, '0')}' - '${green.toRadixString(16).padLeft(2, '0')}' - '${blue.toRadixString(16).padLeft(2, '0')}'; + '${(a * 255).round().toRadixString(16).padLeft(2, '0')}' + '${(r * 255).round().toRadixString(16).padLeft(2, '0')}' + '${(g * 255).round().toRadixString(16).padLeft(2, '0')}' + '${(b * 255).round().toRadixString(16).padLeft(2, '0')}'; /// Returns this Color's hexcode without the alpha channel. /// /// Prefixes a hash sign if [leadingHashSign] is set to true (defaults to true). String toHexNoAlpha({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}' - '${red.toRadixString(16).padLeft(2, '0')}' - '${green.toRadixString(16).padLeft(2, '0')}' - '${blue.toRadixString(16).padLeft(2, '0')}'; + '${(r * 255).round().toRadixString(16).padLeft(2, '0')}' + '${(g * 255).round().toRadixString(16).padLeft(2, '0')}' + '${(b * 255).round().toRadixString(16).padLeft(2, '0')}'; } -int _transform(double p, int t, int b) { - return (p * t + (1 - p) * b).round(); +int _transform(double p, num t, num b) { + return (p * (t * 255) + (1 - p) * (b * 255)).round(); } /// Render extensions on [BuildContext]. @@ -381,10 +381,10 @@ extension LaunchUrlInWebView on Uri { /// [shade] Shade from 0-1 Color getShadedColor(Color input, double shade) { return Color.fromARGB( - input.alpha, - changeShade(input.red, 1 - shade), - changeShade(input.green, 1 - shade), - changeShade(input.blue, 1 - shade), + input.a.round(), + changeShade(input.r.round(), 1 - shade), + changeShade(input.g.round(), 1 - shade), + changeShade(input.b.round(), 1 - shade), ); } @@ -417,13 +417,13 @@ Color getRandomColorFromTheme(Object? seed, {List? colors}) { if (colors == null || colors.isEmpty) { setColors = [ - ZetaColorBase.red, - ZetaColorBase.orange, - ZetaColorBase.yellow, - ZetaColorBase.green, - ZetaColorBase.blue, - ZetaColorBase.teal, - ZetaColorBase.pink, + const ZetaPrimitivesLight().red, + const ZetaPrimitivesLight().orange, + const ZetaPrimitivesLight().yellow, + const ZetaPrimitivesLight().green, + const ZetaPrimitivesLight().blue, + const ZetaPrimitivesLight().teal, + const ZetaPrimitivesLight().pink, ]; } else { setColors = colors; diff --git a/pubspec.yaml b/pubspec.yaml index 2233746e..5caf8f36 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -18,74 +18,80 @@ environment: flutter: ">=3.16.0" dependencies: - any_link_preview: ^3.0.2 + any_link_preview: ^3.0.3 cached_network_image: ^3.4.1 - camerawesome: 2.1.0 # TODO: Update this once repo is on 3.27.x - chewie: ^1.8.5 - collection: ^1.18.0 - crop_image: ^1.0.15 + camerawesome: ^2.4.0 + chewie: ^1.11.3 + collection: ^1.19.1 + crop_image: ^1.0.16 cross_file: ^0.3.4+2 - csslib: ^0.17.3 + csslib: ^1.0.2 dart_emoji: ^0.2.0+2 dropdown_button2: ^2.3.9 expand_tap_area: ^1.1.1 - extended_image: ^8.3.1 - file_picker: ^8.1.4 + extended_image: ^8.1.0 #TODO: Check this + file_picker: ^10.1.9 flutter: sdk: flutter flutter_colorpicker: ^1.1.0 - flutter_html: ^3.0.0-beta.2 - flutter_html_audio: ^3.0.0-beta.2 - flutter_html_svg: ^3.0.0-beta.2 - flutter_html_table: ^3.0.0-beta.2 - flutter_html_video: ^3.0.0-beta.2 - flutter_image_compress: ^2.3.0 + flutter_html: ^3.0.0 + flutter_html_audio: ^3.0.0 + flutter_html_svg: ^3.0.0 + flutter_html_table: ^3.0.0 + flutter_html_video: ^3.0.0 + flutter_image_compress: ^2.4.0 flutter_inappwebview: ^6.1.5 - flutter_layout_grid: ^2.0.7 + flutter_layout_grid: ^2.0.8 flutter_localizations: sdk: flutter - flutter_quill: ^10.8.2 - flutter_quill_extensions: ^10.8.2 - flutter_slidable: ^3.1.1 - flutter_svg: ^2.0.10+1 + flutter_quill: ^10.8.2 #TODO: Check this + flutter_quill_extensions: ^10.8.2 #TODO: Check this + flutter_slidable: ^4.0.0 + flutter_svg: ^2.1.0 flutter_swipe_action_cell: ^3.1.5 giphy_get: ^3.5.6 - html: ^0.15.4 + html: ^0.15.6 http_client_helper: ^3.0.0 image_editor_plus: ^1.0.6 image_picker: ^1.1.2 interval_time_picker: ^3.0.3+9 - intl: ^0.19.0 - just_audio: ^0.9.38 + intl: ^0.20.2 + just_audio: ^0.10.3 linked_scroll_controller: ^0.2.0 mime: ^2.0.0 - modal_bottom_sheet: ^3.0.0-pre + modal_bottom_sheet: ^3.0.0 open_file: ^3.5.10 painter: ^2.0.0 - path: ^1.9.0 - path_provider: ^2.1.3 - popover: ^0.3.0+1 - record: ^5.1.1 + path: ^1.9.1 + path_provider: ^2.1.5 + popover: ^0.3.1 + record: ^6.0.0 screenshot: ^3.0.0 - share_plus: ^10.0.3 - shared_preferences: ^2.2.3 + share_plus: ^11.0.0 + shared_preferences: ^2.5.3 shimmer: ^3.0.0 - table_calendar: ^3.1.2 + table_calendar: ^3.2.0 text_editor: ^0.7.0 universal_platform: ^1.1.0 - url_launcher: ^6.3.0 + url_launcher: ^6.3.1 validators: ^3.0.0 - video_compress: ^3.1.3 - video_player: ^2.8.6 + video_compress: ^3.1.4 + video_player: ^2.9.5 vsc_quill_delta_to_html: ^1.0.5 - zeta_flutter: ^0.20.2 + zeta_flutter: ^1.1.0 dev_dependencies: flutter_test: sdk: flutter - lottie: ^3.1.2 + lottie: ^3.3.1 zds_analysis: ^1.1.1 +dependency_overrides: + extended_image: ^10.0.1 + intl: ^0.20.2 + zeta_flutter_theme: + path: ../../zeta/zeta_flutter/packages/zeta_flutter_theme + flutter: uses-material-design: true assets: diff --git a/test/fixtures/test_app.dart b/test/fixtures/test_app.dart index ef722491..7dc5a659 100644 --- a/test/fixtures/test_app.dart +++ b/test/fixtures/test_app.dart @@ -16,7 +16,7 @@ class TestApp extends StatelessWidget { ComponentDelegate(testing: true), ], home: ZetaProvider( - builder: (context, themeData, themeMode) { + builder: (context, themeData, darkTheme, themeMode) { return Scaffold(body: builder.call(context)); }, ),