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

package/css/date-picker.css

@@ -9,15 +9,12 @@
   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);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  display:-ms-inline-grid;
   display:inline-grid;
-  -ms-grid-columns:1fr auto;
   grid-template-columns:1fr auto;
 }
 @media (forced-colors: active){
@@ -36,7 +33,6 @@
   align-items:center;
   justify-content:space-between;
   padding:0 4px;
-  box-sizing:border-box;
   font-weight:700;
   gap:4px;
 }
@@ -63,7 +59,6 @@
   display:flex;
   padding:0 8px;
   font-weight:700;
-  background-color:#f9f9fb;
   background-color:var(--iui-color-background-2);
 }
 .iui-calendar-weekdays > div{
@@ -86,7 +81,7 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
 }
 .iui-calendar-day:focus-visible, .iui-calendar-day-today:focus-visible{
@@ -101,8 +96,6 @@
 }
 .iui-calendar-day:hover, .iui-calendar-day-today:hover{
   font-weight:600;
-  color:#008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
   color:var(--iui-color-foreground-primary);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
@@ -117,20 +110,16 @@
   width:32px;
   height:32px;
   border-radius:9999px;
-  box-sizing:border-box;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid rgba(0, 0, 0, 0.2);
   border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 }
 .iui-calendar-day-today:hover{
   background-color:initial;
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-calendar-day-today:hover::before{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 
@@ -139,11 +128,9 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
   font-weight:600;
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
   cursor:default;
@@ -179,34 +166,26 @@
   width:32px;
   height:32px;
   border-radius:9999px;
-  box-sizing:border-box;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid rgba(0, 0, 0, 0.2);
   border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 }
 .iui-calendar-day-selected-today:hover{
   background-color:initial;
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-calendar-day-selected-today:hover::before{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-calendar-day-selected-today:hover{
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
 }
 .iui-calendar-day-selected-today:hover::before{
   background-color:initial;
-  background-color:initial;
 }
 .iui-calendar-day-selected-today::before{
-  border-color:rgba(255, 255, 255, 0.4);
   border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
 }
 
@@ -215,9 +194,8 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-calendar-day-outside-month:focus-visible, .iui-calendar-day-outside-month-today:focus-visible{
@@ -232,8 +210,6 @@
 }
 .iui-calendar-day-outside-month:hover, .iui-calendar-day-outside-month-today:hover{
   font-weight:600;
-  color:#008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
   color:var(--iui-color-foreground-primary);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
@@ -248,20 +224,16 @@
   width:32px;
   height:32px;
   border-radius:9999px;
-  box-sizing:border-box;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid rgba(0, 0, 0, 0.2);
   border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 }
 .iui-calendar-day-outside-month-today:hover{
   background-color:initial;
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-calendar-day-outside-month-today:hover::before{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 
@@ -270,11 +242,9 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
   font-weight:600;
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
   border-top-right-radius:0;
@@ -312,34 +282,26 @@
   width:32px;
   height:32px;
   border-radius:9999px;
-  box-sizing:border-box;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid rgba(0, 0, 0, 0.2);
   border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 }
 .iui-calendar-day-range-start-today:hover{
   background-color:initial;
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-calendar-day-range-start-today:hover::before{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-calendar-day-range-start-today:hover{
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
 }
 .iui-calendar-day-range-start-today:hover::before{
   background-color:initial;
-  background-color:initial;
 }
 .iui-calendar-day-range-start-today::before{
-  border-color:rgba(255, 255, 255, 0.4);
   border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
 }
 
@@ -348,11 +310,9 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
   font-weight:600;
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
   border-top-left-radius:0;
@@ -389,34 +349,26 @@
   width:32px;
   height:32px;
   border-radius:9999px;
-  box-sizing:border-box;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid rgba(0, 0, 0, 0.2);
   border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 }
 .iui-calendar-day-range-end-today:hover{
   background-color:initial;
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-calendar-day-range-end-today:hover::before{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-calendar-day-range-end-today:hover{
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
 }
 .iui-calendar-day-range-end-today:hover::before{
   background-color:initial;
-  background-color:initial;
 }
 .iui-calendar-day-range-end-today::before{
-  border-color:rgba(255, 255, 255, 0.4);
   border-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
 }
 
@@ -425,11 +377,9 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
   border-radius:0;
-  background-color:rgba(0, 138, 224, 0.2);
-  color:rgba(0, 0, 0, 0.8);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
   color:var(--iui-text-color);
 }
@@ -445,7 +395,6 @@
 }
 .iui-calendar-day-range:hover, .iui-calendar-day-range-today:hover{
   font-weight:600;
-  background-color:rgba(0, 138, 224, 0.4);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
 }
 .iui-calendar-day-range-today{
@@ -459,33 +408,25 @@
   width:32px;
   height:32px;
   border-radius:9999px;
-  box-sizing:border-box;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid rgba(0, 0, 0, 0.2);
   border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 }
 .iui-calendar-day-range-today:hover{
   background-color:initial;
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-calendar-day-range-today:hover::before{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-calendar-day-range-today:hover{
-  background-color:rgba(0, 138, 224, 0.2);
-  color:rgba(0, 0, 0, 0.8);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
   color:var(--iui-text-color);
 }
 .iui-calendar-day-range-today:hover::before{
-  background-color:rgba(0, 138, 224, 0.4);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
 }
 .iui-calendar-day-range-today::before{
-  border-color:rgba(0, 138, 224, 0.4);
   border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
 }

package/css/dialog.css

@@ -2,115 +2,108 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-dialog-backdrop{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  z-index:999;
-  isolation:isolate;
-  position:fixed;
+.iui-dialog-wrapper{
+  position:relative;
+  overflow:hidden;
   top:0;
   left:0;
   width:100%;
   height:100%;
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-  visibility:hidden;
-  opacity:0;
-  transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
-}
-.iui-dialog-backdrop.iui-dialog-visible{
-  visibility:visible;
-  opacity:1;
-  transition-delay:0s;
-}
-.iui-dialog-backdrop.iui-dialog-backdrop-relative{
-  position:relative;
-  overflow:hidden;
+  pointer-events:none;
+  transform:translateX(0);
 }
 
 .iui-dialog{
-  border-radius:3px;
+  z-index:999;
+  isolation:isolate;
+  border-radius:4px;
   box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
-  box-sizing:border-box;
-  position:absolute;
-  padding:11px 16px;
-  box-sizing:border-box;
+  position:fixed;
   padding:11px 16px;
   overflow:hidden;
-  background-color:white;
+  pointer-events:auto;
   background-color:var(--iui-color-background-1);
+  transition:visibility 0s linear, opacity 0.2s ease-out;
+  transition-delay:0.2s, 0s;
 }
 @media (forced-colors: active){
   .iui-dialog{
     border:1px solid;
   }
 }
+.iui-dialog:not(.iui-dialog-visible){
+  visibility:hidden;
+  opacity:0;
+}
+.iui-dialog.iui-dialog-visible{
+  transition-delay:0s;
+}
 
-.iui-dialog-default .iui-dialog{
+.iui-dialog-default{
+  max-width:max(50%, 380px);
+  min-width:380px;
+  max-height:100vh;
+}
+.iui-dialog-default:not([data-iui-placement]){
   left:50%;
   top:33%;
   transform:translate(-50%, -33%);
-  max-width:50%;
-  min-width:380px;
-  max-height:100vh;
 }
-@media screen and (max-width: 400px){
-  .iui-dialog-default .iui-dialog{
-    max-width:95%;
-    width:95%;
-    min-width:95%;
-  }
+.iui-dialog-default[data-iui-placement=top-left]{
+  top:0;
+  left:0;
+  margin-left:11px;
+  margin-top:16px;
 }
-
-@media (prefers-reduced-motion: no-preference){
-  .iui-dialog-full-page{
-    transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
-  }
+.iui-dialog-default[data-iui-placement=top-right]{
+  top:0;
+  right:0;
+  margin-right:11px;
+  margin-top:16px;
+}
+.iui-dialog-default[data-iui-placement=bottom-left]{
+  bottom:0;
+  left:0;
+  margin-left:11px;
+  margin-bottom:16px;
+}
+.iui-dialog-default[data-iui-placement=bottom-right]{
+  bottom:0;
+  right:0;
+  margin-right:11px;
+  margin-bottom:16px;
 }
-.iui-dialog-full-page .iui-dialog{
+
+.iui-dialog-full-page{
   border-radius:0;
   height:100vh;
+  height:100dvh;
   width:100vw;
   top:0;
   left:0;
-  max-width:initial;
-  min-width:initial;
   display:flex;
   flex-direction:column;
   will-change:transform;
 }
+.iui-dialog-full-page:not(.iui-dialog-visible){
+  transform:translateY(100%);
+}
 @media (prefers-reduced-motion: no-preference){
-  .iui-dialog-full-page .iui-dialog{
-    transform:translateY(100%);
+  .iui-dialog-full-page{
     transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.2s ease-in;
   }
-}
-.iui-dialog-full-page.iui-dialog-visible .iui-dialog{
-  transform:translateY(0);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-dialog-full-page.iui-dialog-visible .iui-dialog{
+  .iui-dialog-full-page.iui-dialog-visible{
     transition:transform 0.4s ease-out;
   }
 }
 
 .iui-dialog-draggable{
-  background-color:transparent;
-  pointer-events:none;
-  z-index:998;
-}
-.iui-dialog-draggable .iui-dialog{
-  pointer-events:initial;
-  max-width:100vw;
+  max-width:100%;
   max-height:100vh;
   min-width:380px;
   min-height:144px;
   display:flex;
   flex-direction:column;
-  padding:0;
-  border:1px solid #c7ccd1;
   border:1px solid var(--iui-color-background-border);
 }
 
@@ -127,24 +120,19 @@
   align-items:center;
   margin-bottom:11px;
   justify-content:space-between;
-  box-sizing:border-box;
   font-size:18px;
 }
-.iui-dialog-draggable .iui-dialog-title-bar{
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
+
+.iui-dialog-title-bar-filled{
   font-size:16px;
   padding:6px 16px;
+  margin:-11px -16px 11px -16px;
   cursor:-webkit-grab;
   cursor:grab;
-  background-color:#edeff2;
-  border-bottom:1px solid #c7ccd1;
   background-color:var(--iui-color-background-3);
   border-bottom:1px solid var(--iui-color-background-border);
 }
-.iui-dialog-draggable .iui-dialog-title-bar:active{
+.iui-dialog-title-bar-filled:active{
   cursor:-webkit-grabbing;
   cursor:grabbing;
 }
@@ -156,46 +144,20 @@
   overflow-y:auto;
   overflow-y:overlay;
 }
-.iui-dialog-draggable .iui-dialog-content{
-  margin:0;
-}
 
 .iui-dialog-button-bar{
   margin-top:11px;
   display:flex;
   align-items:center;
   justify-content:flex-end;
-}
-.iui-dialog-draggable .iui-dialog-button-bar{
-  padding:0 16px 11px 16px;
+  gap:8px;
 }
 
-.iui-dialog-button-bar > .iui-button:not(:last-child){
-  margin-right:8px;
-}
-@supports ((-moz-column-gap: 8px) or (column-gap: 8px)){
-  .iui-dialog-button-bar{
-    -moz-column-gap:8px;
-         column-gap:8px;
-  }
-  .iui-dialog-button-bar > .iui-button:not(:last-child){
-    margin-right:0;
-  }
-}
-
-.iui-dialog-animation-enter .iui-dialog-full-page .iui-dialog{
+.iui-dialog-animation-enter{
   transform:translateY(100%);
   opacity:0;
 }
-.iui-dialog-animation-enter-active .iui-dialog-full-page .iui-dialog{
+.iui-dialog-animation-enter-active{
   transform:translateY(0);
   opacity:1;
-}
-.iui-dialog-animation-enter .iui-dialog-backdrop{
-  visibility:hidden;
-  opacity:0;
-}
-.iui-dialog-animation-enter-active .iui-dialog-backdrop{
-  visibility:visible;
-  opacity:1;
 }

package/css/expandable-block.css

@@ -9,9 +9,7 @@
   vertical-align:baseline;
   display:flex;
   flex-direction:column;
-  box-sizing:border-box;
   width:100%;
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-expandable-block > .iui-header{
@@ -19,14 +17,10 @@
   align-items:center;
   padding:11px 12px;
   cursor:pointer;
-  box-sizing:border-box;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  border:1px solid #edeff2;
-  border-bottom-color:#dde1e4;
-  background-color:#edeff2;
   border:1px solid var(--iui-color-background-3);
   border-bottom-color:var(--iui-color-background-4);
   background-color:var(--iui-color-background-3);
@@ -54,7 +48,6 @@
   height:16px;
 }
 .iui-expandable-block > .iui-header > .iui-icon{
-  fill:rgba(0, 0, 0, 0.8);
   fill:var(--iui-icons-color-actionable);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -64,23 +57,18 @@
 }
 .iui-expandable-block > .iui-header > .iui-status-icon{
   margin-left:12px;
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
 }
 .iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-expandable-block > .iui-header > .iui-status-icon.iui-positive{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-expandable-block > .iui-header > .iui-status-icon.iui-warning{
-  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-expandable-block > .iui-header > .iui-status-icon.iui-negative{
-  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 .iui-expandable-block > .iui-header .iui-expandable-block-label{
@@ -89,7 +77,6 @@
   flex:auto;
   min-width:0;
   margin-left:12px;
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -108,7 +95,6 @@
 }
 .iui-expandable-block > .iui-header .iui-caption{
   font-size:12px;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-expandable-block > .iui-header:focus-visible{
@@ -123,10 +109,6 @@
 }
 .iui-expandable-block .iui-expandable-content{
   overflow:hidden;
-  box-sizing:border-box;
-  border-bottom:1px solid #dde1e4;
-  border-right:1px solid #dde1e4;
-  border-left:1px solid #dde1e4;
   border-bottom:1px solid var(--iui-color-background-4);
   border-right:1px solid var(--iui-color-background-4);
   border-left:1px solid var(--iui-color-background-4);
@@ -157,16 +139,13 @@
   padding:11px 12px;
 }
 .iui-expandable-block:hover > .iui-header{
-  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
 .iui-expandable-block:hover > .iui-header > .iui-icon{
-  fill:black;
   fill:var(--iui-icons-color-actionable-hover);
 }
 .iui-expandable-block:hover > .iui-header .iui-caption,
 .iui-expandable-block:hover > .iui-header .iui-title{
-  color:black;
   color:var(--iui-color-foreground-body);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -176,21 +155,12 @@
   }
 }
 .iui-expandable-block.iui-expanded > .iui-header{
-  background-color:#edeff2;
-  border-left:1px solid #dde1e4;
-  border-top:1px solid #dde1e4;
-  border-right:1px solid #dde1e4;
   background-color:var(--iui-color-background-3);
   border-left:1px solid var(--iui-color-background-4);
   border-top:1px solid var(--iui-color-background-4);
   border-right:1px solid var(--iui-color-background-4);
 }
 .iui-expandable-block.iui-expanded > .iui-header:hover{
-  background-color:#dde1e4;
-  background-color:var(--iui-color-background-4);
-}
-.iui-expandable-block.iui-expanded > .iui-header:hover{
-  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
 .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
@@ -216,10 +186,9 @@
   border:initial;
 }
 .iui-expandable-block.iui-borderless .iui-header{
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-expandable-block.iui-borderless .iui-header:hover{
-  background-color:rgba(0, 0, 0, 0.1);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
 .iui-expandable-block.iui-borderless .iui-expandable-content > div{