feat: Expose xmodule xblocks Sass variables as vanilla CSS variables

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

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

lms/static/sass/_variables.scss

@@ -1,5 +1,7 @@
 // LMS-specific variables
 
+@import '_builtin-block-variables';
+
 $text-width-readability-max: 1080px;
 
 // LMS-only colors