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

package/css/anchor.css

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-anchor{
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:4px;
+  -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;
 }
@@ -20,7 +20,7 @@
   }
 }
 .iui-anchor:hover{
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-anchor:hover{
   text-decoration:underline;

package/css/avatar.css

@@ -26,7 +26,7 @@
   height:100%;
   margin:0;
   border-radius:50%;
-  box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-background-transparent-hover);
 }
 .iui-avatar > .iui-initials{
   display:flex;
@@ -40,7 +40,7 @@
   margin:0;
   border-radius:50%;
   font-style:normal;
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
   text-align:center;
   text-decoration:none;
   text-transform:uppercase;
@@ -74,18 +74,18 @@
   align-items:center;
   justify-content:center;
   position:absolute;
-  right:-2px;
-  bottom:-2px;
+  right:calc(0px - var(--iui-size-3xs));
+  bottom:calc(0px - var(--iui-size-3xs));
   width:25%;
   height:25%;
   border-radius:50%;
-  border:2px solid var(--iui-color-background-1);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
   background-color:var(--iui-color-background-5);
 }
 .iui-avatar > .iui-status::after{
   content:"";
-  width:var(--_iui-avatar-status-size, 8px);
-  height:var(--_iui-avatar-status-size, 8px);
+  width:var(--_iui-avatar-status-size, var(--iui-size-xs));
+  height:var(--_iui-avatar-status-size, var(--iui-size-xs));
 }
 .iui-avatar > .iui-status.iui-online{
   background-color:var(--iui-color-background-positive);
@@ -113,16 +113,16 @@
 }
 .iui-avatar > .iui-status.iui-offline{
   background-color:var(--iui-color-background-1);
-  box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  box-shadow:inset 0 0 0 1px var(--iui-color-foreground-3);
 }
 .iui-avatar > .iui-status.iui-offline::after{
   -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
           mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
-  background-color:var(--iui-icons-color);
+  background-color:var(--iui-color-foreground-4);
 }
 .iui-avatar.iui-avatar-count > .iui-initials{
   background-color:var(--iui-color-background-3);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-avatar.iui-avatar-count:focus{
   outline:none;
@@ -134,43 +134,43 @@
   outline:none;
 }
 .iui-avatar.iui-avatar-count:focus:not(:focus-visible) > .iui-stroke{
-  box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-background-transparent-hover);
 }
 .iui-avatar.iui-avatar{
-  width:32px;
-  height:32px;
-  --_iui-avatar-status-size:6px;
+  width:var(--iui-size-xl);
+  height:var(--iui-size-xl);
+  --_iui-avatar-status-size:calc(var(--iui-size-2xs) * 1.5);
 }
 .iui-avatar.iui-avatar > .iui-initials{
-  line-height:32px;
-  font-size:16px;
+  line-height:var(--iui-size-xl);
+  font-size:var(--iui-font-size-2);
 }
 .iui-avatar.iui-small{
-  width:24px;
-  height:24px;
-  --_iui-avatar-status-size:4px;
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
+  --_iui-avatar-status-size:var(--iui-size-2xs);
 }
 .iui-avatar.iui-small > .iui-initials{
-  line-height:24px;
-  font-size:12px;
+  line-height:calc(1.5 * var(--iui-size-m));
+  font-size:var(--iui-font-size-0);
 }
 .iui-avatar.iui-large{
-  width:48px;
-  height:48px;
-  --_iui-avatar-status-size:8px;
+  width:calc(3 * var(--iui-size-m));
+  height:calc(3 * var(--iui-size-m));
+  --_iui-avatar-status-size:var(--iui-size-xs);
 }
 .iui-avatar.iui-large > .iui-initials{
-  line-height:48px;
-  font-size:18px;
+  line-height:calc(3 * var(--iui-size-m));
+  font-size:var(--iui-font-size-3);
 }
 .iui-avatar.iui-x-large{
-  width:64px;
-  height:64px;
-  --_iui-avatar-status-size:12px;
+  width:var(--iui-size-2xl);
+  height:var(--iui-size-2xl);
+  --_iui-avatar-status-size:var(--iui-size-s);
 }
 .iui-avatar.iui-x-large > .iui-initials{
-  line-height:64px;
-  font-size:24px;
+  line-height:var(--iui-size-2xl);
+  font-size:var(--iui-font-size-4);
 }
 
 .iui-avatar-list{
@@ -178,49 +178,49 @@
   flex-wrap:wrap;
 }
 .iui-avatar-list .iui-avatar:not(:first-child){
-  margin-left:4px;
+  margin-left:var(--iui-size-2xs);
 }
 .iui-avatar-list .iui-avatar:not(:first-child).iui-small{
-  margin-left:2px;
+  margin-left:var(--iui-size-3xs);
 }
 .iui-avatar-list .iui-avatar:not(:first-child).iui-large{
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-avatar-list .iui-avatar:not(:first-child).iui-x-large{
-  margin-left:12px;
+  margin-left:var(--iui-size-s);
 }
 .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child){
-  margin-left:-4px;
+  margin-left:calc(0px - var(--iui-size-2xs));
 }
 .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child) .iui-initials{
-  box-shadow:0 0 0 4px var(--iui-color-background-1);
+  box-shadow:0 0 0 var(--iui-size-2xs) var(--iui-color-background-1);
 }
 .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small{
-  margin-left:-2px;
+  margin-left:calc(0px - var(--iui-size-3xs));
 }
 .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small .iui-initials{
-  box-shadow:0 0 0 2px var(--iui-color-background-1);
+  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-background-1);
 }
 .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-large{
-  margin-left:-8px;
+  margin-left:calc(0px - var(--iui-size-xs));
 }
 .iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-x-large{
-  margin-left:-12px;
+  margin-left:calc(0px - var(--iui-size-s));
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-avatar-list.iui-stacked.iui-animated .iui-avatar{
-    transition:margin-left 0.4s ease-out;
+    transition:margin-left var(--iui-duration-2) ease-out;
   }
 }
 .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child){
-  margin-left:4px;
+  margin-left:var(--iui-size-2xs);
 }
 .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-small{
-  margin-left:2px;
+  margin-left:var(--iui-size-3xs);
 }
 .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-large{
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-x-large{
-  margin-left:12px;
+  margin-left:var(--iui-size-s);
 }

package/css/backdrop.css

@@ -10,15 +10,17 @@
   left:0;
   width:100%;
   height:100%;
-  background-color:rgba(0, 0, 0, 0.4);
   background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-  transition:visibility 0s linear, opacity 0.2s ease-out;
-  transition-delay:0.2s, 0s;
+  transition:visibility var(--iui-duration-0) linear, opacity var(--iui-duration-1) ease-out;
+  transition-delay:var(--iui-duration-1), var(--iui-duration-0);
 }
 .iui-backdrop:not(.iui-backdrop-visible){
   visibility:hidden;
   opacity:0;
 }
 .iui-backdrop.iui-backdrop-visible{
-  transition-delay:0s;
+  transition-delay:var(--iui-duration-0);
+}
+.iui-backdrop.iui-backdrop-fixed{
+  position:fixed;
 }

