igniteui-theming 1.1.2 → 1.1.3

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "igniteui-theming",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {
-    "clean": "rimraf \"json/\"",
+    "clean": "npm run clean:json && npm run clean:docs",
+    "clean:json": "rimraf \"json/\"",
+    "clean:docs": "rimraf \"docs/\"",
     "build": "npm run build:json && npm run build:e2e",
-    "build:docs": "npx sassdoc ./sass",
+    "build:docs": "npm run clean:docs && npm run build:docs:en:production",
+    "build:docs:en:production": "set NODE_ENV=production && npx sassdoc ./sass -d docs",
+    "build:docs:en:staging": "set NODE_ENV=staging && npx sassdoc ./sass -d docs",
     "build:e2e": "sass ./test/e2e/theme.scss ./test/e2e/theme.css",
     "build:json": "node scripts/buildJSON.mjs",
     "lint": "stylelint ./sass",
     "test": "jest",
-    "serve:docs": "npx http-server ./sassdoc"
+    "serve:docs": "npx http-server ./docs"
   },
   "files": [
     "/sass",
@@ -47,6 +51,8 @@
   },
   "devDependencies": {
     "globby": "^13.1.2",
+    "igniteui-sassdoc-theme": "^1.1.4",
+    "sassdoc-plugin-localization": "^1.4.3",
     "jest": "^28.1.1",
     "postcss": "^8.4.14",
     "rimraf": "^3.0.2",
@@ -54,7 +60,8 @@
     "sass-true": "^6.1.0",
     "stylelint": "^14.9.1",
     "stylelint-config-standard-scss": "^4.0.0",
-    "stylelint-scss": "^4.2.0"
+    "stylelint-scss": "^4.2.0",
+    "lunr": "^2.3.9"
   },
   "peerDependencies": {
     "sass": "^1.53.0"

package/sass/bem/_index.scss

@@ -11,12 +11,15 @@
 ////
 
 /// @type String - The Element separator used. Default '__'.
+/// @access private
 $bem--sep-elem: if(meta.variable-exists(bem--sep-elem), $bem--sep-elem, '__');
 
 /// @type String - The Modifier separator used. Default '--'.
+/// @access private
 $bem--sep-mod: if(meta.variable-exists(bem--sep-mod), $bem--sep-mod, '--');
 
 /// @type String - The Modifier Value separator used. Default '-'.
+/// @access private
 $bem--sep-mod-val: if(meta.variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-');
 
 /// Converts a passed selector value into plain string.
@@ -125,7 +128,7 @@ $bem--sep-mod-val: if(meta.variable-exists(bem--sep-mod-val), $bem--sep-mod-val,
 }
 
 /// Generates a full BEM selector.
-/// @access public
+/// @access private
 /// @param {String} $block - Required. A string block name.
 /// @param {String|List} $elem - Optional. A sub-element name. If `$mod` is not present, it is
 /// joined with $block. If $mod is present, it is nested under `$block--$mod`.

package/sass/color/_charts.scss

@@ -1,4 +1,5 @@
 /// A list of color values to be used as brushes in charts.
+/// @group palettes
 /// @type List
 /// @access public
 $brushes-regular: (
@@ -15,6 +16,7 @@ $brushes-regular: (
 );
 
 /// A list of color values to be used as color-blind brushes in charts.
+/// @group palettes
 /// @type List
 /// @access public
 $brushes-color-blind: (

package/sass/color/_functions.scss

@@ -13,6 +13,7 @@ $_enhanced-accessibility: false;
 
 /// Configures the color module.
 /// @access public
+/// @group color
 /// @param {Boolean} $enhanced-accessibility [null] - Enables features like color blind palettes.
 @mixin configure-colors($enhanced-accessibility: null) {
     @if $enhanced-accessibility {
@@ -261,7 +262,7 @@ $_enhanced-accessibility: false;
 }
 
 /// Mixes two colors to produce an opaque color.
-/// @access public
+/// @access private
 /// @group Color
 /// @param {Color} $color-1 - The first color, usually transparent.
 /// @param {Color} $color-2 [#fff] - The second color, usually opaque.

package/sass/color/_types.scss

@@ -7,14 +7,17 @@
 
 /// A list consisting of all generated gray shades
 /// @type Map
+/// @access private
 $IGrayShades: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
 
 /// A list consisting of all generated shades for palette colors
 /// @type Map
+/// @access private
 $IColorShades: list.join($IGrayShades, ('A100', 'A200', 'A400', 'A700'));
 
 /// All palette colors mapped with corresponding color shades
 /// @type Map
+/// @access private
 $IPaletteColors: (
     'primary': $IColorShades,
     'secondary': $IColorShades,
@@ -28,10 +31,12 @@ $IPaletteColors: (
 
 /// A list consisting of palette metadata
 /// @type Map
+/// @access private
 $IPaletteMeta: (
     'variant': null,
 );
 
 /// A map with all palette colors and palette meta
 /// @type Map
+/// @access private
 $IPalette: map.merge($IPaletteColors, (_meta: $IPaletteMeta));

package/sass/elevations/_functions.scss

@@ -9,7 +9,7 @@
 $factor: var(--ig-elevation-factor, 1);
 
 /// Checks if the passed argument is a valid box-shadow.
-/// @access public
+/// @access private
 /// @param {List} $shadow - A list of shadow properties.
 /// @return {Boolean} - Returns a boolean depending on if the passed argument is a valid shadow.
 @function _is-shadow($shadow) {
@@ -31,7 +31,7 @@ $factor: var(--ig-elevation-factor, 1);
 }
 
 /// Transforms the passed box-shadow list according to the elevation factor value.
-/// @access public
+/// @access private
 /// @param {List} $shadow - A list of shadow properties.
 /// @return {List} - The transformed shadow list.
 @function _transform-shadow($shadow) {

package/sass/elevations/presets/_index.scss

@@ -1,13 +1,16 @@
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
+/// @access private
 $color-1: rgba(0 0 0 / 26%) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
+/// @access private
 $color-2: rgba(0 0 0 / 12%) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
+/// @access private
 $color-3: rgba(0 0 0 / 8%) !default;
 
 @forward './material' as material-* with(

package/sass/elevations/presets/_material.scss

@@ -7,17 +7,21 @@
 
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
+/// @access private
 $color-1: rgba(0 0 0 / 26%) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
+/// @access private
 $color-2: rgba(0 0 0 / 12%) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
+/// @access private
 $color-3: rgba(0 0 0 / 8%) !default;
 
 /// All elevation levels
+/// @access private
 $_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));
 $_2: box-shadow((0 1px 5px 0 $color-1, 0 2px 2px 0 $color-2, 0 3px 1px -2px $color-3));
 $_3: box-shadow((0 1px 8px 0 $color-1, 0 3px 4px 0 $color-2, 0 3px 3px -2px $color-3));
@@ -43,7 +47,11 @@ $_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42p
 $_23: box-shadow((0 11px 14px -7px $color-1, 0 23px 36px 3px $color-2, 0 9px 44px 8px $color-3));
 $_24: box-shadow((0 11px 15px -7px $color-1, 0 24px 38px 3px $color-2, 0 9px 46px 8px $color-3));
 
-/// Allows user configration of this module.
+/// Configures shadow colors for the material elevations.
+/// @access public
+/// @param {Color} $color-1 - The umbra shadow color.
+/// @param {Color} $color-2 - The penumbra shadow color.
+/// @param {Color} $color-3 - The ambiant shadow color.
 @mixin configure($color-1, $color-2, $color-3) {
     @if $color-1 {
         $color-1: $color-1 !global;
@@ -63,6 +71,7 @@ $_24: box-shadow((0 11px 15px -7px $color-1, 0 24px 38px 3px $color-2, 0 9px 46p
  */
 /// А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
 /// @type Map
+/// @access private
 $elevations: (
     0: none,
     1: $_1,

package/sass/themes/_functions.scss

@@ -96,7 +96,7 @@
 }
 
 /// Retrieves the CSS custom property reference for the given key in the component theme.
-/// @access public
+/// @access private
 /// @param {Map} $theme - The source theme to be used to read values from.
 /// @param {String} $property - A key from the theme map to assign as value to the property.
 /// @param {String} $fallback [null] - A value to be used if the CSS property is not defined.
@@ -126,6 +126,7 @@
 }
 
 /// Used to switch between values based on the size of the component.
+/// @group themes
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
@@ -140,6 +141,7 @@
 }
 
 /// Used to add spacing.
+/// @group utilities
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
@@ -157,6 +159,7 @@
 }
 
 /// Used to add inline spacing.
+/// @group utilities
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
@@ -167,6 +170,7 @@
 }
 
 /// Used to add block spacing.
+/// @group utilities
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.

package/sass/themes/_mixins.scss

@@ -39,6 +39,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 
 /// Add theme colors as CSS variables to a given scope.
 /// @access public
+/// @group themes
 /// @param {map} $theme - The component theme to be used.
 /// @param {map} $scope [null] - The CSS variables scope to be used. (optional)
 /// @requires {mixin} css-vars-from-theme
@@ -74,6 +75,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 
 /// Truncates text to a specific number of lines.
 /// @access public
+/// @group utilities
 /// @param {number|string} $lines - The number of lines to show
 /// @param {Boolean} $inline - Sets whether an element displays inline-box or box
 /// @param {Boolean} $vertical - Sets whether an element lays out its contents horizontally or vertically
@@ -88,6 +90,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 
 /// Applies text-overflow ellipsis to e text element.
 /// This won't work on display flex elements.
+/// @group utilities
 /// @access public
 @mixin ellipsis() {
     white-space: nowrap;
@@ -96,6 +99,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 }
 
 /// Hides the element from the DOM.
+/// @group utilities
 /// @access public
 /// @example scss - Sample usage
 ///   input[type="checkbox"] {
@@ -115,6 +119,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 }
 
 /// Adds the required CSS properties so that the scope can react to size changes.
+/// @group themes
 /// @access public
 @mixin sizable() {
     --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);

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

@@ -68,7 +68,7 @@
 /// @param {Number} $y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
 /// @param {Color} $y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis.
 /// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

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

@@ -26,7 +26,7 @@
 /// @param {Color} $plot-area-background [null] - Sets the brush used as the background for the current Chart object's plot area.
 /// @param {String} $title-horizontal-alignment [null] - The horizontal alignment to use for the title. Valid options are 'left', 'center', and 'right';
 /// @param {String} $subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle. Valid options are 'left', 'center', and 'right';
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

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

@@ -21,7 +21,7 @@
 /// @param {Number} $selected-slice-opacity [null] - Sets the opacity of the selected slice.
 /// @param {Color} $selected-slice-stroke [null] - Sets the stroke color of the selected slice.
 /// @param {Number} $selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

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

@@ -72,7 +72,7 @@
 /// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
 /// @param {String} $zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane.
 /// @param {Number} $zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

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

@@ -23,7 +23,7 @@
 /// @param {Number} $outline-thickness [null] - Sets the thickness of outline around slices.
 /// @param {Color} $text-color - [null] Sets the Color used for the inner labels.
 ///
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

package/sass/themes/charts/_gauge-theme.scss

@@ -35,7 +35,7 @@
 /// @param {Number} $scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline.
 /// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.
 /// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -43,7 +43,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($custom-gauge-theme);
 @function linear-gauge-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
     $rest...
 ) {
@@ -76,7 +76,7 @@
     );
 }
 
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
 /// @param {Map} $width [null] - The width of the gauge in pixels, string (px) or percentage (%).
 /// @param {Map} $height [null] - The height of the gauge in pixels, string (px) or percentage (%).
@@ -95,7 +95,7 @@
 /// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
 /// @param {Color} $needle-pivot-brush [null] - Sets the color of the needle pivot point.
 /// @param {Color} $needle-pivot-outline [null] - Sets the outline color of the needle pivot point.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -103,7 +103,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($custom-gauge-theme);
 @function radial-gauge-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
     $rest...
 ) {

package/sass/themes/charts/_geo-map-theme.scss

@@ -12,10 +12,10 @@
 /// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
 ////
 
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
 /// @param {String} $plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -23,7 +23,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-map-theme);
 @function geo-map-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
     $plot-area-background: null
 ) {

package/sass/themes/charts/_graph-theme.scss

@@ -12,7 +12,7 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
 /// @param {Color} $backing-brush [null] - Sets the brush to use to fill the backing of the bullet graph.
 /// @param {Color} $backing-outline [null] - Sets the brush to use for the outline of the backing.
@@ -34,7 +34,7 @@
 /// @param {Color} $value-brush [null] - Sets the brush to use for the actual value element.
 /// @param {Color} $value-outline [null] - Sets the brush to use for the outline of actual value element.
 /// @param {Number} $value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -42,7 +42,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-chart-theme);
 @function bullet-graph-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
 
     $backing-brush: null,

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

@@ -24,7 +24,7 @@
 /// @param {String} $leader-line-type [null] - Sets what type of leader lines will be used for the outside end labels. Valid values are: 'straight', 'spline', and 'arc'.
 /// @param {String} $leader-line-visibility [null] - Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'.
 /// @param {Number} $radius-factor [null] - Sets the scaling factor of the chart's radius. Value between 0 and 1.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

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

@@ -54,7 +54,7 @@
 /// @param {String} $y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title.
 /// @param {Color} $y-axis-title-color [null] - Sets color of title on the Y-axis.
 /// @param {List} $y-axis-title-margin [null] - Sets the margin around the title on the Y-axis.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss

package/sass/themes/charts/_sparkline-theme.scss

@@ -11,7 +11,7 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
 ///
 /// @param {Color} $brush [null] - Sets the sparkline brush.
@@ -34,7 +34,7 @@
 /// @param {Color} $horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline.
 /// @param {Color} $vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline.
 /// @param {Color} $normal-range-fill [null] - Sets the normal range brush of the sparkline.
-/// @requires $light-schema
+/// @requires $light-material-schema
 /// @requires extend
 ///
 /// @example scss
@@ -42,7 +42,7 @@
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-sparkline-theme);
 @function sparkline-theme(
-    $schema: $light-schema,
+    $schema: $light-material-schema,
     $target: 'angular',
 
     $brush: null,

package/sass/themes/schemas/charts/dark/_category-chart.scss

@@ -10,24 +10,19 @@
 /// Generates a dark category-chart schema based on a mix of $material-category-chart and $base-dark-category-chart
 /// @type {Map}
 /// @requires $material-category-chart
-/// @requires $base-dark-category-chart
-/// @see $default-palette
 $dark-material-category-chart: $material-category-chart;
 
 /// Generates a dark fluent category-chart schema based on a mix of $fluent-category-chart and $base-dark-category-chart
 /// @type {Map}
 /// @requires $fluent-category-chart
-/// @requires $base-dark-category-chart
 $dark-fluent-category-chart: $fluent-category-chart;
 
 /// Generates a bootstrap category-chart schema based on a mix of $bootstrap-category-chart and $base-dark-category-chart
 /// @type {Map}
 /// @requires $bootstrap-category-chart
-/// @requires $base-dark-category-chart
 $dark-bootstrap-category-chart: $bootstrap-category-chart;
 
 /// Generates an indigo category-chart schema based on a mix of $indigo-category-chart and $base-dark-category-chart
 /// @type {Map}
 /// @requires $indigo-category-chart
-/// @requires $base-dark-category-chart
 $dark-indigo-category-chart: $indigo-category-chart;

package/sass/themes/schemas/charts/dark/_doughnut-chart.scss

@@ -9,7 +9,6 @@
 /// Generates a dark doughnut chart schema.
 /// @type {Map}
 /// @requires {function} extend
-/// @see $default-palette
 $dark-material-doughnut-chart: $material-doughnut-chart;
 
 /// Generates a dark fluent doughnut-chart schema.

package/sass/themes/schemas/charts/dark/_financial-chart.scss

@@ -9,7 +9,6 @@
 /// Generates a dark financial chart schema.
 /// @type {Map}
 /// @requires $material-financial-chart
-/// @see $default-palette
 $dark-material-financial-chart: $material-financial-chart;
 
 /// Generates a dark fluent financial-chart schema.

package/sass/themes/schemas/charts/dark/_funnel-chart.scss

@@ -9,7 +9,6 @@
 /// Generates a dark funnel chart schema.
 /// @type {Map}
 /// @requires $material-funnel-chart
-/// @see $default-palette
 $dark-material-funnel-chart: $material-funnel-chart;
 
 /// Generates a dark fluent funnel-chart schema.
@@ -24,5 +23,5 @@ $dark-bootstrap-funnel-chart: $bootstrap-funnel-chart;
 
 /// Generates a dark indigo funnel-chart schema.
 /// @type {Map}
-/// @requires $ndigo-funnel-chart
+/// @requires $indigo-funnel-chart
 $dark-indigo-funnel-chart: $indigo-funnel-chart;

package/sass/themes/schemas/charts/dark/_index.scss

@@ -10,6 +10,14 @@
 @use './shape-chart' as *;
 @use './sparkline' as *;
 
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// Generates the global charts dark material schema.
+/// @type {Map}
 $dark-material-schema: (
     category-chart: $dark-material-category-chart,
     data-chart: $dark-material-data-chart,
@@ -24,6 +32,9 @@ $dark-material-schema: (
     shape-chart: $dark-material-shape-chart,
     sparkline: $dark-material-sparkline,
 );
+
+/// Generates the global charts dark bootstrap schema.
+/// @type {Map}
 $dark-bootstrap-schema: (
     category-chart: $dark-bootstrap-category-chart,
     data-chart: $dark-bootstrap-data-chart,
@@ -38,6 +49,9 @@ $dark-bootstrap-schema: (
     shape-chart: $dark-bootstrap-shape-chart,
     sparkline: $dark-bootstrap-sparkline,
 );
+
+/// Generates the global charts dark fluent schema.
+/// @type {Map}
 $dark-fluent-schema: (
     category-chart: $dark-fluent-category-chart,
     data-chart: $dark-fluent-data-chart,
@@ -52,6 +66,9 @@ $dark-fluent-schema: (
     shape-chart: $dark-fluent-shape-chart,
     sparkline: $dark-fluent-sparkline,
 );
+
+/// Generates the global charts dark indigo schema.
+/// @type {Map}
 $dark-indigo-schema: (
     category-chart: $dark-indigo-category-chart,
     data-chart: $dark-indigo-data-chart,

package/sass/themes/schemas/charts/dark/_shape-chart.scss

@@ -9,7 +9,6 @@
 /// Generates a dark shape chart schema.
 /// @type {Map}
 /// @requires $material-shape-chart
-/// @see $default-palette
 $dark-material-shape-chart: $material-shape-chart;
 
 /// Generates a dark fluent shape-chart schema.

package/sass/themes/schemas/charts/dark/_sparkline.scss

@@ -9,7 +9,6 @@
 /// Generates a dark sparkline schema.
 /// @type {Map}
 /// @requires $material-sparkline
-/// @see $default-palette
 $dark-material-sparkline: $material-sparkline;
 
 /// Generates a dark fluent sparkline schema.

package/sass/themes/schemas/charts/light/_category-chart.scss

@@ -61,7 +61,6 @@
 /// @property {Number} y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
 /// @property {Color} y-axis-tick-stroke [color: ('gray', 500)] - Sets the color to apply to tickmarks along the Y-axis.
 /// @property {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
-/// @see $default-palette
 $material-category-chart: (
     'margin': (
         expand-shorthand: (null)

package/sass/themes/schemas/charts/light/_data-chart.scss

@@ -19,7 +19,6 @@
 /// @property {Color} plot-area-background [color: ('surface', 500)] - Sets the brush used as the background for the current Chart object's plot area.
 /// @property {String} title-horizontal-alignment [null] - The horizontal alignment to use for the title.
 /// @property {String} subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle.
-/// @see $default-palette
 $material-data-chart: (
     'margin': null,
     'title-text-color': (

package/sass/themes/schemas/charts/light/_doughnut-chart.scss

@@ -17,7 +17,6 @@
 /// @property {Number} selected-slice-opacity [null] - Sets the opacity of the selected slice.
 /// @property {Color} selected-slice-stroke [null] - Sets the stroke color of the selected slice.
 /// @property {Number} selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice.
-/// @see $default-palette
 $material-doughnut-chart: (
     'brushes': series,
     'outlines': series,

package/sass/themes/schemas/charts/light/_financial-chart.scss

@@ -65,7 +65,6 @@
 /// @prop {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
 /// @prop {String} zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane.
 /// @prop {Number} zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane.
-/// @see $default-palette
 $material-financial-chart: (
     'margin': null,
     'title-alignment': null,

package/sass/themes/schemas/charts/light/_funnel-chart.scss

@@ -16,7 +16,6 @@
 /// @property {Number} outline-thickness [null] - Sets the thickness of outline around slices.
 /// @property {Color} text-color [null] - Sets the Color used for the inner labels.
 /// @property {String} text-style [null] - Sets the text style for inner labels.
-/// @see $default-palette
 $material-funnel-chart: (
     'brushes': series,
     'outlines': series,

package/sass/themes/schemas/charts/light/_gauge.scss

@@ -23,7 +23,6 @@
 /// @property {Color} scale-brush [(color: 'surface', darken: 8%)] - Sets the color to use to fill the scale of the linear gauge.
 /// @property {Color} tick-brush [(color: 'surface', rgba: .62)] - Sets the color to use for the major tickmarks.
 /// @property {Number} tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
-/// @see $default-palette
 $material-gauge: (
     'backing-brush': (
         color: 'surface',

package/sass/themes/schemas/charts/light/_geo-map.scss

@@ -9,7 +9,6 @@
 /// Generates a material geo map schema.
 /// @type {Map}
 /// @prop {String} plot-area-background [null] - Gets or sets the brush used as the background for the current Map object's plot area.
-/// @see $default-palette
 $material-geo-map: (
     'plot-area-background': (
         color: 'surface'

package/sass/themes/schemas/charts/light/_graph.scss

@@ -28,7 +28,6 @@
 /// @prop {Color} value-brush [(color: ('gray', 800))] - Sets the brush to use for the actual value element.
 /// @prop {Color} value-outline [null] - Sets the brush to use for the outline of actual value element.
 /// @prop {Number} value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
-/// @see $default-palette
 $material-graph: (
     'backing-brush': (
         color: 'surface',

package/sass/themes/schemas/charts/light/_index.scss

@@ -10,6 +10,14 @@
 @use './shape-chart' as *;
 @use './sparkline' as *;
 
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// Generates the global charts light material schema.
+/// @type {Map}
 $light-material-schema: (
     category-chart: $material-category-chart,
     data-chart: $material-data-chart,
@@ -24,6 +32,9 @@ $light-material-schema: (
     shape-chart: $material-shape-chart,
     sparkline: $material-sparkline,
 );
+
+/// Generates the global charts light bootstrap schema.
+/// @type {Map}
 $light-bootstrap-schema: (
     category-chart: $bootstrap-category-chart,
     data-chart: $bootstrap-data-chart,
@@ -38,6 +49,9 @@ $light-bootstrap-schema: (
     shape-chart: $bootstrap-shape-chart,
     sparkline: $bootstrap-sparkline,
 );
+
+/// Generates the global charts light fluent schema.
+/// @type {Map}
 $light-fluent-schema: (
     category-chart: $fluent-category-chart,
     data-chart: $fluent-data-chart,
@@ -52,6 +66,9 @@ $light-fluent-schema: (
     shape-chart: $fluent-shape-chart,
     sparkline: $fluent-sparkline,
 );
+
+/// Generates the global charts light indigo schema.
+/// @type {Map}
 $light-indigo-schema: (
     category-chart: $indigo-category-chart,
     data-chart: $indigo-data-chart,

package/sass/themes/schemas/charts/light/_shape-chart.scss

@@ -48,7 +48,6 @@
 /// @property {String} y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title.
 /// @property {Color} y-axis-title-color [null] - Sets color of title on the Y-axis.
 /// @property {List} y-axis-title-margin [null] - Sets the margin around the title on the Y-axis.
-/// @see $default-palette
 $material-shape-chart: (
     'margin': null,
     'title-alignment': null,

package/sass/themes/schemas/charts/light/_sparkline.scss

@@ -26,7 +26,6 @@
 /// @prop {Color} horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline.
 /// @prop {Color} vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline.
 /// @prop {Color} normal-range-fill [null] - Sets the normal range brush of the sparkline.
-/// @see $default-palette
 $material-sparkline: (
     'brush': (
         color: ('primary', 500)

package/sass/typography/_types.scss

@@ -4,6 +4,7 @@
 
 /// A list consisting of 13 different category type styles
 /// @type List
+/// @access private
 $ITypeScale: (
     h1,
     h2,
@@ -22,6 +23,7 @@ $ITypeScale: (
 
 /// A set of style rules for all categories
 /// @type Map
+/// @access private
 $ITypeStyle: (
     font-family: var(--ig-font-family),
     font-size: null,
@@ -36,6 +38,7 @@ $ITypeStyle: (
 
 /// A list of all category type styles that can be maped to native elements
 /// @type Map
+/// @access private
 $IElementCategories: (
     h1: 'h1',
     h2: 'h2',

package/sass/typography/charts/_index.scss

@@ -7,6 +7,11 @@
 @use '../../themes/charts/pie-chart-theme' as *;
 @use '../../themes/charts/shape-chart-theme' as *;
 
+/// Includes all chart related typography styles for a given type-scale and target.
+/// @group typography
+/// @param {Map} $type-scale - The type-scale to be used when including typography styles.
+/// @param {String} $target ['angular'] - The target platform. Could be 'angular', 'webc', or 'blazor'.
+/// @access public
 @mixin charts-typography($type-scale, $target: 'angular') {
     @include category-chart-typography($type-scale: $type-scale, $target: $target);
     @include data-chart-typography($type-scale: $type-scale, $target: $target);

package/sass/utils/_css.scss

@@ -3,6 +3,7 @@
 
 /// Expands the provided list of values in all four directions.
 /// Works similar to how to browser expands shorthands for margins.
+/// @access private
 /// @param {List} $list - The of values to be expanded. Supports up to four values.
 /// @param {string} $prop [margin] - The name of the property.
 /// @returns {Map} - Returns an expanded list of values.

package/sass/utils/_map.scss

@@ -23,6 +23,7 @@
 }
 
 /// Extends a Map with the values of another Map, disregarding null values in the process.
+/// @group utilities
 /// @access public
 /// @param {Map...} $maps - The maps to get extended.
 /// @requires {function} clean
@@ -38,6 +39,7 @@
 }
 
 /// Prefixes the keys in a map with the specified prefix and separator.
+/// @access private
 /// @param {Map} $map - The target map.
 /// @param {String} $prefix - The string used to prefix all keys in the map.
 /// @param {String} $separator [-] - The string used as a separator between the prefix and the key.

package/sass/utils/_math.scss

@@ -2,6 +2,7 @@
 @use 'sass:string';
 
 /// Rounds a number to a certain precision
+/// @group utilities
 /// @access public
 /// @param {Number} $number - The number to be rounded
 /// @param {Number} $precision [2] - Specifies the number of the digits after the decimal separator

package/sass/utils/_string.scss

@@ -4,6 +4,8 @@
 @use 'sass:meta';
 
 /// Splits a string into a list by a given separator.
+/// @access public
+/// @group utilities
 /// @param {String} $string - The string to split.
 /// @param {String} $separator - The string separator to split the string by.
 @function split($string, $separator) {
@@ -23,6 +25,8 @@
 }
 
 /// Returns a new string with one, some, or all matches of a string replaced by a replacement.
+/// @access public
+/// @group utilities
 /// @param {String} $string - The target string.
 /// @param {String} $search - The term to search form.
 /// @param {String} $replace - The string to replace the search term with.
@@ -41,6 +45,8 @@
 }
 
 /// Converts a string to a number.
+/// @access private
+/// @group utilities
 /// @param {String} $value - The target string.
 @function to-number($value) {
     @if meta.type-of($value) == 'number' {