From 8124d329663ca6938fcdbbb3fb8126d2943a387f Mon Sep 17 00:00:00 2001 From: codecalm Date: Fri, 18 Sep 2026 00:35:44 +0200 Subject: [PATCH] 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 | 5 ++ core/scss/_props.scss | 4 +- core/scss/_utilities-marketing.scss | 3 +- core/scss/_utilities.scss | 10 ---- core/scss/_variables.scss | 54 +++++--------------- core/scss/bootstrap/_buttons.scss | 1 + core/scss/layout/_navbar.scss | 56 +++++++++++---------- core/scss/layout/_page.scss | 8 +-- core/scss/mixins/_functions.scss | 30 +++++------ core/scss/mixins/bootstrap/_caret.scss | 12 ++--- core/scss/mixins/bootstrap/_color-mode.scss | 1 + core/scss/tests/_caret.test.scss | 1 - core/scss/tests/_color-mode.test.scss | 1 + core/scss/ui/_accordion.scss | 36 ++++++------- core/scss/ui/_alerts.scss | 11 ++-- core/scss/ui/_avatars.scss | 2 +- core/scss/ui/_buttons.scss | 2 +- core/scss/ui/_calendars.scss | 4 +- core/scss/ui/_cards.scss | 10 ++-- core/scss/ui/_dropdowns.scss | 2 +- core/scss/ui/_forms.scss | 11 ---- core/scss/ui/_modals.scss | 2 +- core/scss/ui/_nav.scss | 2 +- core/scss/ui/_progress.scss | 6 +-- core/scss/ui/_ribbons.scss | 15 +++--- core/scss/ui/_tables.scss | 6 +-- core/scss/ui/_type.scss | 1 - core/scss/ui/forms/_form-custom.scss | 4 +- core/scss/ui/forms/_form-selectgroup.scss | 2 +- core/scss/vendor/_apexcharts.scss | 3 +- core/scss/vendor/_fslightbox.scss | 8 --- core/scss/vendor/_jsvectormap.scss | 2 +- core/scss/vendor/_tom-select.scss | 6 --- 33 files changed, 120 insertions(+), 201 deletions(-) create mode 100644 .changeset/scss-audit-fixes.md 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)); }