feat(button-group): update button group schemas and add new properties (#564)

* feat(button-group): update button group schemas

* feat(button-group): add more necessary properties

* fix(button-group): fix focused-hover-text-color for material

* feat(button-group): fix schema values

* fix(button-group): add latest schema updates

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: didimmova

packages/theming/sass/themes/components/button-group/_button-group-theme.scss

@@ -36,7 +36,11 @@
 /// @param {Color} $item-focused-text-color [null] - The focused text color for button group items. Auto-derived from item-focused-background.
 /// @param {Color} $item-focused-background [null] - The focused background color for button group items. Auto-derived from item-hover-background.
 /// @param {Color} $item-focused-border-color [null] - The focused border color for an item from the button group. Auto-derived from item-border-color.
+/// @param {Color} $item-focused-hover-text-color [null] - The focused & hover text color for button group items. Auto-derived from item-focused-text-color.
+/// @param {Color} $item-focused-hover-border-color [null] - The focused & hover border color for an item from the button group. Auto-derived from item-focused-border-color.
 /// @param {Color} $item-focused-hover-background [null] - The focused & hover background color for button group items. Auto-derived from item-focused-background.
+/// @param {Color} $item-active-background [null] - The active background color for button group items. Auto-derived from item-hover-background.
+/// @param {Color} $item-active-border-color [null] - The active border color for button group items. Auto-derived from item-hover-border-color.
 /// @param {Color} $idle-shadow-color [null] - The outline color of focused button group items. Auto-derived from item-background or selected-shadow-color.
 /// @param {Color} $selected-shadow-color [null] - The outline color of focused/selected button group items. Auto-derived from idle-shadow-color.
 ///
@@ -55,6 +59,8 @@
 /// @param {Color} $item-selected-hover-border-color [null] - The border color for a selected item in hover state in the button group. Auto-derived from item-border-color.
 /// @param {Color} $item-selected-focus-background [null] - The background color for a selected item in focused state in the button group. Auto-derived from item-selected-background.
 /// @param {Color} $item-selected-focus-hover-background [null] - The background color for a selected item in focused & hover state in the button group. Auto-derived from item-selected-hover-background.
+/// @param {Color} $item-selected-active-background [null] - The active background color for a selected item in the button group. Auto-derived from item-selected-hover-background.
+/// @param {Color} $item-selected-active-border-color [null] - The active border color for a selected item in the button group. Auto-derived from item-selected-hover-border-color.
 ///
 /// @param {Color} $disabled-selected-text-color [null] - The disabled text color for a selected item in the button group. Auto-derived from disabled-text-color.
 /// @param {Color} $disabled-selected-icon-color [null] - The disabled icon color for a selected item in the button group. Auto-derived from disabled-selected-text-color.
@@ -89,8 +95,12 @@
 
     $item-focused-text-color: null,
     $item-focused-border-color: null,
+    $item-focused-hover-text-color: null,
+    $item-focused-hover-border-color: null,
     $item-focused-background: null,
     $item-focused-hover-background: null,
+    $item-active-background: null,
+    $item-active-border-color: null,
     $idle-shadow-color: null,
     $selected-shadow-color: null,
     $border-radius: null,
@@ -110,6 +120,8 @@
     $item-selected-hover-border-color: null,
     $item-selected-focus-background: null,
     $item-selected-focus-hover-background: null,
+    $item-selected-active-background: null,
+    $item-selected-active-border-color: null,
 
     $disabled-selected-text-color: null,
     $disabled-selected-icon-color: $disabled-selected-text-color,
@@ -161,6 +173,10 @@
         $item-selected-focus-hover-background: var(--item-selected-hover-background);
     }
 
+    @if not($item-selected-active-background) and $item-selected-hover-background {
+        $item-selected-active-background: dynamic-shade(var(--item-selected-hover-background));
+    }
+
     @if not($item-focused-background) and $item-background {
         $item-focused-background: var(--item-hover-background);
     }
@@ -169,6 +185,18 @@
         $item-focused-hover-background: dynamic-shade(var(--item-focused-background));
     }
 
+    @if not($item-active-background) and $item-hover-background {
+        $item-active-background: dynamic-shade(var(--item-hover-background));
+    }
+
+    @if not($item-active-border-color) and $item-hover-border-color {
+        $item-active-border-color: var(--item-hover-border-color);
+    }
+
+    @if not($item-selected-active-border-color) and $item-selected-hover-border-color {
+        $item-selected-active-border-color: var(--item-selected-hover-border-color);
+    }
+
     @if not($disabled-background-color) and $item-background {
         $disabled-background-color: var(--item-background);
     }
@@ -190,6 +218,10 @@
         $item-focused-border-color: var(--item-border-color);
     }
 
+    @if not($item-focused-hover-border-color) and $item-focused-border-color {
+        $item-focused-hover-border-color: var(--item-focused-border-color);
+    }
+
     @if not($item-selected-border-color) and $item-border-color {
         $item-selected-border-color: var(--item-border-color);
     }
@@ -227,6 +259,10 @@
         $item-focused-text-color: adaptive-contrast(var(--item-focused-background));
     }
 
+    @if not($item-focused-hover-text-color) and $item-focused-text-color {
+        $item-focused-hover-text-color: var(--item-focused-text-color);
+    }
+
     @if not($item-selected-text-color) and $item-selected-background {
         $item-selected-text-color: adaptive-contrast(var(--item-selected-background));
     }
@@ -285,9 +321,13 @@
             item-background: $item-background,
             item-border-color: $item-border-color,
             item-focused-text-color: $item-focused-text-color,
+            item-focused-hover-text-color: $item-focused-hover-text-color,
             item-focused-background: $item-focused-background,
             item-focused-border-color: $item-focused-border-color,
+            item-focused-hover-border-color: $item-focused-hover-border-color,
             item-focused-hover-background: $item-focused-hover-background,
+            item-active-background: $item-active-background,
+            item-active-border-color: $item-active-border-color,
             border-radius: $border-radius,
             item-hover-text-color: $item-hover-text-color,
             item-hover-icon-color: $item-hover-icon-color,
@@ -306,6 +346,8 @@
             item-selected-hover-border-color: $item-selected-hover-border-color,
             item-selected-focus-background: $item-selected-focus-background,
             item-selected-focus-hover-background: $item-selected-focus-hover-background,
+            item-selected-active-background: $item-selected-active-background,
+            item-selected-active-border-color: $item-selected-active-border-color,
             disabled-selected-text-color: $disabled-selected-text-color,
             disabled-selected-icon-color: $disabled-selected-icon-color,
             disabled-selected-background: $disabled-selected-background,

packages/theming/sass/themes/components/grid/_grid-theme.scss

@@ -445,7 +445,7 @@
     }
 
     @if not($drop-area-background) and $grouparea-background {
-        $drop-area-background: adaptive-contrast(var(--grouparea-background));
+        $drop-area-background: dynamic-shade(var(--grouparea-background));
     }
 
     @if not($drop-area-on-drop-background) and $drop-area-background {