Skip to content

refactor(buttons): refactor buttons themes #1996

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
merged 10 commits into from
Nov 28, 2025
Merged

refactor(buttons): refactor buttons themes #1996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f097511
refactor(buttons): refactor buttons themes
didimmova Nov 25, 2025
5716477
test: Fixed tests for carousel indicator container and focus ring con…
rkaraivanov Nov 25, 2025
eff82b0
Merge branch 'master' into didimmova/update-buttons-theme
rkaraivanov Nov 25, 2025
c95fa20
Merge branch 'master' into didimmova/update-buttons-theme
rkaraivanov Nov 25, 2025
ea42754
fix(buttons): revert bootstrap outlined button icon styles
didimmova Nov 26, 2025
32bf815
chore(button): switch property places
didimmova Nov 26, 2025
9afd1fb
fix(buttons): address latest fluent comments and remove unnecessary i…
didimmova Nov 27, 2025
b06ede4
Merge branch 'master' into didimmova/update-buttons-theme
rkaraivanov Nov 27, 2025
6d6a960
Merge branch 'master' into didimmova/update-buttons-theme
simeonoff Nov 28, 2025
e579aa5
Merge branch 'master' into didimmova/update-buttons-theme
SisIvanova Nov 28, 2025
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
48 changes: 0 additions & 48 deletions src/components/button/themes/button/shared/button.bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,6 @@ $outlined-theme: $bootstrap-outlined;

:host([variant='outlined']) {
--component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});

[part~='base'] {
&:focus {
border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
}
}
}

:host([variant='contained']) {
Expand All @@ -28,67 +22,25 @@ $outlined-theme: $bootstrap-outlined;
--component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
}

:host(:not([disabled])[variant='flat']) [part~='base'],
:host(:not(:disabled)[variant='flat']) [part~='base'] {
&:active {
::slotted(igc-icon) {
color: var-get($flat-theme, 'active-foreground');
}
}
}

:host(:not([disabled])[variant='flat']) [part='base focused'],
:host(:not(:disabled)[variant='flat']) [part='base focused'] {
box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
}

:host(:not([disabled])[variant='outlined']) [part~='base'],
:host(:not(:disabled)[variant='outlined']) [part~='base'] {
&:active {
border-color: var-get($outlined-theme, 'active-border-color');

::slotted(igc-icon) {
color: var-get($outlined-theme, 'active-foreground');
}
}
}

:host(:not([disabled])[variant='outlined']) [part='base focused'],
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');

::slotted(igc-icon) {
color: var-get($outlined-theme, 'icon-color-hover');
}

&:active {
border-color: var-get($outlined-theme, 'active-border-color');
}
}

:host(:not([disabled])[variant='contained']) [part~='base'],
:host(:not(:disabled)[variant='contained']) [part~='base'] {
&:active {
::slotted(igc-icon) {
color: var-get($contained-theme, 'active-foreground');
}
}
}

:host(:not([disabled])[variant='contained']) [part='base focused'],
:host(:not(:disabled)[variant='contained']) [part='base focused'] {
box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
}

:host(:not([disabled])[variant='fab']) [part~='base'],
:host(:not(:disabled)[variant='fab']) [part~='base'] {
&:active {
::slotted(igc-icon) {
color: var-get($fab-theme, 'active-foreground');
}
}
}

