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

package/css/menu.css

@@ -5,12 +5,11 @@
 .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);
+  --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);
   margin:0;
   padding:0;
   border:none;
@@ -23,6 +22,8 @@
   width:100%;
   margin:0;
   padding:0;
+  max-height:var(--iui-menu-max-height);
+  border-radius:var(--iui-border-radius-1);
 }
 @media (forced-colors: active){
   .iui-menu{
@@ -30,28 +31,33 @@
   }
 }
 .iui-menu .iui-header-menu-icon{
-  margin:0 4px;
+  margin:0 var(--iui-size-2xs);
 }
 .iui-menu div.iui-header-menu-icon{
+  display:flex;
+  flex-shrink:0;
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
   margin:0;
-  width:24px;
-  height:24px;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-menu.iui-scroll{
   overflow-y:auto;
   overflow-y:overlay;
+  --iui-menu-max-height:315px;
 }
 
 .iui-menu-item{
   display:flex;
   align-items:center;
-  font-size:14px;
-  padding:0 13px;
-  height:38px;
+  font-size:var(--iui-font-size-1);
+  padding-block:var(--iui-size-2xs);
+  padding-inline:calc(var(--iui-size-s) + 1px);
+  min-height:var(--iui-component-height);
   cursor:pointer;
-  box-sizing:border-box;
   line-height:normal;
+  color:var(--iui-color-foreground-2);
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-menu-item + .iui-menu-item{
   margin-top:-1px;
@@ -68,49 +74,42 @@
 }
 .iui-menu-item .iui-content + .iui-icon{
   margin-right:0;
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-menu-item .iui-menu-description{
   display:none;
-  font-size:12px;
-  opacity:0.6;
+  font-size:var(--iui-font-size-0);
   opacity:var(--iui-opacity-3);
 }
 .iui-menu-item > .iui-icon{
-  width:16px;
-  height:16px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   flex:0 0 auto;
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-color-foreground-2);
 }
 .iui-menu-item > .iui-icon + .iui-content{
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-menu-item:hover{
-  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-menu-item:focus, .iui-menu-item.iui-focused{
   outline:thin solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
-  outline:thin solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
 }
 .iui-menu-item:focus:not(:focus-visible){
   outline:none;
 }
 .iui-menu-item.iui-large{
-  height:49px;
+  min-height:var(--iui-component-height-large);
 }
 .iui-menu-item.iui-large .iui-menu-description{
   display:block;
 }
 .iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
-  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-6));
+  background-color:var(--iui-color-background-subtle-primary);
   color:var(--iui-color-foreground-primary);
   outline:thin solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
@@ -119,11 +118,10 @@
   opacity:1;
 }
 .iui-menu-item.iui-active > .iui-icon{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
+  fill:var(--iui-color-foreground-primary);
 }
 .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
-  outline-width:2px;
+  outline-width:var(--iui-size-3xs);
   outline-offset:-2px;
 }
 .iui-menu-item.iui-active:focus:not(:focus-visible){
@@ -133,14 +131,11 @@
 .iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
   cursor:not-allowed;
   outline:none;
-  background-color:white;
-  color:rgba(0, 0, 0, 0.2);
   background-color:var(--iui-color-background-1);
-  color:var(--iui-text-color-placeholder);
+  color:var(--iui-color-foreground-5);
 }
 .iui-menu-item.iui-disabled > .iui-icon, .iui-menu-item.iui-disabled:hover > .iui-icon{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-color-foreground-5);
 }
 .iui-menu-item-skeleton{
   --iui-menu-item-content-skeleton-max-width:30%;
@@ -151,27 +146,30 @@
 }
 .iui-menu-item-skeleton .iui-menu-label{
   width:100%;
-  height:14px;
+  height:var(--iui-font-size-1);
   vertical-align:middle;
 }
 .iui-menu-item-skeleton .iui-menu-description{
   width:70%;
-  height:12px;
+  height:var(--iui-font-size-0);
   vertical-align:middle;
-  margin-top:4px;
+  margin-top:var(--iui-size-2xs);
 }
 .iui-menu-item-skeleton:hover{
   background-color:unset;
 }
 
 .iui-menu-content{
-  padding:11px 13px;
+  padding-block:var(--iui-size-xs);
+  padding-inline:calc(var(--iui-size-m) + 1px);
+  min-height:var(--iui-component-height);
+  display:grid;
+  align-items:center;
 }
 
 .iui-menu-divider{
   height:1px;
-  width:calc(100% - 24px);
+  width:calc(100% - var(--iui-size-l));
   margin:1px auto;
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-border);
 }

