Merge pull request #6685 from IgniteUI/mpopov/typography-fix

fix(themes): do not set the global text color in igx-core

Author: zdrawku

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 9.0.1
+- **Breaking Changes** 
+    - Remove `$base-color` from igx-typography. The igx-typography class now inherits the parent color.
+
 ## 9.0.0
 
 ### General

projects/igniteui-angular/migrations/migration-collection.json

@@ -65,6 +65,11 @@
             "version": "9.0.0",
             "description": "Updates Ignite UI for Angular from v8.2.x to v9.0.0",
             "factory": "./update-9_0_0"
+        },
+        "migration-14": {
+            "version": "9.0.1",
+            "description": "Updates Ignite UI for Angular from v9.0.0 to v9.0.1",
+            "factory": "./update-9_0_1"
         }
     }
 }

projects/igniteui-angular/migrations/update-9_0_1/changes/theme-props.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../common/schema/theme-props.schema.json",
+    "changes": [
+        {
+            "name": "$base-color",
+            "remove": true,
+            "owner": "igx-typography"
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-9_0_1/index.spec.ts

@@ -0,0 +1,30 @@
+import * as path from 'path';
+
+// tslint:disable:no-implicit-dependencies
+import { virtualFs } from '@angular-devkit/core';
+import { EmptyTree } from '@angular-devkit/schematics';
+// tslint:disable-next-line:no-submodule-imports
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update 9.0.1', () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+      };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+});

projects/igniteui-angular/migrations/update-9_0_1/index.ts

@@ -0,0 +1,17 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '9.0.1';
+
+export default function(): Rule {
+    return (host: Tree, context: SchematicContext) => {
+        context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+        const update = new UpdateChanges(__dirname, host, context);
+        update.applyChanges();
+    };
+}

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -315,10 +315,6 @@
     $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700');
     $shades: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87);
 
-    @if global-variable-exists('igx-foreground-color') and type-of($igx-foreground-color) == 'color' {
-        $grays: $igx-foreground-color;
-    }
-
     $primary-palette: generate-palette($primary, $saturations);
     $secondary-palette: generate-palette($secondary, $saturations);
     $grayscale-palette: grayscale-palette($grays, $shades);

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

@@ -80,17 +80,14 @@
 @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;
     }
 
-    $igx-foreground-color: $foreground-color !global;
-
-    @include igx-typography($base-color: $foreground-color);
+    @include igx-typography();
     @include igx-vhelper();
 
     @if $print-layout == true {

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

@@ -497,7 +497,6 @@
     @include igx-typography(
         $font-family: "'Open Sans', Helvetica, Arial, sans-serif",
         $type-scale: $fluent-type-scale,
-        $base-color: #323130
     );
 
     @include igx-theme(
@@ -532,8 +531,7 @@
 
     @include igx-typography(
         $font-family: "'Open Sans', Helvetica, Arial, sans-serif",
-        $type-scale: $fluent-type-scale,
-        $base-color: #fff
+        $type-scale: $fluent-type-scale
     );
 
     @include igx-theme(
@@ -569,8 +567,7 @@
 
     @include igx-typography(
         $font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        $type-scale: $bootstrap-type-scale,
-        $base-color: #212529
+        $type-scale: $bootstrap-type-scale
     );
 
     @include igx-calendar-typography($bootstrap-type-scale, $categories: (
@@ -632,8 +629,7 @@
 
     @include igx-typography(
         $font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        $type-scale: $bootstrap-type-scale,
-        $base-color: #fff
+        $type-scale: $bootstrap-type-scale
     );
 
     @include igx-calendar-typography($bootstrap-type-scale, $categories: (

projects/igniteui-angular/src/lib/core/styles/typography/README.md

@@ -84,15 +84,13 @@ The typography mixin defines the global typography styles for an application, in
 It currently accepts 3 arguments:
 - `$font-family` - The global font family to be used by the application.
 - `$type-scale` - The default type scale to be used by the application.
-- `$base-color` - The base text color to be used by the application.
 
 To overwrite the default typography, include the `igx-typography` mixin anywhere after the `igx-core` mixin. Let's take advantage of the type scale `$my-type-scale` we defined above and make it the default type scale.
 
 ```scss
 @include igx-typography(
     $font-family: "'Roboto', sans-serif",
-    $type-scale: $my-type-scale,
-    $base-color: #484848
+    $type-scale: $my-type-scale
 );
 ```
 

projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss

@@ -36,11 +36,9 @@
 /// default-type-scale will be used.
 /// @param {String} $font-family ["'Titillium Web', sans-serif"] - The font family to be used across all typographic elements.
 /// @param {Map} $type-scale [$default-type-scale] - A type scale map as produced by igx-type-scale.
-/// @param {String} $base-color [rgba(0, 0, 0, .74)] - The default color used across all typographic elements (Components define their own text colors).
 @mixin igx-typography(
     $font-family: "'Titillium Web', sans-serif",
     $type-scale: $default-type-scale,
-    $base-color: $igx-foreground-color
 ) {
     // Maps type scale typographic categories
     // to native elements.
@@ -64,7 +62,6 @@
         font-family: unquote($font-family);
         font-size: $browser-context;
         line-height: $browser-line-height;
-        color: $base-color;
         font-size-adjust: 100%;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;

src/styles/igniteui-theme.scss

@@ -5,39 +5,43 @@
 @import 'app-palettes';
 @import 'app-layout';
 
+$igx-background-color: igx-color($default-palette, 'surface');
+$igx-foreground-color: text-contrast($igx-background-color);
+
+body {
+    background: $igx-background-color;
+    color: #222;
+}
+
 @include igx-core($direction: ltr);
 
 /* autoprefixer grid: on */
-.default-theme {
-    $igx-background-color: igx-color($default-palette, 'surface');
-    $igx-foreground-color: text-contrast($igx-background-color);
 
-    background: $igx-background-color;
-    color: $igx-foreground-color;
-
-    @include scrollbar-love();
-    @include igx-theme($default-palette);
 
-    .nav-header {
-        @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color);
-    }
-}
 
-// .dark-theme {
-//     $igx-background-color: igx-color($green-dark-palette, 'surface');
-//     $igx-foreground-color: text-contrast($igx-background-color);
+@include scrollbar-love();
+@include igx-theme($default-palette);
 
-//     background: $igx-background-color;
-//     color: $igx-foreground-color;
+.nav-header {
+    @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color);
+}
 
-//     @include scrollbar-love(lighten($igx-background-color, 15%));
-//     @include igx-dark-theme($green-dark-palette);
-//     @include igx-typography($font-family: 'sans-serif', $base-color: gray);
 
-//     .nav-header {
-//         @include nav-logo('../assets/images/rsrcs/igniteui-logo-dark-bg', $igx-background-color);
-//     }
-// }
+//.dark-theme {
+//    $igx-background-color: igx-color($green-dark-palette, 'surface');
+//    $igx-foreground-color: text-contrast($igx-background-color);
+//
+//    background: $igx-background-color;
+//    color: $igx-foreground-color;
+//
+//    @include scrollbar-love(lighten($igx-background-color, 15%));
+//    @include igx-dark-theme($green-dark-palette);
+//    @include igx-typography($font-family: 'sans-serif');
+//
+//    .nav-header {
+//        @include nav-logo('../assets/images/rsrcs/igniteui-logo-dark-bg', $igx-background-color);
+//    }
+//}
 
 // .bootstrap-theme {
 //     $igx-background-color: igx-color($bootstrap-palette, 'surface');