:host(:not([disabled])[variant='fab']) [part='base focused'],
:host(:not(:disabled)[variant='fab']) [part='base focused'] {
box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color');
Expand Down
85 changes: 52 additions & 33 deletions src/components/button/themes/button/shared/button.common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ $outlined-theme: $material-outlined;
&:hover {
color: var-get($flat-theme, 'hover-foreground');
background: var-get($flat-theme, 'hover-background');
border-color: var-get($flat-theme, 'hover-border-color');

::slotted(igc-icon) {
color: var-get($flat-theme, 'icon-color-hover');
Expand All @@ -64,30 +65,34 @@ $outlined-theme: $material-outlined;
&:active {
color: var-get($flat-theme, 'active-foreground');
background: var-get($flat-theme, 'active-background');
border-color: var-get($flat-theme, 'active-border-color');

::slotted(igc-icon) {
color: var-get($flat-theme, 'active-foreground');
}
}
}

:host(:not([disabled])[variant='flat']) [part='base focused'],
:host(:not(:disabled)[variant='flat']) [part='base focused'] {
color: var-get($flat-theme, 'focus-visible-foreground');
background: var-get($flat-theme, 'focus-visible-background');

::slotted(igc-icon) {
color: var-get($flat-theme, 'icon-color');
}
border-color: var-get($flat-theme, 'focus-visible-border-color');

&:hover {
color: var-get($flat-theme, 'focus-hover-foreground');
background: var-get($flat-theme, 'focus-hover-background');

::slotted(igc-icon) {
color: var-get($flat-theme, 'icon-color-hover');
}
border-color: var-get($flat-theme, 'focus-visible-border-color');
}

&:active {
color: var-get($flat-theme, 'focus-foreground');
background: var-get($flat-theme, 'focus-background');
border-color: var-get($flat-theme, 'focus-border-color');

::slotted(igc-icon) {
color: var-get($flat-theme, 'focus-foreground');
}
}
}

Expand All @@ -103,6 +108,7 @@ $outlined-theme: $material-outlined;
&:hover {
color: var-get($outlined-theme, 'hover-foreground');
background: var-get($outlined-theme, 'hover-background');
border-color: var-get($outlined-theme, 'hover-border-color');

::slotted(igc-icon) {
color: var-get($outlined-theme, 'icon-color-hover');
Expand All @@ -112,31 +118,33 @@ $outlined-theme: $material-outlined;
&:active {
color: var-get($outlined-theme, 'active-foreground');
background: var-get($outlined-theme, 'active-background');
border-color: var-get($outlined-theme, 'active-border-color');

::slotted(igc-icon) {
color: var-get($outlined-theme, 'active-foreground');
}
}
}

:host(:not([disabled])[variant='outlined']) [part='base focused'],
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
color: var-get($outlined-theme, 'focus-visible-foreground');
background: var-get($outlined-theme, 'focus-visible-background');

::slotted(igc-icon) {
color: var-get($outlined-theme, 'icon-color');
}
border-color: var-get($outlined-theme, 'focus-visible-border-color');

&:hover {
color: var-get($outlined-theme, 'focus-hover-foreground');
background: var-get($outlined-theme, 'focus-hover-background');

::slotted(igc-icon) {
color: var-get($outlined-theme, 'icon-color-hover');
}
}

&:active {
color: var-get($outlined-theme, 'focus-foreground');
background: var-get($outlined-theme, 'focus-background');
border-color: var-get($outlined-theme, 'focus-border-color');

::slotted(igc-icon) {
color: var-get($outlined-theme, 'focus-foreground');
}
}
}

Expand All @@ -152,6 +160,7 @@ $outlined-theme: $material-outlined;
&:hover {
color: var-get($contained-theme, 'hover-foreground');
background: var-get($contained-theme, 'hover-background');
border-color: var-get($contained-theme, 'hover-border-color');

::slotted(igc-icon) {
color: var-get($contained-theme, 'icon-color-hover');
Expand All @@ -161,30 +170,33 @@ $outlined-theme: $material-outlined;
&:active {
color: var-get($contained-theme, 'active-foreground');
background: var-get($contained-theme, 'active-background');
border-color: var-get($contained-theme, 'active-border-color');

::slotted(igc-icon) {
color: var-get($contained-theme, 'active-foreground');
}
}
}

:host(:not([disabled])[variant='contained']) [part='base focused'],
:host(:not(:disabled)[variant='contained']) [part='base focused'] {
color: var-get($contained-theme, 'focus-visible-foreground');
background: var-get($contained-theme, 'focus-visible-background');

::slotted(igc-icon) {
color: var-get($contained-theme, 'icon-color');
}
border-color: var-get($contained-theme, 'focus-visible-border-color');

&:hover {
color: var-get($contained-theme, 'focus-hover-foreground');
background: var-get($contained-theme, 'focus-hover-background');

::slotted(igc-icon) {
color: var-get($contained-theme, 'icon-color-hover');
}
}

&:active {
color: var-get($contained-theme, 'focus-foreground');
background: var-get($contained-theme, 'focus-background');
border-color: var-get($contained-theme, 'focus-border-color');

::slotted(igc-icon) {
color: var-get($contained-theme, 'focus-foreground');
}
}
}

Expand All @@ -200,6 +212,7 @@ $outlined-theme: $material-outlined;
&:hover {
color: var-get($fab-theme, 'hover-foreground');
background: var-get($fab-theme, 'hover-background');
border-color: var-get($fab-theme, 'hover-border-color');

::slotted(igc-icon) {
color: var-get($fab-theme, 'icon-color-hover');
Expand All @@ -209,37 +222,41 @@ $outlined-theme: $material-outlined;
&:active {
color: var-get($fab-theme, 'active-foreground');
background: var-get($fab-theme, 'active-background');
border-color: var-get($fab-theme, 'active-border-color');

::slotted(igc-icon) {
color: var-get($fab-theme, 'active-foreground');
}
}
}

:host(:not([disabled])[variant='fab']) [part='base focused'],
:host(:not(:disabled)[variant='fab']) [part='base focused'] {
color: var-get($fab-theme, 'focus-visible-foreground');
background: var-get($fab-theme, 'focus-visible-background');

::slotted(igc-icon) {
color: var-get($fab-theme, 'icon-color');
}
border-color: var-get($fab-theme, 'focus-visible-border-color');

&:hover {
color: var-get($fab-theme, 'focus-hover-foreground');
background: var-get($fab-theme, 'focus-hover-background');

::slotted(igc-icon) {
color: var-get($fab-theme, 'icon-color-hover');
}
}

&:active {
color: var-get($fab-theme, 'focus-foreground');
background: var-get($fab-theme, 'focus-background');
border-color: var-get($fab-theme, 'focus-border-color');

::slotted(igc-icon) {
color: var-get($fab-theme, 'focus-foreground');
}
}
}

:host([disabled][variant='flat']) [part~='base'],
:host(:disabled[variant='flat']) [part~='base'] {
color: var-get($flat-theme, 'disabled-foreground');
background: var-get($flat-theme, 'disabled-background');
border-color: var-get($flat-theme, 'disabled-border-color');

::slotted(igc-icon) {
color: var-get($flat-theme, 'disabled-icon-color');
Expand All @@ -250,7 +267,7 @@ $outlined-theme: $material-outlined;
:host(:disabled[variant='outlined']) [part~='base'] {
color: var-get($outlined-theme, 'disabled-foreground');
background: var-get($outlined-theme, 'disabled-background');
border: rem(1px) solid var-get($outlined-theme, 'disabled-border-color');
border-color: var-get($outlined-theme, 'disabled-border-color');

::slotted(igc-icon) {
color: var-get($outlined-theme, 'disabled-icon-color');
Expand All @@ -261,6 +278,7 @@ $outlined-theme: $material-outlined;
:host(:disabled[variant='contained']) [part~='base'] {
color: var-get($contained-theme, 'disabled-foreground');
background: var-get($contained-theme, 'disabled-background');
border-color: var-get($contained-theme, 'disabled-border-color');

::slotted(igc-icon) {
color: var-get($contained-theme, 'disabled-icon-color');
Expand All @@ -271,6 +289,7 @@ $outlined-theme: $material-outlined;
:host(:disabled[variant='fab']) [part~='base'] {
color: var-get($fab-theme, 'disabled-foreground');
background: var-get($fab-theme, 'disabled-background');
border-color: var-get($fab-theme, 'disabled-border-color');

::slotted(igc-icon) {
color: var-get($fab-theme, 'disabled-icon-color');
Expand Down
20 changes: 16 additions & 4 deletions src/components/button/themes/button/shared/button.fluent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,15 @@ $outlined-btn-indent: rem(2px);

:host(:not([disabled])[variant='flat']) [part='base focused'],
:host(:not(:disabled)[variant='flat']) [part='base focused'] {
&,
&:hover {
border: rem(1px) solid var-get($flat-theme, 'active-border-color');
}

&:active {
border: rem(1px) solid var-get($flat-theme, 'focus-border-color');
}

&::after {
box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
}
Expand All @@ -65,6 +74,11 @@ $outlined-btn-indent: rem(2px);

:host(:not([disabled])[variant='outlined']) [part='base focused'],
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
&,
&:active {
border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
}

&::after {
inset-block-start: $outlined-btn-indent;
inset-inline-start: $outlined-btn-indent;
Expand All @@ -76,8 +90,7 @@ $outlined-btn-indent: rem(2px);

:host(:not([disabled])[variant='contained']) [part='base focused'],
:host(:not(:disabled)[variant='contained']) [part='base focused'] {
color: var-get($contained-theme, 'focus-visible-foreground');
background: var-get($contained-theme, 'focus-visible-background');
border: rem(1px) solid var-get($contained-theme, 'active-border-color');
position: relative;

&::after {
Expand All @@ -87,8 +100,7 @@ $outlined-btn-indent: rem(2px);

:host(:not([disabled])[variant='fab']) [part='base focused'],
:host(:not(:disabled)[variant='fab']) [part='base focused'] {
color: var-get($fab-theme, 'focus-visible-foreground');
background: var-get($fab-theme, 'focus-visible-background');
border: rem(1px) solid var-get($fab-theme, 'active-border-color');
position: relative;

&::after {
Expand Down
Loading