From d6006ac5c3c729d94af32f849116b33a5d2f4b9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 4 Mar 2022 13:01:57 +0100
Subject: [PATCH] MOBILE-3814 style: Sort some gray colors

---
 .../send-message-form/send-message-form.scss  | 21 +++++++++++-----
 .../features/mainmenu/pages/more/more.scss    | 10 ++------
 src/theme/globals.variables.scss              |  6 ++---
 src/theme/theme.base.scss                     |  6 +++--
 src/theme/theme.dark.scss                     | 15 ++++++++----
 src/theme/theme.light.scss                    | 24 +++++++++++--------
 6 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/src/core/components/send-message-form/send-message-form.scss b/src/core/components/send-message-form/send-message-form.scss
index 25a62dbdd..1607e186e 100644
--- a/src/core/components/send-message-form/send-message-form.scss
+++ b/src/core/components/send-message-form/send-message-form.scss
@@ -1,4 +1,10 @@
 :host {
+    --textarea-background: var(--core-input-background);
+    --textarea-color: var(--core-input-text);
+    --textarea-border-width: var(--core-input-border-width);
+    --textarea-border-color: var(--core-input-stroke);
+    --textarea-radius: var(--huge-radius);
+
     form {
         position: relative;
         display: flex;
@@ -11,14 +17,17 @@
         appearance: none;
         display: block;
         width: 100%;
-        border: 0;
         font-family: inherit;
-        background: var(--core-send-message-input-background);
-        color: var(--core-send-message-input-color);
-        border-radius: 21px;
+
+        background: var(--textarea-background);
+        color: var(--textarea-color);
+        border: var(--textarea-border-width) solid var(--textarea-border-color);
+        border-radius: var(--textarea-radius);
+
+        min-height: var(--a11y-min-target-size);
         line-height: 20px;
-        padding: 9px 12px 11px;
-        margin: 5px 10px;
+        padding: 10px;
+        margin: 4px 8px;
         resize: vertical;
     }
 
diff --git a/src/core/features/mainmenu/pages/more/more.scss b/src/core/features/mainmenu/pages/more/more.scss
index 32aeaef79..dfd54ad4c 100644
--- a/src/core/features/mainmenu/pages/more/more.scss
+++ b/src/core/features/mainmenu/pages/more/more.scss
@@ -1,13 +1,7 @@
 ion-item {
 	--border-color: var(--core-more-item-border, var(--ion-border-color));
 
-    ion-icon {
-        color: var(--core-more-icon, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54));
-    }
-}
-
-:host-context(ion-app.ios) {
-    ion-item ion-icon {
-        color: var(--core-more-icon, inherit);
+    > ion-icon[slot] {
+        color: var(--core-more-icon) !important;
     }
 }
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 5f8d3a5fe..696d70a77 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -9,7 +9,7 @@ $gray-100:    #f8f9fa !default;
 $gray-200:    #e9ecef !default;
 $gray-300:    #dee2e6 !default; // Stroke
 $gray-400:    #ced4da !default;
-$gray-500:    #8f959e !default;
+$gray-500:    #8f959e !default; // Stroke on inputs
 $gray-600:    #6a737b !default;
 $gray-700:    #495057 !default;
 $gray-800:    #343a40 !default;
@@ -46,8 +46,8 @@ $warning:    $yellow !default;
 $success:    $green !default;
 $info:       $blue !default;
 $light:      $gray-100 !default;
-$medium:     $gray-600 !default;
-$dark:       $gray-800 !default;
+$medium:     $gray-700 !default;
+$dark:       $gray-900 !default;
 
 $colors:  (
     primary: (light: $primary, dark: $primary),
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 2a23c5d7e..8f0bf1aac 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -321,7 +321,8 @@ ion-button.button-outline {
     --border-width: var(--core-input-border-width);
     --border-color: var(--core-input-stroke);
     --background: var(--core-input-background);
-    --color: var(--text-color);
+    --color: var(--core-input-text);
+    --ion-color-primary: var(--core-input-text);
 }
 
 ion-button.button-solid {
@@ -371,7 +372,8 @@ ion-button.button.button-clear.button-has-icon-only {
 }
 
 ion-button.button.button-clear {
-    --color: var(--dark);
+    --color: var(--core-input-text);
+    --ion-color-primary: var(--core-input-text);
 }
 
 ion-button.button.button-solid,
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 57ddeeb61..ab278951a 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -36,18 +36,20 @@
     --text-color:               #{$text-color-dark};
     --ion-text-color:           var(--text-color);
     --ion-text-color-rgb:       #{$text-color-dark-rgb};
-    --subdued-text-color:       var(--gray-400);
+    --subdued-text-color:       var(--medium);
     --stroke:                   var(--gray-700);
 
     --contrast-background: black;
 
     --ion-card-color: var(--text-color);
     --ion-card-background: var(--ion-item-background);
+    --ion-card-border-color: var(--stroke);
 
     --ion-border-color: var(--stroke);
     --ion-item-border-color: var(--stroke);
 
-    --core-input-stroke: var(--gray-700);
+    --core-input-stroke: var(--gray-600);
+    --core-input-text: var(--dark);
     --core-input-background: var(--gray-900);
 
     ion-content {
@@ -68,7 +70,7 @@
     --core-link-color: var(--info-tint);
 
     --core-header-toolbar-background:   var(--gray-900);
-    --core-header-toolbar-color:        var(--white);
+    --core-header-toolbar-color:        var(--text-color);
     --core-header-toolbar-border-color: var(--stroke);
 
     --core-tabs-background: var(--gray-800);
@@ -80,10 +82,15 @@
     --core-progressbar-text-color: var(--gray-100);
 
     --ion-item-background: #{$ion-item-background-dark};
+    --ion-item-icon-color: var(--medium);
+    --ion-item-detail-icon-color: var(--dark);
+    --core-more-icon: var(--ion-item-icon-color);
+
     --item-divider-background: var(--ion-item-background);
     --item-divider-color: var(--text-color);
     --spacer-background: var(--gray-700);
 
+
     --ion-searchbar-background: var(--ion-background-color);
     --ion-searchbar-border-color: var(--core-input-stroke);
     --ion-searchbar-color: var(--text-color);
@@ -91,7 +98,7 @@
 
     --core-search-box-background: var(--ion-background-color);
     --core-search-box-border-color: var(--core-input-stroke);
-    --core-search-box-color: var(--text-color);
+    --core-search-box-color: var(--core-input-text);
 
     --core-combobox-background: var(--core-input-background);
     --core-combobox-color: var(--text-color);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index f55a0c282..6b1c9f16b 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -69,7 +69,8 @@
     --ion-background-color-rgb: #{$background-color-rgb};
     --ion-border-color: var(--stroke);
 
-    --core-input-stroke: var(--gray-400);
+    --core-input-stroke: var(--gray-500);
+    --core-input-text: var(--dark);
     --core-input-background: var(--ion-background-color);
     --core-input-radius: var(--small-radius);
     --core-input-border-width: 1px;
@@ -86,7 +87,7 @@
 
     --ion-text-color: var(--text-color);
     --ion-text-color-rgb: #{$text-color-rgb};
-    --subdued-text-color: var(--gray-700);
+    --subdued-text-color: var(--medium);
 
     --ion-card-color: var(--text-color);
     --ion-card-vertical-margin: 10px;
@@ -112,7 +113,7 @@
     }
 
     --core-bottom-tabs-background: var(--white);
-    --core-bottom-tabs-color: var(--gray-700);
+    --core-bottom-tabs-color: var(--dark);
     --core-bottom-tabs-color-selected: var(--primary);
     --core-bottom-tabs-background-selected: transparent;
     --core-bottom-tabs-badge-color: var(--primary);
@@ -135,7 +136,7 @@
     --core-header-toolbar-background: var(--white);
     --core-header-toolbar-border-width: 0px;
     --core-header-toolbar-border-color: var(--stroke);
-    --core-header-toolbar-color: var(--gray-900);
+    --core-header-toolbar-color: var(--text-color);
     --core-header-toolbar-height: 48px;
     html.ios {
         --core-header-toolbar-height: 48px;
@@ -191,10 +192,10 @@
     --core-search-box-background: var(--ion-background-color);
     --core-search-box-border-color: var(--core-input-stroke);
     --core-search-box-border-radius: var(--core-input-radius);
-    --core-search-box-color: var(--text-color);
+    --core-search-box-color: var(--core-input-text);
 
     --core-combobox-background: var(--core-input-background);
-    --core-combobox-color: var(--text-color);
+    --core-combobox-color: var(--core-input-text);
     --core-combobox-border-color: var(--core-input-stroke);
     --core-combobox-border-width: var(--core-input-border-width);
     --core-combobox-radius: var(--core-input-radius);
@@ -255,13 +256,19 @@
     --core-progressbar-background: var(--primary-tint);
 
     --ion-item-background:        #{$ion-item-background};
-    --ion-item-detail-icon-color: var(--medium);
+    --ion-item-icon-color: var(--medium);
+    --ion-item-detail-icon-color: var(--dark);
     --ion-item-detail-icon-font-size: 20px;
     --ion-item-detail-icon-opacity: 1;
+    --core-more-icon: var(--ion-item-icon-color);
     ion-item {
         --detail-icon-color: var(--ion-item-detail-icon-color);
         --detail-icon-font-size: var(--ion-item-detail-icon-font-size);
         --detail-icon-opacity: var(--ion-item-detail-icon-opacity);
+
+        > ion-icon[slot] {
+            color: var(--ion-item-icon-color);
+        }
     }
 
     --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
@@ -309,9 +316,6 @@
     --core-large-avatar-size: 90px;
     --core-avatar-size: var(--a11y-min-target-size);
 
-    --core-send-message-input-background: var(--gray-200);
-    --core-send-message-input-color: var(--gray-900);
-
     --core-courseimage-on-course-size: 72px;
     --core-courseimage-radius: var(--medium-radius);