refactor: code refactoring

package.json

@@ -34,7 +34,7 @@
     "build-docs:with-theme": "cd ./www && \"$npm_execpath\" install && \"$npm_execpath\" run build:with-theme",
     "commit": "commit",
     "debug-test": "node --inspect-brk node_modules/.bin/jest --runInBand --coverage",
-    "stylelint": "stylelint \"src/**/*.scss\" \"scss/**/*.scss\" \"www/src/**/*.scss\" --config .stylelintrc.json",
+    "stylelint": "stylelint \"src/**/*.scss\" \"scss/**/*.scss\" \"www/src/**/*.scss\" --config .stylelintrc.json --fix",
     "lint": "npm run stylelint && eslint --ext .js --ext .jsx --ext .ts --ext .tsx . && npm run generate-component-lint && npm run lint-docs",
     "lint-docs": "cd ./www && \"$npm_execpath\" run lint",
     "prepublishOnly": "npm run build",

scss/core/css/variables.css

@@ -98,7 +98,7 @@
   --pgn-color-btn-focus-bg-inverse-outline-info: inherit;
   --pgn-color-btn-focus-bg-outline-info: inherit;
   --pgn-color-btn-focus-bg-inverse-outline-dark: inherit;
-  --pgn-color-btn-focus-bg-outline-dark: inherit;
+  --pgn-color-btn-focus-bg-outline-dark: unset;
   --pgn-color-btn-focus-bg-inverse-outline-danger: inherit;
   --pgn-color-btn-focus-bg-outline-danger: inherit;
   --pgn-color-btn-focus-bg-inverse-outline-brand: inherit;

src/Card/card-bootstrap.scss

@@ -22,13 +22,17 @@
     &:first-child {
       border-top-width: 0;
 
-      @include border-top-radius(calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}));
+      @include border-top-radius(
+        calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)})
+      );
     }
 
     &:last-child {
       border-bottom-width: 0;
 
-      @include border-bottom-radius(calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}));
+      @include border-bottom-radius(
+        calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)})
+      );
     }
   }
 

src/Carousel/Carousel.scss

@@ -147,7 +147,7 @@
     border-top: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
     border-bottom: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
     opacity: .5;
-    transition: var(--pgn-transition-carousel-indicator)-transition;
+    transition: var(--pgn-transition-carousel-indicator);
   }
 
   .active {

src/CloseButton/CloseButton.scss

@@ -1,13 +1,13 @@
 .close {
   float: right;
-  @include font-size(var(--pgn-typography-close-button-font-size));
   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);
   opacity: .5;
 
-  // Override <a>'s hover style
+  @include font-size(var(--pgn-typography-close-button-font-size));
+
   @include hover() {
     color: var(--pgn-color-close-button);
     text-decoration: none;
@@ -20,21 +20,12 @@
   }
 }
 
-// Additional properties for button version
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-// stylelint-disable-next-line selector-no-qualifying-type
 button.close {
   padding: 0;
   background-color: transparent;
   border: 0;
 }
 
-// Future-proof disabling of clicks on `<a>` elements
-
-// stylelint-disable-next-line selector-no-qualifying-type
 a.close.disabled {
   pointer-events: none;
 }

src/Code/Code.scss

@@ -1,36 +1,41 @@
 code {
-  @include font-size(var(--pgn-typography-code-font-size));
   color: var(--pgn-color-code-base);
   word-wrap: break-word;
 
+  @include font-size(var(--pgn-typography-code-font-size));
+
   a > & {
     color: inherit;
   }
 }
 
 kbd {
   padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x);
-  @include font-size(var(--pgn-typography-code-kbd-font-size));
   color: var(--pgn-color-code-kbd-base);
   background-color: var(--pgn-color-code-kbd-bg);
+
+  @include font-size(var(--pgn-typography-code-kbd-font-size));
   @include border-radius($border-radius-sm);
   @include box-shadow(var(--pgn-elevation-code-kbd-box-shadow));
 
   kbd {
     padding: 0;
-    @include font-size(100%);
     font-weight: var(--pgn-typography-code-kbd-nested-font-weight);
+
+    @include font-size(100%);
     @include box-shadow(none);
   }
 }
 
 pre {
   display: block;
-  @include font-size(var(--pgn-typography-code-font-size));
   color: var(--pgn-color-code-pre);
 
+  @include font-size(var(--pgn-typography-code-font-size));
+
   code {
     @include font-size(inherit);
+
     color: inherit;
     word-break: normal;
   }

src/Collapsible/Collapsible.scss

@@ -21,7 +21,9 @@
     }
 
     &[aria-expanded="true"] {
-      border-radius: calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) 0 0;
+      border-radius:
+        calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)})
+        calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) 0 0;
       border-color: var(--pgn-color-card-border-base);
       transition: none;
       text-align: start;

