Skip to content

BlazorUI theme improvements ii (#12320) #12369

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

Open
msynk wants to merge 31 commits into
base: develop
Choose a base branch
from
Open

BlazorUI theme improvements ii (#12320) #12369

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
0841db6
first step
msynk May 11, 2026
eee52c7
add focus state
msynk May 19, 2026
4d4e8e0
add per-role disabled color
msynk May 22, 2026
f68cd9f
Merge branch 'develop' into 12320-blazorui-theme-improvements-ii
msynk May 22, 2026
8539a1a
resolve review comments
msynk May 22, 2026
530329a
fix tests
msynk May 22, 2026
6a96955
resolve review comments II
msynk May 23, 2026
e904074
resolve review comments III
msynk May 24, 2026
243616e
resovle review comments IV
msynk May 24, 2026
b68b99c
resolve review comments V
msynk May 24, 2026
41b26b0
resolve review comments VI
msynk May 24, 2026
1ec0961
resolve review comments VII
msynk May 24, 2026
50c39e5
resolve review comments VIII
msynk May 24, 2026
e95f0a1
resolve review comments IX
msynk May 25, 2026
c3648d6
resolve review comments X
msynk May 25, 2026
e229a79
resolve review comments XI
msynk May 25, 2026
48ec6d8
resolve review comments XII
msynk May 25, 2026
35ab145
resolve review comments XIII
msynk May 27, 2026
42ad8c5
resolve local review findings
msynk May 27, 2026
12fdde4
Merge branch 'develop' into 12320-blazorui-theme-improvements-ii
msynk May 27, 2026
478bf9c
resolve review comments XIV
msynk May 27, 2026
6667d90
resolve review comments XV
msynk May 28, 2026
ad55ba0
resolve review comments XVI
msynk May 28, 2026
d304174
resolve review comments XVII
msynk May 29, 2026
f9411e9
resolve review comments XVIII
msynk May 29, 2026
dbafa81
Merge branch 'develop' into 12320-blazorui-theme-improvements-ii
msynk May 30, 2026
8058ae1
resolve review comments
msynk May 30, 2026
254280e
resovle review comments XIX
msynk May 31, 2026
fab1c3c
update media queries in BitMediaQuery
msynk May 31, 2026
d16571a
resolve review comments XX
msynk Jun 4, 2026
b0abace
resolve local review findings
msynk Jun 14, 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
24 changes: 20 additions & 4 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,15 @@
}

&:focus-visible {
outline: none;
@include focus-ring(var(--bit-acb-clr-hover));
border-radius: $shp-border-radius;
Comment thread
msynk marked this conversation as resolved.
box-shadow: 0 0 0 spacing(0.25) var(--bit-acb-clr-hover);
}

&.bit-dis {
cursor: default;
color: $clr-fg-dis;
pointer-events: none;
--bit-acb-clr-ico: #{$clr-fg-dis};
color: var(--bit-acb-clr-dis-text);
--bit-acb-clr-ico: var(--bit-acb-clr-dis-text);
}
}

Expand Down Expand Up @@ -118,103 +117,120 @@
--bit-acb-clr-ico: #{$clr-pri};
--bit-acb-clr-hover: #{$clr-pri-hover};
--bit-acb-clr-active: #{$clr-pri-active};
--bit-acb-clr-dis-text: #{$clr-pri-dis-text};
}

.bit-acb-sec {
--bit-acb-clr-ico: #{$clr-sec};
--bit-acb-clr-hover: #{$clr-sec-hover};
--bit-acb-clr-active: #{$clr-sec-active};
--bit-acb-clr-dis-text: #{$clr-sec-dis-text};
}

.bit-acb-ter {
--bit-acb-clr-ico: #{$clr-ter};
--bit-acb-clr-hover: #{$clr-ter-hover};
--bit-acb-clr-active: #{$clr-ter-active};
--bit-acb-clr-dis-text: #{$clr-ter-dis-text};
}

.bit-acb-inf {
--bit-acb-clr-ico: #{$clr-inf};
--bit-acb-clr-hover: #{$clr-inf-hover};
--bit-acb-clr-active: #{$clr-inf-active};
--bit-acb-clr-dis-text: #{$clr-inf-dis-text};
}

