feat: removed SCSS variable files in components

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 Wed, 01 Mar 2023 00:27:20 GMT
+ * Generated on Wed, 15 Mar 2023 01:15:01 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 Wed, 01 Mar 2023 00:27:20 GMT
+ * Generated on Wed, 15 Mar 2023 01:15:01 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 Wed, 01 Mar 2023 00:27:20 GMT
+ * Generated on Wed, 15 Mar 2023 01:15:01 GMT
  */
 
 :root {
@@ -31,6 +31,7 @@
   --pgn-color-progress-bar-bg: #00000000;
   --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
   --pgn-color-popover-border: #00000033;
+  --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066;
   --pgn-color-menu-border-hover: #00000000;
   --pgn-color-menu-border-active: #00000000;
   --pgn-color-menu-border-base: #00000000;
@@ -184,6 +185,8 @@
   --pgn-other-chip-opacity-disabled: .3;
   --pgn-other-btn-disabled-opacity: .65;
   --pgn-other-form-feedback-tooltip-opacity: .9;
+  --pgn-other-form-control-custom-file-content: Browse;
+  --pgn-other-form-control-custom-file-lang: en;
   --pgn-other-form-control-range-track-cursor: pointer;
   --pgn-other-form-control-cursor: auto;
   --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15);

src/ActionRow/_ActionRow.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__action-row {
   display: flex;
   flex-grow: 1;
@@ -11,7 +9,7 @@
   }
 
   & > * + * {
-    margin-inline-start: $action-row-gap-x;
+    margin-inline-start: var(--pgn-spacing-action-row-gap-x);
   }
 }
 
@@ -27,7 +25,7 @@
   }
 
   & > * + * {
-    margin-bottom: $action-row-gap-y;
+    margin-bottom: var(--pgn-spacing-action-row-gap-y);
   }
 }
 

src/Alert/Alert.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 //
 // Override Bootstrap's alert definition.
 // We do this to get more control over colors
@@ -12,13 +10,13 @@
 
 .alert {
   position: relative;
-  padding: $alert-padding-y $alert-padding-x;
-  margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid var(--pgn-alert-border-color, transparent);
+  padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
+  margin-bottom: var(--pgn-spacing-alert-margin-bottom);
+  border: var(--pgn-size-alert-border-width) solid var(--pgn-alert-border-color, transparent);
   color: inherit;
   background-color: var(--pgn-alert-bg, transparent);
 
-  @include border-radius($alert-border-radius);
+  @include border-radius(var(--pgn-size-alert-border-radius));
   @include pgn-box-shadow(1, "down");
 
   .alert-message-content > :last-child {
@@ -28,7 +26,7 @@
   .alert-icon {
     color: var(--pgn-alert-icon-color, inherit);
     float: left;
-    margin-inline-end: $alert-icon-space;
+    margin-inline-end: var(--pgn-spacing-alert-icon-space);
     width: 1.5rem;
     height: 1.5rem;
     flex-shrink: 0;
@@ -38,16 +36,16 @@
 // Headings for larger alerts
 .alert-heading {
   // Specified to prevent conflicts of changing $headings-color
-  color: $alert-title-color;
+  color: var(--pgn-color-alert-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-typography-alert-font-size);
+  line-height: var(--pgn-typography-alert-line-height);
+  color: var(--pgn-color-alert-content);
   text-align: start;
 
   div {
@@ -57,7 +55,7 @@
 
 // Provide class for links that match alerts
 .alert-link {
-  font-weight: $alert-link-font-weight;
+  font-weight: var(--pgn-typography-alert-font-weight-link);
   text-decoration: underline;
 
   &:hover {
@@ -71,14 +69,14 @@
 
 // Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency
 .alert-dismissible {
-  padding-right: calc((#{$font-size-base} * 1.5) + (#{$alert-padding-x} * 2));
+  padding-right: calc((#{$font-size-base} * 1.5) + (#{var(--pgn-spacing-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-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
     color: inherit;
   }
 }
@@ -88,38 +86,38 @@
   align-items: center;
 
   .pgn__alert-actions {
-    margin-inline-start: $alert-actions-gap;
+    margin-inline-start: var(--pgn-spacing-alert-actions-gap);
   }
 }
 
 .pgn__alert-message-wrapper-stacked {
   .pgn__alert-actions {
-    margin-top: $alert-actions-gap;
+    margin-top: var(--pgn-spacing-alert-actions-gap);
   }
 }
 
 // Alternate styles
 
 .alert-success {
-  --pgn-alert-bg: #{$alert-success-bg};
-  --pgn-alert-border-color: #{$alert-success-border-color};
-  --pgn-alert-icon-color: #{$alert-success-icon-color};
+  --pgn-alert-bg: #{var(--pgn-color-alert-bg-success)};
+  --pgn-alert-border-color: #{var(--pgn-color-alert-border-success)};
+  --pgn-alert-icon-color: #{var(--pgn-color-alert-icon-success)};
 }
 
 .alert-info {
-  --pgn-alert-bg: #{$alert-info-bg};
-  --pgn-alert-border-color: #{$alert-info-border-color};
-  --pgn-alert-icon-color: #{$alert-info-icon-color};
+  --pgn-alert-bg: #{var(--pgn-color-alert-bg-info)};
+  --pgn-alert-border-color: #{var(--pgn-color-alert-border-info)};
+  --pgn-alert-icon-color: #{var(--pgn-color-alert-icon-info)};
 }
 
 .alert-danger {
-  --pgn-alert-bg: #{$alert-danger-bg};
-  --pgn-alert-border-color: #{$alert-danger-border-color};
-  --pgn-alert-icon-color: #{$alert-danger-icon-color};
+  --pgn-alert-bg: #{var(--pgn-color-alert-bg-danger)};
+  --pgn-alert-border-color: #{var(--pgn-color-alert-border-danger)};
+  --pgn-alert-icon-color: #{var(--pgn-color-alert-icon-danger)};
 }
 
 .alert-warning {
-  --pgn-alert-bg: #{$alert-warning-bg};
-  --pgn-alert-border-color: #{$alert-warning-border-color};
-  --pgn-alert-icon-color: #{$alert-warning-icon-color};
+  --pgn-alert-bg: #{var(--pgn-color-alert-bg-warning)};
+  --pgn-alert-border-color: #{var(--pgn-color-alert-border-warning)};
+  --pgn-alert-icon-color: #{var(--pgn-color-alert-icon-warning)};
 }