src/Dropdown/dropdown-bootstrap.scss

@@ -1,4 +1,3 @@
-// The dropdown wrapper (`<div>`)
 .dropup,
 .dropright,
 .dropdown,
@@ -9,30 +8,37 @@
 .dropdown-toggle {
   white-space: nowrap;
 
-  // Generate the caret automatically
   @include caret();
 }
 
-// The dropdown menu
 .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: $zindex-dropdown;
-  display: none; // none by default, but block on "open" of the menu
+  display: none;
   float: left;
   min-width: var(--pgn-size-dropdown-min-width);
   padding: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-base);
-  margin: var(--pgn-spacing-dropdown-spacer) 0 0; // override default ul
-  @include font-size(var(--pgn-typography-dropdown-font-size));
+  margin: var(--pgn-spacing-dropdown-spacer) 0 0;
   color: var(--pgn-color-dropdown-text);
-  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  text-align: left;
   list-style: none;
   background-color: var(--pgn-color-dropdown-bg);
   background-clip: padding-box;
   border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border);
+
+  @include font-size(var(--pgn-typography-dropdown-font-size));
   @include border-radius(var(--pgn-size-dropdown-border-radius-base));
   @include box-shadow(var(--pgn-elevation-dropdown-box-shadow));
+
+  &[x-placement^="top"],
+  &[x-placement^="right"],
+  &[x-placement^="bottom"],
+  &[x-placement^="left"] {
+    right: auto;
+    bottom: auto;
+  }
 }
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -51,8 +57,6 @@
   }
 }
 
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-// Just add .dropup after the standard .dropdown class and you're set.
 .dropup {
   .dropdown-menu {
     top: auto;
@@ -77,6 +81,7 @@
 
   .dropdown-toggle {
     @include caret(right);
+
     &::after {
       vertical-align: 0;
     }
@@ -94,47 +99,30 @@
 
   .dropdown-toggle {
     @include caret(left);
+
     &::before {
       vertical-align: 0;
     }
   }
 }
 
-// When Popper is enabled, reset the basic dropdown position
-// stylelint-disable-next-line no-duplicate-selectors
-.dropdown-menu {
-  &[x-placement^="top"],
-  &[x-placement^="right"],
-  &[x-placement^="bottom"],
-  &[x-placement^="left"] {
-    right: auto;
-    bottom: auto;
-  }
-}
-
-// Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   @include nav-divider(var(--pgn-color-dropdown-divider-bg), var(--pgn-spacing-dropdown-divider-margin-y), true);
 }
 
-// Links, buttons, and more within the dropdown menu
-//
-// `<button>`-specific styles are denoted with `// For <button>s`
 .dropdown-item {
   display: block;
-  width: 100%; // For `<button>`s
+  width: 100%;
   padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item);
   clear: both;
   font-weight: $font-weight-normal;
   color: var(--pgn-color-dropdown-link-base);
-  text-align: inherit; // For `<button>`s
+  text-align: inherit;
   text-decoration: if($link-decoration == none, null, none);
-  white-space: nowrap; // prevent links from randomly breaking onto new lines
-  background-color: transparent; // For `<button>`s
-  border: 0; // For `<button>`s
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
 
-  // Prevent dropdown overflow if there's no padding
-  // See https://github.com/twbs/bootstrap/pull/27703
   @if var(--pgn-spacing-dropdown-padding-y-base) == 0 {
     &:first-child {
       @include border-top-radius(var(--pgn-size-dropdown-border-radius-inner));
@@ -148,13 +136,15 @@
   @include hover-focus() {
     color: var(--pgn-color-dropdown-link-hover-base);
     text-decoration: none;
+
     @include gradient-bg(var(--pgn-color-dropdown-link-hover-bg));
   }
 
   &.active,
   &:active {
     color: var(--pgn-color-dropdown-link-active-base);
     text-decoration: none;
+
     @include gradient-bg(var(--pgn-color-dropdown-link-active-bg));
   }
 
@@ -163,7 +153,7 @@
     color: var(--pgn-color-dropdown-link-disabled);
     pointer-events: none;
     background-color: transparent;
-    // Remove CSS gradients if they're enabled
+
     @if $enable-gradients {
       background-image: none;
     }
@@ -174,17 +164,17 @@
   display: block;
 }
 
-// Dropdown section headers
+
 .dropdown-header {
   display: block;
   padding: var(--pgn-spacing-dropdown-padding-header);
-  margin-bottom: 0; // for use with heading elements
-  @include font-size($font-size-sm);
+  margin-bottom: 0;
   color: var(--pgn-color-dropdown-header);
-  white-space: nowrap; // as with > li > a
+  white-space: nowrap;
+
+  @include font-size($font-size-sm);
 }
 
-// Dropdown text
 .dropdown-item-text {
   display: block;
   padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item);