feat: Converts builtin block Sass into vanilla CSS

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,58 @@
+@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 {
+    --baseline: $baseline;
+    --sidebar-color: $sidebar-color;
+    --body-color: $body-color;
+    --font-family-sans-serif: $font-family-sans-serif;
+    --lightGrey: $lightGrey;
+    --darkGrey: $darkGrey;
+    --white: $white;
+    --link-color: $link-color;
+    --gray-l2: $gray-l2;
+    --gray-l3: $gray-l3;
+    --blue: $blue;
+    --blue-d1: $blue-d1;
+    --blue-d2: $blue-d2;
+    --blue-d4: $blue-d4;
+    --shadow: $shadow;
+    --shadow-l1: $shadow-l1;
+    --transparent: $transparent;
+    --black: $black;
+    --action-primary-active-bg: $action-primary-active-bg;
+    --very-light-text: $very-light-text;
+    --tmg-f2: $tmg-f2;
+    --lighter-base-font-color: $lighter-base-font-color;
+    --border-color: $border-color;
+    // Cappa problems
+    --gray: $gray;
+    --gray-l4: $gray-l4;
+    --gray-l6: $gray-l6;
+    --error-color: $error-color;
+    --primary: $primary;
+    --static-path: $static-path;
+    //// There are many local Sass variables defined in xmodule/assets/capa/_display.scss
+
+    //// Local Sass variables defined in xmodule/assets/video/_accessible_menu.scss
+    //--a11y--gray: rgb(127, 127, 127);
+    //--a11y--blue: rgb(0, 159, 230);
+    //--a11y--gray-d1: shade($gray, 20%);
+    //--a11y--gray-l2: tint($gray, 40%);
+    //--a11y--gray-l3: tint($gray, 60%);
+    //--a11y--blue-s1: saturate($blue, 15%);
+
+    //// Local Sass variables defined in xmodule/assets/sequence/_display.scss
+    //$seq-nav-border-color: $border-color !default;
+    //$seq-nav-hover-color: rgb(245, 245, 245) !default;
+    //$seq-nav-link-color: $link-color !default;
+    //$seq-nav-icon-color: rgb(10, 10, 10) !default;
+    //$seq-nav-icon-color-muted: rgb(90, 90, 90) !default;
+    //$seq-nav-tooltip-color: rgb(51, 51, 51) !default;
+    //$seq-nav-height: 50px;
+}

lms/static/sass/_variables.scss

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