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

package/css/information-panel.css

@@ -5,6 +5,7 @@
 .iui-information-panel-wrapper{
   position:relative;
   overflow:hidden;
+  border-radius:var(--iui-border-radius-1);
 }
 
 .iui-information-panel{
@@ -13,16 +14,13 @@
   visibility:hidden;
   display:flex;
   flex-direction:column;
-  box-sizing:border-box;
   max-width:100%;
   max-height:100%;
-  z-index:2;
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-information-panel{
-    transition:visibility 0s 0.2s ease-in, transform 0.2s ease-out, opacity 0.2s ease;
+    transition:visibility var(--iui-duration-0) var(--iui-duration-1) ease-in, transform var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease;
   }
 }
 .iui-information-panel > .iui-resizer{
@@ -31,26 +29,22 @@
   touch-action:none;
 }
 .iui-information-panel > .iui-resizer > .iui-resizer-bar{
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-border);
 }
 .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 .iui-information-panel .iui-information-header,
 .iui-information-panel .iui-information-body{
-  padding-left:12px;
-  padding-right:12px;
-  box-sizing:border-box;
+  padding-left:var(--iui-size-s);
+  padding-right:var(--iui-size-s);
 }
 .iui-information-panel .iui-information-header{
-  height:55px;
+  height:calc(var(--iui-size-s) * 5);
   flex-shrink:0;
   display:flex;
   align-items:center;
   justify-content:space-between;
-  background-color:#edeff2;
   background-color:var(--iui-color-background-3);
 }
 .iui-information-panel .iui-information-header .iui-information-header-label{
@@ -68,43 +62,46 @@
 }
 .iui-information-panel .iui-information-header .iui-information-header-label svg{
   display:flex;
-  width:24px;
-  height:24px;
-  margin-right:8px;
   flex-shrink:0;
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
+  fill:var(--iui-color-foreground-4);
+  margin-right:var(--iui-size-xs);
+}
+@media (forced-colors: active){
+  .iui-information-panel .iui-information-header .iui-information-header-label svg{
+    fill:CanvasText;
+  }
 }
 .iui-information-panel .iui-information-header .iui-information-header-actions{
   flex-shrink:0;
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-information-panel .iui-information-body{
-  padding-top:11px;
-  padding-bottom:11px;
+  padding-top:var(--iui-size-s);
+  padding-bottom:var(--iui-size-s);
   height:100%;
   overflow-x:hidden;
   overflow-y:auto;
   overflow-y:overlay;
 }
 .iui-information-panel .iui-information-body > hr{
-  border-color:#c7ccd1;
   border-color:var(--iui-color-background-border);
 }
 .iui-information-panel.iui-right{
   top:0;
   right:0;
-  width:384px;
-  min-width:192px;
+  width:calc(var(--iui-size-3xl) * 4);
+  min-width:calc(var(--iui-size-3xl) * 2);
   height:100%;
   transform:translateX(100%);
-  box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
+  box-shadow:-1px 0 10px var(--iui-shadow-color);
   -webkit-clip-path:inset(0 0 0 -15px);
           clip-path:inset(0 0 0 -15px);
 }
 .iui-information-panel.iui-right > .iui-resizer{
   height:100%;
-  width:16px;
+  width:var(--iui-size-m);
   top:0;
   cursor:ew-resize;
   justify-content:center;
@@ -115,29 +112,29 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
-    transition:background-color 0.2s ease-out, width 0.2s ease-out;
+    transition:background-color var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out;
   }
 }
 .iui-information-panel.iui-right > .iui-resizer:hover > .iui-resizer-bar{
-  width:4px;
+  width:var(--iui-size-2xs);
 }
 .iui-information-panel.iui-right > .iui-resizer{
-  left:-8px;
+  left:calc(var(--iui-size-m) * -0.5);
 }
 .iui-information-panel.iui-bottom{
   left:0;
   bottom:0;
-  height:384px;
-  min-height:192px;
+  height:calc(var(--iui-size-3xl) * 4);
+  min-height:calc(var(--iui-size-3xl) * 2);
   width:100%;
   transform:translateY(100%);
-  box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
+  box-shadow:0 -1px 10px var(--iui-shadow-color);
   -webkit-clip-path:inset(-15px 0 0 0);
           clip-path:inset(-15px 0 0 0);
 }
 .iui-information-panel.iui-bottom > .iui-resizer{
   width:100%;
-  height:16px;
+  height:var(--iui-size-m);
   left:0;
   cursor:ns-resize;
   align-items:center;
@@ -148,14 +145,14 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
-    transition:background-color 0.2s ease-out, height 0.2s ease-out;
+    transition:background-color var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
   }
 }
 .iui-information-panel.iui-bottom > .iui-resizer:hover > .iui-resizer-bar{
-  height:4px;
+  height:var(--iui-size-2xs);
 }
 .iui-information-panel.iui-bottom > .iui-resizer{
-  top:-8px;
+  top:calc(var(--iui-size-m) * -0.5);
 }
 .iui-information-panel.iui-visible{
   opacity:1;
@@ -164,7 +161,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-information-panel.iui-visible{
-    transition:transform 0.2s ease-out, opacity 0.2s ease;
+    transition:transform var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease;
   }
 }
 .iui-information-panel.iui-visible > .iui-resizer{
@@ -172,30 +169,25 @@
 }
 
 .iui-information-body-content{
-  display:-ms-grid;
   display:grid;
 }
 .iui-information-body-content .iui-input-label{
-  font-weight:400;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  font-weight:var(--iui-font-weight-normal);
+  color:var(--iui-color-foreground-4);
 }
 .iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
