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

package/css/stepper.css

@@ -5,7 +5,7 @@
 .iui-stepper{
   display:flex;
   flex-direction:column;
-  row-gap:5.5px;
+  row-gap:6px;
 }
 .iui-stepper > ol{
   margin:0;
@@ -35,7 +35,7 @@
   vertical-align:baseline;
   font-size:12px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
   color:var(--_iui-stepper-step-text-color);
 }
 .iui-stepper-step:first-of-type{
@@ -56,10 +56,10 @@
   --_iui-stepper-step-border-color:var(--iui-color-background-border);
   --_iui-stepper-step-number-color:var(--iui-text-color-muted);
   --_iui-stepper-step-text-color:var(--iui-text-color-muted);
-  --_iui-stepper-step-track-before-color:var(--iui-color-background-5);
+  --_iui-stepper-step-track-before-color:var(--iui-color-background-border);
 }
 .iui-stepper-step.iui-current ~ .iui-stepper-step:not(:last-of-type){
-  --_iui-stepper-step-track-after-color:var(--iui-color-background-5);
+  --_iui-stepper-step-track-after-color:var(--iui-color-background-border);
 }
 .iui-stepper-step.iui-clickable:focus{
   outline:0;

package/css/table.css

@@ -11,8 +11,8 @@
   display:flex;
   flex-direction:column;
   isolation:isolate;
-  --_iui-table-header-size:55px;
-  --_iui-table-row-size:57px;
+  --_iui-table-header-size:60px;
+  --_iui-table-row-size:62px;
 }
 .iui-table .iui-table-cell-end-icon,
 .iui-table .iui-table-cell-start-icon{
@@ -24,6 +24,7 @@
 .iui-table .iui-table-cell-end-icon svg:not(.iui-radial),
 .iui-table .iui-table-cell-start-icon svg:not(.iui-radial){
   display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
 }
@@ -37,15 +38,15 @@
   margin-left:auto;
 }
 .iui-table[data-iui-size=condensed]{
-  --_iui-table-header-size:44px;
-  --_iui-table-row-size:46px;
+  --_iui-table-header-size:48px;
+  --_iui-table-row-size:50px;
 }
 .iui-table[data-iui-size=extra-condensed]{
-  --_iui-table-header-size:33px;
-  --_iui-table-row-size:35px;
+  --_iui-table-header-size:36px;
+  --_iui-table-row-size:38px;
 }
 .iui-table[data-iui-size=extra-condensed] .iui-table-header .iui-table-cell{
-  padding-block:2.75px;
+  padding-block:3px;
 }
 .iui-table .iui-table-header .iui-table-cell,
 .iui-table .iui-table-paginator{
@@ -81,7 +82,7 @@
 .iui-table-header .iui-table-cell:not(.iui-slot){
   -moz-column-gap:4px;
        column-gap:4px;
-  padding-block:5.5px;
+  padding-block:6px;
 }
 .iui-table-header .iui-table-cell:not(.iui-slot):focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -155,14 +156,13 @@
 }
 .iui-table-header .iui-table-sort{
   visibility:hidden;
-  fill:var(--iui-icons-color);
 }
 .iui-table-header .iui-sorted{
   background-color:var(--iui-color-background-4);
 }
 .iui-table-header .iui-sorted .iui-table-sort{
   visibility:visible;
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 
 .iui-table-row{
@@ -291,7 +291,7 @@
 }
 .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 2px 0 0 0 var(--iui-icons-color-positive);
+  box-shadow:inset 2px 0 0 0 var(--iui-icon-color-positive);
 }
 .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type *::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
@@ -303,11 +303,11 @@
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell-end-icon svg{
-  fill:var(--iui-icons-color-positive);
+  fill:var(--iui-icon-color-positive);
 }
 .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type,
 .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content{
-  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-warning);
+  box-shadow:inset 2px 0 0 0 var(--iui-icon-color-warning);
 }
 .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type *::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
