From 353e2c5d84fcfe253d58e0a0038deac0bfc867e3 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 19 Jun 2022 08:18:08 +0200 Subject: [PATCH] [Glitch] Fix contrast of some elements with new brand colors Port 0391b2a6033b56bd0ce213c35a21186fdcb607bc to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/styles/admin.scss | 6 +++--- .../glitch/styles/components/announcements.scss | 2 +- .../glitch/styles/components/columns.scss | 2 +- .../glitch/styles/components/directory.scss | 4 ++-- .../flavours/glitch/styles/components/index.scss | 16 +++++----------- .../glitch/styles/components/single_column.scss | 4 ++-- .../glitch/styles/components/status.scss | 2 +- .../flavours/glitch/styles/containers.scss | 2 +- .../glitch/styles/contrast/variables.scss | 8 +++----- .../flavours/glitch/styles/dashboard.scss | 4 ++-- app/javascript/flavours/glitch/styles/forms.scss | 13 +++++-------- .../glitch/styles/mastodon-light/variables.scss | 3 ++- .../flavours/glitch/styles/statuses.scss | 6 +++--- .../flavours/glitch/styles/variables.scss | 2 +- 14 files changed, 32 insertions(+), 42 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index d14648bb5..9553aa4ae 100644 --- 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 52feefd3c..85af9afc8 100644 --- 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 8d51ef816..1440682f3 100644 --- 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 b48c6c102..803e075c9 100644 --- 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 da9fb6ad2..7f9ed2186 100644 --- 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 ba43e7f29..d10fc1d3e 100644 --- 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 cc424f941..9e346c5f0 100644 --- 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 2bc55a1d7..b8d0fdad2 100644 --- 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 f6cadf029..ab14a7b73 100644 --- 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 0a881bc10..9b06b44d6 100644 --- 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 a08ca24f1..5aa75b41e 100644 --- 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 7709d4535..f1c8a3503 100644 --- 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 b807fa45a..c302fc0d0 100644 --- 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 c2da24184..65758e6e0 100644 --- 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;