Merge pull request #6607 from IgniteUI/SIvanova/sassdoc-review

revised and updated Sass documentation

Author: kdinev

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

@@ -115,7 +115,7 @@
 /// @access public
 /// @requires {function} to-string
 /// @param {Color} $rgba - The rgba color to convert.
-/// @param {Color} $background - The background color to convert against.
+/// @param {Color} $background [#fff] - The background color to convert against.
 /// @return {Color} - The hexidecimal representation of the rgba value.
 @function hexrgba($rgba, $background: #fff) {
     @if type-of($rgba) == color {
@@ -155,7 +155,7 @@
 /// @group Palettes
 /// @param {Map} $palette - The source palette map.
 /// @param {string} $color - The target color from the color palette.
-/// @param {number|variant} $variant - The target color shade from the color palette.
+/// @param {number|variant} $variant [500] - The target color shade from the color palette.
 /// @requires igx-color
 /// @requires text-contrast
 /// @requires hexrgba
@@ -181,7 +181,7 @@
 /// Test if a component, or list of components
 /// is in the list of known components.
 /// @access private
-/// @param {String|List} $excludes - The components list to check in.
+/// @param {String|List} $items - The components list to check in.
 /// @return {List} - The list of passed items.
 @function is-component($items) {
     $register: map-keys($components);
@@ -196,7 +196,7 @@
 /// Converts numbers to HEX value strings.
 /// @access private
 /// @param {number} $num - The number to convert.
-/// @param {radix} $radix - The base radix to use for the conversion.
+/// @param {radix} $radix [16] - The base radix to use for the conversion.
 /// @return {String} - The resulting string.
 @function to-string($num, $radix: 16) {
     $chars: '0123456789abcdef';
@@ -301,7 +301,6 @@
 /// @param {Color} $surface [#fff] - The color used as a background in components, such as cards, sheets, and menus.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
-/// @see $igx-foreground-color
 @function igx-palette(
     $primary,
     $secondary,
@@ -548,7 +547,6 @@
 /// @example scss Set variable values based on $direction
 ///    $left: if-ltr(left, right);
 ///    $right: if-ltr(right, left);
-/// @requires $direction
 @function if-ltr($if, $else: null) {
     $dir: if(global-variable-exists('direction'), $direction, 'ltr');
 
@@ -566,7 +564,6 @@
 /// @example scss Set variable values based on $direction
 ///    $left: if-rtl(left, right);
 ///    $right: if-rtl(right, left);
-/// @requires $direction
 @function if-rtl($if, $else: null) {
     @return if-ltr($else, $if);
 }

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

@@ -215,8 +215,8 @@
 /// optional prefix and suffix attached to the class name.
 /// @access private
 /// @param {string} $prop - The CSS property to assign the palette color to.
-/// @param {string} $prefix [null] - A prefix to be attached to the class name.
-/// @param {string} $suffix [igx] - A suffix to be attached to the class name.
+/// @param {string} $prefix [igx] - A prefix to be attached to the class name.
+/// @param {string} $suffix [null] - A suffix to be attached to the class name.
 /// @example scss Generate background classes with colors from the palette.
 ///   // Will generate class names like
 ///   // .igx-primary-500-bg { ... };
@@ -265,7 +265,7 @@
 
 /// Add theme colors to a scope.
 /// @access public
-/// @param {map} $theme - The component theme to get the
+/// @param {map} $theme - The component theme to be used
 /// @requires {mixin} css-vars-from-theme
 @mixin igx-css-vars($theme) {
     $scope: if(is-root(), ':root', '&');

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -1,3 +1,5 @@
+/// @group themes
+/// @access private
 @mixin igx-vhelper {
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);

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

@@ -12,7 +12,6 @@
 /// @param {Color} $banner-background [null]- The background color used banner background.
 /// @param {Color} $banner-message-color [null]- The color used for banner label.
 /// @param {Color} $banner-border-color [null] - The border color used banner border.
-/// @param {Color} $banner-illustration-background [null] - The background color used for banner illustration.
 /// @param {Color} $banner-illustration-color [null] - The color used banner illustration.
 ///
 /// @requires $default-palette
@@ -149,7 +148,7 @@
 /// Uses the 'body-2' category from the typographic scale.
 /// @group typography
 /// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
-/// @param {Map} $categories [(label: 'body-2')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(message: 'body-2')] - The categories from the typographic scale used for type styles.
 /// @requires {mixin} igx-type-style
 @mixin igx-banner-typography($type-scale, $categories: (
     message: 'body-2')

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -15,6 +15,7 @@
 /// @param {Color} $item-text-color [null]- The text color for button group items.
 /// @param {Color} $item-background [null] - The background color for button group items .
 /// @param {Color} $item-border-color [null] - The border color between button group items.
+/// @param {Color} $item-disabled-border [null] - The border color for a disabled item in the button group.
 ///
 /// @param {Color} $item-hover-text-color [null] - The hover text color for button group items.
 /// @param {Color} $item-hover-background [null] - The hover background color for button group items.

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

@@ -443,7 +443,7 @@
 /// category from the typographic scale.
 /// @group typography
 /// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
-/// @param {Map} $categories [(title: 'h5', title-small: 'subtitle-2', subtitle: 'subtitle-2', content: 'body-2')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(title: 'h6', title-small: 'subtitle-2', subtitle: 'subtitle-2', content: 'body-2')] - The categories from the typographic scale used for type styles.
 /// @requires {mixin} igx-type-style
 @mixin igx-card-typography($type-scale, $categories: (
     title: 'h6',

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

@@ -7,6 +7,7 @@
 
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
 /// @param {Color} $slide-background [null] - The slide background color.
 /// @param {Color} $button-background [null] - The previous/next buttons idle background color.
 /// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color.

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

@@ -16,6 +16,7 @@
 /// @param {Color} $fill-color [null] - The checked border and fill colors.
 /// @param {Color} $tick-color [null] - The checked mark color.
 /// @param {Color} $disabled-color [null] - The disabled border and fill colors.
+/// @param {Color} $disabled-color-label [null] - The disabled label color.
 /// @param {border-radius} $border-radius [null] - The border radius used for checkbox component.
 /// @param {border-radius} $border-radius-ripple [null] - The border radius used for checkbox ripple.
 /// Set to light when the surrounding area is dark.

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

@@ -6,15 +6,22 @@
 
 /// Chip Theme
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
 /// @param {String} $border-radius [null] - The chip border-radius.
 ///
 /// @param {Color} $text-color [null] - The chip text color.
 /// @param {Color} $background [null] - The chip background color.
 /// @param {Color} $border-color [null] - The chip border color.
+/// @param {Color} $ghost-background [null] - The chip ghost background color.
+/// @param {box-shadow} $ghost-shadow [null] - The chip ghost shadow.
 ///
 /// @param {Color} $hover-text-color [null] - The chip text hover color.
 /// @param {Color} $hover-background [null] - The chip hover background color.
 /// @param {Color} $hover-border-color [null] - The chip hover border color.
+///
+/// @param {Color} $focus-text-color [null] - The chip text focus color.
+/// @param {Color} $focus-background [null] - The chip focus background color.
 /// @param {color} $focus-border-color [null] - The chip focus border color.
 ///
 /// @param {color} $selected-text-color [null] - The selected chip text color.

projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss

@@ -7,8 +7,9 @@
 
 /// Column Hiding Theme
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
-/// @param {Color} $title-color [primary 500]- The text color used for the title of the list.
-/// @param {Color} $background-color [transparent] - The background color of the panel.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Color} $title-color [null]- The text color used for the title of the list.
+/// @param {Color} $background-color [null] - The background color of the panel.
 ///
 /// @requires $default-palette
 /// @requires $light-schema