Merge pull request #19 from banua-coder/feature/atomic-design-system

refactor(ui_kit): atomic design system
banua-coder · Feb 24, 2024 · 4672936 · 4672936
2 parents 174f227 + b3cbee1
commit 4672936
Show file tree

Hide file tree

Showing 83 changed files with 713 additions and 245 deletions.
diff --git a/app/smart/lib/error_app.dart b/app/smart/lib/error_app.dart
@@ -29,21 +29,19 @@ class ErrorApp extends StatelessWidget {
                           width: 0.5.sw,
                           fit: BoxFit.cover,
                         ),
-                        Gap(SmartDimension.h16),
-                        Text(
+                        Gap(SmartDimension.size16.h),
+                        SmartTextHeadingXs(
                           context.i10n.errors.somethingWrong.description,
                           textAlign: TextAlign.center,
-                          style: SmartTextStyle.headingXs(),
                         ),
-                        Gap(SmartDimension.h8),
+                        Gap(SmartDimension.size8.h),
                         Padding(
                           padding: EdgeInsets.symmetric(
-                            horizontal: SmartDimension.v64,
+                            horizontal: SmartDimension.size64.w,
                           ),
-                          child: Text(
+                          child: SmartTextBodySm(
                             context.i10n.errors.somethingWrong.description,
                             textAlign: TextAlign.center,
-                            style: SmartTextStyle.bodySm(),
                           ),
                         ),
                       ],
@@ -63,22 +61,19 @@ class ErrorApp extends StatelessWidget {
                           mainAxisAlignment: MainAxisAlignment.center,
                           mainAxisSize: MainAxisSize.min,
                           children: [
-                            Text(
+                            SmartTextBodySm(
                               getIt<PackageInfoUtil>().appName(),
-                              style: SmartTextStyle.bodySm(),
                             ),
                             const Text(
                               ' - ',
                             ),
-                            Text(
+                            SmartTextBodySm(
                               'v${getIt<PackageInfoUtil>().version()}',
-                              style: SmartTextStyle.bodySm(
-                                fontWeight: FontWeight.w700,
-                              ),
+                              fontWeight: FontWeight.w700,
                             ),
                           ],
                         ),
-                        Gap(SmartDimension.h32),
+                        Gap(SmartDimension.size32.h),
                       ],
                     ),
                   ),

diff --git a/app/smart_widgetbook/lib/data/colors.dart b/app/smart_widgetbook/lib/data/colors.dart
@@ -337,43 +337,36 @@ List<ColorData> getColors(BuildContext context) => [
       ),
       ColorData(
         token: 'outline.color.primary',
-        textColor: Colors.white,
         color: context.smartColor.outline.color.primary,
         colorType: ColorType.outline,
       ),
       ColorData(
         token: 'outline.color.secondary',
-        textColor: Colors.white,
         color: context.smartColor.outline.color.secondary,
         colorType: ColorType.outline,
       ),
       ColorData(
         token: 'outline.color.gray',
-        textColor: Colors.white,
         color: context.smartColor.outline.color.gray,
         colorType: ColorType.outline,
       ),
       ColorData(
         token: 'outline.color.info',
-        textColor: Colors.white,
         color: context.smartColor.outline.color.info,
         colorType: ColorType.outline,
       ),
       ColorData(
         token: 'outline.color.success',
-        textColor: Colors.white,
         color: context.smartColor.outline.color.success,
         colorType: ColorType.outline,
       ),
       ColorData(
         token: 'outline.color.warning',
-        textColor: Colors.white,
         color: context.smartColor.outline.color.warning,
         colorType: ColorType.outline,
       ),
       ColorData(
         token: 'outline.color.error',
-        textColor: Colors.white,
         color: context.smartColor.outline.color.error,
         colorType: ColorType.outline,
       ),

