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]>
IgniteUI · Mar 24, 2022 · c3e5a17 · c3e5a17
1 parent 2ecc654
commit c3e5a17
Show file tree

Hide file tree

Showing 9 changed files with 387 additions and 91 deletions.
diff --git a/...cts/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/...cts/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
@@ -219,6 +219,7 @@
 
         &[igxButton] {
             border-radius: 0;
+            border-color: var-get($theme, 'item-border-color');
         }
 
         &:not(:nth-child(0)) {

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
@@ -22,6 +22,8 @@
 /// @param {Color} $hover-foreground [null] - The hover text color of the button.
 /// @param {Color} $focus-background [null] - The focus background color of the button.
 /// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
 /// @param {Number} $border-radius [null] - The border radius of the button.
 /// @param {Color} $border-color [null] - The border color of the button.
 /// @param {Color} $shadow-color [null] - The shadow color of the button.
@@ -61,6 +63,9 @@
     $focus-background: null,
     $focus-foreground: null,
 
+    $active-background: null,
+    $active-foreground: null,
+
     $border-radius: null,
     $border-color: null,
 
@@ -159,6 +164,9 @@
                 focus-background: $focus-background,
                 focus-foreground: $focus-foreground,
 
+                active-background: $active-background,
+                active-foreground: $active-foreground,
+
                 border-radius: $_border-radius,
                 border-color: $border-color,
 
@@ -224,7 +232,13 @@
     $button-floating-width: rem(56px);
     $button-floating-height: $button-floating-width;
 
-    $button-icon-width: rem(36px, 16px);
+    $button-icon-width: map.get((
+        material: rem(36px, 16px),
+        fluent: rem(32px, 16px),
+        bootstrap: rem(36px, 16px),
+        indigo-design: rem(36px, 16px),
+    ), $variant);
+
     $button-icon-height: $button-icon-width;
     $button-icon-font-size: rem(24px, 24px);
     $button-icon-padding: 0;
@@ -322,7 +336,13 @@
         compact: rem(4px)
     );
 
