@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

package/css/date-picker.css

@@ -4,20 +4,17 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-date-picker{
   --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);
+  --iui-surface-border-radius:var(--iui-border-radius-1);
+  --iui-surface-elevation:var(--iui-shadow-1);
   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);
+  color:var(--iui-color-foreground-2);
   -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){
@@ -35,10 +32,9 @@
   width:100%;
   align-items:center;
   justify-content:space-between;
-  padding:0 4px;
-  box-sizing:border-box;
-  font-weight:700;
-  gap:4px;
+  padding:0 var(--iui-size-2xs);
+  font-weight:var(--iui-font-weight-bold);
+  gap:var(--iui-size-2xs);
 }
 .iui-calendar-month-year > span{
   width:156px;
@@ -47,7 +43,7 @@
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  line-height:44px;
+  line-height:calc(var(--iui-size-s) * 4);
 }
 
 .iui-calendar-month{
@@ -61,9 +57,8 @@
 .iui-calendar-weekdays{
   line-height:36px;
   display:flex;
-  padding:0 8px;
-  font-weight:700;
-  background-color:#f9f9fb;
+  padding:0 var(--iui-size-xs);
+  font-weight:var(--iui-font-weight-bold);
   background-color:var(--iui-color-background-2);
 }
 .iui-calendar-weekdays > div{
@@ -77,8 +72,8 @@
   white-space:nowrap;
   line-height:36px;
   display:flex;
-  padding:0 8px;
-  margin-bottom:2px;
+  padding:0 var(--iui-size-xs);
+  margin-bottom:var(--iui-size-3xs);
 }
 
 .iui-calendar-day, .iui-calendar-day-today{
@@ -86,7 +81,7 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
 }
 .iui-calendar-day:focus-visible, .iui-calendar-day-today:focus-visible{
@@ -100,15 +95,12 @@
   }
 }
 .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));
+  font-weight:var(--iui-font-weight-semibold);
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-calendar-day-today{
   position:relative;
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }
 .iui-calendar-day-today::before{
   content:"";
@@ -116,22 +108,14 @@
   display:block;
   width:32px;
   height:32px;
-  border-radius:9999px;
-  box-sizing:border-box;
+  border-radius:var(--iui-border-radius-round);
   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));
+  border:2px solid var(--iui-color-foreground-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));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 
 .iui-calendar-day-selected, .iui-calendar-day-selected-today{
@@ -139,11 +123,9 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
-  font-weight:600;
-  background-color:#008ae0;
-  color:white;
+  font-weight:var(--iui-font-weight-semibold);
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
   cursor:default;
@@ -170,7 +152,7 @@
 }
 .iui-calendar-day-selected-today{
   position:relative;
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }
 .iui-calendar-day-selected-today::before{
   content:"";
@@ -178,36 +160,24 @@
   display:block;
   width:32px;
   height:32px;
-  border-radius:9999px;
-  box-sizing:border-box;
+  border-radius:var(--iui-border-radius-round);
   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));
+  border:2px solid var(--iui-color-foreground-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));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .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));
+  border-color:rgba(255, 255, 255, var(--iui-opacity-4));
 }
 
 .iui-calendar-day-outside-month, .iui-calendar-day-outside-month-today{
@@ -215,10 +185,9 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-calendar-day-outside-month:focus-visible, .iui-calendar-day-outside-month-today:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -231,15 +200,12 @@
   }
 }
 .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));
+  font-weight:var(--iui-font-weight-semibold);
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-calendar-day-outside-month-today{
   position:relative;
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }
 .iui-calendar-day-outside-month-today::before{
   content:"";
@@ -247,22 +213,14 @@
   display:block;
   width:32px;
   height:32px;
-  border-radius:9999px;
-  box-sizing:border-box;
+  border-radius:var(--iui-border-radius-round);
   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));
+  border:2px solid var(--iui-color-foreground-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));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 
 .iui-calendar-day-range-start, .iui-calendar-day-range-start-today{
@@ -270,11 +228,9 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
-  font-weight:600;
-  background-color:#008ae0;
-  color:white;
+  font-weight:var(--iui-font-weight-semibold);
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
   border-top-right-radius:0;
@@ -303,7 +259,7 @@
 }
 .iui-calendar-day-range-start-today{
   position:relative;
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }
 .iui-calendar-day-range-start-today::before{
   content:"";
@@ -311,36 +267,24 @@
   display:block;
   width:32px;
   height:32px;
-  border-radius:9999px;
-  box-sizing:border-box;
+  border-radius:var(--iui-border-radius-round);
   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));
+  border:2px solid var(--iui-color-foreground-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));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .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));
+  border-color:rgba(255, 255, 255, var(--iui-opacity-4));
 }
 
 .iui-calendar-day-range-end, .iui-calendar-day-range-end-today{
@@ -348,11 +292,9 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
-  font-weight:600;
-  background-color:#008ae0;
-  color:white;
+  font-weight:var(--iui-font-weight-semibold);
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
   border-top-left-radius:0;
@@ -380,7 +322,7 @@
 }
 .iui-calendar-day-range-end-today{
   position:relative;
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }
 .iui-calendar-day-range-end-today::before{
   content:"";
@@ -388,36 +330,24 @@
   display:block;
   width:32px;
   height:32px;
-  border-radius:9999px;
-  box-sizing:border-box;
+  border-radius:var(--iui-border-radius-round);
   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));
