diff --git a/.changeset/scss-review-fixes.md b/.changeset/scss-review-fixes.md
new file mode 100644
index 000000000..49b63b7a9
--- /dev/null
+++ b/.changeset/scss-review-fixes.md
@@ -0,0 +1,5 @@
+---
+'@tabler/core': patch
+---
+
+Fixed `.navbar-expand`, `.btn-link:hover`, `--*-darken`, `.ribbon` fold colors, `.avatar-brand` z-index and dark mode literals.
diff --git a/.changeset/theme-islands-dark-selectors.md b/.changeset/theme-islands-dark-selectors.md
new file mode 100644
index 000000000..239975171
--- /dev/null
+++ b/.changeset/theme-islands-dark-selectors.md
@@ -0,0 +1,5 @@
+---
+'@tabler/core': patch
+---
+
+Fixed light theme islands losing `data-bs-theme-primary` and radius, and added `.theme-dark` to the dark mode selectors.
diff --git a/core/scss/_props.scss b/core/scss/_props.scss
index a0d4c6831..3a089b8f7 100644
--- a/core/scss/_props.scss
+++ b/core/scss/_props.scss
@@ -45,7 +45,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}), -6%)};
--#{$name}-lt: color-mix(in oklab, var(--#{$name}) 10%, transparent);
--#{$name}-200: color-mix(in oklab, var(--#{$name}) 20%, transparent);
}
@@ -94,7 +94,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/_variables.scss b/core/scss/_variables.scss
index 3a9e7e660..b59006e48 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -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: light-dark(var(--gray-600), var(--gray-400)) !default;
$blockquote-footer-font-size: $small-font-size !default;
$initialism-font-size: $small-font-size !default;
@@ -727,6 +727,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;
@@ -1093,7 +1095,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: light-dark(var(--gray-600), var(--gray-400)) !default;
$btn-border-radius: var(--border-radius) !default;
$btn-border-radius-sm: var(--border-radius-sm) !default;
@@ -1395,7 +1397,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: light-dark(var(--gray-600), var(--gray-400)) !default;
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $dropdown-padding-y !default;
@@ -1804,8 +1806,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
@@ -2051,7 +2053,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: light-dark(var(--gray-600), var(--gray-400)) !default;
$form-floating-transition:
opacity 0.1s ease-in-out,
transform 0.1s ease-in-out !default;
@@ -2078,16 +2080,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: (
diff --git a/core/scss/bootstrap/_buttons.scss b/core/scss/bootstrap/_buttons.scss
index 6304c4d95..43a0422fb 100644
--- a/core/scss/bootstrap/_buttons.scss
+++ b/core/scss/bootstrap/_buttons.scss
@@ -17,6 +17,8 @@
--btn-border-width: #{$btn-border-width};
--btn-border-color: transparent;
--btn-border-radius: #{$btn-border-radius};
+ --btn-hover-color: var(--btn-color);
+ --btn-active-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/bootstrap/_root.scss b/core/scss/bootstrap/_root.scss
index 2f16d313b..a2946123e 100644
--- a/core/scss/bootstrap/_root.scss
+++ b/core/scss/bootstrap/_root.scss
@@ -3,9 +3,7 @@
@use '../config' as *;
-:root,
-[data-bs-theme='light'],
-[data-theme='light'] {
+:root {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
@@ -82,10 +80,6 @@
--tertiary-bg: light-dark(#{$body-tertiary-bg}, #{$body-tertiary-bg-dark});
// scss-docs-end root-body-variables
- // $headings-color is itself light-dark(gray-900, white); the dark-mode block below
- // overrides it to `inherit`, which can't be expressed as a light-dark() branch.
- --heading-color: #{$headings-color};
-
--link-color: light-dark(#{$link-color}, #{$link-color-dark});
--link-decoration: #{$link-decoration};
@@ -139,6 +133,12 @@
// scss-docs-end root-form-validation-variables
}
+:root,
+[data-bs-theme='light'],
+[data-theme='light'] {
+ --heading-color: #{$headings-color};
+}
+
@if $enable-dark-mode {
@include color-mode(dark, true) {
// scss-docs-start root-dark-mode-vars
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index 3ba8ff669..dd39172f1 100644
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -377,35 +377,37 @@ Navbar
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
- @include media-breakpoint-down(breakpoint-next($breakpoint)) {
- @include navbar-vertical-nav();
+ @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/mixins/bootstrap/_color-mode.scss b/core/scss/mixins/bootstrap/_color-mode.scss
index b8888180c..22fde050c 100644
--- a/core/scss/mixins/bootstrap/_color-mode.scss
+++ b/core/scss/mixins/bootstrap/_color-mode.scss
@@ -15,6 +15,12 @@
@content;
}
}
+ } @else if $mode == dark {
+ .theme-dark,
+ [data-bs-theme='dark'],
+ [data-theme='dark'] {
+ @content;
+ }
} @else {
[data-bs-theme='#{$mode}'],
[data-theme='#{$mode}'] {
diff --git a/core/scss/tests/_color-mode.test.scss b/core/scss/tests/_color-mode.test.scss
index dc3d5d269..4ea5dca08 100644
--- a/core/scss/tests/_color-mode.test.scss
+++ b/core/scss/tests/_color-mode.test.scss
@@ -8,7 +8,7 @@
@use '../mixins/bootstrap/color-mode' as *;
@include describe('color-mode') {
- @include it('scopes content under the theme attribute selectors') {
+ @include it('scopes dark content under the theme class and attribute selectors') {
@include assert() {
@include output() {
@include color-mode(dark) {
@@ -18,6 +18,7 @@
}
}
@include expect() {
+ .theme-dark .x,
[data-bs-theme='dark'] .x,
[data-theme='dark'] .x {
color: red;
@@ -25,4 +26,22 @@
}
}
}
+
+ @include it('scopes light content under the theme attribute selectors only') {
+ @include assert() {
+ @include output() {
+ @include color-mode(light) {
+ .x {
+ color: red;
+ }
+ }
+ }
+ @include expect() {
+ [data-bs-theme='light'] .x,
+ [data-theme='light'] .x {
+ color: red;
+ }
+ }
+ }
+ }
}
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index 88175aad6..8a1517129 100644
--- a/core/scss/ui/_alerts.scss
+++ b/core/scss/ui/_alerts.scss
@@ -68,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 0dd72794c..fc060feea 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -76,7 +76,7 @@
}
&:hover {
- color: $link-hover-color;
+ color: #{$btn-link-hover-color};
border-color: transparent;
}
}
diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss
index bfbe8b841..c7f5e2b35 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-color);
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 96f18cb30..46118773d 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -623,7 +623,7 @@ Card list group
}
&.active {
- color: $headings-color;
+ color: var(--heading-color, var(--emphasis-color));
background: var(--card-bg, var(--bg-surface));
border-bottom-color: transparent;
}
@@ -697,8 +697,8 @@ Card list group
Card note
*/
.card-note {
- --card-bg: #fff7dd;
- --card-border-color: #fff1c9;
+ --card-bg: #{mix-color-css(var(--yellow), var(--bg-surface), 12%)};
+ --card-border-color: #{mix-color-css(var(--yellow), var(--bg-surface), 20%)};
}
/**
diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss
index b19f2c66d..626977e30 100644
--- a/core/scss/ui/_forms.scss
+++ b/core/scss/ui/_forms.scss
@@ -221,17 +221,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..bb1ae182b 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, var(--emphasis-color));
}
.modal-footer {
diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss
index 7464b5273..4705eae6b 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, #{$nav-link-hover-icon-color});
}
}
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index b84881fdb..0476c6a3e 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -1,5 +1,7 @@
// stylelint-disable declaration-no-important
+@use 'sass:map';
+
@use '../config' as *;
.ribbon {
@@ -50,8 +52,8 @@
border-top-color: transparent;
}
- @if $enable-extra-colors {
- @each $color, $value in $extra-colors {
+ @each $color, $value in $theme-colors {
+ @if $enable-extra-colors or not map.has-key($extra-colors, $color) {
&.bg-#{$color} {
border-color: var(--#{$color});
}
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/forms/_form-custom.scss b/core/scss/ui/forms/_form-custom.scss
index c01c81929..5b72608f7 100644
--- a/core/scss/ui/forms/_form-custom.scss
+++ b/core/scss/ui/forms/_form-custom.scss
@@ -15,16 +15,3 @@ Remove the cancel buttons in Chrome and Safari on macOS.
[type='search']::-webkit-search-cancel-button {
appearance: none;
}
-
-/**
-Form control dark theme fix
- */
-.form-control {
- &::file-selector-button {
- background-color: var(--btn-color, #{$form-file-button-bg});
- }
-
- &:hover:not(:disabled):not([readonly])::file-selector-button {
- background-color: var(--btn-color, #{$form-file-button-hover-bg});
- }
-}
diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss
index 7527e76d9..4a49c5809 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/_tom-select.scss b/core/scss/vendor/_tom-select.scss
index 2a1e25cc8..82a61ec63 100644
--- a/core/scss/vendor/_tom-select.scss
+++ b/core/scss/vendor/_tom-select.scss
@@ -1,8 +1,6 @@
@use 'sass:map';
@use '../config' as *;
-$input-border-width: 1px;
-
:root {
--ts-pr-clear-button: 0rem;
--ts-pr-caret: 0rem;