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

package/css/tile.css

@@ -8,16 +8,15 @@
   border:none;
   vertical-align:baseline;
   --iui-surface-background-color:var(--iui-color-background-1);
-  --iui-surface-border-radius:0;
-  --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
+  --iui-surface-border-radius:var(--iui-border-radius-1);
+  --iui-surface-elevation:var(--iui-shadow-1);
   background-color:var(--iui-surface-background-color);
   border-radius:var(--iui-surface-border-radius);
   box-shadow:var(--iui-surface-elevation);
-  box-sizing:border-box;
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
   display:inline-flex;
   flex-direction:column;
-  width:288px;
+  width:calc(var(--iui-size-3xl) * 3);
   -webkit-backface-visibility:hidden;
           backface-visibility:hidden;
 }
@@ -26,6 +25,14 @@
     border:1px solid transparent;
   }
 }
+.iui-tile:where(:not(.iui-folder)) > :where(:first-child){
+  border-top-left-radius:inherit;
+  border-top-right-radius:inherit;
+}
+.iui-tile:where(:not(.iui-folder)) > :where(:last-child){
+  border-bottom-left-radius:inherit;
+  border-bottom-right-radius:inherit;
+}
 .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
   -webkit-clip-path:revert;
           clip-path:revert;
@@ -39,44 +46,46 @@
   position:absolute;
 }
 .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
-  width:calc(100% - 32px);
+  width:calc(100% - var(--iui-size-xl));
+}
+.iui-tile.iui-new{
+  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
 }
 .iui-tile.iui-new .iui-tile-name,
 .iui-tile.iui-new .iui-tile-description{
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }
 .iui-tile.iui-selected{
-  outline:solid 2px #008ae0;
-  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
+  --_iui-tile-status-icon-fill:var(--iui-color-foreground-primary);
   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));
+  background-color:var(--iui-color-background-subtle-primary);
 }
 .iui-tile.iui-selected:focus-visible{
-  outline:4px solid var(--iui-color-foreground-primary);
+  outline:var(--iui-size-2xs) solid var(--iui-color-foreground-primary);
   outline-offset:0;
 }
 @supports not selector(*:focus-visible){
   .iui-tile.iui-selected:focus{
-    outline:4px solid var(--iui-color-foreground-primary);
+    outline:var(--iui-size-2xs) solid var(--iui-color-foreground-primary);
     outline-offset:0;
   }
 }
 .iui-tile.iui-actionable{
   cursor:pointer;
-  transition:box-shadow 0.2s ease-in-out;
+  transition:box-shadow var(--iui-duration-1) ease-in-out;
 }
 .iui-tile.iui-actionable:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:2px;
+  outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
+  outline-offset:var(--iui-size-3xs);
 }
 @supports not selector(*:focus-visible){
   .iui-tile.iui-actionable:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:2px;
+    outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
+    outline-offset:var(--iui-size-3xs);
   }
 }
 .iui-tile.iui-actionable:hover{
-  box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
+  box-shadow:var(--iui-shadow-3);
 }
 .iui-tile.iui-actionable:hover .iui-tile-thumbnail-picture, .iui-tile.iui-actionable:focus-within .iui-tile-thumbnail-picture, .iui-tile.iui-actionable.iui-selected .iui-tile-thumbnail-picture{
   transform:translateZ(0) scale(1.1);
@@ -86,11 +95,18 @@
   flex-direction:row;
   flex-wrap:nowrap;
 }
+.iui-tile.iui-folder > :where(:first-child){
+  border-top-left-radius:inherit;
+  border-bottom-left-radius:inherit;
+}
+.iui-tile.iui-folder > :where(:last-child){
+  border-top-right-radius:inherit;
+  border-bottom-right-radius:inherit;
+}
 .iui-tile.iui-folder .iui-tile-thumbnail{
-  height:110px;
+  height:calc(var(--iui-size-s) * 10);
   flex:1;
   border-bottom:none;
-  border-right:1px solid #c7ccd1;
   border-right:1px solid var(--iui-color-background-border);
 }
 .iui-tile.iui-folder .iui-tile-content{
@@ -98,7 +114,7 @@
 }
 .iui-tile.iui-folder .iui-tile-description{
   height:100%;
-  max-height:44px;
+  max-height:calc(var(--iui-size-s) * 4);
   margin-bottom:0;
   -webkit-line-clamp:2;
 }
