Fix the dead rules, tokens and duplicate variables found by the SCSS audit

- accordion focus/radius on the button, ribbon fold for every colour, caret() honours its params
- --X-darken is a darker shade again, .btn-link hover and hard colours use runtime tokens

.changeset/scss-audit-fixes.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed dead SCSS rules and tokens: accordion focus ring, `.btn` hover shade, ribbon fold colours, marketing `.g-*` gutters and `caret()`.

core/scss/_props.scss

@@ -43,7 +43,7 @@
   @each $name, $color in map.merge($theme-colors, $social-colors) {
     --#{$name}: #{$color};
     --#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--light); else: var(--dark))};
-    --#{$name}-darken: color-mix(in oklab, var(--#{$name}), transparent 20%);
+    --#{$name}-darken: #{adjust-lightness-css(var(--#{$name}), -10%)};
     --#{$name}-lt: color-mix(in oklab, var(--#{$name}) 10%, transparent);
     --#{$name}-200: color-mix(in oklab, var(--#{$name}) 20%, transparent);
   }
@@ -92,7 +92,7 @@
 
   /** Backdrops */
   --backdrop-opacity: #{$backdrop-opacity};
-  --backdrop-bg: var(--bg-surface-dark);
+  --backdrop-bg: #{$backdrop-bg};
   @each $name, $value in $backdrops {
     --backdrop-bg#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
   }

core/scss/_utilities-marketing.scss

@@ -199,8 +199,7 @@ $marketing-utilities: (
   ),
   'gutter': (
     responsive: true,
-    css-var: true,
-    css-variable-name: gutter-x,
+    property: --gutter-x --gutter-y,
     class: g,
     values: $spacers-extra,
   )

core/scss/_utilities.scss

@@ -11,16 +11,6 @@ $border-values: (
   0: 0,
 );
 
-$utilities-border-colors: map-loop(
-  (
-    'red': red,
-    'green': green,
-  ),
-  rgba-css-var,
-  '$key',
-  'border'
-) !default;
-
 // Utilities
 
 $utilities: () !default;

core/scss/_variables.scss

@@ -366,8 +366,8 @@ $negative-spacers: null !default;
 // reads `--body-text-align` unconditionally, so a null left the declaration
 // invalid.
 $body-text-align: start !default;
-$body-color: $gray-500 !default;
-$body-bg: $white !default;
+$body-color: $gray-800 !default;
+$body-bg: $gray-50 !default;
 
 $body-secondary-color: color-transparent(var(--body-color), 0.75) !default;
 $body-secondary-bg: $gray-200 !default;
@@ -505,7 +505,7 @@ $lead-font-weight: var(--font-weight-normal) !default;
 
 $blockquote-margin-y: $spacer !default;
 $blockquote-font-size: $font-size-base !default;
-$blockquote-footer-color: $gray-600 !default;
+$blockquote-footer-color: var(--secondary) !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
 $initialism-font-size: $small-font-size !default;
