igniteui-theming 10.0.0-beta.3 → 10.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "10.0.0-beta.3",
+  "version": "10.0.0-beta.4",
   "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/_stepper.scss

@@ -151,8 +151,8 @@ $dark-bootstrap-stepper: extend(
 /// Generates a dark indigo stepper schema.
 /// @type {Map}
 /// @prop {Map} content-foreground [contrast-color: ('gray', 50, .8)] - The foreground of the step content.
-/// @prop {Map} indicator-color [color: ('gray', 50)] - The text color of the incomplete step indicator.
-/// @prop {Map} indicator-background [contrast-color: ('gray', 50, .8)] - The background color of the incomplete step indicator.
+/// @prop {Map} indicator-color [contrast-color: ('gray', 50, .8)] - The text color of the incomplete step indicator.
+/// @prop {Map} indicator-background [contrast-color: ('gray', 50, .15)] - The background color of the incomplete step indicator.
 /// @prop {Map} title-color [contrast-color: ('gray', 50)] - The text color of the step title.
 /// @prop {Map} title-hover-color [contrast-color: ('gray', 50)] - The text color of the step title on hover.
 /// @prop {Map} title-focus-color [contrast-color: ('gray', 50)] - The text color of the step title on focus.
@@ -167,14 +167,34 @@ $dark-bootstrap-stepper: extend(
 /// @prop {Map} complete-step-focus-background [contrast-color: ('gray', 50, .1)] - The background of the complete step header on focus.
 /// @prop {Map} invalid-step-hover-background [contrast-color: ('gray', 50, .1)] - The background of the invalid step header on hover.
 /// @prop {Map} invalid-step-focus-background [contrast-color: ('gray', 50, .1)] - The background of the invalid step header on focus.
-/// @prop {Map} complete-indicator-background [contrast-color: ('gray', 50, .15)] - The background color of the completed step indicator.
-/// @prop {Map} complete-indicator-color [contrast-color: ('gray', 50, .8)] - The color of the completed step indicator.
+/// @prop {Map} complete-indicator-background [contrast-color: ('gray', 50, .8)] - The background color of the completed step indicator.
+/// @prop {Map} complete-indicator-color [contrast: ('gray', 50)] - The color of the completed step indicator.
 /// @prop {Map} disabled-indicator-color [contrast-color: ('gray', 50, .2)] - The color of the disabled step indicator, title, and subtitle.
 /// @prop {Map} disabled-indicator-background [contrast-color: ('gray', 50, .1)] - The background color of the disabled step indicator.
 /// @prop {Map} disabled-title-color [contrast-color: ('gray', 50, .2)] - The title color of the disabled step.
 /// @prop {Map} disabled-subtitle-color [contrast-color: ('gray', 50, .2)] - The subtitle color of the disabled step.
 /// @prop {Map} step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color of between the steps.
 /// @prop {Map} complete-step-separator-color [contrast-color: ('gray', 50, .3)] - The separator border-color between the completed steps.
+/// @prop {Map} invalid-title-color [contrast-color: ('gray', 50)] - The color of the invalid step title.
+/// @prop {Map} invalid-title-hover-color [contrast-color: ('gray', 50)] - The color of the invalid step title on hover.
+/// @prop {Map} invalid-title-focus-color [contrast-color: ('gray', 50)] - The color of the invalid step title on focus.
+/// @prop {Map} invalid-subtitle-color [contrast-color: ('gray', 50, .8)] - The text of the invalid step subtitle.
+/// @prop {Map} invalid-subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The color of the invalid step subtitle on hover.
+/// @prop {Map} invalid-subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The color of the invalid step subtitle on focus.
+/// @prop {Map} current-indicator-color [contrast-color: ('gray', 50)] - The color of the current step indicator.
+/// @prop {Map} complete-title-color [contrast-color: ('gray', 50)] - The color of the complete step title.
+/// @prop {Map} complete-title-hover-color [contrast-color: ('gray', 50)] - The color of the complete step title on hover.
+/// @prop {Map} complete-title-focus-color [contrast-color: ('gray', 50)] - The color of the complete step title on focus.
+/// @prop {Map} complete-subtitle-color [contrast-color: ('gray', 50, .8)] - The color of the complete step subtitle.
+/// @prop {Map} complete-subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The color of the complete step subtitle on hover.
+/// @prop {Map} complete-subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The color of the complete step subtitle on focus.
+/// @prop {Map} current-title-color [contrast-color: ('gray', 50)] - The color of the current step title.
+/// @prop {Map} current-title-hover-color [contrast-color: ('gray', 50)] - The color of the current step title on hover.
+/// @prop {Map} current-title-focus-color [contrast-color: ('gray', 50)] - The color of the current step title on focus.
+/// @prop {Map} current-subtitle-color [contrast-color: ('gray', 50, .8)] - The color of the current step subtitle.
+/// @prop {Map} current-subtitle-hover-color [contrast-color: ('gray', 50, .8)] - The color of the current step subtitle on hover.
+/// @prop {Map} current-subtitle-focus-color [contrast-color: ('gray', 50, .8)] - The color of the current step subtitle on focus.
+/// @prop {Map} invalid-indicator-color [contrast-color: ('gray', 50)] - The color of the invalid step indicator.
 /// @requires $indigo-stepper
 /// @requires $base-stepper
 $dark-indigo-stepper: extend(
@@ -189,16 +209,17 @@ $dark-indigo-stepper: extend(
             ),
         ),
         indicator-color: (
-            color: (
+            contrast-color: (
                 'gray',
                 50,
+                0.8,
             ),
         ),
         indicator-background: (
             contrast-color: (
                 'gray',
                 50,
-                0.8,
+                0.15,
             ),
         ),
         title-color: (
@@ -300,14 +321,13 @@ $dark-indigo-stepper: extend(
             contrast-color: (
                 'gray',
                 50,
-                0.15,
+                0.8,
             ),
         ),
         complete-indicator-color: (
-            contrast-color: (
+            color: (
                 'gray',
                 50,
-                0.8,
             ),
         ),
         disabled-indicator-color: (
@@ -352,5 +372,135 @@ $dark-indigo-stepper: extend(
                 0.3,
             ),
         ),
+        invalid-title-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        invalid-title-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        invalid-title-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        invalid-subtitle-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        invalid-subtitle-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        invalid-subtitle-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        current-indicator-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        complete-title-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        complete-title-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        complete-title-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        complete-subtitle-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        complete-subtitle-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        complete-subtitle-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+
+        current-title-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        current-title-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        current-title-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        current-subtitle-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        current-subtitle-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        current-subtitle-focus-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        invalid-indicator-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
     )
 );

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

@@ -662,6 +662,12 @@ $bootstrap-stepper: extend(
 /// @prop {Color} current-indicator-outline [transparent] - The outline color of the current step indicator.
 /// @prop {Map} content-foreground [color: ('gray', 700)] - The foreground of the step content.
 /// @prop {Color} invalid-indicator-outline [transparent] - The outline color of the invalid step indicator.
+/// @prop {Map} invalid-title-color [color: ('gray', 900)] - The color of the invalid step title.
+/// @prop {Map} invalid-title-hover-color [color: ('gray', 900)] - The color of the invalid step title on hover.
+/// @prop {Map} invalid-title-focus-color [color: ('gray', 900)] - The color of the invalid step title on focus.
+/// @prop {Map} invalid-subtitle-color [color: ('gray', 700)] - The text of the invalid step subtitle.
+/// @prop {Map} invalid-subtitle-hover-color [color: ('gray', 700)] - The color of the invalid step subtitle on hover.
+/// @prop {Map} invalid-subtitle-focus-color [color: ('gray', 700)] - The color of the invalid step subtitle on focus.
 /// @requires $light-stepper
 $indigo-stepper: extend(
     $light-stepper,
@@ -801,5 +807,41 @@ $indigo-stepper: extend(
         border-radius-step-header: rem(4px),
         current-indicator-outline: transparent,
         invalid-indicator-outline: transparent,
+        invalid-title-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        invalid-title-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        invalid-title-focus-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        invalid-subtitle-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        invalid-subtitle-hover-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        invalid-subtitle-focus-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
     )
 );