From 9804fb4b7e6f930abe6f9d57ee2ed4f9aee10d40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Thu, 27 Jun 2024 08:20:24 -0600
Subject: [PATCH] fix(shs-5673): add color variables to wysiwyg css

---
 .../src/scss/ckeditor/imports.scss            | 23 ++++++++++++++++++-
 .../_variables.colorful-pairings.scss         |  2 ++
 .../_variables.traditional-pairings.scss      |  2 ++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/scss/ckeditor/imports.scss b/docroot/themes/humsci/humsci_basic/src/scss/ckeditor/imports.scss
index 44905d6968..dd2f80029a 100644
--- a/docroot/themes/humsci/humsci_basic/src/scss/ckeditor/imports.scss
+++ b/docroot/themes/humsci/humsci_basic/src/scss/ckeditor/imports.scss
@@ -3,6 +3,7 @@
 // the dependencies and the files we need. See _main.scss and
 // _base.scss for reference.
 @charset 'UTF-8';
+@use "sass:map";
 
 // Here we add the path to Font Awesome. This is copied from _main.scss
 // and necessary for icons in CKEditor styles.
@@ -30,7 +31,7 @@ $px-only: true;
   "../tools/mixins.buttons", "../tools/mixins.menu-icons",
   "../tools/mixins.icons", "../tools/mixins.lists", "../tools/mixins.tables",
   "../tools/mixins.heros", "../tools/mixins.slick", "../tools/keyframes.text",
-  "../utilities/color-pairings", "../utilities/fonts", "../utilities/font-awesome", "../utilities/general", 
+  "../utilities/color-pairings", "../utilities/fonts", "../utilities/font-awesome", "../utilities/general",
   "../utilities/lists", "../utilities/raised-cards",
   "../utilities/tables", "../utilities/display-more-link-text",
   "../utilities/dark-pattern", "../utilities/caption-credit", "../utilities/media-embeds",
@@ -40,6 +41,26 @@ $px-only: true;
 
 // See _base.scss in basic theme. We only need the below for CKEditor.
 // Otherwise styles affect the entire admin UI.
+:root {
+  @include hb-themes(("colorful", "airy")) {
+    @each $color, $value in map.get($hc-colorful-pairings, $hb-colorful-default) {
+      --palette--#{$color}: #{$value};
+    }
+    @each $color, $value in $hc-colorful-globals {
+      --palette--#{$color}: #{$value};
+    }
+  }
+
+  @include hb-traditional {
+    @each $color, $value in map.get($ht-traditional-pairings, $hb-traditional-default) {
+      --palette--#{$color}: #{$value};
+    }
+    @each $color, $value in $ht-traditional-globals {
+      --palette--#{$color}: #{$value};
+    }
+  }
+}
+
 .ck-editor__main {
   @include font-smoothing;
 
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.colorful-pairings.scss b/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.colorful-pairings.scss
index f64f0cf4f8..7b4af6de90 100644
--- a/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.colorful-pairings.scss
+++ b/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.colorful-pairings.scss
@@ -1,5 +1,7 @@
 // COLORFUL
 
+$hb-colorful-default: 'cardinal';
+
 // Each color pairing has a palette of color swatches
 $hc-colorful-pairings: (
   'ocean': (
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.traditional-pairings.scss b/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.traditional-pairings.scss
index 4a5c3eecf6..9db3ea5554 100644
--- a/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.traditional-pairings.scss
+++ b/docroot/themes/humsci/humsci_basic/src/scss/settings/_variables.traditional-pairings.scss
@@ -1,5 +1,7 @@
 // TRADITIONAL
 
+$hb-traditional-default: 'cardinal';
+
 // Each color pairing has a palette of color swatches
 $ht-traditional-pairings: (
   'cardinal': (