@itwin/itwinui-css 1.0.0-dev.0 → 1.0.0-dev.3

package/css/toast.css

@@ -14,14 +14,14 @@
 @media screen and (max-width: 400px){
   .iui-toast-wrapper{
     width:calc(100vw - 36px);
-    margin-top:11px;
+    margin-top:var(--iui-size-s);
   }
 }
 @media screen and (min-width: 401px){
   .iui-toast-wrapper{
     min-width:400px;
     max-width:640px;
-    margin:22px 0;
+    margin:var(--iui-size-l) 0;
   }
 }
 @media (prefers-reduced-motion: no-preference){
@@ -54,7 +54,7 @@
   right:0;
 }
 .iui-toast-wrapper.iui-placement-bottom .iui-toast{
-  margin:11px 16px 0 16px;
+  margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
 }
 .iui-toast-wrapper.iui-placement-bottom-start{
   bottom:0;
@@ -62,7 +62,7 @@
   align-items:flex-start;
 }
 .iui-toast-wrapper.iui-placement-bottom-start .iui-toast{
-  margin:11px 16px 0 16px;
+  margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
 }
 .iui-toast-wrapper.iui-placement-bottom-end{
   bottom:0;
@@ -70,7 +70,7 @@
   align-items:flex-end;
 }
 .iui-toast-wrapper.iui-placement-bottom-end .iui-toast{
-  margin:11px 16px 0 16px;
+  margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
 }
 
 .iui-toast{
@@ -81,45 +81,47 @@
   display:inline-flex;
   align-items:center;
   pointer-events:all;
-  margin:0 16px 11px 16px;
-  min-height:44px;
-  border-radius:4px;
+  margin:0 var(--iui-size-m) var(--iui-size-s) var(--iui-size-m);
+  min-height:calc(var(--iui-size-s) * 4);
+  border-radius:var(--iui-border-radius-1);
   background-color:var(--iui-color-background-1);
-  border:1px solid var(--iui-color-foreground-body);
-  box-shadow:0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)), 0 9px 46px rgba(0, 0, 0, 0.25);
+  border:1px solid var(--iui-color-foreground-1);
+  box-shadow:0 0 0 1px rgba(255, 255, 255, var(--iui-opacity-4)), var(--iui-shadow-5);
 }
 .iui-toast > .iui-status-area{
   display:flex;
   align-self:stretch;
   justify-content:center;
   align-items:center;
-  width:48px;
+  width:calc(var(--iui-size-l) * 2);
   flex-shrink:0;
   background-color:var(--iui-color-background-5);
 }
 .iui-toast > .iui-status-area > .iui-icon{
-  height:16px;
-  width:16px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   fill:var(--iui-color-foreground-accessory);
 }
 .iui-toast > .iui-message{
   flex-grow:1;
-  font-size:14px;
-  margin-top:5.5px;
-  margin-bottom:5.5px;
-  margin-right:24px;
-  margin-left:16px;
-  line-height:22px;
-  font-weight:400;
+  font-size:var(--iui-font-size-1);
+  margin-top:calc(var(--iui-size-s) * 0.5);
+  margin-bottom:calc(var(--iui-size-s) * 0.5);
+  margin-right:var(--iui-size-l);
+  margin-left:var(--iui-size-m);
+  line-height:var(--iui-size-l);
+  font-weight:var(--iui-font-weight-normal);
   font-style:normal;
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 .iui-toast-anchor{
   text-decoration:underline;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   cursor:pointer;
-  font-size:12px;
-  margin-right:16px;
+  font-size:var(--iui-font-size-0);
+  margin-right:var(--iui-size-m);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
@@ -130,7 +132,7 @@
   text-decoration:none;
 }
 .iui-toast > .iui-button{
-  margin-right:8px;
+  margin-right:var(--iui-size-xs);
 }
 @media screen and (max-width: 400px){
   .iui-toast{
@@ -147,18 +149,18 @@
   border-color:var(--iui-color-foreground-primary);
 }
 .iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-informational > .iui-message::selection,
 .iui-toast.iui-informational > .iui-message *::selection{
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-informational > .iui-status-area{
   background-color:var(--iui-color-background-primary);
 }
 .iui-toast.iui-informational > .iui-toast-anchor{
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
 }
 .iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -171,24 +173,24 @@
   }
 }
 .iui-toast.iui-informational > .iui-toast-anchor:hover{
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-toast.iui-positive{
   border-color:var(--iui-color-foreground-positive);
 }
 .iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-message::selection,
 .iui-toast.iui-positive > .iui-message *::selection{
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-status-area{
   background-color:var(--iui-color-background-positive);
 }
 .iui-toast.iui-positive > .iui-toast-anchor{
   color:var(--iui-color-foreground-positive);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-6));
 }
 .iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
   outline:1px solid var(--iui-color-foreground-positive);
@@ -201,31 +203,31 @@
   }
 }
 .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-toast-anchor::selection,
 .iui-toast.iui-positive > .iui-toast-anchor *::selection{
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-toast-anchor:hover{
-  color:var(--iui-color-foreground-positive-overlay);
+  color:var(--iui-color-foreground-positive-hover);
 }
 .iui-toast.iui-negative{
   border-color:var(--iui-color-foreground-negative);
 }
 .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-message::selection,
 .iui-toast.iui-negative > .iui-message *::selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-status-area{
   background-color:var(--iui-color-background-negative);
 }
 .iui-toast.iui-negative > .iui-toast-anchor{
   color:var(--iui-color-foreground-negative);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-6));
 }
 .iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
   outline:1px solid var(--iui-color-foreground-negative);
