feat: app UI colors (#13)

VGVentures · Nov 22, 2023 · 6cf3caa · 6cf3caa
1 parent 07751e1
commit 6cf3caa
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 11 deletions.
diff --git a/lib/home/view/home_page.dart b/lib/home/view/home_page.dart
@@ -8,7 +8,7 @@ class HomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return const Scaffold(
-      backgroundColor: Color(0xFFF8FAFF),
+      backgroundColor: VertexColors.arctic,
       body: Stack(
         children: [
           Positioned(

diff --git a/lib/home/widgets/background.dart b/lib/home/widgets/background.dart
@@ -1,3 +1,4 @@
+import 'package:app_ui/app_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:path_drawing/path_drawing.dart';
 
@@ -24,11 +25,11 @@ class Background extends StatelessWidget {
             child: Circle(
               offset: Offset(horizontalOffset + leftOffset, 0),
               radius: baseMediumRadius,
-              borderColor: Color(0xFFDDE2F6),
+              borderColor: VertexColors.lilac,
               child: Circle(
                 offset: Offset(horizontalOffset + leftOffset, 0),
                 radius: baseSmallRadius,
-                borderColor: Color(0xFFDDE2F6),
+                borderColor: VertexColors.lilac,
                 dotted: true,
               ),
             ),
@@ -50,7 +51,7 @@ class Circle extends StatelessWidget {
   const Circle({
     this.offset = Offset.zero,
     this.radius = 303,
-    this.borderColor = Colors.white,
+    this.borderColor = VertexColors.white,
     this.dotted = false,
     this.child,
     super.key,
@@ -84,7 +85,7 @@ class CirclePainter extends CustomPainter {
     required this.dotted,
   }) {
     _paintCircle = Paint()
-      ..color = Colors.white
+      ..color = VertexColors.white
       ..style = PaintingStyle.fill;
     _paintBorder = Paint()
       ..color = borderColor

diff --git a/lib/home/widgets/logo.dart b/lib/home/widgets/logo.dart
@@ -15,7 +15,7 @@ class Logo extends StatelessWidget {
         Text(
           l10n.vertexAI,
           style: theme.textTheme.bodyLarge?.copyWith(
-            color: Colors.black,
+            color: VertexColors.navy,
           ),
         ),
         const SizedBox(width: 4),
@@ -24,7 +24,7 @@ class Logo extends StatelessWidget {
         Text(
           l10n.flutter,
           style: theme.textTheme.bodyLarge?.copyWith(
-            color: Colors.black,
+            color: VertexColors.navy,
           ),
         ),
       ],

diff --git a/lib/home/widgets/welcome_view.dart b/lib/home/widgets/welcome_view.dart
@@ -19,7 +19,7 @@ class WelcomeView extends StatelessWidget {
               l10n.initialScreenTitle,
               textAlign: TextAlign.center,
               style: theme.textTheme.displayLarge?.copyWith(
-                color: Colors.black,
+                color: VertexColors.navy,
               ),
             ),
             const SizedBox(height: 40),

diff --git a/packages/app_ui/lib/app_ui.dart b/packages/app_ui/lib/app_ui.dart
@@ -3,6 +3,7 @@ library app_ui;
 
 import 'package:app_ui/src/generated/assets.gen.dart';
 
+export 'src/colors/vertex_colors.dart';
 export 'src/theme/vertex_theme.dart';
 export 'src/typography/vertex_text_styles.dart';
 export 'src/widgets/widgets.dart';

diff --git a/packages/app_ui/lib/src/colors/vertex_colors.dart b/packages/app_ui/lib/src/colors/vertex_colors.dart
@@ -0,0 +1,31 @@
+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);
+
+  /// Google Blue Color Swatch
+  static const Color googleBlue = Color(0xff3089f1);
+
+  /// Flutter Cyan Color Swatch
+  static const Color flutterCyan = Color(0xff00e3ff);
+
+  /// Lilac Color Swatch
+  static const Color lilac = Color(0xffdde2f6);
+
+  /// Deep Arctic Color Swatch
+  static const Color deepArctic = Color(0xfff3f6ff);
+
+  /// Arctic Color Swatch
+  static const Color arctic = Color(0xfffafbff);
+
+  /// Medium Grey Color Swatch
+  static const Color mediumGrey = Color(0xff919191);
+
+  /// Light Grey Color Swatch
+  static const Color lightGrey = Color(0xffe2e2e2);
+
+  /// White Color Swatch
+  static const Color white = Color(0xffffffff);
+}
diff --git a/packages/app_ui/lib/src/theme/vertex_theme.dart b/packages/app_ui/lib/src/theme/vertex_theme.dart
@@ -1,4 +1,4 @@
-import 'package:app_ui/src/typography/vertex_text_styles.dart';
+import 'package:app_ui/app_ui.dart';
 import 'package:flutter/material.dart';
 
 /// {@template vertex_theme}
@@ -8,6 +8,7 @@ class VertexTheme {
   /// Standard `ThemeData` for VertexAI UI.
   static ThemeData get standard {
     return ThemeData(
+      colorScheme: ColorScheme.fromSwatch(accentColor: VertexColors.navy),
       textTheme: _textTheme,
       useMaterial3: true,
     );

diff --git a/packages/app_ui/lib/src/widgets/cta_button.dart b/packages/app_ui/lib/src/widgets/cta_button.dart
@@ -1,3 +1,4 @@
+import 'package:app_ui/app_ui.dart';
 import 'package:flutter/material.dart';
 
 /// {@template cta_button}
@@ -28,7 +29,7 @@ class CTAButton extends StatelessWidget {
       onPressed: onPressed,
       style: const ButtonStyle(
         backgroundColor: MaterialStatePropertyAll(
-          Color(0xFF0273E6),
+          VertexColors.googleBlue,
         ),
         padding: MaterialStatePropertyAll(
           EdgeInsets.only(
@@ -49,7 +50,7 @@ class CTAButton extends StatelessWidget {
             style: const TextStyle(
               fontSize: 18,
               fontWeight: FontWeight.w500,
-              color: Colors.white,
+              color: VertexColors.white,
             ),
           ),
         ],