Migrate header and footer colors to variables. (dart-lang#8036)

isoos · Sep 9, 2024 · 905ceb3 · 905ceb3
1 parent 648efd3
commit 905ceb3
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 32 deletions.
diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss
@@ -271,10 +271,10 @@ pre {
 }
 
 ._banner-bg {
-  background: $color-searchbar-dark-bg;
+  background: var(--pub-searchbar-background-color);
   background-image: url("../img/hero-bg-static.svg");
   background-size: cover;
-  color: $color-searchbar-dark-fg;
+  color: var(--pub-searchbar-text-color);
   padding: 10px 0px;
 
   a {

diff --git a/pkg/web_css/lib/src/_footer.scss b/pkg/web_css/lib/src/_footer.scss
@@ -7,11 +7,11 @@
   margin: 0;
   text-align: center;
   font-size: 14px;
-  background: $color-footer-dark-bg;
-  color: $color-footer-dark-fg;
+  background: var(--pub-footer-background-color);
+  color: var(--pub-footer-text-color);
 
   > a.link {
-    color: $color-footer-dark-fg;
+    color: var(--pub-footer-text-color);
     padding-right: 12px;
     text-wrap: nowrap;
 
@@ -27,7 +27,7 @@
     }
 
     &.sep {
-      border-left: 1px solid $color-footer-dark-fg;
+      border-left: 1px solid var(--pub-footer-text-color);
       padding-left: 12px;
     }
   }

diff --git a/pkg/web_css/lib/src/_search.scss b/pkg/web_css/lib/src/_search.scss
@@ -28,8 +28,8 @@
     -webkit-box-flex: 1;
     -ms-flex-positive: 1;
     flex-grow: 1;
-    background: $color-searchbar-dark-input-bg;
-    color: $color-searchbar-dark-input-fg;
+    background: var(--pub-searchbar_input-background-color);
+    color: var(--pub-searchbar_input-text-color);
 
     &::placeholder {
       color: var(--pub-input-placeholder-color);

diff --git a/pkg/web_css/lib/src/_site_header.scss b/pkg/web_css/lib/src/_site_header.scss
@@ -21,8 +21,8 @@
 }
 
 .site-header {
-  background: $site-header-banner-bg;
-  color: $site-header-banner-fg;
+  background: var(--pub-site_header_banner-background-color);
+  color: var(--pub-site_header_banner-text-color);
   display: flex;
   align-items: center;
   height: 40px;
@@ -123,8 +123,8 @@
       height: 25px;
       width: 25px;
       padding: 5px 20px 5px 5px;
-      color: $site-header-banner-fg;
-      background-color: $site-header-banner-bg;
+      color: var(--pub-site_header_banner-text-color);
+      background-color: var(--pub-site_header_banner-background-color);
       background-image: url("../img/search-icon-light.svg");
       background-repeat: no-repeat;
       background-position: right;
@@ -138,7 +138,7 @@
 
       &:focus {
         width: 240px;
-        background-color: lighten($site-header-banner-bg, 10%);
+        background-color: var(--pub-site_header_banner_hover-background-color);
         padding-left: 10px;
         padding-right: 30px;
         cursor: inherit;
@@ -176,7 +176,7 @@
   }
 
   .nav-link {
-    color: $site-header-popup-fg;
+    color: var(--pub-site_header_popup-text-color);
     display: block;
     line-height: 26px;
     white-space: nowrap;
@@ -230,7 +230,7 @@
       bottom: 0;
       left: 0;
       width: 80%;
-      background: $site-header-popup-bg;
+      background: var(pub-site_header_popup-background-color);
       transform: translateX(-100%);
       transition: transform 0.3s ease;
       z-index: $z-index-nav-mask + 1;
@@ -247,7 +247,7 @@
       .nav-container,
       .nav-login-container {
         padding: 16px;
-        border-bottom: 1px solid $site-header-popup-line;
+        border-bottom: 1px solid var(--pub-site_header_popup-border-color);
 
         .nav-main-button {
           display: none;
@@ -334,8 +334,8 @@
         .nav-hover-popup {
           display: none;
           position: absolute;
-          background: $site-header-popup-bg;
-          color: $site-header-popup-fg;
+          background: var(--pub-site_header_popup-background-color);
+          color: var(--pub-site_header_popup-text-color);
           min-width: 200px;
           padding: 8px 12px;
           top: 50px;
@@ -355,12 +355,12 @@
           min-width: 100px;
 
           > h3 {
-            border-bottom: 1px solid $site-header-popup-line;
+            border-bottom: 1px solid var(--pub-site_header_popup-border-color);
           }
         }
 
         .nav-separator {
-          border-bottom: 1px solid $site-header-popup-line;
+          border-bottom: 1px solid var(--pub-site_header_popup-border-color);
           margin: 8px 0px;
         }
       }

diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
@@ -28,6 +28,8 @@
   --pub-detail_tab-active-color: #1967d2;
   --pub-detail_tab-admin-color: #990000;
   --pub-hash_link-text-color: #ccc;
+  --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: #ffffff;
@@ -52,8 +54,18 @@
   --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;
+  --pub-searchbar-text-color: #8d9399;
+  --pub-searchbar_input-background-color: #35404d;
+  --pub-searchbar_input-text-color: #ffffff;
   --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;
+  --pub-site_header_banner_hover-background-color: #2b3d50; // 10% lighter than bg color
+  --pub-site_header_popup-background-color: #1f3044;
+  --pub-site_header_popup-text-color: #f8f9fa;
+  --pub-site_header_popup-border-color: #4a5868; // mix of bg+fg color
   --pub-sort_control-background-color: #ffffff;
   --pub-sort_control-text-color: var(--pub-default-text-color);
   --pub-sort_control_hover-background-color: #f5f5f7;
@@ -175,25 +187,13 @@
   }
 }
 
-$site-header-banner-bg: #1C2834;
-$site-header-banner-fg: #f8f9fa;
-$site-header-popup-bg: #1f3044;
-$site-header-popup-fg: #f8f9fa;
-$site-header-popup-line: mix($site-header-popup-bg, $site-header-popup-fg, 80%);
-
 $device-desktop-min-width: 641px;
 $device-mobile-max-width: 640px;
 $device-tablet-max-width: 979px;
 
 $z-index-nav-mask: 1000;
 
 $site-max-width: 1136px;
-$color-footer-dark-bg: #27323a;
-$color-footer-dark-fg: #f8f9fa;
-$color-searchbar-dark-bg: #132030;
-$color-searchbar-dark-fg: #8d9399;
-$color-searchbar-dark-input-bg: #35404d;
-$color-searchbar-dark-input-fg: #ffffff;
 
 $color-input-danger: #ff4242;