CSS rename/migration: neutral text color. (dart-lang#8124)

pkg/web_css/lib/src/_base.scss

@@ -11,7 +11,7 @@
 
 body {
   background-color: var(--pub-neutral-bgColor);
-  color: var(--pub-default-text-color);
+  color: var(--pub-neutral-textColor);
   font-size: 14px;
   line-height: 1.6;
   margin: 0;
@@ -320,7 +320,7 @@ pre {
 
 .-pub-like-button {
   --mdc-theme-primary: #f8f8f8;
-  --mdc-theme-on-primary: var(--pub-default-text-color);
+  --mdc-theme-on-primary: var(--pub-neutral-textColor);
 }
 
 .-pub-like-button-img {
@@ -410,7 +410,7 @@ pre {
 }
 
 a.-x-ago {
-  color: var(--pub-default-text-color);
+  color: var(--pub-neutral-textColor);
   text-decoration: underline dotted #ccc;
 }
 
@@ -444,10 +444,10 @@ a.-x-ago {
 .pub-toc {
   border-left: 4px solid var(--pub-inset-bgColor);
   padding: 4px 12px;
-  color: var(--pub-default-text-color);
+  color: var(--pub-neutral-textColor);
 
   a {
-    color: var(--pub-default-text-color);
+    color: var(--pub-neutral-textColor);
   }
 
   .pub-toc-node-0 {

pkg/web_css/lib/src/_detail_page.scss

@@ -14,7 +14,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   .detail-header,
   .detail-tabs-wide-header {
     background: var(--pub-inset-bgColor);
-    color: var(--pub-default-text-color);
+    color: var(--pub-code-text-color);
   }
 
   .detail-header {
@@ -190,7 +190,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
     }
 
     &:focus-within {
-      border-color: var(--pub-default-text-color);
+      border-color: var(--pub-neutral-textColor);
     }
   }
 }

pkg/web_css/lib/src/_form.scss

@@ -78,7 +78,7 @@
   }
 
   .mdc-data-table__cell {
-    color: var(--pub-default-text-color);
+    color: var(--pub-neutral-textColor);
   }
 
   .email-header { width: 60%; }
@@ -88,7 +88,7 @@
 .-pub-remove-uploader-button,
 .-pub-remove-user-button {
   border-radius: 3px;
-  color: var(--pub-default-text-color);
+  color: var(--pub-neutral-textColor);
   display: inline-block;
   padding: 2px 8px;
 
@@ -136,7 +136,7 @@
     &:hover {
       .mdc-notched-outline__leading,
       .mdc-notched-outline__trailing {
-        border-color: var(--pub-default-text-color) !important;
+        border-color: var(--pub-neutral-textColor) !important;
       }
     }
   }
@@ -167,16 +167,16 @@
 
   .mdc-data-table__header-cell {
     border-color: var(--mdc_pub-data_table-border-color);
-    color: var(--pub-default-text-color);
+    color: var(--pub-neutral-textColor);
   }
   .mdc-data-table__cell {
-    color: var(--pub-default-text-color);
+    color: var(--pub-neutral-textColor);
   }
 
   .mdc-dialog__surface {
     .mdc-dialog__title,
     .mdc-dialog__content {
-      color: var(--pub-default-text-color);
+      color: var(--pub-neutral-textColor);
     }
   }
 }

pkg/web_css/lib/src/_list.scss

@@ -61,7 +61,7 @@
       display: block;
       width: 100%;
       background: var(--pub-neutral-bgColor);
-      color: var(--pub-sort_control-text-color);
+      color: var(--pub-neutral-textColor);
       font-size: 14px;
       padding: 12px 12px;
       text-align: left;
@@ -431,7 +431,7 @@
     }
 
     a {
-      color: var(--pub-default-text-color);
+      color: var(--pub-neutral-textColor);
     }
 
     label {

pkg/web_css/lib/src/_tags.scss

@@ -59,6 +59,6 @@
     display: inline-block;
     padding: 2px 6px;
     background: var(--pub-neutral-bgColor);
-    color: var(--pub-default-text-color);
+    color: var(--pub-neutral-textColor);
   }
 }

pkg/web_css/lib/src/_variables.scss

@@ -16,23 +16,24 @@
 //   - `[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-bubblesBlue: #e7f8ff; // slight deviation from official bubbles-blue (e7feff)
+  --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-gunpowderGray: #4a4a4a; // hsl(0, 0%, 29%);
 
   --pub-color-dangerRed: #ff4242;
 
   --pub-neutral-bgColor:       var(--pub-color-white);
   --pub-neutral-borderColor:   var(--pub-color-smokeWhite);
+  --pub-neutral-textColor:     var(--pub-color-gunpowderGray);
   --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%);
   --pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
-  --pub-code-text-color: var(--pub-default-text-color);
+  --pub-code-text-color: var(--pub-neutral-textColor);
   --pub-link-text-color: #0175c2;
   --pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
   --pub-badge-default-color: var(--pub-link-text-color);
@@ -45,7 +46,7 @@
   --pub-collections_icon-background-color: #aeaeae;
   --pub-thumbnail_container-background-color: var(--pub-color-white); // same in dark mode
   --pub-copy_feedback-background-color: #fafaff;
