@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

package/css/tree.css

@@ -8,6 +8,7 @@
   border:none;
   vertical-align:baseline;
   list-style:none;
+  border-radius:var(--iui-border-radius-1);
 }
 
 .iui-sub-tree{
@@ -46,57 +47,40 @@
 .iui-tree-node{
   display:flex;
   cursor:pointer;
-  padding:0 8px;
+  padding:0 var(--iui-size-xs);
   align-items:center;
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-tree-node-checkbox{
-  margin-right:8px;
+  margin-right:var(--iui-size-xs);
 }
 .iui-tree-node-content{
   display:flex;
   align-items:center;
-  box-sizing:border-box;
-  min-height:33px;
-  margin-left:calc(28px * (var(--level, 0)));
+  min-height:calc(var(--iui-size-s) * 3);
+  margin-left:calc(calc(var(--iui-component-height-small) + 2px) * (var(--level, 0)));
   overflow:hidden;
-  padding-left:2px;
+  padding-left:var(--iui-size-3xs);
 }
 .iui-tree-node-content-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-  margin:0 6px;
+  display:flex;
   flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  fill:var(--iui-color-foreground-4);
+  margin:0 calc(var(--iui-size-2xs) + 1px);
 }
 @media (forced-colors: active){
   .iui-tree-node-content-icon{
     fill:CanvasText;
   }
 }
-.iui-tree-node-content-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-tree-node-content-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tree-node-content-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-tree-node-content-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
 .iui-tree-node-content-icon:first-child{
-  margin-left:34px;
+  margin-left:calc(var(--iui-component-height-small) + 2px + var(--iui-size-2xs) + 1px);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tree-node-content-expander-icon{
-    transition:transform 0.2s ease-out;
+    transition:transform var(--iui-duration-1) ease-out;
   }
 }
 .iui-tree-node-content-expander-icon-expanded{
@@ -104,10 +88,10 @@
 }
 .iui-tree-node-content-label{
   min-width:0;
-  padding-left:6px;
+  padding-left:calc(var(--iui-size-2xs) + 1px);
 }
 .iui-tree-node-content-label:first-child{
-  margin-left:28px;
+  margin-left:calc(var(--iui-component-height-small) + 2px);
 }
 .iui-tree-node-content-title, .iui-tree-node-content-caption{
   white-space:nowrap;
@@ -115,27 +99,21 @@
   text-overflow:ellipsis;
 }
 .iui-tree-node-content-title{
-  font-size:14px;
+  font-size:var(--iui-font-size-1);
 }
 .iui-tree-node-content-caption{
-  font-size:12px;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  font-size:var(--iui-font-size-0);
+  color:var(--iui-color-foreground-4);
 }
 .iui-tree-node:hover{
-  background-color:rgba(0, 138, 224, 0.1);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-tree-node:hover .iui-tree-node-content-caption{
-  color:black;
-  color:var(--iui-color-foreground-body);
-  transition:color 0.2s ease;
+  color:var(--iui-color-foreground-1);
+  transition:color var(--iui-duration-1) ease;
 }
 .iui-tree-node.iui-active{
-  background-color:rgba(0, 138, 224, 0.2);
-  outline:thin solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  background-color:var(--iui-color-background-subtle-primary);
   outline:thin solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
 }
@@ -143,10 +121,8 @@
   cursor:not-allowed;
   outline:none;
   background-color:transparent;
-  color:rgba(0, 0, 0, 0.2);
-  color:var(--iui-text-color-placeholder);
+  color:var(--iui-color-foreground-5);
 }
 .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
-  color:rgba(0, 0, 0, 0.2);
-  color:var(--iui-text-color-placeholder);
+  color:var(--iui-color-foreground-5);
 }