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

package/css/dialog.css

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-dialog-wrapper{
-  position:relative;
+  position:fixed;
   overflow:hidden;
   top:0;
   left:0;
@@ -12,19 +12,21 @@
   pointer-events:none;
   transform:translateX(0);
 }
+.iui-dialog-wrapper[data-iui-relative=true]{
+  position:absolute;
+}
 
 .iui-dialog{
   z-index:999;
   isolation:isolate;
-  border-radius:4px;
-  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
+  border-radius:var(--iui-border-radius-1);
+  box-shadow:var(--iui-shadow-5);
   position:fixed;
-  padding:12px 16px;
-  overflow:hidden;
+  padding:var(--iui-size-s) var(--iui-size-m);
   pointer-events:auto;
   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{
@@ -36,7 +38,7 @@
   opacity:0;
 }
 .iui-dialog.iui-dialog-visible{
-  transition-delay:0s;
+  transition-delay:var(--iui-duration-0);
 }
 
 .iui-dialog-default{
@@ -52,26 +54,26 @@
 .iui-dialog-default[data-iui-placement=top-left]{
   top:0;
   left:0;
-  margin-left:12px;
-  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:12px;
-  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:12px;
-  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:12px;
-  margin-bottom:16px;
+  margin-right:var(--iui-size-s);
+  margin-bottom:var(--iui-size-m);
 }
 
 .iui-dialog-full-page{
@@ -90,18 +92,14 @@
 }
 @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;
   }
 }
 
 .iui-dialog-draggable{
-  max-width:100%;
-  max-height:100vh;
-  min-width:380px;
-  min-height:144px;
   display:flex;
   flex-direction:column;
   border:1px solid var(--iui-color-background-border);
@@ -121,15 +119,14 @@
 .iui-dialog-title-bar{
   display:flex;
   align-items:center;
-  margin-bottom:12px;
-  box-sizing:border-box;
-  font-size:18px;
+  margin-bottom:var(--iui-size-s);
+  font-size:var(--iui-font-size-3);
 }
 
 .iui-dialog-title-bar-filled{
-  font-size:16px;
-  padding:6px 16px;
-  margin:-12px -16px 12px -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);
@@ -142,18 +139,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:12px;
+  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{

package/css/expandable-block.css

@@ -11,18 +11,20 @@
   flex-direction:column;
   width:100%;
   background-color:var(--iui-color-background-1);
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-expandable-block > .iui-header{
   display:flex;
   align-items:center;
-  padding:12px 12px;
+  padding:var(--iui-size-s);
   cursor:pointer;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
+  transition:background-color var(--iui-duration-1) ease-out;
+  border-radius:inherit;
   border:1px solid var(--iui-color-background-3);
-  border-bottom-color:var(--iui-color-background-4);
   background-color:var(--iui-color-background-3);
 }
 .iui-expandable-block > .iui-header:focus-visible{
@@ -35,41 +37,32 @@
     outline-offset:-1px;
   }
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-expandable-block > .iui-header{
-    transition:background-color 0.2s ease-out;
-  }
-}
 .iui-expandable-block > .iui-header > .iui-icon,
 .iui-expandable-block > .iui-header > .iui-status-icon{
   display:flex;
   flex-shrink:0;
-  width:16px;
-  height:16px;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
 }
 .iui-expandable-block > .iui-header > .iui-icon{
-  fill:var(--iui-icon-color-actionable);
+  fill:var(--iui-color-foreground-2);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-expandable-block > .iui-header > .iui-icon{
-    transition:transform 0.2s ease-out;
+    transition:transform var(--iui-duration-1) ease-out;
   }
 }
 .iui-expandable-block > .iui-header > .iui-status-icon{
-  margin-left:12px;
+  margin-left:var(--iui-size-s);
 }
 .iui-expandable-block > .iui-header .iui-expandable-block-label{
   display:flex;
   flex-direction:column;
   flex:auto;
   min-width:0;
-  margin-left:12px;
-  color:var(--iui-text-color);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-expandable-block > .iui-header .iui-expandable-block-label{
-    transition:color 0.2s ease;
-  }
+  margin-left:var(--iui-size-s);
+  transition:color var(--iui-duration-1) ease;
+  color:var(--iui-color-foreground-2);
 }
 .iui-expandable-block > .iui-header .iui-title,
 .iui-expandable-block > .iui-header .iui-caption{
@@ -78,11 +71,11 @@
   text-overflow:ellipsis;
 }
 .iui-expandable-block > .iui-header .iui-title{
-  font-size:16px;
+  font-size:var(--iui-font-size-2);
 }
 .iui-expandable-block > .iui-header .iui-caption{
-  font-size:12px;
-  color:var(--iui-text-color-muted);
+  font-size:var(--iui-font-size-0);
+  color:var(--iui-color-foreground-4);
 }
 .iui-expandable-block > .iui-header:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -99,6 +92,8 @@
   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);
+  border-bottom-left-radius:inherit;
+  border-bottom-right-radius:inherit;
 }
 .iui-expandable-block .iui-expandable-content.iui-enter{
   opacity:0;
@@ -108,7 +103,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-expandable-block .iui-expandable-content.iui-enter-active{
-    transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
+    transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
   }
 }
 .iui-expandable-block .iui-expandable-content.iui-exit{
@@ -119,33 +114,28 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-expandable-block .iui-expandable-content.iui-exit-active{
-    transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
+    transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
   }
 }
 .iui-expandable-block .iui-expandable-content > div{
-  padding:12px 12px;
+  padding:var(--iui-size-s) var(--iui-size-s);
 }
 .iui-expandable-block:hover > .iui-header{
   background-color:var(--iui-color-background-4);
 }
 .iui-expandable-block:hover > .iui-header > .iui-icon{
-  fill:var(--iui-icon-color-actionable-hover);
+  fill:var(--iui-color-foreground-1);
 }
 .iui-expandable-block:hover > .iui-header .iui-caption,
 .iui-expandable-block:hover > .iui-header .iui-title{
-  color:var(--iui-color-foreground-body);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-expandable-block:hover > .iui-header .iui-caption,
-.iui-expandable-block:hover > .iui-header .iui-title{
-    transition:color 0.2s ease;
-  }
+  color:var(--iui-color-foreground-1);
+  transition:color var(--iui-duration-1) ease;
 }
 .iui-expandable-block.iui-expanded > .iui-header{
   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);
