themes(*): improve compatibility with WC (#12203)

* deps(theming): bump version

* refactor(scrollbar): rename .igx-scrollbar to .ig-scrollbar

* refactor(demo): revert back to material theme

* feat(themes): config removal of global CSS variables

* themes(scrollbar): bring in line with webc

Co-authored-by: Stamen Stoychev <[email protected]>

Author: simeonoff

package-lock.json

@@ -115,7 +115,7 @@
     "hammer-simulator": "0.0.1",
     "ig-typedoc-theme": "^4.1.0",
     "igniteui-sassdoc-theme": "^1.1.4",
-    "igniteui-theming": "^1.0.0-release",
+    "igniteui-theming": "^1.0.2",
     "igniteui-webcomponents": "^3.3.0",
     "jasmine": "^4.4.0",
     "jasmine-core": "~4.4.0",

package.json

@@ -6,7 +6,7 @@
 
 /// The global component registry map.
 /// @type List
-$components: () !default;
+$components: (palette: 'palette', elevations: 'elevations') !default;
 
 /// Stores a list of dropped component themes.
 $dropped-themes: () !default;

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

@@ -10,7 +10,7 @@
 ////
 
 @mixin component {
-    @include b(igx-scrollbar) {
+    @include b(ig-scrollbar) {
         // Register the component in the component registry
         $this: bem--selector-to-string(&);
         @include register-component(

projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-component.scss

@@ -28,8 +28,8 @@
     $thumb-background: null,
     $track-background: null,
 ) {
-    $name: 'igx-scrollbar';
-    $selector: '.igx-scrollbar';
+    $name: 'ig-scrollbar';
+    $selector: '.ig-scrollbar';
     $scrollbar-schema: ();
 
     @if map.has-key($schema, $name) {

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

@@ -31,8 +31,14 @@
     $excluded: ();
     $scope: if(is-root(), ':root', '&');
 
-    @include palette($palette);
-    @include elevations($elevations);
+
+    @if not(list.index($exclude, 'palette')) {
+        @include palette($palette);
+    }
+
+    @if not(list.index($exclude, 'elevations')) {
+        @include elevations($elevations);
+    }
 
     @if $elevation == false {
         #{$scope} {
@@ -362,7 +368,7 @@
         ));
     }
 
-    @if is-used('igx-scrollbar', $exclude) {
+    @if is-used('ig-scrollbar', $exclude) {
         @include scrollbar(scrollbar-theme(
             $schema: $schema
         ));

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

@@ -118,7 +118,7 @@
 /// @property {Map} igx-radio [$dark-radio]
 /// @property {Map} igx-ripple [$dark-ripple]
 /// @property {Map} igx-query-builder [$dark-query-builder]
-/// @property {Map} igx-scrollbar [$dark-scrollbar]
+/// @property {Map} ig-scrollbar [$dark-scrollbar]
 /// @property {Map} shape-chart [$dark-shape-chart]
 /// @property {Map} igx-slider [$dark-slider]
 /// @property {Map} igx-snackbar [$dark-snackbar]
@@ -181,7 +181,7 @@ $dark-schema: (
     igx-radio: $dark-radio,
     igx-ripple: $dark-ripple,
     igx-query-builder: $dark-query-builder,
-    igx-scrollbar: $dark-scrollbar,
+    ig-scrollbar: $dark-scrollbar,
     shape-chart: $dark-shape-chart,
     igx-slider: $dark-slider,
     igx-snackbar: $dark-snackbar,
@@ -254,7 +254,7 @@ $dark-material-schema: $dark-schema;
 /// @property {Map} igx-radio [$dark-fluent-radio],
 /// @property {Map} igx-ripple [$dark-fluent-ripple],
 /// @property {Map} igx-query-builder [$dark-fluent-query-builder],
-/// @property {Map} igx-scrollbar [$dark-fluent-scrollbar],
+/// @property {Map} ig-scrollbar [$dark-fluent-scrollbar],
 /// @property {Map} shape-chart [$dark-fluent-shape-chart],
 /// @property {Map} igx-slider [$dark-fluent-slider],
 /// @property {Map} igx-snackbar [$dark-fluent-snackbar],
@@ -317,7 +317,7 @@ $dark-fluent-schema: (
     igx-radio: $dark-fluent-radio,
     igx-ripple: $dark-fluent-ripple,
     igx-query-builder: $dark-fluent-query-builder,
-    igx-scrollbar: $dark-fluent-scrollbar,
+    ig-scrollbar: $dark-fluent-scrollbar,
     shape-chart: $dark-fluent-shape-chart,
     igx-slider: $dark-fluent-slider,
     igx-snackbar: $dark-fluent-snackbar,
@@ -385,7 +385,7 @@ $dark-fluent-schema: (
 /// @property {Map} igx-radio [$dark-bootstrap-radio],
 /// @property {Map} igx-ripple [$dark-bootstrap-ripple],
 /// @property {Map} igx-query-builder [$dark-bootstrap-query-builder],
-/// @property {Map} igx-scrollbar [$dark-bootstrap-scrollbar],
+/// @property {Map} ig-scrollbar [$dark-bootstrap-scrollbar],
 /// @property {Map} shape-chart [$dark-bootstrap-shape-chart],
 /// @property {Map} igx-slider [$dark-bootstrap-slider],
 /// @property {Map} igx-snackbar [$dark-bootstrap-snackbar],
@@ -448,7 +448,7 @@ $dark-bootstrap-schema: (
     igx-radio: $dark-bootstrap-radio,
     igx-ripple: $dark-bootstrap-ripple,
     igx-query-builder: $dark-bootstrap-query-builder,
-    igx-scrollbar: $dark-bootstrap-scrollbar,
+    ig-scrollbar: $dark-bootstrap-scrollbar,
     shape-chart: $dark-bootstrap-shape-chart,
     igx-slider: $dark-bootstrap-slider,
     igx-snackbar: $dark-bootstrap-snackbar,
@@ -516,7 +516,7 @@ $dark-bootstrap-schema: (
 /// @property {Map} igx-radio [$dark-indigo-radio]
 /// @property {Map} igx-ripple [$dark-indigo-ripple]
 /// @property {Map} igx-query-builder [$dark-indigo-query-builder]
-/// @property {Map} igx-scrollbar [$dark-indigo-scrollbar]
+/// @property {Map} ig-scrollbar [$dark-indigo-scrollbar]
 /// @property {Map} shape-chart [$dark-indigo-shape-chart]
 /// @property {Map} igx-slider [$dark-indigo-slider]
 /// @property {Map} igx-snackbar [$dark-indigo-snackbar]
@@ -579,7 +579,7 @@ $dark-indigo-schema: (
     igx-radio: $dark-indigo-radio,
     igx-ripple: $dark-indigo-ripple,
     igx-query-builder: $dark-indigo-query-builder,
-    igx-scrollbar: $dark-indigo-scrollbar,
+    ig-scrollbar: $dark-indigo-scrollbar,
     shape-chart: $dark-indigo-shape-chart,
     igx-slider: $dark-indigo-slider,
     igx-snackbar: $dark-indigo-snackbar,

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

@@ -118,7 +118,7 @@
 /// @property {Map} igx-query-builder [$light-query-builder]
 /// @property {Map} igx-radio [$light-radio]
 /// @property {Map} igx-ripple [$light-ripple]
-/// @property {Map} igx-scrollbar [$light-scrollbar]
+/// @property {Map} ig-scrollbar [$light-scrollbar]
 /// @property {Map} shape-chart [$light-shape-chart]
 /// @property {Map} igx-slider [$light-slider]
 /// @property {Map} igx-snackbar [$light-snackbar]
@@ -182,7 +182,7 @@ $light-schema: (
     igx-radio: $light-radio,
     igx-ripple: $light-ripple,
     shape-chart: $light-shape-chart,
-    igx-scrollbar: $light-scrollbar,
+    ig-scrollbar: $light-scrollbar,
     igx-slider: $light-slider,
     igx-snackbar: $light-snackbar,
     sparkline: $light-sparkline,
@@ -256,7 +256,7 @@ $light-fluent-schema: (
     igx-ripple: $fluent-ripple,
     shape-chart: $fluent-shape-chart,
     igx-query-builder: $fluent-query-builder,
-    igx-scrollbar: $fluent-scrollbar,
+    ig-scrollbar: $fluent-scrollbar,
     igx-slider: $fluent-slider,
     igx-snackbar: $fluent-snackbar,
     sparkline: $fluent-sparkline,
@@ -325,7 +325,7 @@ $light-bootstrap-schema: (
     igx-ripple: $bootstrap-ripple,
     igx-query-builder: $bootstrap-query-builder,
     shape-chart: $bootstrap-shape-chart,
-    igx-scrollbar: $bootstrap-scrollbar,
+    ig-scrollbar: $bootstrap-scrollbar,
     igx-slider: $bootstrap-slider,
     igx-snackbar: $bootstrap-snackbar,
     sparkline: $bootstrap-sparkline,
@@ -394,7 +394,7 @@ $light-indigo-schema: (
     shape-chart: $indigo-shape-chart,
     igx-ripple: $indigo-ripple,
     igx-query-builder: $indigo-query-builder,
-    igx-scrollbar: $indigo-scrollbar,
+    ig-scrollbar: $indigo-scrollbar,
     igx-slider: $indigo-slider,
     igx-snackbar: $indigo-snackbar,
     sparkline: $indigo-sparkline,

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

@@ -4,6 +4,7 @@
 ////
 
 @use 'sass:map';
+@use 'sass:list';
 @use 'material';
 @use 'bootstrap';
 @use 'fluent';
@@ -19,7 +20,12 @@
 /// @access public
 /// @param {String} $font-family [$material-typeface] - The font family to be used across all typographic elements.
 /// @param {Map} $type-scale [$material-type-scale] - A type scale map as produced by type-scale.
-@mixin typography($font-family: presets.$material-typeface, $type-scale: presets.$material-type-scale) {
+/// @param {Map} $exclude [null] - A list of typography styles to be excluded.
+@mixin typography(
+    $font-family: presets.$material-typeface,
+    $type-scale: presets.$material-type-scale,
+    $exclude: null
+) {
     $variant: map.get(map.get($type-scale, '_meta'), 'variant');
 
     @if is-root() {
@@ -28,7 +34,9 @@
             font-size: theming.$browser-context;
             line-height: theming.rem(27px);
 
-            @include charts.typography($type-scale);
+            @if not(list.index($exclude, 'charts')) {
+                @include charts.typography($type-scale);
+            }
 
             @if ($variant == 'material' or $variant == null) {
                 @include material.typography();
@@ -48,5 +56,7 @@
         }
     }
 
-    @include theming.typography($font-family, $type-scale);
+    @if not(list.index($exclude, 'global')) {
+        @include theming.typography($font-family, $type-scale);
+    }
 }

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

@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"></head>
-<body class="ig-typography igx-scrollbar default-theme">
+<body class="ig-typography ig-scrollbar">
   <app-root></app-root>
 </body>
 </html>