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

package/css/keyboard.css

@@ -7,13 +7,13 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   display:inline-block;
-  font-size:12px;
-  font-weight:600;
-  font-family:"Noto Sans Mono", ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
+  font-size:var(--iui-font-size-0);
+  font-weight:var(--iui-font-weight-semibold);
+  font-family:var(--iui-font-mono);
   line-height:1;
-  padding:4px 8px;
+  padding:calc(var(--iui-size-s) * 0.33) var(--iui-size-xs);
   white-space:nowrap;
   text-transform:uppercase;
   -webkit-user-select:none;
@@ -24,11 +24,7 @@
   background-color:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-5);
   box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-keyboard{
-    transition:box-shadow 0.2s ease-out;
-  }
+  transition:box-shadow var(--iui-duration-1) ease-out;
 }
 .iui-keyboard:hover{
   box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;

package/css/location-marker.css

@@ -13,12 +13,14 @@
       -ms-user-select:none;
           user-select:none;
   position:relative;
-  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));
   cursor:pointer;
 }
 .iui-location-marker-default > .iui-location-marker-default-pin{
-  filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
+  filter:drop-shadow(var(--iui-shadow-1));
 }
 .iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
   fill:var(--iui-color-foreground-accessory);
@@ -38,12 +40,12 @@
   cursor:pointer;
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
-  min-width:32px;
-  border-radius:4px;
+  min-width:var(--iui-size-xl);
+  border-radius:var(--iui-border-radius-1);
   text-align:center;
-  font-size:16px;
-  padding:3px 8px;
-  filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
+  font-size:var(--iui-font-size-2);
+  padding:calc(var(--iui-size-s) * 0.25) var(--iui-size-xs);
+  filter:drop-shadow(var(--iui-shadow-1));
   position:relative;
   border:solid 1px var(--iui-color-foreground-accessory);
   background-color:var(--iui-color-foreground-accessory);
@@ -59,14 +61,16 @@
   left:0;
   right:0;
   margin:auto;
-  border-width:4px;
+  border-width:var(--iui-size-2xs);
   border-style:solid;
   border-color:var(--iui-color-foreground-accessory) transparent transparent transparent;
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   display:inline-block;
-  width:16px;
-  height:16px;
   font-size:inherit;
   vertical-align:-2px;
 }
@@ -85,19 +89,29 @@
       -ms-user-select:none;
           user-select:none;
   position:relative;
+  display:flex;
+  flex-shrink:0;
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
   position:relative;
-  width:24px;
-  height:24px;
   border-radius:50%;
   cursor:default;
-  background:radial-gradient(circle at center, rgba(var(--iui-color-foreground-primary-rgb), 0), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)));
+}
+.iui-location-marker-me::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  z-index:-1;
+  opacity:var(--iui-opacity-5);
+  background-color:var(--iui-color-foreground-primary);
+  border-radius:inherit;
 }
 .iui-location-marker-me > .iui-location-marker-me-dot{
-  width:12px;
-  height:12px;
+  width:var(--iui-size-s);
+  height:var(--iui-size-s);
   position:absolute;
-  top:6px;
-  left:6px;
+  top:calc(var(--iui-size-2xs) * 1.5);
+  left:calc(var(--iui-size-2xs) * 1.5);
   border-radius:50%;
   border:1px solid var(--iui-color-foreground-accessory);
   background-color:var(--iui-color-background-primary);

package/css/menu.css

@@ -5,11 +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);
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
   margin:0;
   padding:0;
   border:none;
@@ -22,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{
@@ -29,27 +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:calc((var(--iui-component-height) - 1px) * 8.5);
 }
 
 .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;
   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;
@@ -66,24 +74,26 @@
 }
 .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;
+  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: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(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);
@@ -93,13 +103,13 @@
   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(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;
@@ -108,10 +118,10 @@
   opacity:1;
 }
 .iui-menu-item.iui-active > .iui-icon{
-  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){
@@ -122,10 +132,10 @@
   cursor:not-allowed;
   outline:none;
   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:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-color-foreground-5);
 }
 .iui-menu-item-skeleton{
   --iui-menu-item-content-skeleton-max-width:30%;
@@ -136,26 +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: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

@@ -26,9 +26,9 @@
   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{
@@ -42,8 +42,9 @@
 }
 .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 > *{
@@ -53,14 +54,14 @@
   color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label svg{
-  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(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(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%;
@@ -70,14 +71,14 @@
   color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label svg{
-  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(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(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;
@@ -113,8 +114,9 @@
 .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%;
@@ -133,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;
@@ -150,13 +152,14 @@
 .iui-progress-indicator-radial .iui-inner-content svg,
 .iui-progress-indicator-radial .iui-inner-content img{
   display:flex;
-  width:16px;
-  height:16px;
-  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:var(--iui-icons-color-actionable-hover);
+  fill:var(--iui-color-foreground-1);
 }
 .iui-progress-indicator-radial.iui-positive{
   color:var(--iui-color-foreground-positive);
@@ -166,7 +169,7 @@
   stroke:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
-  fill:var(--iui-icons-color-positive);
+  fill:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-negative{
   color:var(--iui-color-foreground-negative);
@@ -175,30 +178,29 @@
   stroke:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
-  fill:var(--iui-icons-color-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);
@@ -263,16 +265,16 @@
   left:0;
   z-index:10000;
   pointer-events:none;
-  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(var(--iui-color-background-1-rgb), var(--iui-opacity-3));
+    background-color:Hsl(var(--iui-color-background-1-hsl)/var(--iui-opacity-3));
     -webkit-backdrop-filter:blur(5px);
             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{
@@ -296,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;
 }