docs(themes): update global schema docs

.sassdocrc

@@ -9,6 +9,8 @@
     "theme": "./node_modules/igniteui-sassdoc-theme/sassdoc/",
     "autofill": ["throws", "content"],
     "groups": {
+        "global-themes": "Global Themes",
+        "component-themes": "Component Themes",
         "undefined": "general"
     },
     "no-update-notifier": false,

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -590,7 +590,7 @@
         box-shadow: inset 0 0 0 1px --var($theme, 'disabled-border-color');
     }
 
-    /// FLUENT ///
+    // FLUENT START
     %igx-input-group-fluent {
         display: flex;
         flex-direction: column;
@@ -1265,7 +1265,7 @@
     %form-group-suffix-fluent--compact {
         padding: rem(8px, map-get($base-scale-size, 'compact'));
     }
-    /// FLUENT END ///
+    // FLUENT END
 
     %form-group-prefix--box {
         @include if-ltr() {

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -65,7 +65,7 @@
 @import '../components/watermark/watermark-component';
 @import '../print/index';
 
-/// Includes the base for each theme.
+// Includes the base for each theme.
 [class^='igx-'] {
     &,
     *,

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -71,40 +71,9 @@
 /// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
 /// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme.
 /// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.
-/// @requires {variable} $components
-/// @requires {variable} $default-palette
+/// @requires $components
+/// @requires $default-palette
 /// @requires {function} is-component
-/// @requires {mixin} igx-avatar
-/// @requires {mixin} igx-badge
-/// @requires {mixin} igx-button
-/// @requires {mixin} igx-button-group
-/// @requires {mixin} igx-calendar
-/// @requires {mixin} igx-card
-/// @requires {mixin} igx-carousel
-/// @requires {mixin} igx-checkbox
-/// @requires {mixin} igx-date-picker
-/// @requires {mixin} igx-date-range-picker
-/// @requires {mixin} igx-dialog
-/// @requires {mixin} igx-drop-down
-/// @requires {mixin} igx-expansion-panel
-/// @requires {mixin} igx-grid
-/// @requires {mixin} igx-grid-summary
-/// @requires {mixin} igx-paginator
-/// @requires {mixin} igx-icon
-/// @requires {mixin} igx-input-group
-/// @requires {mixin} igx-list
-/// @requires {mixin} igx-navbar
-/// @requires {mixin} igx-navdrawer
-/// @requires {mixin} igx-progress-linear
-/// @requires {mixin} igx-progress-circular
-/// @requires {mixin} igx-radio
-/// @requires {mixin} igx-ripple
-/// @requires {mixin} igx-slider
-/// @requires {mixin} igx-snackbar
-/// @requires {mixin} igx-switch
-/// @requires {mixin} igx-tabs
-/// @requires {mixin} igx-bottom-nav
-/// @requires {mixin} igx-toast
 @mixin igx-theme(
     $palette,
     $schema: $light-schema,
@@ -543,7 +512,7 @@
     }
 }
 
-/// Creates a global theme that can be used with light backgrounds.
+/// Creates a global material theme that can be used with light backgrounds.
 /// @param {Map} $palette - An igx-palette to be used by the global theme.
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
 /// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
@@ -578,7 +547,7 @@
     );
 }
 
-/// Creates a global theme that can be used with dark backgrounds.
+/// Creates a global material theme that can be used with dark backgrounds.
 /// @param {Map} $palette - An igx-palette to be used by the global theme.
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
 /// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
@@ -879,3 +848,4 @@
         $elevation: $elevation,
     );
 }
+

projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss

@@ -1,6 +1,9 @@
-/// Default theme palette.
+////
 /// @group palettes
-/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Default theme palette.
 /// @type Map
 /// @prop {Map} primary - The primary sub-palette created from the primary color.
 /// @prop {Map} secondary - The secondary sub-palette created from the secondary color.
