From 699695017642608b134d65d66b5b04c101c5502c Mon Sep 17 00:00:00 2001
From: Muhammad Farhan Khan <mfarhan133@gmail.com>
Date: Tue, 6 Aug 2024 16:57:49 +0500
Subject: [PATCH] feat: Expose xmodule xblocks Sass variables as vanilla CSS
 variables

---
 cms/static/sass/studio-main-v1.scss           |  2 +
 .../static/sass/_builtin-block-variables.scss | 46 +++++++++++++++++++
 lms/static/sass/_variables.scss               |  2 +
 3 files changed, 50 insertions(+)
 create mode 100644 common/static/sass/_builtin-block-variables.scss

diff --git a/cms/static/sass/studio-main-v1.scss b/cms/static/sass/studio-main-v1.scss
index ac649970d644..5d0cdda2ea5f 100644
--- a/cms/static/sass/studio-main-v1.scss
+++ b/cms/static/sass/studio-main-v1.scss
@@ -15,6 +15,8 @@
 
 // +Libs and Resets - *do not edit*
 // ====================
+
+@import '_builtin-block-variables';
 @import 'bourbon/bourbon'; // lib - bourbon
 @import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 @import 'build-v1'; // shared app style assets/rendering
diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss
new file mode 100644
index 000000000000..b9ed8707e924
--- /dev/null
+++ b/common/static/sass/_builtin-block-variables.scss
@@ -0,0 +1,46 @@
+/*
+ * In pursuit of decoupling the built-in XBlocks from edx-platform's Sass build
+ * and ensuring comprehensive theming support in the extracted XBlocks,
+ * we need to expose Sass variables as CSS variables.
+ *
+ * Ticket/Issue: https://github.com/openedx/edx-platform/issues/35173
+ */
+@import 'bourbon/bourbon';
+@import 'lms/theme/variables';
+@import 'lms/theme/variables-v1';
+@import 'cms/static/sass/partials/cms/theme/_variables';
+@import 'cms/static/sass/partials/cms/theme/_variables-v1';
+@import 'bootstrap/scss/variables';
+@import 'vendor/bi-app/bi-app-ltr';
+
+:root {
+    --primary: $primary;
+    --transparent: $transparent;
+    --white: $white;
+    --black: $black;
+    --gray: $gray;
+    --lightGrey: $lightGrey;
+    --darkGrey: $darkGrey;
+    --gray-l2: $gray-l2;
+    --gray-l3: $gray-l3;
+    --gray-l4: $gray-l4;
+    --gray-l6: $gray-l6;
+    --blue: $blue;
+    --blue-d1: $blue-d1;
+    --blue-d2: $blue-d2;
+    --blue-d4: $blue-d4;
+    --shadow: $shadow;
+    --shadow-l1: $shadow-l1;
+    --link-color: $link-color;
+    --sidebar-color: $sidebar-color;
+    --body-color: $body-color;
+    --border-color: $border-color;
+    --error-color: $error-color;
+    --very-light-text: $very-light-text;
+    --lighter-base-font-color: $lighter-base-font-color;
+    --action-primary-active-bg: $action-primary-active-bg;
+    --baseline: $baseline;
+    --font-family-sans-serif: $font-family-sans-serif;
+    --static-path: $static-path;
+    --tmg-f2: $tmg-f2;
+}
diff --git a/lms/static/sass/_variables.scss b/lms/static/sass/_variables.scss
index dff9826b94b7..e1ccc714266d 100644
--- a/lms/static/sass/_variables.scss
+++ b/lms/static/sass/_variables.scss
@@ -1,5 +1,7 @@
 // LMS-specific variables
 
+@import '_builtin-block-variables';
+
 $text-width-readability-max: 1080px;
 
 // LMS-only colors