-  margin-bottom:11px;
+  margin-bottom:var(--iui-size-s);
 }
 .iui-information-body-content.iui-inline{
-  row-gap:11px;
-  -ms-grid-columns:auto 1fr;
+  row-gap:var(--iui-size-s);
   grid-template-columns:auto 1fr;
   align-items:center;
 }
 .iui-information-body-content.iui-inline .iui-input-label{
-  margin:0 16px 0 0;
-  -ms-grid-column-span:1;
-  -ms-grid-column-align:end;
-      justify-self:end;
+  margin:0 var(--iui-size-m) 0 0;
+  justify-self:end;
   text-align:end;
 }
 .iui-information-body-content.iui-inline .iui-input-label.iui-required{
-  margin-right:6px;
+  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
 }

package/css/input.css

@@ -0,0 +1,170 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-input{
+  --_iui-input-background-color:var(--iui-color-background-1);
+  --_iui-input-border-color:var(--iui-color-foreground-4);
+  --_iui-input-text-color:var(--iui-color-foreground-2);
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  width:100%;
+  font-family:inherit;
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
+  border-radius:var(--iui-border-radius-1);
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  min-height:var(--_iui-input-min-height);
+  padding-block:var(--_iui-input-padding-block);
+  padding-inline:var(--iui-size-s);
+  color:var(--_iui-input-text-color);
+  background-color:var(--_iui-input-background-color);
+  border:1px solid var(--_iui-input-border-color);
+  transition:border-color var(--iui-duration-1) ease-out;
+  --_iui-input-padding-block:var(--iui-size-2xs);
+  --_iui-input-min-height:var(--iui-component-height);
+}
+.iui-input:focus-visible{
+  outline:2px solid var(--iui-color-foreground-primary);
+  outline-offset:-2px;
+}
+@supports not selector(*:focus-visible){
+  .iui-input:focus{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-2px;
+  }
+}
+.iui-input::-moz-placeholder{
+  --_iui-input-text-color:var(--iui-color-foreground-5);
+  -moz-user-select:none;
+       user-select:none;
+  color:var(--_iui-input-text-color);
+}
+.iui-input:-ms-input-placeholder{
+  --_iui-input-text-color:var(--iui-color-foreground-5);
+  -ms-user-select:none;
+      user-select:none;
+  color:var(--_iui-input-text-color);
+}
+.iui-input::placeholder{
+  --_iui-input-text-color:var(--iui-color-foreground-5);
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  color:var(--_iui-input-text-color);
+}
+.iui-input:-webkit-autofill{
+  --_iui-input-background-color:var(--iui-color-background-subtle-primary);
+  --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+}
+.iui-input:autofill{
+  --_iui-input-background-color:var(--iui-color-background-subtle-primary);
+  --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+}
+.iui-input:hover{
+  --_iui-input-border-color:var(--iui-color-foreground-2);
+}
+.iui-input[disabled]{
+  --_iui-input-background-color:var(--iui-color-background-disabled);
+  --_iui-input-border-color:var(--iui-color-background-disabled);
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-background-disabled);
+  cursor:not-allowed;
+}
+:where(textarea.iui-input){
+  resize:vertical;
+}
+:where(textarea.iui-input)[disabled], :where(textarea.iui-input)[readonly]{
+  resize:none;
+}
+
+.iui-input[data-iui-size=small]{
+  --_iui-input-padding-block:0;
+  --_iui-input-min-height:var(--iui-component-height-small);
+}
+.iui-input[data-iui-size=large]{
+  --_iui-input-padding-block:var(--iui-size-xs);
+  --_iui-input-min-height:var(--iui-component-height-large);
+  font-size:var(--iui-font-size-2);
+}
+
+.iui-input-with-icon.iui-input-with-icon{
+  display:grid;
+  align-items:center;
+  cursor:pointer;
+}
+.iui-input-with-icon.iui-input-with-icon > :first-child{
+  grid-area:1/-1;
+  padding-right:var(--iui-component-height);
+}
+.iui-input-with-icon.iui-input-with-icon:focus-within > :first-child{
+  outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
+  outline-offset:-2px;
+}
+.iui-input-with-icon.iui-input-with-icon:hover > :first-child{
+  border-color:var(--_iui-input-with-icon-hover-border-color, var(--iui-color-foreground-2));
+}
+
+.iui-end-icon{
+  grid-area:inputs;
+  justify-self:end;
+  margin:0 calc(var(--iui-size-xs) + 1px) 0 0;
+  position:relative;
+  display:flex;
+  grid-area:1/-1;
+}
+.iui-end-icon svg{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+}
+.iui-end-icon.iui-button{
+  height:100%;
+  width:-webkit-fit-content;
+  width:-moz-fit-content;
+  width:fit-content;
+  margin-right:0;
+  border-top-left-radius:0;
+  border-bottom-left-radius:0;
+  border-top-right-radius:inherit;
+  border-bottom-right-radius:inherit;
+}
+.iui-end-icon.iui-actionable{
+  align-items:center;
+  height:calc(100% - 4px);
+  margin-right:1px;
+  padding-inline:calc(var(--iui-size-xs) + 1px);
+  cursor:pointer;
+  box-sizing:content-box;
+  background-position:center;
+  transition:background var(--iui-duration-2) ease-out;
+}
+.iui-end-icon.iui-actionable:hover{
+  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
+}
+.iui-end-icon.iui-actionable:active{
+  background-color:var(--iui-color-background-2);
+  background-size:100%;
+  transition:background var(--iui-duration-0);
+}
+.iui-end-icon.iui-actionable svg{
+  fill:var(--iui-color-foreground-2);
+  transition:transform var(--iui-duration-1) ease-out;
+}
+.iui-end-icon.iui-actionable.iui-open svg{
+  transform:rotate(180deg);
+}
+.iui-end-icon.iui-disabled{
+  cursor:not-allowed;
+}
+.iui-end-icon.iui-disabled svg{
+  fill:var(--iui-color-foreground-5);
+}

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: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;
@@ -21,19 +21,15 @@
       -ms-user-select:none;
           user-select:none;
   cursor:default;
