Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui_kit): atomic design system #19

Merged
merged 10 commits into from
Feb 24, 2024
Merged

refactor(ui_kit): atomic design system #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
bed5b9c
refactor(size): move size to tokens layer
ryanaidilp Feb 24, 2024
2b76ce0
refactor(sizes): use new size class
ryanaidilp Feb 24, 2024
8775beb
refactor(text_style): extract text style to tokens and foundation
ryanaidilp Feb 24, 2024
b582d43
refactor(typography): refactor typography implementation
ryanaidilp Feb 24, 2024
2504ae7
refactor(page): update color playground
ryanaidilp Feb 24, 2024
6a7d03e
refactor(components): move assets and button to atoms
ryanaidilp Feb 24, 2024
fed449b
refactor(media-query): update text scale factor
ryanaidilp Feb 24, 2024
4419e55
refactor(theme): move theme to foundations
ryanaidilp Feb 24, 2024
0ff9a65
refactor(export): update export code
ryanaidilp Feb 24, 2024
b3cbee1
fix(widgetbook): fix duplicate use case name
ryanaidilp Feb 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 9 additions & 14 deletions app/smart/lib/error_app.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
),
),
],
Expand All @@ -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),
],
),
),
Expand Down
7 changes: 0 additions & 7 deletions app/smart_widgetbook/lib/data/colors.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
Expand Down
18 changes: 7 additions & 11 deletions app/smart_widgetbook/lib/presentation/pages/animation_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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,
Expand All @@ -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,
),
),
Expand Down
34 changes: 17 additions & 17 deletions app/smart_widgetbook/lib/presentation/pages/button_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
Expand Down Expand Up @@ -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(
Expand All @@ -119,7 +119,7 @@ class _ButtonList extends StatelessWidget {
onPressed: () async {},
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -132,7 +132,7 @@ class _ButtonList extends StatelessWidget {
),
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -145,7 +145,7 @@ class _ButtonList extends StatelessWidget {
),
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -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,
Expand All @@ -180,7 +180,7 @@ class _ButtonList extends StatelessWidget {
onPressed: () async {},
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -194,7 +194,7 @@ class _ButtonList extends StatelessWidget {
),
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -208,7 +208,7 @@ class _ButtonList extends StatelessWidget {
),
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -226,7 +226,7 @@ class _ButtonList extends StatelessWidget {
),
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -235,7 +235,7 @@ class _ButtonList extends StatelessWidget {
type: SmartButtonType.outline,
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -245,7 +245,7 @@ class _ButtonList extends StatelessWidget {
onPressed: () async {},
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -259,7 +259,7 @@ class _ButtonList extends StatelessWidget {
),
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -273,7 +273,7 @@ class _ButtonList extends StatelessWidget {
),
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand All @@ -291,7 +291,7 @@ class _ButtonList extends StatelessWidget {
),
),
Gap(
SmartDimension.v8,
SmartDimension.size8.h,
),
SmartButton(
variant: variant,
Expand Down
6 changes: 2 additions & 4 deletions app/smart_widgetbook/lib/presentation/pages/color_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
),
);
Expand Down
14 changes: 5 additions & 9 deletions app/smart_widgetbook/lib/presentation/pages/logo_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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,
Expand All @@ -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,
),
],
Expand Down
2 changes: 1 addition & 1 deletion app/smart_widgetbook/lib/widgetbook.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
6 changes: 2 additions & 4 deletions app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/background_color_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
),
Expand Down
8 changes: 3 additions & 5 deletions app/smart_widgetbook/lib/widgetbook/pages/foundations/colors/icon_color_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
],
),
Expand Down
Loading
Loading