@@ -48,7 +51,7 @@
 /// @requires igx-palette
 $default-palette: igx-palette($primary: #09f, $secondary: #e41c77) !default;
 
-/// @ignore
+/// @access private
 $default-dark-palette: igx-palette(
     $primary: igx-color($default-palette, 'primary'),
     $secondary: igx-color($default-palette, 'secondary'),
@@ -85,19 +88,25 @@ $light-palette: $default-palette;
 /// @group palettes
 $dark-palette: $default-dark-palette;
 
+/// An alias of $light-palette
+/// @group palettes
 /// @alias light-palette
-$light-material-palette: $default-palette;
+/// @see $light-palette
+$light-material-palette: $light-palette;
 
+/// An alias of $dark-palette
+/// @group palettes
 /// @alias dark-palette
+/// @see $dark-palette
 $dark-material-palette: $default-dark-palette;
 
-/// @ignore
+/// @access private
 $green-palette: igx-palette(
     $primary: #09f,
     $secondary: #72da67
 ) !default;
 
-/// @ignore
+/// @access private
 $green-dark-palette: igx-palette(
     $primary: igx-color($green-palette, 'primary'),
     $secondary: igx-color($green-palette, 'secondary'),
@@ -133,13 +142,13 @@ $light-green-palette: $green-palette;
 /// @group palettes
 $dark-green-palette: $green-dark-palette;
 
-/// @ignore
+/// @access private
 $purple-palette: igx-palette(
     $primary: #00b4d6,
     $secondary: #514590
 ) !default;
 
-/// @ignore
+/// @access private
 $purple-dark-palette: igx-palette(
     $primary: igx-color($purple-palette, 'primary'),
     $secondary: igx-color($purple-palette, 'secondary'),
@@ -175,7 +184,7 @@ $light-purple-palette: $purple-palette;
 /// @group palettes
 $dark-purple-palette: $purple-dark-palette;
 
-/// @ignore
+/// @access private
 $fluent-excel-palette: igx-palette(
     $primary: #217346,
     $secondary: #217346,
@@ -185,7 +194,7 @@ $fluent-excel-palette: igx-palette(
     $variant: 'fluent'
 ) !default;
 
-/// @ignore
+/// @access private
 $fluent-excel-dark-palette: igx-palette(
     $primary: igx-color($fluent-excel-palette, 'primary'),
     $secondary: igx-color($fluent-excel-palette, 'secondary'),
@@ -225,7 +234,7 @@ $light-fluent-excel-palette: $fluent-excel-palette;
 /// @group palettes
 $dark-fluent-excel-palette: $fluent-excel-dark-palette;
 
-/// @ignore
+/// @access private
 $fluent-word-palette: igx-palette(
     $primary: #2b579a,
     $secondary: #2b579a,
@@ -235,7 +244,7 @@ $fluent-word-palette: igx-palette(
     $variant: 'fluent'
 ) !default;
 
-/// @ignore
+/// @access private
 $fluent-word-dark-palette: igx-palette(
     $primary: igx-color($fluent-word-palette, 'primary'),
     $secondary: igx-color($fluent-word-palette, 'secondary'),
@@ -275,7 +284,7 @@ $light-fluent-word-palette: $fluent-word-palette;
 /// @group palettes
 $dark-fluent-word-palette: $fluent-word-dark-palette;
 
-// @ignore
+/// @access private
 $bootstrap-palette: igx-palette(
     $primary: #007bff,
     $secondary: #6c757d,
@@ -287,7 +296,7 @@ $bootstrap-palette: igx-palette(
     $variant: 'bootstrap'
 ) !default;
 
-/// @ignore
+/// @access private
 $bootstrap-dark-palette: igx-palette(
     $primary: igx-color($bootstrap-palette, 'primary'),
     $secondary: igx-color($bootstrap-palette, 'secondary'),
@@ -376,11 +385,10 @@ $dark-indigo-palette: igx-palette(
     $variant: 'indigo-design'
 ) !default;
 
-/// Global Overlay Color
+/// Global Overlay Color.
+/// Assigned to the 500 variant of the grays color form the current $default-palette.
 /// @group palettes
 /// @type Color
-/// @prop {Map} $palette [$default-palette] - The palette used to extract the color from.
-/// @prop {String} $color [grays] - The name of the sub-palette to take the color from.
 /// @requires igx-color
 $overlay-color: igx-color($default-palette, 'grays') !default;
 

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

@@ -61,8 +61,9 @@
 @import './tooltip';
 @import './watermark';
 
-/// The default dark schema for all components.
-/// @type {Map}
+/// Used to create Material Design themes.
+/// Use with dark palettes.
+/// @type Map
 /// @property {Map} igx-avatar [$_dark-avatar]
 /// @property {Map} igx-action-strip [$_dark-action-strip]
 /// @property {Map} igx-badge [$_dark-badge]
@@ -181,8 +182,14 @@ $dark-schema: (
     igx-watermark: $_dark-watermark,
 );
 
-/// The default dark fluent schema for all components.
-/// @type {Map}
+/// An alias of $dark-schema.
+/// @alias dark-schema
+/// @see $dark-schema
+$dark-material-schema: $dark-schema;
+
+/// Used to create fluent component themes.
+/// Use in combination with dark palettes.
+/// @type Map
 /// @property {map} igx-avatar [$_dark-fluent-avatar],
 /// @property {Map} igx-action-strip [$_dark-fluent-action-strip]
 /// @property {map} igx-badge [$_dark-fluent-badge],
@@ -298,11 +305,12 @@ $dark-fluent-schema: (
     igx-time-picker: $_dark-fluent-time-picker,
     igx-toast: $_dark-fluent-toast,
     igx-tooltip: $_dark-fluent-tooltip,
-    igx-watermark: $_dark-fluent-watermark
+    igx-watermark: $_dark-fluent-watermark,
 );
 
-/// The default dark bootstrap schema for all components.
-/// @type {Map}
+/// Used to create bootstrap component themes.
+/// Use in combination with dark palettes.
+/// @type Map
 /// @property {map} igx-avatar [$_dark-bootstrap-avatar]
 /// @property {Map} igx-action-strip [$_dark-bootstrap-action-strip]
 /// @property {map} igx-badge [$_dark-bootstrap-badge]
@@ -418,11 +426,12 @@ $dark-bootstrap-schema: (
     igx-time-picker: $_dark-bootstrap-time-picker,
     igx-toast: $_dark-bootstrap-toast,
     igx-tooltip: $_dark-bootstrap-tooltip,
-    igx-watermark: $_dark-bootstrap-watermark
+    igx-watermark: $_dark-bootstrap-watermark,
 );
 
-/// The default dark indigo schema for all components.
-/// @type {Map}
+/// Used to create indigo component themes.
+/// Use in combination with dark palettes.
+/// @type Map
 /// @property {map} igx-avatar [$_dark-indigo-avatar],
 /// @property {Map} igx-action-strip [$_dark-indigo-action-strip]
 /// @property {map} igx-badge [$_dark-indigo-badge],
@@ -536,5 +545,6 @@ $dark-indigo-schema: (
     igx-time-picker: $_dark-indigo-time-picker,
     igx-toast: $_dark-indigo-toast,
     igx-tooltip: $_dark-indigo-tooltip,
-    igx-watermark: $_dark-indigo-watermark
+    igx-watermark: $_dark-indigo-watermark,
 );
+

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss

@@ -61,8 +61,9 @@
 @import './tooltip';
 @import './watermark';
 
-/// The default light schema for all components.
-/// @type {Map}
+/// The default schema. Used to create Material Design themes.
+/// Use with light palettes.
+/// @type Map
 /// @property {Map} igx-avatar [$_light-avatar]
 /// @property {Map} igx-action-strip [$_light-action-strip]
 /// @property {Map} igx-badge [$_light-badge]
@@ -181,9 +182,14 @@ $light-schema: (
     igx-watermark: $_light-watermark
 );
 
-// @alias $light-schema;
+/// An alias of $light-schema.
+/// @alias light-schema
+/// @see $light-schema
 $light-material-schema: $light-schema;
 
+/// Used to create fluent component themes.
+/// Use in combination with light palettes.
+/// @type Map
 $light-fluent-schema: (
     igx-avatar: $_fluent-avatar,
     igx-action-strip: $_fluent-action-strip,
@@ -245,6 +251,9 @@ $light-fluent-schema: (
     igx-watermark: $_fluent-watermark
 );
 
+/// Used to create bootstrap component themes.
+/// Use in combination with light palettes.
+/// @type Map
 $light-bootstrap-schema: (
     igx-avatar: $_bootstrap-avatar,
     igx-action-strip: $_bootstrap-action-strip,
@@ -306,6 +315,9 @@ $light-bootstrap-schema: (
     igx-watermark: $_bootstrap-watermark
 );
 
+/// Used to create indigo component themes.
+/// Use in combination with light palettes.
+/// @type Map
 $light-indigo-schema: (
     igx-avatar: $_indigo-avatar,
     igx-action-strip: $_indigo-action-strip,
@@ -365,3 +377,4 @@ $light-indigo-schema: (
     igx-tooltip: $_indigo-tooltip,
     igx-watermark: $_indigo-watermark
 );
+

projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss

@@ -1,6 +1,6 @@
 ////
 /// @group schemas
-/// @access public
+/// @access private
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
@@ -45,7 +45,8 @@
 @import '../light/toast';
 @import '../light/tooltip';
 
-/// The default light schema for all components.
+/// Used to create round Material Design themes.
+/// Use with light palettes.
 /// @type {Map}
 /// @property {Map} igx-action-strip [$_light-action-strip]
 /// @property {Map} igx-avatar [$_light-avatar]
@@ -88,7 +89,6 @@
 /// @property {Map} igx-time-picker [$_light-time-picker]
 /// @property {Map} igx-toast [$_light-toast]
 /// @property {Map} igx-tooltip [$_light-tooltip]
-
 $light-round-schema: (
     igx-action-strip: extend($_light-action-strip, $_round-shape-avatar),
     igx-avatar: extend($_light-avatar, $_round-shape-avatar),
@@ -132,3 +132,4 @@ $light-round-schema: (
     igx-toast: extend($_light-toast, $_round-shape-toast),
     igx-tooltip: extend($_light-tooltip, $_round-shape-tooltip)
 );
+