-  background-color:white;
-  border:1px solid #c7ccd1;
-  box-shadow:0 1px 1px #c7ccd1, 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
   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 #c7ccd1, 0 0 0 0 rgba(255, 255, 255, 0.2) inset;
   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,15 +13,16 @@
       -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:white;
   fill:var(--iui-color-foreground-accessory);
 }
 
@@ -39,17 +40,13 @@
   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));
-  box-sizing:border-box;
+  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 white;
-  background-color:white;
-  color:white;
   border:solid 1px var(--iui-color-foreground-accessory);
   background-color:var(--iui-color-foreground-accessory);
   color:var(--iui-color-foreground-accessory);
@@ -64,20 +61,20 @@
   left:0;
   right:0;
   margin:auto;
-  border-width:4px;
+  border-width:var(--iui-size-2xs);
   border-style:solid;
-  border-color:white transparent transparent transparent;
   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;
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{
-  fill:white;
   fill:var(--iui-color-foreground-accessory);
 }
 
@@ -92,24 +89,30 @@
       -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(0, 138, 224, 0), rgba(0, 138, 224, 0.2));
-  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%;
-  box-sizing:border-box;
-  border:1px solid white;
-  background-color:#008ae0;
   border:1px solid var(--iui-color-foreground-accessory);
   background-color:var(--iui-color-background-primary);
 }