Update theme colors (#10900)

* feat(scrollbar): update dark bootstrap theme

* feat(card): update dark bootstrap theme

* feat(card): update light & dark bootstrap themes

* feat(expansion-panel): update bootstrap theme

* feat(action-strip): update bootstrap theme

* feat(avatar): update bootstrap theme

* feat(badge): update dark bootstrap theme

* feat(banner): update bootstrap themes

* feat(list): update bootstrap themes

* feat(list): update indigo theme

* feat(scrollbar): update indigo dark theme

* feat(navdrawer): update dark bootstrap theme

* feat(grid): update bootstrap dark theme

* feat(input-group): update dark bootstrap theme.

* feat(button-group): fix icons position inside buttongroup buttons

* feat(grid): fix bootstrap themes

* feat(tree): fix dark bootstrap theme

* feat(grid): fix indigo themes

* feat(grid): update indigo scrollbar theme

* feat(input-group): fix fluent dark theme.
feat(scrollbar): fix fluent dark theme.

* feat(grid): fix fluent theme

* Update fluent typography (#10775)

* feat(fluent typography): update type scales and component typography

* feat(fluent typography): update components typography

* Update projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss

Co-authored-by: Stefan Ivanov <[email protected]>

* Update projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss

Co-authored-by: Stefan Ivanov <[email protected]>

* feat(fluent typography): update input label and list item

* feat(fluent typography): fix overline scale

* Update projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss

Co-authored-by: Stefan Ivanov <[email protected]>

* Update projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss

Co-authored-by: Stefan Ivanov <[email protected]>

* Update projects/igniteui-angular/src/lib/core/styles/typography/scale-presets/_fluent.scss

Co-authored-by: Stefan Ivanov <[email protected]>

Co-authored-by: Stefan Ivanov <[email protected]>

Co-authored-by: Stefan Ivanov <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 3 people

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

@@ -323,6 +323,7 @@
 
     %igx-group-item-content {
         display: flex;
+        align-items: center;
         flex-flow: row nowrap;
         min-width: 0;
 

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -151,7 +151,13 @@
         justify-content: space-between;
         grid-row: 1;
         font-size: $grid-toolbar-fs;
-        border-bottom: 1px solid igx-color(map.get($theme, 'palette'), 'grays', 300);
+
+        @if $bootstrap-theme {
+            border-bottom: 1px solid igx-color(map.get($theme, 'palette'), 'grays', 100);
+        } @else {
+            border-bottom: 1px solid igx-color(map.get($theme, 'palette'), 'grays', 300);
+        }
+
         background: var-get($theme, 'background-color');
         height: auto;
         min-height: map.get($grid-toolbar-height, 'comfortable');

projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-theme.scss

@@ -28,6 +28,8 @@
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
 
+    $bootstrap-theme: $variant == 'bootstrap';
+
     %advanced-filter {
         width: 660px;
         min-width: 660px;
@@ -42,9 +44,20 @@
         align-items: center;
         padding: $vertical-space-comfortable;
         color: igx-color($palette, 'grays', 700);
-        background-color: igx-color($palette, 'grays', 200);
+
+        @if $bootstrap-theme {
+            background-color: igx-color($palette, 'grays', 100, .5);
+        } @else {
+            background-color: igx-color($palette, 'grays', 100);
+        }
+
         user-select: none;
         cursor: grab;
+
+        h4,
+        .igx-typography__h6 {
+            margin-bottom: 0;
+        }
     }
 
     %advanced-filter__main {

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -21,6 +21,8 @@
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
     $variant: map.get($theme, 'variant');
+    $bootstrap-theme: $variant == 'bootstrap';
+
 
     %grid-excel-filter {
         display: block;
@@ -248,8 +250,13 @@
             overflow: hidden;
             margin: rem(8px) -#{rem(16px)} 0;
             border: 0;
-            border-top: 1px dashed igx-color($palette, 'grays', 300);
-            border-bottom: 1px dashed igx-color($palette, 'grays', 300);
+            @if $bootstrap-theme {
+                border-top: 1px dashed igx-color($palette, 'grays', 100);
+                border-bottom: 1px dashed igx-color($palette, 'grays', 100);
+            } @else {
+                border-top: 1px dashed igx-color($palette, 'grays', 300);
+                border-bottom: 1px dashed igx-color($palette, 'grays', 300);
+            }
         }
     }
 
@@ -376,7 +383,11 @@
     }
 
     %grid-excel-menu__secondary-header {
-        border-bottom: 1px solid igx-color($palette, 'grays', 300);
+        @if $bootstrap-theme {
+            border-bottom: 1px solid igx-color($palette, 'grays', 100);
+        } @else {
+            border-bottom: 1px solid igx-color($palette, 'grays', 300);
+        }
     }
 
     %grid-excel-menu__secondary-main {
@@ -385,7 +396,11 @@
     }
 
     %grid-excel-menu__secondary-footer {
-        border-top: 1px dashed igx-color($palette, 'grays', 300);
+        @if $bootstrap-theme {
+            border-top: 1px dashed igx-color($palette, 'grays', 100);
+        } @else {
+            border-top: 1px dashed igx-color($palette, 'grays', 300);
+        }
 
         %grid-excel-filter__apply,
         %grid-excel-filter__cancel {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -974,20 +974,20 @@
 
     %grid-thead-thumb {
         background: var-get($theme, 'header-background');
-        border-#{$left}: 1px solid var-get($theme, 'header-border-color');
+        border-#{$left}: rem(1px) solid var-get($theme, 'header-border-color');
     }
 
     %grid-tfoot-thumb {
         position: absolute;
         top: 0;
         #{$right}: 0;
         background: var-get($theme, 'header-background');
-        border-#{$left}: 1px solid igx-color($palette, 'grays', 300);
+        border-#{$left}: rem(1px) solid var-get($theme, 'header-border-color');
     }
 
     %grid-tbody-scrollbar {
         background: var-get($theme, 'content-background');
-        border-#{$left}: 1px solid var-get($theme, 'row-border-color');
+        border-#{$left}: rem(1px) solid var-get($theme, 'row-border-color');
         position: relative;
     }
 
@@ -1859,7 +1859,11 @@
     }
 
     %grid-summaries-patch {
-        background: inherit;
+        @if $bootstrap-theme {
+            background: igx-color($palette, 'grays', 100);
+        } @else {
+            background: inherit;
+        }
         position: relative;
         z-index: 1;
         border-#{$right}: 1px solid var-get($theme, 'header-border-color');
@@ -2722,6 +2726,7 @@
         cursor: pointer;
         z-index: 3;
         color: var-get($theme, 'expand-icon-color');
+        background-clip: initial;
 
         &:focus {
             outline: none;

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -784,6 +784,8 @@
 
     %fluent-label {
         padding: rem(5px) 0;
+        font-size: rem(14px, 16px);
+        font-weight: 600;
         line-height: normal !important;
         position: static;
         transform: translateY(0);
@@ -1245,6 +1247,7 @@
         height: auto;
         line-height: normal;
         font-weight: 400;
+        border-radius: var-get($theme, 'border-border-radius') 0 0 var-get($theme, 'border-border-radius');
 
         igx-icon {
             width: rem(18px);
@@ -1278,6 +1281,7 @@
         width: auto;
         height: auto;
         line-height: normal;
+        border-radius: 0 var-get($theme, 'border-border-radius') var-get($theme, 'border-border-radius') 0;
 
         igx-icon {
             width: rem(18px);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_action-strip.scss

@@ -27,12 +27,17 @@ $dark-fluent-action-strip: extend(
 
 /// Generates a dark bootstrap action strip schema.
 /// @type {Map}
+/// @prop {Map} actions-background [igx-color: ('grays', 100)] - The color used for actions background.
 /// @requires {function} extend
 /// @requires $dark-action-strip
 $dark-bootstrap-action-strip: extend(
     $dark-action-strip,
     (
-        variant: 'bootstrap'
+        variant: 'bootstrap',
+
+        actions-background: (
+            igx-color: ('grays', 100),
+        ),
     )
 );
 

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss

@@ -1,3 +1,4 @@
+@use '../../../base' as *;
 @use '../light/avatar' as *;
 
 ////
@@ -20,9 +21,22 @@ $dark-fluent-avatar: $fluent-avatar;
 
 /// Generates a dark bootstrap avatar schema.
 /// @type {Map}
+/// @prop {Map} background [igx-color: ('grays', 200)]- The background color of the avatar.
+/// @prop {Map} color [igx-contrast-color: ('grays', 200)] - The text/icon color of the avatar.
 /// @requires {function} extend
 /// @requires $bootstrap-avatar
-$dark-bootstrap-avatar: $bootstrap-avatar;
+$dark-bootstrap-avatar: extend(
+    $bootstrap-avatar,
+    (
+        background: (
+            igx-color: ('grays', 200)
+        ),
+
+        color: (
+            igx-contrast-color: ('grays', 200)
+        ),
+    )
+);
 
 /// Generates a dark indigo avatar schema.
 /// @type {Map}

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss

@@ -1,3 +1,4 @@
+@use '../../../base' as *;
 @use '../light/badge' as *;
 
 ////
@@ -21,9 +22,17 @@ $dark-fluent-badge: $fluent-badge;
 
 /// Generates a dark bootstrap badge schema.
 /// @type {Map}
+/// @prop {Map} border-color [igx-contrast-color: ('grays', 50)] - The border color used.
 /// @requires {function} extend
 /// @requires $bootstrap-badge
-$dark-bootstrap-badge: $bootstrap-badge;
+$dark-bootstrap-badge: extend(
+    $bootstrap-badge,
+    (
+        border-color: (
+            igx-contrast-color: ('grays', 50)
+        ),
+    )
+);
 
 /// Generates a dark indigo badge schema.
 /// @type {Map}

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss

@@ -20,9 +20,27 @@ $dark-fluent-banner: $fluent-banner;
 
 /// Generates a dark bootstrap banner schema.
 /// @type {Map}
+/// @property {Map} banner-background [igx-color: ('surface')] - The background color used banner background.
+/// @property {Map} banner-message-color [igx-color: ('grays', 600)] - The color used for banner label.
+/// @property {Map} banner-illustration-color [igx-color: ('grays', 600)] - The color used banner illustration.
 /// @requires {function} extend
 /// @requires $bootstrap-banner
-$dark-bootstrap-banner: $bootstrap-banner;
+$dark-bootstrap-banner: extend(
+    $bootstrap-banner,
+    (
+        banner-background: (
+            igx-color: ('surface'),
+        ),
+
+        banner-message-color: (
+            igx-color: ('grays', 600)
+        ),
+
+        banner-illustration-color: (
+            igx-color: ('grays', 600)
+        )
+    )
+);
 
 /// Generates a dark indigo banner schema.
 /// @type {Map}