Skip to content

Commit

Permalink
feat: Expose xmodule xblocks Sass variables as vanilla CSS variables (o…
Browse files Browse the repository at this point in the history
…penedx#35233)

* feat: Expose xmodule xblocks Sass variables as vanilla CSS variables
* openedx#35173
  • Loading branch information
farhan authored and rediris committed Aug 27, 2024
1 parent 5864601 commit 6d506ab
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 0 deletions.
2 changes: 2 additions & 0 deletions cms/static/sass/studio-main-v1.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
73 changes: 73 additions & 0 deletions common/static/sass/_builtin-block-variables.scss
Original file line number Diff line number Diff line change
@@ -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;
}
2 changes: 2 additions & 0 deletions lms/static/sass/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
// LMS-specific variables

@import '_builtin-block-variables';

$text-width-readability-max: 1080px;

// LMS-only colors
Expand Down

0 comments on commit 6d506ab

Please sign in to comment.