igniteui-theming 2.1.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/dark/_chip.scss

@@ -20,7 +20,6 @@ $dark-fluent-chip: $fluent-chip;
 /// Generates a dark bootstrap chip schema based on a mix of $bootstrap-chip and $ase-dark-chip.
 /// @type {Map}
 /// @requires $bootstrap-chip
-/// @requires $base-dark-chip
 $dark-bootstrap-chip: $bootstrap-chip;
 
 /// Generates a dark indigo chip schema based on a mix of $indigo-chip and $base-dark-chip.
@@ -36,7 +35,6 @@ $dark-bootstrap-chip: $bootstrap-chip;
 /// @prop {Map} hover-border-color [color: ('gray', 400)] - The chip hover border color.
 /// @prop {Color} focus-border-color [color: ('gray', 400)] - The chip focus border color.
 /// @requires $indigo-chip
-/// @requires $base-dark-chip
 $dark-indigo-chip: extend(
     $indigo-chip,
     (

package/sass/themes/schemas/components/dark/_pagination.scss

@@ -23,7 +23,6 @@ $base-dark-pagination: (
 /// @type {Map}
 /// @requires $light-pagination
 /// @requires $base-dark-pagination
-/// @see $default-palette
 $dark-pagination: extend($light-pagination, $base-dark-pagination);
 
 /// Generates a dark fluent pagination schema based on a mix of $fluent-pagination and $base-dark-pagination.
@@ -35,10 +34,9 @@ $dark-fluent-pagination: extend($fluent-pagination, $base-dark-pagination);
 /// Generates a dark bootstrap pagination schema based on a mix of $bootstrap-pagination and $base-dark-pagination.
 /// @type {Map}
 /// @requires $bootstrap-pagination
-/// @requires $base-dark-pagination
 $dark-bootstrap-pagination: $bootstrap-pagination;
 
 /// Generates a dark indigo pagination schema.
 /// @type {Map}
-/// @requires $dark-pagination
+/// @requires $indigo-pagination
 $dark-indigo-pagination: extend($indigo-pagination, $base-dark-pagination);

package/sass/themes/schemas/components/dark/_progress.scss

@@ -32,20 +32,17 @@ $dark-base-progress-linear: (
 /// @type {Map}
 /// @requires $light-progress-linear
 /// @requires $dark-base-progress-linear
-/// @see $default-palette
 $dark-progress-linear: extend($light-progress-linear, $dark-base-progress-linear);
 
 /// Generates a dark fluent progress-linear schema.
 /// @type {Map}
 /// @requires $fluent-progress-linear
 /// @requires $dark-base-progress-linear
-/// @see $default-palette
 $dark-fluent-progress-linear: extend($fluent-progress-linear, $dark-base-progress-linear);
 
 /// Generates a dark bootstrap progress-linear schema.
 /// @type {Map}
 /// @requires $bootstrap-progress-linear
-/// @see $default-palette
 $dark-bootstrap-progress-linear: $bootstrap-progress-linear;
 
 /// Generates a dark indigo progress-linear schema.
@@ -53,7 +50,6 @@ $dark-bootstrap-progress-linear: $bootstrap-progress-linear;
 /// @prop {Map} track-color [color: ('gray', 100)] - The main track color.
 /// @prop {Color} stripes-color [rgba(#222, .35)] - The track stripes color.
 /// @requires $indigo-progress-linear
-/// @see $default-palette
 $dark-indigo-progress-linear: extend(
     $indigo-progress-linear,
     (

package/sass/themes/schemas/components/dark/_stepper.scss

@@ -102,7 +102,6 @@ $dark-stepper: extend($light-stepper, $base-stepper);
 /// @prop {Map} complete-indicator-background [color: ('gray', 100)] - The background color of the completed step indicator.
 /// @requires $fluent-stepper
 /// @requires $base-stepper
-/// @see $default-palette
 $dark-fluent-stepper: extend(
     $fluent-stepper,
     $base-stepper,
@@ -157,7 +156,6 @@ $dark-bootstrap-stepper: extend(
 /// @prop {Map} disabled-indicator-outline [color: ('gray', 300)] - The outline color of the disabled step indicator.
 /// @requires $indigo-stepper
 /// @requires $base-stepper
-/// @see $default-palette
 $dark-indigo-stepper: extend(
     $indigo-stepper,
     $base-stepper,

package/sass/themes/schemas/components/light/_avatar.scss

@@ -11,7 +11,7 @@
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 400, .54)]- The background color of the avatar.
 /// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar.
-/// @prop {Number} border-radius [rem(0)] - The border radius.
+/// @prop {Number} border-radius [rem(8px)] - The border radius for rounded avatar.
 /// @prop {List} size [(rem(40px), rem(64px), rem(88px))] - The size used for the avatar width and height.
 $light-avatar: (
     background: (
@@ -28,7 +28,7 @@ $light-avatar: (
             0.96,
         ),
     ),
-    border-radius: rem(0),
+    border-radius: rem(8px),
     size: (
         sizable: (
             rem(40px),
@@ -47,7 +47,7 @@ $fluent-avatar: $light-avatar;
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 400)]- The background color of the avatar.
 /// @prop {Map} color [contrast-color: ('gray', 400)] - The text/icon color of the avatar.
-/// @prop {Number} border-radius [rem(4px)] - The border radius.
+/// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
 /// @requires {Map} $light-avatar
 $bootstrap-avatar: extend(
     $light-avatar,

package/sass/themes/schemas/components/light/_input-group.scss

@@ -498,9 +498,11 @@ $fluent-input-group: extend(
             rem(20px),
         ),
         size: (
-            rem(32px),
-            rem(40px),
-            rem(48px),
+            sizable: (
+                rem(32px),
+                rem(40px),
+                rem(48px),
+            ),
         ),
     )
 );
@@ -657,9 +659,11 @@ $bootstrap-input-group: extend(
             ),
         ),
         size: (
-            rem(31px),
-            rem(38px),
-            rem(48px),
+            sizable: (
+                rem(31px),
+                rem(38px),
+                rem(48px),
+            ),
         ),
     )
 );

package/sass/themes/schemas/components/light/_time-picker.scss

@@ -25,7 +25,6 @@
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
 /// @prop {List} active-item-border-radius [(rem(15px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
 /// @requires {Map} $default-elevation-time-picker
-/// @see $default-palette
 $light-time-picker: extend(
     $default-elevation-time-picker,
     (