openedx
Convert discussion block sass variable into css variables
Description:
In this PR i converted builtin discussion block Sass variables into CSS variables.
I added them all inside :root { ... } in file: common/static/sass/_builtin-block-variables.scss (CSS var reference on MDN)
Following is the list of variables:
$actions-dropdown-width $actions-dropdown-offset $border-color-4 $comment-image-dimension $forum-color-active-thread $forum-color-hover $forum-color-active-text $forum-color-background $forum-x-large-font-size $forum-color-copy-light $forum-large-font-size $forum-border-radius $forum-base-font-size $forum-small-font-size $forum-color-border $forum-color-background-light $forum-color-editor-preview-label $forum-color-following $forum-color-error $forum-color-pinned $forum-color-reported $forum-color-closed $forum-color-staff $forum-color-community-ta $forum-color-response-count $forum-color-read-post $forum-color-hover-thread $forum-color-reading-thread $forum-color-never-read-post $forum-color-navigation-bar $forum-color-primary $green $line-height-base $pink $post-image-dimension $response-image-dimension $serif
Ticket Ref: https://github.com/orgs/openedx/projects/55/views/1?pane=issue&itemId=142583165&issue=openedx%7Cpublic-engineering%7C456
Acceptance Criteria
The Discussion XBlock UI should remain unaffected.
How to test:
- Run
npm run compile-sass-devin lms shell. - Open discussion XBlock in the lms. (To enable discussion block we can follow https://github.com/openedx/edx-platform/issues/36539#issuecomment-3544115299)
- In dev tool We can use following command in console to verify the above mentioned variables
getComputedStyle(document.documentElement).getPropertyValue('--actions-dropdown-width')
