From 3ee44d1119fc51b87040ffa8633342bae21cbe93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Istv=C3=A1n=20So=C3=B3s?= Date: Thu, 3 Oct 2024 18:00:12 +0200 Subject: [PATCH] Migrate neutral hover background colors (#8098) --- pkg/web_css/lib/src/_base.scss | 2 +- pkg/web_css/lib/src/_home.scss | 4 ++-- pkg/web_css/lib/src/_list.scss | 6 +++--- pkg/web_css/lib/src/_report.scss | 2 +- pkg/web_css/lib/src/_variables.scss | 24 ++++++++---------------- 5 files changed, 15 insertions(+), 23 deletions(-) diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss index 670400a1f3..fc11c20873 100644 --- a/pkg/web_css/lib/src/_base.scss +++ b/pkg/web_css/lib/src/_base.scss @@ -64,7 +64,7 @@ summary { transition: background-color 0.3s; &:hover { - background: var(--pub-summary_hover-background-color); + background: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%); } &:focus { diff --git a/pkg/web_css/lib/src/_home.scss b/pkg/web_css/lib/src/_home.scss index e9e396eb67..7afa41e169 100644 --- a/pkg/web_css/lib/src/_home.scss +++ b/pkg/web_css/lib/src/_home.scss @@ -108,13 +108,13 @@ min-height: 100px; &:hover { - background: var(--pub-home_card_hover-background-color); + background: var(--pub-neutral-hover-bgColor); box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color); @media (min-width: $device-desktop-min-width) { .mini-list-item-body { &:before { - background: var(--pub-home_card_hover_fadeout-background-value); + background: linear-gradient(transparent 90%, var(--pub-neutral-hover-bgColor)); } } } diff --git a/pkg/web_css/lib/src/_list.scss b/pkg/web_css/lib/src/_list.scss index baf4f53288..5ad2654608 100644 --- a/pkg/web_css/lib/src/_list.scss +++ b/pkg/web_css/lib/src/_list.scss @@ -67,7 +67,7 @@ text-align: left; &:hover { - background: var(--pub-sort_control_hover-background-color); + background: var(--pub-neutral-hover-bgColor); color: var(--pub-sort_control_hover-text-color); } @@ -190,7 +190,7 @@ padding: 15px 30px; &:hover { - background: var(--pub-pkg_list_item_hover-background-color); + background: var(--pub-neutral-hover-bgColor); } } @@ -305,7 +305,7 @@ margin-right: 8px; &:hover { - background: var(--pub-pkg_list_item_hover-background-color); + background: var(--pub-neutral-hover-bgColor); } .publishers-item-title { diff --git a/pkg/web_css/lib/src/_report.scss b/pkg/web_css/lib/src/_report.scss index 2a2e7d7f02..a163d1aba9 100644 --- a/pkg/web_css/lib/src/_report.scss +++ b/pkg/web_css/lib/src/_report.scss @@ -23,7 +23,7 @@ cursor: pointer; &:hover { - background: var(--pub-report-hover-background-color); + background: var(--pub-neutral-hover-bgColor); } } diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss index 184d77b147..e11b02db04 100644 --- a/pkg/web_css/lib/src/_variables.scss +++ b/pkg/web_css/lib/src/_variables.scss @@ -17,12 +17,14 @@ :root { --pub-color-white: #ffffff; + --pub-color-snowWhite: #fafafa; // slight deviation from official snow-white (fffafa) --pub-color-smokeWhite: #f5f5f7; // slight deviation from official white-smoke (f5f5f5) --pub-color-dangerRed: #ff4242; - --pub-neutral-bgColor: var(--pub-color-white); - --pub-inset-bgColor: var(--pub-color-smokeWhite); + --pub-neutral-bgColor: var(--pub-color-white); + --pub-neutral-hover-bgColor: var(--pub-color-snowWhite); + --pub-inset-bgColor: var(--pub-color-smokeWhite); --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif; --pub-default-text-color: hsl(0, 0%, 29%); @@ -53,19 +55,15 @@ --pub-home_banner-link-color: #31b0fc; --pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3); --pub-home_card_title-text-color: #1967d2; - --pub-home_card_hover-background-color: #fafafa; --pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4); - --pub-home_card_hover_fadeout-background-value: linear-gradient(transparent 90%, var(--pub-home_card_hover-background-color)); --pub-pagination-active-color: var(--pub-link-text-color); --pub-pagination-inactive-color: #aaaaaa; --pub-input-placeholder-color: #888; - --pub-pkg_list_item_hover-background-color: #fafafa; --pub-pkg_list_recent_item-text-color: #6d7278; --pub-remove_button-background-color: var(--pub-color-dangerRed); --pub-remove_button-text-color: var(--pub-color-white); --pub-report_header_score_error-text-color: #e13701; --pub-report_header_score_warning-text-color: #ffa500; - --pub-report-hover-background-color: #f0f0f0; --pub-score_label-text-color: #6d7278; --pub-score_value-text-color: var(--pub-link-text-color); --pub-searchbar-background-color: #132030; @@ -81,12 +79,10 @@ --pub-site_header_popup-text-color: #f8f9fa; --pub-site_header_popup-border-color: #4a5868; // mix of bg+fg color --pub-sort_control-text-color: var(--pub-default-text-color); - --pub-sort_control_hover-background-color: #f5f5f7; --pub-sort_control_hover-text-color: var(--pub-default-text-color); --pub-sort_control_selected-background-color: #e7f8ff; --pub-sort_control_selected-text-color: var(--pub-default-text-color); --pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2); - --pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%); --pub-tag_simplebadge-text-color: #444444; --pub_tag_simplebadge_warning-background-color: #c0392b; --pub_tag_simplebadge_warning-text-color: #f8f8f8; @@ -109,10 +105,12 @@ .dark-theme { --pub-color-darkGunmetal: #1f262a; // close to #1d2026 + --pub-color-shadowBlack: #373737; --pub-color-anchorBlack: #41424c; - --pub-neutral-bgColor: var(--pub-color-darkGunmetal); - --pub-inset-bgColor: var(--pub-color-anchorBlack); + --pub-neutral-bgColor: var(--pub-color-darkGunmetal); + --pub-neutral-hover-bgColor: var(--pub-color-shadowBlack); + --pub-inset-bgColor: var(--pub-color-anchorBlack); --pub-default-text-color: #e0e0e0; --pub-code-text-color: var(--pub-default-text-color); @@ -127,21 +125,15 @@ --pub-home_title-text-color: #31b0fc; --pub-home_card-box_shadow-color: rgba(255, 255, 255, 0.2); --pub-home_card_title-text-color: var(--pub-home_title-text-color); - --pub-home_card_hover-background-color: #383838; --pub-home_card_hover-box_shadow-color: rgba(255, 255, 255, 0.3); - --pub-home_card_hover_fadeout-background-value: linear-gradient(transparent 90%, var(--pub-home_card_hover-background-color)); --pub-pagination-active-color: var(--pub-link-text-color); --pub-pagination-inactive-color: #aaaaaa; - --pub-pkg_list_item_hover-background-color: #333333; - --pub-report-hover-background-color: #333333; --pub-score_label-text-color: #a0b0b8; --pub-score_value-text-color: var(--pub-link-text-color); --pub-sort_control-text-color: var(--pub-default-text-color); - --pub-sort_control_hover-background-color: #333333; --pub-sort_control_hover-text-color: var(--pub-default-text-color); --pub-sort_control_selected-background-color: #206080; --pub-sort_control_selected-text-color: var(--pub-default-text-color); - --pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%); --pub-tag_simplebadge-text-color: var(--pub-default-text-color); --pub-tag_sdkbadge-background-color: #206080; --pub-tag_sdkbadge-separator-color: var(--pub-default-text-color);