Make every list-group color variant render (#2927)

.build/css-vars-baseline.txt

@@ -6,49 +6,6 @@
 #
 # Everything below is a real bug waiting to be fixed, not an accepted exception.
 
-# `.list-group-item-{color}` reads subtle/emphasis tokens that bootstrap only
-# builds for $theme-colors, so these variants render with no background and no
-# text color at all.
---tblr-azure-bg-subtle
---tblr-azure-border-subtle
---tblr-azure-text-emphasis
---tblr-blue-bg-subtle
---tblr-blue-border-subtle
---tblr-blue-text-emphasis
---tblr-cyan-bg-subtle
---tblr-cyan-border-subtle
---tblr-cyan-text-emphasis
---tblr-green-bg-subtle
---tblr-green-border-subtle
---tblr-green-text-emphasis
---tblr-indigo-bg-subtle
---tblr-indigo-border-subtle
---tblr-indigo-text-emphasis
---tblr-lime-bg-subtle
---tblr-lime-border-subtle
---tblr-lime-text-emphasis
---tblr-muted-bg-subtle
---tblr-muted-border-subtle
---tblr-muted-text-emphasis
---tblr-orange-bg-subtle
---tblr-orange-border-subtle
---tblr-orange-text-emphasis
---tblr-pink-bg-subtle
---tblr-pink-border-subtle
---tblr-pink-text-emphasis
---tblr-purple-bg-subtle
---tblr-purple-border-subtle
---tblr-purple-text-emphasis
---tblr-red-bg-subtle
---tblr-red-border-subtle
---tblr-red-text-emphasis
---tblr-teal-bg-subtle
---tblr-teal-border-subtle
---tblr-teal-text-emphasis
---tblr-yellow-bg-subtle
---tblr-yellow-border-subtle
---tblr-yellow-text-emphasis
-
 # tabler-marketing.css: `.shape-*` backgrounds, borders and headings reach for
 # tokens that only ever existed in the marketing prototype.
 --tblr-black-lt

.changeset/fix-list-group-color-variants.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `.list-group-item-{color}`: the palette colors had no styling at all and no variant had its background.

core/scss/_variables.scss

@@ -1894,6 +1894,10 @@ $list-group-action-active-color: var(--body-color) !default;
 $list-group-action-active-bg: var(--secondary-bg) !default;
 $list-group-header-padding-y: 0.5rem !default;
 
+// Color variants: a tinted row, matched to the `bg-{color}-lt` utilities
+$list-group-variant-border-alpha: 0.24 !default;
+$list-group-variant-hover-alpha: 0.16 !default;
+
 // Forms
 $input-disabled-bg: var(--bg-forms-disabled) !default;
 $input-border-color: var(--border-color) !default;

core/scss/bootstrap/_list-group.scss

@@ -184,18 +184,28 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
+// Built from the palette tokens every color has - `--{color}`, `--{color}-lt`
+// and `--{color}-fg` - rather than bootstrap's subtle/emphasis pairs. Tabler's
+// `$theme-colors` carries the twelve palette colors on top of bootstrap's own,
+// and the subtle/emphasis maps only cover the latter, so upstream's version
+// left `.list-group-item-azure` and twelve more reading tokens nobody defines.
+// The tint also matches the `bg-{color}-lt` utilities used elsewhere.
 @each $state in map.keys($theme-colors) {
   .list-group-item-#{$state} {
-    --list-group-color: var(--#{$state}-text-emphasis);
+    --list-group-color: var(--#{$state});
-    --list-group-bg: var(--#{$state}-bg-subtle);
+    --list-group-bg: var(--#{$state}-lt);
-    --list-group-border-color: var(--#{$state}-border-subtle);
+    --list-group-border-color: #{color-transparent(var(--#{$state}), $list-group-variant-border-alpha)};
-    --list-group-action-hover-color: var(--emphasis-color);
+    --list-group-action-color: var(--#{$state});
-    --list-group-action-hover-bg: var(--#{$state}-border-subtle);
+    --list-group-action-hover-color: var(--#{$state});
-    --list-group-action-active-color: var(--emphasis-color);
+    --list-group-action-hover-bg: #{color-transparent(var(--#{$state}), $list-group-variant-hover-alpha)};
-    --list-group-action-active-bg: var(--#{$state}-border-subtle);
+    --list-group-action-active-color: var(--#{$state}-fg);
-    --list-group-active-color: var(--#{$state}-bg-subtle);
+    --list-group-action-active-bg: var(--#{$state});
-    --list-group-active-bg: var(--#{$state}-text-emphasis);
+    // The selected row keeps the tint: `.list-group-item.active` paints its own
-    --list-group-active-border-color: var(--#{$state}-text-emphasis);
+    // neutral highlight, so a solid fill here would only show through as text
+    // on a background it was never matched against.
+    --list-group-active-color: var(--#{$state});
+    --list-group-active-bg: var(--#{$state}-lt);
+    --list-group-active-border-color: #{color-transparent(var(--#{$state}), $list-group-variant-border-alpha)};
   }
 }
 // scss-docs-end list-group-modifiers

core/scss/ui/_lists.scss

@@ -25,8 +25,9 @@
 }
 
 .list-group-item {
-  background-color: inherit;
+  // No `background-color: inherit` here: `$list-group-bg` already defaults the
-
+  // token to `inherit`, and hard-coding the property overrode every
+  // `.list-group-item-{color}` tint.
   &.disabled,
   &:disabled {
     color: $gray-500;