feat: Colored grade segments extended from default 5 to default 12

[haftamuk]

This implementation updates color scheme in grade range to 12. The fix ensures consistent color of grade letters across courses.

Note: This implementation assumes the default five grade letter setting entry in edx-platform/cms/envs/common.py is converted
From
DEFAULT_GRADE_DESIGNATIONS = ['A', 'B', 'C', 'D']
To
DEFAULT_GRADE_DESIGNATIONS = ['A+', 'A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D’]

[haftamuk]

@Cup0fCoffee I am just writing for your followup on how I am approaching this!

[Cup0fCoffee]

@xitij2000 @kaustavb12 I didn't have a chance to familiarize myself with the design tokens yet. This PR is modifying the scss variable, and to my best knowledge design tokens is precisely the mechanism that allows to modify scss variable values without having to update the fork. Could you point me and @haftamuk in the write direction so that we can implement this change in a maintainable way?

[xitij2000]

@Cup0fCoffee I think to make this properly themeable using design tokens we can use CSS properties here as:

$grading-scale-segment-colors: (
  0: var(--pgn-color-grading-scale-segment-0, #87D771),
  1: var(--pgn-color-grading-scale-segment-1, #FDE370),
  2: var(--pgn-color-grading-scale-segment-2, #F6BF58),
  3: var(--pgn-color-grading-scale-segment-3, #FF7E6A),
  4: var(--pgn-color-grading-scale-segment-4, #E94949),
  5: var(--pgn-color-grading-scale-segment-5, #4f2934),
  6: var(--pgn-color-grading-scale-segment-6, #ce4c87),
  7: var(--pgn-color-grading-scale-segment-7, #B30349),
  8: var(--pgn-color-grading-scale-segment-8, #2b0312),
  9: var(--pgn-color-grading-scale-segment-9, #f3b2c7),
  10: var(--pgn-color-grading-scale-segment-10, #A60649),
  11: var(--pgn-color-grading-scale-segment-11, #9f0c40a0)
);

[xitij2000]

The issue with extending the values here is that they still might not be enough if someone uses more letters or grade divisions.

One option would be to directly reference the css variable in the JS code. So instead of setting the class to segment-${idx - 1} we can instead use style={{ backgroundColor: var(--pgn-color-grading-scale-segment-${idx - 1}) }} . The advantage here is that it will scale with the number of segments and you just need to create as many numbered segment colors as you have grades.

I also feel we can clean this a bit and start counting segments from 1, for theme authors segment 0 might be a bit odd.

[haftamuk]

@xitij2000 following a discussion on an upstreamable approach, a few recommendation popped up and mostly an approach on your demonstration HERE is preferred.
This PR now reflects an adoption of your demonstrated work with just a few changes to clearly separate adjacent colored segments as the number of color segments increase.

I am just putting the changes in this PR to see the significance of the code change and get your feedback!