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

package/css/tile.css

@@ -3,20 +3,22 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-tile{
+  --_iui-tile-title-text-color:var(--iui-color-foreground-2);
+  --_iui-tile-body-text-color:var(--iui-color-foreground-4);
   margin:0;
   padding:0;
   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);
-  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;
 }
@@ -25,6 +27,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;
@@ -38,42 +48,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{
+  --_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);
@@ -83,8 +97,16 @@
   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 var(--iui-color-background-border);
@@ -94,133 +116,125 @@
 }
 .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;
 }
-.iui-tile.iui-progress{
-  cursor:progress;
-  font-style:italic;
+.iui-tile.iui-loading, .iui-tile[aria-disabled=true]{
+  --_iui-tile-title-text-color:var(--iui-color-foreground-4);
 }
-.iui-tile[aria-disabled=true]{
-  cursor:not-allowed;
-}
-.iui-tile[aria-disabled=true] .iui-tile-name-label{
-  color:var(--iui-text-color-muted);
-}
-.iui-tile[aria-disabled=true] .iui-thumbnail-icon,
+.iui-tile.iui-loading .iui-thumbnail-icon,
+.iui-tile.iui-loading .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
 .iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
   filter:grayscale(100%);
 }
-.iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
+.iui-tile.iui-loading:hover .iui-tile-thumbnail-picture, .iui-tile.iui-loading:focus-within .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
   transform:none;
 }
-.iui-tile[aria-disabled=true] .iui-tile-more-options{
-  display:none;
+.iui-tile.iui-loading{
+  cursor:progress;
+  font-style:italic;
+}
+.iui-tile[aria-disabled=true]{
+  cursor:not-allowed;
+}
+.iui-tile.iui-positive{
+  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
+  --_iui-tile-title-text-color:var(--iui-color-foreground-positive);
 }
 .iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-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-tile.iui-positive::selection,
 .iui-tile.iui-positive *::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-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-title-text-color:var(--iui-color-foreground-warning);
 }
 .iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-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-tile.iui-warning::selection,
 .iui-tile.iui-warning *::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-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-title-text-color:var(--iui-color-foreground-negative);
 }
 .iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-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-tile.iui-negative::selection,
 .iui-tile.iui-negative *::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-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);
-}
-
-.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);
+  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-negative);
 }
 
 .iui-tile-thumbnail-type-indicator{
-  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-text-color:var(--iui-color-foreground-2);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-padding-inline:8px;
-  --_iui-button-gap:4px;
-  --_iui-button-height:27px;
-  --_iui-button-padding-inline:8px;
-  --_iui-button-padding-inline:2px;
+  --_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;
+  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-body);
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  --_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-text-color-placeholder);
+  --_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:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  --_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:rgba(0, 0, 0, var(--iui-opacity-4));
+  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:rgba(0, 0, 0, var(--iui-opacity-5));
+    background-color:Hsl(0 0% 0%/var(--iui-opacity-5));
     -webkit-backdrop-filter:blur(5px);
             backdrop-filter:blur(5px);
   }
@@ -233,47 +247,48 @@
 }
 
 .iui-tile-thumbnail-quick-action{
-  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-text-color:var(--iui-color-foreground-2);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-padding-inline:8px;
-  --_iui-button-gap:4px;
-  --_iui-button-height:27px;
-  --_iui-button-padding-inline:8px;
-  --_iui-button-padding-inline:2px;
+  --_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;
+  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-body);
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  --_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-text-color-placeholder);
+  --_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:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  --_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:rgba(0, 0, 0, var(--iui-opacity-4));
+  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:rgba(0, 0, 0, var(--iui-opacity-5));
+    background-color:Hsl(0 0% 0%/var(--iui-opacity-5));
     -webkit-backdrop-filter:blur(5px);
             backdrop-filter:blur(5px);
   }
@@ -287,14 +302,14 @@
 
 .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;
-  gap:4px;
+  gap:var(--iui-size-2xs);
 }
 
 .iui-tile-buttons{
@@ -305,12 +320,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;
@@ -330,33 +346,27 @@
 .iui-tile-thumbnail{
   box-sizing:content-box;
   width:100%;
-  height:154px;
+  height:calc(var(--iui-size-s) * 13);
   flex-shrink:0;
   overflow:hidden;
   position:relative;
   display:flex;
   align-items:center;
   justify-content:center;
-  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:var(--iui-icons-color);
-  display:inline-flex;
-  width:64px;
-  height:64px;
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
-  fill:var(--iui-icons-color-warning);
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-2xl);
+  height:var(--iui-size-2xl);
+  fill:var(--iui-color-foreground-4);
 }
-.iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
-  fill:var(--iui-icons-color-negative);
+@media (forced-colors: active){
+  .iui-tile-thumbnail .iui-thumbnail-icon{
+    fill:CanvasText;
+  }
 }
 
 .iui-tile-thumbnail-picture{
@@ -368,7 +378,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{
@@ -378,20 +388,16 @@ div.iui-tile-thumbnail-picture{
 
 .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
   cursor:pointer;
-  fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
+  transition:fill var(--iui-duration-1) ease;
+  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;
-  }
-}
 .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
-  fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2));
+  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;
@@ -402,32 +408,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:var(--iui-text-color);
+  margin-bottom:calc(var(--iui-size-s) * 0.5);
+  color:var(--_iui-tile-title-text-color);
 }
 .iui-tile-content .iui-tile-status-icon{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-  margin-right:8px;
+  display:flex;
   flex-shrink:0;
-}
-.iui-tile-content .iui-tile-status-icon.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-tile-content .iui-tile-status-icon.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-tile-content .iui-tile-status-icon.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-tile-content .iui-tile-status-icon.iui-negative{
-  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;
@@ -435,53 +429,43 @@ 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;
   text-overflow:ellipsis;
   display:-webkit-box;
   -webkit-line-clamp:3;
   -webkit-box-orient:vertical;
-  color:var(--iui-text-color-muted);
+  color:var(--_iui-tile-body-text-color);
 }
 .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:var(--iui-text-color-muted);
+  color:var(--_iui-tile-body-text-color);
 }
 .iui-tile-content .iui-tile-metadata > svg,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
-  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);
 }
-.iui-tile-content .iui-tile-metadata > svg.iui-informational,
-.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
-  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: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: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:var(--iui-icons-color-negative);
+@media (forced-colors: active){
+  .iui-tile-content .iui-tile-metadata > svg,
+.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
+    fill:CanvasText;
+  }
 }
 .iui-tile-content .iui-tile-metadata > *{
   white-space:nowrap;
@@ -491,8 +475,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%);