From d7a58b502e358e4e5b8fb554be6fe81a72fa0973 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell.reigstad@shopify.com>
Date: Wed, 11 Dec 2024 14:10:31 -0500
Subject: [PATCH] Use comma-less rgba format.

---
 layout/password.liquid | 22 +++++++++++-----------
 layout/theme.liquid    | 24 ++++++++++++------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/layout/password.liquid b/layout/password.liquid
index 633fffe4f8b..f91a5890ff8 100644
--- 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
index 305af7c4baf..af0216cb79f 100644
--- 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 %}