feat: Add Catalyst Brand M3 Theme definition (#479)

* feat: ThemeBuilder support for dark themes. * feat: Add light colors for Catalyst brand. * feat: Add light Theme definition for Catalyst brand. * feat: Add Catalyst dark theme. * feat: Add icons colors to scheme. * chore: Format. * chore: Change name for VoicesColorScheme. * chore: Adjust Catalyst Theme line heights.
input-output-hk · May 14, 2024 · f066a26 · f066a26
1 parent 6d985bb
commit f066a26
Show file tree

Hide file tree

Showing 14 changed files with 886 additions and 99 deletions.
diff --git a/.config/dictionaries/project.dic b/.config/dictionaries/project.dic
@@ -80,6 +80,7 @@ junitreport
 Keyhash
 keyserver
 lcov
+lerp
 Leshiy
 libapp
 libavcodec

diff --git a/catalyst_voices/lib/pages/coming_soon/description.dart b/catalyst_voices/lib/pages/coming_soon/description.dart
@@ -13,7 +13,7 @@ class ComingSoonDescription extends StatelessWidget {
       height: 66,
       child: DefaultTextStyle(
         style: GoogleFonts.notoSans(
-          textStyle: const TextStyle(color: VoicesColors.blueText),
+          textStyle: const TextStyle(color: VoicesColors.lightTextOnPrimary),
           fontSize: 16,
           fontWeight: FontWeight.w400,
         ),

diff --git a/catalyst_voices/lib/pages/coming_soon/logo.dart b/catalyst_voices/lib/pages/coming_soon/logo.dart
@@ -20,7 +20,7 @@ class ComingSoonLogo extends StatelessWidget {
           child: Text(
             l10n.comingSoonSubtitle,
             style: GoogleFonts.notoSans(
-              textStyle: const TextStyle(color: VoicesColors.blue),
+              textStyle: const TextStyle(color: VoicesColors.lightPrimary),
               fontSize: 19,
               fontWeight: FontWeight.w500,
             ),

diff --git a/catalyst_voices/lib/pages/coming_soon/title.dart b/catalyst_voices/lib/pages/coming_soon/title.dart
@@ -18,7 +18,7 @@ class ComingSoonTitle extends StatelessWidget {
         children: [
           DefaultTextStyle(
             style: GoogleFonts.poppins(
-              textStyle: const TextStyle(color: VoicesColors.blue),
+              textStyle: const TextStyle(color: VoicesColors.lightPrimary),
               fontSize: 53,
               height: 1.15,
               fontWeight: FontWeight.w700,
@@ -35,7 +35,7 @@ class ComingSoonTitle extends StatelessWidget {
           ),
           DefaultTextStyle(
             style: GoogleFonts.poppins(
-              textStyle: const TextStyle(color: VoicesColors.blue),
+              textStyle: const TextStyle(color: VoicesColors.lightPrimary),
               fontSize: 53,
               height: 1.15,
               fontWeight: FontWeight.w700,

diff --git a/catalyst_voices/lib/pages/home/home_page.dart b/catalyst_voices/lib/pages/home/home_page.dart
@@ -18,7 +18,7 @@ final class HomePage extends StatelessWidget {
             Text(
               context.l10n.homeScreenText,
               style: const TextStyle(
-                color: VoicesColors.purpleGradientStart,
+                color: VoicesColors.lightPrimary,
                 fontFamily: VoicesFonts.sFPro,
                 fontSize: 32,
               ),

diff --git a/catalyst_voices/packages/catalyst_voices_assets/assets/colors/colors.xml b/catalyst_voices/packages/catalyst_voices_assets/assets/colors/colors.xml
@@ -1,14 +1,97 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="white">#FFFFFF</color>
-    <color name="dark_background ">#000000</color>
-    <color name="purple">#512DA8</color>
-    <color name="purple_gradient_start">#673AB7</color>
-    <color name="purple_gradient_stop">#512DA8</color>
-    <color name="dark_card">#222126</color>
-    <color name="green">#7CAE7A</color>
-    <color name="red">#B02E0C</color>
-    <color name="today">#565656</color>
-    <color name="blue">#1235C7</color>
-    <color name="blue_text">#506288</color>
+    <color name="light_text_primary">#212A3D</color>
+    <color name="light_text_on_primary">#506288</color>
+    <color name="light_text_on_primary_container">#FFFFFF</color>
+    <color name="light_text_disabled">#61212A3D</color>
+    <color name="light_primary">#123CD3</color>
+    <color name="light_on_primary">#FFFFFF</color>
+    <color name="light_primary_container">#A1B4F7</color>
+    <color name="light_on_primary_container">#081B5E</color>
+    <color name="light_secondary">#C014EB</color>
+    <color name="light_on_secondary">#FFFFFF</color>
+    <color name="light_secondary_container">#E6A1F7</color>
+    <color name="light_on_secondary_container">#4D085E</color>
+    <color name="light_outline">#D9DEE8</color>
+    <color name="light_outline_variant">#61BFC8D9</color>
+    <color name="light_error">#CC0000</color>
+    <color name="light_on_error">#FFFFFF</color>
+    <color name="light_error_container">#FFD1D1</color>
+    <color name="light_on_error_container">#700000</color>
+    <color name="light_success">#218230</color>
+    <color name="light_on_success">#FFFFFF</color>
+    <color name="light_success_container">#CEF3D4</color>
+    <color name="light_on_success_container">#13491B</color>
+    <color name="light_warning">#E76309</color>
+    <color name="light_on_warning">#FFFFFF</color>
+    <color name="light_warning_container">#FDE1CE</color>
+    <color name="light_on_warning_container">#582603</color>
+    <color name="light_on_surface_neutral_08">#14212A3D</color>
+    <color name="light_on_surface_neutral_012">#1F212A3D</color>
+    <color name="light_on_surface_neutral_016">#29212A3D</color>
+    <color name="light_on_surface_primary_container">#A1B4F7</color>
+    <color name="light_on_surface_primary_08">#14123CD3</color>
+    <color name="light_on_surface_primary_012">#1F123CD3</color>
+    <color name="light_on_surface_primary_016">#29123CD3</color>
+    <color name="light_on_surface_secondary_08">#14C014EB</color>
+    <color name="light_on_surface_secondary_012">#1FC014EB</color>
+    <color name="light_on_surface_secondary_016">#29C014EB</color>
+    <color name="light_on_surface_error_08">#14CC0000</color>
+    <color name="light_on_surface_error_012">#1FCC0000</color>
+    <color name="light_on_surface_error_016">#29CC0000</color>
+    <color name="light_icons_foreground">#212A3D</color>
+    <color name="light_icons_background">#FFFFFF</color>
+    <color name="light_icons_disabled">#61212A3D</color>
+    <color name="light_icons_primary">#123CD3</color>
+    <color name="light_icons_secondary">#C014EB</color>
+    <color name="light_icons_success">#218230</color>
+    <color name="light_icons_warning">#E76309</color>
+    <color name="light_icons_error">#CC0000</color>
+    <color name="dark_text_primary">#FFFFFF</color>
+    <color name="dark_text_on_primary">#E6E9F0</color>
+    <color name="dark_text_on_primary_container">#0C288D</color>
+    <color name="dark_text_disabled">#61D9DEE8</color>
+    <color name="dark_primary">#728EF3</color>
+    <color name="dark_on_primary">#0C288D</color>
+    <color name="dark_primary_container">#1035BC</color>
+    <color name="dark_on_primary_container">#E8ECFD</color>
+    <color name="dark_secondary">#DF8AF5</color>
+    <color name="dark_on_secondary">#26042F</color>
+    <color name="dark_secondary_container">#9910BC</color>
+    <color name="dark_on_secondary_container">#9910BC</color>
+    <color name="dark_outline">#7F90B3</color>
+    <color name="dark_outline_variant">#364463</color>
+    <color name="dark_error">#FF9999</color>
+    <color name="dark_on_error">#380000</color>
+    <color name="dark_error_container">#AD0000</color>
+    <color name="dark_on_error_container">#FFD1D1</color>
+    <color name="dark_success">#BAEDC2</color>
+    <color name="dark_on_success">#08210C</color>
+    <color name="dark_success_container">#1D722A</color>
+    <color name="dark_on_success_container">#CEF3D4</color>
+    <color name="dark_warning">#FBC9A7</color>
+    <color name="dark_on_warning">#2C1302</color>
+    <color name="dark_warning_container">#B64E07</color>
+    <color name="dark_on_warning_container">#FDE1CE</color>
+    <color name="dark_on_surface_neutral_08">#1FBFC8D9</color>
+    <color name="dark_on_surface_neutral_012">#1FBFC8D9</color>
+    <color name="dark_on_surface_neutral_016">#29212A3D</color>
+    <color name="dark_on_surface_primary_container">#0C288D</color>
+    <color name="dark_on_surface_primary_08">#1F123CD3</color>
+    <color name="dark_on_surface_primary_012">#1F123CD3</color>
+    <color name="dark_on_surface_primary_016">#29123CD3</color>
+    <color name="dark_on_surface_secondary_08">#1FD972F3</color>
+    <color name="dark_on_surface_secondary_012">#1FC014EB</color>
+    <color name="dark_on_surface_secondary_016">#29C014EB</color>
+    <color name="dark_on_surface_error_08">#1FFFC2C2</color>
+    <color name="dark_on_surface_error_012">#1FCC0000</color>
+    <color name="dark_on_surface_error_016">#29CC0000</color>
+    <color name="dark_icons_foreground">#F2F4F8</color>
+    <color name="dark_icons_background">#212A3D</color>
+    <color name="dark_icons_disabled">#61BFC8D9</color>
+    <color name="dark_icons_primary">#728EF3</color>
+    <color name="dark_icons_secondary">#DF8AF5</color>
+    <color name="dark_icons_success">#85E093</color>
+    <color name="dark_icons_warning">#FAB484</color>
+    <color name="dark_icons_error">#FF9999</color>
 </resources>
diff --git a/catalyst_voices/packages/catalyst_voices_assets/example/lib/src/main.dart b/catalyst_voices/packages/catalyst_voices_assets/example/lib/src/main.dart
@@ -17,7 +17,7 @@ final class Example extends StatelessWidget {
               const Text(
                 'Catalyst Assets',
                 style: TextStyle(
-                  color: VoicesColors.purpleGradientStart,
+                  color: VoicesColors.lightPrimary,
                   fontFamily: VoicesFonts.sFPro,
                   fontSize: 32,
                 ),