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

package/css/tabs.css

@@ -17,7 +17,7 @@
   height:0;
 }
 .iui-tabs-wrapper.iui-horizontal .iui-tab.iui-active::after{
-  height:2px;
+  height:var(--iui-size-3xs);
 }
 .iui-tabs-wrapper.iui-vertical .iui-tabs li,
 .iui-tabs-wrapper.iui-vertical .iui-tabs .iui-tab{
@@ -32,7 +32,7 @@
   height:100%;
 }
 .iui-tabs-wrapper.iui-vertical .iui-tab.iui-active::after{
-  width:2px;
+  width:var(--iui-size-3xs);
 }
 
 .iui-tabs{
@@ -56,34 +56,28 @@
   position:relative;
   display:flex;
   align-items:center;
-  font-size:14px;
-  min-height:38px;
+  font-size:var(--iui-font-size-1);
+  min-height:calc(var(--iui-size-m) * 2.5);
   height:100%;
   cursor:pointer;
-  transition:background-color 0.2s ease-out;
-  color:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
+  transition:background-color var(--iui-duration-1) 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-color-foreground-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);
+  color:var(--iui-color-foreground-4);
 }
 .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-color-foreground-5);
 }
 .iui-tabs .iui-tab:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -96,58 +90,49 @@
   }
 }
 .iui-tabs .iui-tab-icon{
-  width:16px;
-  height:16px;
+  display:flex;
   flex-shrink:0;
-  transition:fill 0.2s ease-out;
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  fill:var(--iui-color-foreground-2);
+  transition:fill var(--iui-duration-1) ease-out;
 }
 .iui-tabs .iui-tab-icon + .iui-tab-label{
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-tabs .iui-tab-description{
   display:none;
-  font-size:12px;
-  opacity:0.6;
+  font-size:var(--iui-font-size-0);
   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-color-foreground-positive);
 }
 .iui-tabs ~ .iui-tabs-content{
-  padding-top:11px;
-  padding-bottom:11px;
-  box-sizing:border-box;
+  padding-top:var(--iui-size-s);
+  padding-bottom:var(--iui-size-s);
 }
 .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){
   .iui-tabs.iui-default .iui-active::after{
-    transition:width 0.2s ease, height 0.2s ease;
+    transition:width var(--iui-duration-1) ease, height var(--iui-duration-1) ease;
   }
 }
 .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;
+  padding:var(--iui-size-2xs) var(--iui-size-m);
   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{
@@ -198,25 +180,23 @@
 }
 
 .iui-tabs.iui-default.iui-large .iui-tab{
-  min-height:49px;
+  min-height:calc(var(--iui-size-m) * 3.5);
 }
 .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;
+  padding-left:var(--iui-size-m);
+  padding-right:var(--iui-size-m);
   background-color:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-5);
 }
 .iui-tabs.iui-borderless .iui-tab{
-  padding:4px 24px;
+  padding-block:var(--iui-size-2xs);
+  padding-inline:calc(var(--iui-size-s) * 2);
   background-color:transparent;
 }
 .iui-tabs.iui-borderless .iui-tab::after{
@@ -224,120 +204,111 @@
   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));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .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));
+  background-color:var(--iui-color-background-subtle-primary);
 }
 .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);
+  margin-top:calc(0px - var(--iui-size-3xs));
+  border-top:var(--iui-size-3xs) solid var(--iui-color-background-4);
 }
 
 .iui-vertical .iui-tabs.iui-borderless ~ .iui-tabs-content{
-  margin-left:-2px;
-  padding-left:12px;
-  padding-right:12px;
-  border-left:2px solid #dde1e4;
-  border-left:2px solid var(--iui-color-background-4);
+  margin-left:calc(0px - var(--iui-size-3xs));
+  padding-left:var(--iui-size-s);
+  padding-right:var(--iui-size-s);
+  border-left:var(--iui-size-3xs) 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-green .iui-active{
+  background-color:var(--iui-color-background-subtle-positive);
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab{
-  min-height:49px;
+  min-height:calc(var(--iui-size-m) * 3.5);
 }
 .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:var(--iui-size-3xs);
 }
 .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));
+  background-color:var(--iui-color-background-transparent-hover);
+}
+.iui-tabs.iui-pill.iui-green .iui-tab.iui-active:hover{
+  background-color:var(--iui-color-background-subtle-positive);
 }
 .iui-tabs.iui-pill .iui-tab{
-  padding:4px;
+  padding:var(--iui-size-2xs);
   background-color:transparent;
   width:100%;
   justify-content:center;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-tabs.iui-pill .iui-tab::after{
   bottom:0;
   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));
+  background-color:var(--iui-color-background-transparent-hover);
+}
+.iui-tabs.iui-pill .iui-tab.iui-active:hover{
+  background-color:var(--iui-color-background-subtle-primary);
 }
 .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{
-  top:calc(100% - 2px);
-  height:2px;
+  top:calc(100% - var(--iui-size-3xs));
+  height:var(--iui-size-3xs);
   left:var(--stripe-left);
   width:var(--stripe-width);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-horizontal .iui-tabs.iui-animated::after{
-    transition:width 0.2s ease-out, left 0.2s ease-out;
+    transition:width var(--iui-duration-1) ease-out, left var(--iui-duration-1) ease-out;
   }
 }
 
 .iui-vertical .iui-tabs.iui-animated::after{
-  left:calc(100% - 2px);
-  width:2px;
+  left:calc(100% - var(--iui-size-3xs));
+  width:var(--iui-size-3xs);
   top:var(--stripe-top);
   height:var(--stripe-height);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-vertical .iui-tabs.iui-animated::after{
-    transition:top 0.2s ease-out;
+    transition:top var(--iui-duration-1) ease-out;
   }
 }
 
 .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){
   .iui-tabs.iui-not-animated .iui-active::after{
-    transition:width 0.2s ease, height 0.2s ease;
+    transition:width var(--iui-duration-1) ease, height var(--iui-duration-1) ease;
   }
 }
 .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 
