[BD-46] feat: replace of variables SCSS to CSS

example/src/index.scss

@@ -1,4 +1,4 @@
 @import "@edx/brand-openedx/paragon/fonts";
 @import "@edx/brand-openedx/paragon/variables";
-@import "@edx/paragon/scss/core/core";
+@import "~@edx/paragon/scss/core/core";
 @import "@edx/brand-openedx/paragon/overrides";

scss/core/tokens.css

@@ -1,11 +1,16 @@
 :root {
+  --pgn-www-zindex-modal: 2503;
+  --pgn-www-zindex-sheet-backdrop: 2501;
+  --pgn-www-zindex-sheet: 2502;
+  --pgn-www-zindex-header: 2500;
   --pgn-paragraph-margin-bottom: 1rem;
   --pgn-line-height-sm: 1.5;
   --pgn-line-height-lg: 1.5;
   --pgn-line-height-base: 1.5556;
   --pgn-headings-line-height: 1.25;
   --pgn-headings-font-family: null;
   --pgn-headings-margin-bottom: .5rem;
+  --pgn-font-weight-lead: null;
   --pgn-font-weight-bolder: bolder;
   --pgn-font-weight-bold: 700;
   --pgn-font-weight-semi-bold: 500;
@@ -41,6 +46,7 @@
   --pgn-transition-collapse: height .35s ease;
   --pgn-transition-fade: opacity .15s linear;
   --pgn-transition-base: all .2s ease-in-out;
+  --pgn-link-emphasized-hover-darken-percentage: 15%;
   --pgn-link-brand-inline-hover-decoration-color: #003C5E;
   --pgn-link-brand-inline-hover-decoration: underline;
   --pgn-link-brand-inline-hover-color: #003C5E;
@@ -90,6 +96,9 @@
   --pgn-size-base-75: 75rem;
   --pgn-size-base-50: 50rem;
   --pgn-size-base-25: 25rem;
+  --pgn-list-group-item-padding-x: 1.25rem;
+  --pgn-list-group-item-padding-y: .75rem;
+  --pgn-list-group-color: null;
   --pgn-grid-row-columns: 6;
   --pgn-grid-gutter-width: 24px;
   --pgn-grid-columns: 12;
@@ -124,18 +133,24 @@
   --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3);
+  --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2);
+  --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3);
   --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-core-list-inline-padding: .5rem;
+  --pgn-core-mark-bg: #FFF243;
+  --pgn-core-mark-padding: .2em;
   --pgn-core-input-btn-focus-width: 1px;
   --pgn-core-input-btn-line-height-sm: 1.4286;
   --pgn-core-input-btn-line-height-base: 1.3333;
   --pgn-core-input-btn-font-size-lg: 1.325rem;
   --pgn-core-input-btn-font-size-sm: .875rem;
   --pgn-core-input-btn-font-size-base: 1.125rem;
-  --pgn-core-input-btn-font-family: null;
+  --pgn-core-input-btn-font-family: inherit;
   --pgn-core-input-btn-padding-lg-x: 1.25rem;
   --pgn-core-input-btn-padding-lg-y: .6875rem;
   --pgn-core-input-btn-padding-sm-x: .75rem;
@@ -279,20 +294,21 @@
   --pgn-modal-footer-padding-y: 1.5rem;
   --pgn-modal-footer-padding-x: 1rem;
   --pgn-modal-footer-margin-between: .5rem;
-  --pgn-modal-inner-padding: 1.5rem;
+  --pgn-modal-inner-padding-bottom: .7rem;
+  --pgn-modal-inner-padding-base: 1.5rem;
   --pgn-menu-border-hover: transparent;
   --pgn-menu-border-active: transparent;
   --pgn-menu-border-base: transparent;
   --pgn-image-figure-caption-font-size: 90%;
   --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
   --pgn-image-thumbnail-padding: .25rem;
+  --pgn-icon-button-bg: transparent;
+  --pgn-icon-button-diameter-sm: 2.25rem;
+  --pgn-icon-button-diameter-md: 2.75rem;
   --pgn-icon-lg: 1.75rem;
   --pgn-icon-md: 1.5rem;
   --pgn-icon-sm: 1.25rem;
   --pgn-icon-inline: .8em;
-  --pgn-icon-button-bg: transparent;
-  --pgn-icon-button-diameter-sm: 2.25rem;
-  --pgn-icon-button-diameter-md: 2.75rem;
   --pgn-form-select-icon-padding: .5625rem;
   --pgn-form-control-icon-width: 32px;
   --pgn-form-feedback-tooltip-opacity: .9;
