Migrate color expressions to variables + test to enforce these patterns.

Author: isoos

pkg/web_css/lib/src/_base.scss

@@ -339,7 +339,7 @@ pre {
   right: 0;
   z-index: 10000;
 
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--pub-spinner_frame-background-color);
 
   display: flex;
   align-items: center;
@@ -361,7 +361,7 @@ pre {
 }
 
 .hash-link {
-  color: #ccc;
+  color: var(--pub-hash_link-text-color);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease-in-out 0.1s;
@@ -387,7 +387,7 @@ pre {
 .announcement-banner {
   padding: 10px 0;
 
-  background: #e7f8ff;
+  background: var(--pub-home_announcement-background-color);
   font-size: 16px;
 
   text-align: center;
@@ -411,7 +411,7 @@ a.-x-ago {
   top: 0;
   left: 0;
   right: 0;
-  background: #ffffaa;
+  background: var(--pub-session_warning-background-color);
   padding: 12px 24px;
   text-align: center;
   font-size: 14px;

pkg/web_css/lib/src/_form.scss

@@ -93,8 +93,8 @@
   padding: 2px 8px;
 
   &:hover {
-    background: $color-input-danger;
-    color: white;
+    background: var(--pub-remove_button-background-color);
+    color: var(--pub-remove_button-text-color);
   }
 }
 

pkg/web_css/lib/src/_home.scss

@@ -23,11 +23,11 @@
     margin: 1em auto;
     max-width: 500px;
 
-    color: white;
+    color: var(--pub-home_banner-text-color);
     font-size: 18px;
 
     > a {
-      color: #31b0fc;
+      color: var(--pub-home_banner-link-color);
     }
   }
 

pkg/web_css/lib/src/_list.scss

@@ -36,7 +36,7 @@
   }
 
   .count {
-    background: rgba(218, 220, 224, 0.26);
+    background: var(--pub-code-background-color);
     display: inline-block;
     font-size: 12px;
     font-family: monospace;
@@ -106,7 +106,7 @@
   top: 0px;
   z-index: 1;
   display: none;
-  background: rgba(0,0,0,0.85);
+  background: var(--pub-carousel-background-color);
 
   .image-container {
     user-select: none;
@@ -128,15 +128,15 @@
   }
 
   .carousel-nav {
-    background-color: rgba(0,0,0,0.7);
+    background-color: var(--pub-carousel_nav-background-color);
     position: fixed;
     top: 50%;
     transform: translateY(-50%);
     display: none;
     z-index: 2;
 
     &:hover {
-      background-color: #4285f4;
+      background-color: var(--pub-carousel_nav_hover-background-color);
      }
    }
 
@@ -151,11 +151,11 @@
   .screenshot-description {
     font-size: 16px;
     z-index: 2;
-    color: white;
+    color: var(--pub-carousel_screenshot-text-color);
     bottom: 0;
     left: 20px;
     position: absolute;
-    background: rgba(0,0,0,0.7);
+    background: var(--pub-carousel_screenshot-background-color);
     border-radius: 25px;
     max-width: 35%;
     padding:12px;
@@ -170,7 +170,7 @@
   height: 30px;
   width: 30px;
   opacity: 70%;
-  background-color: #aeaeae;
+  background-color: var(--pub-collections_icon-background-color);
   margin-top: auto;
   margin-left: -30px;
 }
@@ -181,7 +181,7 @@
   height: inherit;
   justify-content: center;
   align-items: center;
-  background: white;
+  background: var(--pub-thumbnail_container-background-color);
 }
 
 .packages {
@@ -240,7 +240,7 @@
   }
 
   .packages-recent {
-    color: #6d7278;
+    color: var(--pub-pkg_list_recent_item-text-color);
     font-family: var(--pub-default-text-font_family);
     font-size: 12px;
     margin: 0px 8px 0px 16px;
@@ -268,7 +268,6 @@
   }
 
   .packages-api {
-    color: #3c4043;
     font-size: 12px;
     margin-top: 6px;
     display: flex;

pkg/web_css/lib/src/_pkg.scss

@@ -221,11 +221,11 @@
     font-size: 22px;
 
     &.-is-red {
-      color: #e13701;
+      color: var(--pub-report_header_score_error-text-color);
     }
 
     &.-is-yellow {
-      color: #FFA500;
+      color: var(--pub-report_header_score_warning-text-color);
     }
 
     .foldable-icon {

pkg/web_css/lib/src/_search.scss

@@ -32,7 +32,7 @@
     color: $color-searchbar-dark-input-fg;
 
     &::placeholder {
-      color: #888;
+      color: var(--pub-input-placeholder-color);
     }
 
     .home-banner & {

pkg/web_css/lib/src/_site_header.scss

@@ -102,7 +102,7 @@
     left: 0;
     bottom: 0;
     right: 0;
-    background: rgba(0, 0, 0, 0.5);
+    background: var(--pub-full_page_mask-background-color);
     z-index: $z-index-nav-mask;
 
     &.-show {

pkg/web_css/lib/src/_tags.scss

@@ -19,8 +19,8 @@
 
   &.legacy,
   &.retracted {
-    background: #c0392b;
-    color: #f8f8f8;
+    background: var(--pub_tag_simplebadge_warning-background-color);
+    color: var(--pub_tag_simplebadge_warning-text-color);
   }
 }
 
@@ -45,8 +45,8 @@
 
 /* Tag for discontinued packages. */
 .-pub-tag-discontinued {
-  background: #c0392b;
-  color: #f8f8f8;
+  background: var(--pub_tag_simplebadge_warning-background-color);
+  color: var(--pub_tag_simplebadge_warning-text-color);
   padding: 2px;
 
   >.-discontinued-main {

pkg/web_css/lib/src/_variables.scss

@@ -14,13 +14,24 @@
   --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);
   --pub-badge-red-color: #ff4242;
+  --pub-carousel-background-color: rgba(0,0,0,0.85);
+  --pub-carousel_nav-background-color: rgba(0,0,0,0.7);
+  --pub-carousel_nav_hover-background-color: #4285f4;
+  --pub-carousel_screenshot-background-color: rgba(0,0,0,0.7);
+  --pub-carousel_screenshot-text-color: #ffffff;
+  --pub-collections_icon-background-color: #aeaeae;
+  --pub-thumbnail_container-background-color: #ffffff;
   --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;
   --pub-detail_tab-admin-color: #990000;
+  --pub-hash_link-text-color: #ccc;
   --pub-home_title-text-color: #254a76;
+  --pub-home_announcement-background-color: #e7f8ff;
+  --pub-home_banner-text-color: #ffffff;
+  --pub-home_banner-link-color: #31b0fc;
   --pub-home_card-background-color: #ffffff;
   --pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3);
   --pub-home_card_fadeout-background-value: linear-gradient(transparent 90%, white);
@@ -31,22 +42,33 @@
   --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;
   --pub-pkg_list_item_hover-background-color: #fafafa;
+  --pub-pkg_list_recent_item-text-color: #6d7278;
+  --pub-remove_button-background-color: #ff4242;
+  --pub-remove_button-text-color: #ffffff;
+  --pub-report_header_score_error-text-color: #e13701;
+  --pub-report_header_score_warning-text-color: #ffa500;  
   --pub-report-hover-background-color: #f0f0f0;
   --pub-score_label-text-color: #6d7278;
   --pub-score_value-text-color: var(--pub-link-text-color);
+  --pub-session_warning-background-color: #ffffaa;
   --pub-sort_control-background-color: #ffffff;
   --pub-sort_control-text-color: var(--pub-default-text-color);
   --pub-sort_control_hover-background-color: #f5f5f7;
   --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-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-default-background-color) 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;
   --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.
 
   // Material Design theme customizations
   --mdc-theme-primary: #0175c2;

pkg/web_css/test/color_expressions_test.dart

@@ -0,0 +1,97 @@
+// Copyright (c) 2020, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'dart:io';
+
+import 'package:test/test.dart';
+
+final _whitespace = RegExp(r'\s+');
+
+const _colors = {
+  'black',
+  'red',
+  'white',
+};
+
+void main() {
+  group('Color restrictions and rules', () {
+    test('text and bg colors are only defined in _variables.scss', () {
+      final files = Directory('lib')
+          .listSync(recursive: true)
+          .whereType<File>()
+          .where((f) => f.path.endsWith('.scss'))
+          // _variables.scss is not checked, this should be the place for all color definitions
+          .where((f) => !f.path.endsWith('/_variables.scss'))
+
+          // _staging_ribbon.scss is only used on staging
+          .where((f) => !f.path.endsWith('/_staging_ribbon.scss'))
+
+          // _footer.scss has only one color theme, skipping for now
+          // TODO: migrate the variables in this file
+          .where((f) => !f.path.endsWith('/_footer.scss'))
+
+          // dartdoc files are not checked
+          .where((f) => !f.path.endsWith('/dartdoc.scss'))
+          .toList();
+
+      final badExpressions = <String>[];
+
+      for (final file in files) {
+        var content = file.readAsStringSync();
+        // remove multi-line comment blocks
+        content =
+            content.replaceAll(RegExp(r'\/\*.*\*/', multiLine: true), ' ');
+        final lines = content.split('\n');
+        for (var i = 0; i < lines.length; i++) {
+          final line = lines[i];
+          // remove single-line comment
+          final expr =
+              line.split('//').first.replaceAll(_whitespace, ' ').trim();
+          if (expr.isEmpty) continue;
+
+          // minimal parsing and sanity check
+          final parts = expr.split(':');
+          if (parts.length != 2) continue;
+          final name = parts[0].trim();
+          var value = parts[1].trim();
+
+          // remove known overlapping variable names from checking
+          value =
+              value.replaceAll('--pub-badge-red-color', '--pub-badge-color');
+
+          if (name.isEmpty || value.isEmpty) continue;
+
+          // local mdc overrides are exempted for now
+          // TODO: move these values to _variables.scss
+          if (name.startsWith('--mdc-theme-')) {
+            continue;
+          }
+
+          // border colors, box shadows and text-decorations are exempted for now
+          // TODO: move these values to _variables.scss
+          if (name == 'border' ||
+              name.startsWith('border-') ||
+              name == 'box-shadow' ||
+              name == 'text-decoration') {
+            continue;
+          }
+
+          // detect color patterns
+          final hasColor = value.contains('#') ||
+              // TODO: also migrate color- variables
+              // value.contains(r'$color-') ||
+              value.contains('rgb(') ||
+              value.contains('rgba(') ||
+              value.contains('hsl(') ||
+              _colors.any((c) => value.contains(c));
+          if (!hasColor) continue;
+
+          badExpressions.add('${file.path} line #${i + 1}: `${expr.trim()}`');
+        }
+      }
+
+      expect(badExpressions, isEmpty);
+    });
+  });
+}