@itwin/itwinui-css 0.52.0 → 0.53.0

package/css/notification-marker.css

@@ -13,8 +13,8 @@
   top:-6px;
   right:-6px;
   border-radius:100%;
-  background-color:#008BE1;
-  border:2px solid #FFF;
+  background-color:#008ae0;
+  border:2px solid white;
   background-color:var(--iui-color-foreground-primary);
   border:2px solid var(--iui-color-background-1);
 }
@@ -32,29 +32,29 @@
 @media (prefers-reduced-motion: no-preference){
   @-webkit-keyframes pulse-primary{
     0%{
-      box-shadow:0 0 0 0 #008be1;
+      box-shadow:0 0 0 0 #008ae0;
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
     }
     70%{
-      box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
+      box-shadow:0 0 0 7px rgba(0, 138, 224, 0);
       box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
+      box-shadow:0 0 0 0 rgba(0, 138, 224, 0);
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
     }
   }
   @keyframes pulse-primary{
     0%{
-      box-shadow:0 0 0 0 #008be1;
+      box-shadow:0 0 0 0 #008ae0;
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
     }
     70%{
-      box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
+      box-shadow:0 0 0 7px rgba(0, 138, 224, 0);
       box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
+      box-shadow:0 0 0 0 rgba(0, 138, 224, 0);
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
     }
   }
@@ -71,8 +71,8 @@
   top:-6px;
   right:-6px;
   border-radius:100%;
-  background-color:#53A21A;
-  border:2px solid #FFF;
+  background-color:#53a21a;
+  border:2px solid white;
   background-color:var(--iui-color-foreground-positive);
   border:2px solid var(--iui-color-background-1);
 }
@@ -129,8 +129,8 @@
   top:-6px;
   right:-6px;
   border-radius:100%;
-  background-color:#F18B12;
-  border:2px solid #FFF;
+  background-color:#f18d13;
+  border:2px solid white;
   background-color:var(--iui-color-foreground-warning);
   border:2px solid var(--iui-color-background-1);
 }
@@ -148,29 +148,29 @@
 @media (prefers-reduced-motion: no-preference){
   @-webkit-keyframes pulse-warning{
     0%{
-      box-shadow:0 0 0 0 #f18b12;
+      box-shadow:0 0 0 0 #f18d13;
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
     }
     70%{
-      box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
+      box-shadow:0 0 0 7px rgba(241, 141, 19, 0);
       box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
+      box-shadow:0 0 0 0 rgba(241, 141, 19, 0);
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
     }
   }
   @keyframes pulse-warning{
     0%{
-      box-shadow:0 0 0 0 #f18b12;
+      box-shadow:0 0 0 0 #f18d13;
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
     }
     70%{
-      box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
+      box-shadow:0 0 0 7px rgba(241, 141, 19, 0);
       box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
+      box-shadow:0 0 0 0 rgba(241, 141, 19, 0);
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
     }
   }
@@ -187,8 +187,8 @@
   top:-6px;
   right:-6px;
   border-radius:100%;
-  background-color:#D30A0A;
-  border:2px solid #FFF;
+  background-color:#d10a0a;
+  border:2px solid white;
   background-color:var(--iui-color-foreground-negative);
   border:2px solid var(--iui-color-background-1);
 }
@@ -206,29 +206,29 @@
 @media (prefers-reduced-motion: no-preference){
   @-webkit-keyframes pulse-negative{
     0%{
-      box-shadow:0 0 0 0 #d30a0a;
+      box-shadow:0 0 0 0 #d10a0a;
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
     }
     70%{
-      box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
+      box-shadow:0 0 0 7px rgba(209, 10, 10, 0);
       box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
+      box-shadow:0 0 0 0 rgba(209, 10, 10, 0);
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
     }
   }
   @keyframes pulse-negative{
     0%{
-      box-shadow:0 0 0 0 #d30a0a;
+      box-shadow:0 0 0 0 #d10a0a;
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
     }
     70%{
-      box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
+      box-shadow:0 0 0 7px rgba(209, 10, 10, 0);
       box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
+      box-shadow:0 0 0 0 rgba(209, 10, 10, 0);
       box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
     }
   }
@@ -245,8 +245,8 @@
   top:-6px;
   right:-6px;
   border-radius:100%;
-  background-color:#FFF;
-  border:2px solid #FFF;
+  background-color:white;
+  border:2px solid white;
   background-color:var(--iui-color-foreground-accessory);
   border:2px solid var(--iui-color-background-1);
 }