-    $icon-in-button-size: rem(18px);
+    $icon-sizes: map.get((
+        material: rem(18px),
+        fluent: rem(16px),
+        bootstrap: rem(18px),
+        indigo-design: rem(18px),
+    ), $variant);
+    $icon-in-button-size: $icon-sizes;
 
     $raised-shadow: map.get((
         material: var-get($raised-theme, 'resting-shadow'),
@@ -429,17 +449,32 @@
         color: var-get($flat-theme, 'foreground');
         border-radius: var-get($flat-theme, 'border-radius');
 
+
         &:hover {
             background: var-get($flat-theme, 'hover-background');
             color: var-get($flat-theme, 'hover-foreground');
         }
 
         &:focus,
         &:active {
-            background: var-get($flat-theme, 'focus-background');
-            color: var-get($flat-theme, 'focus-foreground');
+            @if($variant != 'fluent') {
+                background: var-get($flat-theme, 'focus-background');
+                color: var-get($flat-theme, 'focus-foreground');
+            }
             box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
         }
+
+        @if($variant == 'fluent') {
+            border: rem(1px) solid transparent;
+
+            &:active {
+                color: var-get($flat-theme, 'active-foreground');
+            }
+
+            &:focus-visible {
+                border-color: var-get($flat-theme, 'border-color');
+            }
+        }
     }
 
     %igx-button--outlined {
@@ -466,10 +501,33 @@
 
         &:focus,
         &:active {
-            background: var-get($outlined-theme, 'focus-background');
+            @if($variant != 'fluent') {
+                background: var-get($outlined-theme, 'focus-background');
+            }
             color: var-get($outlined-theme, 'focus-foreground');
             box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
         }
+
+        @if($variant == 'fluent') {
+            &:active {
+                background: var-get($outlined-theme, 'active-background');
+                color: var-get($outlined-theme, 'active-foreground');
+            }
+
+            &:focus-visible {
+                &::after {
+                    $outline-btn-indent: rem(2px);
+                    content: '';
+                    position: absolute;
+                    top: $outline-btn-indent;
+                    left: $outline-btn-indent;
+                    pointer-events: none;
+                    width: calc(100% - (#{$outline-btn-indent} * 2));
+                    height: calc(100% - (#{$outline-btn-indent} * 2));
+                    box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
+                }
+            }
+        }
     }
 
     %igx-button--outlined-cosy {
@@ -504,15 +562,38 @@
 
         &:focus,
         &:active {
-            color: var-get($raised-theme, 'focus-foreground');
-            background: var-get($raised-theme, 'focus-background');
-
             @if $variant == 'material' or  $variant == 'fluent' {
                 box-shadow: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), $raised-shadow--focus;
             } @else {
                 box-shadow: $raised-shadow--focus;
             }
         }
+
+        &:focus {
+            color: var-get($raised-theme, 'focus-foreground');
+            background: var-get($raised-theme, 'focus-background');
+        }
+
+        &:active {
+            color: var-get($raised-theme, 'active-foreground');
+            background: var-get($raised-theme, 'active-background');
+        }
+
+        @if($variant == 'fluent') {
+            &:focus-visible {
+                &::after {
+                    $outline-btn-indent: rem(3px);
+                    content: '';
+                    position: absolute;
+                    top: $outline-btn-indent;
+                    left: $outline-btn-indent;
+                    pointer-events: none;
+                    width: calc(100% - (#{$outline-btn-indent} * 2));
+                    height: calc(100% - (#{$outline-btn-indent} * 2));
+                    box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
+                }
+            }
+        }
     }
 
     %igx-button--round {
@@ -551,16 +632,40 @@
 
         &:focus,
         &:active {
-            color: var-get($fab-theme, 'focus-foreground');
-            background: var-get($fab-theme, 'focus-background');
-
             @if $variant == 'material' or  $variant == 'fluent' {
                 box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--focus;
             } @else {
                 box-shadow: $raised-shadow--focus;
             }
         }
 
+        &:focus {
+            color: var-get($raised-theme, 'focus-foreground');
+            background: var-get($raised-theme, 'focus-background');
+        }
+
+        &:active {
+            color: var-get($raised-theme, 'active-foreground');
+            background: var-get($raised-theme, 'active-background');
+        }
+
+        @if($variant == 'fluent') {
+            &:focus-visible {
+                &::after {
+                    $outline-btn-indent: rem(3px);
+                    content: '';
+                    position: absolute;
+                    top: $outline-btn-indent;
+                    left: $outline-btn-indent;
+                    pointer-events: none;
+                    border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$outline-btn-indent});
+                    width: calc(100% - (#{$outline-btn-indent} * 2));
+                    height: calc(100% - (#{$outline-btn-indent} * 2));
+                    box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
+                }
+            }
+        }
+
         @include icon-w-margin(
             map.get($icon-in-button-margin, 'comfortable'),
             $left
@@ -600,17 +705,57 @@
         background: var-get($icon-theme, 'background');
         border-radius: var-get($icon-theme, 'border-radius');
 
+        @if $variant == 'fluent' {
+            border: 1px solid transparent;
+        }
+
         &:hover {
-            transition: $button-transition;
+            @if $variant != 'fluent' {
+                transition: $button-transition;
+            }
+
             color: var-get($icon-theme, 'hover-foreground');
             background: var-get($icon-theme, 'hover-background');
         }
 
-        &:focus,
+        &:focus {
+            color: var-get($icon-theme, 'focus-foreground');
+
+            @if $variant != 'fluent' {
+                background: var-get($icon-theme, 'focus-background');
+            }
+
+            &:hover {
+                color: var-get($icon-theme, 'hover-foreground');
+                background: var-get($icon-theme, 'hover-background');
+            }
+
+            &:active {
+                color: var-get($icon-theme, 'active-foreground');
+                background: var-get($icon-theme, 'active-background');
+            }
+        }
+
         &:active {
+            color: var-get($icon-theme, 'active-foreground');
+            background: var-get($icon-theme, 'active-background');
+        }
+
+        &:focus-visible {
             color: var-get($icon-theme, 'focus-foreground');
-            background: var-get($icon-theme, 'focus-background');
 
+            @if $variant == 'fluent' {
+                border: rem(1px) solid var-get($icon-theme, 'border-color') ;
+            }
+
+            &:hover {
+                color: var-get($icon-theme, 'hover-foreground');
+                background: var-get($icon-theme, 'hover-background');
+            }
+        }
+
+        &:focus,
+        &:active {
             @if $variant == 'material' or  $variant == 'fluent' {
                 box-shadow: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), $icon-shadow;
             } @else {
@@ -625,6 +770,16 @@
         color: var-get($flat-theme, 'disabled-foreground');
         background: transparent;
 
+        @if $variant == 'fluent' {
+            &%igx-button--outlined {
+                background: var-get($flat-theme, 'disabled-background');
+            }
+
+            &%igx-button--icon {
+                background: var-get($flat-theme, 'disabled-background');
+            }
+        }
+
         &%igx-button--raised,
         &%igx-button--fab {
             background: var-get($flat-theme, 'disabled-background');

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss
@@ -239,8 +239,8 @@ $dark-fluent-excel-palette: $fluent-excel-dark-palette;
 
 /// @access private
 $fluent-word-palette: palette(
-    $primary: #2b579a,
-    $secondary: #2b579a,
+    $primary: #0078d4,
+    $secondary: #0078d4,
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,