@itwin/itwinui-css 0.63.0 → 1.0.0-dev.1

package/css/{toast-notification.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:12px;
   }
 }
 @media screen and (min-width: 401px){
   .iui-toast-wrapper{
     min-width:400px;
     max-width:640px;
-    margin:22px 0;
+    margin:24px 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:12px 16px 0 16px;
 }
 .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:12px 16px 0 16px;
 }
 .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:12px 16px 0 16px;
 }
 
 .iui-toast{
@@ -80,46 +80,40 @@
   vertical-align:baseline;
   display:inline-flex;
   align-items:center;
-  box-sizing:border-box;
   pointer-events:all;
-  margin:0 16px 11px 16px;
-  min-height:44px;
+  margin:0 16px 12px 16px;
+  min-height:48px;
   border-radius:4px;
-  background-color:white;
-  border:1px solid black;
-  box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4), 0 9px 46px rgba(0, 0, 0, 0.25);
   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);
 }
 .iui-toast > .iui-status-area{
   display:flex;
-  -ms-grid-row-align:stretch;
-      align-self:stretch;
+  align-self:stretch;
   justify-content:center;
   align-items:center;
   width:48px;
   flex-shrink:0;
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-5);
 }
 .iui-toast > .iui-status-area > .iui-icon{
-  height:16px;
+  display:flex;
+  flex-shrink:0;
   width:16px;
-  fill:white;
+  height:16px;
   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-top:6px;
+  margin-bottom:6px;
   margin-right:24px;
   margin-left:16px;
-  line-height:22px;
+  line-height:24px;
   font-weight:400;
   font-style:normal;
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
 .iui-toast-anchor{
@@ -152,25 +146,19 @@
   }
 }
 .iui-toast.iui-informational{
-  border-color:#008ae0;
   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(0, 138, 224, 0.2);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-informational > .iui-message::selection,
 .iui-toast.iui-informational > .iui-message *::selection{
-  background-color:rgba(0, 138, 224, 0.2);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-informational > .iui-status-area{
-  background-color:#008ae0;
   background-color:var(--iui-color-background-primary);
 }
 .iui-toast.iui-informational > .iui-toast-anchor{
-  color:#008ae0;
-  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
 }
@@ -185,29 +173,22 @@
   }
 }
 .iui-toast.iui-informational > .iui-toast-anchor:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 .iui-toast.iui-positive{
-  border-color:#53a21a;
   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(83, 162, 26, 0.2);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-message::selection,
 .iui-toast.iui-positive > .iui-message *::selection{
-  background-color:rgba(83, 162, 26, 0.2);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-status-area{
-  background-color:#53a21a;
   background-color:var(--iui-color-background-positive);
 }
 .iui-toast.iui-positive > .iui-toast-anchor{
-  color:#53a21a;
-  -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
   color:var(--iui-color-foreground-positive);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
@@ -222,38 +203,29 @@
   }
 }
 .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
-  background-color:rgba(83, 162, 26, 0.2);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-toast-anchor::selection,
 .iui-toast.iui-positive > .iui-toast-anchor *::selection{
-  background-color:rgba(83, 162, 26, 0.2);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-toast-anchor:hover{
-  color:#3d7613;
   color:var(--iui-color-foreground-positive-overlay);
 }
 .iui-toast.iui-negative{
-  border-color:#d10a0a;
   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(209, 10, 10, 0.2);
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-message::selection,
 .iui-toast.iui-negative > .iui-message *::selection{
-  background-color:rgba(209, 10, 10, 0.2);
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-status-area{
-  background-color:#d10a0a;
   background-color:var(--iui-color-background-negative);
 }
 .iui-toast.iui-negative > .iui-toast-anchor{
-  color:#d10a0a;
-  -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
   color:var(--iui-color-foreground-negative);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
@@ -268,38 +240,29 @@
   }
 }
 .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
-  background-color:rgba(209, 10, 10, 0.2);
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-toast-anchor::selection,
 .iui-toast.iui-negative > .iui-toast-anchor *::selection{
-  background-color:rgba(209, 10, 10, 0.2);
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-toast-anchor:hover{
-  color:#a10808;
   color:var(--iui-color-foreground-negative-overlay);
 }
 .iui-toast.iui-warning{
-  border-color:#f18d13;
   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(241, 141, 19, 0.2);
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-message::selection,
 .iui-toast.iui-warning > .iui-message *::selection{
-  background-color:rgba(241, 141, 19, 0.2);
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-status-area{
-  background-color:#f18d13;
   background-color:var(--iui-color-background-warning);
 }
 .iui-toast.iui-warning > .iui-toast-anchor{
-  color:#f18d13;
-  -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
   color:var(--iui-color-foreground-warning);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
@@ -314,15 +277,12 @@
   }
 }
 .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
-  background-color:rgba(241, 141, 19, 0.2);
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-toast-anchor::selection,
 .iui-toast.iui-warning > .iui-toast-anchor *::selection{
-  background-color:rgba(241, 141, 19, 0.2);
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-toast-anchor:hover{
-  color:#c6720c;
   color:var(--iui-color-foreground-warning-overlay);
 }

package/css/toggle-switch.css

@@ -7,9 +7,8 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  display:-ms-grid;
   display:grid;
-      grid-template-areas:"toggle";
+  grid-template-areas:"toggle";
   align-items:center;
   gap:8px;
   font-size:14px;
@@ -22,20 +21,10 @@
           user-select:none;
   cursor:pointer;
   isolation:isolate;
-  color:rgba(0, 0, 0, 0.8);
   color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 }
-.iui-toggle-switch-wrapper > * + *{
-  margin-left:8px;
-}
-@supports (gap: 8px){
-  .iui-toggle-switch-wrapper > * + *{
-    margin-left:0;
-  }
-}
 .iui-toggle-switch-wrapper.iui-disabled{
   cursor:not-allowed;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 @media (forced-colors: active){
@@ -44,15 +33,13 @@
   }
 }
 .iui-toggle-switch-wrapper.iui-label-on-left{
-      grid-template-areas:"label toggle";
+  grid-template-areas:"label toggle";
 }
 .iui-toggle-switch-wrapper.iui-label-on-right{
-      grid-template-areas:"toggle label";
+  grid-template-areas:"toggle label";
 }
 
 .iui-toggle-switch{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
   margin:0;
   padding:0;
   border:none;
@@ -61,21 +48,17 @@
   display:flex;
   position:relative;
   cursor:pointer;
-  width:16px;
-  height:16px;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  width:48px;
+  border-radius:9999px;
+  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  background-color:var(--iui-color-background-1);
+  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   background-color:var(--iui-color-background-1);
   border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
 }
-
-.iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch{
-  -ms-grid-row:1;
-  -ms-grid-column:2;
-}
-
-.iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
-}
 .iui-toggle-switch:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:1px;
@@ -86,34 +69,14 @@
     outline-offset:1px;
   }
 }
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)){
-  .iui-toggle-switch{
-    -webkit-appearance:none;
-       -moz-appearance:none;
-            appearance:none;
-    width:44px;
-    height:auto;
-    border-radius:9999px;
-    box-sizing:border-box;
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
-    background-color:var(--iui-color-background-1);
-    border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  }
-}
 .iui-toggle-switch-label{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
   grid-area:label;
 }
