igniteui-theming 16.0.0 → 16.1.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "16.0.0",
+  "version": "16.1.0-beta.2",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/_mixins.scss

@@ -28,7 +28,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 @mixin css-vars-from-theme($theme, $name, $ignored: $ignored-keys) {
     $themes: map.get($theme, 'themes');
     $prefix: map.get($theme, 'prefix');
-    $t: map.get($theme, 'theme');
+    $t: map.get($theme, '_meta', 'theme');
 
     // This is here only because the button theme consists of 4 nested themes.
     @if $themes and meta.type-of($themes) == 'map' {

package/sass/themes/charts/_data-chart-theme.scss

@@ -137,7 +137,7 @@
             name: $name,
             selector: $selector,
             title-text-color: $title-text-color,
-            subtitle-text-color: null,
+            subtitle-text-color: $subtitle-text-color,
             brushes: $brushes,
             outlines: $outlines,
             marker-brushes: $marker-brushes,
@@ -145,6 +145,24 @@
             plot-area-background: $plot-area-background,
             title-horizontal-alignment: $title-horizontal-alignment,
             subtitle-horizontal-alignment: $subtitle-horizontal-alignment,
+            axis-label-margin: $axis-label-margin,
+            axis-label-text-color: $axis-label-text-color,
+            axis-label-text-style: $axis-label-text-style,
+            axis-label-vertical-alignment: $axis-label-vertical-alignment,
+            axis-major-stroke-thickness: $axis-major-stroke-thickness,
+            axis-minor-stroke-thickness: $axis-minor-stroke-thickness,
+            axis-stroke: $axis-stroke,
+            axis-stroke-thickness: $axis-stroke-thickness,
+            axis-tick-length: $axis-tick-length,
+            axis-tick-stroke-thickness: $axis-tick-stroke-thickness,
+            axis-title-alignment: $axis-title-alignment,
+            axis-title-margin: $axis-title-margin,
+            axis-title-text-style: $axis-title-text-style,
+            axis-title-text-color: $axis-title-text-color,
+            axis-major-stroke: $axis-major-stroke,
+            axis-minor-stroke: $axis-minor-stroke,
+            axis-tick-stroke: $axis-tick-stroke,
+            axis-strip: $axis-strip,
         )
     );
 }

package/sass/themes/schemas/components/dark/_action-strip.scss

@@ -10,7 +10,15 @@
 /// Generates a dark material action-strip schema.
 /// @type {Map}
 /// @requires $material-action-strip
-$dark-material-action-strip: $material-action-strip;
+$dark-material-action-strip: extend(
+    $material-action-strip,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent action strip schema.
 /// @type {Map}
@@ -25,6 +33,10 @@ $dark-fluent-action-strip: extend(
                 600,
             ),
         ),
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
     )
 );
 
@@ -41,10 +53,22 @@ $dark-bootstrap-action-strip: extend(
                 100,
             ),
         ),
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
     )
 );
 
 /// Generates a dark indigo action strip schema.
 /// @type {Map}
 /// @requires $indigo-action-strip
-$dark-indigo-action-strip: $indigo-action-strip;
+$dark-indigo-action-strip: extend(
+    $indigo-action-strip,
+    (
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
+    )
+);

package/sass/themes/schemas/components/dark/_avatar.scss

@@ -10,17 +10,41 @@
 /// Generates a dark material avatar schema.
 /// @type {Map}
 /// @requires $material-avatar
