diff --git a/.changeset/scss-audit-fixes.md b/.changeset/scss-audit-fixes.md
new file mode 100644
index 000000000..a17ddb7b4
--- /dev/null
+++ b/.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()`.
diff --git a/core/scss/_props.scss b/core/scss/_props.scss
index 393ea6e8c..d37b8d4b9 100644
--- a/core/scss/_props.scss
+++ b/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};
}
diff --git a/core/scss/_utilities-marketing.scss b/core/scss/_utilities-marketing.scss
index a543844e8..87f325d32 100644
--- a/core/scss/_utilities-marketing.scss
+++ b/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,
)
diff --git a/core/scss/_utilities.scss b/core/scss/_utilities.scss
index 2233fe0e7..d5883e40e 100644
--- a/core/scss/_utilities.scss
+++ b/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;
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index e1460d555..8124db3d9 100644
--- a/core/scss/_variables.scss
+++ b/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,") !default;
-$table-sort-asc-bg-image: url("data:image/svg+xml,") !default;
-$table-sort-desc-bg-image: url("data:image/svg+xml,") !default;
+$table-sort-asc-bg-image: url("data:image/svg+xml,") !default;
+$table-sort-desc-bg-image: url("data:image/svg+xml,") !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,"),
- '#',
- '%23'
-) !default;
-$form-feedback-icon-invalid: str-replace(
- url("data:image/svg+xml,"),
- '#',
- '%23'
-) !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,") !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,") !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
diff --git a/core/scss/bootstrap/_buttons.scss b/core/scss/bootstrap/_buttons.scss
index 9d92502ff..ccee51471 100644
--- a/core/scss/bootstrap/_buttons.scss
+++ b/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};
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index 56c638c94..e6cbb4200 100644
--- a/core/scss/layout/_navbar.scss
+++ b/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;
+ }
}
}
}
diff --git a/core/scss/layout/_page.scss b/core/scss/layout/_page.scss
index dec8ff838..05cd3db4d 100644
--- a/core/scss/layout/_page.scss
+++ b/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;
diff --git a/core/scss/mixins/_functions.scss b/core/scss/mixins/_functions.scss
index c2ce2ea00..01aaf44e8 100644
--- a/core/scss/mixins/_functions.scss
+++ b/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;
diff --git a/core/scss/mixins/bootstrap/_caret.scss b/core/scss/mixins/bootstrap/_caret.scss
index 3b601e1d5..f5bd4d566 100644
--- a/core/scss/mixins/bootstrap/_caret.scss
+++ b/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 {
diff --git a/core/scss/mixins/bootstrap/_color-mode.scss b/core/scss/mixins/bootstrap/_color-mode.scss
index b8888180c..73e585e1f 100644
--- a/core/scss/mixins/bootstrap/_color-mode.scss
+++ b/core/scss/mixins/bootstrap/_color-mode.scss
@@ -16,6 +16,7 @@
}
}
} @else {
+ .theme-#{$mode},
[data-bs-theme='#{$mode}'],
[data-theme='#{$mode}'] {
@content;
diff --git a/core/scss/tests/_caret.test.scss b/core/scss/tests/_caret.test.scss
index d5e022b3c..451b95638 100644
--- a/core/scss/tests/_caret.test.scss
+++ b/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);
}
diff --git a/core/scss/tests/_color-mode.test.scss b/core/scss/tests/_color-mode.test.scss
index dc3d5d269..2c24ca873 100644
--- a/core/scss/tests/_color-mode.test.scss
+++ b/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;
diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss
index 65e0736d0..0990f3660 100644
--- a/core/scss/ui/_accordion.scss
+++ b/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 {
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index b08fa479c..e2f6af23d 100644
--- a/core/scss/ui/_alerts.scss
+++ b/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);
}
diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss
index b122fddc7..111c5ab08 100644
--- a/core/scss/ui/_avatars.scss
+++ b/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);
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index 8aa421cc3..bf45efbf6 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -76,7 +76,7 @@
}
&:hover {
- color: $link-hover-color;
+ color: var(--link-hover-color);
border-color: transparent;
}
}
diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss
index c67c53d38..5a9c526f9 100644
--- a/core/scss/ui/_calendars.scss
+++ b/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);
}
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index 7d307c923..266bb156a 100644
--- a/core/scss/ui/_cards.scss
+++ b/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));
}
/**
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index 0bcef4b45..fecc19c8f 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/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 {
diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss
index b0849c2e6..0d7a420d2 100644
--- a/core/scss/ui/_forms.scss
+++ b/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
*/
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index f30aca481..11a1b47b7 100644
--- a/core/scss/ui/_modals.scss
+++ b/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 {
diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss
index 9c2f6e13f..474b1908f 100644
--- a/core/scss/ui/_nav.scss
+++ b/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}));
}
}
diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss
index d76670016..8d5b9b6b0 100644
--- a/core/scss/ui/_progress.scss
+++ b/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;
}
}
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index b84881fdb..afe195454 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/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;
}
}
diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss
index f518bc33c..dfe8d50bd 100644
--- a/core/scss/ui/_tables.scss
+++ b/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;
}
}
diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss
index 03ccb9e0b..e78b5dca8 100644
--- a/core/scss/ui/_type.scss
+++ b/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%);
}
}
diff --git a/core/scss/ui/forms/_form-custom.scss b/core/scss/ui/forms/_form-custom.scss
index c01c81929..a3d45bb37 100644
--- a/core/scss/ui/forms/_form-custom.scss
+++ b/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});
}
}
diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss
index 85db7aef2..1d5a3b67e 100644
--- a/core/scss/ui/forms/_form-selectgroup.scss
+++ b/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;
}
diff --git a/core/scss/vendor/_apexcharts.scss b/core/scss/vendor/_apexcharts.scss
index b9d99acd0..2830464b8 100644
--- a/core/scss/vendor/_apexcharts.scss
+++ b/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;
}
diff --git a/core/scss/vendor/_fslightbox.scss b/core/scss/vendor/_fslightbox.scss
index 3cb4ff6ec..1df0c80bb 100644
--- a/core/scss/vendor/_fslightbox.scss
+++ b/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;
-}
diff --git a/core/scss/vendor/_jsvectormap.scss b/core/scss/vendor/_jsvectormap.scss
index af3688eb2..74e3ff4d5 100644
--- a/core/scss/vendor/_jsvectormap.scss
+++ b/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;
diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss
index 632e0e2fa..cae89e891 100644
--- a/core/scss/vendor/_tom-select.scss
+++ b/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));
}