From 6d506ab95979b6e6969f45ee7fe9e9c63707b8f0 Mon Sep 17 00:00:00 2001
From: Muhammad Farhan Khan <farhan.khan@arbisoft.com>
Date: Tue, 20 Aug 2024 20:05:02 +0500
Subject: [PATCH] feat: Expose xmodule xblocks Sass variables as vanilla CSS
 variables (#35233)

* feat: Expose xmodule xblocks Sass variables as vanilla CSS variables
* https://github.com/openedx/edx-platform/issues/35173
---
 cms/static/sass/studio-main-v1.scss           |  2 +
 .../static/sass/_builtin-block-variables.scss | 73 +++++++++++++++++++
 lms/static/sass/_variables.scss               |  2 +
 3 files changed, 77 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..2c567c6fb1f4
--- /dev/null
+++ b/common/static/sass/_builtin-block-variables.scss
@@ -0,0 +1,73 @@
+/*
+ * 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';
+@import 'edx-pattern-library-shims/base/_variables.scss';
+
+:root {
+    --action-primary-active-bg: $action-primary-active-bg;
+    --all-text-inputs: $all-text-inputs;
+    --base-font-size: $base-font-size;
+    --base-line-height: $base-line-height;
+    --baseline: $baseline;
+    --black: $black;
+    --black-t2: $black-t2;
+    --blue: $blue;
+    --blue-d1: $blue-d1;
+    --blue-d2: $blue-d2;
+    --blue-d4: $blue-d4;
+    --body-color: $body-color;
+    --border-color: $border-color;
+    --bp-screen-lg: $bp-screen-lg;
+    --btn-brand-focus-background: $btn-brand-focus-background;
+    --correct: $correct;
+    --danger: $danger;
+    --darkGrey: $darkGrey;
+    --error-color: $error-color;
+    --font-bold: $font-bold;
+    --font-family-sans-serif: $font-family-sans-serif;
+    --general-color-accent: $general-color-accent;
+    --gray: $gray;
+    --gray-300: $gray-300;
+    --gray-d1: $gray-d1;
+    --gray-l2: $gray-l2;
+    --gray-l3: $gray-l3;
+    --gray-l4: $gray-l4;
+    --gray-l6: $gray-l6;
+    --incorrect: $incorrect;
+    --lightGrey: $lightGrey;
+    --lighter-base-font-color: $lighter-base-font-color;
+    --link-color: $link-color;
+    --medium-font-size: $medium-font-size;
+    --partially-correct: $partially-correct;
+    --primary: $primary;
+    --shadow: $shadow;
+    --shadow-l1: $shadow-l1;
+    --sidebar-color: $sidebar-color;
+    --small-font-size: $small-font-size;
+    --static-path: $static-path;
+    --submitted: $submitted;
+    --success: $success;
+    --tmg-f2: $tmg-f2;
+    --tmg-s2: $tmg-s2;
+    --transparent: $transparent;
+    --uxpl-gray-background: $uxpl-gray-background;
+    --uxpl-gray-base: $uxpl-gray-base;
+    --uxpl-gray-dark: $uxpl-gray-dark;
+    --very-light-text: $very-light-text;
+    --warning: $warning;
+    --warning-color: $warning-color;
+    --warning-color-accent: $warning-color-accent;
+    --white: $white;
+    --yellow: $yellow;
+}
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