feat: update theming (#20)

Co-authored-by: Rui Miguel Alonso <[email protected]>

lib/home/widgets/logo.dart

@@ -12,7 +12,7 @@ class Logo extends StatelessWidget {
     final theme = Theme.of(context);
     final l10n = context.l10n;
     final textColor =
-        hasDarkBackground ? VertexColors.arctic : VertexColors.navy;
+        hasDarkBackground ? VertexColors.arctic : VertexColors.flutterNavy;
 
     return Row(
       children: [

lib/home/widgets/question_view.dart

@@ -63,6 +63,7 @@ class _QuestionView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
     final l10n = context.l10n;
 
     return Center(
@@ -73,7 +74,8 @@ class _QuestionView extends StatelessWidget {
             Text(
               l10n.questionScreenTitle,
               textAlign: TextAlign.center,
-              style: theme.textTheme.displayLarge,
+              style: textTheme.displayLarge
+                  ?.copyWith(color: VertexColors.flutterNavy),
             ),
             const SizedBox(height: 40),
             QuestionInputTextField(

lib/home/widgets/results_view.dart

@@ -27,6 +27,7 @@ class BlueContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
     return Container(
       decoration: const BoxDecoration(
         color: VertexColors.googleBlue,
@@ -40,8 +41,8 @@ class BlueContainer extends StatelessWidget {
             alignment: Alignment.topCenter,
             child: Text(
               summary,
-              style: VertexTextStyles.body
-                  .copyWith(color: VertexColors.white, fontSize: 32),
+              style: textTheme.headlineLarge
+                  ?.copyWith(color: VertexColors.white, fontSize: 32),
             ),
           ),
           const Align(

lib/home/widgets/see_source_answers.dart

@@ -41,13 +41,14 @@ class _AiResponse extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+
     return Column(
       children: [
         Text(
           text,
-          style: VertexTextStyles.body.copyWith(
+          style: textTheme.headlineLarge?.copyWith(
             color: VertexColors.white,
-            fontSize: 32,
           ),
         ),
         const SizedBox(height: 20),
@@ -71,7 +72,7 @@ class _ResponseCarousel extends StatelessWidget {
         Center(
           child: Text(
             '${documents.length}',
-            style: VertexTextStyles.body.copyWith(
+            style: VertexTextStyles.headline.copyWith(
               color: VertexColors.flutterCyan,
               fontSize: 60,
             ),

lib/home/widgets/thinking_view.dart

@@ -80,15 +80,15 @@ class TextArea extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
-
+    final textTheme = Theme.of(context).textTheme;
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Text(
           l10n.thinkingHeadline,
           textAlign: TextAlign.center,
           style:
-              VertexTextStyles.body.copyWith(color: VertexColors.flutterNavy),
+              textTheme.bodyMedium?.copyWith(color: VertexColors.flutterNavy),
         ),
         const SizedBox(
           height: 40,
@@ -98,7 +98,7 @@ class TextArea extends StatelessWidget {
           child: Text(
             query,
             textAlign: TextAlign.center,
-            style: VertexTextStyles.display,
+            style: textTheme.displayLarge,
           ),
         ),
       ],

lib/home/widgets/welcome_view.dart

@@ -64,7 +64,7 @@ class _WelcomeView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
+    final textTheme = Theme.of(context).textTheme;
     final l10n = context.l10n;
 
     final state = context.watch<HomeBloc>().state;
@@ -79,8 +79,8 @@ class _WelcomeView extends StatelessWidget {
               Text(
                 l10n.initialScreenTitle,
                 textAlign: TextAlign.center,
-                style: theme.textTheme.displayLarge?.copyWith(
-                  color: VertexColors.navy,
+                style: textTheme.displayLarge?.copyWith(
+                  color: VertexColors.flutterNavy,
                 ),
               ),
               const SizedBox(height: 40),

packages/app_ui/lib/src/colors/vertex_colors.dart

@@ -1,34 +1,42 @@
 import 'package:flutter/material.dart';
 
 /// Defines the color palette for the VertexAI UI.
+
 abstract class VertexColors {
-  /// Navy Color Swatch
-  static const Color navy = Color(0xff020f30);
+  /// flutterNavy Color Swatch
+  static const Color flutterNavy = Color(0xff042a59);
 
-  /// Fluter Navy Color Swatch
-  static const Color flutterNavy = Color(0xff042A59);
+  /// flutterBlue Color Swatch
+  static const Color flutterBlue = Color(0xff0553b1);
 
-  /// Google Blue Color Swatch
+  /// googleBlue Color Swatch
   static const Color googleBlue = Color(0xff3089f1);
 
-  /// Flutter Cyan Color Swatch
-  static const Color flutterCyan = Color(0xff00e3ff);
+  /// flutterCyan Color Swatch
+  static const Color flutterCyan = Color(0xff0ecbfd);
 
-  /// Lilac Color Swatch
+  /// lilac Color Swatch
   static const Color lilac = Color(0xffdde2f6);
 
-  /// Deep Arctic Color Swatch
+  /// deepArctic Color Swatch
   static const Color deepArctic = Color(0xfff3f6ff);
 
-  /// Arctic Color Swatch
+  /// arctic Color Swatch
   static const Color arctic = Color(0xfffafbff);
 
-  /// Medium Grey Color Swatch
+  /// mediumGrey Color Swatch
   static const Color mediumGrey = Color(0xff919191);
 
-  /// Light Grey Color Swatch
+  /// lightGrey Color Swatch
   static const Color lightGrey = Color(0xffe2e2e2);
 
-  /// White Color Swatch
+  /// white Color Swatch
   static const Color white = Color(0xffffffff);
+
+  /// gradient Color Swatch
+  static const List<Color> gradient = <Color>[
+    Color(0xff3089f1),
+    Color(0xff3089f1),
+    Color(0xff0ecbfd),
+  ];
 }

packages/app_ui/lib/src/theme/vertex_theme.dart

@@ -8,24 +8,31 @@ class VertexTheme {
   /// Standard `ThemeData` for VertexAI UI.
   static ThemeData get standard {
     return ThemeData(
-      colorScheme: ColorScheme.fromSwatch(accentColor: VertexColors.navy),
+      colorScheme:
+          ColorScheme.fromSwatch(accentColor: VertexColors.flutterNavy),
       textTheme: _textTheme,
       inputDecorationTheme: _inputDecorationTheme,
       useMaterial3: true,
     );
   }
 
   static TextTheme get _textTheme {
-    return TextTheme(
-      displayLarge: VertexTextStyles.display,
-      bodyLarge: VertexTextStyles.body,
-      labelLarge: VertexTextStyles.label,
+    return const TextTheme(
+      displayLarge: VertexTextStyles.displayLarge,
+      displayMedium: VertexTextStyles.displayMedium,
+      displaySmall: VertexTextStyles.displaySmall,
+      headlineLarge: VertexTextStyles.headline,
+      bodyLarge: VertexTextStyles.bodyLargeBold,
+      bodyMedium: VertexTextStyles.bodyLargeMedium,
+      bodySmall: VertexTextStyles.bodyLargeRegular,
+      labelLarge: VertexTextStyles.labelLarge,
     );
   }
 
   static InputDecorationTheme get _inputDecorationTheme {
     return InputDecorationTheme(
-      hintStyle: VertexTextStyles.body.copyWith(color: VertexColors.mediumGrey),
+      hintStyle: VertexTextStyles.bodyLargeRegular
+          .copyWith(color: VertexColors.mediumGrey),
       isDense: true,
       border: OutlineInputBorder(
         borderRadius: BorderRadius.circular(100),

packages/app_ui/lib/src/typography/vertex_text_styles.dart

@@ -1,38 +1,82 @@
 import 'package:flutter/material.dart';
 
-/// {@template vertex_text_styles}
-/// App Text Style Definitions
-/// {@endtemplate}
-class VertexTextStyles {
-  /// {@macro vertex_text_styles}
-
-  static TextStyle get _baseTextStyle => const TextStyle(
-        fontWeight: FontWeight.w400,
-        package: 'app_ui',
-        fontFamily: 'GoogleSans',
-        color: Colors.black,
-      );
-
-  /// Title Style
-  static TextStyle get display => _baseTextStyle.copyWith(
-        fontSize: 72,
-        fontWeight: FontWeight.bold,
-        height: 1.11,
-        letterSpacing: -2,
-      );
-
-  /// Button Style
-  static TextStyle get body => _baseTextStyle.copyWith(
-        fontSize: 18,
-        height: 1.3,
-        letterSpacing: -0.5,
-      );
-
-  /// Label Style
-  static TextStyle get label => _baseTextStyle.copyWith(
-        fontSize: 14,
-        fontWeight: FontWeight.bold,
-        height: 1.7,
-        letterSpacing: 2,
-      );
+//// {@macro vertex_text_styles}
+abstract class VertexTextStyles {
+  /// displayLarge Text Style
+  static const TextStyle displayLarge = TextStyle(
+    fontSize: 72,
+    fontWeight: FontWeight.w700,
+    height: 1.11,
+    letterSpacing: -2,
+    fontFamily: 'Google Sans',
+  );
+
+  /// displayMedium Text Style
+  static const TextStyle displayMedium = TextStyle(
+    fontSize: 48,
+    fontWeight: FontWeight.w700,
+    height: 1.17,
+    letterSpacing: -1,
+    fontFamily: 'Google Sans',
+  );
+
+  /// displaySmall Text Style
+  static const TextStyle displaySmall = TextStyle(
+    fontSize: 32,
+    fontWeight: FontWeight.w500,
+    height: 1.25,
+    letterSpacing: -1,
+    fontFamily: 'Google Sans',
+  );
+
+  /// headline Text Style
+  static const TextStyle headline = TextStyle(
+    fontSize: 32,
+    fontWeight: FontWeight.w400,
+    height: 1.5,
+    letterSpacing: -1,
+    fontFamily: 'Google Sans',
+  );
+
+  /// bodyLargeBold Text Style
+  static const TextStyle bodyLargeBold = TextStyle(
+    fontSize: 18,
+    fontWeight: FontWeight.w700,
+    height: 1.56,
+    fontFamily: 'Google Sans',
+  );
+
+  /// bodyLargeMedium Text Style
+  static const TextStyle bodyLargeMedium = TextStyle(
+    fontSize: 18,
+    fontWeight: FontWeight.w500,
+    height: 1.56,
+    fontFamily: 'Google Sans',
+  );
+
+  /// bodyLargeRegular Text Style
+  static const TextStyle bodyLargeRegular = TextStyle(
+    fontSize: 18,
+    fontWeight: FontWeight.w400,
+    height: 1.56,
+    fontFamily: 'Google Sans',
+  );
+
+  /// buttons&CTA's Text Style
+  static const TextStyle cta = TextStyle(
+    fontSize: 18,
+    fontWeight: FontWeight.w500,
+    height: 1.33,
+    letterSpacing: -0.5,
+    fontFamily: 'Google Sans',
+  );
+
+  /// labelLarge Text Style
+  static const TextStyle labelLarge = TextStyle(
+    fontSize: 14,
+    fontWeight: FontWeight.w700,
+    height: 1.71,
+    letterSpacing: 2,
+    fontFamily: 'Google Sans',
+  );
 }

packages/app_ui/lib/src/widgets/question_input_text_field.dart

@@ -55,12 +55,13 @@ class _QuestionTextFieldState extends State<QuestionInputTextField> {
 
   @override
   Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
     return Container(
       constraints: const BoxConstraints(maxWidth: 659),
       child: TextField(
         controller: _controller,
-        style: VertexTextStyles.body.copyWith(
-          color: VertexColors.navy,
+        style: textTheme.bodyMedium?.copyWith(
+          color: VertexColors.flutterNavy,
         ),
         decoration: InputDecoration(
           prefixIcon: Padding(