@@ -110,7 +126,7 @@
   cursor:not-allowed;
 }
 .iui-tile[aria-disabled=true] .iui-tile-name-label{
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
 .iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
@@ -122,183 +138,185 @@
 .iui-tile[aria-disabled=true] .iui-tile-more-options{
   display:none;
 }
+.iui-tile.iui-positive{
+  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
+}
 .iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
-  background-color:rgba(83, 162, 26, 0.2);
-  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-tile.iui-positive::selection,
 .iui-tile.iui-positive *::selection{
-  background-color:rgba(83, 162, 26, 0.2);
-  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-tile.iui-positive .iui-tile-thumbnail{
-  box-shadow:0 4px 0 var(--iui-color-foreground-positive);
+  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-positive);
 }
 .iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{
-  box-shadow:4px 0 0 var(--iui-color-foreground-positive);
+  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-positive);
 }
 
 .iui-tile.iui-positive .iui-tile-name-label{
   color:var(--iui-color-foreground-positive);
 }
-.iui-tile.iui-positive .iui-tile-status-icon{
-  fill:var(--iui-color-foreground-positive);
+.iui-tile.iui-warning{
+  --_iui-tile-status-icon-fill:var(--iui-color-foreground-warning);
 }
 .iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
-  background-color:rgba(241, 141, 19, 0.2);
-  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-tile.iui-warning::selection,
 .iui-tile.iui-warning *::selection{
-  background-color:rgba(241, 141, 19, 0.2);
-  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-tile.iui-warning .iui-tile-thumbnail{
-  box-shadow:0 4px 0 var(--iui-color-foreground-warning);
+  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-warning);
 }
 .iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{
-  box-shadow:4px 0 0 var(--iui-color-foreground-warning);
+  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-warning);
 }
 
 .iui-tile.iui-warning .iui-tile-name-label{
   color:var(--iui-color-foreground-warning);
 }
-.iui-tile.iui-warning .iui-tile-status-icon{
-  fill:var(--iui-color-foreground-warning);
+.iui-tile.iui-negative{
+  --_iui-tile-status-icon-fill:var(--iui-color-foreground-negative);
 }
 .iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
-  background-color:rgba(209, 10, 10, 0.2);
-  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-tile.iui-negative::selection,
 .iui-tile.iui-negative *::selection{
-  background-color:rgba(209, 10, 10, 0.2);
-  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-tile.iui-negative .iui-tile-thumbnail{
-  box-shadow:0 4px 0 var(--iui-color-foreground-negative);
+  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-negative);
 }
 .iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{
-  box-shadow:4px 0 0 var(--iui-color-foreground-negative);
+  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-negative);
 }
 
 .iui-tile.iui-negative .iui-tile-name-label{
   color:var(--iui-color-foreground-negative);
 }
-.iui-tile.iui-negative .iui-tile-status-icon{
-  fill:var(--iui-color-foreground-negative);
-}
 
 .iui-tile-thumbnail-type-indicator{
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
-  padding:0 2px;
-  height:27px;
-  gap:4px;
+  --_iui-button-text-color:var(--iui-color-foreground-2);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-gap:var(--iui-size-2xs);
+  --_iui-button-padding-block:0;
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-min-height:var(--iui-component-height-small);
+  --_iui-button-padding-inline:var(--iui-size-2xs);
   position:absolute;
   border-radius:50%;
-  top:6px;
-  left:8px;
-}
-.iui-tile-thumbnail-type-indicator > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
-}
-.iui-tile-thumbnail-type-indicator:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-tile-thumbnail-type-indicator.iui-active{
-  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:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-tile-thumbnail-type-indicator[disabled].iui-active, .iui-tile-thumbnail-type-indicator:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+  top:calc(var(--iui-size-s) * 0.5);
+  left:var(--iui-size-xs);
+}
+.iui-tile-thumbnail-type-indicator:where(:hover, :active){
+  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
+}
+.iui-tile-thumbnail-type-indicator:where(:focus){
+  outline-offset:-1px;
+  outline-width:1px;
+}
+.iui-tile-thumbnail-type-indicator:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+}
+.iui-tile-thumbnail-type-indicator[data-iui-active=true]{
+  --_iui-button-text-color:var(--iui-color-foreground-primary);
+  --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
+}
+.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
+  background-color:Hsl(0 0% 0%/var(--iui-opacity-4));
+  --_iui-button-text-color:var(--iui-color-foreground-accessory);
+}
+@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
+  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
+    background-color:Hsl(0 0% 0%/var(--iui-opacity-5));
+    -webkit-backdrop-filter:blur(5px);
+            backdrop-filter:blur(5px);
+  }
+}
+.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon{
+  filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
+}
+.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator[data-iui-active=true]:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator[data-iui-active=true]:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator[data-iui-active=true]:active{
+  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
 }
 
 .iui-tile-thumbnail-quick-action{
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
-  padding:0 2px;
-  height:27px;
-  gap:4px;
+  --_iui-button-text-color:var(--iui-color-foreground-2);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-gap:var(--iui-size-2xs);
+  --_iui-button-padding-block:0;
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-min-height:var(--iui-component-height-small);
+  --_iui-button-padding-inline:var(--iui-size-2xs);
   position:absolute;
   border-radius:50%;
-  top:6px;
-  right:8px;
-}
-.iui-tile-thumbnail-quick-action > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
-}
-.iui-tile-thumbnail-quick-action:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-tile-thumbnail-quick-action.iui-active{
-  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:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-tile-thumbnail-quick-action[disabled].iui-active, .iui-tile-thumbnail-quick-action:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+  top:calc(var(--iui-size-s) * 0.5);
+  right:var(--iui-size-xs);
+}
+.iui-tile-thumbnail-quick-action:where(:hover, :active){
+  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
+}
+.iui-tile-thumbnail-quick-action:where(:focus){
+  outline-offset:-1px;
+  outline-width:1px;
+}
+.iui-tile-thumbnail-quick-action:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+}
+.iui-tile-thumbnail-quick-action[data-iui-active=true]{
+  --_iui-button-text-color:var(--iui-color-foreground-primary);
+  --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
+}
+.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
+  background-color:Hsl(0 0% 0%/var(--iui-opacity-4));
+  --_iui-button-text-color:var(--iui-color-foreground-accessory);
+}
+@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
+  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
+    background-color:Hsl(0 0% 0%/var(--iui-opacity-5));
+    -webkit-backdrop-filter:blur(5px);
+            backdrop-filter:blur(5px);
+  }
+}
+.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
+  filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
+}
+.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action[data-iui-active=true]:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action[data-iui-active=true]:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action[data-iui-active=true]:active{
+  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
 }
 
 .iui-tile-thumbnail-badge-container{
   position:absolute;
-  bottom:6px;
-  width:calc(100% - 2 * 12px);
+  bottom:calc(var(--iui-size-s) * 0.5);
+  width:calc(100% - 2 * var(--iui-size-s));
   height:auto;
-  right:12px;
+  right:var(--iui-size-s);
   display:flex;
   justify-content:flex-end;
   overflow:hidden;
-}
-.iui-tile-thumbnail-badge-container > .iui-badge:not(:last-child){
-  margin-right:4px;
+  gap:var(--iui-size-2xs);
 }
 
 .iui-tile-buttons{
@@ -309,12 +327,13 @@
       -ms-user-select:none;
           user-select:none;
   white-space:nowrap;
+  overflow:hidden;
 }
 .iui-tile-buttons > .iui-button{
-  font-size:14px;
+  font-size:var(--iui-font-size-1);
   flex:1;
   height:auto;
-  padding:11px 12px;
+  padding:var(--iui-size-s) var(--iui-size-s);
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
@@ -324,58 +343,38 @@
   border-radius:0;
 }
 .iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
-  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 #c7ccd1;
   border-right:1px solid var(--iui-color-background-border);
 }
 
 .iui-tile-thumbnail{
+  box-sizing:content-box;
   width:100%;
-  height:154px;
+  height:calc(var(--iui-size-s) * 14);
   flex-shrink:0;
   overflow:hidden;
   position:relative;
   display:flex;
   align-items:center;
   justify-content:center;
-  background-color:#f2f2f2;
-  border-bottom:1px solid #c7ccd1;
-  background-color:var(--iui-color-background-1-overlay);
+  background-color:var(--iui-color-background-1-hover);
   border-bottom:1px solid var(--iui-color-background-border);
 }
 .iui-tile-thumbnail .iui-thumbnail-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:64px;
-  height:64px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-2xl);
+  height:var(--iui-size-2xl);
+  fill:var(--iui-color-foreground-4);
 }
 @media (forced-colors: active){
   .iui-tile-thumbnail .iui-thumbnail-icon{
     fill:CanvasText;
   }
 }
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
 
 .iui-tile-thumbnail-picture{
   width:100%;
@@ -386,7 +385,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tile-thumbnail-picture{
-    transition:transform 0.4s ease;
+    transition:transform var(--iui-duration-2) ease;
   }
 }
 div.iui-tile-thumbnail-picture{
@@ -395,61 +394,21 @@ div.iui-tile-thumbnail-picture{
 }
 
 .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
-  z-index:1;
   cursor:pointer;
-  fill:rgba(255, 255, 255, 0.6);
-  filter:drop-shadow(0 2px 1px rgba(0, 1, 5, 0.2));
-  fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
+  fill:rgba(255, 255, 255, var(--iui-opacity-3));
   filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
-    transition:fill 0.2s ease;
+    transition:fill var(--iui-duration-1) ease;
   }
 }
 .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