-$dark-material-avatar: $material-avatar;
+$dark-material-avatar: extend(
+    $material-avatar,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent avatar schema.
 /// @type {Map}
 /// @requires $fluent-avatar
-$dark-fluent-avatar: $fluent-avatar;
+$dark-fluent-avatar: extend(
+    $fluent-avatar,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark bootstrap avatar schema.
 /// @type {Map}
 /// @requires $bootstrap-avatar
-$dark-bootstrap-avatar: $bootstrap-avatar;
+$dark-bootstrap-avatar: extend(
+    $bootstrap-avatar,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark indigo avatar schema.
 /// @type {Map}
@@ -42,5 +66,9 @@ $dark-indigo-avatar: extend(
                 300,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_badge.scss

@@ -10,12 +10,28 @@
 /// Generates a dark material badge schema.
 /// @type {Map}
 /// @requires $material-badge
-$dark-material-badge: $material-badge;
+$dark-material-badge: extend(
+    $material-badge,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent badge schema.
 /// @type {Map}
 /// @requires $fluent-badge
-$dark-fluent-badge: $fluent-badge;
+$dark-fluent-badge: extend(
+    $fluent-badge,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark bootstrap badge schema.
 /// @type {Map}
@@ -30,10 +46,22 @@ $dark-bootstrap-badge: extend(
                 50,
             ),
         ),
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
     )
 );
 
 /// Generates a dark indigo badge schema.
 /// @type {Map}
 /// @requires $indigo-badge
-$dark-indigo-badge: $indigo-badge;
+$dark-indigo-badge: extend(
+    $indigo-badge,
+    (
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
+    )
+);

package/sass/themes/schemas/components/dark/_banner.scss

@@ -10,17 +10,41 @@
 /// Generates a dark material banner schema.
 /// @type {Map}
 /// @requires $material-banner
-$dark-material-banner: $material-banner;
+$dark-material-banner: extend(
+    $material-banner,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent banner schema.
 /// @type {Map}
 /// @requires $fluent-banner
-$dark-fluent-banner: $fluent-banner;
+$dark-fluent-banner: extend(
+    $fluent-banner,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark bootstrap banner schema.
 /// @type {Map}
 /// @requires $bootstrap-banner
-$dark-bootstrap-banner: $bootstrap-banner;
+$dark-bootstrap-banner: extend(
+    $bootstrap-banner,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark indigo banner schema.
 /// @type {Map}
@@ -43,5 +67,9 @@ $dark-indigo-banner: extend(
                 100,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_bottom-nav.scss

@@ -10,17 +10,41 @@
 /// Generates a dark material bottom-nav schema.
 /// @type {Map}
 /// @requires $material-bottom-nav
-$dark-material-bottom-nav: $material-bottom-nav;
+$dark-material-bottom-nav: extend(
+    $material-bottom-nav,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent bottom-nav schema.
 /// @type {Map}
 /// @requires $fluent-bottom-nav
-$dark-fluent-bottom-nav: $fluent-bottom-nav;
+$dark-fluent-bottom-nav: extend(
+    $fluent-bottom-nav,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark bootstrap bottom-nav schema.
 /// @type {Map}
 /// @requires $bootstrap-bottom-nav
-$dark-bootstrap-bottom-nav: $bootstrap-bottom-nav;
+$dark-bootstrap-bottom-nav: extend(
+    $bootstrap-bottom-nav,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark indigo bottom-nav schema.
 /// @type {Map}
@@ -81,5 +105,9 @@ $dark-indigo-bottom-nav: extend(
                 0.2,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_button-group.scss

@@ -127,6 +127,10 @@ $dark-material-button-group: extend(
                 0.8,
             ),
         ),
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
     )
 );
 
@@ -258,13 +262,25 @@ $dark-fluent-button-group: extend(
                 400,
             ),
         ),
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
     )
 );
 
 /// Generates a dark bootstrap button-group schema based on a mix of $bootstrap-button-group
 /// @type {Map}
 /// @requires $bootstrap-button-group
-$dark-bootstrap-button-group: $bootstrap-button-group;
+$dark-bootstrap-button-group: extend(
+    $bootstrap-button-group,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark indigo button-group schema
 /// @type {Map}
@@ -412,5 +428,9 @@ $dark-indigo-button-group: extend(
                 0.2,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_button.scss

@@ -43,6 +43,11 @@ $material-flat-button-dark: extend(
     $material-base-button-dark,
     (
         disabled-background: transparent,
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+            type: 'flat',
+        ),
     )
 );
 
@@ -61,16 +66,41 @@ $material-outlined-button-dark: extend(
             ),
         ),
         disabled-background: transparent,
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+            type: 'outlined',
+        ),
     )
 );
 
 /// @requires {Map} $material-contained-button
 /// @requires {Map} $material-base-button-dark
-$material-contained-button-dark: extend($material-contained-button, $material-base-button-dark);
+$material-contained-button-dark: extend(
+    $material-contained-button,
+    $material-base-button-dark,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+            type: 'contained',
+        ),
+    )
+);
 
 /// @requires {Map} $material-fab-button
 /// @requires {Map} $material-base-button-dark
-$material-fab-button-dark: extend($material-fab-button, $material-base-button-dark);
+$material-fab-button-dark: extend(
+    $material-fab-button,
+    $material-base-button-dark,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+            type: 'fab',
+        ),
+    )
+);
 
 /// Generates a dark material button schema.
 /// @type {Map}
