igniteui-theming 1.4.3-beta.5 → 1.4.3-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.4.3-beta.5",
+  "version": "1.4.3-beta.6",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {
@@ -26,7 +26,7 @@
     "testEnvironment": "jest-environment-node-single-context"
   },
   "lint-staged": {
-    "**/*.{scss,css}": [
+    "sass/**/*.{scss,css}": [
       "npm run format"
     ]
   },

package/sass/color/_functions.scss

@@ -296,7 +296,7 @@ $_enhanced-accessibility: false;
 ///   $hsl-list: to-hsl(#000); // (0deg, 0%, 0%);
 /// @return {List} - This list of HSL values.
 @function to-hsl($color) {
-    @return (color.hue($color), color.saturation($color), color.lightness($color));
+    @return (math.round(color.hue($color)), math.round(color.saturation($color)), math.round(color.lightness($color)));
 }
 
 /// Calculates the contrast ratio between two colors.

package/sass/color/_mixins.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 @use 'sass:meta';
 @use 'sass:math';
 @use 'sass:color';
@@ -12,14 +13,23 @@
 // Generates CSS variables for a base color
 // @access private
 @mixin _base($color, $shade, $value) {
-    $_shade: $shade == 500;
-    $_valid: meta.type-of($value == 'color');
+    @if $shade == 500 {
+        $_type: meta.type-of($value);
 
-    @if $_shade and $_valid {
-        --ig-#{$color}-h: #{math.round(color.hue($value))};
-        --ig-#{$color}-s: #{math.round(color.saturation($value))};
-        --ig-#{$color}-l: #{math.round(color.lightness($value))};
-        --ig-#{$color}-a: #{color.alpha($value)};
+        @if $_type == 'color' {
+            --ig-#{$color}-h: #{math.round(color.hue($value))};
+            --ig-#{$color}-s: #{math.round(color.saturation($value))};
+            --ig-#{$color}-l: #{math.round(color.lightness($value))};
+            --ig-#{$color}-a: #{color.alpha($value)};
+        }
+
+        // Cover handmade palettes with hsl values for base color
+        @if $_type == 'list' and list.length($value) == 3 {
+            --ig-#{$color}-h: #{list.nth($value, 1)};
+            --ig-#{$color}-s: #{list.nth($value, 2)};
+            --ig-#{$color}-l: #{list.nth($value, 3)};
+            --ig-#{$color}-a: 1;
+        }
     }
 }
 
@@ -36,6 +46,10 @@
         --ig-#{$color}-#{$variant}: #{$value};
     }
 
+    @if not($_hsl) and not($_contrast) {
+        --ig-#{$color}-#{$shade}: #{$value};
+    }
+
     @if $_contrast and $contrast {
         --ig-#{$color}-#{$shade}: #{$value};
     }

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

@@ -55,6 +55,7 @@ $dark-fluent-schema: (
     navbar: $dark-fluent-navbar,
     input-group: $dark-fluent-input-group,
     checkbox: $dark-fluent-checkbox,
+    switch: $dark-fluent-switch,
     radio: $dark-fluent-radio,
     tabs: $dark-fluent-tabs,
     rating: $dark-fluent-rating,

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

@@ -113,8 +113,9 @@ $dark-fluent-switch: extend(
 
 /// Generates a dark bootstrap switch schema based on a mix of $bootstrap-switch and $base-dark-switch.
 /// @type {Map}
-/// @prop {Color} thumb-on-color [color: ('gray', 900)] - The color of the thumb when the switch is on.
-/// @prop {Color} thumb-on-disabled-color [color: ('gray', 900)] - The color of the thumb when the switch is on and disabled.
+/// @prop {Map} thumb-on-color [color: ('gray', 900)] - The color of the thumb when the switch is on.
+/// @prop {Map} thumb-on-disabled-color [color: ('gray', 900)] - The color of the thumb when the switch is on and disabled.
+/// @prop {Map} thumb-on-error-color [color: ('gray', 900)] - The color of the thumb when the switch is on and invalid.
 /// @requires $bootstrap-switch
 /// @requires $base-dark-switch
 $dark-bootstrap-switch: extend(
@@ -133,6 +134,12 @@ $dark-bootstrap-switch: extend(
                 900,
             ),
         ),
+        thumb-on-error-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
     )
 );
 

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

@@ -35,12 +35,15 @@
 /// @prop {Color} border-on-hover-color [transparent] - The border color of the  on-switch.
 /// @prop {Map} label-invalid-color [color: ('gray', 900)] - The color of the switch label in invalid state.
 /// @prop {Map} track-error-color [color: ('gray', 500)] - The color of the track in invalid state when the switch is off.
+/// @prop {Map} thumb-on-error-color [color: ('secondary', 500)] - The color of the thumb when the switch is on and invalid.
 /// @prop {Map} error-color [color: ('gray', 50)] - The color of the thumb in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 500)] - The border color in invalid state on hover.
 /// @requires {Map} $default-elevation-switch
 $light-switch: extend(
     $default-elevation-switch,
     (
+        variant: 'material',
+        type: 'light',
         border-color: transparent,
         border-hover-color: transparent,
         border-disabled-color: transparent,
@@ -118,6 +121,12 @@ $light-switch: extend(
                 500,
             ),
         ),
+        thumb-on-error-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
         error-color: (
             color: (
                 'gray',
@@ -157,6 +166,7 @@ $light-switch: extend(
 /// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
 /// @prop {Map} error-color [color: ('gray', 700)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 800)] - The border and thumb color in invalid state on hover.
+/// @prop {Map} thumb-on-error-color [color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
 ///
 /// @prop {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
 ///
@@ -165,6 +175,7 @@ $light-switch: extend(
 $fluent-switch: extend(
     $light-switch,
     (
+        variant: 'fluent',
         focus-outline-color: (
             color: (
                 'gray',
@@ -244,6 +255,12 @@ $fluent-switch: extend(
                 400,
             ),
         ),
+        thumb-on-error-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
         error-color: (
             color: (
                 'gray',
@@ -283,6 +300,7 @@ $fluent-switch: extend(
 $bootstrap-switch: extend(
     $fluent-switch,
     (
+        variant: 'bootstrap',
         focus-outline-color: (
             color: (
                 'primary',
@@ -370,6 +388,7 @@ $bootstrap-switch: extend(
 /// @prop {Map} border-on-color [color: ('primary', 500)] - The border color of the on-switch.
 /// @prop {Map} border-on-hover-color [color: ('primary', 500)] - The border color of the  on-switch.
 /// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
+/// @prop {Map} thumb-on-error-color [color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
 /// @prop {Number} border-radius-track [8px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
@@ -382,6 +401,7 @@ $bootstrap-switch: extend(
 $indigo-switch: extend(
     $light-switch,
     (
+        variant: 'indigo-design',
         focus-outline-color: (
             color: (
                 'gray',
@@ -442,6 +462,12 @@ $indigo-switch: extend(
                 500,
             ),
         ),
+        thumb-on-error-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
         error-color: (
             color: (
                 'gray',