-  fill:rgba(255, 255, 255, 0.8);
-  fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-}
-@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
-  .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
-    background-color:rgba(0, 0, 0, var(--iui-opacity-5));
-    -webkit-backdrop-filter:blur(5px);
-            backdrop-filter:blur(5px);
-  }
-}
-.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: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)));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active,
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover,
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled,
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover,
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active{
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-}
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active .iui-button-icon,
-.iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover .iui-button-icon,
-.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:white;
-  fill:var(--iui-color-foreground-accessory);
+  fill:rgba(255, 255, 255, var(--iui-opacity-2));
 }
 
 .iui-tile-content{
-  padding:11px 12px;
+  padding:var(--iui-size-s) var(--iui-size-s);
   position:relative;
   display:flex;
   flex-direction:column;
@@ -460,43 +419,20 @@ div.iui-tile-thumbnail-picture{
   display:flex;
   flex-shrink:0;
   align-items:center;
-  font-size:16px;
+  font-size:var(--iui-font-size-2);
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  margin-bottom:5.5px;
-  color:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color);
+  margin-bottom:calc(var(--iui-size-s) * 0.5);
+  color:var(--iui-color-foreground-2);
 }
 .iui-tile-content .iui-tile-status-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-  margin-right:8px;
+  display:flex;
   flex-shrink:0;
-}
-@media (forced-colors: active){
-  .iui-tile-content .iui-tile-status-icon{
-    fill:CanvasText;
-  }
-}
-.iui-tile-content .iui-tile-status-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-tile-content .iui-tile-status-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tile-content .iui-tile-status-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-tile-content .iui-tile-status-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  margin-right:var(--iui-size-xs);
+  fill:var(--_iui-tile-status-icon-fill);
 }
 .iui-tile-content .iui-tile-name-label{
   overflow:hidden;
@@ -504,46 +440,37 @@ div.iui-tile-thumbnail-picture{
   text-overflow:ellipsis;
 }
 .iui-tile-content .iui-tile-description{
-  margin-bottom:11px;
-  font-size:14px;
+  margin-bottom:var(--iui-size-s);
+  font-size:var(--iui-font-size-1);
   height:100%;
-  max-height:66px;
+  max-height:calc(var(--iui-size-s) * 6);
   overflow:hidden;
-  white-space:nowrap;
   text-overflow:ellipsis;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-@supports (-webkit-line-clamp: 1){
-  .iui-tile-content .iui-tile-description{
-    white-space:unset;
-    display:-webkit-box;
-    -webkit-line-clamp:3;
-    -webkit-box-orient:vertical;
-  }
+  display:-webkit-box;
+  -webkit-line-clamp:3;
+  -webkit-box-orient:vertical;
+  color:var(--iui-color-foreground-4);
 }
 .iui-tile-content .iui-tile-metadata{
-  font-size:12px;
+  font-size:var(--iui-font-size-0);
   flex-shrink:0;
   overflow:hidden;
   text-overflow:ellipsis;
-  height:22px;
+  height:var(--iui-size-l);
   width:100%;
   display:flex;
   align-items:center;
   margin-top:auto;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-tile-content .iui-tile-metadata > svg,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-  margin-right:8px;
+  display:flex;
   flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  fill:var(--iui-color-foreground-4);
+  margin-right:var(--iui-size-xs);
 }
 @media (forced-colors: active){
   .iui-tile-content .iui-tile-metadata > svg,
@@ -551,26 +478,6 @@ div.iui-tile-thumbnail-picture{
     fill:CanvasText;
   }
 }
-.iui-tile-content .iui-tile-metadata > svg.iui-informational,
-.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
-  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: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:#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:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
 .iui-tile-content .iui-tile-metadata > *{
   white-space:nowrap;
   overflow:hidden;
@@ -579,8 +486,8 @@ div.iui-tile-thumbnail-picture{
 
 .iui-tile-more-options{
   position:absolute;
-  bottom:5.5px;
-  right:8px;
+  bottom:calc(var(--iui-size-s) * 0.5);
+  right:var(--iui-size-xs);
 }
 .iui-tile-more-options:not(.iui-visible){
   -webkit-clip-path:inset(50%);