diff --git a/app/smart_widgetbook/lib/presentation/pages/animation_page.dart b/app/smart_widgetbook/lib/presentation/pages/animation_page.dart
@@ -15,11 +15,11 @@ class AnimationPage extends StatelessWidget {
         ],
       ),
       body: Padding(
-        padding: EdgeInsets.all(SmartDimension.r16),
+        padding: EdgeInsets.all(SmartDimension.size16.r),
         child: StaggeredGrid.count(
           crossAxisCount: 2,
-          crossAxisSpacing: SmartDimension.h16,
-          mainAxisSpacing: SmartDimension.v16,
+          crossAxisSpacing: SmartDimension.size16.w,
+          mainAxisSpacing: SmartDimension.size16.h,
           children: List.generate(
             SmartAnimations.values.length,
             (index) => Container(
@@ -31,7 +31,7 @@ class AnimationPage extends StatelessWidget {
                 ),
                 color: context.smartColor.background.card.main,
               ),
-              padding: EdgeInsets.all(SmartDimension.r16),
+              padding: EdgeInsets.all(SmartDimension.size16.r),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 mainAxisSize: MainAxisSize.min,
@@ -42,17 +42,13 @@ class AnimationPage extends StatelessWidget {
                     animation: SmartAnimations.values[index],
                     fit: BoxFit.contain,
                   ),
-                  Gap(SmartDimension.v8),
+                  Gap(SmartDimension.size8.h),
                   Padding(
                     padding: EdgeInsets.symmetric(
-                      horizontal: SmartDimension.h16,
+                      horizontal: SmartDimension.size16.w,
                     ),
-                    child: SelectableText(
+                    child: SmartTextBodyXs(
                       SmartAnimations.values[index].name,
-                      style: SmartTextStyle.bodyXs(
-                        fontWeight: FontWeight.bold,
-                        color: context.smartColor.text.neutral.subtle,
-                      ),
                       textAlign: TextAlign.center,
                     ),
                   ),

diff --git a/app/smart_widgetbook/lib/presentation/pages/button_page.dart b/app/smart_widgetbook/lib/presentation/pages/button_page.dart
@@ -61,8 +61,8 @@ class _ButtonPageState extends State<ButtonPage> {
                     color: context.smartColor.icon.neutral.main,
                     size: 20.sp,
                   ),
-                  label: Text(value.name),
-                  labelStyle: SmartTextStyle.bodySm(
+                  label: SmartTextBodySm(
+                    value.name,
                     fontWeight: FontWeight.bold,
                     color: context.smartColor.text.neutral.strong,
                   ),
@@ -109,7 +109,7 @@ class _ButtonList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => SingleChildScrollView(
-        padding: EdgeInsets.all(SmartDimension.r16),
+        padding: EdgeInsets.all(SmartDimension.size16.r),
         child: Column(
           children: [
             SmartButton(
@@ -119,7 +119,7 @@ class _ButtonList extends StatelessWidget {
               onPressed: () async {},
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -132,7 +132,7 @@ class _ButtonList extends StatelessWidget {
               ),
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -145,7 +145,7 @@ class _ButtonList extends StatelessWidget {
               ),
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -162,15 +162,15 @@ class _ButtonList extends StatelessWidget {
               ),
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
               size: size,
               label: 'Filled (Disabled)',
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -180,7 +180,7 @@ class _ButtonList extends StatelessWidget {
               onPressed: () async {},
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -194,7 +194,7 @@ class _ButtonList extends StatelessWidget {
               ),
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -208,7 +208,7 @@ class _ButtonList extends StatelessWidget {
               ),
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -226,7 +226,7 @@ class _ButtonList extends StatelessWidget {
               ),
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -235,7 +235,7 @@ class _ButtonList extends StatelessWidget {
               type: SmartButtonType.outline,
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -245,7 +245,7 @@ class _ButtonList extends StatelessWidget {
               onPressed: () async {},
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -259,7 +259,7 @@ class _ButtonList extends StatelessWidget {
               ),
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -273,7 +273,7 @@ class _ButtonList extends StatelessWidget {
               ),
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,
@@ -291,7 +291,7 @@ class _ButtonList extends StatelessWidget {
               ),
             ),
             Gap(
-              SmartDimension.v8,
+              SmartDimension.size8.h,
             ),
             SmartButton(
               variant: variant,

diff --git a/app/smart_widgetbook/lib/presentation/pages/color_page.dart b/app/smart_widgetbook/lib/presentation/pages/color_page.dart
@@ -44,11 +44,9 @@ class _ColorItem extends StatelessWidget {
         height: 48.h,
         color: color,
         child: Center(
-          child: Text(
+          child: SmartTextBody(
             '$name - $color',
-            style: SmartTextStyle.body(
-              color: textColor ?? context.smartColor.text.neutral.main,
-            ),
+            color: textColor,
           ),
         ),
       );

diff --git a/app/smart_widgetbook/lib/presentation/pages/logo_page.dart b/app/smart_widgetbook/lib/presentation/pages/logo_page.dart
@@ -15,11 +15,11 @@ class LogoPage extends StatelessWidget {
         ],
       ),
       body: Padding(
-        padding: EdgeInsets.all(SmartDimension.r16),
+        padding: EdgeInsets.all(SmartDimension.size16.r),
         child: StaggeredGrid.count(
           crossAxisCount: 2,
-          crossAxisSpacing: SmartDimension.h16,
-          mainAxisSpacing: SmartDimension.v16,
+          crossAxisSpacing: SmartDimension.size16.w,
+          mainAxisSpacing: SmartDimension.size16.h,
           children: List.generate(
             SmartLogo.values.length,
             (index) => Container(
@@ -31,7 +31,7 @@ class LogoPage extends StatelessWidget {
                 ),
                 color: context.smartColor.background.card.main,
               ),
-              padding: EdgeInsets.all(SmartDimension.r16),
+              padding: EdgeInsets.all(SmartDimension.size16.r),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 mainAxisSize: MainAxisSize.min,
@@ -42,12 +42,8 @@ class LogoPage extends StatelessWidget {
                     logo: SmartLogo.values[index],
                     fit: BoxFit.contain,
                   ),
-                  SelectableText(
+                  SmartTextBodyXs(
                     SmartLogo.values[index].name,
-                    style: SmartTextStyle.bodyXs(
-                      fontWeight: FontWeight.bold,
-                      color: context.smartColor.text.neutral.subtle,
-                    ),
                     textAlign: TextAlign.center,
                   ),
                 ],

diff --git a/app/smart_widgetbook/lib/widgetbook.dart b/app/smart_widgetbook/lib/widgetbook.dart
@@ -15,7 +15,7 @@ class WidgetbookApp extends StatelessWidget {
         directories: directories,
         addons: [
           TextScaleAddon(
-            scales: [1.0, 2.0],
+            scales: [1.0, 1.2],
             initialScale: 1,
           ),
           ZoomAddon(),

diff --git a/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/background_color_page.dart b/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/background_color_page.dart
@@ -25,11 +25,9 @@ class BackgroundColorPage extends StatelessWidget {
               color: context.smartColor.outline.neutral.main,
             ),
           ),
-          child: Text(
+          child: SmartTextBody(
             colorData.token.replaceAll('.', '/'),
-            style: SmartTextStyle.body(
-              color: colorData.textColor,
-            ),
+            color: colorData.textColor,
             textAlign: TextAlign.center,
           ),
         ),

diff --git a/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/icon_color_page.dart b/app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/icon_color_page.dart
@@ -25,12 +25,10 @@ class IconColorPage extends StatelessWidget {
               size: 24.sp,
               color: colorData.color,
             ),
-            Gap(SmartDimension.h12),
-            Text(
+            Gap(SmartDimension.size12.w),
+            SmartTextBody(
               colorData.token.replaceAll('.', '/'),
-              style: SmartTextStyle.body(
-                color: colorData.color,
-              ),
+              color: colorData.color,
             ),
           ],
         ),