@itwin/itwinui-css 0.63.0 → 1.0.0-dev.1

package/css/tile.css

@@ -13,7 +13,6 @@
   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);
   display:inline-flex;
   flex-direction:column;
@@ -41,13 +40,15 @@
 .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
   width:calc(100% - 32px);
 }
+.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;
 }
 .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));
 }
@@ -87,10 +88,9 @@
   flex-wrap:nowrap;
 }
 .iui-tile.iui-folder .iui-tile-thumbnail{
-  height:110px;
+  height:120px;
   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 +98,7 @@
 }
 .iui-tile.iui-folder .iui-tile-description{
   height:100%;
-  max-height:44px;
+  max-height:48px;
   margin-bottom:0;
   -webkit-line-clamp:2;
 }
@@ -122,13 +122,14 @@
 .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));
 }
 .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));
 }
 .iui-tile.iui-positive .iui-tile-thumbnail{
@@ -141,16 +142,14 @@
 .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));
 }
 .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));
 }
 .iui-tile.iui-warning .iui-tile-thumbnail{
@@ -163,16 +162,14 @@
 .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));
 }
 .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));
 }
 .iui-tile.iui-negative .iui-tile-thumbnail{
@@ -185,106 +182,111 @@
 .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-text-color);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-icon-margin-x:4px;
+  --_iui-button-gap:8px;
+  --_iui-button-height:40px;
+  --_iui-button-padding-inline:16px;
+  --_iui-button-padding-inline:8px;
+  --_iui-button-gap:4px;
+  --_iui-button-height:28px;
+  --_iui-button-padding-inline:8px;
+  --_iui-button-padding-inline:2px;
   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: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-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:where(:focus){
+  outline-offset:-1px;
+  outline-width:1px;
 }
-.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:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-text-color-placeholder);
+  --_iui-button-background-color:transparent;
+  --_iui-button-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);
+.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-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
+  background-color:rgba(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));
+    -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-text-color);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-icon-margin-x:4px;
+  --_iui-button-gap:8px;
+  --_iui-button-height:40px;
+  --_iui-button-padding-inline:16px;
+  --_iui-button-padding-inline:8px;
+  --_iui-button-gap:4px;
+  --_iui-button-height:28px;
+  --_iui-button-padding-inline:8px;
+  --_iui-button-padding-inline:2px;
   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: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-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:where(:focus){
+  outline-offset:-1px;
+  outline-width:1px;
 }
-.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:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-text-color-placeholder);
+  --_iui-button-background-color:transparent;
+  --_iui-button-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);
+.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-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
+  background-color:rgba(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));
+    -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{
@@ -296,9 +298,7 @@
   display:flex;
   justify-content:flex-end;
   overflow:hidden;
-}
-.iui-tile-thumbnail-badge-container > .iui-badge:not(:last-child){
-  margin-right:4px;
+  gap:4px;
 }
 
 .iui-tile-buttons{
@@ -314,7 +314,7 @@
   font-size:14px;
   flex:1;
   height:auto;
-  padding:11px 12px;
+  padding:12px 12px;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
@@ -324,58 +324,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:168px;
   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);
   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;
+  display:flex;
+  flex-shrink:0;
   width:64px;
   height:64px;
+  fill:var(--iui-icon-color);
 }
 @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%;
@@ -395,10 +375,7 @@ 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));
   filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
 }
@@ -408,48 +385,11 @@ div.iui-tile-thumbnail-picture{
   }
 }
 .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);
-}
 
 .iui-tile-content{
-  padding:11px 12px;
+  padding:12px 12px;
   position:relative;
   display:flex;
   flex-direction:column;
@@ -464,39 +404,16 @@ div.iui-tile-thumbnail-picture{
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  margin-bottom:5.5px;
-  color:rgba(0, 0, 0, 0.8);
+  margin-bottom:6px;
   color:var(--iui-text-color);
 }
 .iui-tile-content .iui-tile-status-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
   margin-right:8px;
-  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);
+  fill:var(--_iui-tile-status-icon-fill);
 }
 .iui-tile-content .iui-tile-name-label{
   overflow:hidden;
@@ -504,46 +421,37 @@ div.iui-tile-thumbnail-picture{
   text-overflow:ellipsis;
 }
 .iui-tile-content .iui-tile-description{
-  margin-bottom:11px;
+  margin-bottom:12px;
   font-size:14px;
   height:100%;
-  max-height:66px;
+  max-height:72px;
   overflow:hidden;
-  white-space:nowrap;
   text-overflow:ellipsis;
-  color:rgba(0, 0, 0, 0.4);
+  display:-webkit-box;
+  -webkit-line-clamp:3;
+  -webkit-box-orient:vertical;
   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;
-  }
-}
 .iui-tile-content .iui-tile-metadata{
   font-size:12px;
   flex-shrink:0;
   overflow:hidden;
   text-overflow:ellipsis;
-  height:22px;
+  height:24px;
   width:100%;
   display:flex;
   align-items:center;
   margin-top:auto;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .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;
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
+  fill:var(--iui-icon-color);
   margin-right:8px;
-  flex-shrink:0;
 }
 @media (forced-colors: active){
   .iui-tile-content .iui-tile-metadata > svg,
@@ -551,26 +459,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,7 +467,7 @@ div.iui-tile-thumbnail-picture{
 
 .iui-tile-more-options{
   position:absolute;
-  bottom:5.5px;
+  bottom:6px;
   right:8px;
 }
 .iui-tile-more-options:not(.iui-visible){

package/css/time-picker.css

@@ -12,13 +12,11 @@
       -ms-user-select:none;
           user-select:none;
   text-align:center;
-  height:286px;
+  height:312px;
   display:inline-flex;
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-time-picker:not(:first-child){
-  border-left:1px solid #c7ccd1;
   border-left:1px solid var(--iui-color-background-border);
 }
 .iui-time-picker:first-child{
@@ -26,13 +24,12 @@
 }
 
 .iui-time{
-  padding:11px 8px;
+  padding:12px 8px;
   overflow-y:auto;
   overflow-y:overlay;
   scrollbar-width:none;
 }
 .iui-time:not(:first-child){
-  border-left:1px solid #c7ccd1;
   border-left:1px solid var(--iui-color-background-border);
 }
 .iui-time > ol{
@@ -58,16 +55,12 @@
 }
 .iui-time > ol > li:hover{
   cursor:pointer;
-  color:#008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
   color:var(--iui-color-foreground-primary);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-time > ol > li.iui-selected{
   font-weight:600;
   cursor:default;
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
 }
@@ -83,7 +76,7 @@
 }
 
 .iui-period{
-  padding:11px 8px;
+  padding:12px 8px;
   overflow-y:auto;
   overflow-y:overlay;
   scrollbar-width:none;
@@ -91,7 +84,6 @@
   align-items:center;
 }
 .iui-period:not(:first-child){
-  border-left:1px solid #c7ccd1;
   border-left:1px solid var(--iui-color-background-border);
 }
 .iui-period > ol{
@@ -117,16 +109,12 @@
 }
 .iui-period > ol > li:hover{
   cursor:pointer;
-  color:#008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
   color:var(--iui-color-foreground-primary);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-period > ol > li.iui-selected{
   font-weight:600;
   cursor:default;
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
 }