theme(): change to purple (#200)

* theme(): change to purple * theme(): change to purple, correct accessibility
sign · Jan 21, 2025 · 6078b7e · 6078b7e
1 parent 190fddd
commit 6078b7e
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 18 deletions.
diff --git a/src/app/pages/landing/about/about-faq/about-faq.component.html b/src/app/pages/landing/about/about-faq/about-faq.component.html
@@ -1,6 +1,6 @@
 <div class="container">
   <div class="header">
-    <h1>FAQ</h1>
+    <h2>FAQ</h2>
     <p>
       Seamlessly overcome language barriers and engage with people from diverse linguistic and cultural backgrounds,
       wherever and whenever you need

diff --git a/src/app/pages/landing/about/about-hero/about-hero.component.scss b/src/app/pages/landing/about/about-hero/about-hero.component.scss
@@ -34,7 +34,7 @@ h1 {
   }
 
   span {
-    color: var(--ion-color-primary);
+    color: var(--ion-color-primary-accessible-text);
   }
 }
 

diff --git a/src/app/pages/landing/about/about-team/about-team.component.scss b/src/app/pages/landing/about/about-team/about-team.component.scss
@@ -34,10 +34,6 @@ ion-avatar {
 }
 
 ion-badge {
-  color: var(--ion-color-primary);
-  background: rgb(from var(--ion-color-primary) r g b / 0.05);
-  border: 1px solid var(--ion-color-primary);
-
   padding: 2px 6px;
   position: absolute;
   left: 8px;

diff --git a/src/app/pages/translate/input/button/button.component.scss b/src/app/pages/translate/input/button/button.component.scss
@@ -4,6 +4,8 @@ ion-button {
 
   &.selected {
     border-radius: var(--border-radius);
-    background-color: rgba(66, 133, 244, 0.12);
+    background-color: rgba(166, 66, 244, 0.08);
   }
+
+  --ion-color-base: var(--ion-color-primary-accessible-text) !important;
 }
diff --git a/src/theme/ionic-variables.scss b/src/theme/ionic-variables.scss
@@ -1,17 +1,19 @@
 // Ionic Variables and Theming. For more info, please see:
 // http://ionicframework.com/docs/theming/
+// https://ionicframework.com/docs/theming/color-generator
 
 /** Ionic CSS Variables **/
 :root {
   --ion-font-family: 'Trebuchet MS', var(--ion-default-font);
 
   /** primary **/
-  --ion-color-primary: #1976d2;
-  --ion-color-primary-rgb: 25, 118, 210;
+  --ion-color-primary: #8500e9;
+  --ion-color-primary-rgb: 133, 0, 233;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #1668b9;
-  --ion-color-primary-tint: #3084d7;
+  --ion-color-primary-shade: #7500cd;
+  --ion-color-primary-tint: #911aeb;
+  --ion-color-primary-accessible-text: #7f01de;
 
   /** secondary **/
   --ion-color-secondary: #3dc2ff;
@@ -85,12 +87,13 @@
    */
 
   body {
-    --ion-color-primary: #428cff;
-    --ion-color-primary-rgb: 66, 140, 255;
+    --ion-color-primary: #8500e9;
+    --ion-color-primary-rgb: 133, 0, 233;
     --ion-color-primary-contrast: #ffffff;
     --ion-color-primary-contrast-rgb: 255, 255, 255;
-    --ion-color-primary-shade: #3a7be0;
-    --ion-color-primary-tint: #5598ff;
+    --ion-color-primary-shade: #7500cd;
+    --ion-color-primary-tint: #911aeb;
+    --ion-color-primary-accessible-text: #c384f2;
 
     --ion-color-secondary: #50c8ff;
     --ion-color-secondary-rgb: 80, 200, 255;
@@ -235,3 +238,18 @@
     --ion-card-background: #1e1e1e;
   }
 }
+
+a {
+  background-color: transparent;
+  color: var(--ion-color-primary-accessible-text, --ion-color-primary);
+}
+
+ion-icon.ion-color-primary {
+  --ion-color-base: var(--ion-color-primary-accessible-text) !important;
+}
+
+.mat-mdc-tab-group,
+.mat-mdc-tab-nav-bar {
+  --mat-tab-header-active-label-text-color: var(--ion-color-primary-accessible-text);
+  --mdc-tab-indicator-active-indicator-color: var(--ion-color-primary-accessible-text);
+}
diff --git a/src/theme/material.scss b/src/theme/material.scss
@@ -12,7 +12,7 @@ $app-typography: mat.m2-define-typography-config(
 
 // Create the theme object (a Sass map containing all of the palettes).
 $app-color: (
-  primary: mat.m2-define-palette(mat.$m2-blue-palette, $default: 700),
+  primary: mat.m2-define-palette(mat.$m2-deep-purple-palette, $default: 700),
   accent: $app-accent,
   warn: $app-warn,
 );
@@ -24,7 +24,7 @@ $app-theme: mat.m2-define-light-theme(
 $app-dark-theme: mat.m2-define-dark-theme(
   (
     color: (
-      primary: mat.m2-define-palette(mat.$m2-blue-palette, $default: 400),
+      primary: mat.m2-define-palette(mat.$m2-deep-purple-palette, $default: 400),
       accent: $app-accent,
       warn: $app-warn,
     ),

diff --git a/src/theme/styles.scss b/src/theme/styles.scss
@@ -1,8 +1,8 @@
 @forward './material.scss';
 @forward 'fonts/roboto.css';
 
-@forward './ionic-variables';
 @forward './ionic';
+@forward './ionic-variables';
 
 .container {
   width: auto;
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,7 @@ h1 { @@
       }
       span {
-        color: var(--ion-color-primary);
+        color: var(--ion-color-primary-accessible-text);
       }
     }
@@ Expand Down @@