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

package/css/tabs.css

@@ -57,33 +57,27 @@
   display:flex;
   align-items:center;
   font-size:14px;
-  min-height:38px;
+  min-height:40px;
   height:100%;
   cursor:pointer;
-  transition:background-color 0.2s ease-out;
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
+  transition:background-color 0.2s ease-out;
 }
 .iui-tabs .iui-tab.iui-active{
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-tabs .iui-tab.iui-active .iui-tab-icon{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
+  fill:var(--iui-icon-color-primary);
 }
 .iui-tabs .iui-tab.iui-active .iui-tab-description{
-  opacity:1;
   opacity:var(--iui-opacity-1);
 }
 .iui-tabs .iui-tab[disabled]{
   cursor:not-allowed;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-tabs .iui-tab[disabled] .iui-tab-icon{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-icon-color-actionable-disabled);
 }
 .iui-tabs .iui-tab:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -96,12 +90,12 @@
   }
 }
 .iui-tabs .iui-tab-icon{
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
-  flex-shrink:0;
+  fill:var(--iui-icon-color-actionable);
   transition:fill 0.2s ease-out;
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
 }
 .iui-tabs .iui-tab-icon + .iui-tab-label{
   margin-left:8px;
@@ -109,29 +103,24 @@
 .iui-tabs .iui-tab-description{
   display:none;
   font-size:12px;
-  opacity:0.6;
   opacity:var(--iui-opacity-3);
 }
 .iui-tabs.iui-green .iui-tab:focus{
   outline-color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-green .iui-tab.iui-active{
-  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-green .iui-tab.iui-active .iui-tab-icon{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
+  fill:var(--iui-icon-color-positive);
 }
 .iui-tabs ~ .iui-tabs-content{
-  padding-top:11px;
-  padding-bottom:11px;
-  box-sizing:border-box;
+  padding-top:12px;
+  padding-bottom:12px;
 }
 .iui-tabs.iui-default .iui-tab::after{
   content:"";
   position:absolute;
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -140,14 +129,10 @@
   }
 }
 .iui-tabs.iui-default.iui-green .iui-tab::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-default .iui-tab{
   padding:4px 16px;
-  box-sizing:border-box;
-  background-color:#f9f9fb;
-  border:1px solid #c7ccd1;
   background-color:var(--iui-color-background-2);
   border:1px solid var(--iui-color-background-5);
 }
@@ -156,15 +141,12 @@
   left:0;
 }
 .iui-tabs.iui-default .iui-tab:hover{
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-tabs.iui-default .iui-tab.iui-active{
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-tabs.iui-default .iui-tab[disabled]{
-  background-color:#edeff2;
   background-color:var(--iui-color-background-3);
 }
 .iui-tabs.iui-default .iui-tab:focus{
@@ -180,6 +162,9 @@
 .iui-horizontal .iui-tabs.iui-default ~ .iui-tabs-content{
   margin-top:-1px;
 }
+.iui-horizontal .iui-tabs.iui-default :where(.iui-button){
+  height:100%;
+}
 
 .iui-vertical .iui-tabs.iui-default .iui-tab.iui-active{
   border-right-color:transparent;
@@ -190,22 +175,22 @@
 .iui-vertical .iui-tabs.iui-default ~ .iui-tabs-content{
   margin-left:-1px;
 }
+.iui-vertical .iui-tabs.iui-default :where(.iui-button){
+  width:100%;
+}
 
 .iui-tabs.iui-default.iui-large .iui-tab{
-  min-height:49px;
+  min-height:52px;
 }
 .iui-tabs.iui-default.iui-large .iui-tab-description{
   display:-webkit-box;
 }
 .iui-tabs.iui-default.iui-green .iui-tab::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-default ~ .iui-tabs-content{
   padding-left:16px;
   padding-right:16px;
-  background-color:white;
-  border:1px solid #c7ccd1;
   background-color:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-5);
 }
@@ -218,16 +203,13 @@
   right:0;
 }
 .iui-tabs.iui-borderless .iui-tab:hover{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-borderless .iui-tab.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-horizontal .iui-tabs.iui-borderless ~ .iui-tabs-content{
   margin-top:-2px;
-  border-top:2px solid #dde1e4;
   border-top:2px solid var(--iui-color-background-4);
 }
 
@@ -235,35 +217,29 @@
   margin-left:-2px;
   padding-left:12px;
   padding-right:12px;
-  border-left:2px solid #dde1e4;
   border-left:2px solid var(--iui-color-background-4);
 }
 
 .iui-tabs.iui-borderless.iui-green .iui-active, .iui-tabs.iui-borderless.iui-green .iui-tab:hover{
-  background-color:rgba(83, 162, 26, 0.1);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab{
-  min-height:49px;
+  min-height:52px;
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab-description{
   display:-webkit-box;
 }
 .iui-tabs.iui-borderless .iui-tab[disabled]:hover{
   background-color:transparent;
-  background-color:transparent;
 }
 .iui-tabs.iui-pill{
   justify-content:space-evenly;
+  gap:2px;
 }
 .iui-tabs.iui-pill > li{
   flex:1 1 0;
 }
-.iui-tabs.iui-pill > li:not(:last-child){
-  margin-right:2px;
-}
 .iui-tabs.iui-pill.iui-green .iui-tab:hover{
-  background-color:rgba(83, 162, 26, 0.1);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-pill .iui-tab{
@@ -278,21 +254,17 @@
   left:0;
 }
 .iui-tabs.iui-pill .iui-tab:hover{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-pill .iui-tab[disabled]:hover{
   background-color:transparent;
-  background-color:transparent;
 }
 .iui-tabs.iui-animated::after{
   position:absolute;
   content:" ";
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 .iui-tabs.iui-animated.iui-green::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-horizontal .iui-tabs.iui-animated::after{
@@ -322,7 +294,6 @@
 .iui-tabs.iui-not-animated .iui-tab::after{
   content:"";
   position:absolute;
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -331,7 +302,6 @@
   }
 }
 .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 
@@ -341,14 +311,8 @@
 }
 .iui-tab-label > *{
   overflow:hidden;
-  white-space:nowrap;
   text-overflow:ellipsis;
-}
-@supports (-webkit-line-clamp: 1){
-  .iui-tab-label > *{
-    white-space:unset;
-    display:-webkit-box;
-    -webkit-line-clamp:3;
-    -webkit-box-orient:vertical;
-  }
+  display:-webkit-box;
+  -webkit-line-clamp:3;
+  -webkit-box-orient:vertical;
 }

package/css/tag.css

@@ -8,11 +8,10 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
-  height:33px;
-  margin-top:3px;
-  margin-bottom:3px;
+  height:36px;
+  margin-top:4px;
+  margin-bottom:4px;
   border-radius:9999px;
-  box-sizing:border-box;
   padding:0 2px;
   align-items:center;
   transition:border-color 0.2s ease-out;
@@ -20,15 +19,11 @@
   text-transform:none;
   cursor:default;
   -webkit-tap-highlight-color:transparent;
-  border:1px solid rgba(0, 0, 0, 0.4);
-  background-color:white;
-  color:rgba(0, 0, 0, 0.8);
   border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color);
 }
 .iui-tag:hover{
-  border-color:black;
   border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
 }
 
@@ -40,7 +35,6 @@
   display:inline-flex;
 }
 .iui-tag-basic:not(a){
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 
@@ -51,7 +45,7 @@
   vertical-align:baseline;
   font-size:14px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
@@ -66,12 +60,9 @@
 }
 
 a.iui-tag-basic{
-  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;
 }
@@ -86,7 +77,6 @@ a.iui-tag-basic:focus-visible{
   }
 }
 a.iui-tag-basic:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 a.iui-tag-basic:hover{
@@ -126,7 +116,6 @@ a.iui-tag-basic:focus-visible{
 }
 
 .iui-tag-container{
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-tag-container > a.iui-tag-basic{
@@ -140,16 +129,10 @@ a.iui-tag-basic:focus-visible{
 }
 .iui-tag-container.iui-truncate{
   overflow:hidden;
-  white-space:nowrap;
   text-overflow:ellipsis;
-}
-@supports (-webkit-line-clamp: 1){
-  .iui-tag-container.iui-truncate{
-    white-space:unset;
-    display:-webkit-box;
-    -webkit-line-clamp:1;
-    -webkit-box-orient:vertical;
-  }
+  display:-webkit-box;
+  -webkit-line-clamp:1;
+  -webkit-box-orient:vertical;
 }
 .iui-tag-container.iui-scroll{
   white-space:nowrap;
@@ -157,7 +140,6 @@ a.iui-tag-basic:focus-visible{
 }
 .iui-tag-container.iui-visible{
   border-radius:4px;
-  padding:3px 12px;
-  background-color:#edeff2;
+  padding:4px 12px;
   background-color:var(--iui-color-background-3);
 }

package/css/text.css

@@ -9,7 +9,7 @@
   vertical-align:baseline;
   font-size:32px;
   font-weight:300;
-  line-height:44px;
+  line-height:48px;
 }
 
 .iui-text-title{
@@ -19,7 +19,7 @@
   vertical-align:baseline;
   font-size:24px;
   font-weight:300;
-  line-height:33px;
+  line-height:36px;
 }
 
 .iui-text-subheading{
@@ -29,7 +29,7 @@
   vertical-align:baseline;
   font-size:18px;
   font-weight:400;
-  line-height:33px;
+  line-height:36px;
 }
 
 .iui-text-leading{
@@ -39,7 +39,7 @@
   vertical-align:baseline;
   font-size:16px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
 }
 
 .iui-text-block{
@@ -49,7 +49,7 @@
   vertical-align:baseline;
   font-size:14px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
 }
 
 .iui-text-small{
@@ -59,11 +59,10 @@
   vertical-align:baseline;
   font-size:12px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
 }
 
 .iui-text-muted{
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 
@@ -76,7 +75,6 @@
   color:transparent;
   border-radius:4px;
   cursor:progress;
-  background:linear-gradient(292deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
   background:linear-gradient(292deg, var(--iui-text-color-muted), var(--iui-text-color-muted), var(--iui-text-color-placeholder), var(--iui-text-color-muted), var(--iui-text-color-muted));
   background-size:200% 100%;
 }
@@ -117,5 +115,5 @@
 
 .iui-text-spacing{
   padding:0;
-  margin:0 0 22px;
+  margin:0 0 24px;
 }