From 58a3885d235190c353911ad009554edec86b2302 Mon Sep 17 00:00:00 2001 From: diondiondion Date: Fri, 5 Sep 2025 13:20:09 +0200 Subject: [PATCH] Replaced $inverted-text-color --- app/javascript/styles/contrast/variables.scss | 5 +- .../styles/mastodon-light/variables.scss | 6 - app/javascript/styles/mastodon/_mixins.scss | 10 +- .../styles/mastodon/_variables.scss | 5 - app/javascript/styles/mastodon/accounts.scss | 2 +- .../styles/mastodon/components.scss | 138 ++---------------- 6 files changed, 18 insertions(+), 148 deletions(-) diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss index 3a667ab9fd2..6fe456e52e4 100644 --- a/app/javascript/styles/contrast/variables.scss +++ b/app/javascript/styles/contrast/variables.scss @@ -3,8 +3,5 @@ $ui-base-color: hsl(240deg, 16%, 19%) !default; @use '../mastodon/variables' with ( - $action-button-color: lighten($ui-base-color, 50%), - $inverted-text-color: #000, - $lighter-text-color: darken($ui-base-color, 6%), - $light-text-color: hsl(240deg, 29%, 70%) + $action-button-color: lighten($ui-base-color, 50%) ); diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss index 5a64ffa2f5d..f6e3775cd48 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/styles/mastodon-light/variables.scss @@ -5,11 +5,9 @@ $lighten-multiplier: -1 ); -$black: #000; // Black $white: #fff; // White $blurple-500: #6364ff; // Brand purple $grey-600: hsl(240deg, 8%, 33%); // Trout -$grey-100: hsl(240deg, 51%, 90%); // Topaz @use '../mastodon/variables' with ( $ui-base-color: hsl(255deg, 25%, 88%), @@ -21,10 +19,6 @@ $grey-100: hsl(240deg, 51%, 90%); // Topaz $ui-button-tertiary-color: $blurple-500, $ui-button-tertiary-border-color: $blurple-500, - $lighter-text-color: hsl(240deg, 16%, 19%), - $light-text-color: hsl(240deg, 16%, 32%), - $inverted-text-color: $black, - $action-button-color: hsl(240deg, 16%, 45%), $emojis-requiring-inversion: 'chains' ); diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss index 43fb80bdf2f..3fa53c65a81 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -1,7 +1,3 @@ -@use 'sass:color'; -@use 'variables' as *; -@use 'theme_utils' as *; - @mixin search-input { outline: 0; box-sizing: border-box; @@ -23,12 +19,12 @@ padding: 10px 14px; padding-bottom: 14px; margin-top: 10px; - color: $light-text-color; + color: var(--clr-text-secondary); box-shadow: 2px 4px 15px var(--clr-shadow-primary); h4 { text-transform: uppercase; - color: $light-text-color; + color: var(--clr-text-secondary); font-size: 13px; font-weight: 500; margin-bottom: 10px; @@ -44,6 +40,6 @@ em { font-weight: 500; - color: $inverted-text-color; + color: var(--clr-text-primary); } } diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss index f5f175a6aa6..52f2a1ad401 100644 --- a/app/javascript/styles/mastodon/_variables.scss +++ b/app/javascript/styles/mastodon/_variables.scss @@ -45,11 +45,6 @@ $ui-button-tertiary-focus-color: $white !default; $action-button-color: $ui-base-lighter-color !default; $action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default; -// For texts on inverted backgrounds -$inverted-text-color: $ui-base-color !default; -$lighter-text-color: $ui-base-lighter-color !default; -$light-text-color: hsl(240deg, 29%, 70%) !default; - // Keep this filter a SCSS variable rather than // a CSS Custom Property due to this Safari bug: // https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245 diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 6af64b94dd4..116bf6dc186 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -143,7 +143,7 @@ .disabled { cursor: default; - color: lighten($inverted-text-color, 10%); + color: var(--clr-text-disabled); } @media screen and (width <= 700px) { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index e20e7f8d3d6..dd5fa7e59f7 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -417,48 +417,7 @@ } } -.text-icon-button { - color: $lighter-text-color; - border: 0; - border-radius: 4px; - background: transparent; - cursor: pointer; - font-weight: 600; - font-size: 11px; - padding: 0 3px; - line-height: 27px; - white-space: nowrap; - - &:hover, - &:active, - &:focus { - color: darken($lighter-text-color, 7%); - background-color: color.change($lighter-text-color, $alpha: 0.15); - } - - &:focus-visible { - outline: var(--outline-focus-default); - } - - &.disabled { - color: lighten($lighter-text-color, 20%); - background-color: transparent; - cursor: default; - } - - &.active { - color: var(--clr-text-accent); - - &:hover, - &:active, - &:focus { - color: var(--clr-text-accent); - background-color: transparent; - } - } -} - -[data-popper-placement] { +body > [data-popper-placement] { z-index: 9999; } @@ -4002,8 +3961,8 @@ a.account__display-name { .follow_requests-unlocked_explanation, .switch-to-advanced { - color: $light-text-color; - background-color: $ui-base-color; + color: var(--clr-text-secondary); + background-color: var(--clr-bg-secondary); padding: 15px; border-radius: 4px; margin-top: 4px; @@ -4012,7 +3971,7 @@ a.account__display-name { line-height: 18px; a { - color: $ui-button-tertiary-color; + color: var(--clr-text-accent); font-weight: bold; } } @@ -5111,7 +5070,7 @@ a.status-card { } &__multi-value { - background: lighten($ui-base-color, 8%); + background: var(--clr-bg-secondary); &__remove { cursor: pointer; @@ -5119,7 +5078,7 @@ a.status-card { &:hover, &:active, &:focus { - background: lighten($ui-base-color, 12%); + background: var(--clr-bg-accent-subtle); color: color-mix( in oklab, var(--clr-text-primary), @@ -5149,14 +5108,14 @@ a.status-card { } &__indicator-separator { - background-color: lighten($ui-base-color, 8%); + background-color: var(--clr-border-primary); } &__menu { @include search-popout; padding: 0; - background: $ui-secondary-color; + background: var(--clr-bg-elevated); } &__menu-list { @@ -5164,13 +5123,14 @@ a.status-card { } &__option { - color: $inverted-text-color; + color: var(--clr-text-primary); border-radius: 4px; font-size: 14px; &--is-focused, &--is-selected { - background: darken($ui-secondary-color, 10%); + color: var(--clr-text-on-accent-strong); + background: var(--clr-bg-accent-strong); } } } @@ -6657,29 +6617,6 @@ a.status-card { } } -.boost-modal__action-bar { - display: flex; - justify-content: space-between; - align-items: center; - background: $ui-secondary-color; - padding: 15px; - - & > div { - flex: 1 1 auto; - text-align: end; - color: $lighter-text-color; - padding-inline-end: 10px; - } - - .icon { - vertical-align: middle; - } - - .button { - flex: 0 0 auto; - } -} - .report-modal { width: 90vw; max-width: 700px; @@ -6896,55 +6833,6 @@ a.status-card { } } -.report-modal__container { - display: flex; - border-top: 1px solid var(--clr-border-primary); - - @media screen and (width <= 480px) { - flex-wrap: wrap; - overflow-y: auto; - } -} - -.report-modal__statuses, -.report-modal__comment { - box-sizing: border-box; - width: 50%; - min-width: 50%; - - @media screen and (width <= 480px) { - width: 100%; - } -} - -.report-modal__statuses, -.focal-point-modal__content { - flex: 1 1 auto; - min-height: 20vh; - max-height: 80vh; - overflow-y: auto; - overflow-x: hidden; - - .status__content a { - color: var(--clr-text-accent); - } - - .status__content, - .status__content p { - color: $inverted-text-color; - } - - @media screen and (width <= 480px) { - max-height: 10vh; - } -} - -.focal-point-modal__content { - @media screen and (width <= 480px) { - max-height: 40vh; - } -} - .setting-divider { background: transparent; border: 0; @@ -8701,7 +8589,7 @@ noscript { &__name { flex: 1 1 auto; - color: var(--clr-text-tertiary); + color: var(--clr-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -8711,7 +8599,7 @@ noscript { } a { - color: var(--clr-text-secondary); + color: var(--clr-text-primary); text-decoration: none; font-size: 14px; font-weight: 500;