[Jelly] Ensure legacy mappings can handle hardcoded color references without opacity

Previously setting a legacy mapping to a hardcoded color without opacity
would circumvent the unscoped variable logic. This CL rectifies this
and adds a regression test.

Change-Id: I8b420f251c1e74ae67eab1f90019b5e1eb7177a5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4551525
Commit-Queue: Zain Afzal <zafzal@google.com>
Reviewed-by: Christos Froussios <cfroussios@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1147598}

tools/style_variable_generator/css_generator.py

@@ -194,6 +194,11 @@ class CSSStyleGenerator(BaseGenerator):
 
     def CSSColorVar(self, name, color, mode, unscoped=False):
         '''Returns the CSS color representation given a color name and color'''
+        if unscoped:
+            var_name = self.ToCSSVarNameUnscoped(name)
+        else:
+            var_name = self.ToCSSVarName(name)
+
         if isinstance(color, ColorVar):
             return 'var(%s)' % self.ToCSSVarName(color.var)
 
@@ -202,14 +207,10 @@ class CSSStyleGenerator(BaseGenerator):
 
         if isinstance(color,
                       ((ColorRGB, ColorRGBVar))) and color.opacity.a != 1:
-            if unscoped:
-                var_name = self.ToCSSVarNameUnscoped(name)
-            else:
-                var_name = self.ToCSSVarName(name)
             return 'rgba(var(%s-rgb), %s)' % (var_name,
                                               self._CSSOpacity(color.opacity))
 
-        return 'rgb(var(%s-rgb))' % self.ToCSSVarName(name)
+        return 'rgb(var(%s-rgb))' % var_name
 
     def NeedsRGBVariant(self, color):
         return not isinstance(color, ColorBlend)

tools/style_variable_generator/tests/goldens/legacy_mappings_test_expected.css

@@ -0,0 +1,40 @@
+/* Copyright 2020 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* This file is generated from:
+ *  tests/legacy_mappings_test.json5
+ */
+:root {
+  color-scheme: light dark;
+}
+
+html:not(body) {
+  --cros-text-color-primary-rgb: 0, 0, 0;
+  --cros-text-color-primary: rgb(var(--cros-text-color-primary-rgb));
+
+  --cros-legacy-color-rgb: var(--cros-text-color-primary-rgb);
+  --cros-legacy-color: var(--cros-text-color-primary);
+  --cros-legacy-color-light: var(--cros-text-color-primary);
+  --cros-legacy-color-dark: var(--cros-text-color-primary);
+
+  --cros-legacy-color-w-opacity-rgb: var(--cros-text-color-primary-rgb);
+  --cros-legacy-color-w-opacity: rgba(var(--cros-legacy-color-w-opacity-rgb), 0.3);
+  --cros-legacy-color-w-opacity-light: rgba(var(--cros-legacy-color-w-opacity-rgb), 0.3);
+  --cros-legacy-color-w-opacity-dark: rgba(var(--cros-legacy-color-w-opacity-rgb), 0.3);
+
+  --cros-hex-rgb: 255, 255, 255;
+  --cros-hex: rgb(var(--cros-hex-rgb));
+  --cros-hex-light: rgb(var(--cros-hex-rgb));
+  --cros-hex-dark: rgb(var(--cros-hex-rgb));
+
+  --cros-rgb-rgb: 255, 255, 255;
+  --cros-rgb: rgb(var(--cros-rgb-rgb));
+  --cros-rgb-light: rgb(var(--cros-rgb-rgb));
+  --cros-rgb-dark: rgb(var(--cros-rgb-rgb));
+
+  --cros-rgba-rgb: 255, 255, 255;
+  --cros-rgba: rgba(var(--cros-rgba-rgb), 0.5);
+  --cros-rgba-light: rgba(var(--cros-rgba-rgb), 0.5);
+  --cros-rgba-dark: rgba(var(--cros-rgba-rgb), 0.5);
+}

tools/style_variable_generator/tests/legacy_mappings_test.json5

@@ -0,0 +1,17 @@
+{
+  options: {
+    CSS: {
+      prefix: 'cros'
+    },
+  },
+  legacy_mappings: {
+    'cros-legacy-color': '$text_color_primary',
+    'cros-legacy-color-w-opacity': 'rgba($text_color_primary.rgb, .3)',
+    'cros-hex': '#ffffff',
+    'cros-rgb': 'rgb(255, 255, 255)',
+    'cros-rgba': 'rgba(255, 255, 255, .5)',
+  },
+  colors: {
+    text_color_primary: '#000000',
+  },
+}

tools/style_variable_generator/tests/style_variable_generator_test.py

@@ -123,6 +123,12 @@ class CSSStyleGeneratorTest(unittest.TestCase, BaseStyleGeneratorTest):
         expected_file_name = 'colors_tokens_test_expected.css'
         self.assertEqualToFile(self.generator.Render(), expected_file_name)
 
+    def testLegacyColors(self):
+        self.generator = CSSStyleGenerator()
+        self.AddJSONFilesToModel(['legacy_mappings_test.json5'])
+        expected_file_name = 'legacy_mappings_test_expected.css'
+        self.assertEqualToFile(self.generator.Render(), expected_file_name)
+
 
 class TSStyleGeneratorTest(unittest.TestCase, BaseStyleGeneratorTest):
     def setUp(self):