-  --pub-detail_tab-text-color: var(--pub-default-text-color);
+  --pub-detail_tab-text-color: var(--pub-neutral-textColor);
   --pub-detail_tab-underline-color: #dddddd;
   --pub-detail_tab-active-color: #1967d2;
   --pub-detail_tab-admin-color: #990000;
@@ -79,9 +80,8 @@
   --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-text-color: var(--pub-default-text-color);
-  --pub-sort_control_hover-text-color: var(--pub-default-text-color);
-  --pub-sort_control_selected-text-color: var(--pub-default-text-color);
+  --pub-sort_control_hover-text-color: var(--pub-neutral-textColor);
+  --pub-sort_control_selected-text-color: var(--pub-neutral-textColor);
   --pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2);
   --pub-tag_simplebadge-text-color: #444444;
   --pub_tag_simplebadge_warning-background-color: #c0392b;
@@ -107,20 +107,21 @@
   --pub-color-shadowBlack:     #373737;
   --pub-color-anchorBlack:     #41424c;
   --pub-color-nipponUltraBlue: #23607f;
+  --pub-color-gainsboro:       #dcdcdc;
 
   --pub-neutral-bgColor:       var(--pub-color-darkGunmetal);
   --pub-neutral-borderColor:   var(--pub-color-anchorBlack);
+  --pub-neutral-textColor:     var(--pub-color-gainsboro);
   --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);
+  --pub-code-text-color: var(--pub-neutral-textColor);
   --pub-link-text-color: #40c4ff;
   --pub-badge-default-color: var(--pub-link-text-color);
   --pub-badge-red-color: var(--pub-color-dangerRed);
   --pub-copy_feedback-background-color: #404040;
-  --pub-detail_tab-text-color: var(--pub-default-text-color);
+  --pub-detail_tab-text-color: var(--pub-neutral-textColor);
   --pub-detail_tab-underline-color: #888888;
   --pub-detail_tab-active-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-inset-bgColor) 20%);
   --pub-detail_tab-admin-color: #e03030;
@@ -132,33 +133,32 @@
   --pub-pagination-inactive-color: #aaaaaa;
   --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-text-color: var(--pub-default-text-color);
-  --pub-sort_control_selected-text-color: var(--pub-default-text-color);
-  --pub-tag_simplebadge-text-color: var(--pub-default-text-color);
-  --pub-tag_sdkbadge-separator-color: var(--pub-default-text-color);
-  --pub-tag_sdkbadge-text-color: var(--pub-default-text-color);
+  --pub-sort_control_hover-text-color: var(--pub-neutral-textColor);
+  --pub-sort_control_selected-text-color: var(--pub-neutral-textColor);
+  --pub-tag_simplebadge-text-color: var(--pub-neutral-textColor);
+  --pub-tag_sdkbadge-separator-color: var(--pub-neutral-textColor);
+  --pub-tag_sdkbadge-text-color: var(--pub-neutral-textColor);
 
   // Material Design theme customizations
   --mdc-theme-surface: var(--pub-neutral-bgColor);
-  --mdc-theme-on-primary: var(--pub-default-text-color);
-  --mdc-theme-on-secondary: var(--pub-default-text-color);
-  --mdc-theme-on-surface: var(--pub-default-text-color);
+  --mdc-theme-on-primary: var(--pub-neutral-textColor);
+  --mdc-theme-on-secondary: var(--pub-neutral-textColor);
+  --mdc-theme-on-surface: var(--pub-neutral-textColor);
   --mdc-checkbox-unchecked-color: #777777;
   --mdc-checkbox-disabled-color: #666666;
   --mdc-filled-button-container-color: rgba(255, 255, 255, 0.1);
-  --mdc-filled-button-label-text-color: var(--pub-default-text-color);
+  --mdc-filled-button-label-text-color: var(--pub-neutral-textColor);
   --mdc-protected-button-disabled-container-color: rgba(255, 255, 255, 0.1);
-  --mdc-protected-button-disabled-label-text-color: var(--pub-default-text-color);
+  --mdc-protected-button-disabled-label-text-color: var(--pub-neutral-textColor);
 
   // Pub-specific Material Design overrides
   --mdc_pub-data_table-border-color: var(--mdc-checkbox-unchecked-color);
   --mdc_pub-select-background-color: rgba(255, 255, 255, 0.1);
   --mdc_pub-select-label-color: var(--pub-link-text-color);
-  --mdc_pub-select-text-color: var(--pub-default-text-color);
+  --mdc_pub-select-text-color: var(--pub-neutral-textColor);
   --mdc_pub-text_field-background-color: rgba(255, 255, 255, 0.1);
   --mdc_pub-text_field-border-color: var(--mdc-checkbox-unchecked-color);
-  --mdc_pub-text_field-text-color: var(--pub-default-text-color);
+  --mdc_pub-text_field-text-color: var(--pub-neutral-textColor);
 
   // Most of our SVG images are black on transparent background and they
   // are almost invisible in dark mode. Ideally we would have different