@@ -154,6 +184,11 @@ $fluent-flat-button-dark: extend(
     $fluent-base-button-dark,
     (
         disabled-background: transparent,
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+            type: 'flat',
+        ),
     )
 );
 
@@ -198,6 +233,11 @@ $fluent-outlined-button-dark: extend(
                 100,
             ),
         ),
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+            type: 'outlined',
+        ),
     )
 );
 
@@ -313,6 +353,11 @@ $fluent-contained-button-dark: extend(
                 300,
             ),
         ),
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+            type: 'contained',
+        ),
     )
 );
 
@@ -429,6 +474,11 @@ $fluent-fab-button-dark: extend(
                 300,
             ),
         ),
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+            type: 'fab',
+        ),
     )
 );
 
@@ -582,6 +632,11 @@ $indigo-flat-button-dark: extend(
                 0.2,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+            type: 'flat',
+        ),
     )
 );
 
@@ -680,18 +735,43 @@ $indigo-outlined-button-dark: extend(
                 0.2,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+            type: 'outlined',
+        ),
     )
 );
 
 /// @type {Map}
 /// @requires {Map} $indigo-contained-button
 /// @requires {Map} $indigo-base-button-dark
-$indigo-contained-button-dark: extend($indigo-contained-button, $indigo-base-button-dark);
+$indigo-contained-button-dark: extend(
+    $indigo-contained-button,
+    $indigo-base-button-dark,
+    (
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+            type: 'contained',
+        ),
+    )
+);
 
 /// @type {Map}
 /// @requires {Map} $indigo-fab-button
 /// @requires {Map} $indigo-base-button-dark
-$indigo-fab-button-dark: extend($indigo-fab-button, $indigo-base-button-dark);
+$indigo-fab-button-dark: extend(
+    $indigo-fab-button,
+    $indigo-base-button-dark,
+    (
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+            type: 'fab',
+        ),
+    )
+);
 
 /// Generates a dark indigo button schema.
 /// @type {Map}

package/sass/themes/schemas/components/dark/_calendar.scss

@@ -97,6 +97,10 @@ $dark-material-calendar: extend(
                 100,
             ),
         ),
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
     )
 );
 
@@ -296,6 +300,10 @@ $dark-fluent-calendar: extend(
                 50,
             ),
         ),
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
     )
 );
 
@@ -458,6 +466,10 @@ $dark-bootstrap-calendar: extend(
                 100,
             ),
         ),
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
     )
 );
 
@@ -925,5 +937,9 @@ $dark-indigo-calendar: extend(
                 50,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_card.scss

@@ -41,19 +41,40 @@ $dark-material-card: extend(
                 0.38,
             ),
         ),
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
     )
 );
 
 /// Generates a dark fluent card schema.
 /// @type {Map}
 /// @requires $fluent-card
-$dark-fluent-card: $fluent-card;
+$dark-fluent-card: extend(
+    $fluent-card,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark bootstrap card schema.
 /// @type {Map}
 /// @requires $bootstrap-card
 /// @requires $dark-base-card
-$dark-bootstrap-card: extend($bootstrap-card, $dark-base-card);
+$dark-bootstrap-card: extend(
+    $bootstrap-card,
+    $dark-base-card,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark indigo card schema.
 /// @type {Map}
@@ -80,5 +101,9 @@ $dark-indigo-card: extend(
                 0.8,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_carousel.scss

@@ -35,7 +35,16 @@ $base-dark-carousel: extend(
 /// @type {Map}
 /// @requires $material-carousel
 /// @requires $base-dark-carousel
-$dark-material-carousel: extend($material-carousel, $base-dark-carousel);
+$dark-material-carousel: extend(
+    $material-carousel,
+    $base-dark-carousel,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent carousel schema based on a mix of $fluent-carousel and $base-dark-carousel
 /// @type {Map}
@@ -74,6 +83,11 @@ $dark-fluent-carousel: extend(
                 400,
             ),
         ),
+
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
     )
 );
 
@@ -90,6 +104,10 @@ $dark-bootstrap-carousel: extend(
                 200,
             ),
         ),
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
     )
 );
 
@@ -173,5 +191,10 @@ $dark-indigo-carousel: extend(
                 500,
             ),
         ),
+
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );