@itwin/itwinui-css 1.0.0-dev.12 → 1.0.0-dev.14

package/css/tabs.css

@@ -60,32 +60,35 @@
   min-height:calc(var(--iui-size-m) * 2.5);
   height:100%;
   cursor:pointer;
-  color:var(--iui-color-foreground-2);
+  color:var(--iui-color-text);
   transition:background-color var(--iui-duration-1) ease-out;
 }
 .iui-tabs .iui-tab.iui-active{
-  color:var(--iui-color-foreground-primary);
+  color:var(--iui-color-text-accent);
 }
 .iui-tabs .iui-tab.iui-active .iui-tab-icon{
-  fill:var(--iui-color-foreground-primary);
+  fill:currentColor;
 }
 .iui-tabs .iui-tab.iui-active .iui-tab-description{
-  opacity:var(--iui-opacity-1);
+  color:inherit;
 }
 .iui-tabs .iui-tab[disabled]{
   cursor:not-allowed;
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-disabled);
+}
+.iui-tabs .iui-tab[disabled] .iui-tab-description{
+  color:inherit;
 }
 .iui-tabs .iui-tab[disabled] .iui-tab-icon{
-  fill:var(--iui-color-foreground-5);
+  fill:var(--iui-color-icon-disabled);
 }
 .iui-tabs .iui-tab:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
