From 50ef93e2a6a9846ee572f7c7f3c48461eef01343 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Istv=C3=A1n=20So=C3=B3s?= Date: Fri, 4 Oct 2024 17:20:52 +0200 Subject: [PATCH] Migrate CSS names: selected background colors. (#8103) --- pkg/web_css/lib/src/_base.scss | 2 +- pkg/web_css/lib/src/_list.scss | 2 +- pkg/web_css/lib/src/_search.scss | 4 ++-- pkg/web_css/lib/src/_tags.scss | 2 +- pkg/web_css/lib/src/_variables.scss | 22 ++++++++++------------ 5 files changed, 15 insertions(+), 17 deletions(-) diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss index fc11c2087..4074d0713 100644 --- a/pkg/web_css/lib/src/_base.scss +++ b/pkg/web_css/lib/src/_base.scss @@ -387,7 +387,7 @@ pre { .announcement-banner { padding: 10px 0; - background: var(--pub-home_announcement-background-color); + background: var(--pub-selected-bgColor); font-size: 16px; text-align: center; diff --git a/pkg/web_css/lib/src/_list.scss b/pkg/web_css/lib/src/_list.scss index 5ad265460..1f703284f 100644 --- a/pkg/web_css/lib/src/_list.scss +++ b/pkg/web_css/lib/src/_list.scss @@ -72,7 +72,7 @@ } &.selected { - background: var(--pub-sort_control_selected-background-color); + background: var(--pub-selected-bgColor); color: var(--pub-sort_control_selected-text-color); } } diff --git a/pkg/web_css/lib/src/_search.scss b/pkg/web_css/lib/src/_search.scss index 328af1a4f..892f08f7d 100644 --- a/pkg/web_css/lib/src/_search.scss +++ b/pkg/web_css/lib/src/_search.scss @@ -124,10 +124,10 @@ } >.completion-option-selected { - background-color: var(--pub-search_completition_selected-background-color); + background-color: var(--pub-selected-bgColor); &:hover { - background-color: var(--pub-search_completition_selected-background-color); + background-color: var(--pub-selected-bgColor); } } } diff --git a/pkg/web_css/lib/src/_tags.scss b/pkg/web_css/lib/src/_tags.scss index bac1776df..f66cb8478 100644 --- a/pkg/web_css/lib/src/_tags.scss +++ b/pkg/web_css/lib/src/_tags.scss @@ -26,7 +26,7 @@ /* Tag that are combinations of two components e.g. Dart/Flutter extended badges. */ .-pub-tag-badge { - background: var(--pub-tag_sdkbadge-background-color); + background: var(--pub-selected-bgColor); > .tag-badge-main, > .tag-badge-sub { diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss index e11b02db0..175bc086b 100644 --- a/pkg/web_css/lib/src/_variables.scss +++ b/pkg/web_css/lib/src/_variables.scss @@ -16,15 +16,17 @@ // - `[property]` may be `color`, `opacity` for specific values, or a `value` for multi-part properties. :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-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-bubblesBlue: #e7f8ff; // slight deviation from official bubbles-blue (e7feff) --pub-color-dangerRed: #ff4242; --pub-neutral-bgColor: var(--pub-color-white); --pub-neutral-hover-bgColor: var(--pub-color-snowWhite); --pub-inset-bgColor: var(--pub-color-smokeWhite); + --pub-selected-bgColor: var(--pub-color-bubblesBlue); --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif; --pub-default-text-color: hsl(0, 0%, 29%); @@ -50,7 +52,6 @@ --pub-footer-background-color: #27323a; --pub-footer-text-color: #f8f9fa; --pub-home_title-text-color: #254a76; - --pub-home_announcement-background-color: #e7f8ff; --pub-home_banner-text-color: var(--pub-color-white); --pub-home_banner-link-color: #31b0fc; --pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3); @@ -70,7 +71,6 @@ --pub-searchbar-text-color: #8d9399; --pub-searchbar_input-background-color: #35404d; --pub-searchbar_input-text-color: var(--pub-color-white); - --pub-search_completition_selected-background-color: #ccc; --pub-session_warning-background-color: #ffffaa; --pub-site_header_banner-background-color: #1C2834; --pub-site_header_banner-text-color: #f8f9fa; @@ -80,13 +80,11 @@ --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-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-tag_simplebadge-text-color: #444444; --pub_tag_simplebadge_warning-background-color: #c0392b; --pub_tag_simplebadge_warning-text-color: #f8f8f8; - --pub-tag_sdkbadge-background-color: #e7f8ff; --pub-tag_sdkbadge-separator-color: rgba(25, 103, 210, 0.5); // #1967d2 + 0.5 opacity; --pub-tag_sdkbadge-text-color: #1967d2; --pub-full_page_mask-background-color: rgba(0, 0, 0, 0.5); // Used to make the inaccessible UI parts fade into the background. @@ -104,13 +102,15 @@ } .dark-theme { - --pub-color-darkGunmetal: #1f262a; // close to #1d2026 - --pub-color-shadowBlack: #373737; - --pub-color-anchorBlack: #41424c; + --pub-color-darkGunmetal: #1f262a; // close to #1d2026 + --pub-color-shadowBlack: #373737; + --pub-color-anchorBlack: #41424c; + --pub-color-nipponUltraBlue: #23607f; --pub-neutral-bgColor: var(--pub-color-darkGunmetal); --pub-neutral-hover-bgColor: var(--pub-color-shadowBlack); --pub-inset-bgColor: var(--pub-color-anchorBlack); + --pub-selected-bgColor: var(--pub-color-nipponUltraBlue); --pub-default-text-color: #e0e0e0; --pub-code-text-color: var(--pub-default-text-color); @@ -132,10 +132,8 @@ --pub-score_value-text-color: var(--pub-link-text-color); --pub-sort_control-text-color: var(--pub-default-text-color); --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-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); --pub-tag_sdkbadge-text-color: var(--pub-default-text-color);