@itwin/itwinui-css 0.51.0 → 0.53.1

package/css/tile.css

@@ -13,7 +13,7 @@
   box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
   -webkit-backface-visibility:hidden;
           backface-visibility:hidden;
-  background-color:#FFF;
+  background-color:white;
   color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color);
@@ -51,8 +51,8 @@
   font-weight:600;
 }
 .iui-tile.iui-selected{
-  outline:solid 2px #008BE1;
-  background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
+  outline:solid 2px #008ae0;
+  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
   outline:solid 2px var(--iui-color-foreground-primary);
   background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
@@ -78,8 +78,8 @@
   height:110px;
   flex:1;
   border-bottom:none;
-  border-right:1px solid #DCE0E3;
-  border-right:1px solid var(--iui-color-background-4);
+  border-right:1px solid #c7ccd1;
+  border-right:1px solid var(--iui-color-background-border);
 }
 .iui-tile.iui-folder .iui-tile-content{
   flex:2;
@@ -116,16 +116,16 @@
   border-color:transparent;
 }
 .iui-tile-thumbnail-type-indicator.iui-active{
-  background-color:rgba(0, 139, 225, 0.1);
-  color:#008BE1;
+  background-color:rgba(0, 138, 224, 0.1);
+  color:#008ae0;
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
   color:var(--iui-color-foreground-primary);
   border-color:transparent;
 }
 .iui-tile-thumbnail-type-indicator[disabled], .iui-tile-thumbnail-type-indicator:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  background:#edeff2;
+  border-color:#edeff2;
   color:rgba(0, 0, 0, 0.2);
   background:var(--iui-color-background-disabled);
   border-color:var(--iui-color-background-disabled);
@@ -165,16 +165,16 @@
   border-color:transparent;
 }
 .iui-tile-thumbnail-quick-action.iui-active{
-  background-color:rgba(0, 139, 225, 0.1);
-  color:#008BE1;
+  background-color:rgba(0, 138, 224, 0.1);
+  color:#008ae0;
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
   color:var(--iui-color-foreground-primary);
   border-color:transparent;
 }
 .iui-tile-thumbnail-quick-action[disabled], .iui-tile-thumbnail-quick-action:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  background:#edeff2;
+  border-color:#edeff2;
   color:rgba(0, 0, 0, 0.2);
   background:var(--iui-color-background-disabled);
   border-color:var(--iui-color-background-disabled);
@@ -226,14 +226,14 @@
   border-radius:0;
 }
 .iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
-  border-top:1px solid #DCE0E3;
-  border-color:#DCE0E3;
-  border-top:1px solid var(--iui-color-background-4);
-  border-color:var(--iui-color-background-4);
+  border-top:1px solid #c7ccd1;
+  border-color:#c7ccd1;
+  border-top:1px solid var(--iui-color-background-border);
+  border-color:var(--iui-color-background-border);
 }
 .iui-tile-buttons > button:not(:last-child){
-  border-right:1px solid #DCE0E3;
-  border-right:1px solid var(--iui-color-background-4);
+  border-right:1px solid #c7ccd1;
+  border-right:1px solid var(--iui-color-background-border);
 }
 
 .iui-tile-thumbnail{
@@ -246,9 +246,9 @@
   align-items:center;
   justify-content:center;
   background-color:#f2f2f2;
-  border-bottom:1px solid #DCE0E3;
+  border-bottom:1px solid #c7ccd1;
   background-color:var(--iui-color-background-1-overlay);
-  border-bottom:1px solid var(--iui-color-background-4);
+  border-bottom:1px solid var(--iui-color-background-border);
 }
 .iui-tile-thumbnail .iui-thumbnail-icon{
   fill:rgba(0, 0, 0, 0.4);
@@ -258,19 +258,19 @@
   height:64px;
 }
 .iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
-  fill:#F18B12;
+  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 
@@ -323,7 +323,7 @@ div.iui-tile-thumbnail-picture{
 }
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
-  fill:#FFF;
+  fill:white;
   filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
   fill:var(--iui-color-foreground-accessory);
   filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
