Migrate CSS names: selected background colors. (#8103)

Author: isoos

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;

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);
       }
     }

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);
     }
   }
 }

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 {

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);