From 2e88cc30fb44679f0b628e2cedcd6434b5c91604 Mon Sep 17 00:00:00 2001 From: diondiondion Date: Thu, 4 Sep 2025 15:17:59 +0200 Subject: [PATCH] Replace $base-overlay-background --- .../styles/mastodon-light/css_variables.scss | 6 ++++++ .../styles/mastodon-light/variables.scss | 2 -- .../styles/mastodon/_variables.scss | 1 - .../styles/mastodon/components.scss | 20 ++++++++----------- .../styles/mastodon/css_variables.scss | 3 +++ 5 files changed, 17 insertions(+), 15 deletions(-) diff --git a/app/javascript/styles/mastodon-light/css_variables.scss b/app/javascript/styles/mastodon-light/css_variables.scss index de6d75b12cc..1cad7fac2a1 100644 --- a/app/javascript/styles/mastodon-light/css_variables.scss +++ b/app/javascript/styles/mastodon-light/css_variables.scss @@ -46,6 +46,9 @@ --clr-text-on-success-strong: var(--clr-white); --clr-text-disabled: var(--clr-grey-300); --clr-text-on-disabled: var(--clr-grey-200); + --clr-text-bookmark-highlight: var(--clr-text-error); + --clr-text-favourite-highlight: var(--clr-text-warning); + --clr-text-on-media: var(--clr-white); /* BACKGROUND TOKENS */ @@ -67,8 +70,11 @@ var(--clr-bg-primary), var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength)) )}; + --clr-bg-ambient: var(--clr-bg-primary); --clr-bg-elevated: var(--clr-bg-primary); --clr-bg-inverted: var(--clr-grey-950); + --clr-bg-media: var(--clr-black); + --clr-bg-overlay: var(--clr-bg-primary); --clr-bg-disabled: var(--clr-grey-400); --clr-bg-accent-subtle-base: var(--clr-indigo-600); --clr-bg-accent-subtle-strength: 12%; diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss index d35b370211c..5a64ffa2f5d 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/styles/mastodon-light/variables.scss @@ -12,8 +12,6 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout $grey-100: hsl(240deg, 51%, 90%); // Topaz @use '../mastodon/variables' with ( - $base-overlay-background: $white, - $ui-base-color: hsl(255deg, 25%, 88%), $ui-base-lighter-color: hsl(250deg, 24%, 75%), $ui-secondary-color: hsl(240deg, 16%, 19%), diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss index 6e10c5e0c53..144eeda1494 100644 --- a/app/javascript/styles/mastodon/_variables.scss +++ b/app/javascript/styles/mastodon/_variables.scss @@ -15,7 +15,6 @@ $grey-100: hsl(240deg, 51%, 90%); // Topaz // Variables for defaults in UI $base-shadow-color: $black !default; -$base-overlay-background: $black !default; $base-border-color: $white !default; $simple-background-color: $white !default; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index fe1f6cb213f..5b3b51e4fef 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3453,7 +3453,7 @@ a.account__display-name { .columns-area__panels__pane--overlay { pointer-events: auto; - background: color.change($base-overlay-background, $alpha: 0.5); + background: rgb(from var(--clr-bg-overlay) r g b / 50%); z-index: 3; .columns-area__panels__pane__inner { @@ -3990,10 +3990,6 @@ a.account__display-name { border-radius: 10px; padding: 0; user-select: none; - -webkit-tap-highlight-color: color.change( - $base-overlay-background, - $alpha: 0 - ); -webkit-tap-highlight-color: transparent; } @@ -4431,7 +4427,7 @@ a.status-card { top: 0; inset-inline-start: 0; z-index: 0; - background: $base-overlay-background; + background: var(--clr-bg-primary); &--hidden { display: none; @@ -4999,7 +4995,7 @@ a.status-card { .video-error-cover { align-items: center; - background: $base-overlay-background; + background: var(--clr-bg-primary); color: var(--clr-text-primary); cursor: pointer; display: flex; @@ -5457,7 +5453,7 @@ a.status-card { .upload-area { align-items: center; - background: color.change($base-overlay-background, $alpha: 0.8); + background: rgb(from var(--clr-bg-overlay) r g b / 80%); display: flex; height: 100vh; justify-content: center; @@ -6123,7 +6119,7 @@ a.status-card { inset-inline-end: 0; bottom: 0; opacity: 0.9; - background: $base-overlay-background; + background: var(--clr-bg-overlay); transition: background 0.5s; } @@ -7505,7 +7501,7 @@ a.status-card { top: 0; inset-inline-start: 0; z-index: -2; - background: $base-overlay-background; + background: var(--clr-bg-overlay); &--hidden { display: none; @@ -7768,7 +7764,7 @@ a.status-card { height: 100%; z-index: 4; border: 0; - background: $base-overlay-background; + background: var(--clr-bg-overlay); color: var(--clr-text-secondary); transition: none; pointer-events: none; @@ -8353,7 +8349,7 @@ noscript { inset-inline-start: 0; width: 100%; height: 100%; - background: color.change($base-overlay-background, $alpha: 0.5); + background: rgb(from var(--clr-bg-overlay) r g b / 50%); } .focal-point { diff --git a/app/javascript/styles/mastodon/css_variables.scss b/app/javascript/styles/mastodon/css_variables.scss index a2c759d8748..bd904a17dea 100644 --- a/app/javascript/styles/mastodon/css_variables.scss +++ b/app/javascript/styles/mastodon/css_variables.scss @@ -54,6 +54,7 @@ --clr-text-on-disabled: var(--clr-grey-400); --clr-text-bookmark-highlight: var(--clr-text-error); --clr-text-favourite-highlight: var(--clr-text-warning); + --clr-text-on-media: var(--clr-white); /* BACKGROUND TOKENS */ @@ -79,6 +80,8 @@ --clr-bg-ambient: var(--clr-bg-primary); --clr-bg-elevated: var(--clr-grey-800); --clr-bg-inverted: var(--clr-grey-50); + --clr-bg-media: var(--clr-black); + --clr-bg-overlay: var(--clr-bg-primary); --clr-bg-disabled: var(--clr-grey-700); --clr-bg-accent-subtle-base: var(--clr-indigo-400); --clr-bg-accent-subtle-strength: 10%;