From 7c2c5cb6b5cd1d23fd93d0d1f7c91a36eb9f2c94 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Wed, 18 Oct 2023 14:39:03 +0300
Subject: [PATCH] refactor(tree): mnake sure that only the disabled tree node
 looks disabled

---
 .../themes/light/tree-item.bootstrap.scss     | 21 +++++------
 .../tree/themes/light/tree-item.material.scss | 37 ++++++++-----------
 2 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/src/components/tree/themes/light/tree-item.bootstrap.scss b/src/components/tree/themes/light/tree-item.bootstrap.scss
index e68fd9b5e..4f190bcc8 100644
--- a/src/components/tree/themes/light/tree-item.bootstrap.scss
+++ b/src/components/tree/themes/light/tree-item.bootstrap.scss
@@ -31,20 +31,20 @@ $theme: $bootstrap;
 }
 
 :host(:not([disabled])[selected]) {
-    background: var(--node-disabled-background, var-get($theme, 'background-selected'));
-    color: var(--node-disabled-foreground, var-get($theme, 'foreground-selected'));
+    background:var-get($theme, 'background-selected');
+    color: var-get($theme, 'foreground-selected');
 }
 
 :host(:not([disabled])[selected][active]) {
-    background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
-    color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
+    background: var-get($theme, 'background-active-selected');
+    color: var-get($theme, 'foreground-active-selected');
 }
 
 :host(:not([disabled])[selected]),
 :host(:not([disabled])[selected][active]) {
     [part~='focused'] {
-        background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
-        color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
+        background:  var-get($theme, 'background-active-selected');
+        color: var-get($theme, 'foreground-active-selected');
     }
 }
 
@@ -57,9 +57,8 @@ $theme: $bootstrap;
 }
 
 :host([disabled]) {
-    --node-disabled-foreground: #{var-get($theme, 'foreground-disabled')};
-    --node-disabled-background: #{var-get($theme, 'background-disabled')};
-
-    color: var(--node-disabled-foreground);
-    background: var(--node-disabled-background);
+    [part~='wrapper'] {
+        color: var-get($theme, 'foreground-disabled');
+        background: var-get($theme, 'background-disabled');
+    }
 }
diff --git a/src/components/tree/themes/light/tree-item.material.scss b/src/components/tree/themes/light/tree-item.material.scss
index 649f2d741..c21a7a4ea 100644
--- a/src/components/tree/themes/light/tree-item.material.scss
+++ b/src/components/tree/themes/light/tree-item.material.scss
@@ -6,10 +6,6 @@ $theme: $material;
 
 :host {
     @include css-vars-from-theme($theme, 'ig-tree');
-
-    background: var(--node-disabled-background, var-get($theme, 'background'));
-    color: var(--node-disabled-foreground, var-get($theme, 'foreground'));
-
 }
 
 [part~='wrapper'] {
@@ -22,27 +18,25 @@ $theme: $material;
     }
 }
 
-:host(:not([disabled])[active]) {
+[part~='label'] {
+    max-height: var-get($theme, 'size');
+}
+
+[part~='active'] {
     background: var-get($theme, 'background-active');
     color: var-get($theme, 'foreground-active');
 }
 
-:host(:not([disabled])[selected]) {
+[part~='selected'] {
     background: var-get($theme, 'background-selected');
     color: var-get($theme, 'foreground-selected');
 }
 
-:host(:not([disabled])[selected][active]) {
-    background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
-    color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
-}
-
-:host(:not([disabled])[selected]),
-:host(:not([disabled])[selected][active]) {
-    [part~='focused'] {
-        background: var(--node-disabled-background, var-get($theme, 'background-active-selected'));
-        color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected'));
-    }
+[part~='selected'][part~='focused'][part~='active'],
+[part~='selected'][part~='focused'],
+[part~='selected'][part~='active'] {
+    background: var-get($theme, 'background-active-selected');
+    color: var-get($theme, 'foreground-active-selected');
 }
 
 [part~='focused'] {
@@ -50,10 +44,9 @@ $theme: $material;
 }
 
 :host([disabled]) {
-    --node-disabled-foreground: #{var-get($theme, 'foreground-disabled')};
-    --node-disabled-background: #{var-get($theme, 'background-disabled')};
-
-    color: var(--node-disabled-foreground);
-    background: var(--node-disabled-background);
+    [part~='wrapper'] {
+        color: var-get($theme, 'foreground-disabled');
+        background: var-get($theme, 'background-disabled');
+    }
 }