+  border-color:var(--iui-color-background-4);
+  border-bottom-left-radius:0;
+  border-bottom-right-radius:0;
 }
 .iui-expandable-block.iui-expanded > .iui-header:hover{
   background-color:var(--iui-color-background-4);
@@ -154,19 +144,19 @@
   transform:rotate(90deg);
 }
 .iui-expandable-block.iui-small .iui-header{
-  padding:6px 8px;
+  padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-xs);
 }
 .iui-expandable-block.iui-small .iui-header > .iui-icon{
   display:flex;
   flex-shrink:0;
-  width:12px;
-  height:12px;
+  width:var(--iui-size-s);
+  height:var(--iui-size-s);
 }
 .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-expandable-block.iui-borderless,
 .iui-expandable-block.iui-borderless .iui-header,
@@ -175,10 +165,10 @@
   border:initial;
 }
 .iui-expandable-block.iui-borderless .iui-header{
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-expandable-block.iui-borderless .iui-header:hover{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-expandable-block.iui-borderless .iui-expandable-content > div{
   padding:0;

package/css/fieldset.css

@@ -7,25 +7,25 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  padding:12px 12px;
-  border-radius:4px;
+  padding:var(--iui-size-s) var(--iui-size-s);
+  border-radius:var(--iui-border-radius-1);
   border:1px solid var(--iui-color-background-border);
   background-color:var(--iui-color-background-1);
 }
 .iui-fieldset legend{
-  font-size:16px;
-  padding:1px 8px;
-  border-radius:4px;
+  font-size:var(--iui-font-size-2);
+  padding-inline:var(--iui-size-xs);
+  border-radius:var(--iui-border-radius-1);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
   background-color:var(--iui-color-background-4);
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 .iui-fieldset[disabled]{
   cursor:not-allowed;
 }
 .iui-fieldset[disabled] legend{
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }

package/css/file-upload.css

@@ -7,8 +7,8 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:14px;
-  font-weight:400;
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
   position:relative;
   display:flex;
 }
@@ -27,9 +27,10 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  padding:6px 12px;
+  padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-s);
   background-color:var(--iui-color-background-2);
   border:1px solid var(--iui-color-background-2);
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-file-upload > .iui-content .iui-browse-input{
   width:0.1px;
@@ -42,11 +43,11 @@
 .iui-file-upload > .iui-content .iui-template-icon{
   display:flex;
   flex-shrink:0;
-  width:64px;
-  height:64px;
-  fill:var(--iui-icon-color);
-  margin-top:12px;
-  margin-bottom:12px;
+  width:var(--iui-size-2xl);
+  height:var(--iui-size-2xl);
+  fill:var(--iui-color-foreground-4);
+  margin-top:var(--iui-size-s);
+  margin-bottom:var(--iui-size-s);
 }
 @media (forced-colors: active){
   .iui-file-upload > .iui-content > svg,
@@ -64,18 +65,18 @@
   outline-offset:-2px;
 }
 .iui-file-upload > .iui-content .iui-template-text{
-  margin-left:24px;
+  margin-left:var(--iui-size-l);
 }
 .iui-file-upload > .iui-content .iui-template-text > label{
-  font-weight:700;
+  font-weight:var(--iui-font-weight-bold);
 }
 .iui-file-upload.iui-drag > .iui-content{
-  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+  background-color:var(--iui-color-background-subtle-primary);
   border-color:var(--iui-color-foreground-primary);
   color:var(--iui-color-foreground-primary);
   visibility:visible;
 }
 .iui-file-upload.iui-drag > .iui-content > svg,
 .iui-file-upload.iui-drag > .iui-content .iui-template-icon{
-  fill:var(--iui-icon-color-primary);
+  fill:var(--iui-color-foreground-primary);
 }

package/css/footer.css

@@ -9,8 +9,8 @@
   vertical-align:baseline;
   text-align:center;
   width:100%;
-  padding:12px 0;
-  font-size:12px;
+  padding:var(--iui-size-s) 0;
+  font-size:var(--iui-font-size-0);
 }
 
 .iui-legal-footer-list{
@@ -32,12 +32,12 @@
           user-select:none;
   white-space:nowrap;
   word-break:keep-all;
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-legal-footer-item > a{
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:4px;
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
+  border-radius:var(--iui-border-radius-1);
   cursor:pointer;
   text-decoration:none;
 }
@@ -52,7 +52,7 @@
   }
 }
 .iui-legal-footer-item > a:hover{
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-legal-footer-item > a:hover{
   text-decoration:underline;
@@ -80,16 +80,16 @@
 }
 
 .iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 
 .iui-legal-footer-separator{
-  margin:0 8px;
+  margin:0 var(--iui-size-xs);
   width:1px;
-  height:12px;
-  background-color:var(--iui-text-color-muted);
+  height:var(--iui-size-s);
+  background-color:var(--iui-color-foreground-4);
 }
 
 .iui-legal-footer-developer{
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }