refactor: some refactoring

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 13:58:00 GMT
+ * Generated on Fri, 17 Mar 2023 15:19:16 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 13:58:00 GMT
+ * Generated on Fri, 17 Mar 2023 15:19:16 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 13:58:00 GMT
+ * Generated on Fri, 17 Mar 2023 15:19:16 GMT
  */
 
 :root {
@@ -693,6 +693,13 @@
   --pgn-color-pagination-bg-disabled: var(--pgn-color-white);
   --pgn-color-pagination-bg-hover: var(--pgn-color-gray-100);
   --pgn-color-pagination-text-inverse: var(--pgn-color-white);
+  --pgn-color-page-banner-text-warning: var(--pgn-color-black);
+  --pgn-color-page-banner-text-accent-b: var(--pgn-color-black);
+  --pgn-color-page-banner-text-accent-a: var(--pgn-color-black);
+  --pgn-color-page-banner-text-light: var(--pgn-color-black);
+  --pgn-color-page-banner-text-dark: var(--pgn-color-white);
+  --pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b);
+  --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a);
   --pgn-color-navbar-light-toggler-border: #0000001A;
   --pgn-color-navbar-light-disabled: #0000004D;
   --pgn-color-navbar-light-active: #000000E6;
@@ -1132,6 +1139,8 @@
   --pgn-color-pagination-focus-base: var(--pgn-color-primary-500);
   --pgn-color-pagination-bg-base: var(--pgn-color-bg-base);
   --pgn-color-pagination-text-active: var(--pgn-color-active);
+  --pgn-color-page-banner-bg-light: var(--pgn-color-light-400);
+  --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500);
   --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active);
   --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active);
   --pgn-color-navbar-dark-active: var(--pgn-color-active);
@@ -1561,6 +1570,7 @@
   --pgn-color-popover-arrow-base: var(--pgn-color-popover-bg);
   --pgn-color-pagination-bg-active: var(--pgn-color-bg-active);
   --pgn-color-pagination-text-disabled: var(--pgn-color-disabled);
+  --pgn-color-page-banner-bg-warning: var(--pgn-color-warning-100);
   --pgn-color-navbar-dark-brand-hover: var(--pgn-color-navbar-dark-active);
   --pgn-color-navbar-dark-brand-text: var(--pgn-color-navbar-dark-active);
   --pgn-color-nav-pills-link-active-bg: var(--pgn-color-bg-active);

src/Badge/Badge.scss

@@ -2,7 +2,7 @@
   display: inline-block;
   padding: var(--pgn-spacing-badge-padding-y) var(--pgn-spacing-badge-padding-x-base);
   color: var(--pgn-badge-color, inherit);
-  background-color: var(--pgn-badge-bg-color, transparent);
+  background-color: var(--pgn-badge-bg, transparent);
 
   @include font-size(var(--pgn-typography-badge-font-size));
 
@@ -20,13 +20,13 @@
     &:focus {
       text-decoration: none;
       color: var(--pgn-badge-focus-color, inherit);
-      background-color: var(--pgn-badge-focus-bg-color, transparent);
+      background-color: var(--pgn-badge-focus-bg, transparent);
     }
 
     &:focus,
     &.focus {
       outline: 0;
-      box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow-color, rgba(0, 0, 0, .15));
+      box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow, rgba(0, 0, 0, .15));
     }
   }
 
@@ -49,64 +49,64 @@
 
 .badge-primary {
   --pgn-badge-color: var(--pgn-color-badge-text-primary);
-  --pgn-badge-bg-color: var(--pgn-color-badge-bg-primary);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-primary);
   --pgn-badge-focus-color: var(--pgn-color-badge-focus-primary);
-  --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-primary);
-  --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-primary);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-primary);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-primary);
 }
 
 .badge-secondary {
   --pgn-badge-color: var(--pgn-color-badge-text-secondary);
-  --pgn-badge-bg-color: var(--pgn-color-badge-bg-secondary);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-secondary);
   --pgn-badge-focus-color: var(--pgn-color-badge-focus-secondary);
