refactor: created an abstracted CSS variables

.stylelintrc.json

@@ -34,6 +34,7 @@
     "color-function-notation": "legacy",
     "value-keyword-case": ["lower", {
       "ignoreProperties": ["/font-family/"]
-    }]
+    }],
+    "custom-property-empty-line-before": null
   }
 }

lib/build-tokens.js

@@ -154,13 +154,13 @@ async function buildTokensCommand(commandArgs) {
   ];
 
   // Build tokens for each configuration
-  await Promise.all(configs.map(async ({ config, isThemeVariant, themeVariant }) => {
+  await Promise.all(configs.map(async ({ config, themeVariant }) => {
     const sd = new StyleDictionary(config);
     await sd.cleanAllPlatforms();
     await sd.buildAllPlatforms();
     createIndexCssFile({
       buildDir,
-      isThemeVariant: !!isThemeVariant,
+      isThemeVariant: !!themeVariant,
       themeVariant,
     });
   }));

src/Annotation/index.scss

@@ -1,10 +1,7 @@
 @import "mixins";
 
-.pgn__annotation {
-  padding: var(--pgn-spacing-annotation-padding);
-  border-radius: var(--pgn-size-annotation-border-radius);
-  max-width: var(--pgn-size-annotation-max-width);
-  filter:
+:root {
+  --pgn-elevation-annotation-box-shadow:
     drop-shadow(
       var(--pgn-elevation-annotation-box-shadow-1-offset-x)
       var(--pgn-elevation-annotation-box-shadow-1-offset-y)
@@ -17,6 +14,13 @@
       var(--pgn-elevation-annotation-box-shadow-2-blur)
       var(--pgn-elevation-annotation-box-shadow-2-color)
     );
+}
+
+.pgn__annotation {
+  padding: var(--pgn-spacing-annotation-padding);
+  border-radius: var(--pgn-size-annotation-border-radius);
+  max-width: var(--pgn-size-annotation-max-width);
+  filter: var(--pgn-elevation-annotation-box-shadow);
   word-wrap: break-word;
   position: relative;
   display: inline-block;

src/Card/index.scss

@@ -353,15 +353,7 @@ 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:
-        var(--pgn-elevation-box-shadow-level-1-1-offset-y)
-        var(--pgn-elevation-box-shadow-level-1-1-offset-x)
-        var(--pgn-elevation-box-shadow-level-1-1-blur)
-        var(--pgn-elevation-box-shadow-level-1-1-color),
-        var(--pgn-elevation-box-shadow-level-1-2-offset-y)
-        var(--pgn-elevation-box-shadow-level-1-2-offset-x)
-        var(--pgn-elevation-box-shadow-level-1-2-blur)
-        var(--pgn-elevation-box-shadow-level-1-2-color);
+      box-shadow: var(--pgn-elevation-box-shadow-level-1);
       padding: map_get($spacers, 2);
       background-color: var(--pgn-color-white);
       display: none;

src/Carousel/index.scss

@@ -1,3 +1,11 @@
+:root {
+  --pgn-transition-carousel-base:
+    var(--pgn-transition-carousel-base-property)
+    var(--pgn-transition-carousel-base-duration)
+    var(--pgn-transition-carousel-base-timing-function)
+    var(--pgn-transition-carousel-base-delay);
+}
+
 .carousel {
   position: relative;
 }
@@ -21,11 +29,7 @@
   width: 100%;
   margin-right: -100%;
   backface-visibility: hidden;
-  transition:
-    var(--pgn-transition-carousel-base-property)
-    var(--pgn-transition-carousel-base-duration)
-    var(--pgn-transition-carousel-base-timing-function)
-    var(--pgn-transition-carousel-base-delay);
+  transition: var(--pgn-transition-carousel-base);
 }
 
 .carousel-item.active,
@@ -62,11 +66,7 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-    transition:
-      opacity 0s var(--pgn-transition-carousel-base-property)
-      var(--pgn-transition-carousel-base-duration)
-      var(--pgn-transition-carousel-base-timing-function)
-      var(--pgn-transition-carousel-base-delay);
+    transition: opacity 0s var(--pgn-transition-carousel-base);
   }
 }
 

src/CloseButton/index.scss

@@ -1,13 +1,17 @@
+:root {
+  --pgn-elevation-close-button-text-shadow:
+    var(--pgn-elevation-close-button-text-shadow-offset-x)
+    var(--pgn-elevation-close-button-text-shadow-offset-y)
+    var(--pgn-elevation-close-button-text-shadow-blur)
+    var(--pgn-elevation-close-button-text-shadow-color);
+}
+
 .close {
   float: right;
   font-weight: var(--pgn-typography-close-button-font-weight);
   line-height: 1;
   color: var(--pgn-color-close-button);
-  text-shadow:
-    var(--pgn-elevation-close-button-text-shadow-offset-x)
-    var(--pgn-elevation-close-button-text-shadow-offset-y)
-    var(--pgn-elevation-close-button-text-shadow-blur)
-    var(--pgn-elevation-close-button-text-shadow-color);
+  text-shadow: var(--pgn-elevation-close-button-text-shadow);
   opacity: .5;
 
   @include font-size(var(--pgn-typography-close-button-font-size));

src/DataTable/index.scss

@@ -1,12 +1,16 @@
-.pgn__data-table-wrapper {
-  font-size: var(--pgn-typography-font-size-sm);
-  border-radius: var(--pgn-size-border-radius-base);
-  background-color: var(--pgn-color-data-table-bg-base);
-  box-shadow:
+:root {
+  --pgn-elevation-data-table-box-shadow:
     var(--pgn-elevation-data-table-box-shadow-offset-x)
     var(--pgn-elevation-data-table-box-shadow-offset-y)
     var(--pgn-elevation-data-table-box-shadow-blur)
     var(--pgn-elevation-data-table-box-shadow-color);
+}
+
+.pgn__data-table-wrapper {
+  font-size: var(--pgn-typography-font-size-sm);
+  border-radius: var(--pgn-size-border-radius-base);
+  background-color: var(--pgn-color-data-table-bg-base);
+  box-shadow: var(--pgn-elevation-data-table-box-shadow);
 
   &.hide-shadow {
     box-shadow: none;
@@ -97,12 +101,7 @@
   .pgn__data-table-layout-sidebar {
     background-color: var(--pgn-color-data-table-bg-base);
     border-radius: var(--pgn-size-border-radius-base);
-    box-shadow:
-      var(--pgn-elevation-data-table-box-shadow-offset-x)
-      var(--pgn-elevation-data-table-box-shadow-offset-y)
-      var(--pgn-elevation-data-table-box-shadow-blur)
-      var(--pgn-elevation-data-table-box-shadow-color);
-    padding: var(--pgn-spacing-data-table-padding-small);
+    box-shadow: var(--pgn-elevation-data-table-box-shadow);
     margin-right: var(--pgn-spacing-spacer-4);
     flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width);
   }
@@ -294,15 +293,7 @@
 .pgn__data-table__overflow-actions-menu {
   background: var(--pgn-color-white);
   padding: var(--pgn-spacing-spacer-2);
-  box-shadow:
-    var(--pgn-elevation-box-shadow-level-1-1-offset-y)
-    var(--pgn-elevation-box-shadow-level-1-1-offset-x)
-    var(--pgn-elevation-box-shadow-level-1-1-blur)
-    var(--pgn-elevation-box-shadow-level-1-1-color),
-    var(--pgn-elevation-box-shadow-level-1-2-offset-y)
-    var(--pgn-elevation-box-shadow-level-1-2-offset-x)
-    var(--pgn-elevation-box-shadow-level-1-2-blur)
-    var(--pgn-elevation-box-shadow-level-1-2-color);
+  box-shadow: var(--pgn-elevation-box-shadow-level-1);
   border-radius: 4px;
 }
 

src/Dropzone/index.scss

@@ -1,3 +1,37 @@
+:root {
+  --pgn-elevation-dropzone-hover:
+    var(--pgn-elevation-dropzone-hover-inset)
+    var(--pgn-elevation-dropzone-hover-offset-x)
+    var(--pgn-elevation-dropzone-hover-offset-y)
+    var(--pgn-elevation-dropzone-hover-blur)
+    var(--pgn-elevation-dropzone-hover-spread)
+    var(--pgn-elevation-dropzone-hover-color);
+
+  --pgn-elevation-dropzone-focus:
+    var(--pgn-elevation-dropzone-focus-inset)
+    var(--pgn-elevation-dropzone-focus-offset-x)
+    var(--pgn-elevation-dropzone-focus-offset-y)
+    var(--pgn-elevation-dropzone-focus-blur)
+    var(--pgn-elevation-dropzone-focus-spread)
+    var(--pgn-elevation-dropzone-focus-color);
+
+  --pgn-elevation-dropzone-error:
+    var(--pgn-elevation-dropzone-error-inset)
+    var(--pgn-elevation-dropzone-error-offset-x)
+    var(--pgn-elevation-dropzone-error-offset-y)
+    var(--pgn-elevation-dropzone-error-blur)
+    var(--pgn-elevation-dropzone-error-spread)
+    var(--pgn-elevation-dropzone-error-color);
+
+  --pgn-elevation-dropzone-active:
+    var(--pgn-elevation-dropzone-active-inset)
+    var(--pgn-elevation-dropzone-active-offset-x)
+    var(--pgn-elevation-dropzone-active-offset-y)
+    var(--pgn-elevation-dropzone-active-blur)
+    var(--pgn-elevation-dropzone-active-spread)
+    var(--pgn-elevation-dropzone-active-color);
+}
+
 .pgn__dropzone {
   display: flex;
   justify-content: center;
@@ -16,43 +50,19 @@
   }
 
   &:hover {
-    box-shadow:
-      var(--pgn-elevation-dropzone-hover-inset)
-      var(--pgn-elevation-dropzone-hover-offset-x)
-      var(--pgn-elevation-dropzone-hover-offset-y)
-      var(--pgn-elevation-dropzone-hover-blur)
-      var(--pgn-elevation-dropzone-hover-spread)
-      var(--pgn-elevation-dropzone-hover-color);
+    box-shadow: var(--pgn-elevation-dropzone-hover);
   }
 
   &:focus {
-    box-shadow:
-      var(--pgn-elevation-dropzone-focus-inset)
-      var(--pgn-elevation-dropzone-focus-offset-x)
-      var(--pgn-elevation-dropzone-focus-offset-y)
-      var(--pgn-elevation-dropzone-focus-blur)
-      var(--pgn-elevation-dropzone-focus-spread)
-      var(--pgn-elevation-dropzone-focus-color);
+    box-shadow: var(--pgn-elevation-dropzone-focus);
   }
 
   &.pgn__dropzone-validation-error {
-    box-shadow:
-      var(--pgn-elevation-dropzone-error-inset)
-      var(--pgn-elevation-dropzone-error-offset-x)
-      var(--pgn-elevation-dropzone-error-offset-y)
-      var(--pgn-elevation-dropzone-error-blur)
-      var(--pgn-elevation-dropzone-error-spread)
-      var(--pgn-elevation-dropzone-error-color);
+    box-shadow: var(--pgn-elevation-dropzone-error);
   }
 
   &.pgn__dropzone-active {
-    box-shadow:
-      var(--pgn-elevation-dropzone-active-inset)
-      var(--pgn-elevation-dropzone-active-offset-x)
-      var(--pgn-elevation-dropzone-active-offset-y)
-      var(--pgn-elevation-dropzone-active-blur)
-      var(--pgn-elevation-dropzone-active-spread)
-      var(--pgn-elevation-dropzone-active-color);
+    box-shadow: var(--pgn-elevation-dropzone-active);
   }
 }
 

src/Form/_bootstrap-custom-forms.scss

@@ -1,3 +1,26 @@
+:root {
+  --pgn-elevation-form-control-indicator-checked-focus:
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+    var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+    var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+    var(--pgn-elevation-form-control-indicator-checked-focus-color);
+
+  --pgn-elevation-form-control-select-border-focus:
+    var(--pgn-elevation-form-control-select-border-focus-offset-x)
+    var(--pgn-elevation-form-control-select-border-focus-offset-y)
+    var(--pgn-elevation-form-control-select-border-focus-blur)
+    var(--pgn-elevation-form-control-select-border-focus-spread)
+    var(--pgn-elevation-form-control-select-border-focus-color);
+
+  --pgn-elevation-form-control-file-focus:
+    var(--pgn-elevation-form-control-file-focus-offset-x)
+    var(--pgn-elevation-form-control-file-focus-offset-y)
+    var(--pgn-elevation-form-control-file-focus-blur)
+    var(--pgn-elevation-form-control-file-focus-spread)
+    var(--pgn-elevation-form-control-file-focus-color);
+}
+
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // https://useiconic.com/open
@@ -39,12 +62,7 @@
   }
 
   &:focus ~ .custom-control-label::before {
-    box-shadow:
-      var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
-      var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
-      var(--pgn-elevation-form-control-indicator-checked-focus-blur)
-      var(--pgn-elevation-form-control-indicator-checked-focus-spread)
-      var(--pgn-elevation-form-control-indicator-checked-focus-color);
+    box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
   }
 
   &:focus:not(:checked) ~ .custom-control-label::before {
@@ -254,12 +272,7 @@
   &:focus {
     border-color: var(--pgn-color-form-control-select-border-focus);
     outline: 0;
-    box-shadow:
-      var(--pgn-elevation-form-control-select-border-focus-offset-x)
-      var(--pgn-elevation-form-control-select-border-focus-offset-y)
-      var(--pgn-elevation-form-control-select-border-focus-blur)
-      var(--pgn-elevation-form-control-select-border-focus-spread)
-      var(--pgn-elevation-form-control-select-border-focus-color);
+    box-shadow: var(--pgn-elevation-form-control-select-border-focus);
 
     &::-ms-value {
       // For visual consistency with other platforms/browsers,
@@ -338,12 +351,7 @@
 
   &:focus ~ .custom-file-label {
     border-color: var(--pgn-color-form-control-file-border-focus);
-    box-shadow:
-      var(--pgn-elevation-form-control-file-focus-offset-x)
-      var(--pgn-elevation-form-control-file-focus-offset-y)
-      var(--pgn-elevation-form-control-file-focus-blur)
-      var(--pgn-elevation-form-control-file-focus-spread)
-      var(--pgn-elevation-form-control-file-focus-color);
+    box-shadow: var(--pgn-elevation-form-control-file-focus);
   }
 
   // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247

src/Form/_index.scss

@@ -5,6 +5,15 @@
 @import "FormText";
 @import "FormControlSet";
 
+:root {
+  --pgn-elevation-form-control-indicator-checked-focus:
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+    var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+    var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+    var(--pgn-elevation-form-control-indicator-checked-focus-color);
+}
+
 // A form input state used by the now deprecate Fieldset and asInput
 // we can remove this when they are deleted.
 .form-control.is-invalid.is-invalid-nodanger {
@@ -411,12 +420,7 @@ select.form-control {
   }
 
   &:not(:disabled):hover {
-    box-shadow:
-      var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
-      var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
-      var(--pgn-elevation-form-control-indicator-checked-focus-blur)
-      var(--pgn-elevation-form-control-indicator-checked-focus-spread)
-      var(--pgn-elevation-form-control-indicator-checked-focus-color);
+    box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
   }
 
   &:disabled {

src/Form/_mixins.scss

@@ -1,3 +1,12 @@
+:root {
+  --pgn-elevation-form-input-focus:
+    var(--pgn-elevation-form-input-focus-offset-x)
+    var(--pgn-elevation-form-input-focus-offset-y)
+    var(--pgn-elevation-form-input-focus-blur)
+    var(--pgn-elevation-form-input-focus-spread)
+    var(--pgn-elevation-form-input-focus-color);
+}
+
 @mixin form-control-floating-label-initial(
   $padding-x,
   $padding-y,
@@ -50,12 +59,7 @@
     background-color: var(--pgn-color-form-input-focus-bg);
     border-color: var(--pgn-color-form-input-focus-border);
     outline: 0;
-    box-shadow:
-      var(--pgn-elevation-form-input-focus-offset-x)
-      var(--pgn-elevation-form-input-focus-offset-y)
-      var(--pgn-elevation-form-input-focus-blur)
-      var(--pgn-elevation-form-input-focus-spread)
-      var(--pgn-elevation-form-input-focus-color);
+    box-shadow: var(--pgn-elevation-form-input-focus);
   }
 
   @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);