package/css/non-ideal-state.css

@@ -21,7 +21,7 @@
 .iui-non-ideal-state > .iui-non-ideal-state-illustration{
   max-width:220px;
   max-height:242px;
-  margin-bottom:22px;
+  margin-bottom:var(--iui-size-l);
   text-align:center;
   display:flex;
   justify-content:center;
@@ -32,34 +32,34 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:32px;
-  font-weight:300;
-  line-height:44px;
+  font-size:var(--iui-font-size-5);
+  font-weight:var(--iui-font-weight-light);
+  line-height:calc(2 * var(--iui-size-l));
   padding:0;
-  margin:0 0 22px;
+  margin:0 0 var(--iui-size-l);
 }
 .iui-non-ideal-state > .iui-non-ideal-state-description{
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:14px;
-  font-weight:400;
-  line-height:22px;
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
   padding:0;
-  margin:0 0 22px;
+  margin:0 0 var(--iui-size-l);
 }
 .iui-non-ideal-state > .iui-non-ideal-state-actions{
   display:flex;
   align-items:center;
-  margin-bottom:8px;
+  margin-bottom:var(--iui-size-xs);
 }
 .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
   display:inline-block;
   width:200px;
   text-align:left;
-  margin:0 4px 0 0;
+  margin:0 var(--iui-size-2xs) 0 0;
 }
 .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
-  margin:0 4px;
+  margin:0 var(--iui-size-2xs);
 }

package/css/progress-indicator.css

@@ -14,23 +14,21 @@
   width:100%;
   height:4px;
   overflow:hidden;
