Themes: Add updated Indigo themes for Slider, Text Area, and Tree

src/components/slider/themes/shared/slider.common.scss

@@ -26,6 +26,7 @@ $theme: $material;
 [part='thumb-label-inner'] {
     color: var-get($theme, 'label-text-color');
     background: var-get($theme, 'label-background-color');
+    padding: 0 rem(8px);
 
     &::after {
         border-top: rem(10px) solid var-get($theme, 'label-background-color');

src/components/slider/themes/shared/slider.indigo.scss

@@ -3,8 +3,23 @@
 @use '../light/themes' as *;
 
 $theme: $indigo;
-$thumb-size: rem(14px);
+$thumb-size: rem(12px);
 $thumb-radius: math.div($thumb-size, 2);
+$thumb-scale-hover: calc(16 / 12);
+$thumb-label-width: rem(36px);
+$thumb-label-height: rem(22px);
+
+[part='thumb-label-inner'] {
+    @include type-style('subtitle-2');
+    @include border-radius(rem(3px));
+
+    min-width: $thumb-label-width;
+}
+
+[part='thumb-label'] {
+    top: calc((#{$thumb-label-height} + rem(16px)) * -1);
+    height: $thumb-label-height;
+}
 
 [part='base']:hover {
     [part='inactive'] {
@@ -29,21 +44,31 @@ $thumb-radius: math.div($thumb-size, 2);
 
     line {
         transform: none;
+        stroke-width: var-get($theme, 'track-step-size');
     }
 }
 
 [part='tick-label'] {
+    @include type-style('body-2');
+
     color: var-get($theme, 'tick-label-color');
+
 }
 
 [part~='thumb'] {
+    border: rem(2px) solid var-get($theme, 'thumb-border-color');
     width: $thumb-size;
     height: $thumb-size;
     top: calc((#{$thumb-size} - #{$thumb-radius}) * -1);
     margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1);
 
+    &:hover, &:active {
+        transform: scale($thumb-scale-hover);
+        border-color: var-get($theme, 'thumb-border-hover-color');
+    }
+
     &:focus {
-        box-shadow: 0 0 0 rem(3px) var-get($theme, 'thumb-focus-color');
+        box-shadow: 0 0 0 rem(2px) var-get($theme, 'thumb-focus-color');
     }
 
     &::after {
@@ -53,12 +78,23 @@ $thumb-radius: math.div($thumb-size, 2);
 
 :host([disabled]),
 :host(:disabled) {
-    [part='fill'],
-    [part='tick'] {
+    [part='fill'] {
         background: var-get($theme, 'disabled-fill-track-color');
     }
 
+    [part='steps'] {
+        color: transparent;
+    }
+
+    [part='thumb'] {
+        border-color: var-get($theme, 'thumb-disabled-border-color');
+    }
+
+    [part='tick'] {
+        background: var-get($theme, 'disabled-base-track-color');
+    }
+
     [part='tick-label'] {
-        color: var-get($theme, 'disabled-fill-track-color');
+        color: var-get($theme, 'disabled-base-track-color');
     }
 }

src/components/textarea/themes/shared/textarea.indigo.scss

@@ -86,6 +86,10 @@ textarea {
     padding-block: rem(6px);
     padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
     margin-block-end: rem(1px);
+
+    &::placeholder {
+        font-style: italic;
+    }
 }
 
 [part~='filled'] {

src/components/tree/themes/shared/item.common.scss

@@ -30,17 +30,17 @@ $theme: $material;
     max-height: var-get($theme, 'size');
 }
 
-:host(:not([disabled])[active]) {
+:host(:not([disabled])[active]) [part~='wrapper'] {
     background: var-get($theme, 'background-active');
     color: var-get($theme, 'foreground-active');
 }
 
-:host(:not([disabled])[selected]) {
+:host(:not([disabled])[selected]) [part~='wrapper']{
     background: var-get($theme, 'background-selected');
     color: var-get($theme, 'foreground-selected');
 }
 
-:host(:not([disabled])[selected][active]) {
+:host(:not([disabled])[selected][active]) [part~='wrapper']{
     background: var-get($theme, 'background-active-selected');
     color: var-get($theme, 'foreground-active-selected');
 }

src/components/tree/themes/shared/item.indigo.scss

@@ -3,30 +3,66 @@
 
 $theme: $indigo;
 
+:host {
+    --igc-tree-indentation-size: #{sizable(rem(8px), rem(12px), rem(16px))};
+}
+
+[part~='indicator'] {
+    min-width: rem(14px);
+    color: var-get($theme, 'icon-color');
+
+    igc-icon {
+        --ig-size: 1;
+    }
+}
+
 [part~='wrapper'] {
+    border-radius: rem(4px);
+    margin-block-end: rem(4px);
+
+    &::after {
+        border-radius: rem(4px);
+    }
+
     &:hover {
-        &::after {
-            opacity: .3;
+        color: var-get($theme, 'foreground-active');
+    }
+}
+
+:host(:not([disabled])[selected]) {
+    [part~='wrapper'] {
+        background: var-get($theme, 'background');
+        color: var-get($theme, 'foreground');
+
+        &:hover {
+            &::after {
+                background: var-get($theme, 'hover-color');
+            }
         }
     }
 }
 
-[part~='wrapper'][part~='selected'] {
-    &:hover {
-        &::after {
+:host(:not([disabled])[active]),
+:host(:not([disabled])[active][selected]) {
+    [part~='wrapper'] {
+        &:hover {
             background: var-get($theme, 'hover-selected-color');
+
+            &::after {
+                background: transparent;
+            }
         }
     }
 }
 
-:host(:not([disabled])[active]) {
-    &:hover {
-        color: var-get($theme, 'foreground-active');
-    }
+[part~='focused'] {
+    box-shadow: inset 0 0 0 2px var-get($theme, 'border-color');
 }
 
-[part~='active'] {
-    &:hover {
-        color: var-get($theme, 'foreground-active');
+:host([disabled]) {
+    [part~='indicator'] {
+        igc-icon {
+            color: var-get($theme, 'foreground-disabled');
+        }
     }
 }