igniteui-theming 5.0.0-beta.7 → 5.0.0-beta.9

package/json/elevations/elevations.json

@@ -1 +1 @@
-{"material":{"elevations":{"0":"none","1":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08)","2":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08)","3":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08)","4":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 10px) 0 rgba(0, 0, 0, 0.08)","5":"0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 rgba(0, 0, 0, 0.08)","6":"0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 10px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 18px) 0 rgba(0, 0, 0, 0.08)","7":"0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.08)","8":"0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08)","9":"0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08)","10":"0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08)","11":"0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08)","12":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","13":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","14":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","15":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","16":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","17":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","18":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","19":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","20":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","21":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","22":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","23":"0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 23px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 44px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08)","24":"0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * -7px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 46px) calc(var(--ig-elevation-factor, 1) * 8px) rgba(0, 0, 0, 0.08)"}}}
+{"indigo":{"elevations":{"0":"","1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":"","10":"","11":"","12":"","13":"","14":"","15":"","16":"","17":"","18":"","19":"","20":"","21":"","22":"","23":"","24":""}},"material":{"elevations":{"0":"","1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":"","10":"","11":"","12":"","13":"","14":"","15":"","16":"","17":"","18":"","19":"","20":"","21":"","22":"","23":"","24":""}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "5.0.0-beta.7",
+  "version": "5.0.0-beta.9",
   "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/elevations/presets/_index.scss

@@ -14,3 +14,23 @@ $color-2: rgba(0 0 0 / 12%) !default;
 $color-3: rgba(0 0 0 / 8%) !default;
 
 @forward './material' as material-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);
+@forward './indigo' as indigo-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);
+
+/// Configures shadow colors for the elevations.
+/// @access public
+/// @param {Color} $color-1 - The umbra shadow color.
+/// @param {Color} $color-2 - The penumbra shadow color.
+/// @param {Color} $color-3 - The ambiant shadow color.
+@mixin configure($color-1, $color-2, $color-3) {
+    @if $color-1 {
+        $color-1: $color-1 !global;
+    }
+
+    @if $color-2 {
+        $color-2: $color-2 !global;
+    }
+
+    @if $color-3 {
+        $color-3: $color-3 !global;
+    }
+}

package/sass/elevations/presets/_indigo.scss

@@ -0,0 +1,85 @@
+@use '../functions' as *;
+
+////
+/// @package theming
+/// @group elevations
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Level 1 - The color used to generate umbra shadows.
+/// @type Color
+/// @access private
+$color-1: rgba(0 0 0 / 26%) !default;
+
+/// Level 2 - The color used to generate penumbra shadows.
+/// @type Color
+/// @access private
+$color-2: rgba(0 0 0 / 12%) !default;
+
+/// Level 3 - The color used to generate ambient shadows.
+/// @type Color
+/// @access private
+$color-3: rgba(0 0 0 / 8%) !default;
+
+/// All elevation levels
+/// @access private
+$_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));
+$_2: box-shadow((0 1px 5px 0 $color-1, 0 2px 2px 0 $color-2, 0 3px 1px -2px $color-3));
+$_3: box-shadow((0 1px 8px 0 $color-1, 0 3px 4px 0 $color-2, 0 3px 3px -2px $color-3));
+$_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 10%)));
+$_5: box-shadow((0 3px 5px -1px $color-1, 0 5px 8px 0 $color-2, 0 1px 14px 0 $color-3));
+$_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 20%)));
+$_7: box-shadow((0 4px 5px -2px $color-1, 0 7px 10px 1px $color-2, 0 2px 16px 1px $color-3));
+$_8: box-shadow((0 5px 5px -3px $color-1, 0 8px 10px 1px $color-2, 0 3px 14px 2px $color-3));
+$_9: box-shadow((0 5px 6px -3px $color-1, 0 9px 12px 1px $color-2, 0 3px 16px 2px $color-3));
+$_10: box-shadow((0 6px 6px -3px $color-1, 0 10px 14px 1px $color-2, 0 4px 18px 3px $color-3));
+$_11: box-shadow((0 6px 7px -4px $color-1, 0 11px 15px 1px $color-2, 0 4px 20px 3px $color-3));
+$_12: box-shadow((0 7px 8px -4px $color-1, 0 12px 17px 2px $color-2, 0 5px 22px 4px $color-3));
+$_13: box-shadow((0 7px 8px -4px $color-1, 0 13px 19px 2px $color-2, 0 5px 24px 4px $color-3));
+$_14: box-shadow((0 7px 9px -4px $color-1, 0 14px 21px 2px $color-2, 0 5px 26px 4px $color-3));
+$_15: box-shadow((0 8px 9px -5px $color-1, 0 15px 22px 2px $color-2, 0 6px 28px 5px $color-3));
+$_16: box-shadow((0 8px 10px -5px $color-1, 0 16px 24px 2px $color-2, 0 6px 30px 5px $color-3));
+$_17: box-shadow((0 8px 11px -5px $color-1, 0 17px 26px 2px $color-2, 0 6px 32px 5px $color-3));
+$_18: box-shadow((0 9px 11px -5px $color-1, 0 18px 28px 2px $color-2, 0 7px 34px 6px $color-3));
+$_19: box-shadow((0 9px 12px -6px $color-1, 0 19px 29px 2px $color-2, 0 7px 36px 6px $color-3));
+$_20: box-shadow((0 10px 13px -6px $color-1, 0 20px 31px 3px $color-2, 0 8px 38px 7px $color-3));
+$_21: box-shadow((0 10px 13px -6px $color-1, 0 21px 33px 3px $color-2, 0 8px 40px 7px $color-3));
+$_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42px 7px $color-3));
+$_23: box-shadow((0 0 16px 0 rgba(0 0 0 / 30%)));
+$_24: box-shadow((0 0 16px 0 rgba(36 37 44 / 40%)));
+
+/**
+ * @sass-export-section="indigo"
+ */
+/// А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
+/// @type Map
+/// @access private
+$elevations: (
+    0: none,
+    1: $_1,
+    2: $_2,
+    3: $_3,
+    4: $_4,
+    5: $_5,
+    6: $_6,
+    7: $_7,
+    8: $_8,
+    9: $_9,
+    10: $_10,
+    11: $_11,
+    12: $_12,
+    13: $_13,
+    14: $_14,
+    15: $_15,
+    16: $_16,
+    17: $_17,
+    18: $_18,
+    19: $_19,
+    20: $_20,
+    21: $_21,
+    22: $_22,
+    23: $_23,
+    24: $_24,
+);
+
+// @end-sass-export-section

