From 6e5e8aacf4184d17a8791daf5ee39cde38b0c59c Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Tue, 6 Aug 2024 16:57:49 +0500 Subject: [PATCH 1/2] 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 From 9c25250d84f171f082331a3e680a7d38547ae9fa Mon Sep 17 00:00:00 2001 From: Muhammad Farhan Khan Date: Mon, 12 Aug 2024 14:25:53 +0500 Subject: [PATCH 2/2] chore: Adds missing sass variables --- .../static/sass/_builtin-block-variables.scss | 63 +++++++++++++------ 1 file changed, 45 insertions(+), 18 deletions(-) diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss index b9ed8707e924..2c567c6fb1f4 100644 --- a/common/static/sass/_builtin-block-variables.scss +++ b/common/static/sass/_builtin-block-variables.scss @@ -12,35 +12,62 @@ @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 { - --primary: $primary; - --transparent: $transparent; - --white: $white; + --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; - --gray: $gray; - --lightGrey: $lightGrey; - --darkGrey: $darkGrey; - --gray-l2: $gray-l2; - --gray-l3: $gray-l3; - --gray-l4: $gray-l4; - --gray-l6: $gray-l6; + --black-t2: $black-t2; --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; + --bp-screen-lg: $bp-screen-lg; + --btn-brand-focus-background: $btn-brand-focus-background; + --correct: $correct; + --danger: $danger; + --darkGrey: $darkGrey; --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-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; }