From a883531302b6cfe729e042b5fc31337e47632872 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Tue, 1 Sep 2026 23:44:29 +0200 Subject: [PATCH] Make every list-group color variant render (#2927) --- .build/css-vars-baseline.txt | 43 --------------------- .changeset/fix-list-group-color-variants.md | 5 +++ core/scss/_variables.scss | 4 ++ core/scss/bootstrap/_list-group.scss | 30 +++++++++----- core/scss/ui/_lists.scss | 5 ++- 5 files changed, 32 insertions(+), 55 deletions(-) create mode 100644 .changeset/fix-list-group-color-variants.md diff --git a/.build/css-vars-baseline.txt b/.build/css-vars-baseline.txt index d1d99d7ff..ceb91e4ac 100644 --- a/.build/css-vars-baseline.txt +++ b/.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 diff --git a/.changeset/fix-list-group-color-variants.md b/.changeset/fix-list-group-color-variants.md new file mode 100644 index 000000000..5a85ff3db --- /dev/null +++ b/.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. diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 45e28ac8d..a246432a6 100644 --- a/core/scss/_variables.scss +++ b/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; diff --git a/core/scss/bootstrap/_list-group.scss b/core/scss/bootstrap/_list-group.scss index 4283439a1..b9b284937 100644 --- a/core/scss/bootstrap/_list-group.scss +++ b/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-bg: var(--#{$state}-bg-subtle); - --list-group-border-color: var(--#{$state}-border-subtle); - --list-group-action-hover-color: var(--emphasis-color); - --list-group-action-hover-bg: var(--#{$state}-border-subtle); - --list-group-action-active-color: var(--emphasis-color); - --list-group-action-active-bg: var(--#{$state}-border-subtle); - --list-group-active-color: var(--#{$state}-bg-subtle); - --list-group-active-bg: var(--#{$state}-text-emphasis); - --list-group-active-border-color: var(--#{$state}-text-emphasis); + --list-group-color: var(--#{$state}); + --list-group-bg: var(--#{$state}-lt); + --list-group-border-color: #{color-transparent(var(--#{$state}), $list-group-variant-border-alpha)}; + --list-group-action-color: var(--#{$state}); + --list-group-action-hover-color: var(--#{$state}); + --list-group-action-hover-bg: #{color-transparent(var(--#{$state}), $list-group-variant-hover-alpha)}; + --list-group-action-active-color: var(--#{$state}-fg); + --list-group-action-active-bg: var(--#{$state}); + // The selected row keeps the tint: `.list-group-item.active` paints its own + // 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 diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss index faf6787ef..f4b2427ea 100644 --- a/core/scss/ui/_lists.scss +++ b/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;