Fix dark mode contrast of secondary text and tertiary surfaces (#3282)

.changeset/bg-surface-tertiary-translucent.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated `--tblr-bg-surface-tertiary` to a translucent color, so card headers, footers and table stripes show on dark cards.

.changeset/fix-dark-mode-fixed-grays.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed dark mode contrast of nav links, list group headers, toast headers, breadcrumbs, the footer, `.form-control-light` and `.form-help`.

.changeset/fix-input-group-text-contrast.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `.input-group-text` contrast in dark mode with the `--tblr-secondary-color` text color and a translucent background.

core/scss/_variables.scss

@@ -1026,7 +1026,7 @@ $breadcrumb-padding-x: 0 !default;
 $breadcrumb-item-padding-x: 0.5rem !default;
 $breadcrumb-margin-bottom: 1rem !default;
 $breadcrumb-bg: null !default;
-$breadcrumb-divider-color: var(--gray-500) !default;
+$breadcrumb-divider-color: var(--secondary-color) !default;
 $breadcrumb-active-color: inherit !default;
 $breadcrumb-divider: string.quote('/') !default;
 $breadcrumb-border-radius: null !default;
@@ -1464,7 +1464,7 @@ $tooltip-arrow-height: 0.4rem !default;
 $loader-size: 2.5rem !default;
 
 $list-group-header-bg: var(--bg-surface-tertiary) !default;
-$list-group-header-color: var(--gray-500) !default;
+$list-group-header-color: var(--secondary-color) !default;
 
 // Modals
 // scss-docs-start modal-variables
@@ -1523,7 +1523,7 @@ $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
 $nav-link-font-size: var(--body-font-size) !default;
 $nav-link-font-weight: null !default;
-$nav-link-color: var(--gray-500) !default;
+$nav-link-color: var(--secondary-color) !default;
 $nav-link-active-color: var(--body-color) !default;
 $nav-link-hover-color: var(--link-hover-color) !default;
 $nav-link-transition:
@@ -1668,7 +1668,7 @@ $popover-arrow-height: 0.5rem !default;
 $footer-padding-y: 2rem !default;
 $footer-bg: var(--bg-surface) !default;
 $footer-border-color: var(--border-color) !default;
-$footer-color: var(--gray-500) !default;
+$footer-color: var(--secondary-color) !default;
 
 // Pagination
 // scss-docs-start pagination-variables
@@ -1813,12 +1813,12 @@ $table-border-color: var(--border-color-translucent) !default;
 $table-th-padding-x: $table-cell-padding-x !default;
 $table-th-padding-y: 0.5rem !default;
 $table-th-font-weight: null !default;
-$table-th-bg: light-dark(color-transparent(var(--body-color), 0.025), color-transparent(var(--body-color), 0.04)) !default;
+$table-th-bg: var(--bg-surface-tertiary) !default;
 
 $table-striped-color: $table-color !default;
 $table-striped-bg-factor: 0.05 !default;
 $table-striped-order: even !default;
-$table-striped-bg: light-dark(color-transparent(var(--body-color), 0.025), color-transparent(var(--body-color), 0.04)) !default;
+$table-striped-bg: var(--bg-surface-tertiary) !default;
 $table-striped-columns-order: even !default;
 // Rows and cells matching this selector keep their own background instead of the stripe.
 $table-striped-exclude-selector: '[class^="bg-"], [class*=" bg-"], [class^="table-"], [class*=" table-"], [class^="text-bg-"], [class*=" text-bg-"], [style*="background"]' !default;
@@ -1869,7 +1869,7 @@ $toast-border-radius: var(--border-radius) !default;
 $toast-box-shadow: var(--box-shadow) !default;
 $toast-spacing: $container-padding-x !default;
 
-$toast-header-color: var(--gray-500) !default;
+$toast-header-color: var(--secondary-color) !default;
 $toast-header-background-color: color-transparent(var(--body-bg), 0.85) !default;
 $toast-header-border-color: $toast-border-color !default;
 // scss-docs-end toast-variables
@@ -1971,8 +1971,8 @@ $input-placeholder-color: var(--tertiary) !default;
 $input-group-addon-padding-y: $input-padding-y !default;
 $input-group-addon-padding-x: $input-padding-x !default;
 $input-group-addon-font-weight: $input-font-weight !default;
-$input-group-addon-color: var(--gray-500) !default;
-$input-group-addon-bg: var(--bg-surface-secondary) !default;
+$input-group-addon-color: var(--secondary-color) !default;
+$input-group-addon-bg: var(--bg-surface-tertiary) !default;
 $input-group-addon-border-color: $input-border-color !default;
 
 $input-border-radius: var(--border-radius) !default;

core/scss/layout/_root.scss

@@ -16,11 +16,15 @@
   --bg-surface: light-dark(var(--bg-surface-primary), var(--gray-800));
   --bg-surface-primary: var(--white);
   --bg-surface-secondary: light-dark(var(--gray-50), var(--gray-900));
-  --bg-surface-tertiary: light-dark(var(--gray-50), var(--gray-800));
+  // Translucent, so a card header or footer, a table stripe or an input-group
+  // addon stands out from whatever surface it sits on, in both color modes
+  // (an opaque gray-800 was invisible on a dark card).
+  --bg-surface-tertiary: light-dark(#{color-transparent(var(--body-color), 0.025)}, #{color-transparent(var(--body-color), 0.04)});
   --bg-surface-dark: var(--gray-900);
   --bg-surface-inverted: light-dark(var(--gray-900), var(--gray-100));
   --bg-forms: light-dark(var(--bg-surface), var(--gray-900));
-  --bg-forms-disabled: light-dark(var(--bg-surface-secondary), var(--gray-800));
+  // Dark: translucent, like the tertiary surface, so a disabled control on a card is not the card's own gray.
+  --bg-forms-disabled: light-dark(var(--bg-surface-secondary), #{color-transparent(var(--body-color), 0.04)});
 
   --text-inverted: light-dark(var(--gray-100), var(--gray-800));
 
@@ -33,7 +37,7 @@
   --link-hover-color: light-dark(#{mix-color-css(var(--black), var(--link-color), 20%)}, #{mix-color-css(var(--white), var(--link-color), 20%)});
 
   --secondary: light-dark(var(--gray-500), var(--gray-400));
-  --tertiary: var(--gray-400);
+  --tertiary: light-dark(var(--gray-500), var(--gray-400));
 
   --border-color: light-dark(#{$border-color}, var(--gray-700));
   --border-color-translucent: light-dark(#{$border-color-translucent}, var(--dark-mode-border-color-translucent));

core/scss/ui/_forms.scss

@@ -57,7 +57,7 @@ textarea {
 }
 
 .form-control-light {
-  background-color: var(--gray-100);
+  background-color: var(--bg-surface-secondary);
   border-color: transparent;
 }
 
@@ -130,7 +130,7 @@ fieldset:empty {
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  background: var(--gray-100);
+  background: var(--bg-surface-tertiary);
   border: 0;
   @include border-radius(var(--border-radius-pill));
   @include transition(background-color $transition-time, color $transition-time);