@@ -319,11 +319,11 @@
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
 .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell-end-icon svg{
-  fill:var(--iui-icons-color-warning);
+  fill:var(--iui-icon-color-warning);
 }
 .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type,
 .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content{
-  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-negative);
+  box-shadow:inset 2px 0 0 0 var(--iui-icon-color-negative);
 }
 .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type *::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
@@ -335,7 +335,7 @@
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
 .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell-end-icon svg{
-  fill:var(--iui-icons-color-negative);
+  fill:var(--iui-icon-color-negative);
 }
 
 .iui-table-header-actions-container{
@@ -370,7 +370,7 @@
   scroll-snap-align:start none;
 }
 .iui-table-body.iui-zebra-striping .iui-table-row:nth-child(even):not([aria-selected=true]) .iui-table-cell{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02);
+  background:linear-gradient(rgba(var(--iui-color-foreground-body-rgb), 0.02), rgba(var(--iui-color-foreground-body-rgb), 0.02)), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
 .iui-table-body > .iui-table-empty{
   text-align:center;
@@ -535,11 +535,11 @@
   display:flex;
   justify-content:center;
   align-items:center;
-  width:38px;
+  width:40px;
   color:var(--iui-text-color-muted);
 }
 .iui-table-paginator-ellipsis-small{
-  width:27px;
+  width:28px;
 }
 
 .iui-table-paginator-pages-group{
@@ -560,7 +560,7 @@
   justify-content:center;
   position:relative;
   border-radius:4px;
-  line-height:22px;
+  line-height:24px;
   font-size:14px;
   font-weight:400;
   -webkit-user-select:none;
@@ -579,17 +579,17 @@
   -webkit-tap-highlight-color:transparent;
   text-decoration:none;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-text-color:var(--iui-text-color);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
+  --_iui-button-icon-margin-x:4px;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-padding-inline:8px;
-  width:38px;
+  width:40px;
 }
 .iui-table-paginator-page-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -616,9 +616,9 @@
 }
 .iui-table-paginator-page-button-small{
   --_iui-button-gap:4px;
-  --_iui-button-height:27px;
+  --_iui-button-height:28px;
   --_iui-button-padding-inline:8px;
-  width:27px;
+  width:28px;
 }
 .iui-table-paginator-page-button[data-iui-active=true]{
   --_iui-button-active-stripe-inset:initial;
@@ -657,7 +657,7 @@
   border-radius:var(--iui-surface-border-radius);
   box-shadow:var(--iui-surface-elevation);
   color:var(--iui-text-color);
-  padding:11px 12px;
+  padding:12px 12px;
   display:inline-flex;
   flex-direction:column;
   align-items:flex-end;
@@ -672,7 +672,7 @@
 }
 .iui-table-column-filter > .iui-input-container,
 .iui-table-column-filter > .iui-input{
-  margin-bottom:11px;
+  margin-bottom:12px;
 }
 .iui-table-column-filter > .iui-button-bar{
   display:flex;

package/css/tabs.css

@@ -57,7 +57,7 @@
   display:flex;
   align-items:center;
   font-size:14px;
-  min-height:38px;
+  min-height:40px;
   height:100%;
   cursor:pointer;
   color:var(--iui-text-color);
@@ -67,7 +67,7 @@
   color:var(--iui-color-foreground-primary);
 }
 .iui-tabs .iui-tab.iui-active .iui-tab-icon{
-  fill:var(--iui-icons-color-primary);
+  fill:var(--iui-icon-color-primary);
 }
 .iui-tabs .iui-tab.iui-active .iui-tab-description{
   opacity:var(--iui-opacity-1);
@@ -77,7 +77,7 @@
   color:var(--iui-text-color-muted);
 }
 .iui-tabs .iui-tab[disabled] .iui-tab-icon{
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-icon-color-actionable-disabled);
 }
 .iui-tabs .iui-tab:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -90,10 +90,11 @@
   }
 }
 .iui-tabs .iui-tab-icon{
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
-  flex-shrink:0;
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
   transition:fill 0.2s ease-out;
 }
 .iui-tabs .iui-tab-icon + .iui-tab-label{
@@ -111,11 +112,11 @@
   color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-green .iui-tab.iui-active .iui-tab-icon{
-  fill:var(--iui-icons-color-positive);
+  fill:var(--iui-icon-color-positive);
 }
 .iui-tabs ~ .iui-tabs-content{
-  padding-top:11px;
-  padding-bottom:11px;
+  padding-top:12px;
+  padding-bottom:12px;
 }
 .iui-tabs.iui-default .iui-tab::after{
   content:"";
@@ -161,6 +162,9 @@
 .iui-horizontal .iui-tabs.iui-default ~ .iui-tabs-content{
   margin-top:-1px;
 }
+.iui-horizontal .iui-tabs.iui-default :where(.iui-button){
+  height:100%;
+}
 
 .iui-vertical .iui-tabs.iui-default .iui-tab.iui-active{
   border-right-color:transparent;
@@ -171,9 +175,12 @@
 .iui-vertical .iui-tabs.iui-default ~ .iui-tabs-content{
   margin-left:-1px;
 }
+.iui-vertical .iui-tabs.iui-default :where(.iui-button){
+  width:100%;
+}
 
 .iui-tabs.iui-default.iui-large .iui-tab{
-  min-height:49px;
+  min-height:52px;
 }
 .iui-tabs.iui-default.iui-large .iui-tab-description{
   display:-webkit-box;
@@ -217,7 +224,7 @@
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab{
-  min-height:49px;
+  min-height:52px;
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab-description{
   display:-webkit-box;

package/css/tag.css

@@ -8,9 +8,9 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
-  height:33px;
-  margin-top:3px;
-  margin-bottom:3px;
+  height:36px;
+  margin-top:4px;
+  margin-bottom:4px;
   border-radius:9999px;
   padding:0 2px;
   align-items:center;
@@ -45,7 +45,7 @@
   vertical-align:baseline;
   font-size:14px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
@@ -140,6 +140,6 @@ a.iui-tag-basic:focus-visible{
 }
 .iui-tag-container.iui-visible{
   border-radius:4px;
-  padding:3px 12px;
+  padding:4px 12px;
   background-color:var(--iui-color-background-3);
 }

package/css/text.css

@@ -9,7 +9,7 @@
   vertical-align:baseline;
   font-size:32px;
   font-weight:300;
-  line-height:44px;
+  line-height:48px;
 }
 
 .iui-text-title{
@@ -19,7 +19,7 @@
   vertical-align:baseline;
   font-size:24px;
   font-weight:300;
-  line-height:33px;
+  line-height:36px;
 }
 
 .iui-text-subheading{
@@ -29,7 +29,7 @@
   vertical-align:baseline;
   font-size:18px;
   font-weight:400;
-  line-height:33px;
+  line-height:36px;
 }
 
 .iui-text-leading{
@@ -39,7 +39,7 @@
   vertical-align:baseline;
   font-size:16px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
 }
 
 .iui-text-block{
@@ -49,7 +49,7 @@
   vertical-align:baseline;
   font-size:14px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
 }
 
 .iui-text-small{
@@ -59,7 +59,7 @@
   vertical-align:baseline;
   font-size:12px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
 }
 
 .iui-text-muted{
@@ -115,5 +115,5 @@
 
 .iui-text-spacing{
   padding:0;
-  margin:0 0 22px;
+  margin:0 0 24px;
 }

package/css/tile.css

@@ -40,11 +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{
+  --_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));
 }
@@ -84,7 +88,7 @@
   flex-wrap:nowrap;
 }
 .iui-tile.iui-folder .iui-tile-thumbnail{
-  height:110px;
+  height:120px;
   flex:1;
   border-bottom:none;
   border-right:1px solid var(--iui-color-background-border);
@@ -94,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;
 }
@@ -118,6 +122,9 @@
 .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(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
@@ -135,8 +142,8 @@
 .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(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
@@ -155,8 +162,8 @@
 .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(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
@@ -175,21 +182,18 @@
 .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{
   --_iui-button-text-color:var(--iui-text-color);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
+  --_iui-button-icon-margin-x:4px;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-padding-inline:8px;
   --_iui-button-gap:4px;
-  --_iui-button-height:27px;
+  --_iui-button-height:28px;
   --_iui-button-padding-inline:8px;
   --_iui-button-padding-inline:2px;
   position:absolute;
@@ -236,13 +240,13 @@
   --_iui-button-text-color:var(--iui-text-color);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
+  --_iui-button-icon-margin-x:4px;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-padding-inline:8px;
   --_iui-button-gap:4px;
-  --_iui-button-height:27px;
+  --_iui-button-height:28px;
   --_iui-button-padding-inline:8px;
   --_iui-button-padding-inline:2px;
   position:absolute;
@@ -310,7 +314,7 @@
   font-size:14px;
   flex:1;
   height:auto;
-  padding:11px 12px;
+  padding:12px 12px;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
@@ -330,7 +334,7 @@
 .iui-tile-thumbnail{
   box-sizing:content-box;
   width:100%;
-  height:154px;
+  height:168px;
   flex-shrink:0;
   overflow:hidden;
   position:relative;
@@ -341,22 +345,16 @@
   border-bottom:1px solid var(--iui-color-background-border);
 }
 .iui-tile-thumbnail .iui-thumbnail-icon{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
+  display:flex;
+  flex-shrink:0;
   width:64px;
   height:64px;
+  fill:var(--iui-icon-color);
 }
-.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);
-}
-.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{
@@ -391,7 +389,7 @@ div.iui-tile-thumbnail-picture{
 }
 
 .iui-tile-content{
-  padding:11px 12px;
+  padding:12px 12px;
   position:relative;
   display:flex;
   flex-direction:column;
@@ -406,28 +404,16 @@ div.iui-tile-thumbnail-picture{
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  margin-bottom:5.5px;
+  margin-bottom:6px;
   color:var(--iui-text-color);
 }
 .iui-tile-content .iui-tile-status-icon{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
   margin-right:8px;
-  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);
+  fill:var(--_iui-tile-status-icon-fill);
 }
 .iui-tile-content .iui-tile-name-label{
   overflow:hidden;
@@ -435,10 +421,10 @@ 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;
   text-overflow:ellipsis;
   display:-webkit-box;
@@ -451,7 +437,7 @@ div.iui-tile-thumbnail-picture{
   flex-shrink:0;
   overflow:hidden;
   text-overflow:ellipsis;
-  height:22px;
+  height:24px;
   width:100%;
   display:flex;
   align-items:center;
@@ -460,28 +446,18 @@ div.iui-tile-thumbnail-picture{
 }
 .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;
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
+  fill:var(--iui-icon-color);
   margin-right:8px;
-  flex-shrink:0;
 }
-.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,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,7 +12,7 @@
       -ms-user-select:none;
           user-select:none;
   text-align:center;
-  height:286px;
+  height:312px;
   display:inline-flex;
   background-color:var(--iui-color-background-1);
 }
@@ -24,7 +24,7 @@
 }
 
 .iui-time{
-  padding:11px 8px;
+  padding:12px 8px;
   overflow-y:auto;
   overflow-y:overlay;
   scrollbar-width:none;
@@ -76,7 +76,7 @@
 }
 
 .iui-period{
-  padding:11px 8px;
+  padding:12px 8px;
   overflow-y:auto;
   overflow-y:overlay;
   scrollbar-width:none;