refactor: corrected progress-bar and typography tokens

openedx · Oct 21, 2024 · 4e9134e · 4e9134e
1 parent 0905115
commit 4e9134e
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 13 deletions.
diff --git a/src/ProgressBar/bootstrap-progress.scss b/src/ProgressBar/bootstrap-progress.scss
@@ -25,7 +25,7 @@
   height: var(--pgn-size-progress-bar-height-base);
   overflow: hidden;
   line-height: 0;
-  background-color: var(--pgn-color-progress-bar-bg);
+  background-color: var(--pgn-color-progress-bg);
   box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
 
   @include font-size(var(--pgn-typography-progress-bar-font-size));

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -147,7 +147,7 @@
   --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */
   --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */
   --pgn-typography-font-size-base: 1.125rem; /* Base font size. */
-  --pgn-typography-font-family-monospace: 'SFMono-Regular, Menlo, Monaco, Consolas, \'Liberation Mono\',  \'Courier New\', monospace'; /* Monospace font family. */
+  --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Monospace font family. */
   --pgn-typography-font-family-serif: serif; /* Serif font family. */
   --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Sans-serif font family. */
   --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -306,11 +306,11 @@
   --pgn-color-search-field-border-focus: var(--pgn-color-black);
   --pgn-color-search-field-border-interaction: var(--pgn-color-black);
   --pgn-color-search-field-border-base: var(--pgn-color-gray-500);
+  --pgn-color-progress-bg: #00000000;
+  --pgn-color-progress-bar-border: var(--pgn-color-gray-500);
   --pgn-color-progress-bar-bg-annotated: var(--pgn-color-dark-500);
   --pgn-color-progress-bar-bg-base: var(--pgn-color-accent-a);
   --pgn-color-progress-bar-base: var(--pgn-color-white);
-  --pgn-color-progress-bar-border: var(--pgn-color-gray-500);
-  --pgn-color-progress-bar-bg: #00000000;
   --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
   --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg);
   --pgn-color-product-tour-checkpoint-box-shadow: #0000004D;

diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
@@ -23,7 +23,7 @@
         },
         "monospace": {
           "source": "$font-family-monospace",
-          "$value": ["SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',  'Courier New', monospace"],
+          "$value": ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",  "Courier New", "monospace"],
           "$description": "Monospace font family."
         }
       },

diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json
@@ -2,17 +2,15 @@
   "color": {
     "$type": "color",
     "progress-bar": {
-      "bg": { "source": "$progress-bg", "$value": "transparent" },
+      "base": { "source": "$progress-bar-color", "$value": "{color.white}" },
+      "bg": {
+        "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
+        "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
+      },
       "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" }
     },
     "progress": {
-      "bar": {
-        "base": { "source": "$progress-bar-color", "$value": "{color.white}" },
-        "bg": {
-          "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
-          "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
-        }
-      }
+      "bg": { "source": "$progress-bg", "$value": "transparent" }
     }
   },
   "elevation": {