feat: update replace-scss-vars script to handle interpolation express…

…ions

scss/core/css/custom-media-breakpoints.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 17 Mar 2023 15:19:16 GMT
+ * Generated on Mon, 20 Mar 2023 19:27:21 GMT
  */
 
 @custom-media --pgn-size-breakpoint-xs (min-width: 0);

scss/core/css/utility-classes.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 17 Mar 2023 15:19:16 GMT
+ * Generated on Mon, 20 Mar 2023 19:27:21 GMT
  */
 
 .bg-dark {

scss/core/css/variables.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 17 Mar 2023 15:19:16 GMT
+ * Generated on Mon, 20 Mar 2023 19:27:21 GMT
  */
 
 :root {
@@ -42,8 +42,6 @@
   --pgn-color-form-control-select-bg-size: #000000FF;
   --pgn-color-form-control-label-base: inherit;
   --pgn-color-code-base: #E83E8CFF;
-  --pgn-color-carousel-control-opacity-hover: #000000FF;
-  --pgn-color-carousel-control-opacity-base: #000000FF;
   --pgn-color-card-base: inherit;
   --pgn-color-btn-disabled-border-inverse-warning: #00000000;
   --pgn-color-btn-disabled-border-inverse-outline-success: inherit;
@@ -184,6 +182,8 @@
   --pgn-other-modal-opacity: .5;
   --pgn-other-link-emphasized-hover-darken-percentage: 15%;
   --pgn-other-chip-opacity-disabled: .3;
+  --pgn-other-carousel-control-opacity-hover: .9;
+  --pgn-other-carousel-control-opacity-base: .5;
   --pgn-other-btn-disabled-opacity: .65;
   --pgn-other-form-feedback-tooltip-opacity: .9;
   --pgn-other-form-control-custom-file-content: Browse;
@@ -332,6 +332,7 @@
   --pgn-typography-toast-font-size: .875rem;
   --pgn-typography-pagination-line-height: 1.5rem;
   --pgn-typography-pagination-font-size-sm: .875rem;
+  --pgn-typography-nav-link-text-decoration: none;
   --pgn-typography-nav-link-font-weight: 500;
   --pgn-typography-image-figure-caption-font-size: 90%;
   --pgn-typography-link-decoration-brand-inline-hover: underline;
@@ -354,6 +355,7 @@
   --pgn-typography-input-btn-font-family: inherit;
   --pgn-typography-headings-line-height: 1.25;
   --pgn-typography-headings-font-family: inherit;
+  --pgn-typography-dropdown-item-text-decoration: none;
   --pgn-typography-code-font-size: 87.5%;
   --pgn-typography-breadcrumb-font-size: inherit;
   --pgn-typography-badge-font-size: 75%;
@@ -430,8 +432,8 @@
   --pgn-spacing-dropzone-border-base: 1px;
   --pgn-spacing-dropzone-padding: 1.5rem;
   --pgn-spacing-dropdown-close-container-top: .625rem;
-  --pgn-spacing-dropdown-padding-y-item: .5rem;
-  --pgn-spacing-dropdown-padding-y-base: .25rem;
+  --pgn-spacing-dropdown-padding-y-item: .25rem;
+  --pgn-spacing-dropdown-padding-y-base: .5rem;
   --pgn-spacing-dropdown-padding-x-item: 1rem;
   --pgn-spacing-dropdown-padding-x-base: 0;
   --pgn-spacing-dropdown-spacer: .125rem;
@@ -1044,7 +1046,7 @@
   --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
   --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
-  --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) + .1em);
+  --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
   --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-list-group-border-width: var(--pgn-size-border-width);
   --pgn-size-input-btn-border-width: var(--pgn-size-border-width);

src/Alert/Alert.scss

@@ -35,7 +35,7 @@
 
 // Headings for larger alerts
 .alert-heading {
-  // Specified to prevent conflicts of changing $headings-color
+  // Specified to prevent conflicts of changing var(--pgn-color-headings-base)
   color: var(--pgn-color-alert-title);
   display: flex;
 }
