[style_var_gen] Add selector specificity.

This CL adds specificity to generated CSS variables. This is needed to
override the variables defined in paper-styles/color.html and
shared_vars_css.html. This will allow us remove deprecated colors and
ensure that clashing color names will resolve to cros_palette colors.

Bug: 1062154
Change-Id: I87fbd3013daae8f6553f3129ed44d27be51b18b0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2106041Reviewed-by: Giovanni Ortuño Urquidi <ortuno@chromium.org>
Commit-Queue: calamity <calamity@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751590}

tools/style_variable_generator/colors_test_expected.css

-html {
+html:not(body) {
   --google-grey-900-rgb: 32, 33, 36;
   --google-grey-900: rgb(var(--google-grey-900-rgb));
 
@@ -11,7 +11,7 @@ html {
 }
 
 @media (prefers-color-scheme: dark) {
-  html {
+  html:not(body) {
     --cros-default-text-color-rgb: 255, 255, 255;
     --cros-default-text-color: rgb(var(--cros-default-text-color-rgb));
 

tools/style_variable_generator/css_generator.tmpl

-html {
+{#
+The :not(body) adds extra selector specificity so that these colors 'win'
+against paper-styles/color.html.
+TODO(https://crbug.com/1062154): Remove once deprecated colors are removed from
+Chrome OS pages.
+-#}
+html:not(body) {
 {%- for var_name, color in light_variables.colors.items() %}
   {{var_name | to_var_name}}-rgb: {{color | css_color_rgb}};
   {{var_name | to_var_name}}: {{css_color_from_rgb_var(var_name, color.a)}};
@@ -7,7 +13,13 @@ html {
 
 {% if dark_variables.colors -%}
 @media (prefers-color-scheme: dark) {
-  html {
+{#-
+The :not(body) adds extra selector specificity so that these colors 'win'
+against paper-styles/color.html.
+TODO(https://crbug.com/1062154): Remove once deprecated colors are removed from
+Chrome OS pages.
+#}
+  html:not(body) {
 {%- for var_name, color in dark_variables.colors.items() %}
     {{var_name | to_var_name}}-rgb: {{color | css_color_rgb}};
     {{var_name | to_var_name}}: {{css_color_from_rgb_var(var_name, color.a)}};

tools/style_variable_generator/css_generator_test.py

@@ -12,7 +12,11 @@ class CSSStyleGeneratorTest(unittest.TestCase):
 
     def assertEqualToFile(self, value, filename):
         with open(filename) as f:
-            self.assertEqual(value, f.read())
+            contents = f.read()
+            self.assertEqual(
+                value, contents,
+                '\n>>>>>\n%s<<<<<\n\ndoes not match\n\n>>>>>\n%s<<<<<' %
+                (value, contents))
 
     def testColorTestJSON(self):
         self.generator.AddJSONFileToModel('colors_test.json5')