diff --git a/lib/home/view/home_page.dart b/lib/home/view/home_page.dart index f516626..f03077e 100644 --- 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 index e224545..b8af058 100644 --- 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 index 6a4e5a2..aacf840 100644 --- 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 index 5d324b9..905995f 100644 --- 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 index ce224f0..d860378 100644 --- 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 new file mode 100644 index 0000000..05f3e39 --- /dev/null +++ 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 index 7f73bf7..200cfcb 100644 --- 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 index 79f3b9c..cfc6ccf 100644 --- 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, ), ), ],