igniteui-theming 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.4.0",
+  "version": "1.4.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": {
@@ -65,7 +65,7 @@
   "devDependencies": {
     "globby": "^13.1.2",
     "husky": "^8.0.2",
-    "igniteui-sassdoc-theme": "^1.1.4",
+    "igniteui-sassdoc-theme": "^1.1.6",
     "jest": "^28.1.1",
     "lunr": "^2.3.9",
     "postcss": "^8.4.14",

package/sass/animations/_easings.scss

@@ -1,4 +1,5 @@
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/_mixins.scss

@@ -3,11 +3,16 @@
 @use 'sass:map';
 @use 'sass:string';
 
+////
+/// @package theming
+/// @group animations
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
 $keyframes: () !default;
 
 /// Registers a keyframes animation in the keyframes registry.
-/// @access public
-/// @group animations
 /// @param {String} $name - The name of the keyframes animation.
 @mixin keyframes($name) {
     $keyframe: map.has-key($keyframes, $name);
@@ -25,8 +30,6 @@ $keyframes: () !default;
 }
 
 /// Animates an element.
-/// @access public
-/// @group animations
 /// @param {List} $animate - The list of animation properties.
 /// @example scss - Animating an element
 ///  @include fade-in(); // include the 'fade-in' keyframes animation mixin

package/sass/animations/entrances/_bounce.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_fade.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_flicker.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_flip.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_puff.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_roll.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_rotate.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_scale.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_slide.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_slit.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_swing.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/entrances/_swirl.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_bounce.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_fade.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_flicker.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_flip.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_puff.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_roll.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_rotate.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_scale.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_slide.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_slit.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_swing.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/exits/_swirl.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/generic/_flip.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/generic/_rotate.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/generic/_scale.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/generic/_shadows.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/generic/_slide.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/animations/generic/_swing.scss

@@ -1,6 +1,7 @@
 @use '../mixins' as *;
 
 ////
+/// @package theming
 /// @group animations
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>

package/sass/bem/_index.scss

@@ -8,6 +8,7 @@
 /// @group bem
 /// @author <a href="https://github.com/runningskull" target="_blank">Juan Patten</a>
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @package theming
 ////
 
 /// @type String - The Element separator used. Default '__'.

package/sass/color/_charts.scss

@@ -1,7 +1,11 @@
-/// A list of color values to be used as brushes in charts.
+////
+/// @package theming
 /// @group palettes
-/// @type List
 /// @access public
+////
+
+/// A list of color values to be used as brushes in charts.
+/// @type List
 /// @prop {Color} brush-1 [rgb(157 231 114)]
 /// @prop {Color} brush-2 [rgb(139 91 177)]
 /// @prop {Color} brush-3 [rgb(109 177 255)]
@@ -26,9 +30,7 @@ $brushes-regular: (
 );
 
 /// A list of color values to be used as color-blind brushes in charts.
-/// @group palettes
 /// @type List
-/// @access public
 /// @prop {Color} brush-1 [rgb(86 180 233)]
 /// @prop {Color} brush-2 [rgb(0 158 115)]
 /// @prop {Color} brush-3 [rgb(240 228 68)]

package/sass/color/_functions.scss

@@ -9,6 +9,10 @@
 @use 'types';
 @use '../utils/math' as *;
 
+////
+/// @package theming
+////
+
 $_enhanced-accessibility: false;
 
 /// Configures the color module.

package/sass/color/_mixins.scss

@@ -5,51 +5,39 @@
 @use 'sass:string';
 @use '../utils/meta' as *;
 
-// Generates CSS variables for the base colors.
-// @access private
-@mixin _base-colors($palette) {
-    $scope: if(is-root(), ':root', '&');
+////
+/// @package theming
+////
 
-    #{$scope} {
-        @each $color, $shades in map.remove($palette, '_meta') {
-            @each $shade, $value in $shades {
-                $_shade: $shade == 500;
-                $_valid: meta.type-of($value == 'color');
+// Generates CSS variables for a base color
+// @access private
+@mixin _base($color, $shade, $value) {
+    $_shade: $shade == 500;
+    $_valid: meta.type-of($value == 'color');
 
-                @if $_shade and $_valid {
-                    --ig-#{$color}-h: #{math.round(color.hue($value))};
-                    --ig-#{$color}-s: #{math.round(color.saturation($value))};
-                    --ig-#{$color}-l: #{math.round(color.lightness($value))};
-                    --ig-#{$color}-a: #{color.alpha($value)};
-                }
-            }
-        }
+    @if $_shade and $_valid {
+        --ig-#{$color}-h: #{math.round(color.hue($value))};
+        --ig-#{$color}-s: #{math.round(color.saturation($value))};
+        --ig-#{$color}-l: #{math.round(color.lightness($value))};
+        --ig-#{$color}-a: #{color.alpha($value)};
     }
 }
 
-// Generates shade CSS variables from the base colors.
+// Generates CSS variables for a shade color
 // @access private
-@mixin _shade-colors($palette, $contrast: true) {
-    $scope: if(is-root(), '*', '&');
-
-    #{$scope} {
-        @each $color, $shades in map.remove($palette, '_meta') {
-            @each $shade, $value in $shades {
-                $_shade: meta.type-of($shade) == 'string';
-                $_hsl: if($_shade, string.index($shade, 'hsl'), false);
-                $_contrast: if($_shade, string.index($shade, 'contrast'), false);
+@mixin _shade($color, $shade, $value, $contrast) {
+    $_shade: meta.type-of($shade) == 'string';
+    $_hsl: if($_shade, string.index($shade, 'hsl'), false);
+    $_contrast: if($_shade, string.index($shade, 'contrast'), false);
 
-                @if $_hsl {
-                    $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
+    @if $_hsl {
+        $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
 
-                    --ig-#{$color}-#{$variant}: #{$value};
-                }
+        --ig-#{$color}-#{$variant}: #{$value};
+    }
 
-                @if $_contrast and $contrast {
-                    --ig-#{$color}-#{$shade}: #{$value};
-                }
-            }
-        }
+    @if $_contrast and $contrast {
+        --ig-#{$color}-#{$shade}: #{$value};
     }
 }
 
@@ -63,6 +51,14 @@
 ///    @include palette($palette);
 /// @require {function} is-root
 @mixin palette($palette, $contrast: true) {
-    @include _base-colors($palette);
-    @include _shade-colors($palette, $contrast);
+    $scope: if(is-root(), ':root', '&');
+
+    #{$scope} {
+        @each $color, $shades in map.remove($palette, '_meta') {
+            @each $shade, $value in $shades {
+                @include _base($color, $shade, $value);
+                @include _shade($color, $shade, $value, $contrast);
+            }
+        }
+    }
 }

package/sass/color/_types.scss

@@ -2,6 +2,7 @@
 @use 'sass:list';
 
 ////
+/// @package theming
 /// @group Palettes
 ////
 

package/sass/color/presets/dark/_bootstrap.scss

@@ -1,12 +1,16 @@
 @use '../../functions' as *;
 
+////
+/// @package theming
+/// @group palettes
+/// @access public
+////
+
 /**
  * @sass-export-section="dark-bootstrap"
  */
 /// Generates the dark bootstrap palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name dark-bootstrap-palette
 /// @prop {Color} primary [#0d6efd] - The primary color
 /// @prop {Color} secondary [#6c757d] - The secondary color

package/sass/color/presets/dark/_extra.scss

@@ -1,12 +1,16 @@
 @use '../../functions' as *;
 
+////
+/// @package theming
+/// @group palettes
+/// @access public
+////
+
 /**
  * @sass-export-section="dark"
  */
 /// Generates the dark green palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name dark-green-palette
 /// @prop {Color} primary [#09f] - The primary color
 /// @prop {Color} secondary [#72da67] - The secondary color
@@ -28,8 +32,6 @@ $green-palette: palette(
 
 /// Generates the dark purple palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name dark-purple-palette
 /// @prop {Color} primary [#00b4d6] - The primary color
 /// @prop {Color} secondary [#514590] - The secondary color

package/sass/color/presets/dark/_fluent.scss

@@ -1,12 +1,16 @@
 @use '../../functions' as *;
 
+////
+/// @package theming
+/// @group palettes
+/// @access public
+////
+
 /**
  * @sass-export-section="dark-fluent"
  */
 /// Generates the dark fluent palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name dark-fluent-palette
 /// @prop {Color} primary [#0078d4] - The primary color
 /// @prop {Color} secondary [#2b88d8] - The secondary color
@@ -29,8 +33,6 @@ $palette: palette(
 
 /// Generates the dark fluent word palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name dark-fluent-word-palette
 /// @prop {Color} primary [#2b579a] - The primary color
 /// @prop {Color} secondary [#2b579a] - The secondary color
@@ -53,8 +55,6 @@ $word-palette: palette(
 
 /// Generates the dark fluent excel palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name dark-fluent-excel-palette
 /// @prop {Color} primary [#217346] - The primary color
 /// @prop {Color} secondary [#217346] - The secondary color

package/sass/color/presets/dark/_indigo.scss

@@ -1,12 +1,16 @@
 @use '../../functions' as *;
 
+////
+/// @package theming
+/// @group palettes
+/// @access public
+////
+
 /**
  * @sass-export-section="dark-indigo"
  */
 /// Generates the dark indigo palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name dark-indigo-palette
 /// @prop {Color} primary [#3f51b5] - The primary color
 /// @prop {Color} secondary [#3f51b5] - The secondary color

package/sass/color/presets/dark/_material.scss

@@ -1,12 +1,16 @@
 @use '../../functions' as *;
 
+////
+/// @package theming
+/// @group palettes
+/// @access public
+////
+
 /**
  * @sass-export-section="dark-material"
  */
 /// Generates the dark material palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name dark-material-palette
 /// @prop {Color} primary [#09f] - The primary color
 /// @prop {Color} secondary [#e41c77] - The secondary color

package/sass/color/presets/light/_bootstrap.scss

@@ -1,12 +1,16 @@
 @use '../../functions' as *;
 
+////
+/// @package theming
+/// @group palettes
+/// @access public
+////
+
 /**
  * @sass-export-section="light-bootstrap"
  */
 /// Generates the light bootstrap palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name light-bootstrap-palette
 /// @prop {Color} primary [#0d6efd] - The primary color
 /// @prop {Color} secondary [#6c757d] - The secondary color

package/sass/color/presets/light/_extra.scss

@@ -1,12 +1,16 @@
 @use '../../functions' as *;
 
+////
+/// @package theming
+/// @group palettes
+/// @access public
+////
+
 /**
  * @sass-export-section="light"
  */
 /// Generates the light green palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name light-green-palette
 /// @prop {Color} primary [#09f] - The primary color
 /// @prop {Color} secondary [#72da67] - The secondary color
@@ -28,8 +32,6 @@ $green-palette: palette(
 
 /// Generates the light purple palette.
 /// @type Map
-/// @access public
-/// @group palettes
 /// @name light-purple-palette
 /// @prop {Color} primary [#00b4d6] - The primary color
 /// @prop {Color} secondary [#514590] - The secondary color