@@ -341,7 +341,7 @@ div.iui-tile-thumbnail-picture{
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled .iui-button-icon,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover .iui-button-icon,
 .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active .iui-button-icon{
-  fill:#FFF;
+  fill:white;
   fill:var(--iui-color-foreground-accessory);
 }
 
@@ -375,19 +375,19 @@ div.iui-tile-thumbnail-picture{
   flex-shrink:0;
 }
 .iui-tile-content .iui-tile-status-icon.iui-informational{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-tile-content .iui-tile-status-icon.iui-positive{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-tile-content .iui-tile-status-icon.iui-warning{
-  fill:#F18B12;
+  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-tile-content .iui-tile-status-icon.iui-negative{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 .iui-tile-content .iui-tile-name-label{
@@ -439,22 +439,22 @@ div.iui-tile-thumbnail-picture{
 }
 .iui-tile-content .iui-tile-metadata > svg.iui-informational,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-tile-content .iui-tile-metadata > svg.iui-positive,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-positive{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-tile-content .iui-tile-metadata > svg.iui-warning,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-warning{
-  fill:#F18B12;
+  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-tile-content .iui-tile-metadata > svg.iui-negative,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-negative{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 .iui-tile-content .iui-tile-metadata > *{

package/css/time-picker.css

@@ -14,12 +14,12 @@
   text-align:center;
   height:286px;
   display:inline-flex;
-  background-color:#FFF;
+  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-time-picker:not(:first-child){
-  border-left:1px solid #DCE0E3;
-  border-left:1px solid var(--iui-color-background-4);
+  border-left:1px solid #c7ccd1;
+  border-left:1px solid var(--iui-color-background-border);
 }
 .iui-time-picker:first-child{
   box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
@@ -32,8 +32,8 @@
   scrollbar-width:none;
 }
 .iui-time:not(:first-child){
-  border-left:1px solid #DCE0E3;
-  border-left:1px solid var(--iui-color-background-4);
+  border-left:1px solid #c7ccd1;
+  border-left:1px solid var(--iui-color-background-border);
 }
 .iui-time > ol{
   margin:0;
@@ -58,16 +58,16 @@
 }
 .iui-time > ol > li:hover{
   cursor:pointer;
-  color:#008BE1;
-  background-color:rgba(0, 139, 225, 0.1);
+  color:#008ae0;
+  background-color:rgba(0, 138, 224, 0.1);
   color:var(--iui-color-foreground-primary);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-time > ol > li.iui-selected{
   font-weight:600;
   cursor:default;
-  background-color:#008BE1;
-  color:#FFF;
+  background-color:#008ae0;
+  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
 }
@@ -91,8 +91,8 @@
   align-items:center;
 }
 .iui-period:not(:first-child){
-  border-left:1px solid #DCE0E3;
-  border-left:1px solid var(--iui-color-background-4);
+  border-left:1px solid #c7ccd1;
+  border-left:1px solid var(--iui-color-background-border);
 }
 .iui-period > ol{
   margin:0;
@@ -117,16 +117,16 @@
 }
 .iui-period > ol > li:hover{
   cursor:pointer;
-  color:#008BE1;
-  background-color:rgba(0, 139, 225, 0.1);
+  color:#008ae0;
+  background-color:rgba(0, 138, 224, 0.1);
   color:var(--iui-color-foreground-primary);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-period > ol > li.iui-selected{
   font-weight:600;
   cursor:default;
-  background-color:#008BE1;
-  color:#FFF;
+  background-color:#008ae0;
+  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
 }

package/css/toast-notification.css

@@ -85,8 +85,8 @@
   margin:0 16px 11px 16px;
   min-height:44px;
   border-radius:3px;
-  background-color:#FFF;
-  border:1px solid #000;
+  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);
@@ -100,13 +100,13 @@
   align-items:center;
   width:48px;
   flex-shrink:0;
-  background-color:#C7CCD1;
+  background-color:#c7ccd1;
   background-color:var(--iui-color-background-5);
 }
 .iui-toast > .iui-status-area > .iui-icon{
   height:16px;
   width:16px;
-  fill:#FFF;
+  fill:white;
   fill:var(--iui-color-foreground-accessory);
 }
 .iui-toast > .iui-message{
@@ -150,45 +150,45 @@
   }
 }
 .iui-toast.iui-informational{
-  border-color:#008BE1;
+  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, 139, 225, 0.4);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+  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, 139, 225, 0.4);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+  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:#008BE1;
+  background-color:#008ae0;
   background-color:var(--iui-color-background-primary);
 }
 .iui-toast.iui-positive{
-  border-color:#53A21A;
+  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.4);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
+  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.4);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
+  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:#53a21a;
   background-color:var(--iui-color-background-positive);
 }
 .iui-toast.iui-positive > .iui-anchor{
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-toast.iui-positive > .iui-anchor:hover{
-  color:#3c7613;
+  color:#3d7613;
   color:var(--iui-color-foreground-positive-overlay);
 }
 .iui-toast.iui-positive > .iui-anchor{
@@ -198,28 +198,28 @@
   outline-color:var(--iui-color-foreground-positive);
 }
 .iui-toast.iui-negative{
-  border-color:#D30A0A;
+  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(211, 10, 10, 0.4);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
+  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(211, 10, 10, 0.4);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
+  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:#D30A0A;
+  background-color:#d10a0a;
   background-color:var(--iui-color-background-negative);
 }
 .iui-toast.iui-negative > .iui-anchor{
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-toast.iui-negative > .iui-anchor:hover{
-  color:#a20808;
+  color:#a10808;
   color:var(--iui-color-foreground-negative-overlay);
 }
 .iui-toast.iui-negative > .iui-anchor{
@@ -229,28 +229,28 @@
   outline-color:var(--iui-color-foreground-negative);
 }
 .iui-toast.iui-warning{
-  border-color:#F18B12;
+  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, 139, 18, 0.4);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4));
+  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, 139, 18, 0.4);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4));
+  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:#F18B12;
+  background-color:#f18d13;
   background-color:var(--iui-color-background-warning);
 }
 .iui-toast.iui-warning > .iui-anchor{
-  color:#F18B12;
+  color:#f18d13;
   color:var(--iui-color-foreground-warning);
 }
 .iui-toast.iui-warning > .iui-anchor:hover{
-  color:#c4700c;
+  color:#c6720c;
   color:var(--iui-color-foreground-warning-overlay);
 }
 .iui-toast.iui-warning > .iui-anchor{

package/css/tooltip.css

@@ -51,7 +51,9 @@
   box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
   pointer-events:none;
   background-color:rgba(0, 0, 0, 0.6);
-  color:#FFF;
+  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

@@ -71,19 +71,19 @@
   flex-shrink:0;
 }
 .iui-tree-node-content-icon.iui-informational{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-tree-node-content-icon.iui-positive{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-tree-node-content-icon.iui-warning{
-  fill:#F18B12;
+  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-tree-node-content-icon.iui-negative{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 .iui-tree-node-content-icon:first-child{
@@ -118,16 +118,16 @@
   color:var(--iui-text-color-muted);
 }
 .iui-tree-node:hover{
-  background-color:rgba(0, 139, 225, 0.1);
+  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:#000;
+  color:black;
   color:var(--iui-color-foreground-body);
   transition:color 0.2s ease;
 }
 .iui-tree-node.iui-active{
-  background-color:rgba(0, 139, 225, 0.2);
+  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));

package/css/user-icon.css

@@ -48,7 +48,7 @@
   text-transform:uppercase;
   background-color:#b1c856;
   overflow:hidden;
-  color:#FFF;
+  color:white;
   color:var(--iui-color-foreground-accessory);
 }
 .iui-user-icon > .iui-icon{
@@ -56,7 +56,7 @@
   width:50%;
   height:50%;
   position:absolute;
-  fill:#FFF;
+  fill:white;
   fill:var(--iui-color-foreground-accessory);
 }
 .iui-user-icon > img{
@@ -70,7 +70,7 @@
   height:100%;
   border-width:0;
   border-radius:50%;
-  background-color:#FFF;
+  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-user-icon > .iui-status{
@@ -83,41 +83,60 @@
   width:25%;
   height:25%;
   border-radius:50%;
-  border:2px solid #FFF;
-  background-color:#FFF;
-  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
+  border:2px solid white;
+  background-color:#c7ccd1;
   border:2px solid var(--iui-color-background-1);
-  background-color:var(--iui-color-background-1);
-  box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
-}
-.iui-user-icon > .iui-status > .iui-status-symbol{
-  display:inline-flex;
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  width:66.6666666667%;
-  height:66.6666666667%;
-}
-.iui-user-icon > .iui-status.iui-online, .iui-user-icon > .iui-status.iui-away, .iui-user-icon > .iui-status.iui-busy{
-  box-shadow:none;
+  background-color:var(--iui-color-background-5);
 }
-.iui-user-icon > .iui-status.iui-online > .iui-status-symbol, .iui-user-icon > .iui-status.iui-away > .iui-status-symbol, .iui-user-icon > .iui-status.iui-busy > .iui-status-symbol{
-  fill:#FFF;
-  fill:var(--iui-color-foreground-accessory);
+.iui-user-icon > .iui-status::after{
+  content:"";
+  width:var(--_iui-user-icon-status-size, 8px);
+  height:var(--_iui-user-icon-status-size, 8px);
 }
 .iui-user-icon > .iui-status.iui-online{
-  background-color:#53A21A;
+  background-color:#53a21a;
   background-color:var(--iui-color-background-positive);
 }
+.iui-user-icon > .iui-status.iui-online::after{
+  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
+          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
+  background-color:white;
+  background-color:var(--iui-color-foreground-accessory);
+}
 .iui-user-icon > .iui-status.iui-away{
-  background-color:#F18B12;
+  background-color:#f18d13;
   background-color:var(--iui-color-background-warning);
 }
+.iui-user-icon > .iui-status.iui-away::after{
+  -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
+          mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
+  background-color:white;
+  background-color:var(--iui-color-foreground-accessory);
+}
 .iui-user-icon > .iui-status.iui-busy{
-  background-color:#D30A0A;
+  background-color:#d10a0a;
   background-color:var(--iui-color-background-negative);
 }
+.iui-user-icon > .iui-status.iui-busy::after{
+  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
+          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
+  background-color:white;
+  background-color:var(--iui-color-foreground-accessory);
+}
+.iui-user-icon > .iui-status.iui-offline{
+  background-color:white;
+  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
+  background-color:var(--iui-color-background-1);
+  box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+}
+.iui-user-icon > .iui-status.iui-offline::after{
+  -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
+          mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
+  background-color:rgba(0, 0, 0, 0.4);
+  background-color:var(--iui-icons-color);
+}
 .iui-user-icon.iui-user-icon-count > .iui-initials{
-  background-color:#EEF0F3;
+  background-color:#edeff2;
   color:rgba(0, 0, 0, 0.4);
   background-color:var(--iui-color-background-3);
   color:var(--iui-text-color-muted);
@@ -126,7 +145,6 @@
   outline:none;
 }
 .iui-user-icon.iui-user-icon-count:focus > .iui-stroke{
-  box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
   box-shadow:var(--iui-focus-box-shadow);
 }
 .iui-user-icon.iui-user-icon-count:focus-visible{
@@ -139,6 +157,7 @@
 .iui-user-icon.iui-user-icon{
   width:32px;
   height:32px;
+  --_iui-user-icon-status-size:6px;
 }
 .iui-user-icon.iui-user-icon > .iui-initials{
   line-height:32px;
@@ -147,6 +166,7 @@
 .iui-user-icon.iui-small{
   width:24px;
   height:24px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-small > .iui-initials{
   line-height:24px;
@@ -155,6 +175,7 @@
 .iui-user-icon.iui-large{
   width:48px;
   height:48px;
+  --_iui-user-icon-status-size:8px;
 }
 .iui-user-icon.iui-large > .iui-initials{
   line-height:48px;
@@ -163,6 +184,7 @@
 .iui-user-icon.iui-x-large{
   width:64px;
   height:64px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-x-large > .iui-initials{
   line-height:64px;
@@ -189,14 +211,14 @@
   margin-left:-4px;
 }
 .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child) .iui-initials{
-  box-shadow:0 0 0 4px #FFF;
+  box-shadow:0 0 0 4px white;
   box-shadow:0 0 0 4px var(--iui-color-background-1);
 }
 .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small{
   margin-left:-2px;
 }
 .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small .iui-initials{
-  box-shadow:0 0 0 2px #FFF;
+  box-shadow:0 0 0 2px white;
   box-shadow:0 0 0 2px var(--iui-color-background-1);
 }
 .iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-large{