package/sass/elevations/presets/_material.scss

@@ -48,25 +48,6 @@ $_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42p
 $_23: box-shadow((0 11px 14px -7px $color-1, 0 23px 36px 3px $color-2, 0 9px 44px 8px $color-3));
 $_24: box-shadow((0 11px 15px -7px $color-1, 0 24px 38px 3px $color-2, 0 9px 46px 8px $color-3));
 
-/// Configures shadow colors for the material elevations.
-/// @access public
-/// @param {Color} $color-1 - The umbra shadow color.
-/// @param {Color} $color-2 - The penumbra shadow color.
-/// @param {Color} $color-3 - The ambiant shadow color.
-@mixin configure($color-1, $color-2, $color-3) {
-    @if $color-1 {
-        $color-1: $color-1 !global;
-    }
-
-    @if $color-2 {
-        $color-2: $color-2 !global;
-    }
-
-    @if $color-3 {
-        $color-3: $color-3 !global;
-    }
-}
-
 /**
  * @sass-export-section="material"
  */

package/sass/themes/schemas/components/dark/_button-group.scss

@@ -240,17 +240,17 @@ $dark-bootstrap-button-group: $bootstrap-button-group;
 /// @prop {Map} item-background [contrast-color: ('gray', 50, .05)] - The background color for button group items.
 /// @prop {Map} item-text-color [contrast-color: ('gray', 50, .8)] - The text color for button group items.
 /// @prop {Map} item-icon-color [contrast-color: ('gray', 50, .8)] - The icon color for button group items.
-/// @prop {Map} item-border-color [contrast-color: ('gray', 50, .2)] - The border color between button group items.
+/// @prop {Map} item-border-color [color: ('gray', 100)] - The border color between button group items.
 /// @prop {Map} idle-shadow-color [contrast-color: ('gray', 50, .2)] - The outline color of button group items.
 /// @prop {Map} item-hover-background [contrast-color: ('gray', 50, .1)] - The hover background color for button group items.
 /// @prop {Map} item-hover-text-color [contrast-color: ('gray', 50)] - The hover text color for button group items.
 /// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50)] - The hover icon color for button group items.
-/// @prop {Map} item-hover-border-color [contrast-color: ('gray', 50, .3)] - The hover border color between button group items.
+/// @prop {Map} item-hover-border-color [color: ('gray', 200)] - The hover border color between button group items.
 /// @prop {Map} item-focused-text-color [contrast-color: ('gray', 50, .8)] - The focused text color for button group items.
 /// @prop {Map} item-focused-background [contrast-color: ('gray', 50, .05)] - The focused background color for button group items.
 /// @prop {Color} disabled-background-color [transparent] - The background color for a disabled item in the button group.
 /// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The text/icon color for a disabled item in the button group.