package/css/badge.css

@@ -3,17 +3,17 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-badge{
-  --iui-badge-background-color:#c7ccd1;
-  --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
+  --iui-badge-background-color:hsl(210, 10%, 80%);
+  --_iui-badge-text-color:hsl(0 0% 0% / 0.6);
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
   display:inline-block;
-  font-size:12px;
-  padding:0 6px;
-  margin:6px 0;
-  border-radius:4px;
+  font-size:var(--iui-font-size-0);
+  padding:0 calc(var(--iui-size-2xs) * 1.5);
+  margin:calc(var(--iui-size-s) * 0.5) 0;
+  border-radius:var(--iui-border-radius-1);
   background-color:var(--iui-badge-background-color);
   color:var(--_iui-badge-text-color);
   text-transform:uppercase;
@@ -21,9 +21,9 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  max-width:calc(20ch + 12px);
+  max-width:calc(20ch + var(--iui-size-2xs) * 1.5 * 2);
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }

package/css/blockquote.css

@@ -9,17 +9,17 @@
   vertical-align:baseline;
   display:block;
   position:relative;
-  padding:11px 16px;
-  margin:11px 0;
+  padding:var(--iui-size-s) var(--iui-size-m);
+  margin:var(--iui-size-s) 0;
   text-align:justify;
