Use comma-less rgba format.

Shopify · Dec 11, 2024 · d7a58b5 · d7a58b5
1 parent 928cf57
commit d7a58b5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/layout/password.liquid b/layout/password.liquid
@@ -42,22 +42,22 @@
           :root,
         {%- endif %}
         .color-{{ scheme.id }} {
-          --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
+          --color-background: {{ scheme.settings.background.red }} {{ scheme.settings.background.green }} {{ scheme.settings.background.blue }} / {{ scheme.settings.background.alpha }};
           {% if scheme.settings.background_gradient != empty %}
             --gradient-background: {{ scheme.settings.background_gradient }};
           {% else %}
             --gradient-background: {{ scheme.settings.background }};
           {% endif %}
-          --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }},{{ scheme.settings.text.alpha }};
-          --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }},{{ scheme.settings.shadow.alpha }};
-          --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }},{{ scheme.settings.button.alpha }};
-          --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }},{{ scheme.settings.button_label.alpha }};
-          --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }},{{ scheme.settings.background.alpha }};
-          --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }},{{ scheme.settings.secondary_button_label.alpha }};
-          --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }},{{ scheme.settings.secondary_button_label.alpha }};
-          --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }},{{ scheme.settings.text.alpha }};
-          --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }},{{ scheme.settings.background.alpha }};
-          --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }},{{ scheme.settings.text.alpha }};
+          --color-foreground: {{ scheme.settings.text.red }} {{ scheme.settings.text.green }} {{ scheme.settings.text.blue }} / {{ scheme.settings.text.alpha }};
+          --color-shadow: {{ scheme.settings.shadow.red }} {{ scheme.settings.shadow.green }} {{ scheme.settings.shadow.blue }} / {{ scheme.settings.shadow.alpha }};
+          --color-button: {{ scheme.settings.button.red }} {{ scheme.settings.button.green }} {{ scheme.settings.button.blue }} / {{ scheme.settings.button.alpha }};
+          --color-button-text: {{ scheme.settings.button_label.red }} {{ scheme.settings.button_label.green }} {{ scheme.settings.button_label.blue }} / {{ scheme.settings.button_label.alpha }};
+          --color-secondary-button: {{ scheme.settings.background.red }} {{ scheme.settings.background.green }} {{ scheme.settings.background.blue }} / {{ scheme.settings.background.alpha }};
+          --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }} {{ scheme.settings.secondary_button_label.green }} {{ scheme.settings.secondary_button_label.blue }} / {{ scheme.settings.secondary_button_label.alpha }};
+          --color-link: {{ scheme.settings.secondary_button_label.red }} {{ scheme.settings.secondary_button_label.green }} {{ scheme.settings.secondary_button_label.blue }} / {{ scheme.settings.secondary_button_label.alpha }};
+          --color-badge-foreground: {{ scheme.settings.text.red }} {{ scheme.settings.text.green }} {{ scheme.settings.text.blue }} / {{ scheme.settings.text.alpha }};
+          --color-badge-background: {{ scheme.settings.background.red }} {{ scheme.settings.background.green }} {{ scheme.settings.background.blue }} / {{ scheme.settings.background.alpha }};
+          --color-badge-border: {{ scheme.settings.text.red }} {{ scheme.settings.text.green }} {{ scheme.settings.text.blue }} / {{ scheme.settings.text.alpha }};
           --payment-terms-background-color: rgba({{ scheme.settings.background.rgba }});
         }
       {% endfor %}

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -60,7 +60,7 @@
           :root,
         {%- endif %}
         .color-{{ scheme.id }} {
-          --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }},{{ scheme.settings.background.alpha }};
+          --color-background: {{ scheme.settings.background.red }} {{ scheme.settings.background.green }} {{ scheme.settings.background.blue }} / {{ scheme.settings.background.alpha }};
         {% if scheme.settings.background_gradient != empty %}
           --gradient-background: {{ scheme.settings.background_gradient }};
         {% else %}
@@ -79,17 +79,17 @@
           endif
         %}
 
-        --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }},{{ scheme.settings.text.alpha }};
-        --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }},{{ background_color_contrast.alpha }};
-        --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }},{{ scheme.settings.shadow.alpha }};
-        --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }},{{ scheme.settings.button.alpha }};
-        --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }},{{ scheme.settings.button_label.alpha }};
-        --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }},{{ scheme.settings.background.alpha }};
-        --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }},{{ scheme.settings.secondary_button_label.alpha }};
-        --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }},{{ scheme.settings.secondary_button_label.alpha }};
-        --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }},{{ scheme.settings.text.alpha }};
-        --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }},{{ scheme.settings.background.alpha }};
-        --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }},{{ scheme.settings.text.alpha }};
+        --color-foreground: {{ scheme.settings.text.red }} {{ scheme.settings.text.green }} {{ scheme.settings.text.blue }} / {{ scheme.settings.text.alpha }};
+        --color-background-contrast: {{ background_color_contrast.red }} {{ background_color_contrast.green }} {{ background_color_contrast.blue }} / {{ background_color_contrast.alpha }};
+        --color-shadow: {{ scheme.settings.shadow.red }} {{ scheme.settings.shadow.green }} {{ scheme.settings.shadow.blue }} / {{ scheme.settings.shadow.alpha }};
+        --color-button: {{ scheme.settings.button.red }} {{ scheme.settings.button.green }} {{ scheme.settings.button.blue }} / {{ scheme.settings.button.alpha }};
+        --color-button-text: {{ scheme.settings.button_label.red }} {{ scheme.settings.button_label.green }} {{ scheme.settings.button_label.blue }} / {{ scheme.settings.button_label.alpha }};
+        --color-secondary-button: {{ scheme.settings.background.red }} {{ scheme.settings.background.green }} {{ scheme.settings.background.blue }} / {{ scheme.settings.background.alpha }};
+        --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }} {{ scheme.settings.secondary_button_label.green }} {{ scheme.settings.secondary_button_label.blue }} / {{ scheme.settings.secondary_button_label.alpha }};
+        --color-link: {{ scheme.settings.secondary_button_label.red }} {{ scheme.settings.secondary_button_label.green }} {{ scheme.settings.secondary_button_label.blue }} / {{ scheme.settings.secondary_button_label.alpha }};
+        --color-badge-foreground: {{ scheme.settings.text.red }} {{ scheme.settings.text.green }} {{ scheme.settings.text.blue }} / {{ scheme.settings.text.alpha }};
+        --color-badge-background: {{ scheme.settings.background.red }} {{ scheme.settings.background.green }} {{ scheme.settings.background.blue }} / {{ scheme.settings.background.alpha }};
+        --color-badge-border: {{ scheme.settings.text.red }} {{ scheme.settings.text.green }} {{ scheme.settings.text.blue }} / {{ scheme.settings.text.alpha }};
         --payment-terms-background-color: rgba({{ scheme.settings.background.rgba }});
       }
       {% endfor %}