Fix color mistakes in mastodon-light theme (#7626)

* Fix colors of mastodon-light theme

Fix colors of modals and focused toots in light theme
Fix colors of compose-form items and more
Fix colors of status__content__spoiler-link:hover and $valid-value-color
Change success green color in light theme

* Fix some sass codes

* Add !default for explicit color valiables in default theme

for overwriting colors easier in the other themes

4 files changed, 63 insertions, 11 deletions

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 42c790bac..2b88b830c 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -25,6 +25,55 @@
   background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($white)}"/></svg>') no-repeat bottom / 100% auto;
 }
 
+.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button {
+  color: $ui-base-color;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: darken($ui-base-color, 7%);
+  }
+}
+
+.compose-form .compose-form__modifiers .compose-form__upload-description input {
+  color: $ui-base-color;
+
+  &::placeholder {
+    color: $ui-base-color;
+  }
+}
+
+.compose-form .compose-form__buttons-wrapper {
+  background: darken($ui-base-color, 6%);
+}
+
+.focusable:focus {
+  background: $ui-base-color;
+}
+
+.status.status-direct {
+  background: lighten($ui-base-color, 4%);
+}
+
+.focusable:focus .status.status-direct {
+  background: lighten($ui-base-color, 8%);
+}
+
+.detailed-status,
+.detailed-status__action-bar {
+  background: darken($ui-base-color, 6%);
+}
+
+// Change the background color of status__content__spoiler-link
+.reply-indicator__content .status__content__spoiler-link,
+.status__content .status__content__spoiler-link {
+  background: $ui-base-lighter-color;
+
+  &:hover {
+    background: lighten($ui-base-lighter-color, 6%);
+  }
+}
+
 // Change the colors used in the dropdown menu
 .dropdown-menu {
   background: $ui-base-color;
@@ -84,17 +133,17 @@
 .confirmation-modal,
 .mute-modal,
 .report-modal {
-  background: $ui-secondary-color;
+  background: $ui-base-color;
 }
 
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar {
-  background: darken($ui-secondary-color, 6%);
+  background: darken($ui-base-color, 6%);
 }
 
 .react-toggle-track {
-  background: $ui-base-color;
+  background: $ui-secondary-color;
 }
 
 // Change the default color used for the text in an empty column or on the error column
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index 4be454e66..9f6d470b1 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -8,7 +8,10 @@ $classic-secondary-color: #d9e1e8;
 $classic-highlight-color: #2b90d9;
 
 // Differences
-$base-overlay-background: $white;
+$success-green: #3c754d;
+
+$base-overlay-background: $white !default;
+$valid-value-color: $success-green !default;
 
 $ui-base-color: $classic-secondary-color !default;
 $ui-base-lighter-color: #b0c0cf;
@@ -26,7 +29,7 @@ $lighter-text-color: $classic-base-color !default;
 $light-text-color: #444b5d;
 
 //Newly added colors
-$account-background-color: $white;
+$account-background-color: $white !default;
 
 //Invert darkened and lightened colors
 @function darken($color, $amount) {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 412f8d770..55564b281 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -425,7 +425,7 @@
 
         .icon-button {
           flex: 0 1 auto;
-          color: $action-button-color;
+          color: $secondary-text-color;
           font-size: 14px;
           font-weight: 500;
           padding: 10px;
@@ -434,7 +434,7 @@
           &:hover,
           &:focus,
           &:active {
-            color: lighten($action-button-color, 7%);
+            color: lighten($secondary-text-color, 7%);
           }
         }
 
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index cbefe35b4..40aeb4afc 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -1,10 +1,10 @@
 // Commonly used web colors
 $black: #000000;            // Black
 $white: #ffffff;            // White
-$success-green: #79bd9a;    // Padua
-$error-red: #df405a;        // Cerise
-$warning-red: #ff5050;      // Sunset Orange
-$gold-star: #ca8f04;        // Dark Goldenrod
+$success-green: #79bd9a !default;    // Padua
+$error-red: #df405a !default;        // Cerise
+$warning-red: #ff5050 !default;      // Sunset Orange
+$gold-star: #ca8f04 !default;        // Dark Goldenrod
 
 // Values from the classic Mastodon UI
 $classic-base-color: #282c37;         // Midnight Express