[Glitch] Fix contrast of some elements with new brand colors

Port 0391b2a6033b56bd0ce213c35a21186fdcb607bc to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index d14648bb5c010500005f0cf45276ea995c63d799..9553aa4ae2bd031a3aa72bdd830e892130dca1fb 100644 (file)
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -133,12 +133,12 @@ $content-width: 840px;
 
       .simple-navigation-active-leaf a {
         color: $primary-text-color;
-        background-color: $ui-highlight-color;
+        background-color: darken($ui-highlight-color, 2%);
         border-bottom: 0;
         border-radius: 0;
 
         &:hover {
-          background-color: lighten($ui-highlight-color, 5%);
+          background-color: $ui-highlight-color;
         }
       }
     }
@@ -904,7 +904,7 @@ a.name-tag,
     border: 0;
 
     a {
-      color: lighten($ui-highlight-color, 8%);
+      color: $highlight-text-color;
     }
 
     dl:first-child .verified {

diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss
index 52feefd3ca790385d640cf1132519a5cc4049b45..85af9afc83a5cbaa126c947e3580f030dab314e7 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/announcements.scss
+++ b/app/javascript/flavours/glitch/styles/components/announcements.scss
@@ -36,7 +36,7 @@
     }
 
     &.unhandled-link {
-      color: lighten($ui-highlight-color, 8%);
+      color: $highlight-text-color;
     }
   }
 }

diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 8d51ef8165d4759f2a4bd8390dcefc23885e8c92..1440682f3f6a0dce3b344fcefff4b9aa98095ffb 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -201,7 +201,7 @@
     }
 
     &.active {
-      color: $ui-highlight-color;
+      color: $highlight-text-color;
     }
   }
 }

diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss
index b48c6c102b4d49821eb0fa20522a75cadfc7e540..803e075c9e885ec53cb35631d62d40512d152b5a 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/directory.scss
+++ b/app/javascript/flavours/glitch/styles/components/directory.scss
@@ -58,8 +58,8 @@
     vertical-align: middle;
 
     &.checked {
-      border-color: lighten($ui-highlight-color, 8%);
-      background: lighten($ui-highlight-color, 8%);
+      border-color: lighten($ui-highlight-color, 4%);
+      background: lighten($ui-highlight-color, 4%);
     }
   }
 }

diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index da9fb6ad2d557ad27dce41e7658c5851e7dcb73f..7f9ed2186037e3db9206df6075993af282ebcb46 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -51,22 +51,16 @@
   text-align: center;
   text-decoration: none;
   text-overflow: ellipsis;
-  transition: all 100ms ease-in;
-  transition-property: background-color;
   white-space: nowrap;
   width: auto;
 
   &:active,
   &:focus,
   &:hover {
-    background-color: lighten($ui-highlight-color, 7%);
-    transition: all 200ms ease-out;
-    transition-property: background-color;
+    background-color: $ui-highlight-color;
   }
 
   &--destructive {
-    transition: none;
-
     &:active,
     &:focus,
     &:hover {
@@ -916,11 +910,11 @@
 }
 
 .react-toggle--checked .react-toggle-track {
-  background-color: $ui-highlight-color;
+  background-color: darken($ui-highlight-color, 2%);
 }
 
 .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
-  background-color: lighten($ui-highlight-color, 10%);
+  background-color: $ui-highlight-color;
 }
 
 .react-toggle-track-check {
@@ -1216,14 +1210,14 @@ button.icon-button.active i.fa-retweet {
   }
 
   a {
-    color: lighten($ui-highlight-color, 8%);
+    color: $highlight-text-color;
     text-decoration: none;
 
     &:hover,
     &:focus,
     &:active {
       text-decoration: underline;
-      color: lighten($ui-highlight-color, 12%);
+      color: lighten($highlight-text-color, 4%);
     }
   }
 }

diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index ba43e7f2911a4d59f11387c3951ad54b5baffd00..d10fc1d3e8e13d8ca6d886d7eb19592a66f4d172 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -199,7 +199,7 @@
   height: 3.9375rem;
   bottom: 1.3125rem;
   right: 1.3125rem;
-  background: darken($ui-highlight-color, 3%);
+  background: darken($ui-highlight-color, 2%);
   color: $white;
   border-radius: 50%;
   font-size: 21px;
@@ -210,7 +210,7 @@
   &:hover,
   &:focus,
   &:active {
-    background: lighten($ui-highlight-color, 7%);
+    background: $ui-highlight-color;
   }
 }
 

diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index cc424f941c8dd494043929db1a41b7da0669f441..9e346c5f08f15b0527ebfac95973e3f5d2d36b3f 100644 (file)
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -187,7 +187,7 @@
   }
 
   a.unhandled-link {
-    color: lighten($ui-highlight-color, 8%);
+    color: $highlight-text-color;
 
     .link-origin-tag {
       color: $gold-star;

diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index 2bc55a1d73e39787cc772d4eb5655c6feb124230..b8d0fdad2ad81ec7ca88a9f9133bb08a83f8e72a 100644 (file)
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -797,7 +797,7 @@
       border-top: 0;
 
       a {
-        color: lighten($ui-highlight-color, 8%);
+        color: $highlight-text-color;
       }
 
       dl:first-child .verified {

diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.scss
index f6cadf0298cf4368fe19c726616c622c67343fea..ab14a7b7389bab7677aaa5777f99551019d378bd 100644 (file)
--- a/app/javascript/flavours/glitch/styles/contrast/variables.scss
+++ b/app/javascript/flavours/glitch/styles/contrast/variables.scss
@@ -4,19 +4,17 @@ $black: #000000;
 $classic-base-color: #282c37;
 $classic-primary-color: #9baec8;
 $classic-secondary-color: #d9e1e8;
-$classic-highlight-color: #2b90d9;
+$classic-highlight-color: #6364ff;
 
 $ui-base-color: $classic-base-color !default;
 $ui-primary-color: $classic-primary-color !default;
 $ui-secondary-color: $classic-secondary-color !default;
-
-// Differences
-$ui-highlight-color: #2b5fd9;
+$ui-highlight-color: $classic-highlight-color !default;
 
 $darker-text-color: lighten($ui-primary-color, 20%) !default;
 $dark-text-color: lighten($ui-primary-color, 12%) !default;
 $secondary-text-color: lighten($ui-secondary-color, 6%) !default;
-$highlight-text-color: $classic-highlight-color !default;
+$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
 $action-button-color: #8d9ac2;
 
 $inverted-text-color: $black !default;

diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss
index 0a881bc10852feb35f0c9fb579494fb4ea492887..9b06b44d6d154c1f9ba3c080f96de889a4ff6bdb 100644 (file)
--- a/app/javascript/flavours/glitch/styles/dashboard.scss
+++ b/app/javascript/flavours/glitch/styles/dashboard.scss
@@ -83,7 +83,7 @@
     display: flex;
     align-items: baseline;
     border-radius: 4px;
-    background: $ui-highlight-color;
+    background: darken($ui-highlight-color, 2%);
     color: $primary-text-color;
     transition: all 100ms ease-in;
     font-size: 14px;
@@ -96,7 +96,7 @@
     &:active,
     &:focus,
     &:hover {
-      background-color: lighten($ui-highlight-color, 10%);
+      background-color: $ui-highlight-color;
       transition: all 200ms ease-out;
     }
 

diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index a08ca24f14fbea2f7451b0dae58ef93e406f0814..5aa75b41e3436ae053869de6465d955751734b0f 100644 (file)
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -454,14 +454,14 @@ code {
     width: 100%;
     border: 0;
     border-radius: 4px;
-    background: $ui-highlight-color;
+    background: darken($ui-highlight-color, 2%);
     color: $primary-text-color;
     font-size: 18px;
     line-height: inherit;
     height: auto;
     padding: 10px;
-    text-transform: uppercase;
     text-decoration: none;
+    text-transform: uppercase;
     text-align: center;
     box-sizing: border-box;
     cursor: pointer;
@@ -474,13 +474,10 @@ code {
       margin-right: 0;
     }
 
-    &:hover {
-      background-color: lighten($ui-highlight-color, 5%);
-    }
-
     &:active,
-    &:focus {
-      background-color: darken($ui-highlight-color, 5%);
+    &:focus,
+    &:hover {
+      background-color: $ui-highlight-color;
     }
 
     &:disabled:hover {

diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
index 7709d4535462dc6336ef3faf149834b7dcc7e39c..f1c8a3503a8d6db9a9f4c052a70384103085ebc4 100644 (file)
--- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
@@ -5,7 +5,7 @@ $white: #ffffff;
 $classic-base-color: #282c37;
 $classic-primary-color: #9baec8;
 $classic-secondary-color: #d9e1e8;
-$classic-highlight-color: #2b90d9;
+$classic-highlight-color: #6364ff;
 
 $ui-base-color: $classic-secondary-color !default;
 $ui-base-lighter-color: darken($ui-base-color, 57%);
@@ -15,6 +15,7 @@ $ui-secondary-color: $classic-base-color !default;
 
 $primary-text-color: $black !default;
 $darker-text-color: $classic-base-color !default;
+$highlight-text-color: darken($ui-highlight-color, 8%) !default;
 $dark-text-color: #444b5d;
 $action-button-color: #606984;
 

diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss
index b807fa45a8edeb14ad381aa98b53ea2130961c55..c302fc0d0d09662995d3607e17b423207cac8442 100644 (file)
--- a/app/javascript/flavours/glitch/styles/statuses.scss
+++ b/app/javascript/flavours/glitch/styles/statuses.scss
@@ -76,7 +76,7 @@
 .button.logo-button {
   flex: 0 auto;
   font-size: 14px;
-  background: $ui-highlight-color;
+  background: darken($ui-highlight-color, 2%);
   color: $primary-text-color;
   text-transform: none;
   line-height: 1.2;
@@ -100,7 +100,7 @@
   &:active,
   &:focus,
   &:hover {
-    background: lighten($ui-highlight-color, 10%);
+    background: $ui-highlight-color;
   }
 
   &:disabled,
@@ -267,7 +267,7 @@ a.button.logo-button {
   display: block;
   font-size: 15px;
   line-height: 20px;
-  color: lighten($ui-highlight-color, 8%);
+  color: $highlight-text-color;
   border: 0;
   background: transparent;
   padding: 0;

diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss
index c2da24184d28660a6435d60d3d2ff40c23d6f872..65758e6e09403332d47fc235686cd54c3d3410b1 100644 (file)
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/variables.scss
@@ -34,7 +34,7 @@ $primary-text-color: $white !default;
 $darker-text-color: $ui-primary-color !default;
 $dark-text-color: $ui-base-lighter-color !default;
 $secondary-text-color: $ui-secondary-color !default;
-$highlight-text-color: $ui-highlight-color !default;
+$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
 $action-button-color: $ui-base-lighter-color !default;
 $passive-text-color: $gold-star !default;
 $active-passive-text-color: $success-green !default;