@@ -542,9 +542,6 @@ $zindex-levels: (
 
 $text-secondary-opacity: 0.7 !default;
 
-$body-text-align: null !default;
-$body-bg: $gray-50 !default;
-$body-color: $gray-800 !default;
 $body-emphasis-color: $gray-700 !default;
 
 // $color-contrast-dark and $color-contrast-light moved to `_settings.scss`.
@@ -674,23 +671,6 @@ $grays: (
   '900': $gray-900,
 ) !default;
 
-$colors: (
-  'blue': $blue,
-  'indigo': $indigo,
-  'purple': $purple,
-  'pink': $pink,
-  'red': $red,
-  'orange': $orange,
-  'yellow': $yellow,
-  'green': $green,
-  'teal': $teal,
-  'cyan': $cyan,
-  'black': $black,
-  'white': $white,
-  'gray': $gray-600,
-  'gray-dark': $gray-800,
-) !default;
-
 // Theme color emphasis
 $primary-text-emphasis: mix-color-css(var(--black), var(--primary), 60%) !default;
 $secondary-text-emphasis: mix-color-css(var(--black), var(--secondary), 60%) !default;
@@ -759,6 +739,8 @@ $border-radiuses: (
   sm: $border-radius-sm,
   md: $border-radius,
   lg: $border-radius-lg,
+  xl: $border-radius-xl,
+  xxl: $border-radius-xxl,
   pill: $border-radius-pill,
   null: var(--border-radius-md),
 ) !default;
@@ -906,7 +888,6 @@ $grid-columns: 12 !default;
 $grid-row-columns: 6 !default;
 
 // Grid
-$grid-gutter-width: 1rem !default;
 
 $container-variations: (
   slim: 16rem,
@@ -1136,7 +1117,7 @@ $btn-active-box-shadow: inset 0 3px 5px color-transparent(var(--black), 0.125) !
 
 $btn-link-color: var(--link-color) !default;
 $btn-link-hover-color: var(--link-hover-color) !default;
-$btn-link-disabled-color: $gray-600 !default;
+$btn-link-disabled-color: var(--secondary) !default;
 
 $btn-border-radius: var(--border-radius) !default;
 $btn-border-radius-sm: var(--border-radius-sm) !default;
@@ -1299,8 +1280,6 @@ $card-body-padding-sm: 1rem !default;
 $card-body-padding-md: 2.5rem !default;
 $card-body-padding-lg: 2rem !default;
 $card-body-padding-lg-up: 4rem !default;
-$card-options-top: 1.5rem !default;
-$card-options-inset: 0.75rem !default;
 $card-options-link-min-width: 1rem !default;
 $card-options-link-margin-start: 0.25rem !default;
 $card-avatar-height: 3.5rem !default;
@@ -1440,7 +1419,7 @@ $dropdown-link-disabled-color: var(--tertiary-color) !default;
 $dropdown-item-padding-y: 0.5rem !default;
 $dropdown-item-padding-x: 0.75rem !default;
 
-$dropdown-header-color: $gray-600 !default;
+$dropdown-header-color: var(--secondary) !default;
 $dropdown-header-padding-x: $dropdown-item-padding-x !default;
 $dropdown-header-padding-y: $dropdown-padding-y !default;
 
@@ -1838,8 +1817,8 @@ $table-variants: (
 ) !default;
 
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
-$table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
-$table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;
+$table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;
+$table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
 $table-sort-icon-size: 1rem !default;
 $table-sort-icon-margin-start: 0.25rem !default;
 // scss-docs-end table-variables
@@ -2077,7 +2056,7 @@ $form-floating-input-padding-b: 0.625rem !default;
 $form-floating-label-height: 1.5em !default;
 $form-floating-label-opacity: 0.65 !default;
 $form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(calc(var(--dir) * 0.15rem)) #{'/*rtl:ignore*/'} !default;
-$form-floating-label-disabled-color: $gray-600 !default;
+$form-floating-label-disabled-color: var(--secondary) !default;
 $form-floating-transition:
   opacity 0.1s ease-in-out,
   transform 0.1s ease-in-out !default;
@@ -2104,16 +2083,8 @@ $form-feedback-font-style: $form-text-font-style !default;
 $form-feedback-valid-color: $success !default;
 $form-feedback-invalid-color: $danger !default;
 
-$form-feedback-icon-valid: str-replace(
-  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"),
-  '#',
-  '%23'
-) !default;
-$form-feedback-icon-invalid: str-replace(
-  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"),
-  '#',
-  '%23'
-) !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>") !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>") !default;
 // Form validation states
 // scss-docs-start form-validation-variables
 $form-validation-states: (
@@ -2196,7 +2167,6 @@ $offcanvas-color: var(--body-color) !default;
 $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg: $backdrop-bg !default;
 $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
-$offcanvas-border-color: var(--border-color) !default;
 $offcanvas-narrow-width: 20rem !default;
 // scss-docs-end offcanvas-variables
 

core/scss/bootstrap/_buttons.scss

@@ -17,6 +17,7 @@
   --btn-border-width: #{$btn-border-width};
   --btn-border-color: transparent;
   --btn-border-radius: #{$btn-border-radius};
+  --btn-hover-color: var(--btn-color);
   --btn-hover-border-color: transparent;
   --btn-box-shadow: #{$btn-box-shadow};
   --btn-disabled-opacity: #{$btn-disabled-opacity};

core/scss/layout/_navbar.scss

@@ -377,35 +377,39 @@ Navbar
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
-      @include media-breakpoint-down(breakpoint-next($breakpoint)) {
-        @include navbar-vertical-nav();
+      // `.navbar-expand` (no infix) is always expanded: `$next` is null there, and
+      // media-breakpoint-down(null) would emit the mobile rules unconditionally.
+      @if $next {
+        @include media-breakpoint-down($next) {
+          @include navbar-vertical-nav();
 
-        // Below the breakpoint the vertical navbar is a top bar row: toggler,
-        // brand, and whatever trails them (a user block, or nothing). Auto
-        // margins keep the brand centered either way — space-between alone
-        // would push it to the far edge when nothing follows it.
-        &.navbar-vertical .navbar-brand {
-          margin-inline: auto;
-        }
-
-        // In the stacked mobile menu nothing pins the trailing group to the
-        // bottom, so a small gap marks it as a separate part of the menu.
-        &.navbar-vertical .navbar-side {
-          margin-top: $sidebar-inset;
-        }
-
-        // Below the breakpoint the navbar-footer sits in the top bar row:
-        // the avatar alone, with its menu dropping down instead of up.
-        .navbar-footer {
-          .nav-link-title {
-            display: none;
+          // Below the breakpoint the vertical navbar is a top bar row: toggler,
+          // brand, and whatever trails them (a user block, or nothing). Auto
+          // margins keep the brand centered either way — space-between alone
+          // would push it to the far edge when nothing follows it.
+          &.navbar-vertical .navbar-brand {
+            margin-inline: auto;
           }
 
-          .dropup .dropdown-menu {
-            inset-inline-start: auto;
-            inset-inline-end: 0;
-            top: 100%;
-            bottom: auto;
+          // In the stacked mobile menu nothing pins the trailing group to the
+          // bottom, so a small gap marks it as a separate part of the menu.
+          &.navbar-vertical .navbar-side {
+            margin-top: $sidebar-inset;
+          }
+
+          // Below the breakpoint the navbar-footer sits in the top bar row:
+          // the avatar alone, with its menu dropping down instead of up.
+          .navbar-footer {
+            .nav-link-title {
+              display: none;
+            }
+
+            .dropup .dropdown-menu {
+              inset-inline-start: auto;
+              inset-inline-end: 0;
+              top: 100%;
+              bottom: auto;
+            }
           }
         }
       }

core/scss/layout/_page.scss

@@ -153,10 +153,10 @@
 
 .page-cover-img {
   position: absolute;
-  inset-inline-start: calc(-2 * var(--page-cover-blur, 0));
-  inset-inline-end: calc(-2 * var(--page-cover-blur, 0));
-  top: calc(-2 * var(--page-cover-blur, 0));
-  bottom: calc(-2 * var(--page-cover-blur, 0));
+  inset-inline-start: calc(-2 * var(--page-cover-blur, 0px));
+  inset-inline-end: calc(-2 * var(--page-cover-blur, 0px));
+  top: calc(-2 * var(--page-cover-blur, 0px));
+  bottom: calc(-2 * var(--page-cover-blur, 0px));
   z-index: -1;
   pointer-events: none;
   object-fit: cover;

core/scss/mixins/_functions.scss

@@ -35,12 +35,10 @@
   @return oklch(from #{$color} calc(l #{$sign} #{math.abs($delta)}) c h);
 }
 
-/**
- * Converts a given value to a percentage string.
- *
- * @param {Number} $value - The value to be converted to a percentage.
- * @return {String} - The percentage representation of the value.
- */
+// Converts a given value to a percentage string.
+//
+// @param {Number} $value - The value to be converted to a percentage.
+// @return {String} - The percentage representation of the value.
 @function to-percentage($value) {
   @if meta.type-of($value) == number and math.is-unitless($value) {
     @return math.percentage($value);
@@ -48,17 +46,15 @@
   @return $value;
 }
 
-/**
- * Generates a transparent version of the given color.
- *
- * @param {Color} $color - The base color to be made transparent.
- * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
- * @return {Color} - The resulting color with the specified transparency.
- *
- * Mixes in `oklab` so tints against an opaque background (e.g. alert backgrounds
- * over `--bg-surface`) stay perceptually even; mixing with `transparent` gives
- * the same result in every color space.
- */
+// Generates a transparent version of the given color.
+//
+// @param {Color} $color - The base color to be made transparent.
+// @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
+// @return {Color} - The resulting color with the specified transparency.
+//
+// Mixes in `oklab` so tints against an opaque background (e.g. alert backgrounds
+// over `--bg-surface`) stay perceptually even; mixing with `transparent` gives
+// the same result in every color space.
 @function color-transparent($color, $alpha: 1, $background: transparent) {
   @if $alpha == 1 or $alpha == 100% {
     @return $color;

core/scss/mixins/bootstrap/_caret.scss

@@ -40,17 +40,17 @@
   &:#{$selector} {
     content: '';
     display: inline-block;
-    vertical-align: $caret-vertical-align;
-    width: $caret-width;
-    height: $caret-width;
+    vertical-align: $vertical-align;
+    width: $width;
+    height: $width;
     border-bottom: 1px var(--border-style);
     border-inline-start: 1px var(--border-style);
-    margin-inline-end: 0.1em;
 
     @if $direction != 'start' {
-      margin-inline-start: $caret-spacing;
+      margin-inline-end: 0.1em;
+      margin-inline-start: $spacing;
     } @else {
-      margin-inline-end: $caret-spacing;
+      margin-inline-end: $spacing;
     }
 
     @if $direction == down {

core/scss/mixins/bootstrap/_color-mode.scss

@@ -16,6 +16,7 @@
       }
     }
   } @else {
+    .theme-#{$mode},
     [data-bs-theme='#{$mode}'],
     [data-theme='#{$mode}'] {
       @content;

core/scss/tests/_caret.test.scss

@@ -102,7 +102,6 @@
           height: 0.36em;
           border-bottom: 1px var(--border-style);
           border-inline-start: 1px var(--border-style);
-          margin-inline-end: 0.1em;
           margin-inline-end: 0.306em;
           transform: rotate(45deg);
         }

core/scss/tests/_color-mode.test.scss

@@ -18,6 +18,7 @@
         }
       }
       @include expect() {
+        .theme-dark .x,
         [data-bs-theme='dark'] .x,
         [data-theme='dark'] .x {
           color: red;

core/scss/ui/_accordion.scss

@@ -32,15 +32,26 @@
   gap: var(--accordion-btn-gap);
   align-items: center;
   width: 100%;
-  padding: var(--accordion-btn-padding-y) var(--accordion-padding-x);
+  padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x);
   font-size: inherit;
   font-weight: var(--accordion-btn-font-weight);
   line-height: var(--accordion-btn-line-height);
   color: inherit;
   text-align: inherit;
-  background-color: transparent;
+  background-color: var(--accordion-btn-bg);
   border: 0;
 
+  &:focus {
+    z-index: 3;
+    outline: 0;
+    box-shadow: var(--accordion-btn-focus-box-shadow);
+
+    &:not(:focus-visible) {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
   &:not(.collapsed) {
     color: var(--accordion-active-color);
     border-bottom-color: transparent;
@@ -61,21 +72,6 @@
   border: 0;
   transition: transform $transition-time;
   overflow-anchor: none;
-
-  &:hover {
-    z-index: 2;
-  }
-
-  &:focus {
-    z-index: 3;
-    outline: 0;
-    box-shadow: var(--accordion-btn-focus-box-shadow);
-
-    &:not(:focus-visible) {
-      outline: none;
-      box-shadow: none;
-    }
-  }
 }
 
 .accordion-button-icon {
@@ -126,10 +122,8 @@
   &:last-of-type {
     @include border-bottom-radius(var(--accordion-border-radius));
 
-    > .accordion-header {
-      &.collapsed {
-        @include border-bottom-radius(var(--accordion-inner-border-radius));
-      }
+    > .accordion-header > .accordion-button.collapsed {
+      @include border-bottom-radius(var(--accordion-inner-border-radius));
     }
 
     > .accordion-collapse {

core/scss/ui/_alerts.scss

@@ -10,7 +10,7 @@
   --alert-border-color: #{color-transparent(var(--alert-variant-color), 0.2, var(--bg-surface))};
   --alert-border: var(--border-width) solid var(--alert-border-color);
   --alert-border-radius: var(--border-radius);
-  --alert-link-color: inherit;
+  --alert-link-color: var(--alert-color);
   --alert-heading-font-weight: var(--font-weight-medium);
   --alert-heading-margin-bottom: #{$alert-heading-margin-bottom};
   --alert-icon-size: #{$alert-icon-size};
@@ -61,11 +61,6 @@
 .alert-link {
   font-weight: $alert-link-font-weight;
   color: var(--alert-link-color);
-
-  &,
-  &:hover {
-    color: var(--alert-color);
-  }
 }
 
 .alert-dismissible {
@@ -73,8 +68,8 @@
 
   .btn-close {
     position: absolute;
-    inset-inline-end: calc(var(--alert-padding-y) / 2 - 1px);
-    top: calc(var(--alert-padding-x) / 2 - 1px);
+    inset-inline-end: calc(var(--alert-padding-x) / 2 - 1px);
+    top: calc(var(--alert-padding-y) / 2 - 1px);
     z-index: 1;
     padding: calc(var(--alert-padding-y) * 1.25) var(--alert-padding-x);
   }

core/scss/ui/_avatars.scss

@@ -163,7 +163,7 @@
   position: absolute;
   inset-inline-end: var(--avatar-brand-offset);
   bottom: var(--avatar-brand-offset);
-  z-index: 1000;
+  z-index: 1;
   width: var(--avatar-brand-size);
   height: var(--avatar-brand-size);
   background: var(--bg-surface);

core/scss/ui/_buttons.scss

@@ -76,7 +76,7 @@
   }
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--link-hover-color);
     border-color: transparent;
   }
 }

core/scss/ui/_calendars.scss

@@ -50,7 +50,7 @@
     width: var(--calendar-date-size);
     height: var(--calendar-date-size);
     line-height: var(--calendar-date-size);
-    color: #66758c;
+    color: var(--secondary);
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
@@ -65,7 +65,7 @@
     &:hover {
       color: var(--primary);
       text-decoration: none;
-      background: #fefeff;
+      background: var(--bg-surface);
       border-color: var(--border-color);
     }
 

core/scss/ui/_cards.scss

@@ -403,10 +403,6 @@ Stacked card
 Card optinos
  */
 .card-options {
-  --card-options-top: #{$card-options-top};
-  --card-options-inset: #{$card-options-inset};
-  inset-inline-end: var(--card-options-inset);
-  top: var(--card-options-top);
   display: flex;
   margin-inline-start: auto;
 }
@@ -622,7 +618,7 @@ Card list group
       }
 
       &.active {
-        color: $headings-color;
+        color: var(--heading-color);
         background: var(--card-bg, var(--bg-surface));
         border-bottom-color: transparent;
       }
@@ -696,8 +692,8 @@ Card list group
 Card note
 */
 .card-note {
-  --card-bg: #fff7dd;
-  --card-border-color: #fff1c9;
+  --card-bg: color-mix(in oklab, var(--yellow) 12%, var(--bg-surface));
+  --card-border-color: color-mix(in oklab, var(--yellow) 25%, var(--bg-surface));
 }
 
 /**

core/scss/ui/_dropdowns.scss

@@ -75,7 +75,7 @@
 
 .dropdown-menu-columns {
   display: flex;
-  flex: 0 var(--dropdown-menu-columns-gap);
+  gap: var(--dropdown-menu-columns-gap);
 }
 
 .dropdown-menu-arrow {

core/scss/ui/_forms.scss

@@ -215,17 +215,6 @@ Upload files
   border-inline-start: 0;
 }
 
-/**
-Floating inputs
- */
-// Fix for the bug in twbs/bootstrap v5.3.3. Issue #39080. Should be fixed in v5.3.4
-label[for='floating-input'] {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 /**
 Forms on mobile devices 
   */

core/scss/ui/_modals.scss

@@ -49,7 +49,7 @@
   font-size: $h3-font-size;
   font-weight: $headings-font-weight;
   line-height: $line-height-base;
-  color: $headings-color;
+  color: var(--heading-color);
 }
 
 .modal-footer {

core/scss/ui/_nav.scss

@@ -113,7 +113,7 @@
   }
 
   .nav-link:hover & {
-    color: var(--nav-link-hover-icon-color);
+    color: var(--nav-link-hover-icon-color, var(--nav-link-icon-color, #{$nav-link-icon-color}));
   }
 }
 

core/scss/ui/_progress.scss

@@ -61,7 +61,6 @@ Progress bar
 }
 
 .progress-bar-indeterminate {
-  &::after,
   &::before {
     position: absolute;
     inset-inline-start: 0;
@@ -69,11 +68,8 @@ Progress bar
     bottom: 0;
     content: '';
     background-color: inherit;
-    will-change: inset-inline-start, inset-inline-end;
-  }
-
-  &::before {
     animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    will-change: inset-inline-start, inset-inline-end;
   }
 }
 

core/scss/ui/_ribbons.scss

@@ -1,5 +1,6 @@
 // stylelint-disable declaration-no-important
 
+@use 'sass:map';
 @use '../config' as *;
 
 .ribbon {
@@ -50,15 +51,13 @@
     border-top-color: transparent;
   }
 
-  @if $enable-extra-colors {
-    @each $color, $value in $extra-colors {
-      &.bg-#{$color} {
-        border-color: var(--#{$color});
-      }
+  @each $color, $value in map.merge($theme-colors, if(sass($enable-extra-colors): $extra-colors; else: ())) {
+    &.bg-#{$color} {
+      border-color: var(--#{$color});
+    }
 
-      &.bg-#{$color}-lt {
-        border-color: color-transparent(var(--#{$color}), 0.1) !important;
-      }
+    &.bg-#{$color}-lt {
+      border-color: color-transparent(var(--#{$color}), 0.1) !important;
     }
   }
 

core/scss/ui/_tables.scss

@@ -91,7 +91,7 @@
 
         td {
           display: block;
-          padding: $table-cell-padding-x $table-cell-padding-y !important;
+          padding: $table-cell-padding-y $table-cell-padding-x !important;
           color: var(--body-color) !important;
           border: none;
 
@@ -154,11 +154,11 @@ Table sort
   }
 
   &.asc::after {
-    mask-image: $table-sort-desc-bg-image;
+    mask-image: $table-sort-asc-bg-image;
   }
 
   &.desc::after {
-    mask-image: $table-sort-asc-bg-image;
+    mask-image: $table-sort-desc-bg-image;
   }
 }
 

core/scss/ui/_type.scss

@@ -281,7 +281,6 @@ $text-variants: (
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-decoration-color: $color;
-    background: color-transparent($color, 0.04);
     background: color-transparent($color, 4%);
   }
 }

core/scss/ui/forms/_form-custom.scss

@@ -21,10 +21,10 @@ Form control dark theme fix
  */
 .form-control {
   &::file-selector-button {
-    background-color: var(--btn-color, #{$form-file-button-bg});
+    background-color: var(--btn-bg, #{$form-file-button-bg});
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: var(--btn-color, #{$form-file-button-hover-bg});
+    background-color: var(--btn-hover-bg, #{$form-file-button-hover-bg});
   }
 }

core/scss/ui/forms/_form-selectgroup.scss

@@ -118,7 +118,7 @@ Alternate version of form select group
  */
 .form-selectgroup-boxes {
   .form-selectgroup-label {
-    padding: $card-spacer-x $card-spacer-y;
+    padding: $card-spacer-y $card-spacer-x;
     color: inherit;
     text-align: start;
   }

core/scss/vendor/_apexcharts.scss

@@ -77,8 +77,7 @@
 
 .apexcharts-gridline,
 .apexcharts-grid-borders line,
-.apexcharts-xaxis-tick,
-.apexcharts-yaxis-tick {
+.apexcharts-xaxis-tick {
   stroke: var(--border-color) !important;
 }
 

core/scss/vendor/_fslightbox.scss

@@ -5,11 +5,3 @@
   background: var(--backdrop-bg) !important;
   backdrop-filter: blur($modal-backdrop-blur) !important;
 }
-
-.fslightbox-slide-number-container {
-  color: inherit !important;
-}
-
-.fslightbox-slash {
-  background: currentColor !important;
-}

core/scss/vendor/_jsvectormap.scss

@@ -18,7 +18,7 @@
   background-color: var(--card-bg, var(--bg-surface));
   border: var(--border-width) var(--border-style) var(--border-color);
 
-  .jvm-legend-inner .jvm-legend-tick {
+  .jvm-legend-tick {
     display: flex;
     align-items: center;
 

core/scss/vendor/_tom-select.scss

@@ -1,17 +1,11 @@
 @use 'sass:map';
 @use '../config' as *;
 
-$input-border-width: 1px;
-
 :root {
   --ts-pr-clear-button: 0rem;
   --ts-pr-caret: 0rem;
 }
 
-.ts-input {
-  color: inherit;
-}
-
 .focus .ts-control {
   @include border-radius(var(--border-radius));
 }