+  outline:1px solid var(--iui-color-border-accent);
   outline-offset:-1px;
 }
 @supports not selector(*:focus-visible){
   .iui-tabs .iui-tab:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
@@ -94,7 +97,7 @@
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
-  fill:var(--iui-color-foreground-2);
+  fill:var(--iui-color-icon);
   transition:fill var(--iui-duration-1) ease-out;
 }
 .iui-tabs .iui-tab-icon + .iui-tab-label{
@@ -103,16 +106,16 @@
 .iui-tabs .iui-tab-description{
   display:none;
   font-size:var(--iui-font-size-0);
-  opacity:var(--iui-opacity-3);
+  color:var(--iui-color-text-muted);
 }
 .iui-tabs.iui-green .iui-tab:focus{
-  outline-color:var(--iui-color-foreground-positive);
+  outline-color:var(--iui-color-text-positive);
 }
 .iui-tabs.iui-green .iui-tab.iui-active{
-  color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-text-positive);
 }
 .iui-tabs.iui-green .iui-tab.iui-active .iui-tab-icon{
-  fill:var(--iui-color-foreground-positive);
+  fill:currentColor;
 }
 .iui-tabs ~ .iui-tabs-content{
   padding-top:var(--iui-size-s);
@@ -121,7 +124,7 @@
 .iui-tabs.iui-default .iui-tab::after{
   content:"";
   position:absolute;
-  background-color:var(--iui-color-foreground-primary);
+  background-color:var(--iui-color-border-accent);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tabs.iui-default .iui-active::after{
@@ -129,25 +132,25 @@
   }
 }
 .iui-tabs.iui-default.iui-green .iui-tab::after{
-  background-color:var(--iui-color-foreground-positive);
+  background-color:var(--iui-color-border-positive);
 }
 .iui-tabs.iui-default .iui-tab{
   padding:var(--iui-size-2xs) var(--iui-size-m);
-  background-color:var(--iui-color-background-2);
-  border:1px solid var(--iui-color-background-5);
+  background-color:var(--iui-color-background-backdrop);
+  border:1px solid var(--iui-color-border);
 }
 .iui-tabs.iui-default .iui-tab::after{
   top:0;
   left:0;
 }
 .iui-tabs.iui-default .iui-tab:hover{
-  background-color:var(--iui-color-background-1);
+  background-color:var(--iui-color-background);
 }
 .iui-tabs.iui-default .iui-tab.iui-active{
-  background-color:var(--iui-color-background-1);
+  background-color:var(--iui-color-background);
 }
 .iui-tabs.iui-default .iui-tab[disabled]{
-  background-color:var(--iui-color-background-3);
+  background-color:var(--iui-color-background-disabled);
 }
 .iui-tabs.iui-default .iui-tab:focus{
   outline-width:2px;
@@ -186,13 +189,13 @@
   display:-webkit-box;
 }
 .iui-tabs.iui-default.iui-green .iui-tab::after{
-  background-color:var(--iui-color-foreground-positive);
+  background-color:var(--iui-color-border-positive);
 }
 .iui-tabs.iui-default ~ .iui-tabs-content{
   padding-left:var(--iui-size-m);
   padding-right:var(--iui-size-m);
-  background-color:var(--iui-color-background-1);
-  border:1px solid var(--iui-color-background-5);
+  background-color:var(--iui-color-background);
+  border:1px solid var(--iui-color-border);
 }
 .iui-tabs.iui-borderless .iui-tab{
   padding-block:var(--iui-size-2xs);
@@ -207,22 +210,22 @@
   background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-tabs.iui-borderless .iui-tab.iui-active{
-  background-color:var(--iui-color-background-subtle-primary);
+  background-color:var(--iui-color-background-accent-muted);
 }
 .iui-horizontal .iui-tabs.iui-borderless ~ .iui-tabs-content{
   margin-top:calc(0px - var(--iui-size-3xs));
-  border-top:var(--iui-size-3xs) solid var(--iui-color-background-4);
+  border-top:var(--iui-size-3xs) solid var(--iui-color-border);
 }
 
 .iui-vertical .iui-tabs.iui-borderless ~ .iui-tabs-content{
   margin-left:calc(0px - var(--iui-size-3xs));
   padding-left:var(--iui-size-s);
   padding-right:var(--iui-size-s);
-  border-left:var(--iui-size-3xs) solid var(--iui-color-background-4);
+  border-left:var(--iui-size-3xs) solid var(--iui-color-border);
 }
 
 .iui-tabs.iui-borderless.iui-green .iui-active{
-  background-color:var(--iui-color-background-subtle-positive);
+  background-color:var(--iui-color-background-positive-muted);
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab{
   min-height:calc(var(--iui-size-m) * 3.5);
@@ -244,7 +247,7 @@
   background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-tabs.iui-pill.iui-green .iui-tab.iui-active:hover{
-  background-color:var(--iui-color-background-subtle-positive);
+  background-color:var(--iui-color-background-positive-muted);
 }
 .iui-tabs.iui-pill .iui-tab{
   padding:var(--iui-size-2xs);
@@ -261,7 +264,7 @@
   background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-tabs.iui-pill .iui-tab.iui-active:hover{
-  background-color:var(--iui-color-background-subtle-primary);
+  background-color:var(--iui-color-background-accent-muted);
 }
 .iui-tabs.iui-pill .iui-tab[disabled]:hover{
   background-color:transparent;
@@ -269,10 +272,10 @@
 .iui-tabs.iui-animated::after{
   position:absolute;
   content:" ";
-  background-color:var(--iui-color-foreground-primary);
+  background-color:var(--iui-color-border-accent);
 }
 .iui-tabs.iui-animated.iui-green::after{
-  background-color:var(--iui-color-foreground-positive);
+  background-color:var(--iui-color-border-positive);
 }
 .iui-horizontal .iui-tabs.iui-animated::after{
   top:calc(100% - var(--iui-size-3xs));
@@ -301,7 +304,7 @@
 .iui-tabs.iui-not-animated .iui-tab::after{
   content:"";
   position:absolute;
-  background-color:var(--iui-color-foreground-primary);
+  background-color:var(--iui-color-border-accent);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tabs.iui-not-animated .iui-active::after{
@@ -309,7 +312,7 @@
   }
 }
 .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
-  background-color:var(--iui-color-foreground-positive);
+  background-color:var(--iui-color-border-positive);
 }
 
 .iui-tab-label{

package/css/tag.css

@@ -18,12 +18,12 @@
   text-transform:none;
   cursor:default;
   -webkit-tap-highlight-color:transparent;
-  border:1px solid var(--iui-color-foreground-4);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-color-foreground-2);
+  border:1px solid var(--iui-color-border-foreground);
+  background-color:var(--iui-color-background);
+  color:var(--iui-color-text);
 }
 .iui-tag:hover{
-  border-color:var(--iui-color-foreground-1);
+  border-color:var(--iui-color-border-foreground-hover);
 }
 
 .iui-tag-basic{
@@ -34,7 +34,7 @@
   display:inline-flex;
 }
 .iui-tag-basic:not(a){
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }
 
 .iui-tag-label{
@@ -59,24 +59,24 @@
 }
 
 a.iui-tag-basic{
-  color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
+  color:var(--iui-color-text-accent);
+  -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
   border-radius:var(--iui-border-radius-1);
   cursor:pointer;
   text-decoration:none;
 }
 a.iui-tag-basic:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
+  outline:1px solid var(--iui-color-text-accent);
   outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
   a.iui-tag-basic:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-text-accent);
     outline-offset:1px;
   }
 }
 a.iui-tag-basic:hover{
-  color:var(--iui-color-foreground-primary-hover);
+  color:var(--iui-color-text-accent-hover);
 }
 a.iui-tag-basic:hover{
   text-decoration:underline;
@@ -89,33 +89,25 @@ a.iui-tag-basic:hover{
     text-decoration:none;
   }
 }
-.iui-theme-light a.iui-tag-basic, .iui-theme-dark a.iui-tag-basic{
-  text-decoration:none;
-}
-.iui-theme-light a.iui-tag-basic:hover, .iui-theme-dark a.iui-tag-basic:hover{
-  text-decoration:underline;
-}
-
-.iui-theme-light-hc a.iui-tag-basic, .iui-theme-dark-hc a.iui-tag-basic{
+[data-iui-contrast=high] a.iui-tag-basic{
   text-decoration:underline;
 }
-.iui-theme-light-hc a.iui-tag-basic:hover, .iui-theme-dark-hc a.iui-tag-basic:hover{
+[data-iui-contrast=high] a.iui-tag-basic:hover{
   text-decoration:none;
 }
-
 a.iui-tag-basic:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
+  outline:1px solid var(--iui-color-border-accent);
   outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
   a.iui-tag-basic:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:1px;
   }
 }
 
 .iui-tag-container{
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }
 .iui-tag-container > a.iui-tag-basic{
   margin:var(--iui-size-3xs);
@@ -140,5 +132,5 @@ a.iui-tag-basic:focus-visible{
 .iui-tag-container.iui-visible{
   border-radius:var(--iui-border-radius-1);
   padding:var(--iui-size-2xs) var(--iui-size-s);
-  background-color:var(--iui-color-background-3);
+  background-color:var(--iui-color-background);
 }

package/css/text.css

@@ -63,7 +63,7 @@
 }
 
 .iui-text-muted{
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }
 
 .iui-skeleton{
@@ -75,7 +75,7 @@
   color:transparent;
   border-radius:var(--iui-border-radius-1);
   cursor:progress;
-  background:linear-gradient(292deg, var(--iui-color-foreground-4), var(--iui-color-foreground-4), var(--iui-color-foreground-5), var(--iui-color-foreground-4), var(--iui-color-foreground-4));
+  background:linear-gradient(292deg, var(--iui-color-icon-muted), var(--iui-color-icon-muted), var(--iui-color-icon-disabled), var(--iui-color-icon-muted), var(--iui-color-icon-muted));
   background-size:200% 100%;
 }
 @media (forced-colors: active){

package/css/tile.css

@@ -3,30 +3,27 @@
  * 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);
+  --_iui-tile-title-text-color:var(--iui-color-text);
+  --_iui-tile-body-text-color:var(--iui-color-text-muted);
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
-  --iui-surface-background-color:var(--iui-color-background-1);
+  --iui-surface-background-color:var(--iui-color-background);
+  --iui-surface-border-color:var(--iui-color-border-subtle);
   --iui-surface-border-radius:var(--iui-border-radius-1);
   --iui-surface-elevation:var(--iui-shadow-1);
   background-color:var(--iui-surface-background-color);
+  border:1px solid var(--iui-surface-border-color);
   border-radius:var(--iui-surface-border-radius);
   box-shadow:var(--iui-surface-elevation);
-  color:var(--iui-color-foreground-2);
+  color:var(--iui-color-text);
   display:inline-flex;
   flex-direction:column;
   width:calc(var(--iui-size-3xl) * 3);
   -webkit-backface-visibility:hidden;
           backface-visibility:hidden;
 }
-@media (forced-colors: active){
-  .iui-tile{
-    border:1px solid transparent;
-  }
-}
 .iui-tile:where(:not(.iui-folder)) > :where(:first-child){
   border-top-left-radius:inherit;
   border-top-right-radius:inherit;
@@ -51,24 +48,24 @@
   width:calc(100% - var(--iui-size-xl));
 }
 .iui-tile.iui-new{
-  --_iui-tile-status-icon-fill:var(--iui-color-foreground-positive);
+  --_iui-tile-status-icon-fill:var(--iui-color-icon-positive);
 }
 .iui-tile.iui-new .iui-tile-name,
 .iui-tile.iui-new .iui-tile-description{
   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-color:var(--iui-color-background-subtle-primary);
+  --_iui-tile-status-icon-fill:var(--iui-color-icon-accent);
+  outline:solid 2px var(--iui-color-border-accent);
+  background-color:var(--iui-color-background-accent-muted);
 }
 .iui-tile.iui-selected:focus-visible{
-  outline:var(--iui-size-2xs) solid var(--iui-color-foreground-primary);
+  outline:var(--iui-size-2xs) solid var(--iui-color-border-accent);
   outline-offset:0;
 }
 @supports not selector(*:focus-visible){
   .iui-tile.iui-selected:focus{
-    outline:var(--iui-size-2xs) solid var(--iui-color-foreground-primary);
+    outline:var(--iui-size-2xs) solid var(--iui-color-border-accent);
     outline-offset:0;
   }
 }
@@ -77,12 +74,12 @@
   transition:box-shadow var(--iui-duration-1) ease-in-out;
 }
 .iui-tile.iui-actionable:focus-visible{
-  outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
+  outline:var(--iui-size-3xs) solid var(--iui-color-border-accent);
   outline-offset:var(--iui-size-3xs);
 }
 @supports not selector(*:focus-visible){
   .iui-tile.iui-actionable:focus{
-    outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
+    outline:var(--iui-size-3xs) solid var(--iui-color-border-accent);
     outline-offset:var(--iui-size-3xs);
   }
 }
@@ -109,7 +106,7 @@
   height:calc(var(--iui-size-s) * 10);
   flex:1;
   border-bottom:none;
-  border-right:1px solid var(--iui-color-background-border);
+  border-right:1px solid var(--iui-color-border);
 }
 .iui-tile.iui-folder .iui-tile-content{
   flex:2;
@@ -121,13 +118,19 @@
   -webkit-line-clamp:2;
 }
 .iui-tile.iui-loading, .iui-tile[aria-disabled=true]{
-  --_iui-tile-title-text-color:var(--iui-color-foreground-4);
+  --_iui-tile-title-text-color:var(--iui-color-text-disabled);
+  --_iui-tile-body-text-color:var(--iui-color-text-disabled);
 }
 .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.iui-loading .iui-tag-container,
