@itwin/itwinui-css 0.52.0 → 0.53.2

package/css/badge.css

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-badge{
-  --iui-badge-background-color:#C7CCD1;
+  --iui-badge-background-color:#c7ccd1;
   --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
   margin:0;
   padding:0;

package/css/blockquote.css

@@ -14,8 +14,8 @@
   text-align:justify;
   box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
   border-radius:3px;
-  background-color:#FFF;
-  border-left:8px solid #008BE1;
+  background-color:white;
+  border-left:8px solid #008ae0;
   background-color:var(--iui-color-background-1);
   border-left:8px solid var(--iui-color-foreground-primary);
 }

package/css/breadcrumbs.css

@@ -36,7 +36,7 @@
   border-radius:3px;
   text-decoration:none;
   cursor:pointer;
-  color:#008BE1;
+  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-breadcrumbs-item a:focus-visible{
@@ -50,7 +50,7 @@
   }
 }
 .iui-breadcrumbs-item a:hover{
-  color:#006bae;
+  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
   text-decoration:underline;
 }
@@ -73,16 +73,16 @@
   border-color:transparent;
 }
 .iui-breadcrumbs-item .iui-button.iui-active{
-  background-color:rgba(0, 139, 225, 0.1);
-  color:#008BE1;
+  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-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  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);
@@ -103,11 +103,11 @@
   text-overflow:ellipsis;
 }
 .iui-breadcrumbs-item:not(.iui-current) > .iui-button{
-  color:#008BE1;
+  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-breadcrumbs-item:not(.iui-current) > .iui-button:hover{
-  color:#006bae;
+  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 
@@ -123,18 +123,18 @@
   display:flex;
 }
 .iui-breadcrumbs-separator svg.iui-informational{
-  fill:#008BE1;
+  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-breadcrumbs-separator svg.iui-positive{
-  fill:#53A21A;
+  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-breadcrumbs-separator svg.iui-warning{
-  fill:#F18B12;
+  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-breadcrumbs-separator svg.iui-negative{
-  fill:#D30A0A;
+  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }

package/css/button.css

@@ -59,8 +59,8 @@
 }
 .iui-button[disabled], .iui-button:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  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);
@@ -76,7 +76,7 @@
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 }
 .iui-button.iui-default{
-  background-color:#FFF;
+  background-color:white;
   border-color:rgba(0, 0, 0, 0.4);
   color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-1);
@@ -122,29 +122,29 @@
 }
 .iui-button.iui-default.iui-active:enabled{
   position:relative;
-  color:#008BE1;
+  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-button.iui-default.iui-active:enabled::before{
   content:"";
   position:absolute;
   inset:0;
-  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-button.iui-default[disabled], .iui-button.iui-default:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  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));
 }
 .iui-button.iui-high-visibility{
-  background-color:#008BE1;
-  border-color:#008BE1;
-  color:#FFF;
+  background-color:#008ae0;
+  border-color:#008ae0;
+  color:white;
   background-color:var(--iui-color-background-primary);
   border-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
@@ -160,26 +160,26 @@
   }
 }
 .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
-  background-color:#006bae;
-  border-color:#006bae;
-  color:#FFF;
+  background-color:#006bad;
+  border-color:#006bad;
+  color:white;
   background-color:var(--iui-color-background-primary-overlay);
   border-color:var(--iui-color-background-primary-overlay);
   color:var(--iui-color-foreground-accessory);
 }
 .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  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));
 }
 .iui-button.iui-cta{
-  background-color:#53A21A;
-  border-color:#53A21A;
-  color:#FFF;
+  background-color:#53a21a;
+  border-color:#53a21a;
+  color:white;
   background-color:var(--iui-color-background-positive);
   border-color:var(--iui-color-background-positive);
   color:var(--iui-color-foreground-accessory);
@@ -195,26 +195,26 @@
   }
 }
 .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
