Migrate inset colors (code and tab background) (#8081)

pkg/web_css/lib/src/_base.scss

@@ -148,7 +148,7 @@ strong {
 
 .markdown-body code,
 code {
-  background: var(--pub-code-background-color);
+  background: var(--pub-inset-bgColor);
   border: none;
   border-radius: 4px;
   font-family: var(--pub-code-text-font_family);
@@ -159,7 +159,7 @@ code {
 .dark-theme .hljs,
 .markdown-body pre,
 pre {
-  background: var(--pub-code-background-color);
+  background: var(--pub-inset-bgColor);
   color: var(--pub-code-text-color);
 }
 

pkg/web_css/lib/src/_detail_page.scss

@@ -13,7 +13,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
 .-wide-header-detail-page {
   .detail-header,
   .detail-tabs-wide-header {
-    background: var(--pub-code-background-color);
+    background: var(--pub-inset-bgColor);
     color: var(--pub-default-text-color);
   }
 
@@ -300,7 +300,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   margin: 0 0 24px -12px;
   padding: 0;
 
-  background: var(--pub-detail_tab-background-color);
+  background: var(--pub-inset-bgColor);
   display: flex;
   align-items: center;
   flex-wrap: wrap;

pkg/web_css/lib/src/_form.scss

@@ -61,14 +61,14 @@
   border-width: 0px;
 
   .mdc-data-table__row {
-    border-top-color: var(--pub-code-background-color);
+    border-top-color: var(--pub-inset-bgColor);
 
     &:hover {
       background: inherit;
     }
 
     &:nth-child(even) {
-      background: var(--pub-code-background-color);
+      background: var(--pub-inset-bgColor);
     }
   }
 

pkg/web_css/lib/src/_home.scss

@@ -80,7 +80,7 @@
 
   &.home-block-ff,
   &.home-block-pow {
-    background: var(--pub-code-background-color);
+    background: var(--pub-inset-bgColor);
   }
 
   .home-block-image {

pkg/web_css/lib/src/_list.scss

@@ -36,7 +36,7 @@
   }
 
   .count {
-    background: var(--pub-code-background-color);
+    background: var(--pub-inset-bgColor);
     display: inline-block;
     font-size: 12px;
     font-family: monospace;
@@ -334,7 +334,7 @@
     display: inline-block;
     text-transform: uppercase;
     color: var(--pub-pagination-active-color);
-    background: var(--pub-pagination-background-color);
+    background: var(--pub-inset-bgColor);
     font-size: 14px;
     border-radius: 3px;
     margin-top: 40px;
@@ -346,7 +346,7 @@
 
     &.-active {
       pointer-events: none;
-      color: var(--pub-pagination-background-color);
+      color: var(--pub-inset-bgColor);
       background: var(--pub-pagination-active-color);
     }
 
@@ -427,7 +427,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: var(--pub-code-background-color);
+      background-color: var(--pub-inset-bgColor);
     }
 
     a {

pkg/web_css/lib/src/_tags.scss

@@ -12,7 +12,7 @@
 
 /* Tags that are simple labels. */
 .package-tag {
-  background: var(--pub-tag_simplebadge-background-color);
+  background: var(--pub-inset-bgColor);
   text-transform: uppercase;
   color: var(--pub-tag_simplebadge-text-color);
   padding: 4px 8px;

pkg/web_css/lib/src/_variables.scss

@@ -16,16 +16,17 @@
 //   - `[property]` may be `color`, `opacity` for specific values, or a `value` for multi-part properties.
 
 :root {
-  --pub-color-white: #ffffff;
+  --pub-color-white:      #ffffff;
+  --pub-color-smokeWhite: #f5f5f7; // slight deviation from official white-smoke (f5f5f5)
 
   --pub-color-dangerRed: #ff4242;
 
   --pub-neutral-bgColor: var(--pub-color-white);
+  --pub-inset-bgColor: var(--pub-color-smokeWhite);
 
   --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-background-color: #f5f5f7;
   --pub-code-text-color: var(--pub-default-text-color);
   --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;
@@ -39,7 +40,6 @@
   --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-background-color: var(--pub-code-background-color);
   --pub-detail_tab-text-color: var(--pub-default-text-color);
   --pub-detail_tab-underline-color: #dddddd;
   --pub-detail_tab-active-color: #1967d2;
@@ -56,7 +56,6 @@
   --pub-home_card_hover-background-color: #fafafa;
   --pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4);
   --pub-home_card_hover_fadeout-background-value: linear-gradient(transparent 90%, var(--pub-home_card_hover-background-color));
-  --pub-pagination-background-color: var(--pub-code-background-color);
   --pub-pagination-active-color: var(--pub-link-text-color);
   --pub-pagination-inactive-color: #aaaaaa;
   --pub-input-placeholder-color: #888;
@@ -88,7 +87,6 @@
   --pub-sort_control_selected-text-color: var(--pub-default-text-color);
   --pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2);
   --pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%);
-  --pub-tag_simplebadge-background-color: #f0f0f0;
   --pub-tag_simplebadge-text-color: #444444;
   --pub_tag_simplebadge_warning-background-color: #c0392b;
   --pub_tag_simplebadge_warning-text-color: #f8f8f8;
@@ -111,41 +109,39 @@
 
 .dark-theme {
   --pub-color-darkGunmetal: #1f262a; // close to #1d2026
+  --pub-color-anchorBlack:  #41424c;
 
   --pub-neutral-bgColor: var(--pub-color-darkGunmetal);
+  --pub-inset-bgColor: var(--pub-color-anchorBlack);
 
   --pub-default-text-color: #e0e0e0;
-  --pub-code-background-color: #474747;
   --pub-code-text-color: var(--pub-default-text-color);
   --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-background-color: var(--pub-code-background-color);
   --pub-detail_tab-text-color: var(--pub-default-text-color);
   --pub-detail_tab-underline-color: #888888;
-  --pub-detail_tab-active-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-detail_tab-background-color) 20%);
+  --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;
   --pub-home_title-text-color: #31b0fc;
   --pub-home_card-box_shadow-color: rgba(255, 255, 255, 0.2);
   --pub-home_card_title-text-color: var(--pub-home_title-text-color);
   --pub-home_card_hover-background-color: #383838;
   --pub-home_card_hover-box_shadow-color: rgba(255, 255, 255, 0.3);
   --pub-home_card_hover_fadeout-background-value: linear-gradient(transparent 90%, var(--pub-home_card_hover-background-color));
-  --pub-pagination-background-color: var(--pub-code-background-color);
   --pub-pagination-active-color: var(--pub-link-text-color);
   --pub-pagination-inactive-color: #aaaaaa;
   --pub-pkg_list_item_hover-background-color: #333333;
   --pub-report-hover-background-color: #333333;
   --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-background-color: var(--pub-code-background-color);
+  --pub-sort_control_hover-background-color: #333333;
   --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-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%);
-  --pub-tag_simplebadge-background-color: var(--pub-code-background-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);