+.iui-tile.iui-loading .iui-tag-basic, .iui-tile[aria-disabled=true] .iui-tag-container,
+.iui-tile[aria-disabled=true] .iui-tag-basic{
+  color:inherit;
+}
 .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;
 }
@@ -139,63 +142,64 @@
   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-status-icon-fill:var(--iui-color-icon-positive);
+  --_iui-tile-title-text-color:var(--iui-color-text-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));
+  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-tile.iui-positive::selection,
 .iui-tile.iui-positive *::selection{
-  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-tile.iui-positive .iui-tile-thumbnail{
-  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-positive);
+  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-border-positive);
 }
 .iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{
-  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-positive);
+  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-border-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-status-icon-fill:var(--iui-color-icon-warning);
+  --_iui-tile-title-text-color:var(--iui-color-text-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));
+  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-tile.iui-warning::selection,
 .iui-tile.iui-warning *::selection{
-  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-tile.iui-warning .iui-tile-thumbnail{
-  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-warning);
+  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-border-warning);
 }
 .iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{
-  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-warning);
+  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-border-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-status-icon-fill:var(--iui-color-icon-negative);
+  --_iui-tile-title-text-color:var(--iui-color-text-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));
+  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-tile.iui-negative::selection,
 .iui-tile.iui-negative *::selection{
-  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-tile.iui-negative .iui-tile-thumbnail{
-  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-foreground-negative);
+  box-shadow:0 var(--iui-size-2xs) 0 var(--iui-color-border-negative);
 }
 .iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{
-  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-foreground-negative);
+  box-shadow:var(--iui-size-2xs) 0 0 var(--iui-color-border-negative);
 }
 
 .iui-tile-thumbnail-type-indicator{
-  --_iui-button-text-color:var(--iui-color-foreground-2);
+  --_iui-button-text-color:var(--iui-color-text);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
+  --_iui-button-icon-fill:var(--iui-color-icon);
   --_iui-button-gap:var(--iui-size-xs);
   --_iui-button-padding-block:var(--iui-size-2xs);
   --_iui-button-padding-inline:var(--iui-size-m);
@@ -212,25 +216,27 @@
   left:var(--iui-size-xs);
 }
 .iui-tile-thumbnail-type-indicator:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-text-color:var(--iui-color-text-hover);
   --_iui-button-background-color:var(--iui-color-background-transparent-hover);
