Convert discussion block sass variables into css variables

[salman2013]

Description:
In this story we have to convert builtin discussion block Sass variables into CSS variables.

The goal of this task is to entirely convert the Sass into vanilla CSS which can be loaded with the standard ResourceLoader class from xblock.utils. The longer-term benefit is that this will remove any Sass build concerns from the xblock extraction effort.

Tasks

• Record a list of every Sass variable used by discussion block Sass.
• The builtin block Sass files are all located under lms/static/sass/discussion/
• A Sass variable is indicated with a dollar sign, for example $bg-color or $success.
• To make the variables, add them all in :root { ... }
• (CSS var reference on MDN), file: common/static/sass/_builtin-block-variables.scss

Parent ticket: openedx/openedx-platform#35300
PR: https://github.com/openedx/edx-platform/pull/37742/files

[salman2013]

# # Search for all Sass var references, sort them, and save them to a file.
# rg '\$[a-zA-Z0-9-_]*'   lms/static/sass/discussion/**/*scss --no-line-number --no-filename --only-matching \
#     | sort | uniq > variable_references.txt

# # Search for local declarations of Sass vars (like '$selected_color: ...'), sort them,
# # and save them to a file.
# rg '\$[a-zA-Z0-9-_]*: ' lms/static/sass/discussion/**/*scss --no-line-number --no-filename --only-matching \
#     | sed 's/..$//' | sort | uniq > local_variable_declarations.txt

# # Compare the set of var references with the set of local declarations.
# # Variables which are referenced but *don't* have local declarations must be themeable Sass variable.
# # Save them to a file.
# diff --unified local_variable_declarations.txt variable_references.txt \
#     | rg '^\+' | sed 's/^.//'  > themable_variables.txt

# # Search the new _builtin-block-variables.scss file to get a list of CSS->Sass mapped variables.
# # Sort and save them to a file.
# rg '\$[A-Za-z0-9-_]*' common/static/sass/_builtin-block-variables.scss --no-line-number --no-filename --only-matching \
#     | sort | uniq > css_mapped_variables.txt

# # Finally, compare the CSS->Sass-mapped variables with the themed ones we saved earlier.
# # This is the list of variables that we are missing CSS->Sass mappings for.
# diff --unified css_mapped_variables.txt themable_variables.txt \
#     | rg '^\+' | sed 's/^.//'

By using the above script and manually looking into files i found following variables which need to be updated from scss to css 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

There are multiple files which with these variables so i used script to convert the variables but its taking some time to me to review and verify the updates.

[salman2013]

PR reference: https://github.com/openedx/edx-platform/pull/37742/files