-/// @prop {Map} item-disabled-border [contrast-color: ('gray', 50, .15)] - The border color for a disabled item in the button group.
+/// @prop {Map} item-disabled-border [color: ('gray', 50)] - The border color for a disabled item in the button group.
 /// @prop {Map} disabled-selected-text-color [contrast-color: ('primary', 500, .2)] - The disabled text color for a selected item in the button group.
 /// @prop {Map} disabled-selected-icon-color [contrast-color: ('primary', 500, .2)] - The disabled icon color for a selected item in the button group.
 /// @requires $indigo-button-group
@@ -282,10 +282,9 @@ $dark-indigo-button-group: extend(
         ),
 
         item-border-color: (
-            contrast-color: (
+            color: (
                 'gray',
-                50,
-                0.2,
+                100,
             ),
         ),
 
@@ -320,10 +319,9 @@ $dark-indigo-button-group: extend(
         ),
 
         item-hover-border-color: (
-            contrast-color: (
+            color: (
                 'gray',
-                50,
-                0.3,
+                200,
             ),
         ),
 
@@ -354,10 +352,9 @@ $dark-indigo-button-group: extend(
         ),
 
         item-disabled-border: (
-            contrast-color: (
+            color: (
                 'gray',
                 50,
-                0.15,
             ),
         ),
 

package/sass/themes/schemas/components/dark/_expansion-panel.scss

@@ -61,26 +61,60 @@ $dark-bootstrap-expansion-panel: extend(
 /// Generates a dark indigo expansion panel schema.
 /// @type {Map}
 ///
-/// @prop {Map} header-focus-background [color: ('primary', 500, .5)] - The panel header focus background color.
-/// @prop {Map} header-title-color [color: ('gray', 800)] - The panel header title text color.
-/// @prop {Number} border-radius [3px] - The border radius used for expansion-panel.
-///
+/// @prop {Map} header-title-color [contrast-color: ('gray', 50, 0.9)] - The panel header title text color.
+/// @prop {Map} header-description-color [contrast-color: ('gray', 50, 0.7)] - The panel header description text color.
+/// @prop {Map} header-icon-color [contrast-color: ('gray', 50, 0.8)] - The panel header icon color.
+/// @prop {Map} body-color [contrast-color: ('gray', 50, 0.8)] - The panel body text color.
+/// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, 0.2)] - The panel disabled text color.
+/// @prop {Map} disabled-description-color [contrast-color: ('gray', 50, 0.2)] - The panel disabled header description text color.
 /// @requires $indigo-expansion-panel
 $dark-indigo-expansion-panel: extend(
     $indigo-expansion-panel,
     (
         header-title-color: (
-            color: (
+            contrast-color: (
                 'gray',
-                800,
+                50,
+                0.9,
+            ),
+        ),
+        header-description-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.7,
             ),
         ),
 
-        header-focus-background: (
-            color: (
-                'primary',
-                500,
-                0.5,
+        header-icon-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+
+        body-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+
+        disabled-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+
+        disabled-description-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
             ),
         ),
     )

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

@@ -687,7 +687,7 @@ $bootstrap-button-group: extend(
 /// @prop {Map} item-selected-hover-icon-color [contrast-color: ('primary', 500)] - The icon color for a selected item in hover state in the button group.
 /// @prop {Map} disabled-background-color [contrast-color: ('gray', 900)] - The background color for a disabled item in the button group.
 /// @prop {Map} disabled-text-color [color: ('gray', 900, .2)] - The text/icon color for a disabled item in the button group.
-/// @prop {Map} item-disabled-border [color: ('gray', 900, .15)] - The border color for a disabled item in the button group.
+/// @prop {Map} item-disabled-border [color: ('gray', 300)] - The border color for a disabled item in the button group.
 /// @prop {Map} disabled-selected-background [color: ('primary', 400, .5)] - The disabled background color for a selected item in the button group.
 /// @prop {Map} disabled-selected-text-color [contrast-color: ('primary', 500, .4)] - The disabled text color for a selected item in the button group.
 /// @prop {Map} disabled-selected-icon-color [contrast-color: ('primary', 500, .3)] - The disabled icon color for a selected item in the button group.
@@ -818,8 +818,7 @@ $indigo-button-group: extend(
         item-disabled-border: (
             color: (
                 'gray',
-                900,
-                0.15,
+                300,
             ),
         ),
 

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

@@ -1266,6 +1266,7 @@ $bootstrap-button: (
 /// @prop {Map} disabled-icon-color [color: ('gray', 900, .20)] - The disabled icon color of the button.
 /// @prop {List} border-radius [(rem(40px), rem(0), rem(40px))] - The border radius used for the button.
 /// @prop {List} size [(rem(24px), rem(28px), rem(32px))] - The size used for the button.
+/// @prop {Number} default-size [2] - The default size used for the button component.
 /// @requires {Map} $light-base-button
 /// @requires {Map} $flat-elevation-button
 $indigo-base-button: extend(
@@ -1373,6 +1374,7 @@ $indigo-base-button: extend(
                 rem(32px),
             ),
         ),
+        default-size: 2,
     )
 );
 

package/sass/themes/schemas/components/light/_expansion-panel.scss

@@ -16,7 +16,8 @@
 /// @prop {Map} header-description-color [color: ('gray', 700)] - The panel header description text color.
 /// @prop {Map} header-icon-color [color: ('gray', 800)] - The panel header icon color.
 /// @prop {Map} body-color [color: ('gray', 900)] - The panel body text color.
-/// @prop {Map} disabled-color [color: ('gray', 500)] - The panel disabled text color.
+/// @prop {Map} disabled-text-color [color: ('gray', 500)] - The panel disabled text color.
+/// @prop {Map} disabled-description-color [color: ('gray', 500)] - The panel disabled header description text color.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(16px))] - The border radius used for expansion-panel.
 /// @prop {Number} expanded-margin [8px] - The expansion panel margin in expanded state when positioned inside accordion.
 $light-expansion-panel: (
@@ -67,7 +68,14 @@ $light-expansion-panel: (
         ),
     ),
 
-    disabled-color: (
+    disabled-text-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+
+    disabled-description-color: (
         color: (
             'gray',
             500,
@@ -90,7 +98,8 @@ $material-expansion-panel: $light-expansion-panel;
 /// Generates a fluent expansion panel schema.
 /// @type {Map}
 /// @prop {Map} body-color [color: ('gray', 700)] - The panel body text color.
-/// @prop {Map} disabled-color [color: ('gray', 400)] - The panel disabled text color.
+/// @prop {Map} disabled-text-color [color: ('gray', 400)] - The panel disabled text color.
+/// @prop {Map} disabled-description-color [color: ('gray', 400)] - The panel disabled header description text color.
 /// @requires {Map} $light-expansion-panel
 $fluent-expansion-panel: extend(
     $light-expansion-panel,
@@ -102,7 +111,14 @@ $fluent-expansion-panel: extend(
             ),
         ),
 
-        disabled-color: (
+        disabled-text-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        disabled-description-color: (
             color: (
                 'gray',
                 400,
@@ -137,19 +153,32 @@ $bootstrap-expansion-panel: extend(
 
 // Generates an indigo expansion panel schema.
 /// @type {Map}
-/// @prop {Map} header-focus-background [color: ('primary', 500, .15)] - The panel header focus background color.
-/// @prop {Map} header-description-color [color: ('gray', 500)] - The panel header description text color.
+/// @prop {Color} header-background [transparent] - The panel header background color.
+/// @prop {Color} body-background [transparent] - The panel body background color.
+/// @prop {Color} header-focus-background [transparent] - The panel header focus background color.
+/// @prop {Map} header-title-color [color: ('gray', 800)] - The panel header title text color.
+/// @prop {Map} header-description-color [color: ('gray', 600)] - The panel header description text color.
 /// @prop {Map} header-icon-color [color: ('gray', 600)] - The panel header icon color.
-/// @prop {Map} disabled-color [color: ('gray', 400)] - The panel disabled text color.
-/// @prop {List} border-radius [(rem(3px), rem(0), rem(16px))] - The border radius used for expansion-panel.
+/// @prop {Map} body-color [color: ('gray', 700)] - The panel body text color.
+/// @prop {Map} disabled-text-color [color: ('gray', 900, 0.2)] - The panel disabled text color.
+/// @prop {Map} disabled-description-color [color: ('gray', 900, 0.15)] - The panel disabled header description text color.
 /// @requires {Map} $light-expansion-panel
 $indigo-expansion-panel: extend(
     $light-expansion-panel,
     (
+        header-background: transparent,
+        body-background: transparent,
+        header-focus-background: transparent,
+        header-title-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
         header-description-color: (
             color: (
                 'gray',
-                500,
+                600,
             ),
         ),
 
@@ -160,26 +189,26 @@ $indigo-expansion-panel: extend(
             ),
         ),
 
-        header-focus-background: (
+        body-color: (
             color: (
-                'primary',
-                500,
-                0.15,
+                'gray',
+                700,
             ),
         ),
 
-        disabled-color: (
+        disabled-text-color: (
             color: (
                 'gray',
-                400,
+                900,
+                0.2,
             ),
         ),
 
-        border-radius: (
-            border-radius: (
-                rem(3px),
-                rem(0),
-                rem(16px),
+        disabled-description-color: (
+            color: (
+                'gray',
+                900,
+                0.15,
             ),
         ),
     )