+  --_iui-button-icon-fill:var(--iui-color-icon-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-text-color:var(--iui-color-text-disabled);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
+  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
 }
 .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-button-text-color:var(--iui-color-text-accent);
+  --_iui-button-background-color:hsl(var(--iui-color-accent-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);
+  --_iui-button-icon-fill:var(--iui-color-white);
 }
 @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
   .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
@@ -247,9 +253,10 @@
 }
 
 .iui-tile-thumbnail-quick-action{
-  --_iui-button-text-color:var(--iui-color-foreground-2);
+  --_iui-button-text-color:var(--iui-color-text);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
+  --_iui-button-icon-fill:var(--iui-color-icon);
   --_iui-button-gap:var(--iui-size-xs);
   --_iui-button-padding-block:var(--iui-size-2xs);
   --_iui-button-padding-inline:var(--iui-size-m);
@@ -266,25 +273,27 @@
   right:var(--iui-size-xs);
 }
 .iui-tile-thumbnail-quick-action:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-text-color:var(--iui-color-text-hover);
   --_iui-button-background-color:var(--iui-color-background-transparent-hover);
+  --_iui-button-icon-fill:var(--iui-color-icon-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-text-color:var(--iui-color-text-disabled);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
+  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
 }
 .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-button-text-color:var(--iui-color-text-accent);
