Skip to content

Commit 3ee44d1

Browse files
authored
Migrate neutral hover background colors (#8098)
1 parent 159df85 commit 3ee44d1

File tree

5 files changed

+15
-23
lines changed

5 files changed

+15
-23
lines changed

pkg/web_css/lib/src/_base.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ summary {
6464
transition: background-color 0.3s;
6565

6666
&:hover {
67-
background: var(--pub-summary_hover-background-color);
67+
background: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%);
6868
}
6969

7070
&:focus {

pkg/web_css/lib/src/_home.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,13 +108,13 @@
108108
min-height: 100px;
109109

110110
&:hover {
111-
background: var(--pub-home_card_hover-background-color);
111+
background: var(--pub-neutral-hover-bgColor);
112112
box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color);
113113

114114
@media (min-width: $device-desktop-min-width) {
115115
.mini-list-item-body {
116116
&:before {
117-
background: var(--pub-home_card_hover_fadeout-background-value);
117+
background: linear-gradient(transparent 90%, var(--pub-neutral-hover-bgColor));
118118
}
119119
}
120120
}

pkg/web_css/lib/src/_list.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
text-align: left;
6868

6969
&:hover {
70-
background: var(--pub-sort_control_hover-background-color);
70+
background: var(--pub-neutral-hover-bgColor);
7171
color: var(--pub-sort_control_hover-text-color);
7272
}
7373

@@ -190,7 +190,7 @@
190190
padding: 15px 30px;
191191

192192
&:hover {
193-
background: var(--pub-pkg_list_item_hover-background-color);
193+
background: var(--pub-neutral-hover-bgColor);
194194
}
195195
}
196196

@@ -305,7 +305,7 @@
305305
margin-right: 8px;
306306

307307
&:hover {
308-
background: var(--pub-pkg_list_item_hover-background-color);
308+
background: var(--pub-neutral-hover-bgColor);
309309
}
310310

311311
.publishers-item-title {

pkg/web_css/lib/src/_report.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
cursor: pointer;
2424

2525
&:hover {
26-
background: var(--pub-report-hover-background-color);
26+
background: var(--pub-neutral-hover-bgColor);
2727
}
2828
}
2929

pkg/web_css/lib/src/_variables.scss

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@
1717

1818
:root {
1919
--pub-color-white: #ffffff;
20+
--pub-color-snowWhite: #fafafa; // slight deviation from official snow-white (fffafa)
2021
--pub-color-smokeWhite: #f5f5f7; // slight deviation from official white-smoke (f5f5f5)
2122

2223
--pub-color-dangerRed: #ff4242;
2324

24-
--pub-neutral-bgColor: var(--pub-color-white);
25-
--pub-inset-bgColor: var(--pub-color-smokeWhite);
25+
--pub-neutral-bgColor: var(--pub-color-white);
26+
--pub-neutral-hover-bgColor: var(--pub-color-snowWhite);
27+
--pub-inset-bgColor: var(--pub-color-smokeWhite);
2628

2729
--pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
2830
--pub-default-text-color: hsl(0, 0%, 29%);
@@ -53,19 +55,15 @@
5355
--pub-home_banner-link-color: #31b0fc;
5456
--pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3);
5557
--pub-home_card_title-text-color: #1967d2;
56-
--pub-home_card_hover-background-color: #fafafa;
5758
--pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4);
58-
--pub-home_card_hover_fadeout-background-value: linear-gradient(transparent 90%, var(--pub-home_card_hover-background-color));
5959
--pub-pagination-active-color: var(--pub-link-text-color);
6060
--pub-pagination-inactive-color: #aaaaaa;
6161
--pub-input-placeholder-color: #888;
62-
--pub-pkg_list_item_hover-background-color: #fafafa;
6362
--pub-pkg_list_recent_item-text-color: #6d7278;
6463
--pub-remove_button-background-color: var(--pub-color-dangerRed);
6564
--pub-remove_button-text-color: var(--pub-color-white);
6665
--pub-report_header_score_error-text-color: #e13701;
6766
--pub-report_header_score_warning-text-color: #ffa500;
68-
--pub-report-hover-background-color: #f0f0f0;
6967
--pub-score_label-text-color: #6d7278;
7068
--pub-score_value-text-color: var(--pub-link-text-color);
7169
--pub-searchbar-background-color: #132030;
@@ -81,12 +79,10 @@
8179
--pub-site_header_popup-text-color: #f8f9fa;
8280
--pub-site_header_popup-border-color: #4a5868; // mix of bg+fg color
8381
--pub-sort_control-text-color: var(--pub-default-text-color);
84-
--pub-sort_control_hover-background-color: #f5f5f7;
8582
--pub-sort_control_hover-text-color: var(--pub-default-text-color);
8683
--pub-sort_control_selected-background-color: #e7f8ff;
8784
--pub-sort_control_selected-text-color: var(--pub-default-text-color);
8885
--pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2);
89-
--pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%);
9086
--pub-tag_simplebadge-text-color: #444444;
9187
--pub_tag_simplebadge_warning-background-color: #c0392b;
9288
--pub_tag_simplebadge_warning-text-color: #f8f8f8;
@@ -109,10 +105,12 @@
109105

110106
.dark-theme {
111107
--pub-color-darkGunmetal: #1f262a; // close to #1d2026
108+
--pub-color-shadowBlack: #373737;
112109
--pub-color-anchorBlack: #41424c;
113110

114-
--pub-neutral-bgColor: var(--pub-color-darkGunmetal);
115-
--pub-inset-bgColor: var(--pub-color-anchorBlack);
111+
--pub-neutral-bgColor: var(--pub-color-darkGunmetal);
112+
--pub-neutral-hover-bgColor: var(--pub-color-shadowBlack);
113+
--pub-inset-bgColor: var(--pub-color-anchorBlack);
116114

117115
--pub-default-text-color: #e0e0e0;
118116
--pub-code-text-color: var(--pub-default-text-color);
@@ -127,21 +125,15 @@
127125
--pub-home_title-text-color: #31b0fc;
128126
--pub-home_card-box_shadow-color: rgba(255, 255, 255, 0.2);
129127
--pub-home_card_title-text-color: var(--pub-home_title-text-color);
130-
--pub-home_card_hover-background-color: #383838;
131128
--pub-home_card_hover-box_shadow-color: rgba(255, 255, 255, 0.3);
132-
--pub-home_card_hover_fadeout-background-value: linear-gradient(transparent 90%, var(--pub-home_card_hover-background-color));
133129
--pub-pagination-active-color: var(--pub-link-text-color);
134130
--pub-pagination-inactive-color: #aaaaaa;
135-
--pub-pkg_list_item_hover-background-color: #333333;
136-
--pub-report-hover-background-color: #333333;
137131
--pub-score_label-text-color: #a0b0b8;
138132
--pub-score_value-text-color: var(--pub-link-text-color);
139133
--pub-sort_control-text-color: var(--pub-default-text-color);
140-
--pub-sort_control_hover-background-color: #333333;
141134
--pub-sort_control_hover-text-color: var(--pub-default-text-color);
142135
--pub-sort_control_selected-background-color: #206080;
143136
--pub-sort_control_selected-text-color: var(--pub-default-text-color);
144-
--pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%);
145137
--pub-tag_simplebadge-text-color: var(--pub-default-text-color);
146138
--pub-tag_sdkbadge-background-color: #206080;
147139
--pub-tag_sdkbadge-separator-color: var(--pub-default-text-color);

0 commit comments

Comments
 (0)