+  border:2px solid var(--iui-color-foreground-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));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .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));
+  border-color:rgba(255, 255, 255, var(--iui-opacity-4));
 }
 
 .iui-calendar-day-range, .iui-calendar-day-range-today{
@@ -425,13 +355,11 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   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);
+  background-color:var(--iui-color-background-subtle-primary);
+  color:var(--iui-color-foreground-2);
 }
 .iui-calendar-day-range:focus-visible, .iui-calendar-day-range-today:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -444,13 +372,12 @@
   }
 }
 .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));
+  font-weight:var(--iui-font-weight-semibold);
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-calendar-day-range-today{
   position:relative;
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }
 .iui-calendar-day-range-today::before{
   content:"";
@@ -458,34 +385,19 @@
   display:block;
   width:32px;
   height:32px;
-  border-radius:9999px;
-  box-sizing:border-box;
+  border-radius:var(--iui-border-radius-round);
   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));
+  border:2px solid var(--iui-color-foreground-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));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .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));
+  background-color:var(--iui-color-background-transparent-hover);
+  color:var(--iui-color-foreground-2);
 }
 .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));
+  border-color:var(--iui-color-foreground-primary);
 }

package/css/dialog.css

@@ -16,19 +16,15 @@
 .iui-dialog{
   z-index:999;
   isolation:isolate;
-  border-radius:4px;
-  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
-  box-sizing:border-box;
+  border-radius:var(--iui-border-radius-1);
+  box-shadow:var(--iui-shadow-5);
   position:fixed;
-  padding:11px 16px;
-  box-sizing:border-box;
-  padding:11px 16px;
+  padding:var(--iui-size-s) var(--iui-size-m);
   overflow:hidden;
   pointer-events:auto;
-  background-color:#FFF;
   background-color:var(--iui-color-background-1);
-  transition:visibility 0s linear, opacity 0.2s ease-out;
-  transition-delay:0.2s, 0s;
+  transition:visibility var(--iui-duration-0) linear, opacity var(--iui-duration-1) ease-out;
+  transition-delay:var(--iui-duration-1), var(--iui-duration-0);
 }
 @media (forced-colors: active){
   .iui-dialog{
@@ -40,7 +36,7 @@
   opacity:0;
 }
 .iui-dialog.iui-dialog-visible{
-  transition-delay:0s;
+  transition-delay:var(--iui-duration-0);
 }
 
 .iui-dialog-default{
@@ -56,26 +52,26 @@
 .iui-dialog-default[data-iui-placement=top-left]{
   top:0;
   left:0;
-  margin-left:11px;
-  margin-top:16px;
+  margin-left:var(--iui-size-s);
+  margin-top:var(--iui-size-m);
 }
 .iui-dialog-default[data-iui-placement=top-right]{
   top:0;
   right:0;
-  margin-right:11px;
-  margin-top:16px;
+  margin-right:var(--iui-size-s);
+  margin-top:var(--iui-size-m);
 }
 .iui-dialog-default[data-iui-placement=bottom-left]{
   bottom:0;
   left:0;
-  margin-left:11px;
-  margin-bottom:16px;
+  margin-left:var(--iui-size-s);
+  margin-bottom:var(--iui-size-m);
 }
 .iui-dialog-default[data-iui-placement=bottom-right]{
   bottom:0;
   right:0;
-  margin-right:11px;
-  margin-bottom:16px;
+  margin-right:var(--iui-size-s);
+  margin-bottom:var(--iui-size-m);
 }
 
 .iui-dialog-full-page{
@@ -94,10 +90,10 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-dialog-full-page{
-    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.2s ease-in;
+    transition:visibility var(--iui-duration-0) linear var(--iui-duration-2), opacity var(--iui-duration-0) linear var(--iui-duration-2), transform var(--iui-duration-1) ease-in;
   }
   .iui-dialog-full-page.iui-dialog-visible{
-    transition:transform 0.4s ease-out;
+    transition:transform var(--iui-duration-2) ease-out;
   }
 }
 
@@ -125,15 +121,15 @@
 .iui-dialog-title-bar{
   display:flex;
   align-items:center;
-  margin-bottom:11px;
+  margin-bottom:var(--iui-size-s);
   box-sizing:border-box;
-  font-size:18px;
+  font-size:var(--iui-font-size-3);
 }
 
 .iui-dialog-title-bar-filled{
-  font-size:16px;
-  padding:6px 16px;
-  margin:-11px -16px 11px -16px;
+  font-size:var(--iui-font-size-2);
+  padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-m);
+  margin:calc(0px - var(--iui-size-s)) calc(0px - var(--iui-size-m)) var(--iui-size-s) calc(0px - var(--iui-size-m));
   cursor:-webkit-grab;
   cursor:grab;
   background-color:var(--iui-color-background-3);
@@ -146,18 +142,18 @@
 
 .iui-dialog-content{
   flex-grow:2;
-  margin:0 -16px;
-  padding:0 16px;
+  margin:0 calc(0px - var(--iui-size-m));
+  padding:0 var(--iui-size-m);
   overflow-y:auto;
   overflow-y:overlay;
 }
 
 .iui-dialog-button-bar{
-  margin-top:11px;
+  margin-top:var(--iui-size-s);
   display:flex;
   align-items:center;
   justify-content:flex-end;
-  gap:8px;
+  gap:var(--iui-size-xs);
 }
 
 .iui-dialog-animation-enter{