+  --_iui-button-background-color:hsl(var(--iui-color-accent-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);
+  --_iui-button-icon-fill:var(--iui-color-white);
 }
 @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
   .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
@@ -336,11 +345,11 @@
   border-radius:0;
 }
 .iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
-  border-top:1px solid var(--iui-color-background-border);
-  border-color:var(--iui-color-background-border);
+  border-top:1px solid var(--iui-color-border);
+  border-color:var(--iui-color-border);
 }
 .iui-tile-buttons > button:not(:last-child){
-  border-right:1px solid var(--iui-color-background-border);
+  border-right:1px solid var(--iui-color-border);
 }
 
 .iui-tile-thumbnail{
@@ -353,15 +362,15 @@
   display:flex;
   align-items:center;
   justify-content:center;
-  background-color:var(--iui-color-background-1-hover);
-  border-bottom:1px solid var(--iui-color-background-border);
+  background-color:var(--iui-color-background-zebra);
+  border-bottom:1px solid var(--iui-color-border);
 }
 .iui-tile-thumbnail .iui-thumbnail-icon{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-2xl);
   height:var(--iui-size-2xl);
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
 }
 @media (forced-colors: active){
   .iui-tile-thumbnail .iui-thumbnail-icon{
@@ -458,15 +467,9 @@ div.iui-tile-thumbnail-picture{
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
   margin-right:var(--iui-size-xs);
 }
-@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;
   overflow:hidden;