docs(sassdoc): fix dark component schemas docs

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_action-strip.scss

@@ -9,6 +9,8 @@
 /// Generates a dark action-strip schema.
 /// @type {Map}
 /// @property {Map} actions-background [igx-color: ('grays', 200), hexrgba: #000, rgba: .8]- actions container background.
+/// @requires {function} extend
+/// @requires $_light-action-strip
 /// @see $default-palette
 $_dark-action-strip: extend(
     $_light-action-strip,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss

@@ -8,25 +8,25 @@
 
 /// Generates a dark badge schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_light-badge
 /// @see $default-palette
 $_dark-badge: extend($_light-badge);
 
 /// Generates a dark fluent badge schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_fluent-badge
 $_dark-fluent-badge: extend($_fluent-badge);
 
 /// Generates a dark bootstrap badge schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_bootstrap-badge
 $_dark-bootstrap-badge: extend($_bootstrap-badge);
 
 /// Generates a dark indigo badge schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_indigo-badge
 $_dark-indigo-badge: extend($_indigo-badge);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss

@@ -7,20 +7,21 @@
 
 /// Generates a dark banner schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_light-banner
 /// @see $default-palette
 $_dark-banner: extend($_light-banner);
 
 /// Generates a dark fluent banner schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_fluent-banner
 $_dark-fluent-banner: extend($_fluent-banner);
 
 /// Generates a dark bootstrap banner schema.
 /// @type {Map}
-/// @requires extend
+/// @property {Map} banner-background [#333]- The background color used banner background.
+/// @requires {function} extend
 /// @requires $_bootstrap-banner
 $_dark-bootstrap-banner: extend(
     $_bootstrap-banner,
@@ -31,6 +32,6 @@ $_dark-bootstrap-banner: extend(
 
 /// Generates a dark indigo banner schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_indigo-banner
 $_dark-indigo-banner: extend($_indigo-banner);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_bottom-nav.scss

@@ -37,8 +37,8 @@ $_dark-bootstrap-bottom-nav: extend($_bootstrap-bottom-nav, $_base-dark-bottom-n
 /// Generates a dark indigo bottom-nav schema based on a mix of $_indigo-bottom-nav and $_base-dark-bottom-nav
 /// @type {Map}
 /// @prop {Map} background [igx-color: 'surface'] - The background color used for the bottom-nav.
-/// @prop {Color} active-item-color [#fff] - The text-color used for the active color.
-/// @prop {Map} idle-item-color [igx-color: #fff, rgba: .6] - The text-color used for the idle color.
+/// @prop {Color} active-item-color [igx-contrast-color: 'surface'] - The text-color used for the active color.
+/// @prop {Map} idle-item-color [igx-contrast-color: 'surface', rgba: .6] - The text-color used for the idle color.
 /// @requires {function} extend
 /// @requires $_indigo-bottom-nav
 /// @requires $_base-dark-bottom-nav

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button-group.scss

@@ -9,9 +9,9 @@
 /// Generates the base dark button-group schema.
 /// @type {Map}
 /// @prop {Color} item-background [#222] - The background color for button group items.
-/// @prop {map} item-border-color [igx-color: ('grays', 400), hexrgba: #222] - The border color for button group items.
-/// @prop {map} item-selected-border-color [igx-color: ('grays', 500), hexrgba: #222] - The border color for button group selected items.
-/// @prop {map} item-disabled-border: [igx-color: ('grays', 400), hexrgba: #222] - The border color for button group disabled items.
+/// @prop {Map} item-border-color [igx-color: ('grays', 400), hexrgba: #222] - The border color for button group items.
+/// @prop {Map} item-selected-border-color [igx-color: ('grays', 500), hexrgba: #222] - The border color for button group selected items.
+/// @prop {Map} item-disabled-border: [igx-color: ('grays', 400), hexrgba: #222] - The border color for button group disabled items.
 $_base-dark-button-group: (
     item-background: #222,
 
@@ -42,15 +42,15 @@ $_dark-button-group: extend($_light-button-group, $_base-dark-button-group);
 /// Generates a dark fluent button-group schema based on a mix of $_fluent-button-group and $_base-dark-button-group
 /// @type {Map}
 ///
-/// @prop {map} item-border-color [igx-color: ('grays', 100), hexrgba: #000] - The border color for button group items.
-/// @prop {map} item-selected-border-color [igx-color: ('grays', 100), hexrgba: #000] - The border color for button group selected items.
-/// @prop {map} item-disabled-border: [igx-color: ('grays', 100), hexrgba: #000] - The border color for button group disabled items.
-/// @prop {map} item-text-color [igx-color: ('grays', 900)] - The text color for button group items.
-/// @prop {map} item-hover-text-color [igx-color: ('primary', 200)] - The text color for button group items on hover.
+/// @prop {Map} item-border-color [igx-color: ('grays', 100), hexrgba: #000] - The border color for button group items.
+/// @prop {Map} item-selected-border-color [igx-color: ('grays', 100), hexrgba: #000] - The border color for button group selected items.
+/// @prop {Map} item-disabled-border: [igx-color: ('grays', 100), hexrgba: #000] - The border color for button group disabled items.
+/// @prop {Map} item-text-color [igx-color: ('grays', 900)] - The text color for button group items.
+/// @prop {Map} item-hover-text-color [igx-color: ('primary', 200)] - The text color for button group items on hover.
 /// @prop {Color} item-hover-background [#222] - The background color for button group items on hover.
-/// @prop {map} item-selected-background [igx-color: ('grays', 100)] - The background color for button group selected items.
-/// @prop {map} item-selected-hover-background [igx-color: ('grays', 100)] - The background color for button group selected items on hover.
-/// @prop {map} item-selected-text-color [igx-color: ('primary', 200)] - The text color for button group selected items.
+/// @prop {Map} item-selected-background [igx-color: ('grays', 100)] - The background color for button group selected items.
+/// @prop {Map} item-selected-hover-background [igx-color: ('grays', 100)] - The background color for button group selected items on hover.
+/// @prop {Map} item-selected-text-color [igx-color: ('primary', 200)] - The text color for button group selected items.
 /// @prop {Color} disabled-background-color [#222] - The background color for button group disabled items.
 ///
 /// @requires {function} extend

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_button.scss

@@ -12,7 +12,7 @@
 /// @prop {Map} flat-focus-background [igx-color: ('secondary', 400), rgba: .24] - The focus background color of a flat button.
 /// @prop {Map} icon-hover-background [igx-color: ('grays', 300)] - The hover background color of an icon button.
 /// @prop {Map} disabled-background [igx-color: ('grays', 200)] - The disabled background color of raised, fab, or icon buttons.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_light-button
 /// @see $default-palette
 $_dark-button: extend(
@@ -44,7 +44,7 @@ $_dark-button: extend(
 /// @prop {Map} flat-hover-icon-color [igx-color: ('primary', 200)] - The icon color of a flat button on hover.
 /// @prop {Map} flat-focus-icon-color [igx-color: ('primary', 200)] - The icon color of a flat button on focus.
 /// @prop {Map} flat-hover-text-color [igx-color: ('primary', 200)] - The text color of a flat button on hover.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_fluent-button
 $_dark-fluent-button: extend(
     $_fluent-button,
@@ -69,7 +69,10 @@ $_dark-fluent-button: extend(
 
 /// Generates a dark bootstrap button schema.
 /// @type {Map}
-/// @requires extend
+/// @prop {Map} disabled-color [igx-color: ('primary', 900)] - The disabled text/icon color of a button.
+/// @prop {Map} disabled-background [igx-color: ('primary', 900), darken: 5%] - The disabled background color of raised, fab, or icon buttons.
+/// @prop {Map} outlined-disabled-outline-color [igx-color: ('primary', 900), darken: 5%] - The border color of an outlined button.
+/// @requires {function} extend
 /// @requires $_bootstrap-button
 $_dark-bootstrap-button: extend(
     $_bootstrap-button,
@@ -93,12 +96,12 @@ $_dark-bootstrap-button: extend(
 /// Generates a dark indigo button schema.
 /// @type {Map}
 ///
-/// @prop {map} outlined-hover-background [#fff] - The hover background color of an outlined button.
+/// @prop {Map} outlined-hover-background [#fff] - The hover background color of an outlined button.
 /// @prop {Color} outlined-hover-text-color [(igx-color: 'surface')] - The hover text color of an outlined button.
-/// @prop {map} outlined-focus-background [#fff] - The focus background color of an outlined button.
+/// @prop {Map} outlined-focus-background [#fff] - The focus background color of an outlined button.
 /// @prop {Color} outlined-focus-text-color [(igx-color: 'surface')] - The focus text color of an outlined button.
 ///
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_indigo-button
 $_dark-indigo-button: extend(
     $_indigo-button,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss

@@ -8,7 +8,7 @@
 /// Generates a dark calendar schema.
 /// @type {Map}
 /// @prop {Map} date-disabled-text-color [igx-color: ('grays', 500), hexrgba: (), rgba: .38] - The text color for disabled dates.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_light-calendar
 /// @see $default-palette
 $_dark-calendar: extend($_light-calendar, (
@@ -21,13 +21,15 @@ $_dark-calendar: extend($_light-calendar, (
 
 /// Generates a dark fluent calendar schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_fluent-calendar
 $_dark-fluent-calendar: extend($_fluent-calendar);
 
 /// Generates a dark bootstrap calendar schema.
 /// @type {Map}
-/// @requires extend
+/// @prop {Map} content-background [#222] - The main content background color.
+/// @prop {Map} picker-text-color [#fff]- The idle picker month/year color.
+/// @requires {function} extend
 /// @requires $_bootstrap-calendar
 $_dark-bootstrap-calendar: extend(
     $_bootstrap-calendar,
@@ -54,7 +56,7 @@ $_dark-bootstrap-calendar: extend(
 /// @prop {Map} year-current-text-color [igx-contrast-color: ('surface')] - The text color for the current/selected year.
 /// @prop {Map} month-current-text-color [igx-contrast-color: ('surface')]- The text color for the current/selected month.
 /// @prop {Map} month-hover-current-text-color [igx-contrast-color: ('surface')]- The text color for the current/selected month on hover.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_indigo-calendar
 $_dark-indigo-calendar: extend(
     $_indigo-calendar,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss

@@ -7,21 +7,21 @@
 
 /// Generates a dark card schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_light-card
 /// @see $default-palette
 $_dark-card: extend($_light-card);
 
 /// Generates a dark fluent card schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_fluent-card
 $_dark-fluent-card: extend($_fluent-card);
 
 /// Generates a dark bootstrap card schema.
 /// @type {Map}
 /// @prop {Map} background [#222]- The card background color.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_bootstrap-card
 $_dark-bootstrap-card: extend(
     $_bootstrap-card,
@@ -33,7 +33,7 @@ $_dark-bootstrap-card: extend(
 /// Generates a dark indigo card schema.
 /// @type {Map}
 /// @prop {Map} outline-color [igx-color: ('grays', 200)] - The outline color of an outlined type card.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_indigo-card
 $_dark-indigo-card: extend(
     $_indigo-card,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_carousel.scss

@@ -28,22 +28,22 @@ $_base-dark-carousel: (
 
 /// Generates a dark carousel schema based on a mix of $_light-carousel and $_base-dark-carousel
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_light-carousel
 /// @requires $_base-dark-carousel
 /// @see $default-palette
 $_dark-carousel: extend($_light-carousel, $_base-dark-carousel);
 
 /// Generates a dark fluent carousel schema based on a mix of $_fluent-carousel and $_base-dark-carousel
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_fluent-carousel
 /// @requires $_base-dark-carousel
 $_dark-fluent-carousel: extend($_fluent-carousel, $_base-dark-carousel);
 
 /// Generates a dark bootstrap carousel schema based on a mix of $_bootstrap-carousel and $_base-dark-carousel
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_bootstrap-carousel
 /// @requires $_base-dark-carousel
 $_dark-bootstrap-carousel: extend($_bootstrap-carousel, $_base-dark-carousel);
@@ -55,7 +55,7 @@ $_dark-bootstrap-carousel: extend($_bootstrap-carousel, $_base-dark-carousel);
 /// @prop {Color} button-hover-background [igx-color: ('grays', 300)] - The previous/next buttons hover background color.
 /// @prop {Color} indicator-dot-color [igx-color: ('grays', 600)] - The idle indicator dot color.
 /// @prop {Color} indicator-active-dot-color [igx-color: ('grays', 900)] - The active indicator dot color.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_indigo-carousel
 /// @requires $_base-dark-carousel
 $_dark-indigo-carousel: extend($_indigo-carousel, (

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_checkbox.scss

@@ -8,7 +8,7 @@
 /// Generates a dark checkbox schema.
 /// @type {Map}
 /// @prop {Color} tick-color [#222] - The checked mark color.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_light-checkbox
 /// @see $default-palette
 $_dark-checkbox: extend($_light-checkbox, (
@@ -18,7 +18,7 @@ $_dark-checkbox: extend($_light-checkbox, (
 /// Generates a dark fluent checkbox schema.
 /// @type {Map}
 /// @prop {Color} tick-color [#fff] - The checked mark color.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_fluent-checkbox
 $_dark-fluent-checkbox: extend($_fluent-checkbox, (
     tick-color: #fff
@@ -27,7 +27,7 @@ $_dark-fluent-checkbox: extend($_fluent-checkbox, (
 /// Generates a dark bootstrap checkbox schema.
 /// @type {Map}
 /// @prop {Color} tick-color [#fff] - The checked mark color.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_bootstrap-checkbox
 $_dark-bootstrap-checkbox: extend($_bootstrap-checkbox);
 
@@ -37,7 +37,7 @@ $_dark-bootstrap-checkbox: extend($_bootstrap-checkbox);
 /// @prop {Color} empty-color [igx-color: ('grays', 700)] - The unchecked border color.
 /// @prop {Color} disabled-color [igx-color: ('grays', 400)] - The disabled border and fill colors.
 /// @prop {Color} disabled-color-label [igx-color: ('grays', 400)] - The disabled label color.
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_indigo-checkbox
 $_dark-indigo-checkbox: extend($_indigo-checkbox, (
     fill-color: #fff,