.bit-acb-suc {
--bit-acb-clr-ico: #{$clr-suc};
--bit-acb-clr-hover: #{$clr-suc-hover};
--bit-acb-clr-active: #{$clr-suc-active};
--bit-acb-clr-dis-text: #{$clr-suc-dis-text};
}

.bit-acb-wrn {
--bit-acb-clr-ico: #{$clr-wrn};
--bit-acb-clr-hover: #{$clr-wrn-hover};
--bit-acb-clr-active: #{$clr-wrn-active};
--bit-acb-clr-dis-text: #{$clr-wrn-dis-text};
}

.bit-acb-swr {
--bit-acb-clr-ico: #{$clr-swr};
--bit-acb-clr-hover: #{$clr-swr-hover};
--bit-acb-clr-active: #{$clr-swr-active};
--bit-acb-clr-dis-text: #{$clr-swr-dis-text};
}

.bit-acb-err {
--bit-acb-clr-ico: #{$clr-err};
--bit-acb-clr-hover: #{$clr-err-hover};
--bit-acb-clr-active: #{$clr-err-active};
--bit-acb-clr-dis-text: #{$clr-err-dis-text};
}


.bit-acb-pbg {
--bit-acb-clr-ico: #{$clr-bg-pri};
--bit-acb-clr-hover: #{$clr-bg-pri-hover};
--bit-acb-clr-active: #{$clr-bg-pri-active};
--bit-acb-clr-dis-text: #{$clr-bg-pri-dis-text};
}

.bit-acb-sbg {
--bit-acb-clr-ico: #{$clr-bg-sec};
--bit-acb-clr-hover: #{$clr-bg-sec-hover};
--bit-acb-clr-active: #{$clr-bg-sec-active};
--bit-acb-clr-dis-text: #{$clr-bg-sec-dis-text};
}

.bit-acb-tbg {
--bit-acb-clr-ico: #{$clr-bg-ter};
--bit-acb-clr-hover: #{$clr-bg-ter-hover};
--bit-acb-clr-active: #{$clr-bg-ter-active};
--bit-acb-clr-dis-text: #{$clr-bg-ter-dis-text};
}

.bit-acb-pfg {
--bit-acb-clr-ico: #{$clr-fg-pri};
--bit-acb-clr-hover: #{$clr-fg-pri-hover};
--bit-acb-clr-active: #{$clr-fg-pri-active};
--bit-acb-clr-dis-text: #{$clr-fg-pri-dis-text};
}

.bit-acb-sfg {
--bit-acb-clr-ico: #{$clr-fg-sec};
--bit-acb-clr-hover: #{$clr-fg-sec-hover};
--bit-acb-clr-active: #{$clr-fg-sec-active};
--bit-acb-clr-dis-text: #{$clr-fg-sec-dis-text};
}

.bit-acb-tfg {
--bit-acb-clr-ico: #{$clr-fg-ter};
--bit-acb-clr-hover: #{$clr-fg-ter-hover};
--bit-acb-clr-active: #{$clr-fg-ter-active};
--bit-acb-clr-dis-text: #{$clr-fg-ter-dis-text};
}

.bit-acb-pbr {
--bit-acb-clr-ico: #{$clr-brd-pri};
--bit-acb-clr-hover: #{$clr-brd-pri-hover};
--bit-acb-clr-active: #{$clr-brd-pri-active};
--bit-acb-clr-dis-text: #{$clr-brd-pri-dis-text};
}

.bit-acb-sbr {
--bit-acb-clr-ico: #{$clr-brd-sec};
--bit-acb-clr-hover: #{$clr-brd-sec-hover};
--bit-acb-clr-active: #{$clr-brd-sec-active};
--bit-acb-clr-dis-text: #{$clr-brd-sec-dis-text};
}

.bit-acb-tbr {
--bit-acb-clr-ico: #{$clr-brd-ter};
--bit-acb-clr-hover: #{$clr-brd-ter-hover};
--bit-acb-clr-active: #{$clr-brd-ter-active};
--bit-acb-clr-dis-text: #{$clr-brd-ter-dis-text};
}


Expand Down
56 changes: 50 additions & 6 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,14 @@
border-width: $shp-border-width;
border-style: $shp-border-style;
border-radius: $shp-border-radius;
--bit-btn-clr-bg-dis: #{$clr-bg-dis};
--bit-btn-clr-brd-dis: #{$clr-brd-dis};
--bit-btn-float-offset: #{spacing(2)};