@@ -413,12 +429,14 @@
   --pgn-card-cap-color: null;
   --pgn-card-cap-bg: rgba(0, 0, 0, .03);
   --pgn-card-border-color-focus: rgba(0, 0, 0, .5);
+  --pgn-card-border-color-base: rgba(0, 0, 0, .125);
   --pgn-card-border-radius-logo: .25rem;
   --pgn-card-border-radius-image: .3125rem;
   --pgn-card-spacer-y: .75rem;
   --pgn-card-spacer-x: 1.25rem;
   --pgn-btn-transition: null;
   --pgn-btn-block-spacing-y: .5rem;
+  --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1);
   --pgn-btn-tertiary-inverse-bg-base: transparent;
   --pgn-btn-tertiary-bg-base: transparent;
   --pgn-btn-disabled-opacity: .65;
@@ -444,6 +462,9 @@
   --pgn-badge-padding-x-pill: .6em;
   --pgn-badge-padding-x-base: .5rem;
   --pgn-badge-font-size: 75%;
+  --pgn-avatar-button-padding-left-lg: .25em;
+  --pgn-avatar-button-padding-left-sm: .25em;
+  --pgn-avatar-button-padding-left-base: .25em;
   --pgn-avatar-size-huge: 18.75rem;
   --pgn-avatar-size-xxl: 11.5rem;
   --pgn-avatar-size-xl: 6rem;
@@ -452,9 +473,6 @@
   --pgn-avatar-size-xs: 1.5rem;
   --pgn-avatar-size-base: 3rem;
   --pgn-avatar-border-radius: 100%;
-  --pgn-avatar-button-padding-left-lg: .25em;
-  --pgn-avatar-button-padding-left-sm: .25em;
-  --pgn-avatar-button-padding-left-base: .25em;
   --pgn-annotation-arrow-border-width: .5rem;
   --pgn-annotation-arrow-side-margin: .25rem;
   --pgn-annotation-max-width: 18.75rem;
@@ -560,6 +578,7 @@
   --pgn-color-gray-300: #ADADAD;
   --pgn-color-gray-200: #CCCCCC;
   --pgn-color-gray-100: #EBEBEB;
+  --pgn-color-theme-interval: 8%;
   --pgn-color-accent-b: #FFEE88;
   --pgn-color-accent-a: #00BBF9;
   --pgn-color-teal: #006DAA;
@@ -579,6 +598,7 @@
   --pgn-headings-color: var(--pgn-color-black);
   --pgn-headings-font-weight: var(--pgn-font-weight-bold);
   --pgn-font-weight-base: var(--pgn-font-weight-normal);
+  --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25);
   --pgn-font-size-mobile-h6: var(--pgn-font-size-h6);
   --pgn-font-size-mobile-h5: var(--pgn-font-size-h5);
   --pgn-font-size-mobile-h4: var(--pgn-font-size-h4);
@@ -589,9 +609,17 @@
   --pgn-display-weight-3: var(--pgn-font-weight-bold);
   --pgn-display-weight-2: var(--pgn-font-weight-bold);
   --pgn-display-weight-1: var(--pgn-font-weight-bold);
-  --pgn-box-shadow-lg: 0 .25rem .5rem rgba(var(--pgn-color-black), .3);
-  --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(var(--pgn-color-black), .2);
-  --pgn-box-shadow-base: 0 .125rem .25rem rgba(var(--pgn-color-black), .3);
+  --pgn-list-group-action-active-bg: var(--pgn-color-gray-200);
+  --pgn-list-group-action-color-base: var(--pgn-color-gray-700);
+  --pgn-list-group-disabled-color: var(--pgn-color-gray-600);
+  --pgn-list-group-border-radius: var(--pgn-border-radius-base);
+  --pgn-list-group-border-width: var(--pgn-border-width);
+  --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125);
+  --pgn-list-group-bg-hover: var(--pgn-color-gray-100);
+  --pgn-list-group-bg-base: var(--pgn-color-white);
+  --pgn-core-dt-font-weight: var(--pgn-font-weight-bold);
+  --pgn-core-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25);
+  --pgn-core-blockquote-small-font-size: var(--pgn-font-size-small-base);
   --pgn-core-input-btn-border-width: var(--pgn-border-width);
   --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color);
   --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg);