-  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:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 .iui-progress-indicator-linear > .iui-label{
   align-items:center;
   width:100%;
   overflow:hidden;
-  margin-top:4px;
+  margin-top:var(--iui-size-2xs);
   display:flex;
-  font-size:12px;
+  font-size:var(--iui-font-size-0);
   justify-content:space-between;
 }
 .iui-progress-indicator-linear > .iui-label > :only-child{
@@ -44,52 +42,43 @@
 }
 .iui-progress-indicator-linear > .iui-label svg{
   display:flex;
-  width:16px;
-  height:16px;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-track,
 .iui-progress-indicator-linear.iui-positive > .iui-track > *{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label{
-  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label svg{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
+  fill:var(--iui-color-foreground-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.2);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/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.2);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-progress-indicator-linear.iui-negative > .iui-track > *{
   width:100%;
-  background-color:#d10a0a;
   background-color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label{
-  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label svg{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
+  fill:var(--iui-color-foreground-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(209, 10, 10, 0.2);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/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(209, 10, 10, 0.2);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-progress-indicator-linear > .iui-track > .iui-determinate{
   transition:width 2s ease-in-out;
@@ -122,69 +111,23 @@
   }
 }
 
-.iui-progress-indicator-radial-ie{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-block;
-  position:relative;
-  box-sizing:border-box;
-  height:100%;
-  width:100%;
-  color:#008ae0;
-  color:var(--iui-color-foreground-primary);
-}
-.iui-progress-indicator-radial-ie::after{
-  position:relative;
-  box-sizing:border-box;
-  content:"";
-  width:100%;
-  height:100%;
-  display:inline-block;
-  border:3px solid currentColor;
-  border-radius:100%;
-  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-border);
-}
-@-webkit-keyframes dash{
-  0%{
-    transform:rotate(0deg);
-  }
-  100%{
-    transform:rotate(360deg);
-  }
-}
-@keyframes dash{
-  0%{
-    transform:rotate(0deg);
-  }
-  100%{
-    transform:rotate(360deg);
-  }
-}
-
 .iui-progress-indicator-radial{
   position:relative;
   display:inline-block;
-  width:32px;
-  height:32px;
+  --_iui-progress-indicator-radial-size:var(--iui-size-xl);
+  width:var(--_iui-progress-indicator-radial-size);
+  height:var(--_iui-progress-indicator-radial-size);
 }
 .iui-progress-indicator-radial > .iui-radial{
   height:100%;
   width:100%;
 }
 .iui-progress-indicator-radial > .iui-radial > circle.iui-fill{
-  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:var(--iui-color-background-5);
   fill:none;
   stroke-width:3.2;
@@ -192,14 +135,14 @@
 .iui-progress-indicator-radial .iui-inner-content{
   position:absolute;
   display:flex;
-  width:calc(100% - 8px);
-  height:calc(100% - 8px);
+  width:calc(100% - var(--iui-size-xs));
+  height:calc(100% - var(--iui-size-xs));
   left:50%;
   top:50%;
   transform:translate(-50%, -50%);
   align-items:center;
   justify-content:center;
-  font-size:12px;
+  font-size:var(--iui-font-size-0);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
@@ -209,83 +152,55 @@
 .iui-progress-indicator-radial .iui-inner-content svg,
 .iui-progress-indicator-radial .iui-inner-content img{
   display:flex;
-  width:16px;
-  height:16px;
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  fill:var(--iui-color-foreground-2);
 }
 .iui-progress-indicator-radial .iui-inner-content svg:hover,
 .iui-progress-indicator-radial .iui-inner-content img:hover{
-  fill:black;
-  fill:var(--iui-icons-color-actionable-hover);
+  fill:var(--iui-color-foreground-1);
 }
 .iui-progress-indicator-radial.iui-positive{
-  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:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-progress-indicator-radial.iui-positive .iui-progress-indicator-radial-ie{
-  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:var(--iui-color-foreground-positive);
+  fill:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-negative{
-  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{
-  stroke:#d10a0a;
   stroke:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
-.iui-progress-indicator-radial.iui-negative .iui-progress-indicator-radial-ie{
-  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:#d10a0a;
-  border-bottom-color:var(--iui-color-foreground-negative);
+  fill:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-x-small{
-  width:16px;
-  height:16px;
+  --_iui-progress-indicator-radial-size:var(--iui-size-m);
 }
 .iui-progress-indicator-radial.iui-x-small .iui-inner-content{
   display:none;
 }
 .iui-progress-indicator-radial.iui-small{
-  width:24px;
-  height:24px;
+  --_iui-progress-indicator-radial-size:calc(1.5 * var(--iui-size-m));
 }
 .iui-progress-indicator-radial.iui-large{
-  width:48px;
-  height:48px;
+  --_iui-progress-indicator-radial-size:calc(3 * var(--iui-size-m));
 }
 .iui-progress-indicator-radial.iui-large .iui-inner-content{
-  font-size:16px;
+  font-size:var(--iui-font-size-2);
 }
 .iui-progress-indicator-radial.iui-large .iui-inner-content svg,
 .iui-progress-indicator-radial.iui-large .iui-inner-content img{
-  width:24px;
-  height:24px;
+  display:flex;
+  flex-shrink:0;
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
 }
 .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial{
   transform:rotate(-90deg);
@@ -350,19 +265,16 @@
   left:0;
   z-index:10000;
   pointer-events:none;
-  background-color:rgba(255, 255, 255, 0.8);
-  background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-2));
+  background-color:Hsl(var(--iui-color-background-1-hsl)/var(--iui-opacity-2));
 }
 @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
   .iui-progress-indicator-overlay{
-    background-color:rgba(255, 255, 255, 0.6);
+    background-color:Hsl(var(--iui-color-background-1-hsl)/var(--iui-opacity-3));
     -webkit-backdrop-filter:blur(5px);
             backdrop-filter:blur(5px);
-    background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-3));
-    backdrop-filter:blur(5px);
   }
 }
-.iui-progress-indicator-overlay:focus, .iui-progress-indicator-overlay:focus-visible{
+.iui-progress-indicator-overlay:focus{
   outline:0;
 }
 .iui-progress-indicator-overlay .iui-progress-indicator-linear{
@@ -371,7 +283,6 @@
 }
 @-webkit-keyframes closeAnimation{
   from{
-    opacity:1;
     opacity:var(--iui-opacity-1);
   }
   to{
@@ -380,7 +291,6 @@
 }
 @keyframes closeAnimation{
   from{
-    opacity:1;
     opacity:var(--iui-opacity-1);
   }
   to{
@@ -388,6 +298,6 @@
   }
 }
 .iui-progress-indicator-overlay .iui-overlay-exiting{
-  -webkit-animation:closeAnimation 0.2s linear;
-          animation:closeAnimation 0.2s linear;
+  -webkit-animation:closeAnimation var(--iui-duration-1) linear;
+          animation:closeAnimation var(--iui-duration-1) linear;
 }