-  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-  border-radius:4px;
+  box-shadow:var(--iui-shadow-1);
+  border-radius:var(--iui-border-radius-1);
   background-color:var(--iui-color-background-1);
-  border-left:8px solid var(--iui-color-foreground-primary);
+  border-left:var(--iui-size-xs) solid var(--iui-color-foreground-primary);
 }
 .iui-blockquote > footer{
   text-align:right;
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-blockquote > footer > cite{
   font-style:normal;

package/css/breadcrumbs.css

@@ -3,13 +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:38px;
+  height:var(--_iui-breadcrumbs-height);
 }
 
 .iui-breadcrumbs-list{
@@ -37,40 +38,40 @@
 }
 
 .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:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link{
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:4px;
+  -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:38px;
+  line-height:var(--iui-component-height);
 }
 .iui-breadcrumbs-item-overrides > :-moz-any-link{
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:4px;
+  -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:38px;
+  line-height:var(--iui-component-height);
 }
 .iui-breadcrumbs-item-overrides > :any-link{
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:4px;
+  -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:38px;
+  line-height:var(--iui-component-height);
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -99,13 +100,13 @@
   }
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-breadcrumbs-item-overrides > :any-link:hover{
-  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;
@@ -188,26 +189,26 @@
   outline-offset:-1px;
 }
 .iui-breadcrumbs-item-overrides .iui-button.iui-button{
-  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-text-color:var(--iui-color-foreground-2);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-padding-inline:8px;
+  --_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:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-body);
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  --_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:where(:focus){
   outline-offset:-1px;
   outline-width:1px;
 }
 .iui-breadcrumbs-item-overrides .iui-button.iui-button:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-text-color:var(--iui-text-color-placeholder);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
 }
@@ -221,16 +222,16 @@
 }
 
 .iui-breadcrumbs-text{
-  padding:0 8px;
+  padding:0 var(--iui-size-xs);
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
-  line-height:38px;
+  line-height:var(--iui-component-height);
 }
 a.iui-breadcrumbs-text{
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:4px;
+  -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;
 }
@@ -245,7 +246,7 @@ a.iui-breadcrumbs-text:focus-visible{
   }
 }
 a.iui-breadcrumbs-text:hover{
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 a.iui-breadcrumbs-text:hover{
   text-decoration:underline;
@@ -283,14 +284,15 @@ a.iui-breadcrumbs-text:focus{
   vertical-align:baseline;
   font-family:inherit;
   display:inline-flex;
+  flex-shrink:0;
   align-items:center;
   vertical-align:middle;
   justify-content:center;
   position:relative;
-  border-radius:4px;
-  line-height:22px;
-  font-size:14px;
-  font-weight:400;
+  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;
@@ -301,22 +303,25 @@ a.iui-breadcrumbs-text:focus{
   background:var(--_iui-button-background-color);
   color:var(--_iui-button-text-color);
   gap:var(--_iui-button-gap);
-  height:var(--_iui-button-height);
+  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 0.2s ease-out, border-color 0.2s ease-out;
+  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:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-text-color:var(--iui-text-color);
+  --_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-icon-margin-x:3px;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-padding-inline:8px;
+  --_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:var(--iui-color-foreground-primary);
@@ -332,31 +337,37 @@ a.iui-breadcrumbs-text:focus{
   }
 }
 .iui-breadcrumbs-button:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-body);
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  --_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-text-color-placeholder);
+  --_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: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: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{