@@ -670,7 +698,7 @@
   --pgn-modal-content-border-radius: var(--pgn-border-radius-lg);
   --pgn-modal-content-bg: var(--pgn-color-white);
   --pgn-modal-title-line-height: var(--pgn-line-height-base);
-  --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-y) var(--pgn-modal-footer-padding-x);
+  --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y);
   --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base);
   --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base);
   --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200);
@@ -729,6 +757,7 @@
   --pgn-dropdown-bg: var(--pgn-color-white);
   --pgn-dropdown-font-size: var(--pgn-font-size-base);
   --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item);
+  --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm);
   --pgn-data-table-border: 1px solid var(--pgn-color-gray-200);
   --pgn-data-table-background-color: var(--pgn-color-white);
   --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x);
@@ -755,10 +784,9 @@
   --pgn-card-margin-deck: var(--pgn-card-margin-group);
   --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max);
   --pgn-card-bg: var(--pgn-color-white);
-  --pgn-card-border-color-base: rgba(var(--pgn-color-black), .125);
   --pgn-card-border-radius-base: var(--pgn-border-radius-base);
   --pgn-card-border-width: var(--pgn-border-width);
-  --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1);
+  --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover);
   --pgn-btn-tertiary-inverse-color: var(--pgn-color-white);
   --pgn-btn-tertiary-color: var(--pgn-color-gray-700);
   --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075);
@@ -772,12 +800,14 @@
   --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm);
   --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base);
   --pgn-btn-font-family: var(--pgn-core-input-btn-font-family);
+  --pgn-btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x);
   --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x);
   --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x);
-  --pgn-btn-padding-y-sm-x: var(--pgn-core-input-btn-padding-sm-x);
-  --pgn-btn-padding-y-sm-y: var(--pgn-core-input-btn-padding-sm-y);
+  --pgn-btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y);
   --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y);
   --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y);
+  --pgn-breadcrumb-inverse-color: var(--pgn-color-white);
+  --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700);
   --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600);
   --pgn-breadcrumb-bg: var(--pgn-color-gray-200);
   --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base);
@@ -803,16 +833,22 @@
   --pgn-color-gray-500: var(--pgn-color-gray-base);
   --pgn-body-color: var(--pgn-color-gray-700);
   --pgn-body-bg: var(--pgn-color-white);
+  --pgn-border-hr-margin-y: var(--pgn-core-spacer);
+  --pgn-border-hr-width: var(--pgn-border-width);
+  --pgn-border-hr-color: rgba(var(--pgn-color-black), .1);
   --pgn-border-color: var(--pgn-color-gray-200);
   --pgn-link-brand-inline-color: var(--pgn-color-brand-500);
   --pgn-link-brand-color: var(--pgn-color-brand-500);
   --pgn-link-muted-inline-color: var(--pgn-color-primary-500);
   --pgn-link-muted-color: var(--pgn-color-primary-500);
+  --pgn-list-group-action-active-color: var(--pgn-body-color);
+  --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base);
+  --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base);
+  --pgn-list-group-active-color-base: var(--pgn-component-active-color);
   --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base);
   --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base);
   --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base);
   --pgn-table-border-color: var(--pgn-border-color);
-  --pgn-table-color-border: var(--pgn-border-color);
   --pgn-table-color-base: var(--pgn-body-color);
   --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2);
   --pgn-search-field-border-color-base: var(--pgn-color-gray-500);
@@ -895,8 +931,6 @@
   --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width));
   --pgn-dropdown-color-header: var(--pgn-color-gray-500);
   --pgn-dropdown-color-base: var(--pgn-body-color);
-  --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm);
-  --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover);
   --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500);
   --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500);
   --pgn-btn-disabled-link-color: var(--pgn-color-gray-500);
@@ -914,9 +948,9 @@
   --pgn-color-secondary-500: var(--pgn-color-secondary-base);
   --pgn-link-inline-color: var(--pgn-color-info-500);
   --pgn-link-color: var(--pgn-color-info-500);
+  --pgn-list-group-active-bg: var(--pgn-component-active-bg);
   --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg);
   --pgn-table-caption-color: var(--pgn-text-muted);
-  --pgn-table-color-caption: var(--pgn-text-muted);
   --pgn-table-color-hover: var(--pgn-table-color-base);
   --pgn-popover-danger-icon-color: var(--pgn-color-warning-500);
   --pgn-popover-warning-icon-color: var(--pgn-color-warning-500);
