@itwin/itwinui-css 0.51.0 → 0.53.1

package/css/inputs.css

@@ -128,7 +128,7 @@ div.iui-input-container.iui-inline-label{
 .iui-input-container > .iui-label.iui-required::after{
   content:"*";
   margin-left:4px;
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-input-container .iui-input-icon{
@@ -225,36 +225,36 @@ div.iui-input-container.iui-inline-label{
   margin-right:6px;
 }
 .iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
-  background-color:rgba(83, 162, 26, 0.4);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
+  background-color:rgba(83, 162, 26, 0.2);
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-input-container.iui-positive::selection,
 .iui-input-container.iui-positive *::selection{
-  background-color:rgba(83, 162, 26, 0.4);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4));
+  background-color:rgba(83, 162, 26, 0.2);
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-input-container.iui-positive .iui-input-icon{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-color-foreground-positive);
 }
 .iui-input-container.iui-positive .iui-message{
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-input-container.iui-positive .iui-message a{
   text-decoration:underline;
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-input-container.iui-positive .iui-message a:hover{
   text-decoration:none;
-  color:#3c7613;
+  color:#3d7613;
   color:var(--iui-color-foreground-positive-overlay);
 }
 .iui-input-container.iui-positive .iui-input,
 .iui-input-container.iui-positive .iui-textarea{
   padding-bottom:6px;
-  border-bottom:2px solid #53A21A;
+  border-bottom:2px solid #53a21a;
   border-bottom:2px solid var(--iui-color-foreground-positive);
 }
 .iui-input-container.iui-positive .iui-input.iui-small,
@@ -267,8 +267,8 @@ div.iui-input-container.iui-inline-label{
 }
 .iui-input-container.iui-positive .iui-input:focus,
 .iui-input-container.iui-positive .iui-textarea:focus{
-  border-bottom:2px solid #53A21A;
-  outline:2px solid #53A21A;
+  border-bottom:2px solid #53a21a;
+  outline:2px solid #53a21a;
   outline-offset:-2px;
   border-bottom:2px solid var(--iui-color-foreground-positive);
   outline:2px solid var(--iui-color-foreground-positive);
@@ -288,40 +288,40 @@ div.iui-input-container.iui-inline-label{
   bottom:0;
   left:0;
   height:2px;
-  background-color:#53A21A;
+  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
-  background-color:rgba(211, 10, 10, 0.4);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
+  background-color:rgba(209, 10, 10, 0.2);
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
 .iui-input-container.iui-negative::selection,
 .iui-input-container.iui-negative *::selection{
-  background-color:rgba(211, 10, 10, 0.4);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4));
+  background-color:rgba(209, 10, 10, 0.2);
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
 .iui-input-container.iui-negative .iui-input-icon{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-color-foreground-negative);
 }
 .iui-input-container.iui-negative .iui-message{
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-input-container.iui-negative .iui-message a{
   text-decoration:underline;
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-input-container.iui-negative .iui-message a:hover{
   text-decoration:none;
-  color:#a20808;
+  color:#a10808;
   color:var(--iui-color-foreground-negative-overlay);
 }
 .iui-input-container.iui-negative .iui-input,
 .iui-input-container.iui-negative .iui-textarea{
   padding-bottom:6px;
-  border-bottom:2px solid #D30A0A;
+  border-bottom:2px solid #d10a0a;
   border-bottom:2px solid var(--iui-color-foreground-negative);
 }
 .iui-input-container.iui-negative .iui-input.iui-small,
@@ -334,8 +334,8 @@ div.iui-input-container.iui-inline-label{
 }
 .iui-input-container.iui-negative .iui-input:focus,
 .iui-input-container.iui-negative .iui-textarea:focus{
-  border-bottom:2px solid #D30A0A;
-  outline:2px solid #D30A0A;
+  border-bottom:2px solid #d10a0a;
+  outline:2px solid #d10a0a;
   outline-offset:-2px;
   border-bottom:2px solid var(--iui-color-foreground-negative);
   outline:2px solid var(--iui-color-foreground-negative);
@@ -355,40 +355,40 @@ div.iui-input-container.iui-inline-label{
   bottom:0;
   left:0;
   height:2px;
-  background-color:#D30A0A;
+  background-color:#d10a0a;
   background-color:var(--iui-color-foreground-negative);
 }
 .iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
-  background-color:rgba(241, 139, 18, 0.4);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4));
+  background-color:rgba(241, 141, 19, 0.2);
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
 .iui-input-container.iui-warning::selection,
 .iui-input-container.iui-warning *::selection{
-  background-color:rgba(241, 139, 18, 0.4);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4));
+  background-color:rgba(241, 141, 19, 0.2);
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
 .iui-input-container.iui-warning .iui-input-icon{
-  fill:#F18B12;
+  fill:#f18d13;
   fill:var(--iui-color-foreground-warning);
 }
 .iui-input-container.iui-warning .iui-message{
-  color:#F18B12;
+  color:#f18d13;
   color:var(--iui-color-foreground-warning);
 }
 .iui-input-container.iui-warning .iui-message a{
   text-decoration:underline;
-  color:#F18B12;
+  color:#f18d13;
   color:var(--iui-color-foreground-warning);
 }
 .iui-input-container.iui-warning .iui-message a:hover{
   text-decoration:none;
-  color:#c4700c;
+  color:#c6720c;
   color:var(--iui-color-foreground-warning-overlay);
 }
 .iui-input-container.iui-warning .iui-input,
 .iui-input-container.iui-warning .iui-textarea{
   padding-bottom:6px;
-  border-bottom:2px solid #F18B12;
+  border-bottom:2px solid #f18d13;
   border-bottom:2px solid var(--iui-color-foreground-warning);
 }
 .iui-input-container.iui-warning .iui-input.iui-small,
@@ -401,8 +401,8 @@ div.iui-input-container.iui-inline-label{
 }
 .iui-input-container.iui-warning .iui-input:focus,
 .iui-input-container.iui-warning .iui-textarea:focus{
-  border-bottom:2px solid #F18B12;
-  outline:2px solid #F18B12;
+  border-bottom:2px solid #f18d13;
+  outline:2px solid #f18d13;
   outline-offset:-2px;
   border-bottom:2px solid var(--iui-color-foreground-warning);
   outline:2px solid var(--iui-color-foreground-warning);
@@ -422,7 +422,7 @@ div.iui-input-container.iui-inline-label{
   bottom:0;
   left:0;
   height:2px;
-  background-color:#F18B12;
+  background-color:#f18d13;
   background-color:var(--iui-color-foreground-warning);
 }
 
@@ -435,7 +435,7 @@ div.iui-input-container.iui-inline-label{
 .iui-input-label.iui-required::after{
   content:"*";
   margin-left:4px;
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 label.iui-input-label{
@@ -473,7 +473,7 @@ label.iui-input-label.iui-disabled{
   padding:7px 12px;
   min-height:38px;
   color:rgba(0, 0, 0, 0.8);
-  background-color:#FFF;
+  background-color:white;
   border:1px solid rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color);
   background-color:var(--iui-color-background-1);
@@ -526,17 +526,17 @@ label.iui-input-label.iui-disabled{
   color:var(--iui-text-color-placeholder);
 }
 .iui-input:-webkit-autofill{
-  border-color:#008be1;
-  color:#008be1;
-  background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
+  border-color:#008ae0;
+  color:#008ae0;
+  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
   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:autofill{
-  border-color:#008be1;
-  color:#008be1;
-  background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
+  border-color:#008ae0;
+  color:#008ae0;
+  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
   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));
@@ -551,8 +551,8 @@ label.iui-input-label.iui-disabled{
   }
 }
 .iui-input[disabled]{
-  background-color:#EEF0F3;
-  border-color:#EEF0F3;
+  background-color:#edeff2;
+  border-color:#edeff2;
   background-color:var(--iui-color-background-disabled);
   border-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
@@ -576,7 +576,7 @@ label.iui-input-label.iui-disabled{
   position:relative;
   overflow:hidden;
   color:rgba(0, 0, 0, 0.8);
-  background-color:#FFF;
+  background-color:white;
   border:1px solid rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color);
   background-color:var(--iui-color-background-1);
@@ -604,8 +604,8 @@ label.iui-input-label.iui-disabled{
   font-size:16px;
 }
 .iui-select-button.iui-disabled{
-  background-color:#EEF0F3;
-  border-color:#EEF0F3;
+  background-color:#edeff2;
+  border-color:#edeff2;
   background-color:var(--iui-color-background-disabled);
   border-color:var(--iui-color-background-disabled);
   --_hover-color:var(--iui-color-background-disabled);
@@ -650,7 +650,7 @@ label.iui-input-label.iui-disabled{
   padding:7px 12px;
   min-height:38px;
   color:rgba(0, 0, 0, 0.8);
-  background-color:#FFF;
+  background-color:white;
   border:1px solid rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color);
   background-color:var(--iui-color-background-1);
@@ -705,17 +705,17 @@ label.iui-input-label.iui-disabled{
   color:var(--iui-text-color-placeholder);
 }
 .iui-textarea:-webkit-autofill{
-  border-color:#008be1;
-  color:#008be1;
-  background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
+  border-color:#008ae0;
+  color:#008ae0;
+  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
   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-textarea:autofill{
-  border-color:#008be1;
-  color:#008be1;
-  background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
+  border-color:#008ae0;
+  color:#008ae0;
+  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
   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));
@@ -730,8 +730,8 @@ label.iui-input-label.iui-disabled{
   }
 }
 .iui-textarea[disabled]{
-  background-color:#EEF0F3;
-  border-color:#EEF0F3;
+  background-color:#edeff2;
+  border-color:#edeff2;
   background-color:var(--iui-color-background-disabled);
   border-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
@@ -892,15 +892,15 @@ label.iui-input-label.iui-disabled{
   fill:var(--iui-icons-color-actionable-disabled);
 }
 .iui-checkbox-wrapper.iui-positive{
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-checkbox-wrapper.iui-warning{
-  color:#F18B12;
+  color:#f18d13;
   color:var(--iui-color-foreground-warning);
 }
 .iui-checkbox-wrapper.iui-negative{
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-checkbox::before{
@@ -1047,15 +1047,15 @@ label.iui-input-label.iui-disabled{
   fill:var(--iui-icons-color-actionable-disabled);
 }
 .iui-radio-wrapper.iui-positive{
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-radio-wrapper.iui-warning{
-  color:#F18B12;
+  color:#f18d13;
   color:var(--iui-color-foreground-warning);
 }
 .iui-radio-wrapper.iui-negative{
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-radio::before{
@@ -1167,7 +1167,7 @@ label.iui-input-label.iui-disabled{
   position:relative;
   z-index:1;
   border:1px solid rgba(0, 0, 0, 0.4);
-  background-color:#FFF;
+  background-color:white;
   border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   background-color:var(--iui-color-background-1);
 }
@@ -1197,7 +1197,7 @@ label.iui-input-label.iui-disabled{
   height:16px;
   position:absolute;
   right:8px;
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-radio-tile-container > label > .iui-radio-tile > .iui-label{
@@ -1225,7 +1225,7 @@ label.iui-input-label.iui-disabled{
   margin-left:-1px;
 }
 .iui-radio-tile-container > label input:enabled:focus ~ .iui-radio-tile{
-  outline:2px solid #008BE1;
+  outline:2px solid #008ae0;
   outline-offset:-4px;
   outline:2px solid var(--iui-color-foreground-primary);
   outline-offset:-4px;
@@ -1255,11 +1255,11 @@ label.iui-input-label.iui-disabled{
 .iui-radio-tile-container > label input:checked ~ .iui-radio-tile{
   padding:7px;
   z-index:3;
-  border:2px solid #008BE1;
+  border:2px solid #008ae0;
   border:2px solid var(--iui-color-foreground-primary);
 }
 .iui-radio-tile-container > label input:checked ~ .iui-radio-tile > .iui-icon{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-radio-tile-container > label input:checked ~ .iui-radio-tile > .iui-checkmark{
@@ -1268,8 +1268,8 @@ label.iui-input-label.iui-disabled{
 .iui-radio-tile-container > label input:disabled ~ .iui-radio-tile{
   cursor:not-allowed;
   z-index:0;
-  border-color:#EEF0F3;
-  background-color:#EEF0F3;
+  border-color:#edeff2;
+  background-color:#edeff2;
   border-color:var(--iui-color-background-disabled);
   background-color:var(--iui-color-background-disabled);
 }

package/css/keyboard.css

@@ -21,9 +21,9 @@
       -ms-user-select:none;
           user-select:none;
   cursor:default;
-  background-color:#FFF;
-  border:1px solid #C7CCD1;
-  box-shadow:0 1px 1px #C7CCD1, 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
+  background-color:white;
+  border:1px solid #c7ccd1;
+  box-shadow:0 1px 1px #c7ccd1, 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
   background-color:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-5);
   box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
@@ -34,6 +34,6 @@
   }
 }
 .iui-keyboard:hover{
-  box-shadow:0 0 0 #C7CCD1, 0 0 0 0 rgba(255, 255, 255, 0.2) inset;
+  box-shadow:0 0 0 #c7ccd1, 0 0 0 0 rgba(255, 255, 255, 0.2) inset;
   box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
 }

package/css/location-marker.css

@@ -21,7 +21,7 @@
   filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
 }
 .iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
-  fill:#FFF;
+  fill:white;
   fill:var(--iui-color-foreground-accessory);
 }
 
@@ -47,9 +47,9 @@
   filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
   box-sizing:border-box;
   position:relative;
-  border:solid 1px #FFF;
-  background-color:#FFF;
-  color:#FFF;
+  border:solid 1px white;
+  background-color:white;
+  color:white;
   border:solid 1px var(--iui-color-foreground-accessory);
   background-color:var(--iui-color-foreground-accessory);
   color:var(--iui-color-foreground-accessory);
@@ -66,7 +66,7 @@
   margin:auto;
   border-width:4px;
   border-style:solid;
-  border-color:#FFF transparent transparent transparent;
+  border-color:white transparent transparent transparent;
   border-color:var(--iui-color-foreground-accessory) transparent transparent transparent;
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
@@ -77,7 +77,7 @@
   vertical-align:-2px;
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{
-  fill:#FFF;
+  fill:white;
   fill:var(--iui-color-foreground-accessory);
 }
 
@@ -97,7 +97,7 @@
   height:24px;
   border-radius:50%;
   cursor:default;
-  background:radial-gradient(circle at center, rgba(0, 139, 225, 0), rgba(0, 139, 225, 0.2));
+  background:radial-gradient(circle at center, rgba(0, 138, 224, 0), rgba(0, 138, 224, 0.2));
   background:radial-gradient(circle at center, rgba(var(--iui-color-foreground-primary-rgb), 0), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)));
 }
 .iui-location-marker-me > .iui-location-marker-me-dot{
@@ -108,8 +108,8 @@
   left:6px;
   border-radius:50%;
   box-sizing:border-box;
-  border:1px solid #FFF;
-  background-color:#008BE1;
+  border:1px solid white;
+  background-color:#008ae0;
   border:1px solid var(--iui-color-foreground-accessory);
   background-color:var(--iui-color-background-primary);
 }

package/css/menu.css

@@ -3,15 +3,18 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-menu{
+  --iui-surface-background-color:var(--iui-color-background-1);
+  --iui-surface-border-radius:0;
+  --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
+  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);
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
-  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-  background-color:#FFF;
-  color:rgba(0, 0, 0, 0.8);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-text-color);
   list-style-type:none;
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -21,6 +24,11 @@
   margin:0;
   padding:0;
 }
+@media (forced-colors: active){
+  .iui-menu{
+    border:1px solid transparent;
+  }
+}
 .iui-menu .iui-header-menu-icon{
   margin:0 4px;
 }
@@ -79,7 +87,7 @@
   margin-left:8px;
 }
 .iui-menu-item:hover{
-  background-color:rgba(0, 139, 225, 0.1);
+  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-menu-item:focus, .iui-menu-item.iui-focused{
@@ -98,15 +106,20 @@
   display:block;
 }
 .iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
-  background-color:rgba(0, 139, 225, 0.2);
+  background-color:rgba(0, 138, 224, 0.1);
+  color:#008ae0;
   outline:thin solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  color:var(--iui-color-foreground-primary);
   outline:thin solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
 }
+.iui-menu-item.iui-active .iui-menu-description{
+  opacity:1;
+}
 .iui-menu-item.iui-active > .iui-icon{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
@@ -120,7 +133,7 @@
 .iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
   cursor:not-allowed;
   outline:none;
-  background-color:#FFF;
+  background-color:white;
   color:rgba(0, 0, 0, 0.2);
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color-placeholder);
@@ -138,6 +151,6 @@
   height:1px;
   width:calc(100% - 24px);
   margin:1px auto;
-  background-color:#DCE0E3;
-  background-color:var(--iui-color-background-4);
+  background-color:#c7ccd1;
+  background-color:var(--iui-color-background-border);
 }

package/css/modal.css

@@ -13,16 +13,21 @@
   left:0;
   width:100%;
   height:100%;
-  visibility:hidden;
-  opacity:0;
   background-color:rgba(0, 0, 0, 0.4);
   background-color:rgba(0, 0, 0, var(--iui-opacity-4));
+  visibility:hidden;
+  opacity:0;
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal{
     transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
   }
 }
+.iui-modal.iui-modal-visible{
+  visibility:visible;
+  opacity:1;
+  transition-delay:0s;
+}
 .iui-modal > .iui-modal-dialog{
   position:absolute;
   left:50%;
@@ -30,11 +35,13 @@
   transform:translate(-50%, -33%);
   z-index:1000;
   max-width:50%;
-  min-width:400px;
+  min-width:380px;
+  max-height:100vh;
   border-radius:3px;
   box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
   padding:11px 16px;
-  background-color:#FFF;
+  box-sizing:border-box;
+  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 @media screen and (max-width: 400px){
@@ -66,8 +73,60 @@
 .iui-modal > .iui-modal-dialog .iui-button-bar > .iui-button:not(:last-child){
   margin-right:8px;
 }
-.iui-modal.iui-modal-visible{
+.iui-modal > .iui-modal-dialog .iui-modal-content{
+  flex-grow:2;
+  margin:0 -16px;
+  padding:0 16px;
+  overflow-y:auto;
+  overflow-y:overlay;
+}
+.iui-modal-full-page > .iui-modal-dialog{
+  display:flex;
+  flex-direction:column;
+  height:100vh;
+  width:100vw;
+  left:0;
+  top:0;
+  transform:none;
+  max-width:initial;
+  min-width:initial;
+  border-radius:0;
+  will-change:transform;
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-modal-full-page{
+    transition:visibility 0s linear 0.4s, opacity 0.4s ease-out 0.2s;
+  }
+}
+.iui-modal-full-page > .iui-modal-dialog{
+  transform:translateY(100%);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-modal-full-page > .iui-modal-dialog{
+    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.4s ease-in;
+  }
+}
+.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
+  transform:translateY(0);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
+    transition:transform 0.4s ease-out;
+  }
+}
+.iui-modal-animation-enter .iui-modal .iui-modal-dialog{
+  transform:translateY(100%);
+  opacity:0;
+}
+.iui-modal-animation-enter-active .iui-modal .iui-modal-dialog{
+  transform:translateY(0);
+  opacity:1;
+}
+.iui-modal-animation-enter .iui-modal{
+  visibility:hidden;
+  opacity:0;
+}
+.iui-modal-animation-enter-active .iui-modal{
   visibility:visible;
   opacity:1;
-  transition-delay:0s;
 }