@itwin/itwinui-css 1.0.0-dev.5 → 1.0.0-dev.6

package/css/all.css

@@ -1722,7 +1722,8 @@ a.iui-breadcrumbs-text:focus{
   gap:var(--iui-size-xs);
 }
 .iui-checkbox-wrapper.iui-loading{
-  cursor:wait;
+  cursor:progress;
+  font-style:italic;
   color:var(--iui-color-foreground-4);
 }
 .iui-checkbox-wrapper > .iui-checkbox-label,
@@ -1809,6 +1810,7 @@ a.iui-breadcrumbs-text:focus{
   --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:transparent;
+  outline-width:1px;
 }
 .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
   --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
@@ -4541,7 +4543,8 @@ div.iui-header-breadcrumb-button-icon{
   gap:var(--iui-size-xs);
 }
 .iui-radio-wrapper.iui-loading{
-  cursor:wait;
+  cursor:progress;
+  font-style:italic;
   color:var(--iui-color-foreground-4);
 }
 .iui-radio-wrapper > .iui-checkbox-label,
@@ -4628,6 +4631,7 @@ div.iui-header-breadcrumb-button-icon{
   --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:transparent;
+  outline-width:1px;
 }
 .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
   --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
@@ -5930,14 +5934,11 @@ div.iui-header-breadcrumb-button-icon{
 .iui-table-body .iui-table-row > .iui-slot > .iui-table-more-options{
   opacity:0;
 }
-.iui-table-body .iui-table-row:where(:hover:not([aria-disabled="true"])) .iui-table-cell{
-  background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-table-body .iui-table-row:where(:hover:not([aria-disabled="true"])) > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
+.iui-table-body .iui-table-row:where(:hover, :focus-within) > .iui-slot > .iui-table-more-options{
   opacity:1;
 }
-.iui-table-body .iui-table-row:focus-within > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
-  opacity:1;
+.iui-table-body .iui-table-row:where(:hover:not(.iui-loading):not([aria-disabled="true"])) .iui-table-cell{
+  background-color:var(--iui-color-background-transparent-hover);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-table-body .iui-table-row .iui-table-row-expander > .iui-button-icon{
@@ -6021,14 +6022,13 @@ div.iui-header-breadcrumb-button-icon{
   font-size:var(--iui-font-size-4);
   color:var(--iui-color-foreground-positive);
 }
+.iui-table-body .iui-table-row.iui-loading,
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
-  font-style:italic;
-  cursor:not-allowed;
   color:var(--iui-color-foreground-4);
 }
-.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true].iui-slot:hover > .iui-table-more-options, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true].iui-slot:hover > .iui-table-more-options{
-  opacity:0;
-}
+.iui-table-body .iui-table-row.iui-loading img,
+.iui-table-body .iui-table-row.iui-loading svg:not(.iui-radial),
+.iui-table-body .iui-table-row.iui-loading .iui-avatar,
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] img,
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] svg:not(.iui-radial),
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] .iui-avatar, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] img,
@@ -6036,6 +6036,16 @@ div.iui-header-breadcrumb-button-icon{
 .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] .iui-avatar{
   filter:grayscale(100%);
 }
+.iui-table-body .iui-table-row.iui-loading{
+  font-style:italic;
+}
+.iui-table-body .iui-table-row.iui-loading,
+.iui-table-body .iui-table-row.iui-loading .iui-checkbox{
+  cursor:progress;
+}
+.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
+  cursor:not-allowed;
+}
 .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type,
 .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content{
   box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-positive);
@@ -7019,6 +7029,8 @@ a.iui-tag-basic:focus-visible{
   margin:0 0 var(--iui-size-l);
 }
 .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;
@@ -7134,28 +7146,27 @@ a.iui-tag-basic:focus-visible{
   margin-bottom:0;
   -webkit-line-clamp:2;
 }
