fix(treeview): update text and color tokens to match spec (#8075)

* docs(TreeView): set treeview width

* fix(treeview): update icon color token

* fix(treeview): update enabled hover text tokens

* fix(treeview): update selected state blue side bar token

* fix(treeview): update selected and hover icon color tokens

* fix(treeview): scope icon hover styles to current hovered node

* fix(treeview): update disablednode pointer and focus styles

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/components/src/components/treeview/_treeview.scss

@@ -35,24 +35,34 @@
       @include focus-outline('outline');
     }
 
-    .#{$prefix}--tree-node--disabled {
-      color: $disabled-02;
-      background-color: $disabled-01;
-      pointer-events: none;
+    .#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
+      outline: none;
     }
 
-    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover {
+    .#{$prefix}--tree-node--disabled,
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-node__label__details {
+      color: $disabled-02;
       background-color: $disabled-01;
     }
 
     .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
-    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon {
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-node__icon {
       fill: $disabled-02;
     }
 
+    .#{$prefix}--tree-node--disabled,
     .#{$prefix}--tree-node--disabled
       .#{$prefix}--tree-parent-node__toggle-icon:hover {
-      cursor: default;
+      cursor: not-allowed;
     }
 
     .#{$prefix}--tree-node__label {
@@ -62,10 +72,21 @@
       min-height: rem(32px);
 
       &:hover {
+        color: $text-01;
         background-color: $hover-ui;
       }
     }
 
+    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
+      color: $text-01;
+    }
+
+    .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
+      fill: $icon-01;
+    }
+
     .#{$prefix}--tree-leaf-node {
       display: flex;
       padding-left: $spacing-08;
@@ -101,7 +122,7 @@
     .#{$prefix}--tree-parent-node__toggle-icon {
       transform: rotate(-90deg);
       transition: all $duration--fast-02 motion(standard, productive);
-      fill: $icon-01;
+      fill: $icon-02;
     }
 
     .#{$prefix}--tree-parent-node__toggle-icon--expanded {
@@ -110,7 +131,7 @@
 
     .#{$prefix}--tree-node__icon {
       margin-right: $spacing-03;
-      fill: $icon-01;
+      fill: $icon-02;
     }
 
     .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
@@ -122,6 +143,15 @@
       }
     }
 
+    .#{$prefix}--tree-node--selected
+      > .#{$prefix}--tree-node__label
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node--selected
+      > .#{$prefix}--tree-node__label
+      .#{$prefix}--tree-node__icon {
+      fill: $icon-01;
+    }
+
     .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
       position: relative;
 
@@ -131,7 +161,7 @@
         left: 0;
         width: rem(4px);
         height: 100%;
-        background-color: $interactive-01;
+        background-color: $interactive-04;
         content: '';
       }
     }

packages/react/src/components/TreeView/TreeView-story.js

@@ -17,6 +17,7 @@ import {
 } from '@storybook/addon-knobs';
 import { InlineNotification } from '../Notification';
 import TreeView, { TreeNode } from '../TreeView';
+import './story.scss';
 
 const sizes = {
   default: 'default',

packages/react/src/components/TreeView/story.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+.bx--tree {
+  width: 16rem;
+}