@@ -238,31 +240,31 @@
   }
 }
 .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-toast-anchor::selection,
 .iui-toast.iui-negative > .iui-toast-anchor *::selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-toast-anchor:hover{
-  color:var(--iui-color-foreground-negative-overlay);
+  color:var(--iui-color-foreground-negative-hover);
 }
 .iui-toast.iui-warning{
   border-color:var(--iui-color-foreground-warning);
 }
 .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-message::selection,
 .iui-toast.iui-warning > .iui-message *::selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-status-area{
   background-color:var(--iui-color-background-warning);
 }
 .iui-toast.iui-warning > .iui-toast-anchor{
   color:var(--iui-color-foreground-warning);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-6));
 }
 .iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
   outline:1px solid var(--iui-color-foreground-warning);
@@ -275,12 +277,12 @@
   }
 }
 .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-toast-anchor::selection,
 .iui-toast.iui-warning > .iui-toast-anchor *::selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-toast-anchor:hover{
-  color:var(--iui-color-foreground-warning-overlay);
+  color:var(--iui-color-foreground-warning-hover);
 }

package/css/toggle-switch.css

@@ -10,8 +10,8 @@
   display:grid;
   grid-template-areas:"toggle";
   align-items:center;
-  gap:8px;
-  font-size:14px;
+  gap:var(--iui-size-xs);
+  font-size:var(--iui-font-size-1);
   width:-webkit-fit-content;
   width:-moz-fit-content;
   width:fit-content;
@@ -21,11 +21,11 @@
           user-select:none;
   cursor:pointer;
   isolation:isolate;
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  color:var(--iui-color-foreground-2);
 }
 .iui-toggle-switch-wrapper.iui-disabled{
   cursor:not-allowed;
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 @media (forced-colors: active){
   .iui-toggle-switch-wrapper.iui-disabled{
@@ -51,13 +51,13 @@
   -webkit-appearance:none;
      -moz-appearance:none;
           appearance:none;
-  width:44px;
-  border-radius:9999px;
-  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  width:calc((var(--iui-size-m) + var(--iui-size-2xs) * 2) * 2);
+  border-radius:var(--iui-border-radius-round);
+  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
   background-color:var(--iui-color-background-1);
-  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  border:1px solid var(--iui-color-foreground-4);
   background-color:var(--iui-color-background-1);
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  border-color:var(--iui-color-foreground-4);
 }
 .iui-toggle-switch:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -74,17 +74,17 @@
 }
 .iui-toggle-switch::after{
   content:"";
-  height:16px;
-  width:16px;
-  margin:3px;
+  height:var(--iui-size-m);
+  width:var(--iui-size-m);
+  margin:var(--iui-size-2xs);
   aspect-ratio:1/1;
   border-radius:50%;
-  transition:background-color 0.2s ease-out, opacity 0.2s ease-out;
+  transition:background-color var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
   z-index:2;
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-toggle-switch::after{
-    transition:transform 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out;
+    transition:transform var(--iui-duration-1) ease-out, background-color var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
   }
 }
 @media (forced-colors: active){
@@ -93,7 +93,7 @@
   }
 }
 .iui-toggle-switch::after{
-  background-color:var(--iui-color-foreground-body);
+  background-color:var(--iui-color-foreground-1);
   opacity:var(--iui-opacity-2);
 }
 @media (forced-colors: active){
@@ -103,7 +103,7 @@
   }
 }
 .iui-toggle-switch:hover{
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  border-color:var(--iui-color-foreground-2);
 }
 @media (forced-colors: active){
   .iui-toggle-switch:hover{
@@ -111,11 +111,11 @@
   }
 }
 .iui-toggle-switch:focus-visible{
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  border-color:var(--iui-color-foreground-2);
 }
 @supports not selector(*:focus-visible){
   .iui-toggle-switch:focus{
-    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+    border-color:var(--iui-color-foreground-2);
   }
 }
 .iui-toggle-switch:checked{
@@ -129,7 +129,7 @@
   }
 }
 .iui-toggle-switch:checked::after{
-  transform:translateX(19px);
+  transform:translateX(calc(var(--iui-size-m) + var(--iui-size-2xs)));
   background-color:var(--iui-color-foreground-accessory);
   opacity:var(--iui-opacity-2);
 }
