Merge pull request #6620 from IgniteUI/igniteui-angular-6613

Lipata · web-flow · commit 862a5c331f58 · 2020-02-07T14:25:55.000+02:00
fix(bootstrap-theme): contrast colors, typography, and legacy-support
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/_variables.scss b/projects/igniteui-angular/src/lib/core/styles/base/_variables.scss
@@ -23,6 +23,3 @@ $components: () !default;
 /// The global themes registry map.
 $themes: () !default;
 
-/// The global background color.
-$igx-background-color: #fff !default;
-$igx-foreground-color: rgba(0, 0, 0, .87) !default;
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
@@ -297,18 +297,19 @@
 /// @param {Color} $success [#4eb862] - The success color used throughout the application.
 /// @param {Color} $warn [#fbb13c] - The warning color used throughout the application.
 /// @param {Color} $error [#ff134a] - The error color used throughout the application.
-/// @param {Color} $grays [#000] - The color used for generating the grayscale palette.
+/// @param {Color} $grays [$igx-foreground-color] - The color used for generating the grayscale palette.
 /// @param {Color} $surface [#fff] - The color used as a background in components, such as cards, sheets, and menus.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
+/// @see $igx-foreground-color
 @function igx-palette(
     $primary,
     $secondary,
     $info: #1377d5,
     $success: #4eb862,
     $warn: #fbb13c,
     $error: #ff134a,
-    $grays: #000,
+    $grays: if(global-variable-exists('igx-foreground-color'), $igx-foreground-color, #000),
     $surface: #fff
 ) {
     $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -645,11 +645,12 @@
 
     %cal-value-content {
         position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         width: $cal-value-w;
         height: $cal-value-h;
         min-width: 2ch;
-        line-height: $cal-value-h;
-        text-align: center;
         border-radius: --var($theme, 'date-border-radius');
         z-index: 0;
         // transition: background .15s ease-out;
@@ -944,7 +945,6 @@
 
     %cal-header-date {
         @include igx-type-style($type-scale, $header-date) {
-            line-height: rem(42px);
             margin: 0;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
@@ -474,7 +474,6 @@
         }
     }
 
-    %igx-card-content,
     %igx-card-content > p {
         @include igx-type-style($type-scale, $content) {
             margin: 0;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -232,6 +232,7 @@
 
         igx-list {
             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);
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -540,7 +540,6 @@
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: $variant != 'bootstrap';
 
-    $bootstrap-header-border-bottom-width: --var($theme, 'header-border-width') * 2;
     $cbx-size: map-get((
         material: rem(20px),
         fluent: rem(20px),
@@ -705,7 +704,7 @@
         border-bottom: $grid-header-border;
 
         @if $bootstrap-theme {
-            border-bottom-width: $bootstrap-header-border-bottom-width;
+            border-bottom-width: rem(2px);
         }
 
         z-index: 2;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
@@ -41,6 +41,11 @@
 
     $theme: apply-palette($grid-paginator-schema, $palette);
 
+
+    @if not($text-color) and $background-color {
+        $text-color: text-contrast($background-color);
+    }
+
     @return extend($theme, (
         name: $name,
         palette: $palette,
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
@@ -48,16 +48,8 @@
 @mixin igx-ripple($theme, $palette: $default-palette) {
     @include igx-root-css-vars($theme);
 
-    $variant: map-get($theme, variant);
-
-    $ripple-display: map-get((
-        material: block,
-        fluent: none !important,
-        bootstrap: none !important
-    ), $variant);
-
     %igx-ripple-display {
-        display: $ripple-display;
+        display: block;
         position: absolute;
         border-radius: 50%;
         background: --var($theme, 'color');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
@@ -240,6 +240,7 @@
         align-items: center;
         overflow: hidden;
         background: --var($theme, 'item-background');
+
         @if $not-bootstrap-theme {
             box-shadow: --var($theme, 'tab-area-shadow');
         }
@@ -350,6 +351,9 @@
         outline: 0;
         color: --var($theme, 'item-active-color');
 
+        @if $bootstrap-theme {
+            border-color: --var($theme, 'border-color--hover') --var($theme, 'border-color--hover') transparent;
+        }
 
         &:focus {
             background: --var($theme, 'item-active-background');
@@ -375,7 +379,10 @@
             background: --var($theme, 'item-active-background');
             position: relative;
             z-index: 1;
-            border-color: --var($theme, 'border-color') --var($theme, 'border-color') --var($theme, 'item-active-background');
+            border-top-color: --var($theme, 'border-color');
+            border-left-color: --var($theme, 'border-color');
+            border-right-color: --var($theme, 'border-color');
+            border-bottom-color: transparent;
 
             &::after {
                 content: '';
@@ -389,7 +396,10 @@
 
             &:hover,
             &:focus {
-                border-color: --var($theme, 'border-color') --var($theme, 'border-color') transparent;
+                border-top-color: --var($theme, 'border-color');
+                border-left-color: --var($theme, 'border-color');
+                border-right-color: --var($theme, 'border-color');
+                border-bottom-color: transparent;
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
@@ -354,7 +354,9 @@
     }
 
     %time-picker__header-hour {
-        @include igx-type-style($type-scale, $header-hour);
+        @include igx-type-style($type-scale, $header-hour) {
+            margin-top: 0;
+        }
     }
 
     %time-picker__column {
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
@@ -61,7 +61,6 @@
 @import '../print/index';
 
 /// Includes the base for each theme.
-
 [class^='igx-'] {
     &,
     *,
@@ -71,14 +70,27 @@
     }
 }
 
-@mixin igx-core($print-layout: true, $direction: ltr) {
+/// @param {boolean} $print-layout [true] - Activates the printing styles of the components.
+/// @param {string} $direction [ltr] - Sets the layout direction. Can be 'ltr' or 'rtl'.
+/// @param {color} $foreground-color [0, 0, 0, .87] - Sets the value of the global $igx-foreground-color used in all typography styles.
+/// @see $igx-foreground-color
+/// @requires {mixin} igx-typography
+/// @requires {mixin} igx-vhelper
+/// @requires {mixin} igx-print-layout
+@mixin igx-core(
+    $print-layout: true,
+    $direction: ltr,
+    $foreground-color: rgba(0, 0, 0, .87)
+) {
     @if $direction != ltr and $direction != rtl {
         $direction: ltr !global;
     } @else {
         $direction: $direction !global;
     }
 
-    @include igx-typography();
+    $igx-foreground-color: $foreground-color !global;
+
+    @include igx-typography($base-color: $foreground-color);
     @include igx-vhelper();
 
     @if $print-layout == true {
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss
@@ -22,4 +22,9 @@ $_dark-fluent-banner: extend($_fluent-banner);
 /// @type {Map}
 /// @requires extend
 /// @requires $_bootstrap-banner
-$_dark-bootstrap-banner: extend($_bootstrap-banner);
+$_dark-bootstrap-banner: extend(
+    $_bootstrap-banner,
+    (
+        banner-background: #333,
+    )
+);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss
@@ -46,6 +46,7 @@ $_dark-bootstrap-list: extend(
     $_bootstrap-list,
     $_base-dark-list,
     (
+        background: #222,
         item-background: #222,
         header-background: #222,
     )
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss
@@ -30,13 +30,10 @@ $_dark-fluent-tabs: extend($_fluent-tabs, $_base-dark-tabs);
 
 /// Generates a dark bootstrap tabs schema based on a mix of $_bootstrap-tabs and $_base-dark-tabs.
 /// @type {Map}
+/// @prop {Map} item-background [igx-color: ('primary', 400)] - The background color used for the tabs header.
 /// @requires {function} extend
 /// @requires $_bootstrap-tabs
 $_dark-bootstrap-tabs: extend($_bootstrap-tabs, (
-    item-background: #333,
-    button-background: #333,
-    item-hover-background: #333,
-    item-active-background: #333,
     item-hover-color: (
         igx-color: ('primary', 400)
     ),
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss
@@ -48,4 +48,17 @@ $_fluent-banner: extend($_light-banner);
 /// @type {Map}
 /// @requires {function} extend
 /// @requires $_light-banner
-$_bootstrap-banner: extend($_light-banner);
+$_bootstrap-banner: extend(
+    $_light-banner,
+    (
+        banner-background: #fff,
+
+        banner-message-color: (
+            igx-color: ('grays', 800)
+        ),
+
+        banner-illustration-color: (
+            igx-color: ('grays', 800)
+        )
+    )
+);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss
@@ -56,6 +56,7 @@ $_light-calendar: extend(
     $_default-shape-calendar,
     (
         variant: 'material',
+
         content-background: (
             igx-color: 'surface'
         ),
@@ -289,8 +290,6 @@ $_bootstrap-calendar: extend(
             igx-color: ('primary', 800)
         ),
 
-        picker-text-color: #000,
-
         year-current-text-color: (
             igx-color: ('primary', 500)
         ),
@@ -324,6 +323,22 @@ $_bootstrap-calendar: extend(
         date-selected-text-color: #fff,
 
         content-background: #fff,
+
+        content-text-color: (
+            igx-color: ('grays', 900)
+        ),
+
+        weekend-text-color: (
+            igx-color: ('grays', 900)
+        ),
+
+        picker-text-color: (
+            igx-color: ('grays', 900)
+        ),
+
+        inactive-text-color: (
+            igx-color: ('grays', 500)
+        ),
     )
 );
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss
@@ -105,6 +105,22 @@ $_bootstrap-card: extend(
         outline-color: (
             igx-color: ('grays', 300)
         ),
+
+        header-text-color: (
+            igx-color: ('grays', 900)
+        ),
+
+        subtitle-text-color: (
+            igx-color: ('grays', 800)
+        ),
+
+        content-text-color: (
+            igx-color: ('grays', 800)
+        ),
+
+        actions-text-color: (
+            igx-color: ('grays', 900)
+        ),
     )
 );
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss
@@ -222,7 +222,11 @@ $_bootstrap-drop-down: extend(
 
         selected-focus-item-text-color: #fff,
 
-        border-width: 1px
+        border-width: 1px,
+
+        disabled-item-text-color: (
+            igx-color: ('grays', 400)
+        ),
     )
 );
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss
@@ -158,6 +158,18 @@ $_bootstrap-list: extend(
             igx-color: ('grays', 100),
             hexrgba: (#fff)
         ),
+
+        item-text-color: (
+            igx-color: ('grays', 900)
+        ),
+
+        item-text-color-hover: (
+            igx-color: ('grays', 900)
+        ),
+
+        item-text-color-active: (
+            igx-color: ('grays', 900)
+        ),
     )
 );
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pagination.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pagination.scss
@@ -8,12 +8,16 @@
 
 /// Generates a light pagination schema.
 /// @type {Map}
-/// @prop {Color} text-color [currentColor] - The text color.
+/// @prop {Map} text-color [igx-color: ('grays', 800)] - The text color.
 /// @prop {Map} background-color [igx-color: ('grays', 100), hexrgba: #fff] - The background color of the paging panel.
 /// @prop {Map} border-color [igx-color: ('grays', 400)] - The border color of the paging panel.
 /// @see $default-palette
 $_light-pagination: (
-    text-color: currentColor,
+    variant: 'material',
+
+    text-color: (
+        igx-color: ('grays', 800)
+    ),
 
     background-color: (
         igx-color: ('grays', 100),
@@ -34,6 +38,8 @@ $_light-pagination: (
 $_fluent-pagination: extend(
     $_light-pagination,
     (
+        variant: 'material',
+
         background-color: (
             igx-color: 'surface'
         ),
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss

Original file line number	Diff line number	Diff line change
`@@ -474,7 +474,6 @@`
`474`	`474`	`}`
`475`	`475`	`}`
`476`	`476`
`477`		`- %igx-card-content,`
`478`	`477`	`%igx-card-content > p {`
`479`	`478`	`@include igx-type-style($type-scale, $content) {`
`480`	`479`	`margin: 0;`
Original file line number	Diff line number	Diff line change
`@@ -232,6 +232,7 @@`
`232`	`232`
`233`	`233`	`igx-list {`
`234`	`234`	`margin: rem(8px) -#{rem(16px)} 0;`
	`235`	`+ border: 0;`
`235`	`236`	`border-top: 1px dashed igx-color($palette, 'grays', 300);`
`236`	`237`	`border-bottom: 1px dashed igx-color($palette, 'grays', 300);`
`237`	`238`	`}`
Original file line number	Diff line number	Diff line change
`@@ -354,7 +354,9 @@`
`354`	`354`	`}`
`355`	`355`
`356`	`356`	`%time-picker__header-hour {`
`357`		`- @include igx-type-style($type-scale, $header-hour);`
	`357`	`+ @include igx-type-style($type-scale, $header-hour) {`
	`358`	`+ margin-top: 0;`
	`359`	`+ }`
`358`	`360`	`}`
`359`	`361`
`360`	`362`	`%time-picker__column {`