Fix theme island, dark mode and component issues in the SCSS (#3110)

.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.

.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.

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};
   }

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,<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
@@ -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,<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: (

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};

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

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;
+            }
           }
         }
       }

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}'] {

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;
+        }
+      }
+    }
+  }
 }

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);
   }

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: #{$btn-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-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);
     }
 

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%)};
 }
 
 /**

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 
   */

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 {

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});
   }
 }
 

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});
       }

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/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});
-  }
-}

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/_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;