&:focus-visible {
@include focus-ring(var(--bit-btn-clr));
}
Comment thread
msynk marked this conversation as resolved.

&.bit-dis {
cursor: default;
color: $clr-fg-dis;
pointer-events: none;
}

Expand Down Expand Up @@ -130,8 +131,9 @@
}

&.bit-dis {
border-color: var(--bit-btn-clr-brd-dis);
background-color: var(--bit-btn-clr-bg-dis);
color: var(--bit-btn-clr-dis-text);
border-color: var(--bit-btn-clr-dis);
background-color: var(--bit-btn-clr-dis);
}
}

Expand All @@ -153,7 +155,9 @@
}

&.bit-dis {
border-color: var(--bit-btn-clr-brd-dis);
color: var(--bit-btn-clr-dis-text);
border-color: var(--bit-btn-clr-dis);
background-color: transparent;
}
}

Expand All @@ -173,6 +177,12 @@
color: var(--bit-btn-clr-txt);
background-color: var(--bit-btn-clr-active);
}

&.bit-dis {
color: var(--bit-btn-clr-dis-text);
border-color: transparent;
background-color: transparent;
}
}


Expand All @@ -182,6 +192,8 @@
--bit-btn-clr-hover: #{$clr-pri-hover};
--bit-btn-clr-active: #{$clr-pri-active};
--bit-btn-clr-spn: #{$clr-pri-dark};
--bit-btn-clr-dis: #{$clr-pri-dis};
--bit-btn-clr-dis-text: #{$clr-pri-dis-text};
}

.bit-btn-sec {
Expand All @@ -190,6 +202,8 @@
--bit-btn-clr-hover: #{$clr-sec-hover};
--bit-btn-clr-active: #{$clr-sec-active};
--bit-btn-clr-spn: #{$clr-sec-dark};
--bit-btn-clr-dis: #{$clr-sec-dis};
--bit-btn-clr-dis-text: #{$clr-sec-dis-text};
}

.bit-btn-ter {
Expand All @@ -198,6 +212,8 @@
--bit-btn-clr-hover: #{$clr-ter-hover};
--bit-btn-clr-active: #{$clr-ter-active};
--bit-btn-clr-spn: #{$clr-ter-dark};
--bit-btn-clr-dis: #{$clr-ter-dis};
--bit-btn-clr-dis-text: #{$clr-ter-dis-text};
}

.bit-btn-inf {
Expand All @@ -206,6 +222,8 @@
--bit-btn-clr-hover: #{$clr-inf-hover};
--bit-btn-clr-active: #{$clr-inf-active};
--bit-btn-clr-spn: #{$clr-inf-dark};
--bit-btn-clr-dis: #{$clr-inf-dis};
--bit-btn-clr-dis-text: #{$clr-inf-dis-text};
}

.bit-btn-suc {
Expand All @@ -214,6 +232,8 @@
--bit-btn-clr-hover: #{$clr-suc-hover};
--bit-btn-clr-active: #{$clr-suc-active};
--bit-btn-clr-spn: #{$clr-suc-dark};
--bit-btn-clr-dis: #{$clr-suc-dis};
--bit-btn-clr-dis-text: #{$clr-suc-dis-text};
}

.bit-btn-wrn {
Expand All @@ -222,6 +242,8 @@
--bit-btn-clr-hover: #{$clr-wrn-hover};
--bit-btn-clr-active: #{$clr-wrn-active};
--bit-btn-clr-spn: #{$clr-wrn-dark};
--bit-btn-clr-dis: #{$clr-wrn-dis};
--bit-btn-clr-dis-text: #{$clr-wrn-dis-text};
}

.bit-btn-swr {
Expand All @@ -230,6 +252,8 @@
--bit-btn-clr-hover: #{$clr-swr-hover};
--bit-btn-clr-active: #{$clr-swr-active};
--bit-btn-clr-spn: #{$clr-swr-dark};
--bit-btn-clr-dis: #{$clr-swr-dis};
--bit-btn-clr-dis-text: #{$clr-swr-dis-text};
}