package/css/progress-indicator.css

@@ -14,14 +14,14 @@
   width:100%;
   height:4px;
   overflow:hidden;
-  background-color:#C7CCD1;
-  background-color:var(--iui-color-background-5);
+  background-color:#c7ccd1;
+  background-color:var(--iui-color-background-border);
 }
 .iui-progress-indicator-linear > .iui-track > .iui-fill{
   display:inline-block;
   height:100%;
   vertical-align:top;
-  background-color:#008BE1;
+  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 .iui-progress-indicator-linear > .iui-label{
@@ -49,47 +49,47 @@
 }
 .iui-progress-indicator-linear.iui-positive > .iui-track,
 .iui-progress-indicator-linear.iui-positive > .iui-track > *{
-  background-color:#53A21A;
+  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label{
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label svg{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-positive > .iui-label > span *::-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-progress-indicator-linear.iui-positive > .iui-label > span::selection,
 .iui-progress-indicator-linear.iui-positive > .iui-label > span *::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-progress-indicator-linear.iui-negative > .iui-track > *{
   width:100%;
-  background-color:#D30A0A;
+  background-color:#d10a0a;
   background-color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label{
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label svg{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-negative > .iui-label > span *::-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-progress-indicator-linear.iui-negative > .iui-label > span::selection,
 .iui-progress-indicator-linear.iui-negative > .iui-label > span *::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-progress-indicator-linear > .iui-track > .iui-determinate{
   transition:width 2s ease-in-out;
@@ -132,7 +132,7 @@
   box-sizing:border-box;
   height:100%;
   width:100%;
-  color:#008BE1;
+  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-progress-indicator-radial-ie::after{
@@ -147,8 +147,8 @@
   background-color:transparent;
   -webkit-animation:dash 0.8s linear infinite;
           animation:dash 0.8s linear infinite;
-  border-bottom-color:#C7CCD1;
-  border-bottom-color:var(--iui-color-background-5);
+  border-bottom-color:#c7ccd1;
+  border-bottom-color:var(--iui-color-background-border);
 }
 @-webkit-keyframes dash{
   0%{
@@ -178,13 +178,13 @@
   width:100%;
 }
 .iui-progress-indicator-radial > .iui-radial > circle.iui-fill{
-  stroke:#008BE1;
+  stroke:#008ae0;
   stroke:var(--iui-color-foreground-primary);
   fill:none;
   stroke-width:3.2;
 }
 .iui-progress-indicator-radial > .iui-radial > circle.iui-track{
-  stroke:#C7CCD1;
+  stroke:#c7ccd1;
   stroke:var(--iui-color-background-5);
   fill:none;
   stroke-width:3.2;
@@ -220,48 +220,48 @@
   fill:var(--iui-icons-color-actionable-hover);
 }
 .iui-progress-indicator-radial.iui-positive{
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-fill,
 .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-track{
-  stroke:#53A21A;
+  stroke:#53a21a;
   stroke:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-progress-indicator-radial.iui-positive .iui-progress-indicator-radial-ie{
-  color:#53A21A;
+  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-positive .iui-progress-indicator-radial-ie::after{
   -webkit-animation:none;
           animation:none;
-  border-bottom-color:#53A21A;
+  border-bottom-color:#53a21a;
   border-bottom-color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-negative{
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{
-  stroke:#D30A0A;
+  stroke:#d10a0a;
   stroke:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 .iui-progress-indicator-radial.iui-negative .iui-progress-indicator-radial-ie{
-  color:#D30A0A;
+  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-negative .iui-progress-indicator-radial-ie::after{
   -webkit-animation:none;
           animation:none;
-  border-bottom-color:#D30A0A;
+  border-bottom-color:#d10a0a;
   border-bottom-color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-x-small{

package/css/side-navigation.css

@@ -7,10 +7,10 @@
   flex:0 0 auto;
   flex-direction:column;
   height:100%;
-  background-color:#EEF0F3;
-  border-right:1px solid #C7CCD1;
+  background-color:#edeff2;
+  border-right:1px solid #c7ccd1;
   background-color:var(--iui-color-background-3);
-  border-right:1px solid var(--iui-color-background-5);
+  border-right:1px solid var(--iui-color-background-border);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-side-navigation{
@@ -43,8 +43,8 @@
 }
 .iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
   border:none;
-  border-top:1px solid #C7CCD1;
-  border-top:1px solid var(--iui-color-background-5);
+  border-top:1px solid #c7ccd1;
+  border-top:1px solid var(--iui-color-background-border);
 }
 .iui-side-navigation.iui-collapsed{
   min-width:72px;
@@ -87,8 +87,8 @@
   text-overflow:ellipsis;
 }
 .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
-  border-color:#C7CCD1;
-  border-color:var(--iui-color-background-5);
+  border-color:#c7ccd1;
+  border-color:var(--iui-color-background-border);
 }
 .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
   width:24px;
@@ -96,19 +96,19 @@
   flex-shrink:0;
 }
 .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-color-foreground-primary);
 }
 .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
-  background-color:#F8F9FB;
+  background-color:#f9f9fb;
   background-color:var(--iui-color-background-2);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand{
   height:22px;
   justify-content:center;
   border:none;
-  border-bottom:1px solid #C7CCD1;
-  border-bottom:1px solid var(--iui-color-background-5);
+  border-bottom:1px solid #c7ccd1;
+  border-bottom:1px solid var(--iui-color-background-border);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
   fill:rgba(0, 0, 0, 0.4);
@@ -118,19 +118,19 @@
   height:12px;
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
-  fill:#F18B12;
+  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -148,10 +148,10 @@
   overflow-y:auto;
   overflow-y:overlay;
   resize:horizontal;
-  background-color:#FFF;
-  border-right:1px solid #C7CCD1;
+  background-color:white;
+  border-right:1px solid #c7ccd1;
   background-color:var(--iui-color-background-1);
-  border-right:1px solid var(--iui-color-background-5);
+  border-right:1px solid var(--iui-color-background-border);
 }
 .iui-side-navigation-submenu.iui-enter{
   opacity:0;

package/css/skip-to-content.css

@@ -5,7 +5,7 @@
 .iui-skip-to-content-link{
   background-color:rgba(0, 0, 0, 0.8);
   background-color:rgba(0, 0, 0, var(--iui-opacity-2));
-  color:#FFF;
+  color:white;
   color:var(--iui-color-foreground-accessory);
   border-radius:9999px;
   text-decoration:none;

package/css/slider.css

@@ -24,22 +24,22 @@
 }
 .iui-slider-component-container .iui-slider-min svg.iui-informational,
 .iui-slider-component-container .iui-slider-max svg.iui-informational{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-slider-component-container .iui-slider-min svg.iui-positive,
 .iui-slider-component-container .iui-slider-max svg.iui-positive{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-slider-component-container .iui-slider-min svg.iui-warning,
 .iui-slider-component-container .iui-slider-max svg.iui-warning{
-  fill:#F18B12;
+  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-slider-component-container .iui-slider-min svg.iui-negative,
 .iui-slider-component-container .iui-slider-max svg.iui-negative{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 .iui-slider-component-container .iui-slider-min{
@@ -58,8 +58,8 @@
 }
 .iui-slider-component-container.iui-disabled .iui-slider-thumb{
   cursor:not-allowed;
-  background-color:#DCE0E3;
-  border-color:#DCE0E3;
+  background-color:#dde1e4;
+  border-color:#dde1e4;
   background-color:var(--iui-color-background-4);
   border-color:var(--iui-color-background-4);
 }
@@ -109,7 +109,7 @@
   height:11px;
   line-height:44px;
   margin-bottom:22px;
-  background-color:#DCE0E3;
+  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
 
@@ -118,8 +118,8 @@
   width:100%;
   height:4px;
   top:12px;
-  background-color:#DCE0E3;
-  background-color:var(--iui-color-background-4);
+  background-color:#c7ccd1;
+  background-color:var(--iui-color-background-border);
 }
 
 .iui-slider-thumb{
@@ -132,10 +132,10 @@
   z-index:1;
   cursor:-webkit-grab;
   cursor:grab;
-  background:#FFF;
-  border:1px solid #C7CCD1;
+  background:white;
+  border:1px solid #c7ccd1;
   background:var(--iui-color-background-1);
-  border:1px solid var(--iui-color-background-5);
+  border:1px solid var(--iui-color-background-border);
 }
 .iui-slider-thumb:focus-visible{
   outline:2px solid var(--iui-color-foreground-primary);
@@ -158,6 +158,6 @@
   height:4px;
   left:0;
   top:12px;
-  background-color:#008BE1;
+  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }

package/css/surface.css

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-surface{
+  --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);
+}
+@media (forced-colors: active){
+  .iui-surface{
+    border:1px solid transparent;
+  }
+}