From 0391b2a6033b56bd0ce213c35a21186fdcb607bc Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 19 Jun 2022 08:18:08 +0200 Subject: [PATCH] Fix contrast of some elements with new brand colors (#18691) --- app/javascript/styles/contrast/variables.scss | 8 ++--- .../styles/mastodon-light/variables.scss | 5 +-- app/javascript/styles/mastodon/admin.scss | 6 ++-- .../styles/mastodon/components.scss | 32 ++++++++----------- .../styles/mastodon/containers.scss | 2 +- app/javascript/styles/mastodon/dashboard.scss | 4 +-- app/javascript/styles/mastodon/forms.scss | 13 +++----- app/javascript/styles/mastodon/statuses.scss | 4 +-- app/javascript/styles/mastodon/variables.scss | 2 +- 9 files changed, 34 insertions(+), 42 deletions(-) diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss index cfe3b21dbc6..9edfd6d8d73 100644 --- a/app/javascript/styles/contrast/variables.scss +++ b/app/javascript/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/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss index f6bc3ac9607..cae065878c5 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/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; // Differences $success-green: lighten(#3c754d, 8%); @@ -17,10 +17,11 @@ $ui-base-color: $classic-secondary-color !default; $ui-base-lighter-color: #b0c0cf; $ui-primary-color: #9bcbed; $ui-secondary-color: $classic-base-color !default; -$ui-highlight-color: #2b90d9; +$ui-highlight-color: $classic-highlight-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/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 18638e18f51..f83d6424ad4 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/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; } } } @@ -885,7 +885,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/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 13474a00352..1ada1fcf7d4 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -42,7 +42,7 @@ } .button { - background-color: $ui-highlight-color; + background-color: darken($ui-highlight-color, 2%); border: 10px none; border-radius: 4px; box-sizing: border-box; @@ -60,20 +60,16 @@ text-align: center; text-decoration: none; text-overflow: ellipsis; - transition: all 100ms ease-in; white-space: nowrap; width: auto; &:active, &:focus, &:hover { - background-color: lighten($ui-highlight-color, 10%); - transition: all 200ms ease-out; + background-color: $ui-highlight-color; } &--destructive { - transition: none; - &:active, &:focus, &:hover { @@ -829,7 +825,7 @@ } a.unhandled-link { - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; } .status__content__spoiler-link { @@ -899,7 +895,7 @@ } &.unhandled-link { - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; } } } @@ -912,7 +908,7 @@ display: block; font-size: 15px; line-height: 20px; - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; border: 0; background: transparent; padding: 0; @@ -2437,7 +2433,7 @@ a.account__display-name { 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; @@ -2448,7 +2444,7 @@ a.account__display-name { &:hover, &:focus, &:active { - background: lighten($ui-highlight-color, 7%); + background: $ui-highlight-color; } } @@ -2881,11 +2877,11 @@ a.account__display-name { } .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 { @@ -2974,7 +2970,7 @@ a.account__display-name { } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; } } } @@ -3407,14 +3403,14 @@ a.status-card.compact:hover { } 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%); } } } @@ -6427,8 +6423,8 @@ a.status-card.compact:hover { 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/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 23dbece6b3d..5703a64e362 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -791,7 +791,7 @@ border-top: 0; a { - color: lighten($ui-highlight-color, 8%); + color: $highlight-text-color; } dl:first-child .verified { diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss index 7d0e51fdee2..c21fc9eba84 100644 --- a/app/javascript/styles/mastodon/dashboard.scss +++ b/app/javascript/styles/mastodon/dashboard.scss @@ -82,7 +82,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; @@ -95,7 +95,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/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 94f553b76c2..d57eabc09ff 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -463,14 +463,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; @@ -483,13 +483,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/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss index a926aff9691..a3237a63073 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.scss @@ -80,7 +80,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; @@ -104,7 +104,7 @@ &:active, &:focus, &:hover { - background: lighten($ui-highlight-color, 10%); + background: $ui-highlight-color; } &:disabled, diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 544f33ebff6..be2c900eaa1 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/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;