DEV: Move color definition functions to mixins (#12511)

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};

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";
+  }
+}

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