fix: [MDS-596] Refactor theming for extensibility (#210)

coingaming · Jul 18, 2023 · 2c1cd27 · 2c1cd27
1 parent 48f892e
commit 2c1cd27
Show file tree

Hide file tree

Showing 165 changed files with 2,406 additions and 2,816 deletions.
diff --git a/README.md b/README.md
@@ -15,4 +15,49 @@ to write commit messages._
 
 ## Resources
 
-- 📖 [Documentation](https://flutter.moon.io)
+- 📱 [Playground](https://flutter.moon.io)
+
+
+## Applying theming and overrides
+
+- Declare tokens variable and optionally override values:
+
+```dart
+final lightTokens = MoonTokens.light.copyWith(
+  colors: MoonColors.light.copyWith(
+    piccolo: Colors.blue,
+    bodyTextPrimary: Colors.amber,
+  ),
+  typography: MoonTypography.typography.copyWith(
+    heading: MoonTypography.typography.heading.apply(fontFamily: "KumbhSans"),
+  ),
+);
+
+final lightTheme = ThemeData.light().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme(tokens: lightTokens)]);
+```
+
+- Or if needed override widget theming:
+
+```dart
+final lightTheme = ThemeData.light().copyWith(
+  extensions: <ThemeExtension<dynamic>>[
+    MoonTheme(tokens: lightTokens).copyWith(
+      accordionTheme: MoonAccordionTheme(tokens: lightTokens).copyWith(
+        colors: MoonAccordionTheme(tokens: lightTokens).colors.copyWith(
+              backgroundColor: Colors.green,
+            ),
+      ),
+    ),
+  ],
+);
+```
+
+- Apply the declared theme:
+
+```dart
+return MaterialApp(
+      title: 'MDS example',
+      theme: lightTheme,
+      home: const HomePage(),
+ );
+```
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -48,8 +48,10 @@ class _HomePageState extends State<HomePage> {
     return _isInStorybookMode
         ? const StorybookPage()
         : MaterialApp(
-            theme: ThemeData.light().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme.light]),
-            darkTheme: ThemeData.dark().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme.dark]),
+            theme:
+                ThemeData.light().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme(tokens: MoonTokens.light)]),
+            darkTheme:
+                ThemeData.dark().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme(tokens: MoonTokens.dark)]),
             home: Scaffold(
               body: Center(
                 child: Column(

diff --git a/example/lib/src/storybook/common/widgets/version.dart b/example/lib/src/storybook/common/widgets/version.dart
@@ -1,7 +1,6 @@
 import 'package:example/src/storybook/storybook.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
-
 import 'package:moon_design/moon_design.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 
@@ -41,11 +40,11 @@ class _MoonVersionWidgetState extends State<MoonVersionWidget> {
                 const SizedBox(width: 8.0),
                 Text(
                   "Moon Design",
-                  style: MoonTextStyles.heading.text16,
+                  style: MoonTypography.typography.heading.text16,
                 ),
               ],
               const SizedBox(width: 6.0),
-              Text("v$_version", style: MoonTextStyles.heading.text16),
+              Text("v$_version", style: MoonTypography.typography.heading.text16),
             ],
           ),
         ),

diff --git a/example/lib/src/storybook/stories/accordion.dart b/example/lib/src/storybook/stories/accordion.dart
@@ -17,12 +17,12 @@ class AccordionStory extends Story {
               label: "accordionSize",
               description: "Size variants for MoonAccordion.",
               enabled: false,
-              initial: MoonAccordionItemSize.md,
+              initial: MoonAccordionSize.md,
               options: const [
-                Option(label: "sm", value: MoonAccordionItemSize.sm),
-                Option(label: "md", value: MoonAccordionItemSize.md),
-                Option(label: "lg", value: MoonAccordionItemSize.lg),
-                Option(label: "xl", value: MoonAccordionItemSize.xl)
+                Option(label: "sm", value: MoonAccordionSize.sm),
+                Option(label: "md", value: MoonAccordionSize.md),
+                Option(label: "lg", value: MoonAccordionSize.lg),
+                Option(label: "xl", value: MoonAccordionSize.xl)
               ],
             );
 