-  --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-secondary);
-  --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-secondary);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-secondary);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-secondary);
 }
 
 .badge-success {
   --pgn-badge-color: var(--pgn-color-badge-text-success);
-  --pgn-badge-bg-color: var(--pgn-color-badge-bg-success);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-success);
   --pgn-badge-focus-color: var(--pgn-color-badge-focus-success);
-  --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-success);
-  --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-success);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-success);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-success);
 }
 
 .badge-danger {
   --pgn-badge-color: var(--pgn-color-badge-text-danger);
-  --pgn-badge-bg-color: var(--pgn-color-badge-bg-danger);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-danger);
   --pgn-badge-focus-color: var(--pgn-color-badge-focus-danger);
-  --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-danger);
-  --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-danger);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-danger);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-danger);
 }
 
 .badge-warning {
   --pgn-badge-color: var(--pgn-color-badge-text-warning);
-  --pgn-badge-bg-color: var(--pgn-color-badge-bg-warning);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-warning);
   --pgn-badge-focus-color: var(--pgn-color-badge-focus-warning);
-  --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-warning);
-  --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-warning);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-warning);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-warning);
 }
 
 .badge-info {
   --pgn-badge-color: var(--pgn-color-badge-text-info);
-  --pgn-badge-bg-color: var(--pgn-color-badge-bg-info);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-info);
   --pgn-badge-focus-color: var(--pgn-color-badge-focus-info);
-  --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-info);
-  --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-info);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-info);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-info);
 }
 
 .badge-light {
   --pgn-badge-color: var(--pgn-color-badge-text-light);
-  --pgn-badge-bg-color: var(--pgn-color-badge-bg-light);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-light);
   --pgn-badge-focus-color: var(--pgn-color-badge-focus-light);
-  --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-light);
-  --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-light);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-light);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-light);
 }
 
 .badge-dark {
   --pgn-badge-color: var(--pgn-color-badge-text-dark);
-  --pgn-badge-bg-color: var(--pgn-color-badge-bg-dark);
+  --pgn-badge-bg: var(--pgn-color-badge-bg-dark);
   --pgn-badge-focus-color: var(--pgn-color-badge-focus-dark);
-  --pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-dark);
-  --pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-dark);
+  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-dark);
+  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-dark);
 }

src/Button/Button.scss

@@ -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(#{$line-height-base}em - 2 * var(--pgn-size-btn-border-width));
   font-size: inherit;
   vertical-align: bottom;
   padding: 0 .25em;

src/Form/_bootstrap-forms.scss

@@ -275,17 +275,25 @@ textarea.form-control {
 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 // server side validation.
 
-@each $state, $data in $form-validation-states {
-  @include form-validation-state(
-    $state,
-    map-get($data, color),
-    map-get($data, icon),
-    map-get($data, tooltip-color),
-    map-get($data, tooltip-bg),
-    map-get($data, focus-box-shadow-color),
-    map-get($data, checked-color)
-  );
-}
+@include form-validation-state(
+  "valid",
+  var(--pgn-color-form-feedback-valid),
+  var(--pgn-other-content-form-feedback-icon-valid),
+  var(--pgn-color-form-feedback-tooltip-valid),
+  var(--pgn-color-form-feedback-tooltip-bg-valid),
+  var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid),
+  var(--pgn-color-form-feedback-checked-valid),
+);
+
+@include form-validation-state(
+  "invalid",
+  var(--pgn-color-form-feedback-invalid),
+  var(--pgn-other-content-form-feedback-icon-invalid),
+  var(--pgn-color-form-feedback-tooltip-bg-invalid),
+  transparent,
+  var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid),
+  var(--pgn-color-form-feedback-checked-invalid),
+);
 
 // Inline forms
 //

src/Form/_variables.scss

@@ -1,27 +1,4 @@
-// This variable has connected with the brand variable.
+// This variable has connected with the Brand variable.
 $input-focus-width: var(--pgn-size-form-input-width-focus) !default;
-// This variable has connected with the brand variable.
+// This variable has connected with the Brand variable.
 $custom-select-indicator: var(--pgn-other-content-form-control-select-indicator-icon) !default;