-  background-color:#3c7613;
-  border-color:#3c7613;
-  color:#FFF;
+  background-color:#3d7613;
+  border-color:#3d7613;
+  color:white;
   background-color:var(--iui-color-background-positive-overlay);
   border-color:var(--iui-color-background-positive-overlay);
   color:var(--iui-color-foreground-accessory);
 }
 .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  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));
 }
 .iui-button.iui-idea{
-  background-color:#008BE1;
-  border-color:#008BE1;
-  color:#FFF;
+  background-color:#008ae0;
+  border-color:#008ae0;
+  color:white;
   background-color:var(--iui-color-background-primary);
   border-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
@@ -235,17 +235,17 @@
   }
 }
 .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
-  background-color:#006bae;
-  border-color:#006bae;
-  color:#FFF;
+  background-color:#006bad;
+  border-color:#006bad;
+  color:white;
   background-color:var(--iui-color-background-primary-overlay);
   border-color:var(--iui-color-background-primary-overlay);
   color:var(--iui-color-foreground-accessory);
 }
 .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  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);
@@ -269,16 +269,16 @@
   border-color:transparent;
 }
 .iui-button.iui-borderless.iui-active{
-  background-color:rgba(0, 139, 225, 0.1);
-  color:#008BE1;
+  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-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  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);
@@ -319,7 +319,6 @@
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-group > *{
   display:flex;
@@ -402,12 +401,14 @@
 .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
   border-top-color:var(--iui-color-background-4);
 }
+.iui-button-group-overflow-x{
+  width:100%;
+}
 
 .iui-button-split-menu{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-split-menu > *{
   display:flex;
@@ -478,8 +479,8 @@
 }
 .iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
   cursor:not-allowed;
-  background:#EEF0F3;
-  border-color:#EEF0F3;
+  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);

package/css/carousel.css

@@ -23,17 +23,12 @@
   list-style:none;
   margin:0;
   padding:0;
-  overflow-x:auto;
-  overflow-x:overlay;
   -ms-scroll-snap-type:x mandatory;
       scroll-snap-type:x mandatory;
+  overflow-x:auto;
+  overflow-x:overlay;
   scrollbar-width:none;
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-carousel-slider{
-    scroll-behavior:smooth;
-  }
-}
 .iui-carousel-slider::-webkit-scrollbar{
   display:none;
 }
@@ -49,7 +44,7 @@
   align-items:center;
   height:33px;
   box-sizing:border-box;
-  border-top:2px solid #DCE0E3;
+  border-top:2px solid #dde1e4;
   border-top:2px solid var(--iui-color-background-4);
 }
 .iui-carousel-navigation-left, .iui-carousel-navigation-right{
@@ -59,7 +54,7 @@
 }
 .iui-carousel-navigation-left button[data-pressed=true], .iui-carousel-navigation-right button[data-pressed=true]{
   outline-offset:-1px;
-  outline:1px solid #008BE1;
+  outline:1px solid #008ae0;
   outline:1px solid var(--iui-color-foreground-primary);
 }
 .iui-carousel-navigation-dots{
@@ -67,15 +62,13 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  display:flex;
-  align-items:center;
   flex:2;
   max-width:256px;
   border-radius:3px;
   white-space:nowrap;
-  overflow:hidden;
-  justify-content:center;
-  list-style:none;
+  overflow-x:auto;
+  overflow-x:overlay;
+  scrollbar-width:none;
 }
 .iui-carousel-navigation-dots:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -87,6 +80,9 @@
     outline-offset:-1px;
   }
 }
+.iui-carousel-navigation-dots::-webkit-scrollbar{
+  display:none;
+}
 .iui-carousel-navigation-dot{
   padding:0 8px;
   height:27px;
@@ -99,32 +95,18 @@
   background-color:rgba(0, 0, 0, 0.6);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
 }
