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

package/css/expandable-block.css

@@ -9,9 +9,7 @@
   vertical-align:baseline;
   display:flex;
   flex-direction:column;
-  box-sizing:border-box;
   width:100%;
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-expandable-block > .iui-header{
@@ -19,14 +17,10 @@
   align-items:center;
   padding:11px 12px;
   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:1px solid var(--iui-color-background-3);
   border-bottom-color:var(--iui-color-background-4);
   background-color:var(--iui-color-background-3);
@@ -54,7 +48,6 @@
   height:16px;
 }
 .iui-expandable-block > .iui-header > .iui-icon{
-  fill:rgba(0, 0, 0, 0.8);
   fill:var(--iui-icons-color-actionable);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -64,23 +57,18 @@
 }
 .iui-expandable-block > .iui-header > .iui-status-icon{
   margin-left:12px;
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
 }
 .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);
 }
 .iui-expandable-block > .iui-header .iui-expandable-block-label{
@@ -89,7 +77,6 @@
   flex:auto;
   min-width:0;
   margin-left:12px;
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -108,7 +95,6 @@
 }
 .iui-expandable-block > .iui-header .iui-caption{
   font-size:12px;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-expandable-block > .iui-header:focus-visible{
@@ -123,10 +109,6 @@
 }
 .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);
@@ -157,16 +139,13 @@
   padding:11px 12px;
 }
 .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);
 }
 .iui-expandable-block:hover > .iui-header .iui-caption,
 .iui-expandable-block:hover > .iui-header .iui-title{
-  color:black;
   color:var(--iui-color-foreground-body);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -176,21 +155,12 @@
   }
 }
 .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);
 }
 .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{
@@ -219,7 +189,6 @@
   border-radius:4px;
 }
 .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));
 }
 .iui-expandable-block.iui-borderless .iui-expandable-content > div{

package/css/fieldset.css

@@ -9,8 +9,6 @@
   vertical-align:baseline;
   padding:11px 12px;
   border-radius:4px;
-  border:1px solid #c7ccd1;
-  background-color:white;
   border:1px solid var(--iui-color-background-border);
   background-color:var(--iui-color-background-1);
 }
@@ -22,8 +20,6 @@
      -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);
 }
@@ -31,6 +27,5 @@
   cursor:not-allowed;
 }
 .iui-fieldset[disabled] legend{
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }

package/css/file-upload.css

@@ -23,14 +23,11 @@
   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;
   background-color:var(--iui-color-background-2);
   border:1px solid var(--iui-color-background-2);
 }
@@ -40,11 +37,9 @@
   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;
@@ -54,22 +49,18 @@
 }
 .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{
@@ -78,8 +69,6 @@
   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;
 }
@@ -90,9 +79,6 @@
   font-weight:700;
 }
 .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));
   border-color:var(--iui-color-foreground-primary);
   color:var(--iui-color-foreground-primary);
@@ -100,6 +86,5 @@
 }
 .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);
 }

package/css/footer.css

@@ -29,7 +29,6 @@
           user-select:none;
   white-space:nowrap;
   word-break:keep-all;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-legal-footer > ul > li .iui-separator{
@@ -37,16 +36,12 @@
   width:1px;
   height:11px;
   display:inline-table;
-  background-color:rgba(0, 0, 0, 0.4);
   background-color:var(--iui-text-color-muted);
 }
 .iui-legal-footer > ul > li > 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;
   cursor:pointer;
   text-decoration:none;
 }
@@ -61,7 +56,6 @@
   }
 }
 .iui-legal-footer > ul > li > a:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 .iui-legal-footer > ul > li > a:hover{
@@ -90,7 +84,6 @@
 }
 
 .iui-legal-footer > ul > li > a, .iui-legal-footer > ul > li > a:hover{
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-legal-footer > .iui-legal-footer-developer{
@@ -98,6 +91,5 @@
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }

package/css/global.css

@@ -550,85 +550,30 @@ html.iui-theme-dark-hc{
 }
 
 .iui-body{
-  background-color:#f9f9fb;
-  color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-2);
   color:var(--iui-text-color);
   font-size:14px;
   line-height:22px;
-  scrollbar-color:rgba(0, 0, 0, 0.4) transparent;
-  scrollbar-width:thin;
   scrollbar-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)) transparent;
   scrollbar-width:thin;
-  font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+  font-family:"Noto Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
 }
 .iui-body::-webkit-scrollbar{
   width:8px;
   height:8px;
 }
 .iui-body::-webkit-scrollbar-thumb{
-  background-color:rgba(0, 0, 0, 0.4);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   border-radius:4px;
 }
 .iui-body::-webkit-scrollbar-thumb:hover{
-  background-color:rgba(0, 0, 0, 0.6);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
 }
 .iui-body::-webkit-scrollbar-track, .iui-body::-webkit-scrollbar-corner{
   background-color:transparent;
 }
 .iui-body.iui-no-webfonts{
-  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
-}
-
-.iui-anchor{
-  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;
-  cursor:pointer;
-  text-decoration:none;
-}
-.iui-anchor:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-anchor:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:1px;
-  }
-}
-.iui-anchor:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
-}
-.iui-anchor:hover{
-  text-decoration:underline;
-}
-@media (prefers-contrast: more){
-  .iui-anchor{
-    text-decoration:underline;
-  }
-  .iui-anchor:hover{
-    text-decoration:none;
-  }
-}
-.iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
-  text-decoration:none;
-}
-.iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
-  text-decoration:underline;
-}
-
-.iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
-  text-decoration:underline;
-}
-.iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
-  text-decoration:none;
+  font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
 }
 
 .iui-visually-hidden{
@@ -646,20 +591,16 @@ html.iui-theme-dark-hc{
 
 [class*=iui-],
 [class*=iui-] *{
-  scrollbar-color:rgba(0, 0, 0, 0.4) transparent;
-  scrollbar-width:thin;
   scrollbar-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)) transparent;
   scrollbar-width:thin;
 }
 [class*=iui-]::-moz-selection, [class*=iui-] *::-moz-selection, [class*=iui-] *::-moz-selection, [class*=iui-] * *::-moz-selection{
-  background-color:rgba(0, 138, 224, 0.2);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
 }
 [class*=iui-]::selection,
 [class*=iui-] *::selection,
 [class*=iui-] *::selection,
 [class*=iui-] * *::selection{
-  background-color:rgba(0, 138, 224, 0.2);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
 }
 [class*=iui-]::-webkit-scrollbar,
@@ -669,17 +610,21 @@ html.iui-theme-dark-hc{
 }
 [class*=iui-]::-webkit-scrollbar-thumb,
 [class*=iui-] *::-webkit-scrollbar-thumb{
-  background-color:rgba(0, 0, 0, 0.4);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   border-radius:4px;
 }
 [class*=iui-]::-webkit-scrollbar-thumb:hover,
 [class*=iui-] *::-webkit-scrollbar-thumb:hover{
-  background-color:rgba(0, 0, 0, 0.6);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
 }
 [class*=iui-]::-webkit-scrollbar-track, [class*=iui-]::-webkit-scrollbar-corner,
 [class*=iui-] *::-webkit-scrollbar-track,
 [class*=iui-] *::-webkit-scrollbar-corner{
   background-color:transparent;
+}
+
+[class*=iui-]:where(:not(.iui-body)),
+[class*=iui-]:where(:not(.iui-body))::before,
+[class*=iui-]:where(:not(.iui-body))::after{
+  box-sizing:border-box;
 }