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

package/css/expandable-block.css

@@ -9,26 +9,21 @@
   vertical-align:baseline;
   display:flex;
   flex-direction:column;
-  box-sizing:border-box;
   width:100%;
-  background-color:white;
   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:11px 12px;
+  padding:var(--iui-size-s);
   cursor:pointer;
-  box-sizing:border-box;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  border:1px solid #edeff2;
-  border-bottom-color:#dde1e4;
-  background-color:#edeff2;
+  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{
@@ -43,63 +38,38 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-expandable-block > .iui-header{
-    transition:background-color 0.2s ease-out;
+    transition:background-color var(--iui-duration-1) ease-out;
   }
 }
 .iui-expandable-block > .iui-header > .iui-icon,
 .iui-expandable-block > .iui-header > .iui-status-icon{
-  display:inline-flex;
+  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:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-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;
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-}
-@media (forced-colors: active){
-  .iui-expandable-block > .iui-header > .iui-status-icon{
-    fill:CanvasText;
-  }
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
+  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:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color);
+  margin-left:var(--iui-size-s);
+  color:var(--iui-color-foreground-2);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-expandable-block > .iui-header .iui-expandable-block-label{
-    transition:color 0.2s ease;
+    transition:color var(--iui-duration-1) ease;
   }
 }
 .iui-expandable-block > .iui-header .iui-title,
@@ -109,12 +79,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:rgba(0, 0, 0, 0.4);
-  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);
@@ -128,13 +97,11 @@
 }
 .iui-expandable-block .iui-expandable-content{
   overflow:hidden;
-  box-sizing:border-box;
-  border-bottom:1px solid #dde1e4;
-  border-right:1px solid #dde1e4;
-  border-left:1px solid #dde1e4;
   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;
@@ -144,7 +111,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{
@@ -155,64 +122,54 @@
 }
 @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:11px 12px;
+  padding:var(--iui-size-s) var(--iui-size-s);
 }
 .iui-expandable-block:hover > .iui-header{
-  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
 .iui-expandable-block:hover > .iui-header > .iui-icon{
-  fill:black;
-  fill:var(--iui-icons-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:black;
-  color:var(--iui-color-foreground-body);
+  color:var(--iui-color-foreground-1);
 }
 @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;
+    transition:color var(--iui-duration-1) ease;
   }
 }
 .iui-expandable-block.iui-expanded > .iui-header{
-  background-color:#edeff2;
-  border-left:1px solid #dde1e4;
-  border-top:1px solid #dde1e4;
-  border-right:1px solid #dde1e4;
   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:#dde1e4;
-  background-color:var(--iui-color-background-4);
-}
-.iui-expandable-block.iui-expanded > .iui-header:hover{
-  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
 .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
   transform:rotate(90deg);
 }
 .iui-expandable-block.iui-small .iui-header{
-  padding:5.5px 8px;
+  padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-xs);
 }
 .iui-expandable-block.iui-small .iui-header > .iui-icon{
-  width:12px;
-  height:12px;
+  display:flex;
+  flex-shrink:0;
+  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,
@@ -221,11 +178,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(0, 0, 0, 0.1);
-  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,30 +7,25 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  padding:11px 12px;
-  border-radius:4px;
-  border:1px solid #c7ccd1;
-  background-color:white;
+  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:1.5px 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:#dde1e4;
-  color:rgba(0, 0, 0, 0.8);
   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:rgba(0, 0, 0, 0.4);
-  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;
 }
@@ -23,16 +23,14 @@
   flex-direction:column;
   justify-content:center;
   align-items:center;
-  box-sizing:border-box;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  padding:6px 12px;
-  background-color:#f9f9fb;
-  border:1px solid #f9f9fb;
+  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;
@@ -40,17 +38,16 @@
   opacity:0;
   overflow:hidden;
   position:absolute;
-  z-index:-1;
 }
 .iui-file-upload > .iui-content > svg,
 .iui-file-upload > .iui-content .iui-template-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:64px;
-  height:64px;
-  margin-top:11px;
-  margin-bottom:11px;
+  display:flex;
+  flex-shrink:0;
+  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,
@@ -58,54 +55,28 @@
     fill:CanvasText;
   }
 }
-.iui-file-upload > .iui-content > svg.iui-informational,
-.iui-file-upload > .iui-content .iui-template-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-file-upload > .iui-content > svg.iui-positive,
-.iui-file-upload > .iui-content .iui-template-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-file-upload > .iui-content > svg.iui-warning,
-.iui-file-upload > .iui-content .iui-template-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-file-upload > .iui-content > svg.iui-negative,
-.iui-file-upload > .iui-content .iui-template-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
 .iui-file-upload > .iui-content:only-child{
   visibility:visible;
   position:relative;
   flex-direction:row;
 }
 .iui-file-upload > .iui-content:only-child:focus-within{
-  outline:2px solid #008ae0;
-  outline-offset:-2px;
   outline:2px solid var(--iui-color-foreground-primary);
   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(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
-  border-color:#008ae0;
-  color:#008ae0;
-  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:#008ae0;
-  fill:var(--iui-icons-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:11px 0;
-  font-size:12px;
+  padding:var(--iui-size-s) 0;
+  font-size:var(--iui-font-size-0);
 }
 
 .iui-legal-footer-list{
@@ -32,16 +32,12 @@
           user-select:none;
   white-space:nowrap;
   word-break:keep-all;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-legal-footer-item > a{
-  color:#008ae0;
-  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:4px;
-  box-sizing:border-box;
+  -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;
 }
@@ -56,8 +52,7 @@
   }
 }
 .iui-legal-footer-item > a:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-legal-footer-item > a:hover{
   text-decoration:underline;
@@ -85,19 +80,16 @@
 }
 
 .iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
-  color:rgba(0, 0, 0, 0.4);
-  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:11px;
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:var(--iui-text-color-muted);
+  height:var(--iui-size-s);
+  background-color:var(--iui-color-foreground-4);
 }
 
 .iui-legal-footer-developer{
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }