feat(grid): add initial logic for grid theme builder (#548)

* feat(grid): add initial logic for grid theme builder

* feat(grid): fix text properties of row

* feat(grid/chip): fix grid header text-color and use provided text-color for chip in all states

* feat(themes): add latest property conditions

* feat(themes): add new grid properties and new conditions to input/scrollabr/select

* feat(themes): add additional conditions for dropdown/input/grid themes

* feat(checkbox): create new filled-disabled property and new conditions for themes

* feat(input): set condition for disabled bottom line color

* feat(grid): add filtering-dialog-background property

* chore(checkbox): revert changing checkbox schema in this PR

* chore(checkbox): revert checkbox updates (moved to another PR)

* chore(grid): delete old conditional logic for grid theme

* chore(grid): revert removing old conditions

* fix(button-group): add condition for disabled-selected-icon-color

* fix(grid): rows using the same color

---------

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

Author: didimmova

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

@@ -128,6 +128,18 @@
     $theme: digest-schema($button-group-schema);
     $border: rem(1px, 16px) solid map.get($theme, 'item-selected-border-color');
 
+    @if not($item-hover-text-color) and $item-text-color {
+        $item-hover-text-color: dynamic-shade(var(--item-text-color));
+    }
+
+    @if not($item-selected-hover-text-color) and $item-selected-text-color {
+        $item-selected-hover-text-color: dynamic-shade(var(--item-selected-text-color));
+    }
+
+    @if not($disabled-text-color) and $item-text-color {
+        $disabled-text-color: hsl(from var(--item-text-color) h s l / 0.6);
+    }
+
     // background colors
     @if not($item-hover-background) and $item-background {
         $item-hover-background: dynamic-shade(var(--item-background));
@@ -239,6 +251,10 @@
         $disabled-selected-text-color: var(--disabled-text-color);
     }
 
+    @if not($disabled-selected-icon-color) and $disabled-selected-text-color {
+        $disabled-selected-icon-color: var(--disabled-selected-text-color);
+    }
+
     @if not($idle-shadow-color) and $item-background {
         $idle-shadow-color: hsl(from var(--item-background) h s l / 0.5);
     }

sass/themes/components/chip/_chip-theme.scss

@@ -118,6 +118,30 @@
     $theme: digest-schema($chip-schema);
     $variant: map.get($theme, '_meta', 'theme');
 
+    // have unified text-color for all states if text-color is provided
+
+    @if not($hover-text-color) and $text-color {
+        $hover-text-color: var(--text-color);
+    }
+
+    @if not($focus-text-color) and $text-color {
+        $focus-text-color: var(--text-color);
+    }
+
+    @if not($selected-text-color) and $text-color {
+        $selected-text-color: var(--text-color);
+    }
+
+    @if not($hover-selected-text-color) and $selected-text-color {
+        $hover-selected-text-color: var(--selected-text-color);
+    }
+
+    @if not($focus-selected-text-color) and $selected-text-color {
+        $focus-selected-text-color: var(--selected-text-color);
+    }
+
+    // rest of the styles are derived from background
+
     @if not($text-color) and $background {
         $text-color: adaptive-contrast(var(--background));
     }

sass/themes/components/drop-down/_drop-down-theme.scss

@@ -103,6 +103,28 @@
     $theme: digest-schema($drop-down-schema);
     $variant: map.get($theme, '_meta', 'theme');
 
+    @if $item-text-color {
+        @if not($focused-item-text-color) {
+            $focused-item-text-color: var(--item-text-color);
+        }
+
+        @if not($selected-item-text-color) {
+            $selected-item-text-color: var(--item-text-color);
+        }
+
+        @if not($selected-hover-item-text-color) {
+            $selected-hover-item-text-color: var(--item-text-color);
+        }
+
+        @if not($selected-focus-item-text-color) {
+            $selected-focus-item-text-color: var(--item-text-color);
+        }
+
+        @if not($disabled-item-text-color) {
+            $disabled-item-text-color: hsl(from var(--item-text-color) h s l / 0.4);
+        }
+    }
+
     @if not($item-text-color) and $background-color {
         $item-text-color: adaptive-contrast(var(--background-color));
     }
@@ -163,10 +185,6 @@
         $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background));
     }
 
-    @if not($selected-focus-item-text-color) and $selected-focus-item-background {
-        $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background));
-    }
-
     @if $variant == 'indigo' {
         @if not($focused-item-border-color) and $selected-item-background {
             $focused-item-border-color: var(--selected-item-background);