@@ -164,7 +164,7 @@
   }
 }
 .iui-toggle-switch:disabled::after{
-  background-color:var(--iui-color-foreground-body);
+  background-color:var(--iui-color-foreground-1);
   opacity:var(--iui-opacity-5);
 }
 @media (forced-colors: active){
@@ -175,7 +175,7 @@
 }
 .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
   opacity:0;
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-color-foreground-2);
 }
 @media (forced-colors: active){
   .iui-toggle-switch:disabled:checked{
@@ -199,13 +199,13 @@
 .iui-toggle-switch-icon{
   opacity:0;
   grid-area:toggle;
-  width:16px;
-  height:16px;
-  padding:2px;
-  margin:4px;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  padding:calc(var(--iui-size-m) * 0.125);
+  margin:calc(var(--iui-size-2xs) + 1px);
   display:flex;
   z-index:1;
-  transition:opacity 0.2s ease-out;
+  transition:opacity var(--iui-duration-1) ease-out;
   pointer-events:none;
   fill:var(--iui-color-foreground-accessory);
 }

package/css/tooltip.css

@@ -19,11 +19,7 @@
       -ms-user-select:none;
           user-select:none;
   opacity:0;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-tooltip-container > .iui-tooltip{
-    transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
-  }
+  transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
 }
 .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
   visibility:visible;
@@ -37,8 +33,8 @@
   vertical-align:baseline;
   display:block;
   text-align:center;
-  border-radius:4px;
-  font-size:12px;
+  border-radius:var(--iui-border-radius-1);
+  font-size:var(--iui-font-size-0);
   overflow:hidden;
   max-width:400px;
   width:-webkit-max-content;
@@ -46,11 +42,11 @@
   width:max-content;
   overflow-wrap:break-word;
   box-sizing:content-box;
-  padding:4px 8px;
+  padding:calc(var(--iui-size-s) * 0.33) var(--iui-size-xs);
   z-index:999;
-  box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
+  box-shadow:var(--iui-shadow-3);
   pointer-events:none;
   background-color:rgba(0, 0, 0, var(--iui-opacity-3));
   color:var(--iui-color-foreground-accessory);
-  border:1px solid rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
+  border:1px solid rgba(255, 255, 255, var(--iui-opacity-4));
 }

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,46 +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;
-  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:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-  margin:0 6px;
+  display:flex;
   flex-shrink:0;
-}
-.iui-tree-node-content-icon.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-tree-node-content-icon.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tree-node-content-icon.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-tree-node-content-icon.iui-negative{
-  fill:var(--iui-icons-color-negative);
+  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: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{
@@ -93,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;
@@ -104,21 +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: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(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: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(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;
 }
@@ -126,8 +121,8 @@
   cursor:not-allowed;
   outline:none;
   background-color:transparent;
-  color:var(--iui-text-color-placeholder);
+  color:var(--iui-color-foreground-5);
 }
 .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
-  color:var(--iui-text-color-placeholder);
+  color:var(--iui-color-foreground-5);
 }