From e4f3a04d53c015dff3d6db0c8f19e57fe15c56d1 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 24 Mar 2021 18:35:52 -0400
Subject: [PATCH] DEV: Move color definition functions to mixins (#12511)

---
 app/assets/stylesheets/color_definitions.scss | 18 -----------------
 .../stylesheets/common/foundation/mixins.scss | 20 +++++++++++++++++++
 spec/components/stylesheet/importer_spec.rb   |  6 ++++--
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss
index 2383cad81bc..9e4174e47a0 100644
--- a/app/assets/stylesheets/color_definitions.scss
+++ b/app/assets/stylesheets/color_definitions.scss
@@ -2,24 +2,6 @@
 // It is compiled to CSS separately from the rest of the app.
 // The source variables come from color_transformations.scss and variables.scss
 
-// this converts HEX colors to RGBs so they can be used in vanilla CSS
-// i.e.: rgba(var(--primary-low-rgb), 0.5)
-//
-// Note that "rgba(var(--primary-low), 0.5)" will not work,
-// because --primary-low has a HEX color value
-
-@function hexToRGB($hex) {
-  @return red($hex), green($hex), blue($hex);
-}
-
-@function schemeType() {
-  @if is-light-color-scheme() {
-    @return "light";
-  } @else {
-    @return "dark";
-  }
-}
-
 :root {
   --scheme-type: #{schemeType()};
   --primary: #{$primary};
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 8c854113837..d6bd2eddce7 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -174,3 +174,23 @@ $breakpoints: (
 
   @return $string;
 }
+
+// SCSS accepts HEX or RGB colors for rgba($color, 0.5)
+// CSS custom properties only accept RGB
+// Example usage:
+
+// --primary-rgb: #{hexToRGB($primary)};
+// ...
+// rgba(var(--primary-low-rgb), 0.5)
+
+@function hexToRGB($hex) {
+  @return red($hex), green($hex), blue($hex);
+}
+
+@function schemeType() {
+  @if is-light-color-scheme() {
+    @return "light";
+  } @else {
+    @return "dark";
+  }
+}
diff --git a/spec/components/stylesheet/importer_spec.rb b/spec/components/stylesheet/importer_spec.rb
index 562140f37f9..6ddc9ba04c0 100644
--- a/spec/components/stylesheet/importer_spec.rb
+++ b/spec/components/stylesheet/importer_spec.rb
@@ -77,7 +77,7 @@ describe Stylesheet::Importer do
 
   context "#import_color_definitions" do
     let(:scss) { ":root{--custom-color: green}" }
-    let(:scss_child) { ":root{--custom-color: red}" }
+    let(:scss_child) { "$navy: #000080; :root{--custom-color: red; --custom-color-rgb: \#{hexToRGB($navy)}}" }
 
     let(:theme) do
       Fabricate(:theme).tap do |t|
@@ -101,8 +101,10 @@ describe Stylesheet::Importer do
       theme.save!
 
       styles = Stylesheet::Importer.new({ theme_id: theme.id }).import_color_definitions
-      expect(styles).to include(scss_child)
       expect(styles).to include("Color definitions from Child Theme")
+      expect(styles).to include("--custom-color: red")
+      expect(styles).to include("--custom-color-rgb: 0,0,128")
+
     end
 
     it "should include default theme color definitions" do