docs(SassDocs): Fix Warnings and Annotations (#12318)

* docs(SassDocs): Fix Warnings and Annotations

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: desig9stein

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

@@ -3,11 +3,8 @@
 @use 'sass:list';
 @use 'sass:string';
 
-////
 /// @group Utilities
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-////
-
 /// @access private
 @function is-used($name, $checklist) {
     $used: true;

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-component.scss

@@ -1,14 +1,8 @@
 @use '../../base' as *;
 @use 'sass:string';
 
-////
-/// @group components
+/// @access private
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @requires {mixin} bem-block
-/// @requires {mixin} bem-elem
-/// @requires {mixin} bem-mod
-////
-
 @mixin component {
     @include b(igx-action-strip) {
         // Register the component in the component registry

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -18,14 +18,10 @@
 /// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
 /// @param {actions-border-radius} $actions-border-radius [null] - The border radius used for actions container inside action strip component.
 ///
-/// @requires extend
-/// @requires digest-schema
-/// @requires text-contrast
-///
 /// @example scss Change the background and icon colors in action strip
 ///   $my-action-strip-theme: action-strip-theme($background: black);
-///   // Pass the theme to the action-strip component mixin
-///   @include action-strip($my-action-strip-theme);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-action-strip-theme);
 @function action-strip-theme(
     $schema: $light-schema,
 
@@ -65,9 +61,6 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} css-vars
-/// @requires rem
-/// @requires var-get
 @mixin action-strip($theme) {
     @include css-vars($theme);
 

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

@@ -1,13 +1,8 @@
 @use '../../base' as *;
 @use 'sass:string';
 
-////
-/// @group components
+/// @access private
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @requires {mixin} bem-block
-/// @requires {mixin} bem-elem
-/// @requires {mixin} bem-mod
-////
 @mixin component {
     @include b(igx-avatar) {
         // Register the component in the component registry

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

@@ -16,16 +16,12 @@
 /// @param {Color} $background [null] - The background color used of the avatar.
 /// @param {number} $border-radius [null] - The border-radius used of the avatar.
 /// @param {number} $size [null] - The size of the avatar.
-/// @requires $default-palette
 /// @requires $light-schema
-/// @requires digest-schema
-/// @requires text-contrast
-/// @requires extend
 ///
 /// @example scss Change the background and icon colors in icon avatars
 ///   $my-avatar-theme: avatar-theme($icon-background: black, $icon-color: white);
-///   // Pass the theme to the avatar component mixin
-///   @include avatar($my-avatar-theme);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-avatar-theme);
 @function avatar-theme(
     $schema: $light-schema,
     $background: null,
@@ -62,9 +58,6 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} css-vars
-/// @requires rem
-/// @requires var-get
 @mixin avatar($theme) {
     @include css-vars($theme);
 

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

@@ -1,14 +1,8 @@
 @use '../../base' as *;
 @use 'sass:string';
 
-////
-/// @group components
+/// @access private
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @requires {mixin} bem-block
-/// @requires {mixin} bem-elem
-/// @requires {mixin} bem-mod
-////
-
 @mixin component {
     @include b(igx-badge) {
         $this: bem--selector-to-string(&);

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

@@ -23,18 +23,10 @@
 /// @param {border-radius} $border-radius [null] - The border radius used for badge component.
 ///
 /// @requires $light-schema
-/// @requires digest-schema
-/// @requires extend
-/// @requires elevation
-/// @requires text-contrast
-/// @requires rem
 ///
 /// @example scss Change the text and icon colors in a badge
 ///   $my-badge-theme: badge-theme($icon-color: black, $background-color: white);
-///   // IE Supported theme - Pass the theme to the badge component mixin
-///   @include badge($my-badge-theme);
-///
-///   // Theming using css variables (not supported in IE11):
+///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-badge-theme);
 @function badge-theme(
     $schema: $light-schema,
@@ -91,10 +83,6 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} css-vars
-/// @requires color
-/// @requires rem
-/// @requires var-get
 @mixin badge($theme) {
     @include css-vars($theme);
 

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

@@ -1,14 +1,8 @@
 @use '../../base' as *;
 @use 'sass:string';
 
-////
-/// @group components
+/// @access private
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-/// @requires {mixin} bem-block
-/// @requires {mixin} bem-elem
-/// @requires {mixin} bem-mod
-////
-
 @mixin component {
     @include b(igx-banner-host) {
         @extend %igx-banner-host !optional;

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

@@ -18,14 +18,11 @@
 /// @param {Color} $banner-illustration-color [null] - The color used banner illustration.
 ///
 /// @requires $light-schema
-/// @requires digest-schema
-/// @requires text-contrast
-/// @requires extend
 ///
 /// @example scss Change the background in banner
 ///   $my-banner-theme: banner-theme($banner-background: #000);
-///   // Pass the theme to the banner component mixin
-///   @include banner($my-banner-theme);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-banner-theme);
 @function banner-theme(
     $schema: $light-schema,
     $banner-background: null,
@@ -60,9 +57,6 @@
 }
 
 /// @param {Map} $theme - The theme used to style the component.
-/// @requires {mixin} css-vars
-/// @requires rem
-/// @requires var-get
 @mixin banner($theme) {
     @include css-vars($theme);
     $variant: map.get($theme, 'variant');
@@ -165,7 +159,6 @@
 /// Uses the 'body-2' category from the typographic scale.
 /// @group typography
 /// @param {Map} $categories [(message: 'body-2')] - The categories from the typographic scale used for type styles.
-/// @requires {mixin} type-style
 @mixin banner-typography($categories: (
     message: 'body-2')
 ) {

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-component.scss

@@ -1,14 +1,8 @@
 @use '../../base' as *;
 @use 'sass:string';
 
-////
-/// @group components
+/// @access private
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @requires {mixin} bem-block
-/// @requires {mixin} bem-elem
-/// @requires {mixin} bem-mod
-////
-
 @mixin component {
     @include b(igx-bottom-nav) {
         $this: bem--selector-to-string(&);