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

package/css/header.css

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-page-header{
-  --_iui-header-brand-label-font-size:16px;
-  --_iui-header-height:55px;
+  --_iui-header-brand-label-font-size:var(--iui-font-size-2);
+  --_iui-header-height:calc(var(--iui-size-s) * 5);
   --_iui-header-icon-scale:none;
   margin:0;
   padding:0;
@@ -19,18 +19,18 @@
       -ms-user-select:none;
           user-select:none;
   background-color:var(--iui-color-background-1);
-  border-bottom:2px solid var(--iui-color-background-border);
-  color:var(--iui-text-color);
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-background-border);
+  color:var(--iui-color-foreground-2);
   padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-page-header{
-    transition:height 0.2s ease-out;
+    transition:height var(--iui-duration-1) ease-out;
   }
 }
 .iui-page-header[data-iui-size=slim]{
-  --_iui-header-brand-label-font-size:14px;
-  --_iui-header-height:33px;
+  --_iui-header-brand-label-font-size:var(--iui-font-size-1);
+  --_iui-header-height:calc(var(--iui-size-s) * 3);
   --_iui-header-icon-scale:scale(0.66666);
 }
 
@@ -55,12 +55,12 @@
 @media (prefers-reduced-motion: no-preference){
   .iui-page-header-right .iui-avatar,
 .iui-page-header-right .iui-avatar *{
-    transition:width 0.2s ease-out, height 0.2s ease-out, font-size 0.2s ease-out;
+    transition:width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out, font-size var(--iui-duration-1) ease-out;
   }
 }
 
 .iui-page-header-divider{
-  height:22px;
+  height:calc(var(--iui-size-s) * 2);
   border-left:1px solid var(--iui-color-background-border);
 }
 @media (forced-colors: active){
@@ -70,13 +70,14 @@
 }
 
 .iui-header-breadcrumbs{
+  --_iui-breadcrumbs-height:100%;
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
   display:flex;
   align-items:center;
-  height:100%;
+  height:var(--_iui-breadcrumbs-height);
 }
 
 .iui-header-brand{
@@ -92,7 +93,7 @@ a.iui-header-brand,
 button.iui-header-brand, .iui-header-brand[role=button]{
   cursor:pointer;
   -webkit-tap-highlight-color:transparent;
-  transition:background-color 0.2s ease-out;
+  transition:background-color var(--iui-duration-1) ease-out;
   margin:0;
   padding:0;
   border:none;
@@ -123,7 +124,7 @@ button.iui-header-brand, .iui-header-brand[role=button]{
 }
 a.iui-header-brand:hover,
 button.iui-header-brand:hover, .iui-header-brand[role=button]:hover{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 
 a.iui-header-brand{
@@ -131,26 +132,28 @@ a.iui-header-brand{
 }
 
 .iui-header-brand-icon{
-  width:24px;
-  height:24px;
-  margin:0 24px;
-  fill:var(--iui-icons-color-actionable);
+  display:flex;
+  flex-shrink:0;
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
+  margin:0 calc(1.5 * var(--iui-size-m));
+  fill:var(--iui-color-foreground-2);
   will-change:transform;
   transform:var(--_iui-header-icon-scale);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-header-brand-icon{
-    transition:transform 0.2s ease-out;
+    transition:transform var(--iui-duration-1) ease-out;
   }
 }
 
 .iui-header-brand-label{
-  margin-right:12px;
+  margin-right:var(--iui-size-s);
   font-size:var(--_iui-header-brand-label-font-size);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-header-brand-label{
-    transition:font-size 0.2s ease-out;
+    transition:font-size var(--iui-duration-1) ease-out;
   }
 }
 @media (max-width: 991px){
@@ -179,8 +182,8 @@ a.iui-header-brand{
 .iui-header-breadcrumbs-list{
   overflow:hidden;
   box-sizing:content-box;
-  margin-bottom:-4px;
-  padding-bottom:4px;
+  margin-bottom:calc(0px - var(--iui-size-2xs));
+  padding-bottom:var(--iui-size-2xs);
 }
 
 .iui-header-breadcrumb-button{
@@ -196,14 +199,14 @@ a.iui-header-brand{
   border-radius:0;
   max-width:25vw;
   overflow:hidden;
-  padding-left:12px;
-  padding-right:12px;
+  padding-left:var(--iui-size-s);
+  padding-right:var(--iui-size-s);
   box-sizing:border-box;
   font-family:inherit;
   -webkit-tap-highlight-color:transparent;
-  transition:background-color 0.2s ease-out;
+  transition:background-color var(--iui-duration-1) ease-out;
   color:inherit;
-  gap:12px;
+  gap:var(--iui-size-s);
   cursor:pointer;
 }
 .iui-header-breadcrumb-button:focus-visible{
@@ -234,15 +237,15 @@ a.iui-header-brand{
 }
 
 .iui-header-breadcrumb-button-split{
-  padding:0 8px;
-  margin-left:-8px;
+  padding:0 var(--iui-size-xs);
+  margin-left:calc(0px - var(--iui-size-xs));
   flex-shrink:0;
 }
 .iui-header-breadcrumb-button-split:hover{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  background-color:hsl(var(--iui-color-foreground-1-hsl)/var(--iui-opacity-6));
 }
 [aria-current] .iui-header-breadcrumb-button-split:hover{
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
 }
 
 .iui-header-breadcrumb-button-split:disabled, .iui-header-breadcrumb-button-split[aria-disabled=true]{
@@ -254,12 +257,12 @@ a.iui-header-brand{
 
 .iui-header-breadcrumb-item{
   max-width:25vw;
-  transition:background-color 0.2s ease-out;
+  transition:background-color var(--iui-duration-1) ease-out;
   height:100%;
   display:flex;
   overflow:hidden;
   position:relative;
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
   box-sizing:border-box;
 }
 @media (forced-colors: active){
@@ -269,11 +272,11 @@ a.iui-header-brand{
   }
 }
 .iui-header-breadcrumb-item:hover{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-header-breadcrumb-item[aria-current]{
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  box-shadow:0 2px 0 0 currentColor;
+  background-color:var(--iui-color-background-subtle-primary);
+  box-shadow:0 var(--iui-size-3xs) 0 0 currentColor;
   color:var(--iui-color-foreground-primary);
 }
 @media (forced-colors: active){
@@ -285,7 +288,7 @@ a.iui-header-brand{
 .iui-header-breadcrumb-item[aria-disabled=true]{
   cursor:not-allowed;
   background-color:transparent;
-  color:var(--iui-text-color-placeholder);
+  color:var(--iui-color-foreground-5);
 }
 .iui-header-breadcrumb-item[aria-disabled=true][aria-current]{
   box-shadow:none;
@@ -304,21 +307,23 @@ a.iui-header-brand{
 }
 
 .iui-header-breadcrumb-button-icon{
-  width:24px;
-  height:24px;
+  display:flex;
+  flex-shrink:0;
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
   background-color:var(--iui-color-background-3);
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   display:inline-flex;
   flex-shrink:0;
   box-sizing:border-box;
-  padding:4px;
-  fill:var(--iui-icons-color);
+  padding:var(--iui-size-2xs);
+  fill:var(--iui-color-foreground-4);
   will-change:transform;
   transform:var(--_iui-header-icon-scale);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-header-breadcrumb-button-icon{
-    transition:transform 0.2s ease-out;
+    transition:transform var(--iui-duration-1) ease-out;
   }
 }
 @media (forced-colors: active){
@@ -329,12 +334,12 @@ a.iui-header-brand{
 img.iui-header-breadcrumb-button-icon,
 div.iui-header-breadcrumb-button-icon{
   padding:0;
-  transition:filter 0.2s ease-out;
+  transition:filter var(--iui-duration-1) ease-out;
 }
 @media (prefers-reduced-motion: no-preference){
   img.iui-header-breadcrumb-button-icon,
 div.iui-header-breadcrumb-button-icon{
-    transition:filter 0.2s ease-out, transform 0.2s ease-out;
+    transition:filter var(--iui-duration-1) ease-out, transform var(--iui-duration-1) ease-out;
   }
 }
 
@@ -356,7 +361,7 @@ div.iui-header-breadcrumb-button-icon{
 
 :disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
   background-color:var(--iui-color-background-2);
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-color-foreground-5);
 }
 @media (forced-colors: active){
   :disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
@@ -378,11 +383,13 @@ div.iui-header-breadcrumb-button-icon{
 }
 
 .iui-header-breadcrumb-button-dropdown-icon{
-  width:16px;
-  height:16px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   fill:currentColor;
   flex-shrink:0;
-  margin-right:-4px;
+  margin-right:calc(0px - var(--iui-size-2xs));
 }
 .iui-header-breadcrumb-button-split .iui-header-breadcrumb-button-dropdown-icon{
   margin-right:0;
@@ -398,10 +405,10 @@ div.iui-header-breadcrumb-button-icon{
   display:flex;
   flex-direction:column;
   justify-content:center;
-  font-size:14px;
+  font-size:var(--iui-font-size-1);
   text-align:left;
   overflow:hidden;
-  transition:color 0.2s ease-out;
+  transition:color var(--iui-duration-1) ease-out;
 }
 .iui-header-breadcrumb-button-text-label, .iui-header-breadcrumb-button-text-sublabel{
   overflow:hidden;
@@ -409,12 +416,12 @@ div.iui-header-breadcrumb-button-icon{
   text-overflow:ellipsis;
 }
 .iui-header-breadcrumb-button-text-sublabel{
-  font-size:12px;
+  font-size:var(--iui-font-size-0);
   opacity:var(--iui-opacity-3);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-header-breadcrumb-button-text-sublabel{
-    transition:visibility 0s linear 0s, width 0.2s ease-out, height 0.2s ease-out, opacity 0.2s ease-out;
+    transition:visibility 0s linear 0s, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
   }
 }
 .iui-active .iui-header-breadcrumb-button-text-sublabel, [aria-current] .iui-header-breadcrumb-button-text-sublabel{

package/css/information-panel.css

@@ -5,6 +5,7 @@
 .iui-information-panel-wrapper{
   position:relative;
   overflow:hidden;
+  border-radius:var(--iui-border-radius-1);
 }
 
 .iui-information-panel{
@@ -19,7 +20,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-information-panel{
-    transition:visibility 0s 0.2s ease-in, transform 0.2s ease-out, opacity 0.2s ease;
+    transition:visibility var(--iui-duration-0) var(--iui-duration-1) ease-in, transform var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease;
   }
 }
 .iui-information-panel > .iui-resizer{
@@ -35,11 +36,11 @@
 }
 .iui-information-panel .iui-information-header,
 .iui-information-panel .iui-information-body{
-  padding-left:12px;
-  padding-right:12px;
+  padding-left:var(--iui-size-s);
+  padding-right:var(--iui-size-s);
 }
 .iui-information-panel .iui-information-header{
-  height:55px;
+  height:calc(var(--iui-size-s) * 5);
   flex-shrink:0;
   display:flex;
   align-items:center;
@@ -61,19 +62,24 @@
 }
 .iui-information-panel .iui-information-header .iui-information-header-label svg{
   display:flex;
-  width:24px;
-  height:24px;
-  margin-right:8px;
   flex-shrink:0;
-  fill:var(--iui-icons-color);
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
+  fill:var(--iui-color-foreground-4);
+  margin-right:var(--iui-size-xs);
+}
+@media (forced-colors: active){
+  .iui-information-panel .iui-information-header .iui-information-header-label svg{
+    fill:CanvasText;
+  }
 }
 .iui-information-panel .iui-information-header .iui-information-header-actions{
   flex-shrink:0;
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-information-panel .iui-information-body{
-  padding-top:11px;
-  padding-bottom:11px;
+  padding-top:var(--iui-size-s);
+  padding-bottom:var(--iui-size-s);
   height:100%;
   overflow-x:hidden;
   overflow-y:auto;
@@ -85,17 +91,17 @@
 .iui-information-panel.iui-right{
   top:0;
   right:0;
-  width:384px;
-  min-width:192px;
+  width:calc(var(--iui-size-3xl) * 4);
+  min-width:calc(var(--iui-size-3xl) * 2);
   height:100%;
   transform:translateX(100%);
-  box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
+  box-shadow:-1px 0 10px var(--iui-shadow-color);
   -webkit-clip-path:inset(0 0 0 -15px);
           clip-path:inset(0 0 0 -15px);
 }
 .iui-information-panel.iui-right > .iui-resizer{
   height:100%;
-  width:16px;
+  width:var(--iui-size-m);
   top:0;
   cursor:ew-resize;
   justify-content:center;
@@ -106,29 +112,29 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
-    transition:background-color 0.2s ease-out, width 0.2s ease-out;
+    transition:background-color var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out;
   }
 }
 .iui-information-panel.iui-right > .iui-resizer:hover > .iui-resizer-bar{
-  width:4px;
+  width:var(--iui-size-2xs);
 }
 .iui-information-panel.iui-right > .iui-resizer{
-  left:-8px;
+  left:calc(var(--iui-size-m) * -0.5);
 }
 .iui-information-panel.iui-bottom{
   left:0;
   bottom:0;
-  height:384px;
-  min-height:192px;
+  height:calc(var(--iui-size-3xl) * 4);
+  min-height:calc(var(--iui-size-3xl) * 2);
   width:100%;
   transform:translateY(100%);
-  box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
+  box-shadow:0 -1px 10px var(--iui-shadow-color);
   -webkit-clip-path:inset(-15px 0 0 0);
           clip-path:inset(-15px 0 0 0);
 }
 .iui-information-panel.iui-bottom > .iui-resizer{
   width:100%;
-  height:16px;
+  height:var(--iui-size-m);
   left:0;
   cursor:ns-resize;
   align-items:center;
@@ -139,14 +145,14 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
-    transition:background-color 0.2s ease-out, height 0.2s ease-out;
+    transition:background-color var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
   }
 }
 .iui-information-panel.iui-bottom > .iui-resizer:hover > .iui-resizer-bar{
-  height:4px;
+  height:var(--iui-size-2xs);
 }
 .iui-information-panel.iui-bottom > .iui-resizer{
-  top:-8px;
+  top:calc(var(--iui-size-m) * -0.5);
 }
 .iui-information-panel.iui-visible{
   opacity:1;
@@ -155,7 +161,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-information-panel.iui-visible{
-    transition:transform 0.2s ease-out, opacity 0.2s ease;
+    transition:transform var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease;
   }
 }
 .iui-information-panel.iui-visible > .iui-resizer{
@@ -166,22 +172,22 @@
   display:grid;
 }
 .iui-information-body-content .iui-input-label{
-  font-weight:400;
-  color:var(--iui-text-color-muted);
+  font-weight:var(--iui-font-weight-normal);
+  color:var(--iui-color-foreground-4);
 }
 .iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
-  margin-bottom:11px;
+  margin-bottom:var(--iui-size-s);
 }
 .iui-information-body-content.iui-inline{
-  row-gap:11px;
+  row-gap:var(--iui-size-s);
   grid-template-columns:auto 1fr;
   align-items:center;
 }
 .iui-information-body-content.iui-inline .iui-input-label{
-  margin:0 16px 0 0;
+  margin:0 var(--iui-size-m) 0 0;
   justify-self:end;
   text-align:end;
 }
 .iui-information-body-content.iui-inline .iui-input-label.iui-required{
-  margin-right:6px;
+  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
 }

package/css/input.css

@@ -3,24 +3,31 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-input{
+  --_iui-input-background-color:var(--iui-color-background-1);
+  --_iui-input-border-color:var(--iui-color-foreground-4);
+  --_iui-input-text-color:var(--iui-color-foreground-2);
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
   width:100%;
   font-family:inherit;
-  font-size:14px;
-  font-weight:400;
-  line-height:22px;
-  border-radius:4px;
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
+  border-radius:var(--iui-border-radius-1);
   -webkit-appearance:none;
      -moz-appearance:none;
           appearance:none;
-  padding:7px 12px;
-  min-height:38px;
-  color:var(--iui-text-color);
-  background-color:var(--iui-color-background-1);
-  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  min-height:var(--_iui-input-min-height);
+  padding-block:var(--_iui-input-padding-block);
+  padding-inline:var(--iui-size-s);
+  color:var(--_iui-input-text-color);
+  background-color:var(--_iui-input-background-color);
+  border:1px solid var(--_iui-input-border-color);
+  transition:border-color var(--iui-duration-1) ease-out;
+  --_iui-input-padding-block:var(--iui-size-2xs);
+  --_iui-input-min-height:var(--iui-component-height);
 }
 .iui-input:focus-visible{
   outline:2px solid var(--iui-color-foreground-primary);
@@ -32,62 +39,60 @@
     outline-offset:-2px;
   }
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-input{
-    transition:border-color 0.2s ease-out;
-  }
-}
-.iui-input.iui-small{
-  padding-top:1.5px;
-  padding-bottom:1.5px;
-  min-height:27px;
-}
-.iui-input.iui-large{
-  padding-top:12.5px;
-  padding-bottom:12.5px;
-  min-height:49px;
-  font-size:16px;
-}
 .iui-input::-moz-placeholder{
+  --_iui-input-text-color:var(--iui-color-foreground-5);
   -moz-user-select:none;
        user-select:none;
-  color:var(--iui-text-color-placeholder);
+  color:var(--_iui-input-text-color);
 }
 .iui-input:-ms-input-placeholder{
+  --_iui-input-text-color:var(--iui-color-foreground-5);
   -ms-user-select:none;
       user-select:none;
-  color:var(--iui-text-color-placeholder);
+  color:var(--_iui-input-text-color);
 }
 .iui-input::placeholder{
+  --_iui-input-text-color:var(--iui-color-foreground-5);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  color:var(--iui-text-color-placeholder);
+  color:var(--_iui-input-text-color);
 }
 .iui-input:-webkit-autofill{
-  border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  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));
+  --_iui-input-background-color:var(--iui-color-background-subtle-primary);
+  --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
 }
 .iui-input:autofill{
-  border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  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));
+  --_iui-input-background-color:var(--iui-color-background-subtle-primary);
+  --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
 }
 .iui-input:hover{
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-input:hover{
-    transition:border-color 0.2s ease-out;
-  }
+  --_iui-input-border-color:var(--iui-color-foreground-2);
 }
 .iui-input[disabled]{
-  background-color:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
+  --_iui-input-background-color:var(--iui-color-background-disabled);
+  --_iui-input-border-color:var(--iui-color-background-disabled);
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
-  --_hover-color:var(--iui-color-background-disabled);
+}
+:where(textarea.iui-input){
+  resize:vertical;
+}
+:where(textarea.iui-input)[disabled], :where(textarea.iui-input)[readonly]{
+  resize:none;
+}
+
+.iui-input[data-iui-size=small]{
+  --_iui-input-padding-block:0;
+  --_iui-input-min-height:var(--iui-component-height-small);
+}
+.iui-input[data-iui-size=large]{
+  --_iui-input-padding-block:var(--iui-size-xs);
+  --_iui-input-min-height:var(--iui-component-height-large);
+  font-size:var(--iui-font-size-2);
 }
 
 .iui-input-with-icon.iui-input-with-icon{
@@ -97,27 +102,29 @@
 }
 .iui-input-with-icon.iui-input-with-icon > :first-child{
   grid-area:1/-1;
-  padding-right:40px;
+  padding-right:var(--iui-component-height);
 }
 .iui-input-with-icon.iui-input-with-icon:focus-within > :first-child{
   outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
   outline-offset:-2px;
 }
 .iui-input-with-icon.iui-input-with-icon:hover > :first-child{
-  border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
+  border-color:var(--_iui-input-with-icon-hover-border-color, var(--iui-color-foreground-2));
 }
 
 .iui-end-icon{
   grid-area:inputs;
   justify-self:end;
-  margin:0 14px 0 0;
+  margin:0 calc(var(--iui-size-xs) + 1px) 0 0;
   position:relative;
   display:flex;
   grid-area:1/-1;
 }
 .iui-end-icon svg{
-  width:16px;
-  height:16px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
 }
 .iui-end-icon.iui-button{
   height:100%;
@@ -132,12 +139,13 @@
 }
 .iui-end-icon.iui-actionable{
   align-items:center;
-  height:90%;
-  margin-right:2px;
-  padding:0 12px;
+  height:calc(100% - 4px);
+  margin-right:1px;
+  padding-inline:calc(var(--iui-size-xs) + 1px);
   cursor:pointer;
+  box-sizing:content-box;
   background-position:center;
-  transition:background 0.4s ease-out;
+  transition:background var(--iui-duration-2) ease-out;
 }
 .iui-end-icon.iui-actionable:hover{
   background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
@@ -145,11 +153,11 @@
 .iui-end-icon.iui-actionable:active{
   background-color:var(--iui-color-background-2);
   background-size:100%;
-  transition:background 0s;
+  transition:background var(--iui-duration-0);
 }
 .iui-end-icon.iui-actionable svg{
-  fill:var(--iui-icons-color-actionable);
-  transition:transform 0.2s ease-out;
+  fill:var(--iui-color-foreground-2);
+  transition:transform var(--iui-duration-1) ease-out;
 }
 .iui-end-icon.iui-actionable.iui-open svg{
   transform:rotate(180deg);
@@ -158,5 +166,5 @@
   cursor:not-allowed;
 }
 .iui-end-icon.iui-disabled svg{
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-color-foreground-5);
 }