-
-$form-validation-states: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$form-validation-states: map-merge(
-  (
-    "valid": (
-      "color": var(--pgn-color-form-feedback-valid),
-      "icon": var(--pgn-other-content-form-feedback-icon-valid),
-      "tooltip-color": var(--pgn-color-form-feedback-tooltip-valid),
-      "tooltip-bg": var(--pgn-color-form-feedback-tooltip-bg-valid),
-      "focus-box-shadow-color": var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid),
-      "checked-color": var(--pgn-color-form-feedback-checked-valid)
-    ),
-    "invalid": (
-      "color": var(--pgn-color-form-feedback-invalid),
-      "icon": var(--pgn-other-content-form-feedback-icon-invalid),
-      "tooltip-bg": var(--pgn-color-form-feedback-tooltip-bg-invalid),
-      "focus-box-shadow-color": var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid),
-      "checked-color": var(--pgn-color-form-feedback-checked-invalid)
-    ),
-  ),
-  $form-validation-states
-);

src/PageBanner/PageBanner.scss

@@ -1,46 +1,43 @@
-// stylelint-disable-next-line selector-class-pattern
+// stylelint-disable selector-class-pattern
 .pgn__pageBanner-component {
   width: 100%;
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
   font-size: $x-small-font-size;
+  background-color: var(--pgn-page-baner-bg, inherit);
+  color: var(--pgn-page-baner-color, inherit);
 
   @include media-breakpoint-up(md) {
     font-size: $small-font-size;
   }
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__dark {
-  background-color: $dark-500;
-  color: $white;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-dark);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-dark);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__light {
-  background-color: $light-400;
-  color: $black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-light);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-light);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__accentA {
-  background-color: $accent-a;
-  color: $black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-a);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-a);
 }
-// stylelint-disable-next-line selector-class-pattern
+
 .pgn__pageBanner__accentB {
-  background-color: $accent-b;
-  color: $black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-b);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-b);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__warning {
-  background-color: $warning-100;
-  color: $black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-warning);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-warning);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner-content {
   display: flex;
   flex-grow: 1;
@@ -50,7 +47,6 @@
   text-align: center;
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner-dismissButtonContainer {
   min-width: 32px;
   min-height: 32px;

src/Popover/Popover.scss

@@ -1,5 +1,15 @@
 @import "popover-bootstrap";
 
+@mixin popover-header-and-icon($header-bg, $icon-color) {
+  .popover-header {
+    background: $header-bg;
+  }
+
+  .pgn__icon {
+    color: $icon-color;
+  }
+}
+
 .popover {
   filter: var(--pgn-elevation-popover-box-shadow);
 
@@ -19,35 +29,26 @@
 .popover-success {
   background: var(--pgn-color-popover-success-bg);
 
-  .popover-header {
-    background: var(--pgn-color-popover-success-bg);
-  }
-
-  .pgn__icon {
-    color: var(--pgn-color-popover-success-icon);
-  }
+  @include popover-header-and-icon(
+    var(--pgn-color-popover-success-bg),
+    var(--pgn-color-popover-success-icon)
+  );
 }
 
 .popover-warning {
   background: var(--pgn-color-popover-warning-bg);
 
-  .popover-header {
-    background: var(--pgn-color-popover-warning-bg);
-  }
-
-  .pgn__icon {
-    color: var(--pgn-color-popover-warning-icon);
-  }
+  @include popover-header-and-icon(
+    var(--pgn-color-popover-warning-bg),
+    var(--pgn-color-popover-warning-icon)
+  );
 }
 
 .popover-danger {
   background: var(--pgn-color-popover-danger-bg);
 
-  .popover-header {
-    background: var(--pgn-color-popover-danger-bg);
-  }
-
-  .pgn__icon {
-    color: var(--pgn-color-popover-danger-icon);
-  }
+  @include popover-header-and-icon(
+    var(--pgn-color-popover-danger-bg),
+    var(--pgn-color-popover-danger-icon)
+  );
 }