-.iui-tile.iui-progress{
-  cursor:progress;
-  font-style:italic;
-}
-.iui-tile[aria-disabled=true]{
-  cursor:not-allowed;
-}
-.iui-tile[aria-disabled=true] .iui-tile-name-label{
-  color:var(--iui-color-foreground-4);
+.iui-tile.iui-loading, .iui-tile[aria-disabled=true]{
+  --_iui-tile-title-text-color:var(--iui-color-foreground-4);
 }
-.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:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
@@ -7171,11 +7182,9 @@ a.iui-tag-basic:focus-visible{
   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-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:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
@@ -7191,11 +7200,9 @@ a.iui-tag-basic:focus-visible{
   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-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:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
@@ -7211,10 +7218,6 @@ a.iui-tag-basic:focus-visible{
   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-thumbnail-type-indicator{
   --_iui-button-text-color:var(--iui-color-foreground-2);
   --_iui-button-background-color:transparent;
@@ -7436,7 +7439,7 @@ div.iui-tile-thumbnail-picture{
      -moz-user-select:all;
           user-select:all;
   margin-bottom:calc(var(--iui-size-s) * 0.5);
-  color:var(--iui-color-foreground-2);
+  color:var(--_iui-tile-title-text-color);
 }
 .iui-tile-content .iui-tile-status-icon{
   display:flex;
@@ -7461,7 +7464,7 @@ div.iui-tile-thumbnail-picture{
   display:-webkit-box;
   -webkit-line-clamp:3;
   -webkit-box-orient:vertical;
-  color:var(--iui-color-foreground-4);
+  color:var(--_iui-tile-body-text-color);
 }
 .iui-tile-content .iui-tile-metadata{
   font-size:var(--iui-font-size-0);
@@ -7473,7 +7476,7 @@ div.iui-tile-thumbnail-picture{
   display:flex;
   align-items:center;
   margin-top:auto;
-  color:var(--iui-color-foreground-4);
+  color:var(--_iui-tile-body-text-color);
 }
 .iui-tile-content .iui-tile-metadata > svg,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{

package/css/checkbox.css

@@ -44,7 +44,8 @@
   gap:var(--iui-size-xs);
 }
 .iui-checkbox-wrapper.iui-loading{
-  cursor:wait;
+  cursor:progress;
+  font-style:italic;
   color:var(--iui-color-foreground-4);
 }
 .iui-checkbox-wrapper > .iui-checkbox-label,
@@ -131,6 +132,7 @@
   --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:transparent;
+  outline-width:1px;
 }
 .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
   --_iui-checkbox-svg-color:var(--iui-color-foreground-2);

package/css/radio.css

@@ -45,7 +45,8 @@
   gap:var(--iui-size-xs);
 }
 .iui-radio-wrapper.iui-loading{
-  cursor:wait;
+  cursor:progress;
+  font-style:italic;
   color:var(--iui-color-foreground-4);
 }
 .iui-radio-wrapper > .iui-checkbox-label,
@@ -132,6 +133,7 @@
   --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:transparent;
+  outline-width:1px;
 }
 .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
   --_iui-checkbox-svg-color:var(--iui-color-foreground-2);

package/css/table.css

@@ -189,14 +189,11 @@
 .iui-table-body .iui-table-row > .iui-slot > .iui-table-more-options{
   opacity:0;
 }
-.iui-table-body .iui-table-row:where(:hover:not([aria-disabled="true"])) .iui-table-cell{
-  background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-table-body .iui-table-row:where(:hover:not([aria-disabled="true"])) > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
+.iui-table-body .iui-table-row:where(:hover, :focus-within) > .iui-slot > .iui-table-more-options{
   opacity:1;
 }
-.iui-table-body .iui-table-row:focus-within > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
-  opacity:1;
+.iui-table-body .iui-table-row:where(:hover:not(.iui-loading):not([aria-disabled="true"])) .iui-table-cell{
+  background-color:var(--iui-color-background-transparent-hover);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-table-body .iui-table-row .iui-table-row-expander > .iui-button-icon{
@@ -280,14 +277,13 @@
   font-size:var(--iui-font-size-4);
   color:var(--iui-color-foreground-positive);
 }
+.iui-table-body .iui-table-row.iui-loading,
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
-  font-style:italic;
-  cursor:not-allowed;
   color:var(--iui-color-foreground-4);
 }
-.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true].iui-slot:hover > .iui-table-more-options, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true].iui-slot:hover > .iui-table-more-options{
-  opacity:0;
-}
+.iui-table-body .iui-table-row.iui-loading img,
+.iui-table-body .iui-table-row.iui-loading svg:not(.iui-radial),
+.iui-table-body .iui-table-row.iui-loading .iui-avatar,
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] img,
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] svg:not(.iui-radial),
 .iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] .iui-avatar, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] img,
@@ -295,6 +291,16 @@
 .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] .iui-avatar{
   filter:grayscale(100%);
 }
+.iui-table-body .iui-table-row.iui-loading{
+  font-style:italic;
+}
+.iui-table-body .iui-table-row.iui-loading,
+.iui-table-body .iui-table-row.iui-loading .iui-checkbox{
+  cursor:progress;
+}
+.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
+  cursor:not-allowed;
+}
 .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type,
 .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content{
   box-shadow:inset var(--iui-size-3xs) 0 0 0 var(--iui-color-foreground-positive);

package/css/tile.css

@@ -3,6 +3,8 @@
  * 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;
@@ -118,28 +120,27 @@
   margin-bottom:0;
   -webkit-line-clamp:2;
 }
-.iui-tile.iui-progress{
-  cursor:progress;
-  font-style:italic;
-}
-.iui-tile[aria-disabled=true]{
-  cursor:not-allowed;
-}
-.iui-tile[aria-disabled=true] .iui-tile-name-label{
-  color:var(--iui-color-foreground-4);
+.iui-tile.iui-loading, .iui-tile[aria-disabled=true]{
+  --_iui-tile-title-text-color:var(--iui-color-foreground-4);
 }
-.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:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
@@ -155,11 +156,9 @@
   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-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:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
@@ -175,11 +174,9 @@
   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-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:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
@@ -195,10 +192,6 @@
   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-thumbnail-type-indicator{
   --_iui-button-text-color:var(--iui-color-foreground-2);
   --_iui-button-background-color:transparent;
@@ -420,7 +413,7 @@ div.iui-tile-thumbnail-picture{
      -moz-user-select:all;
           user-select:all;
   margin-bottom:calc(var(--iui-size-s) * 0.5);
-  color:var(--iui-color-foreground-2);
+  color:var(--_iui-tile-title-text-color);
 }
 .iui-tile-content .iui-tile-status-icon{
   display:flex;
@@ -445,7 +438,7 @@ div.iui-tile-thumbnail-picture{
   display:-webkit-box;
   -webkit-line-clamp:3;
   -webkit-box-orient:vertical;
-  color:var(--iui-color-foreground-4);
+  color:var(--_iui-tile-body-text-color);
 }
 .iui-tile-content .iui-tile-metadata{
   font-size:var(--iui-font-size-0);
@@ -457,7 +450,7 @@ div.iui-tile-thumbnail-picture{
   display:flex;
   align-items:center;
   margin-top:auto;
-  color:var(--iui-color-foreground-4);
+  color:var(--_iui-tile-body-text-color);
 }
 .iui-tile-content .iui-tile-metadata > svg,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "1.0.0-dev.5",
+  "version": "1.0.0-dev.6",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "css/all.css",