Skip to content

Fix border and disabled public css var issues in BlazorUI (#13655) #13777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
msynk merged 2 commits into from
Oct 12, 2026
Merged

Fix border and disabled public css var issues in BlazorUI (#13655) #13777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
41e07ec
fix border and disabled public css var issues in BitButton #13655
msynk Oct 11, 2026
4f35e84
code review
msynk Oct 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 118 additions & 51 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 12 additions & 1 deletion src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1077,7 +1077,7 @@ private bool IsItemFocusable(TItem item)

internal string? GetItemClass(TItem item)
{
List<string> classes = ["bit-btg-itm"];
List<string> classes = ["bit-btg-itm", GetItemVariantClass()];

// The first/last buttons are marked explicitly instead of relying on :first-child/:last-child,
// which break as soon as a button is wrapped by another element.
Expand Down Expand Up @@ -1125,6 +1125,17 @@ private bool IsItemFocusable(TItem item)
return string.Join(' ', classes);
}

// The group's variant again, on each button: the stylesheet reads a button's colors on the button, so a variable
// set on its Style reaches it, and a class of the button's own is what finds it there whatever element an app
// wraps an option in, while weighing no more than the button's own class.
private string GetItemVariantClass() => Variant switch
{
BitVariant.Fill => "bit-btg-ifl",
BitVariant.Outline => "bit-btg-iol",
BitVariant.Text => "bit-btg-itx",
_ => "bit-btg-ifl"
};

internal string? GetItemStyle(TItem item)
{
List<string> styles = [];
Expand Down
182 changes: 150 additions & 32 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scss
View file
Open in desktop

Large diffs are not rendered by default.

133 changes: 102 additions & 31 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
View file
Open in desktop

Large diffs are not rendered by default.

160 changes: 110 additions & 50 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss
View file
Open in desktop

Large diffs are not rendered by default.

71 changes: 46 additions & 25 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,17 @@
// --bit-ChoiceGroup-item-checked-font-weight weight of the checked item's text (default: $tg-fw-bold)
// --bit-ChoiceGroup-item-description-color color of an item's description (default: $clr-fg-sec)
// --bit-ChoiceGroup-item-description-font-size text size of an item's description (default: $tg-fs-xs)
// The item surfaces a variant paints have a twin per variant, read ahead
// of the shared one, so a theme can set one look apart from the others:
// --bit-ChoiceGroup-fill-item-background card at rest, Fill variant (default: --bit-ChoiceGroup-item-background)
// --bit-ChoiceGroup-fill-item-hover-background hovered card, Fill variant (default: --bit-ChoiceGroup-item-hover-background)
// --bit-ChoiceGroup-fill-item-checked-background checked card, Fill variant (default: --bit-ChoiceGroup-item-checked-background)
// --bit-ChoiceGroup-fill-item-border-color card border at rest, Fill variant (default: --bit-ChoiceGroup-item-border-color)
// --bit-ChoiceGroup-outline-item-background card at rest, Outline variant (default: --bit-ChoiceGroup-item-background)
// --bit-ChoiceGroup-outline-item-hover-background hovered card, Outline variant (default: --bit-ChoiceGroup-item-hover-background)
// --bit-ChoiceGroup-outline-item-checked-background checked card, Outline variant (default: --bit-ChoiceGroup-item-checked-background)
// --bit-ChoiceGroup-outline-item-border-color card border at rest, Outline variant (default: --bit-ChoiceGroup-item-border-color)
// --bit-ChoiceGroup-text-item-background icon or image tile, Text variant (default: --bit-ChoiceGroup-item-background)
//
// A parameter written on the choice group wins over the variable that restyles what it sets: an explicit Color
// over every color above that it paints - the accent and hover colors, the checked card's border and tint, the
Expand Down Expand Up @@ -240,7 +251,13 @@ $chg-private-properties: clr, clr-bg, clr-hover, clr-dis, clr-dis-text, clr-focu
width: fit-content;
display: inline-flex;
padding-inline-start: 0;
background-color: var(--bit-chg-clr-bg, var(--bit-ChoiceGroup-item-background, #{$clr-bg-sec}));
}

// The tile paints a surface of its own only in Text, the variant with no card around it: the card variants make it
// transparent below, so it reads the Text tier of the item background. The variant costs no specificity, so the
// tile still weighs the one class it always did and a single class handed to it through Classes.ItemLabel repaints it.
:where(.bit-chg-txt) .bit-chg-ihi {
background-color: var(--bit-chg-clr-bg, var(--bit-ChoiceGroup-text-item-background, var(--bit-ChoiceGroup-item-background, #{$clr-bg-sec})));
}

.bit-chg-rad {
Expand Down Expand Up @@ -338,6 +355,10 @@ $chg-private-properties: clr, clr-bg, clr-hover, clr-dis, clr-dis-text, clr-focu
}

.bit-chg-itl {
// The accent the card variants tint a checked card with when nothing else does. It is the accent of every
// variant - the radio ring and dot too - so it is no variant's to read; it is resolved on the label, where the
// card variants read it, so an accent set on an item's Style reaches its card as well.
--bit-chg-acc: var(--bit-chg-clr, var(--bit-ChoiceGroup-color, #{$clr-pri}));
display: flex;
cursor: pointer;
user-select: none;
Expand Down Expand Up @@ -909,8 +930,8 @@ $chg-private-properties: clr, clr-bg, clr-hover, clr-dis, clr-dis-text, clr-focu
padding: var(--bit-chg-card-padding, var(--bit-ChoiceGroup-item-padding, #{spacing(1.5)}));
border-radius: var(--bit-ChoiceGroup-item-radius, #{$shp-radius-surface});
--bit-chg-itl-brd: initial;
background-color: var(--bit-chg-itl-bg, var(--bit-ChoiceGroup-item-background, var(--bit-chg-card-bg)));
border: var(--bit-ChoiceGroup-item-border-width, #{$shp-border-width}) $shp-border-style var(--bit-chg-itl-brd, var(--bit-ChoiceGroup-item-border-color, var(--bit-chg-card-brd)));
background-color: var(--bit-chg-itl-bg, var(--bit-chg-card-bg));
border: var(--bit-ChoiceGroup-item-border-width, #{$shp-border-width}) $shp-border-style var(--bit-chg-itl-brd, var(--bit-chg-card-brd));
transition: border-color $mot-duration $mot-easing, background-color $mot-duration $mot-easing;
}

Expand All @@ -932,6 +953,7 @@ $chg-private-properties: clr, clr-bg, clr-hover, clr-dis, clr-dis-text, clr-focu
.bit-chg-ich .bit-chg-itl {
--bit-chg-itl-brd: initial;
border-color: var(--bit-chg-itl-brd, var(--bit-chg-clr, var(--bit-ChoiceGroup-item-checked-border-color, var(--bit-ChoiceGroup-color, #{$clr-pri}))));
background-color: var(--bit-chg-itl-bg, var(--bit-chg-card-tint, var(--bit-chg-card-bg-checked)));
}

&.bit-inv .bit-chg-itl {
Expand All @@ -947,7 +969,7 @@ $chg-private-properties: clr, clr-bg, clr-hover, clr-dis, clr-dis-text, clr-focu
@media (hover: hover) {
&:where(:not(.bit-inv)) .bit-chg-icn:not(.bit-chg-ids) .bit-chg-itl:hover {
--bit-chg-itl-brd: var(--bit-chg-clr-hover, var(--bit-ChoiceGroup-item-hover-border-color, var(--bit-ChoiceGroup-hover-color, #{$clr-pri-hover})));
--bit-chg-itl-bg: var(--bit-ChoiceGroup-item-hover-background, var(--bit-chg-card-bg-hover));
--bit-chg-itl-bg: var(--bit-chg-card-bg-hover);
}
}

Expand All @@ -962,30 +984,29 @@ $chg-private-properties: clr, clr-bg, clr-hover, clr-dis, clr-dis-text, clr-focu
// The tint of an explicit Color is a value of its own, which is left unset - and so falls through to the
// public checked background, then to the tint of the public accent or of the primary role - while the Color
// is: a color-mix() over an unset property is invalid, and an invalid custom property reads as unset.
.bit-chg-otl {
--bit-chg-card-bg: transparent;
--bit-chg-card-brd: #{$clr-brd-sec};
--bit-chg-card-bg-hover: #{$clr-bg-sec-hover};
//
// Each card variant resolves its surface and border here, reading its own tier of the item variables
// (--bit-ChoiceGroup-outline-item-*, -fill-item-*) ahead of the shared one, so a theme can give outline and
// filled cards different colors from :root while a shared variable still re-skins both at once. The card
// rules above read only these resolved values, so neither variant is handed the other's. They are resolved
// on the card itself, never on the root: an item's Style and Styles.ItemContainer land on the item container
// around it, and a public variable set there reaches only what is resolved below it.
.bit-chg-otl .bit-chg-itl {
--bit-chg-card-bg: var(--bit-ChoiceGroup-outline-item-background, var(--bit-ChoiceGroup-item-background, transparent));
--bit-chg-card-brd: var(--bit-ChoiceGroup-outline-item-border-color, var(--bit-ChoiceGroup-item-border-color, #{$clr-brd-sec}));
--bit-chg-card-bg-hover: var(--bit-ChoiceGroup-outline-item-hover-background, var(--bit-ChoiceGroup-item-hover-background, #{$clr-bg-sec-hover}));
--bit-chg-card-tint: #{translucent(var(--bit-chg-clr), 8%)};
--bit-chg-card-bg-checked: #{translucent(var(--bit-ChoiceGroup-color, #{$clr-pri}), 8%)};

.bit-chg-ich .bit-chg-itl {
background-color: var(--bit-chg-itl-bg, var(--bit-chg-card-tint, var(--bit-ChoiceGroup-item-checked-background, var(--bit-chg-card-bg-checked))));
}
--bit-chg-card-bg-checked: var(--bit-ChoiceGroup-outline-item-checked-background, var(--bit-ChoiceGroup-item-checked-background, #{translucent(var(--bit-chg-acc), 8%)}));
}

// Fill states the card with a surface instead of a border; the checked one is the accent color at an
// alpha low enough to keep the item text above the 4.5:1 contrast of WCAG 1.4.3 in both schemes.
.bit-chg-fil {
--bit-chg-card-bg: #{$clr-bg-sec};
--bit-chg-card-brd: transparent;
--bit-chg-card-bg-hover: #{$clr-bg-ter};
.bit-chg-fil .bit-chg-itl {
--bit-chg-card-bg: var(--bit-ChoiceGroup-fill-item-background, var(--bit-ChoiceGroup-item-background, #{$clr-bg-sec}));
--bit-chg-card-brd: var(--bit-ChoiceGroup-fill-item-border-color, var(--bit-ChoiceGroup-item-border-color, transparent));
--bit-chg-card-bg-hover: var(--bit-ChoiceGroup-fill-item-hover-background, var(--bit-ChoiceGroup-item-hover-background, #{$clr-bg-ter}));
--bit-chg-card-tint: #{translucent(var(--bit-chg-clr), 14%)};
--bit-chg-card-bg-checked: #{translucent(var(--bit-ChoiceGroup-color, #{$clr-pri}), 14%)};

.bit-chg-ich .bit-chg-itl {
background-color: var(--bit-chg-itl-bg, var(--bit-chg-card-tint, var(--bit-ChoiceGroup-item-checked-background, var(--bit-chg-card-bg-checked))));
}
--bit-chg-card-bg-checked: var(--bit-ChoiceGroup-fill-item-checked-background, var(--bit-ChoiceGroup-item-checked-background, #{translucent(var(--bit-chg-acc), 14%)}));
}

// The read-only rules above reset the hover of the circle and of the tile; a card is a third surface, so
Expand All @@ -997,16 +1018,16 @@ $chg-private-properties: clr, clr-bg, clr-hover, clr-dis, clr-dis-text, clr-focu
&.bit-chg-fil {
@media (hover: hover) {
.bit-chg-icn:not(.bit-chg-ich) .bit-chg-itl:hover {
--bit-chg-itl-brd: var(--bit-ChoiceGroup-item-border-color, var(--bit-chg-card-brd));
--bit-chg-itl-bg: var(--bit-ChoiceGroup-item-background, var(--bit-chg-card-bg));
--bit-chg-itl-brd: var(--bit-chg-card-brd);
--bit-chg-itl-bg: var(--bit-chg-card-bg);
}

// Both halves of the checked look are restated, not the border alone: the hover above sets a
// background too, so leaving it out would let the hover replace the checked tint with the
// plain hover surface and brighten the card the pointer only passed over.
.bit-chg-ich .bit-chg-itl:hover {
--bit-chg-itl-brd: var(--bit-chg-clr, var(--bit-ChoiceGroup-item-checked-border-color, var(--bit-ChoiceGroup-color, #{$clr-pri})));
--bit-chg-itl-bg: var(--bit-chg-card-tint, var(--bit-ChoiceGroup-item-checked-background, var(--bit-chg-card-bg-checked)));
--bit-chg-itl-bg: var(--bit-chg-card-tint, var(--bit-chg-card-bg-checked));
}
}
}
Expand Down
50 changes: 43 additions & 7 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,13 @@
// --bit-FileInput-remove-button-hover-background background of a hovered remove button (default: $clr-bg-sec-hover)
// --bit-FileInput-remove-button-active-background background of a pressed remove button (default: $clr-bg-sec-active)
// --bit-FileInput-remove-icon-size glyph size of the remove button (default: $siz-icon-md)
// The disabled background and border have a twin per variant, read ahead
// of the shared one, so a theme can set one look apart from the others:
// --bit-FileInput-fill-disabled-background disabled browse and remove buttons, Fill variant (default: --bit-FileInput-disabled-background)
// --bit-FileInput-fill-disabled-border-color disabled browse button border, Fill variant (default: --bit-FileInput-disabled-border-color)
// --bit-FileInput-outline-disabled-background disabled remove buttons, Outline variant (default: --bit-FileInput-disabled-background)
// --bit-FileInput-outline-disabled-border-color disabled browse button border, Outline variant (default: --bit-FileInput-disabled-border-color)
// --bit-FileInput-text-disabled-background disabled remove buttons, Text variant (default: --bit-FileInput-disabled-background)
//
// A parameter written on the file input wins over the variable that restyles what it sets: an explicit Color
// over the color, text, hover, active and focus colors above and over the drop indicator's, and an explicit
Expand Down Expand Up @@ -178,8 +185,20 @@ $fin-private-properties: clr, clr-txt, clr-hover, clr-active, clr-focus, lbl-hei
}
}

//The role colors are shared by the three variants, since each of them derives its look from the same role. The
//disabled background and border are what the variants paint apart, so each variant reads its own tier of them
//(--bit-FileInput-fill-disabled-*, -outline-*, -text-*) ahead of the shared one, and resolves the background into
//--bit-fin-dis-bg on its button and on the remove buttons of its file items, which read it as well.

//Fill - the default: a solid block of the role color labelled in the role's on-color.
.bit-fin-fil {
// Resolved on the parts that read it rather than on the root, so a public variable set on a part's own style
// (Styles.Label, Styles.RemoveButton) still reaches it.
.bit-fin-lbl,
.bit-fin-rbt {
--bit-fin-dis-bg: var(--bit-FileInput-fill-disabled-background, var(--bit-FileInput-disabled-background, #{$clr-bg-dis}));
}

.bit-fin-lbl {
color: var(--bit-fin-lbl-sfg, var(--bit-fin-c-txt));
border-color: var(--bit-fin-lbl-sbr, var(--bit-fin-c));
Expand All @@ -199,14 +218,22 @@ $fin-private-properties: clr, clr-txt, clr-hover, clr-active, clr-focus, lbl-hei
}

&.bit-dis .bit-fin-lbl {
border-color: var(--bit-FileInput-disabled-border-color, #{$clr-brd-dis});
background-color: var(--bit-FileInput-disabled-background, #{$clr-bg-dis});
border-color: var(--bit-FileInput-fill-disabled-border-color, var(--bit-FileInput-disabled-border-color, #{$clr-brd-dis}));
background-color: var(--bit-fin-dis-bg);
}
}

//Outline: only the rule around the button carries the role color at rest, and it fills in like the Fill
//variant once a pointer lands on it.
//variant once a pointer lands on it. Its button stays transparent while disabled, so its tier of the disabled
//background reaches the remove buttons alone.
.bit-fin-otl {
// Resolved on the parts that read it rather than on the root, so a public variable set on a part's own style
// (Styles.Label, Styles.RemoveButton) still reaches it.
.bit-fin-lbl,
.bit-fin-rbt {
--bit-fin-dis-bg: var(--bit-FileInput-outline-disabled-background, var(--bit-FileInput-disabled-background, #{$clr-bg-dis}));
}

.bit-fin-lbl {
color: var(--bit-fin-lbl-sfg, var(--bit-fin-c));
border-color: var(--bit-fin-lbl-sbr, var(--bit-fin-c));
Expand All @@ -226,13 +253,21 @@ $fin-private-properties: clr, clr-txt, clr-hover, clr-active, clr-focus, lbl-hei
}

&.bit-dis .bit-fin-lbl {
border-color: var(--bit-FileInput-disabled-border-color, #{$clr-brd-dis});
border-color: var(--bit-FileInput-outline-disabled-border-color, var(--bit-FileInput-disabled-border-color, #{$clr-brd-dis}));
background-color: transparent;
}
}

//Text: neither rule nor fill at rest, for a file input that should not outweigh the fields around it.
//Text: neither rule nor fill at rest, for a file input that should not outweigh the fields around it. Like
//Outline, its tier of the disabled background reaches the remove buttons alone.
.bit-fin-txt {
// Resolved on the parts that read it rather than on the root, so a public variable set on a part's own style
// (Styles.Label, Styles.RemoveButton) still reaches it.
.bit-fin-lbl,
.bit-fin-rbt {
--bit-fin-dis-bg: var(--bit-FileInput-text-disabled-background, var(--bit-FileInput-disabled-background, #{$clr-bg-dis}));
}

.bit-fin-lbl {
color: var(--bit-fin-lbl-sfg, var(--bit-fin-c));
border-color: var(--bit-fin-lbl-sbr, transparent);
Expand Down Expand Up @@ -514,11 +549,12 @@ $fin-private-properties: clr, clr-txt, clr-hover, clr-active, clr-focus, lbl-hei
&:disabled {
cursor: default;
color: var(--bit-FileInput-disabled-color, #{$clr-fg-dis});
background-color: var(--bit-FileInput-disabled-background, #{$clr-bg-dis});
// The disabled background of the variant, which each variant block resolves on the remove button.
background-color: var(--bit-fin-dis-bg, #{$clr-bg-dis});

@media (hover: hover) {
&:hover {
background-color: var(--bit-FileInput-disabled-background, #{$clr-bg-dis});
background-color: var(--bit-fin-dis-bg, #{$clr-bg-dis});
}
}
}
Expand Down
Loading
Loading