@@ -180,7 +180,7 @@ class AccordionStory extends Story {
                     const SizedBox(height: 64),
                     const TextDivider(text: "Grouped MoonAccordion"),
                     const SizedBox(height: 32),
-                    MoonAccordionItem<AccordionItems>(
+                    MoonAccordion<AccordionItems>(
                       identityValue: AccordionItems.first,
                       groupIdentityValue: currentlyOpenAccordionItem,
                       accordionSize: accordionSizesKnob,
@@ -211,7 +211,7 @@ class AccordionStory extends Story {
                       ],
                     ),
                     const SizedBox(height: 8),
-                    MoonAccordionItem<AccordionItems>(
+                    MoonAccordion<AccordionItems>(
                       identityValue: AccordionItems.second,
                       groupIdentityValue: currentlyOpenAccordionItem,
                       initiallyExpanded: true,
@@ -245,7 +245,7 @@ class AccordionStory extends Story {
                     const SizedBox(height: 40),
                     const TextDivider(text: "Ungrouped MoonAccordion with content outside"),
                     const SizedBox(height: 32),
-                    MoonAccordionItem<AccordionItems>(
+                    MoonAccordion<AccordionItems>(
                       accordionSize: accordionSizesKnob,
                       initiallyExpanded: true,
                       hasContentOutside: true,
@@ -272,7 +272,7 @@ class AccordionStory extends Story {
                       ],
                     ),
                     const SizedBox(height: 8),
-                    MoonAccordionItem<AccordionItems>(
+                    MoonAccordion<AccordionItems>(
                       accordionSize: accordionSizesKnob,
                       hasContentOutside: true,
                       leadingColor: leadingColor,

diff --git a/example/lib/src/storybook/stories/bottom_sheet.dart b/example/lib/src/storybook/stories/bottom_sheet.dart
@@ -57,7 +57,7 @@ class BottomSheetStory extends Story {
                           height: 4,
                           width: 41,
                           decoration: ShapeDecoration(
-                            color: context.moonTheme!.colors.beerus,
+                            color: context.moonColors!.beerus,
                             shape: const StadiumBorder(),
                           ),
                         ),

diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart
@@ -245,7 +245,7 @@ class ButtonStory extends Story {
                         padding: const EdgeInsets.all(4),
                         child: CircularProgressIndicator(
                           strokeWidth: 2,
-                          color: context.moonTheme!.colors.popo,
+                          color: context.moonColors!.popo,
                         ),
                       ),
                     ),
@@ -268,8 +268,8 @@ class ButtonStory extends Story {
                           begin: Alignment.topLeft,
                           end: Alignment.bottomRight,
                           colors: [
-                            context.moonTheme!.colors.krillin100,
-                            context.moonTheme!.colors.dodoria100,
+                            context.moonColors!.krillin100,
+                            context.moonColors!.dodoria100,
                           ],
                         ),
                         shape: const StarBorder(pointRounding: 0.5, valleyRounding: 0.5),
@@ -278,7 +278,7 @@ class ButtonStory extends Story {
                         width: 32,
                         height: 32,
                         child: CircleAvatar(
-                          backgroundColor: context.moonTheme!.colors.frieza60,
+                          backgroundColor: context.moonColors!.frieza60,
                           child: const MoonIcon(
                             MoonIcons.rocket_24,
                             size: 24,

diff --git a/example/lib/src/storybook/stories/carousel.dart b/example/lib/src/storybook/stories/carousel.dart
@@ -75,7 +75,7 @@ class CarouselStory extends Story {
                         loop: isLoopedKnob,
                         itemBuilder: (context, itemIndex, realIndex) => Container(
                           decoration: ShapeDecoration(
-                            color: context.moonTheme?.colors.gohan,
+                            color: context.moonColors!.gohan,
                             shape: MoonSquircleBorder(
                               borderRadius: BorderRadius.circular(12).squircleBorderRadius(context),
                             ),

diff --git a/example/lib/src/storybook/stories/chip.dart b/example/lib/src/storybook/stories/chip.dart
@@ -163,7 +163,7 @@ class ChipStory extends Story {
                       activeColor: context.moonColors!.dodoria100,
                       backgroundColor: context.moonColors!.krillin100,
                       activeBackgroundColor: context.moonColors!.chiChi10,
-                      textColor: context.moonTypography!.colors.controlPrimary,
+                      textColor: context.moonColors!.goten,
                       borderWidth: 2,
                       showBorder: showBorderKnob,
                       chipSize: chipSizesKnob,

diff --git a/example/lib/src/storybook/stories/tooltip.dart b/example/lib/src/storybook/stories/tooltip.dart
@@ -173,7 +173,7 @@ class TooltipStory extends Story {
                     borderRadius: BorderRadius.circular(20),
                     backgroundColor: context.moonColors!.hit,
                     leading: const MoonIcon(MoonIcons.frame_24),
-                    textColor: context.moonTypography!.colors.controlPrimary,
+                    textColor: context.moonColors!.goten,
                     label: const Text("MoonChip"),
                   ),
                   const SizedBox(height: 64),

diff --git a/example/lib/src/storybook/storybook.dart b/example/lib/src/storybook/storybook.dart
@@ -57,8 +57,10 @@ class StorybookPage extends StatelessWidget {
           brandingWidget: const MoonVersionWidget(),
           wrapperBuilder: (context, child) => MaterialApp(
             title: "Moon Design for Flutter",
-            theme: ThemeData.light().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme.light]),
-            darkTheme: ThemeData.dark().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme.dark]),
+            theme:
+                ThemeData.light().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme(tokens: MoonTokens.light)]),
+            darkTheme:
+                ThemeData.dark().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme(tokens: MoonTokens.dark)]),
             home: Directionality(
               textDirection: Directionality.of(context),
               child: Focus(

diff --git a/lib/moon_design.dart b/lib/moon_design.dart
@@ -5,37 +5,35 @@ export 'package:moon_design/src/theme/accordion/accordion_theme.dart';
 export 'package:moon_design/src/theme/alert/alert_theme.dart';
 export 'package:moon_design/src/theme/authcode/authcode_theme.dart';
 export 'package:moon_design/src/theme/avatar/avatar_theme.dart';
-export 'package:moon_design/src/theme/borders.dart';
 export 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_theme.dart';
 export 'package:moon_design/src/theme/button/button_theme.dart';
 export 'package:moon_design/src/theme/carousel/carousel_theme.dart';
 export 'package:moon_design/src/theme/checkbox/checkbox_theme.dart';
 export 'package:moon_design/src/theme/chip/chip_theme.dart';
-export 'package:moon_design/src/theme/colors.dart';
 export 'package:moon_design/src/theme/dot_indicator/dot_indicator_theme.dart';
 export 'package:moon_design/src/theme/drawer/drawer_theme.dart';
-export 'package:moon_design/src/theme/effects/effects.dart';
-export 'package:moon_design/src/theme/icons/icon_theme.dart';
+export 'package:moon_design/src/theme/effects/effects_theme.dart';
 export 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart';
 export 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_theme.dart';
 export 'package:moon_design/src/theme/modal/modal_theme.dart';
-export 'package:moon_design/src/theme/opacity.dart';
 export 'package:moon_design/src/theme/popover/popover_theme.dart';
 export 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart';
 export 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart';
 export 'package:moon_design/src/theme/radio/radio_theme.dart';
 export 'package:moon_design/src/theme/segmented_control/segmented_control_theme.dart';
-export 'package:moon_design/src/theme/shadows.dart';
-export 'package:moon_design/src/theme/sizes.dart';
 export 'package:moon_design/src/theme/switch/switch_theme.dart';
 export 'package:moon_design/src/theme/text_area/text_area_theme.dart';
 export 'package:moon_design/src/theme/text_input/text_input_theme.dart';
 export 'package:moon_design/src/theme/theme.dart';
 export 'package:moon_design/src/theme/toast/toast_theme.dart';
+export 'package:moon_design/src/theme/tokens/borders.dart';
+export 'package:moon_design/src/theme/tokens/colors.dart';
+export 'package:moon_design/src/theme/tokens/opacities.dart';
+export 'package:moon_design/src/theme/tokens/shadows.dart';
+export 'package:moon_design/src/theme/tokens/sizes.dart';
+export 'package:moon_design/src/theme/tokens/tokens.dart';
+export 'package:moon_design/src/theme/tokens/typography/typography.dart';
 export 'package:moon_design/src/theme/tooltip/tooltip_theme.dart';
-export 'package:moon_design/src/theme/typography/text_colors.dart';
-export 'package:moon_design/src/theme/typography/text_styles.dart';
-export 'package:moon_design/src/theme/typography/typography.dart';
 
 export 'package:moon_design/src/utils/color_premul_lerp.dart';
 export 'package:moon_design/src/utils/color_tween_premul.dart';
@@ -46,7 +44,7 @@ export 'package:moon_design/src/utils/squircle/squircle_border.dart';
 export 'package:moon_design/src/utils/squircle/squircle_border_radius.dart';
 export 'package:moon_design/src/utils/squircle/squircle_radius.dart';
 
-export 'package:moon_design/src/widgets/accordion/accordion_item.dart';
+export 'package:moon_design/src/widgets/accordion/accordion.dart';
 export 'package:moon_design/src/widgets/alert/alert.dart';
 export 'package:moon_design/src/widgets/alert/filled_alert.dart';
 export 'package:moon_design/src/widgets/alert/outlined_alert.dart';

diff --git a/...heme/accordion/accordion_item_colors.dart → ...src/theme/accordion/accordion_colors.dart b/...heme/accordion/accordion_item_colors.dart → ...src/theme/accordion/accordion_colors.dart
@@ -1,44 +1,10 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
-import 'package:moon_design/src/theme/colors.dart';
-import 'package:moon_design/src/theme/typography/typography.dart';
 import 'package:moon_design/src/utils/color_premul_lerp.dart';
 
 @immutable
-class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> with DiagnosticableTreeMixin {
-  static final light = MoonAccordionItemColors(
-    leadingColor: MoonTypography.light.colors.bodyPrimary,
-    expandedLeadingColor: MoonTypography.light.colors.bodyPrimary,
-    titleColor: MoonTypography.light.colors.bodyPrimary,
-    expandedTitleColor: MoonTypography.light.colors.bodyPrimary,
-    trailingColor: MoonTypography.light.colors.bodyPrimary,
-    expandedTrailingColor: MoonTypography.light.colors.bodyPrimary,
-    contentColor: MoonTypography.light.colors.bodyPrimary,
-    trailingIconColor: MoonTypography.light.colors.bodySecondary,
-    expandedTrailingIconColor: MoonTypography.light.colors.bodyPrimary,
-    backgroundColor: MoonColors.light.gohan,
-    expandedBackgroundColor: MoonColors.light.gohan,
-    borderColor: MoonColors.light.beerus,
-    dividerColor: MoonColors.light.beerus,
-  );
-
-  static final dark = MoonAccordionItemColors(
-    leadingColor: MoonTypography.dark.colors.bodyPrimary,
-    expandedLeadingColor: MoonTypography.dark.colors.bodyPrimary,
-    titleColor: MoonTypography.dark.colors.bodyPrimary,
-    expandedTitleColor: MoonTypography.dark.colors.bodyPrimary,
-    trailingColor: MoonTypography.dark.colors.bodyPrimary,
-    expandedTrailingColor: MoonTypography.dark.colors.bodyPrimary,
-    contentColor: MoonTypography.dark.colors.bodyPrimary,
-    trailingIconColor: MoonTypography.dark.colors.bodySecondary,
-    expandedTrailingIconColor: MoonTypography.dark.colors.bodyPrimary,
-    backgroundColor: MoonColors.dark.gohan,
-    expandedBackgroundColor: MoonColors.dark.gohan,
-    borderColor: MoonColors.dark.beerus,
-    dividerColor: MoonColors.dark.beerus,
-  );
-
+class MoonAccordionColors extends ThemeExtension<MoonAccordionColors> with DiagnosticableTreeMixin {
   /// Collapsed accordion item leading slot widget's text and icon color.
   final Color leadingColor;
 
@@ -78,7 +44,7 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
   /// Accordion item divider color.
   final Color dividerColor;
 
-  const MoonAccordionItemColors({
+  const MoonAccordionColors({
     required this.leadingColor,
     required this.expandedLeadingColor,
     required this.titleColor,
@@ -95,7 +61,7 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
   });
 
   @override
-  MoonAccordionItemColors copyWith({
+  MoonAccordionColors copyWith({
     Color? leadingColor,
     Color? expandedLeadingColor,
     Color? titleColor,
@@ -110,7 +76,7 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
     Color? borderColor,
     Color? dividerColor,
   }) {
-    return MoonAccordionItemColors(
+    return MoonAccordionColors(
       leadingColor: leadingColor ?? this.leadingColor,
       expandedLeadingColor: expandedLeadingColor ?? this.expandedLeadingColor,
       titleColor: titleColor ?? this.titleColor,
@@ -128,10 +94,10 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
   }
 
   @override
-  MoonAccordionItemColors lerp(ThemeExtension<MoonAccordionItemColors>? other, double t) {
-    if (other is! MoonAccordionItemColors) return this;
+  MoonAccordionColors lerp(ThemeExtension<MoonAccordionColors>? other, double t) {
+    if (other is! MoonAccordionColors) return this;
 
-    return MoonAccordionItemColors(
+    return MoonAccordionColors(
       leadingColor: colorPremulLerp(leadingColor, other.leadingColor, t)!,
       expandedLeadingColor: colorPremulLerp(expandedLeadingColor, other.expandedLeadingColor, t)!,
       titleColor: colorPremulLerp(titleColor, other.titleColor, t)!,
@@ -152,7 +118,7 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties
-      ..add(DiagnosticsProperty("type", "MoonAccordionItemColors"))
+      ..add(DiagnosticsProperty("type", "MoonAccordionColors"))
       ..add(ColorProperty("leadingColor", leadingColor))
       ..add(ColorProperty("expandedLeadingColor", expandedLeadingColor))
       ..add(ColorProperty("titleColor", titleColor))