@@ -952,6 +986,7 @@
   --pgn-form-input-focus-color-border: var(--pgn-component-active-bg);
   --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2);
   --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500);
+  --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg);
   --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active);
   --pgn-pagination-color-base: var(--pgn-link-color);
   --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid);

src/ActionRow/_ActionRow.scss

@@ -11,7 +11,7 @@
   }
 
   & > * + * {
-    margin-inline-start: $action-row-gap-x;
+    margin-inline-start: var(--pgn-action-row-gap-x);
   }
 }
 
@@ -27,7 +27,7 @@
   }
 
   & > * + * {
-    margin-bottom: $action-row-gap-y;
+    margin-bottom: var(--pgn-action-row-gap-y);
   }
 }
 

src/Alert/Alert.scss

@@ -12,11 +12,11 @@
 
 .alert {
   position: relative;
-  padding: $alert-padding-y $alert-padding-x;
-  margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid transparent;
+  padding: var(--pgn-alert-padding-y) var(--pgn-alert-padding-x);
+  margin-bottom: var(--pgn-alert-margin-bottom);
+  border: var(--pgn-alert-border-width) solid transparent;
 
-  @include border-radius($alert-border-radius);
+  @include border-radius(var(--pgn-alert-border-radius));
   @include pgn-box-shadow(1, "down");
 
   .alert-message-content > :last-child {
@@ -25,7 +25,7 @@
 
   .alert-icon {
     float: left;
-    margin-inline-end: $alert-icon-space;
+    margin-inline-end: var(--pgn-alert-icon-space);
     width: 1.5rem;
     height: 1.5rem;
     flex-shrink: 0;
@@ -34,17 +34,17 @@
 
 // Headings for larger alerts
 .alert-heading {
-  // Specified to prevent conflicts of changing $headings-color
-  color: $alert-title-color;
+  // Specified to prevent conflicts of changing var(--pgn-headings-color)
+  color: var(--pgn-alert-color-title);
   display: flex;
 }
 
 // added to align content and icon
 .alert-content {
   display: flex;
-  font-size: $alert-font-size;
-  line-height: $alert-line-height;
-  color: $alert-content-color;
+  font-size: var(--pgn-alert-font-size);
+  line-height: var(--pgn-alert-line-height);
+  color: var(--pgn-alert-color-content);
   text-align: start;
 
   div {
@@ -54,7 +54,7 @@
 
 // Provide class for links that match alerts
 .alert-link {
-  font-weight: $alert-link-font-weight;
+  font-weight: var(--pgn-alert-font-weight-link);
   text-decoration: underline;
 
   &:hover {
@@ -66,16 +66,16 @@
 //
 // Expand the right padding and account for the close button's positioning.
 
-// Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency
+// Baking in $close-font-size: var(--pgn-font-size-base) * 1.5 !default; to avoid any dependency
 .alert-dismissible {
-  padding-right: ($font-size-base * 1.5) + $alert-padding-x * 2;
+  padding-right: calc((var(--pgn-font-size-base) * 1.5) + var(--pgn-alert-padding-x) * 2);
 
   // Adjust close link position
   .close {
     position: absolute;
     top: 0;
     right: 0;
-    padding: $alert-padding-y $alert-padding-x;
+    padding: var(--pgn-alert-padding-y) var(--pgn-alert-padding-x);
     color: inherit;
   }
 }

src/Alert/_variables.scss

@@ -5,8 +5,8 @@
 $alert-padding-y:                   1.5rem !default;
 $alert-padding-x:                   1.5rem !default;
 $alert-margin-bottom:               1rem !default;
-$alert-border-radius:               $border-radius !default;
-$alert-link-font-weight:            $font-weight-normal !default;
+$alert-border-radius:               var(--pgn-border-radius-base) !default;
+$alert-link-font-weight:            var(--pgn-font-weight-normal) !default;
 $alert-border-width:                0 !default;
 $alert-title-color:                 #000000 !default;
 $alert-box-shadow:                  0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;
@@ -19,6 +19,6 @@ $alert-icon-space:                  .8rem !default;
 
 $alert-font-size:                   .875rem !default;
 $alert-line-height:                 1.5rem !default;
-$alert-content-color:               $gray-700 !default;
+$alert-content-color:               var(--pgn-color-gray-700) !default;
 
 $alert-actions-gap:                 map-get($spacers, 3);