Skip to content

Commit

Permalink
feat: setup colors and text styles (#4)
Browse files Browse the repository at this point in the history 
* setup colors and text styles

* fix linter

* add seed
  • Loading branch information
@cecipirotto
cecipirotto authored Oct 4, 2023
1 parent 48e7a57 commit c667012
Show file tree
Hide file tree
Showing 2 changed files with 186 additions and 34 deletions.
157 changes: 138 additions & 19 deletions supabase-ws-flutter-mobile/lib/ui/theme/app_colors.dart
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,40 @@
// ignore_for_file: overridden_fields

import 'package:flutter/material.dart';
import 'package:material_color_generator/material_color_generator.dart';

// Colors name extracted from https://www.color-name.com
@immutable
class AppColors extends ColorScheme {
@override
final Color onPrimary;
@override
// ignore: overridden_fields
final MaterialColor primary;
@override
final MaterialColor surface;
// ignore: overridden_fields
final MaterialColor background;
@override
// ignore: overridden_fields
final MaterialColor error;

final MaterialColor textColor;
final MaterialColor info;
final MaterialColor success;
final MaterialColor warning;

const AppColors({
required Brightness brightness,
required this.primary,
required this.onPrimary,
required this.background,
required this.textColor,
required this.info,
required this.success,
required this.warning,
required this.error,
required Brightness brightness,
required Color onPrimary,
required Color secondary,
required Color onSecondary,
required Color error,
required Color onError,
required Color background,
required Color onBackground,
required this.surface,
required Color surface,
required Color onSurface,
required ColorScheme colorScheme,
}) : super(
brightness: brightness,
primary: primary,
Expand All @@ -39,17 +49,126 @@ class AppColors extends ColorScheme {
onSurface: onSurface,
);

// ignore: long-method
static AppColors getColorScheme() => AppColors(
brightness: Brightness.light,
primary: generateMaterialColor(color: const Color(0xffee1a64)),
colorScheme: ColorScheme.fromSeed(
seedColor: const MaterialColor(
0x0E9F6F,
<int, Color>{
100: Color.fromRGBO(248, 254, 252, 1),
200: Color.fromRGBO(225, 247, 240, 1),
300: Color.fromRGBO(178, 233, 215, 1),
400: Color.fromRGBO(109, 213, 178, 1),
500: Color.fromRGBO(16, 185, 129, 1),
600: Color.fromRGBO(14, 159, 111, 1),
700: Color.fromRGBO(12, 133, 92, 1),
800: Color.fromRGBO(9, 106, 74, 1),
900: Color.fromRGBO(7, 80, 55, 1),
1000: Color.fromRGBO(5, 54, 37, 1),
},
),
),
brightness: Brightness.dark,
primary: const MaterialColor(
0x0E9F6F,
<int, Color>{
100: Color.fromRGBO(248, 254, 252, 1),
200: Color.fromRGBO(225, 247, 240, 1),
300: Color.fromRGBO(178, 233, 215, 1),
400: Color.fromRGBO(109, 213, 178, 1),
500: Color.fromRGBO(16, 185, 129, 1),
600: Color.fromRGBO(14, 159, 111, 1),
700: Color.fromRGBO(12, 133, 92, 1),
800: Color.fromRGBO(9, 106, 74, 1),
900: Color.fromRGBO(7, 80, 55, 1),
1000: Color.fromRGBO(5, 54, 37, 1),
},
),
onPrimary: Colors.white,
secondary: generateMaterialColor(color: const Color(0xffffd81d)),
secondary: const MaterialColor(
0xE0E0E0,
<int, Color>{
100: Color.fromRGBO(255, 255, 255, 1),
200: Color.fromRGBO(249, 249, 249, 1),
300: Color.fromRGBO(243, 243, 243, 1),
400: Color.fromRGBO(236, 236, 236, 1),
500: Color.fromRGBO(224, 224, 224, 1),
600: Color.fromRGBO(191, 191, 191, 1),
700: Color.fromRGBO(159, 159, 159, 1),
800: Color.fromRGBO(126, 126, 126, 1),
900: Color.fromRGBO(61, 61, 61, 1),
1000: Color.fromRGBO(22, 22, 22, 1),
},
),
onSecondary: Colors.black,
error: generateMaterialColor(color: const Color(0xffF4642C)),
background: const MaterialColor(
0x0B0C0D,
<int, Color>{
100: Color.fromRGBO(163, 170, 177, 1),
200: Color.fromRGBO(138, 145, 153, 1),
300: Color.fromRGBO(110, 116, 122, 1),
400: Color.fromRGBO(32, 34, 37, 1),
500: Color.fromRGBO(11, 12, 13, 1),
},
),
onBackground: Colors.white,
surface: Colors.black,
onSurface: Colors.white,
textColor: const MaterialColor(
0xFFFFFF,
<int, Color>{
100: Color.fromRGBO(255, 255, 255, 1),
200: Color.fromRGBO(194, 194, 204, 1),
300: Color.fromRGBO(138, 138, 168, 1),
400: Color.fromRGBO(65, 65, 88, 1),
500: Color.fromRGBO(29, 22, 22, 1),
},
),
success: const MaterialColor(
0x10B981,
<int, Color>{
100: Color.fromRGBO(231, 248, 242, 1),
200: Color.fromRGBO(159, 227, 205, 1),
300: Color.fromRGBO(16, 185, 129, 1),
400: Color.fromRGBO(13, 148, 103, 1),
500: Color.fromRGBO(10, 111, 77, 1),
},
),
info: const MaterialColor(
0x1169F7,
<int, Color>{
100: Color.fromRGBO(207, 232, 254, 1),
200: Color.fromRGBO(111, 176, 252, 1),
300: Color.fromRGBO(17, 105, 247, 1),
400: Color.fromRGBO(8, 60, 177, 1),
500: Color.fromRGBO(3, 29, 118, 1),
},
),
warning: const MaterialColor(
0xF59E0B,
<int, Color>{
100: Color.fromRGBO(254, 245, 231, 1),
200: Color.fromRGBO(251, 216, 157, 1),
300: Color.fromRGBO(245, 158, 11, 1),
400: Color.fromRGBO(196, 126, 9, 1),
500: Color.fromRGBO(153, 119, 15, 1),
},
),
error: const MaterialColor(
0xF4444,
<int, Color>{
100: Color.fromRGBO(253, 236, 236, 1),
200: Color.fromRGBO(249, 180, 180, 1),
300: Color.fromRGBO(239, 68, 68, 1),
400: Color.fromRGBO(191, 54, 54, 1),
500: Color.fromRGBO(143, 41, 41, 1),
},
),
onError: Colors.black,
onBackground: Colors.black,
surface: generateMaterialColor(color: const Color(0xFFE6E9EC)),
onSurface: Colors.black,
background: Colors.white,
);
}

// ignore: unused-code
extension MaterialExtensions on MaterialColor {
Color get shade1000 => this[1000]!;
}
63 changes: 48 additions & 15 deletions supabase-ws-flutter-mobile/lib/ui/theme/text_styles.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@ import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';

const FontWeight _semiboldWeight = FontWeight.w500;

class AppStyles extends TextTheme {
final TextStyle customStyle;
@override
final TextStyle overline;
final TextStyle bodyXSmall;

const AppStyles({
required this.customStyle,
required this.overline,
required this.bodyXSmall,
headlineLarge,
headlineMedium,
headlineSmall,
Expand All @@ -33,11 +38,11 @@ class AppStyles extends TextTheme {
);

factory AppStyles.fromTextTheme({
required TextStyle customStyle,
required TextStyle overline,
required TextStyle bodyXSmall,
required TextTheme textTheme,
}) =>
AppStyles(
customStyle: customStyle,
headlineSmall: textTheme.headlineSmall,
headlineMedium: textTheme.headlineMedium,
headlineLarge: textTheme.headlineLarge,
Expand All @@ -50,22 +55,50 @@ class AppStyles extends TextTheme {
labelLarge: textTheme.labelLarge,
labelMedium: textTheme.labelMedium,
labelSmall: textTheme.labelSmall,
overline: overline,
bodyXSmall: bodyXSmall,
);

static TextStyle _figtreeTextStyle(
double fontSize,
FontWeight fontWeight,
) =>
GoogleFonts.figtree(
fontSize: fontSize,
fontWeight: fontWeight,
color: Colors.white,
);

static AppStyles getAppStyles() => AppStyles.fromTextTheme(
customStyle: GoogleFonts.inter(
fontSize: 50.sp,
fontWeight: FontWeight.w300,
fontStyle: FontStyle.normal,
),
textTheme: GoogleFonts.interTextTheme().copyWith(
bodyLarge: GoogleFonts.inter(
fontSize: 18.sp,
fontWeight: FontWeight.w300,
fontStyle: FontStyle.normal,
),
textTheme: GoogleFonts.figtreeTextTheme().copyWith(
headlineLarge: _figtreeTextStyle(56.sp, FontWeight.bold),
headlineMedium: _figtreeTextStyle(48.sp, FontWeight.bold),
headlineSmall: _figtreeTextStyle(40.sp, FontWeight.bold),
titleLarge: _figtreeTextStyle(32.sp, FontWeight.bold),
titleMedium: _figtreeTextStyle(24.sp, FontWeight.bold),
titleSmall: _figtreeTextStyle(16.sp, FontWeight.bold),
bodyLarge: _figtreeTextStyle(20.sp, FontWeight.normal),
bodyMedium: _figtreeTextStyle(16.sp, FontWeight.normal),
bodySmall: _figtreeTextStyle(14.sp, FontWeight.normal),
),
overline: _figtreeTextStyle(12, FontWeight.normal),
bodyXSmall: _figtreeTextStyle(12, FontWeight.normal),
);

TextTheme getThemeData() => getAppStyles();
}

// ignore: unused-code
extension TextStyleExtensions on TextStyle {
TextStyle links() => copyWith(
fontWeight: FontWeight.normal,
decoration: TextDecoration.underline,
decorationColor: color,
);

TextStyle semibold() => copyWith(fontWeight: _semiboldWeight);

TextStyle bold() => copyWith(fontWeight: FontWeight.bold);

TextStyle regular() => copyWith(fontWeight: FontWeight.normal);
}

0 comments on commit c667012

Please sign in to comment.