-.iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-label{
-  -ms-grid-row:1;
-  -ms-grid-column:2;
-}
 .iui-toggle-switch::after{
   content:"";
   height:16px;
   width:16px;
-  margin:3px;
+  margin:4px;
   aspect-ratio:1/1;
   border-radius:50%;
   transition:background-color 0.2s ease-out, opacity 0.2s ease-out;
@@ -166,7 +129,7 @@
   }
 }
 .iui-toggle-switch:checked::after{
-  transform:translateX(19px);
+  transform:translateX(20px);
   background-color:var(--iui-color-foreground-accessory);
   opacity:var(--iui-opacity-2);
 }
@@ -212,7 +175,7 @@
 }
 .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
   opacity:0;
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 @media (forced-colors: active){
   .iui-toggle-switch:disabled:checked{
@@ -234,28 +197,18 @@
   }
 }
 .iui-toggle-switch-icon{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
   opacity:0;
   grid-area:toggle;
-  width:12px;
-  height:12px;
+  width:16px;
+  height:16px;
   padding:2px;
-  margin:4px;
+  margin:5px;
   display:flex;
   z-index:1;
   transition:opacity 0.2s ease-out;
   pointer-events:none;
   fill:var(--iui-color-foreground-accessory);
 }
-.iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch-icon{
-  -ms-grid-row:1;
-  -ms-grid-column:2;
-}
-.iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-icon{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
-}
 @media (forced-colors: active){
   .iui-toggle-switch-icon{
     fill:HighlightText;

package/css/tooltip.css

@@ -50,9 +50,6 @@
   z-index:999;
   box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
   pointer-events:none;
-  background-color:rgba(0, 0, 0, 0.6);
-  color:white;
-  border:1px solid rgba(255, 255, 255, 0.4);
   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));

package/css/tree.css

@@ -55,44 +55,26 @@
 .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:36px;
+  margin-left:calc(30px * (var(--level, 0)));
   overflow:hidden;
   padding-left:2px;
 }
 .iui-tree-node-content-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
-  margin:0 6px;
-  flex-shrink:0;
+  fill:var(--iui-icon-color);
+  margin:0 7px;
 }
 @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:37px;
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tree-node-content-expander-icon{
@@ -104,10 +86,10 @@
 }
 .iui-tree-node-content-label{
   min-width:0;
-  padding-left:6px;
+  padding-left:7px;
 }
 .iui-tree-node-content-label:first-child{
-  margin-left:28px;
+  margin-left:30px;
 }
 .iui-tree-node-content-title, .iui-tree-node-content-caption{
   white-space:nowrap;
@@ -119,22 +101,16 @@
 }
 .iui-tree-node-content-caption{
   font-size:12px;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .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));
 }
 .iui-tree-node:hover .iui-tree-node-content-caption{
-  color:black;
   color:var(--iui-color-foreground-body);
   transition:color 0.2s 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));
   outline:thin solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
@@ -143,10 +119,8 @@
   cursor:not-allowed;
   outline:none;
   background-color:transparent;
-  color:rgba(0, 0, 0, 0.2);
   color:var(--iui-text-color-placeholder);
 }
 .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
-  color:rgba(0, 0, 0, 0.2);
   color:var(--iui-text-color-placeholder);
 }