@@ -67,9 +67,9 @@
 //
 // 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-typography-font-size-base) * 1.5 !default; to avoid any dependency
 .alert-dismissible {
-  padding-right: calc((#{$font-size-base} * 1.5) + (var(--pgn-spacing-alert-padding-x) * 2));
+  padding-right: calc((var(--pgn-typography-font-size-base) * 1.5) + (var(--pgn-spacing-alert-padding-x) * 2));
 
   // Adjust close link position
   .close {

src/Bubble/Bubble.scss

@@ -6,13 +6,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: $font-size-xs;
+  font-size: var(--pgn-typography-font-size-xs);
   color: var(--pgn-bubble-color, inherit);
   background-color: var(--pgn-bubble-bg, transparent);
 
   &:disabled,
   &.disabled {
-    background: $gray-500;
+    background: var(--pgn-color-gray-500);
   }
 
   &.expandable {

src/Button/Button.scss

@@ -11,7 +11,7 @@
   vertical-align: middle;
   user-select: none;
   border: var(--pgn-size-btn-border-width) solid var(--pgn-btn-border-color, transparent);
-  color: var(--pgn-btn-color, #{$body-color});
+  color: var(--pgn-btn-color, var(--pgn-color-body-base));
   background-color: var(--pgn-btn-bg, transparent);
   transition: var(--pgn-transition-btn);
 
@@ -31,7 +31,7 @@
       box-shadow: none;
       background: var(--pgn-btn-focus-bg, transparent);
       border-color: var(--pgn-btn-focus-border-color, transparent);
-      color: var(--pgn-btn-focus-color, #{$body-color});
+      color: var(--pgn-btn-focus-color, var(--pgn-color-body-base));
 
       &::before {
         content: "";
@@ -40,7 +40,7 @@
         right: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
         bottom: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
         left: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
-        border: solid var(--pgn-size-btn-focus-width) var(--pgn-btn-focus-outline-color, #{$body-color});
+        border: solid var(--pgn-size-btn-focus-width) var(--pgn-btn-focus-outline-color, var(--pgn-color-body-base));
         border-radius: var(--pgn-size-btn-focus-border-radius);
       }
 
@@ -68,7 +68,7 @@
     }
 
     &:hover {
-      color: var(--pgn-btn-hover-color, #{$body-color});
+      color: var(--pgn-btn-hover-color, var(--pgn-color-body-base));
       background-color: var(--pgn-btn-hover-bg, transparent);
       border-color: var(--pgn-btn-hover-border-color, transparent);
       text-decoration: none;
@@ -126,18 +126,18 @@ fieldset:disabled a.btn {
 
 // Make a button look and behave like a link
 .btn-link {
-  font-weight: $font-weight-normal;
-  color: $link-color;
-  text-decoration: $link-decoration;
+  font-weight: var(--pgn-typography-font-weight-normal);
+  color: var(--pgn-color-link-base);
+  text-decoration: var(--pgn-typography-link-decoration-base);
 
   &:hover {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
+    color: var(--pgn-color-link-hover);
+    text-decoration: var(--pgn-typography-link-decoration-hover);
   }
 
   &:focus,
   &.focus {
-    text-decoration: $link-hover-decoration;
+    text-decoration: var(--pgn-typography-link-decoration-hover);
     box-shadow: none;
   }
 
@@ -187,7 +187,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-inline {
-  line-height: calc(#{$line-height-base}em - 2 * var(--pgn-size-btn-border-width));
+  line-height: calc(#{var(--pgn-typography-line-height-base)}em - 2 * var(--pgn-size-btn-border-width));
   font-size: inherit;
   vertical-align: bottom;
   padding: 0 .25em;

src/Button/_mixins.scss

@@ -2,13 +2,13 @@
 // No changes made. We do this to keep all button related mixins together,
 //
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $button-border-radius) {
   padding: $padding-y $padding-x;
 
   @include font-size($font-size);
 
   line-height: $line-height;
 
   // Manually declare to provide an override to the browser default
-  @include border-radius($border-radius, 0);
+  @include border-radius($button-border-radius, 0);
 }

src/Card/Card.scss

@@ -6,10 +6,10 @@
   border: 0;
 
   %dark-variant-content {
-    color: $white;
+    color: var(--pgn-color-white);
 
     a {
-      color: $white;
+      color: var(--pgn-color-white);
     }
   }
 
@@ -51,7 +51,7 @@
 }
 
 a .pgn__card {
-  color: $gray-700;
+  color: var(--pgn-color-gray-700);
   display: inline-block;
 }
 
@@ -98,7 +98,7 @@ a .pgn__card {
   }
 
   .pgn__card-carousel-subtitle {
-    font-size: $font-size-sm;
+    font-size: var(--pgn-typography-font-size-sm);
     margin-bottom: map-get($spacers, 2);
   }
 
@@ -125,8 +125,8 @@ a .pgn__card {
   }
 
   %header-title {
-    color: $black;
-    font-weight: $font-weight-bold;
+    color: var(--pgn-color-black);
+    font-weight: var(--pgn-typography-font-weight-bold);
     text-align: start;
   }
 
@@ -137,15 +137,15 @@ a .pgn__card {
   }
 
   .pgn__card-header-title-sm {
-    font-size: $h4-font-size;
+    font-size: var(--pgn-typography-font-size-h4);
   }
 
   .pgn__card-header-title-md {
-    font-size: $h3-font-size;
+    font-size: var(--pgn-typography-font-size-h3);
   }
 
   %header-subtitle {
-    color: $gray-700;
+    color: var(--pgn-color-gray-700);
     margin-top: map_get($spacers, 1);
   }
 
@@ -156,16 +156,16 @@ a .pgn__card {
   }
 
   .pgn__card-header-subtitle-sm {
-    font-size: $h5-font-size;
+    font-size: var(--pgn-typography-font-size-h5);
   }
 
   .pgn__card-header-subtitle-md {
-    font-size: $h4-font-size;
+    font-size: var(--pgn-typography-font-size-h4);
   }
 
   .pgn__card-header-actions {
-    margin-top: $spacer;
-    margin-inline-start: $spacer;
+    margin-top: var(--pgn-spacing-spacer-base);
+    margin-inline-start: var(--pgn-spacing-spacer-base);
     flex-shrink: 0;
   }
 
@@ -189,13 +189,13 @@ a .pgn__card {
   text-align: start;
 
   &.is-muted {
-    background-color: $light-200;
+    background-color: var(--pgn-color-light-200);
   }
 
   .pgn__card-section-title {
-    color: $black;
-    font-weight: $font-weight-bold;
-    font-size: $h5-font-size;
+    color: var(--pgn-color-black);
+    font-weight: var(--pgn-typography-font-weight-bold);
+    font-size: var(--pgn-typography-font-size-h5);
     margin-bottom: var(--pgn-spacing-card-spacer-y);
   }
 
@@ -269,7 +269,7 @@ a .pgn__card {
 }
 
 .pgn__card-footer-text {
-  color: $gray-700;
+  color: var(--pgn-color-gray-700);
   order: 1;
   font-size: var(--pgn-typography-footer-text-font-size);
 
@@ -354,9 +354,9 @@ a .pgn__card {
   width: var(--pgn-size-card-logo-width);
   height: var(--pgn-size-card-logo-height);
   border-radius: var(--pgn-size-card-border-radius-logo);
-  box-shadow: $level-1-box-shadow;
+  box-shadow: var(--pgn-elevation-box-shadow-level-1);
   padding: map_get($spacers, 2);
-  background-color: $white;
+  background-color: var(--pgn-color-white);
   display: none;
 
   &.show {
@@ -412,7 +412,7 @@ a .pgn__card {
   box-shadow: none;
   margin-bottom: 0;
   display: flex;
-  font-size: $font-size-sm;
+  font-size: var(--pgn-typography-font-size-sm);
   line-height: 1.5rem;
   text-align: start;
   position: relative;
@@ -427,10 +427,10 @@ a .pgn__card {
   }
 
   .pgn__card-status__heading {
-    font-size: $h4-font-size;
-    color: $black;
+    font-size: var(--pgn-typography-font-size-h4);
+    color: var(--pgn-color-black);
     display: flex;
-    font-weight: $font-weight-bold;
+    font-weight: var(--pgn-typography-font-weight-bold);
     line-height: 1.5rem;
     margin-bottom: .5rem;
   }
@@ -456,13 +456,13 @@ a .pgn__card {
   }
 
   &.pgn__card-status__primary {
-    color: $white;
-    background-color: $primary-500;
-    border-color: $primary-500;
-    box-shadow: 0 0 0 1px $primary-500;
+    color: var(--pgn-color-white);
+    background-color: var(--pgn-color-primary-500);
+    border-color: var(--pgn-color-primary-500);
+    box-shadow: 0 0 0 1px var(--pgn-color-primary-500);
 
     .pgn__icon {
-      color: $white;
+      color: var(--pgn-color-white);
     }
   }
 }