.bit-btn-err {
Expand All @@ -238,6 +262,8 @@
--bit-btn-clr-hover: #{$clr-err-hover};
--bit-btn-clr-active: #{$clr-err-active};
--bit-btn-clr-spn: #{$clr-err-dark};
--bit-btn-clr-dis: #{$clr-err-dis};
--bit-btn-clr-dis-text: #{$clr-err-dis-text};
}

.bit-btn-pbg {
Expand All @@ -246,6 +272,8 @@
--bit-btn-clr-hover: #{$clr-bg-pri-hover};
--bit-btn-clr-active: #{$clr-bg-pri-active};
--bit-btn-clr-spn: #{$clr-fg-pri};
--bit-btn-clr-dis: #{$clr-bg-pri-dis};
--bit-btn-clr-dis-text: #{$clr-bg-pri-dis-text};
}

.bit-btn-sbg {
Expand All @@ -254,6 +282,8 @@
--bit-btn-clr-hover: #{$clr-bg-sec-hover};
--bit-btn-clr-active: #{$clr-bg-sec-active};
--bit-btn-clr-spn: #{$clr-fg-pri};
--bit-btn-clr-dis: #{$clr-bg-sec-dis};
--bit-btn-clr-dis-text: #{$clr-bg-sec-dis-text};
}

.bit-btn-tbg {
Expand All @@ -262,6 +292,8 @@
--bit-btn-clr-hover: #{$clr-bg-ter-hover};
--bit-btn-clr-active: #{$clr-bg-ter-active};
--bit-btn-clr-spn: #{$clr-fg-pri};
--bit-btn-clr-dis: #{$clr-bg-ter-dis};
--bit-btn-clr-dis-text: #{$clr-bg-ter-dis-text};
}

.bit-btn-pfg {
Expand All @@ -270,6 +302,8 @@
--bit-btn-clr-hover: #{$clr-fg-pri-hover};
--bit-btn-clr-active: #{$clr-fg-pri-active};
--bit-btn-clr-spn: #{$clr-bg-pri};
--bit-btn-clr-dis: #{$clr-fg-pri-dis};
--bit-btn-clr-dis-text: #{$clr-fg-pri-dis-text};
}

.bit-btn-sfg {
Expand All @@ -278,6 +312,8 @@
--bit-btn-clr-hover: #{$clr-fg-sec-hover};
--bit-btn-clr-active: #{$clr-fg-sec-active};
--bit-btn-clr-spn: #{$clr-bg-pri};
--bit-btn-clr-dis: #{$clr-fg-sec-dis};
--bit-btn-clr-dis-text: #{$clr-fg-sec-dis-text};
}

.bit-btn-tfg {
Expand All @@ -286,6 +322,8 @@
--bit-btn-clr-hover: #{$clr-fg-ter-hover};
--bit-btn-clr-active: #{$clr-fg-ter-active};
--bit-btn-clr-spn: #{$clr-bg-pri};
--bit-btn-clr-dis: #{$clr-fg-ter-dis};
--bit-btn-clr-dis-text: #{$clr-fg-ter-dis-text};
}

.bit-btn-pbr {
Expand All @@ -294,6 +332,8 @@
--bit-btn-clr-hover: #{$clr-brd-pri-hover};
--bit-btn-clr-active: #{$clr-brd-pri-active};
--bit-btn-clr-spn: #{$clr-fg-pri};
--bit-btn-clr-dis: #{$clr-brd-pri-dis};
--bit-btn-clr-dis-text: #{$clr-brd-pri-dis-text};
}

.bit-btn-sbr {
Expand All @@ -302,6 +342,8 @@
--bit-btn-clr-hover: #{$clr-brd-sec-hover};
--bit-btn-clr-active: #{$clr-brd-sec-active};
--bit-btn-clr-spn: #{$clr-fg-pri};
--bit-btn-clr-dis: #{$clr-brd-sec-dis};
--bit-btn-clr-dis-text: #{$clr-brd-sec-dis-text};
}

.bit-btn-tbr {
Expand All @@ -310,6 +352,8 @@
--bit-btn-clr-hover: #{$clr-brd-ter-hover};
--bit-btn-clr-active: #{$clr-brd-ter-active};
--bit-btn-clr-spn: #{$clr-fg-pri};
--bit-btn-clr-dis: #{$clr-brd-ter-dis};
--bit-btn-clr-dis-text: #{$clr-brd-ter-dis-text};
}


Expand Down
Loading