-.iui-carousel-navigation-dot.iui-invisible{
-  -webkit-clip-path:inset(50%);
-          clip-path:inset(50%);
-  overflow:hidden;
-  position:absolute;
-  white-space:nowrap;
-  height:1px;
-  width:1px;
-  padding:0;
-  margin:-1px;
-  border-width:0;
-}
 .iui-carousel-navigation-dot::after{
   content:"";
   display:block;
   width:12px;
   height:12px;
   border-radius:50%;
-  transition:background-color 0.2s ease;
+  box-sizing:border-box;
+  border:1px solid transparent;
   background-color:rgba(0, 0, 0, 0.4);
+  box-shadow:inset 0 0 0 0 white;
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-carousel-navigation-dot::after{
-    transition:background-color 0.2s 0.2s ease, transform 0.4s ease;
-  }
+  box-shadow:inset 0 0 0 0 var(--iui-color-background-1);
 }
 .iui-carousel-navigation-dot.iui-first::after{
   transform:scale(0.5);
@@ -132,12 +114,18 @@
 .iui-carousel-navigation-dot.iui-second::after{
   transform:scale(0.75);
 }
-.iui-carousel-navigation-dot.iui-invisible::after{
-  transform:scale(0);
-}
 .iui-carousel-navigation-dot.iui-active::after{
-  background-color:#008BE1;
+  background-color:#008ae0;
+  border-color:#008ae0;
+  box-shadow:inset 0 0 0 1px white;
   background-color:var(--iui-color-foreground-primary);
+  border-color:var(--iui-color-foreground-primary);
+  box-shadow:inset 0 0 0 1px var(--iui-color-background-1);
+}
+@media (forced-colors: active){
+  .iui-carousel-navigation-dot.iui-active::after{
+    border-width:6px;
+  }
 }
 .iui-carousel-navigation-right{
   justify-content:flex-end;

package/css/code.css

@@ -15,7 +15,7 @@
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  background-color:#EEF0F3;
+  background-color:#edeff2;
   color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-3);
   color:var(--iui-text-color);
@@ -32,7 +32,7 @@
   display:flex;
   align-items:center;
   border-radius:3px 3px 0 0;
-  background-color:#EEF0F3;
+  background-color:#edeff2;
   background-color:var(--iui-color-background-3);
 }
 .iui-codeblock > .iui-title-bar > .iui-title{
@@ -53,7 +53,7 @@
   overflow-y:auto;
   border-radius:0 0 3px 3px;
   white-space:normal;
-  border:1px solid #EEF0F3;
+  border:1px solid #edeff2;
   border:1px solid var(--iui-color-background-3);
 }
 .iui-codeblock > .iui-codeblock-content:focus-visible{
@@ -75,7 +75,7 @@
           hyphens:auto;
   counter-increment:section;
   font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
-  background-color:#FFF;
+  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
@@ -88,7 +88,7 @@
   display:inline-block;
   padding:0 8px;
   width:24px;
-  background-color:#F8F9FB;
+  background-color:#f9f9fb;
   color:rgba(0, 0, 0, 0.4);
   background-color:var(--iui-color-background-2);
   color:var(--iui-text-color-muted);

package/css/color-picker.css

@@ -4,14 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-color-picker{
   --iui-color-picker-selected-color:initial;
-  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);
+  --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);
   box-sizing:border-box;
   border-radius:3px;
@@ -25,6 +24,11 @@
   flex-direction:column;
   max-height:495px;
 }
+@media (forced-colors: active){
+  .iui-color-picker{
+    border:1px solid transparent;
+  }
+}
 @supports (overflow-y: overlay){
   .iui-color-picker{
     overflow-y:overlay;
@@ -120,7 +124,7 @@
   background-color:var(--iui-color-swatch-background);
   background-position:0 0, 8px 8px;
   background-size:16px 16px;
-  background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
+  background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
   background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
 }
 @supports (gap: 8px){
@@ -199,7 +203,7 @@
   height:8px;
   background-position:0 0, 4px 4px;
   background-size:8px 8px;
-  background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
+  background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
   background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
 }
 .iui-opacity-slider .iui-slider-rail::before{