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

package/css/breadcrumbs.css

@@ -3,12 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-breadcrumbs{
+  --_iui-breadcrumbs-height:var(--iui-component-height);
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
   display:flex;
   align-items:center;
+  height:var(--_iui-breadcrumbs-height);
 }
 
 .iui-breadcrumbs-list{
@@ -23,57 +25,53 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
+  height:100%;
 }
 
 .iui-breadcrumbs-item{
   display:flex;
   align-items:center;
-  line-height:38px;
-  height:38px;
+  height:100%;
 }
 .iui-breadcrumbs-item > *{
   max-width:26ch;
 }
 
 .iui-breadcrumbs-item-overrides > *{
-  padding:0 8px;
+  padding:0 var(--iui-size-xs);
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
 }
 .iui-breadcrumbs-item-overrides > *:not(.iui-button){
-  color:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link{
-  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;
+  box-sizing:border-box;
+  line-height:var(--iui-component-height);
 }
 .iui-breadcrumbs-item-overrides > :-moz-any-link{
-  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;
+  box-sizing:border-box;
+  line-height:var(--iui-component-height);
 }
 .iui-breadcrumbs-item-overrides > :any-link{
-  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;
+  box-sizing:border-box;
+  line-height:var(--iui-component-height);
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -102,16 +100,13 @@
   }
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-breadcrumbs-item-overrides > :any-link:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
   text-decoration:underline;
@@ -194,58 +189,30 @@
   outline-offset:-1px;
 }
 .iui-breadcrumbs-item-overrides .iui-button.iui-button{
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
+  --_iui-button-text-color:var(--iui-color-foreground-2);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-padding-inline:var(--iui-size-xs);
   border:none;
 }
-.iui-breadcrumbs-item-overrides .iui-button.iui-button > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
+.iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:hover, :active){
+  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
 }
-.iui-breadcrumbs-item-overrides .iui-button.iui-button:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-breadcrumbs-item-overrides .iui-button.iui-button.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
-  color:#008ae0;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  color:var(--iui-color-foreground-primary);
-  border-color:transparent;
-}
-.iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled], .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled].iui-active, .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
-}
-.iui-breadcrumbs-item-overrides .iui-button.iui-button:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
+.iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:focus){
   outline-offset:-1px;
+  outline-width:1px;
 }
-@supports not selector(*:focus-visible){
-  .iui-breadcrumbs-item-overrides .iui-button.iui-button:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
+.iui-breadcrumbs-item-overrides .iui-button.iui-button:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
 }
-.iui-breadcrumbs-item-overrides .iui-button-label{
+.iui-breadcrumbs-item-overrides .iui-button > span{
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
@@ -255,18 +222,16 @@
 }
 
 .iui-breadcrumbs-text{
-  padding:0 8px;
+  padding:0 var(--iui-size-xs);
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
+  line-height:var(--iui-component-height);
 }
 a.iui-breadcrumbs-text{
-  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;
 }
@@ -281,8 +246,7 @@ a.iui-breadcrumbs-text:focus-visible{
   }
 }
 a.iui-breadcrumbs-text:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 a.iui-breadcrumbs-text:hover{
   text-decoration:underline;
@@ -314,54 +278,54 @@ a.iui-breadcrumbs-text:focus{
 }
 
 .iui-breadcrumbs-button{
-  --_iui-button-active-stripe-inset:initial;
-  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
   font-family:inherit;
   display:inline-flex;
+  flex-shrink:0;
   align-items:center;
   vertical-align:middle;
   justify-content:center;
   position:relative;
-  box-sizing:border-box;
-  border-radius:4px;
-  line-height:22px;
-  box-shadow:none;
-  font-size:14px;
-  font-weight:400;
-  text-decoration:none;
+  border-radius:var(--iui-border-radius-1);
+  line-height:var(--iui-size-l);
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
   cursor:pointer;
   white-space:nowrap;
-  border:1px solid transparent;
-  color:rgba(0, 0, 0, 0.8);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  border:1px solid var(--_iui-button-border-color);
+  background:var(--_iui-button-background-color);
   color:var(--_iui-button-text-color);
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
+  gap:var(--_iui-button-gap);
+  min-height:var(--_iui-button-min-height);
+  min-width:var(--_iui-button-min-height);
+  padding-block:var(--_iui-button-padding-block);
+  padding-inline:var(--_iui-button-padding-inline);
+  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
+  -webkit-tap-highlight-color:transparent;
+  text-decoration:none;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-text-color:var(--iui-color-foreground-2);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-padding-inline:var(--iui-size-xs);
   padding:0;
   border:none;
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-breadcrumbs-button{
-    transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
-  }
-}
-.iui-breadcrumbs-button:hover{
-  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
-  text-decoration:none;
-}
 .iui-breadcrumbs-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
@@ -372,64 +336,38 @@ a.iui-breadcrumbs-text:focus{
     outline-offset:-1px;
   }
 }
-.iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
-.iui-breadcrumbs-button > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
-}
-.iui-breadcrumbs-button:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-breadcrumbs-button.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
-  color:#008ae0;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  color:var(--iui-color-foreground-primary);
-  border-color:transparent;
-}
-.iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-breadcrumbs-button[disabled].iui-active, .iui-breadcrumbs-button:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+.iui-breadcrumbs-button:where(:hover, :active){
+  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
+}
+.iui-breadcrumbs-button:where(:focus){
+  outline-offset:-1px;
+  outline-width:1px;
+}
+.iui-breadcrumbs-button:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
 }
 .iui-breadcrumbs-button[aria-current]{
-  color:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 
 .iui-breadcrumbs-separator{
   display:flex;
-  margin:0 2px;
+  margin:0 var(--iui-size-3xs);
 }
 .iui-breadcrumbs-separator svg{
-  width:12px;
-  height:12px;
   display:flex;
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
+  flex-shrink:0;
+  width:var(--iui-size-s);
+  height:var(--iui-size-s);
+  fill:var(--iui-color-foreground-4);
+}
+@media (forced-colors: active){
+  .iui-breadcrumbs-separator svg{
+    fill:CanvasText;
+  }
 }
 @media (forced-colors: active){
   .iui-breadcrumbs-separator svg{