Skip to content

Commit c3e5a17

Browse files
desig9steinsimeonoff
desig9stein
and
simeonoff
authored
Update fluent theme to match the MS fluent (#11265)
* fix:(button) fluent theme and palette colors. * fix:(button) remove ripple effect from sample buttons since it's confusing for them that do not use it. * fix:(button) update fluent themes styles to match the MS fluent theme * fix:(button) update fluent themes disabled colors * fix:(button) fix disabled icon colors for fluent theme * Update _variables.scss * fix:(button) fix dark fulent colors. - fix button-group button border in fluent theme * fix(demos): page heading icon color Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent 2ecc654 commit c3e5a17

File tree

9 files changed

+387
-91
lines changed

9 files changed

+387
-91
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

+1
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@
219219

220220
&[igxButton] {
221221
border-radius: 0;
222+
border-color: var-get($theme, 'item-border-color');
222223
}
223224

224225
&:not(:nth-child(0)) {

‎projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

+169-14
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
/// @param {Color} $hover-foreground [null] - The hover text color of the button.
2323
/// @param {Color} $focus-background [null] - The focus background color of the button.
2424
/// @param {Color} $focus-foreground [null] - The focus text color of the button.
25+
/// @param {Color} $active-background [null] - The active background of the button.
26+
/// @param {Color} $active-foreground [null] - The active text color of the button.
2527
/// @param {Number} $border-radius [null] - The border radius of the button.
2628
/// @param {Color} $border-color [null] - The border color of the button.
2729
/// @param {Color} $shadow-color [null] - The shadow color of the button.
@@ -61,6 +63,9 @@
6163
$focus-background: null,
6264
$focus-foreground: null,
6365
66+
$active-background: null,
67+
$active-foreground: null,
68+
6469
$border-radius: null,
6570
$border-color: null,
6671
@@ -159,6 +164,9 @@
159164
focus-background: $focus-background,
160165
focus-foreground: $focus-foreground,
161166

167+
active-background: $active-background,
168+
active-foreground: $active-foreground,
169+
162170
border-radius: $_border-radius,
163171
border-color: $border-color,
164172

@@ -224,7 +232,13 @@
224232
$button-floating-width: rem(56px);
225233
$button-floating-height: $button-floating-width;
226234

227-
$button-icon-width: rem(36px, 16px);
235+
$button-icon-width: map.get((
236+
material: rem(36px, 16px),
237+
fluent: rem(32px, 16px),
238+
bootstrap: rem(36px, 16px),
239+
indigo-design: rem(36px, 16px),
240+
), $variant);
241+
228242
$button-icon-height: $button-icon-width;
229243
$button-icon-font-size: rem(24px, 24px);
230244
$button-icon-padding: 0;
@@ -322,7 +336,13 @@
322336
compact: rem(4px)
323337
);
324338

325-
$icon-in-button-size: rem(18px);
339+
$icon-sizes: map.get((
340+
material: rem(18px),
341+
fluent: rem(16px),
342+
bootstrap: rem(18px),
343+
indigo-design: rem(18px),
344+
), $variant);
345+
$icon-in-button-size: $icon-sizes;
326346

327347
$raised-shadow: map.get((
328348
material: var-get($raised-theme, 'resting-shadow'),
@@ -429,17 +449,32 @@
429449
color: var-get($flat-theme, 'foreground');
430450
border-radius: var-get($flat-theme, 'border-radius');
431451

452+
432453
&:hover {
433454
background: var-get($flat-theme, 'hover-background');
434455
color: var-get($flat-theme, 'hover-foreground');
435456
}
436457

437458
&:focus,
438459
&:active {
439-
background: var-get($flat-theme, 'focus-background');
440-
color: var-get($flat-theme, 'focus-foreground');
460+
@if($variant != 'fluent') {
461+
background: var-get($flat-theme, 'focus-background');
462+
color: var-get($flat-theme, 'focus-foreground');
463+
}
441464
box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
442465
}
466+
467+
@if($variant == 'fluent') {
468+
border: rem(1px) solid transparent;
469+
470+
&:active {
471+
color: var-get($flat-theme, 'active-foreground');
472+
}
473+
474+
&:focus-visible {
475+
border-color: var-get($flat-theme, 'border-color');
476+
}
477+
}
443478
}
444479

445480
%igx-button--outlined {
@@ -466,10 +501,33 @@
466501

467502
&:focus,
468503
&:active {
469-
background: var-get($outlined-theme, 'focus-background');
504+
@if($variant != 'fluent') {
505+
background: var-get($outlined-theme, 'focus-background');
506+
}
470507
color: var-get($outlined-theme, 'focus-foreground');
471508
box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
472509
}
510+
511+
@if($variant == 'fluent') {
512+
&:active {
513+
background: var-get($outlined-theme, 'active-background');
514+
color: var-get($outlined-theme, 'active-foreground');
515+
}
516+
517+
&:focus-visible {
518+
&::after {
519+
$outline-btn-indent: rem(2px);
520+
content: '';
521+
position: absolute;
522+
top: $outline-btn-indent;
523+
left: $outline-btn-indent;
524+
pointer-events: none;
525+
width: calc(100% - (#{$outline-btn-indent} * 2));
526+
height: calc(100% - (#{$outline-btn-indent} * 2));
527+
box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
528+
}
529+
}
530+
}
473531
}
474532

475533
%igx-button--outlined-cosy {
@@ -504,15 +562,38 @@
504562

505563
&:focus,
506564
&:active {
507-
color: var-get($raised-theme, 'focus-foreground');
508-
background: var-get($raised-theme, 'focus-background');
509-
510565
@if $variant == 'material' or $variant == 'fluent' {
511566
box-shadow: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), $raised-shadow--focus;
512567
} @else {
513568
box-shadow: $raised-shadow--focus;
514569
}
515570
}
571+
572+
&:focus {
573+
color: var-get($raised-theme, 'focus-foreground');
574+
background: var-get($raised-theme, 'focus-background');
575+
}
576+
577+
&:active {
578+
color: var-get($raised-theme, 'active-foreground');
579+
background: var-get($raised-theme, 'active-background');
580+
}
581+
582+
@if($variant == 'fluent') {
583+
&:focus-visible {
584+
&::after {
585+
$outline-btn-indent: rem(3px);
586+
content: '';
587+
position: absolute;
588+
top: $outline-btn-indent;
589+
left: $outline-btn-indent;
590+
pointer-events: none;
591+
width: calc(100% - (#{$outline-btn-indent} * 2));
592+
height: calc(100% - (#{$outline-btn-indent} * 2));
593+
box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
594+
}
595+
}
596+
}
516597
}
517598

518599
%igx-button--round {
@@ -551,16 +632,40 @@
551632

552633
&:focus,
553634
&:active {
554-
color: var-get($fab-theme, 'focus-foreground');
555-
background: var-get($fab-theme, 'focus-background');
556-
557635
@if $variant == 'material' or $variant == 'fluent' {
558636
box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--focus;
559637
} @else {
560638
box-shadow: $raised-shadow--focus;
561639
}
562640
}
563641

642+
&:focus {
643+
color: var-get($raised-theme, 'focus-foreground');
644+
background: var-get($raised-theme, 'focus-background');
645+
}
646+
647+
&:active {
648+
color: var-get($raised-theme, 'active-foreground');
649+
background: var-get($raised-theme, 'active-background');
650+
}
651+
652+
@if($variant == 'fluent') {
653+
&:focus-visible {
654+
&::after {
655+
$outline-btn-indent: rem(3px);
656+
content: '';
657+
position: absolute;
658+
top: $outline-btn-indent;
659+
left: $outline-btn-indent;
660+
pointer-events: none;
661+
border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$outline-btn-indent});
662+
width: calc(100% - (#{$outline-btn-indent} * 2));
663+
height: calc(100% - (#{$outline-btn-indent} * 2));
664+
box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
665+
}
666+
}
667+
}
668+
564669
@include icon-w-margin(
565670
map.get($icon-in-button-margin, 'comfortable'),
566671
$left
@@ -600,17 +705,57 @@
600705
background: var-get($icon-theme, 'background');
601706
border-radius: var-get($icon-theme, 'border-radius');
602707

708+
@if $variant == 'fluent' {
709+
border: 1px solid transparent;
710+
}
711+
603712
&:hover {
604-
transition: $button-transition;
713+
@if $variant != 'fluent' {
714+
transition: $button-transition;
715+
}
716+
605717
color: var-get($icon-theme, 'hover-foreground');
606718
background: var-get($icon-theme, 'hover-background');
607719
}
608720

609-
&:focus,
721+
&:focus {
722+
color: var-get($icon-theme, 'focus-foreground');
723+
724+
@if $variant != 'fluent' {
725+
background: var-get($icon-theme, 'focus-background');
726+
}
727+
728+
&:hover {
729+
color: var-get($icon-theme, 'hover-foreground');
730+
background: var-get($icon-theme, 'hover-background');
731+
}
732+
733+
&:active {
734+
color: var-get($icon-theme, 'active-foreground');
735+
background: var-get($icon-theme, 'active-background');
736+
}
737+
}
738+
610739
&:active {
740+
color: var-get($icon-theme, 'active-foreground');
741+
background: var-get($icon-theme, 'active-background');
742+
}
743+
744+
&:focus-visible {
611745
color: var-get($icon-theme, 'focus-foreground');
612-
background: var-get($icon-theme, 'focus-background');
613746

747+
@if $variant == 'fluent' {
748+
border: rem(1px) solid var-get($icon-theme, 'border-color') ;
749+
}
750+
751+
&:hover {
752+
color: var-get($icon-theme, 'hover-foreground');
753+
background: var-get($icon-theme, 'hover-background');
754+
}
755+
}
756+
757+
&:focus,
758+
&:active {
614759
@if $variant == 'material' or $variant == 'fluent' {
615760
box-shadow: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), $icon-shadow;
616761
} @else {
@@ -625,6 +770,16 @@
625770
color: var-get($flat-theme, 'disabled-foreground');
626771
background: transparent;
627772

773+
@if $variant == 'fluent' {
774+
&%igx-button--outlined {
775+
background: var-get($flat-theme, 'disabled-background');
776+
}
777+
778+
&%igx-button--icon {
779+
background: var-get($flat-theme, 'disabled-background');
780+
}
781+
}
782+
628783
&%igx-button--raised,
629784
&%igx-button--fab {
630785
background: var-get($flat-theme, 'disabled-background');

‎projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -239,8 +239,8 @@ $dark-fluent-excel-palette: $fluent-excel-dark-palette;
239239

240240
/// @access private
241241
$fluent-word-palette: palette(
242-
$primary: #2b579a,
243-
$secondary: #2b579a,
242+
$primary: #0078d4,
243+
$secondary: #0078d4,
244244
$success: #107c10,
245245
$warn: #797673,
246246
$error: #a80000,

0 commit comments

Comments
 (0)