@@ -347,14 +318,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,28 +8,22 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
-  height:33px;
-  margin-top:3px;
-  margin-bottom:3px;
-  border-radius:9999px;
-  box-sizing:border-box;
-  padding:0 2px;
+  height:calc(var(--iui-size-s) * 3);
+  margin-block:var(--iui-size-2xs);
+  border-radius:var(--iui-border-radius-round);
+  padding:0 var(--iui-size-3xs);
   align-items:center;
-  transition:border-color 0.2s ease-out;
-  font-size:14px;
+  transition:border-color var(--iui-duration-1) ease-out;
+  font-size:var(--iui-font-size-1);
   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));
+  border:1px solid var(--iui-color-foreground-4);
   background-color:var(--iui-color-background-1);
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 .iui-tag:hover{
-  border-color:black;
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+  border-color:var(--iui-color-foreground-1);
 }
 
 .iui-tag-basic{
@@ -40,8 +34,7 @@
   display:inline-flex;
 }
 .iui-tag-basic:not(a){
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 
 .iui-tag-label{
@@ -49,29 +42,26 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:14px;
-  font-weight:400;
-  line-height:22px;
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
-  margin:0 4px 0 8px;
+  margin:0 var(--iui-size-2xs) 0 var(--iui-size-xs);
 }
 .iui-tag-label:only-child{
-  margin:0 8px;
+  margin:0 var(--iui-size-xs);
 }
 
 .iui-tag-button{
-  border-radius:50%;
+  border-radius:var(--iui-border-radius-round);
 }
 
 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;
+  -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;
 }
@@ -86,8 +76,7 @@ a.iui-tag-basic:focus-visible{
   }
 }
 a.iui-tag-basic:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 a.iui-tag-basic:hover{
   text-decoration:underline;
@@ -126,38 +115,30 @@ a.iui-tag-basic:focus-visible{
 }
 
 .iui-tag-container{
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-tag-container > a.iui-tag-basic{
-  margin:2px;
+  margin:var(--iui-size-3xs);
 }
 .iui-tag-container > *:not(last-child){
-  margin-right:4px;
+  margin-right:var(--iui-size-2xs);
 }
 .iui-tag-container > .iui-tag-basic:not(:last-child)::after{
   content:",";
 }
 .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;
   overflow-x:scroll;
 }
 .iui-tag-container.iui-visible{
-  border-radius:4px;
-  padding:3px 12px;
-  background-color:#edeff2;
+  border-radius:var(--iui-border-radius-1);
+  padding:var(--iui-size-2xs) var(--iui-size-s);
   background-color:var(--iui-color-background-3);
 }

package/css/text.css

@@ -7,9 +7,9 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:32px;
-  font-weight:300;
-  line-height:44px;
+  font-size:var(--iui-font-size-5);
+  font-weight:var(--iui-font-weight-light);
+  line-height:calc(2 * var(--iui-size-l));
 }
 
 .iui-text-title{
@@ -17,9 +17,9 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:24px;
-  font-weight:300;
-  line-height:33px;
+  font-size:var(--iui-font-size-4);
+  font-weight:var(--iui-font-weight-light);
+  line-height:calc(1.5 * var(--iui-size-l));
 }
 
 .iui-text-subheading{
@@ -27,9 +27,9 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:18px;
-  font-weight:400;
-  line-height:33px;
+  font-size:var(--iui-font-size-3);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:calc(1.5 * var(--iui-size-l));
 }
 
 .iui-text-leading{
@@ -37,9 +37,9 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:16px;
-  font-weight:400;
-  line-height:22px;
+  font-size:var(--iui-font-size-2);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
 }
 
 .iui-text-block{
@@ -47,9 +47,9 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:14px;
-  font-weight:400;
-  line-height:22px;
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
 }
 
 .iui-text-small{
@@ -57,14 +57,13 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:12px;
-  font-weight:400;
-  line-height:22px;
+  font-size:var(--iui-font-size-0);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
 }
 
 .iui-text-muted{
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 
 .iui-skeleton{
@@ -74,10 +73,9 @@
       -ms-user-select:none;
           user-select:none;
   color:transparent;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   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:linear-gradient(292deg, var(--iui-color-foreground-4), var(--iui-color-foreground-4), var(--iui-color-foreground-5), var(--iui-color-foreground-4), var(--iui-color-foreground-4));
   background-size:200% 100%;
 }
 @media (forced-colors: active){
@@ -88,8 +86,8 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skeleton{
-    -webkit-animation:skeleton-shimmer 0.8s linear infinite;
-            animation:skeleton-shimmer 0.8s linear infinite;
+    -webkit-animation:skeleton-shimmer var(--iui-duration-3) linear infinite;
+            animation:skeleton-shimmer var(--iui-duration-3) linear infinite;
   }
   @-webkit-keyframes skeleton-shimmer{
     0%{
@@ -117,5 +115,5 @@
 
 .iui-text-spacing{
   padding:0;
-  margin:0 0 22px;
+  margin:0 0 var(--iui-size-l);
 }