@itwin/itwinui-css 1.0.0-dev.11 → 1.0.0-dev.13

package/css/utils.css

@@ -45,7 +45,7 @@
 }
 
 [data-iui-icon-color=default]{
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
 }
 @media (forced-colors: active){
   [data-iui-icon-color=default]{
@@ -54,19 +54,19 @@
 }
 
 [data-iui-icon-color=informational]{
-  fill:var(--iui-color-foreground-primary);
+  fill:var(--iui-color-icon-informational);
 }
 
 [data-iui-icon-color=positive]{
-  fill:var(--iui-color-foreground-positive);
+  fill:var(--iui-color-icon-positive);
 }
 
 [data-iui-icon-color=warning]{
-  fill:var(--iui-color-foreground-warning);
+  fill:var(--iui-color-icon-warning);
 }
 
 [data-iui-icon-color=negative]{
-  fill:var(--iui-color-foreground-negative);
+  fill:var(--iui-color-icon-negative);
 }
 
 .iui-input-container{
@@ -128,20 +128,28 @@ label.iui-input-container.iui-disabled{
 .iui-input-container > .iui-label{
   font-weight:var(--iui-font-weight-semibold);
   margin-bottom:var(--iui-size-2xs);
+  color:var(--_iui-input-label-color);
   grid-area:label;
   align-self:center;
 }
 .iui-input-container > .iui-label.iui-required::after{
   content:"*";
   margin-left:var(--iui-size-2xs);
-  color:var(--iui-color-foreground-negative);
+  color:var(--iui-color-text-negative);
 }
+.iui-input-container > .iui-label.iui-disabled{
+  --_iui-input-label-color:var(--iui-color-text-disabled);
+}
+.iui-input-container.iui-disabled{
+  --_iui-input-label-color:var(--iui-color-text-disabled);
+}
+
 .iui-input-container .iui-input-icon{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
   grid-area:icon;
   align-self:center;
 }
@@ -157,7 +165,7 @@ label.iui-input-container.iui-disabled{
   font-size:var(--iui-font-size-0);
   grid-area:message;
   margin-top:var(--iui-size-2xs);
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }
 .iui-input-container .iui-message a{
   -webkit-user-select:none;
@@ -200,15 +208,15 @@ label.iui-input-container.iui-disabled{
   transition:background var(--iui-duration-2) ease-out;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
-  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
+  background:var(--iui-color-background) radial-gradient(circle, transparent 1%, var(--iui-color-background) 1%) center/15000%;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
-  background-color:var(--iui-color-background-2);
+  background-color:var(--iui-color-background-backdrop);
   background-size:100%;
   transition:background var(--iui-duration-0);
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
-  fill:var(--iui-color-foreground-2);
+  fill:var(--iui-color-icon);
   transition:transform var(--iui-duration-1) ease-out;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
@@ -218,7 +226,7 @@ label.iui-input-container.iui-disabled{
   cursor:not-allowed;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
-  fill:var(--iui-color-foreground-5);
+  fill:var(--iui-color-icon-disabled);
 }
 .iui-input-container.iui-inline-label > .iui-label{
   margin:0 var(--iui-size-m) 0 0;
@@ -227,29 +235,29 @@ label.iui-input-container.iui-disabled{
   margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
 }
 .iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-input-container.iui-positive::selection,
 .iui-input-container.iui-positive *::selection{
-  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-input-container.iui-positive .iui-input-icon{
-  fill:var(--iui-color-foreground-positive);
+  fill:var(--iui-color-icon-positive);
 }
 .iui-input-container.iui-positive .iui-message{
-  color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-text-positive);
 }
 .iui-input-container.iui-positive .iui-message a{
   text-decoration:underline;
-  color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-text-positive);
 }
 .iui-input-container.iui-positive .iui-message a:hover{
   text-decoration:none;
-  color:var(--iui-color-foreground-positive-hover);
+  color:var(--iui-color-text-positive-hover);
 }
 .iui-input-container.iui-positive .iui-input{
   padding-bottom:calc(var(--iui-size-2xs) - 1px);
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-positive);
 }
 .iui-input-container.iui-positive .iui-input[data-iui-size=small]{
   padding-bottom:0;
@@ -258,13 +266,13 @@ label.iui-input-container.iui-disabled{
   padding-bottom:calc(var(--iui-size-xs) - 1px);
 }
 .iui-input-container.iui-positive .iui-input:focus{
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
-  outline:2px solid var(--iui-color-foreground-positive);
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-positive);
+  outline:2px solid var(--iui-color-text-positive);
   outline-offset:-2px;
 }
 .iui-input-container.iui-positive .iui-input-with-icon{
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-positive);
-  --_focus-color:var(--iui-color-foreground-positive);
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-border-positive);
+  --_focus-color:var(--iui-color-text-positive);
 }
 .iui-input-container.iui-positive .iui-select-button{
   border-bottom:transparent;
@@ -276,124 +284,132 @@ label.iui-input-container.iui-disabled{
   bottom:0;
   left:0;
   height:var(--iui-size-3xs);
-  background-color:var(--iui-color-foreground-positive);
+  background-color:var(--iui-color-border-positive);
 }
-.iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
+.iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
+  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
 }
-.iui-input-container.iui-negative::selection,
-.iui-input-container.iui-negative *::selection{
-  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
+.iui-input-container.iui-warning::selection,
+.iui-input-container.iui-warning *::selection{
+  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
 }
-.iui-input-container.iui-negative .iui-input-icon{
-  fill:var(--iui-color-foreground-negative);
+.iui-input-container.iui-warning .iui-input-icon{
+  fill:var(--iui-color-icon-warning);
 }
-.iui-input-container.iui-negative .iui-message{
-  color:var(--iui-color-foreground-negative);
+.iui-input-container.iui-warning .iui-message{
+  color:var(--iui-color-text-warning);
 }
-.iui-input-container.iui-negative .iui-message a{
+.iui-input-container.iui-warning .iui-message a{
   text-decoration:underline;
-  color:var(--iui-color-foreground-negative);
+  color:var(--iui-color-text-warning);
 }
-.iui-input-container.iui-negative .iui-message a:hover{
+.iui-input-container.iui-warning .iui-message a:hover{
   text-decoration:none;
-  color:var(--iui-color-foreground-negative-hover);
+  color:var(--iui-color-text-warning-hover);
 }
-.iui-input-container.iui-negative .iui-input{
+.iui-input-container.iui-warning .iui-input{
   padding-bottom:calc(var(--iui-size-2xs) - 1px);
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-warning);
 }
-.iui-input-container.iui-negative .iui-input[data-iui-size=small]{
+.iui-input-container.iui-warning .iui-input[data-iui-size=small]{
   padding-bottom:0;
 }
-.iui-input-container.iui-negative .iui-input[data-iui-size=large]{
+.iui-input-container.iui-warning .iui-input[data-iui-size=large]{
   padding-bottom:calc(var(--iui-size-xs) - 1px);
 }
-.iui-input-container.iui-negative .iui-input:focus{
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
-  outline:2px solid var(--iui-color-foreground-negative);
+.iui-input-container.iui-warning .iui-input:focus{
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-warning);
+  outline:2px solid var(--iui-color-text-warning);
   outline-offset:-2px;
 }
-.iui-input-container.iui-negative .iui-input-with-icon{
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-negative);
-  --_focus-color:var(--iui-color-foreground-negative);
+.iui-input-container.iui-warning .iui-input-with-icon{
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-border-warning);
+  --_focus-color:var(--iui-color-text-warning);
 }
-.iui-input-container.iui-negative .iui-select-button{
+.iui-input-container.iui-warning .iui-select-button{
   border-bottom:transparent;
 }
-.iui-input-container.iui-negative .iui-select-button::after{
+.iui-input-container.iui-warning .iui-select-button::after{
   content:"";
   width:100%;
   position:absolute;
   bottom:0;
   left:0;
   height:var(--iui-size-3xs);
-  background-color:var(--iui-color-foreground-negative);
+  background-color:var(--iui-color-border-warning);
 }
-.iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
+.iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
+  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
 }
-.iui-input-container.iui-warning::selection,
-.iui-input-container.iui-warning *::selection{
-  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
+.iui-input-container.iui-negative::selection,
+.iui-input-container.iui-negative *::selection{
+  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
 }
-.iui-input-container.iui-warning .iui-input-icon{
-  fill:var(--iui-color-foreground-warning);
+.iui-input-container.iui-negative .iui-input-icon{
+  fill:var(--iui-color-icon-negative);
 }
-.iui-input-container.iui-warning .iui-message{
-  color:var(--iui-color-foreground-warning);
+.iui-input-container.iui-negative .iui-message{
+  color:var(--iui-color-text-negative);
 }
-.iui-input-container.iui-warning .iui-message a{
+.iui-input-container.iui-negative .iui-message a{
   text-decoration:underline;
-  color:var(--iui-color-foreground-warning);
+  color:var(--iui-color-text-negative);
 }
-.iui-input-container.iui-warning .iui-message a:hover{
+.iui-input-container.iui-negative .iui-message a:hover{
   text-decoration:none;
-  color:var(--iui-color-foreground-warning-hover);
+  color:var(--iui-color-text-negative-hover);
 }
-.iui-input-container.iui-warning .iui-input{
+.iui-input-container.iui-negative .iui-input{
   padding-bottom:calc(var(--iui-size-2xs) - 1px);
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-negative);
 }
-.iui-input-container.iui-warning .iui-input[data-iui-size=small]{
+.iui-input-container.iui-negative .iui-input[data-iui-size=small]{
   padding-bottom:0;
 }
-.iui-input-container.iui-warning .iui-input[data-iui-size=large]{
+.iui-input-container.iui-negative .iui-input[data-iui-size=large]{
   padding-bottom:calc(var(--iui-size-xs) - 1px);
 }
-.iui-input-container.iui-warning .iui-input:focus{
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
-  outline:2px solid var(--iui-color-foreground-warning);
+.iui-input-container.iui-negative .iui-input:focus{
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-border-negative);
+  outline:2px solid var(--iui-color-text-negative);
   outline-offset:-2px;
 }
-.iui-input-container.iui-warning .iui-input-with-icon{
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-warning);
-  --_focus-color:var(--iui-color-foreground-warning);
+.iui-input-container.iui-negative .iui-input-with-icon{
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-border-negative);
+  --_focus-color:var(--iui-color-text-negative);
 }
-.iui-input-container.iui-warning .iui-select-button{
+.iui-input-container.iui-negative .iui-select-button{
   border-bottom:transparent;
 }
-.iui-input-container.iui-warning .iui-select-button::after{
+.iui-input-container.iui-negative .iui-select-button::after{
   content:"";
   width:100%;
   position:absolute;
   bottom:0;
   left:0;
   height:var(--iui-size-3xs);
-  background-color:var(--iui-color-foreground-warning);
+  background-color:var(--iui-color-border-negative);
 }
 
 .iui-input-label{
   font-weight:var(--iui-font-weight-semibold);
   margin-bottom:var(--iui-size-2xs);
+  color:var(--_iui-input-label-color);
   cursor:default;
   display:block;
 }
 .iui-input-label.iui-required::after{
   content:"*";
   margin-left:var(--iui-size-2xs);
-  color:var(--iui-color-foreground-negative);
+  color:var(--iui-color-text-negative);
+}
+.iui-input-label.iui-disabled{
+  --_iui-input-label-color:var(--iui-color-text-disabled);
+}
+.iui-input-container.iui-disabled{
+  --_iui-input-label-color:var(--iui-color-text-disabled);
 }
+
 label.iui-input-label{
   cursor:pointer;
 }
@@ -410,85 +426,40 @@ label.iui-input-label.iui-disabled{
   margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
 }
 
-.iui-notification-primary{
+.iui-notification-marker{
+  --_iui-notification-marker-color:var(--iui-color-icon-informational);
   position:relative;
 }
-.iui-notification-primary::before{
+.iui-notification-marker::before{
   content:"";
   position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
+  width:var(--iui-size-xs);
+  height:var(--iui-size-xs);
+  top:0;
+  right:0;
+  transform:translate(50%, -50%);
   border-radius:100%;
-  background-color:var(--iui-color-foreground-primary);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+  background-color:var(--_iui-notification-marker-color);
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary::before{
+  .iui-notification-marker::before{
     transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
   }
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary.iui-urgent::before{
-    -webkit-animation:pulse-primary 2s infinite;
-            animation:pulse-primary 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-positive{
-  position:relative;
-}
-.iui-notification-positive::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-positive);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+.iui-notification-marker > *{
+  -webkit-mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
+          mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive.iui-urgent::before{
-    -webkit-animation:pulse-positive 2s infinite;
-            animation:pulse-positive 2s infinite;
+  .iui-notification-marker:where([data-iui-urgent="true"])::before{
+    -webkit-animation:pulse 2s infinite;
+            animation:pulse 2s infinite;
   }
 }
 @media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-positive{
+  @-webkit-keyframes pulse{
     0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
+      box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
     }
     70%{
       box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -497,9 +468,9 @@ label.iui-input-label.iui-disabled{
       box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
-  @keyframes pulse-positive{
+  @keyframes pulse{
     0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
+      box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
     }
     70%{
       box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -509,155 +480,17 @@ label.iui-input-label.iui-disabled{
     }
   }
 }
-
-.iui-notification-warning{
-  position:relative;
+.iui-notification-marker[data-iui-variant=positive]{
+  --_iui-notification-marker-color:var(--iui-color-icon-positive);
 }
-.iui-notification-warning::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-warning);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning.iui-urgent::before{
-    -webkit-animation:pulse-warning 2s infinite;
-            animation:pulse-warning 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-warning{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-warning{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-negative{
-  position:relative;
-}
-.iui-notification-negative::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-negative);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative.iui-urgent::before{
-    -webkit-animation:pulse-negative 2s infinite;
-            animation:pulse-negative 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-negative{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-negative{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-accessory{
-  position:relative;
-}
-.iui-notification-accessory::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-accessory);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
+.iui-notification-marker[data-iui-variant=warning]{
+  --_iui-notification-marker-color:var(--iui-color-icon-warning);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory.iui-urgent::before{
-    -webkit-animation:pulse-accessory 2s infinite;
-            animation:pulse-accessory 2s infinite;
-  }
+.iui-notification-marker[data-iui-variant=negative]{
+  --_iui-notification-marker-color:var(--iui-color-icon-negative);
 }
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
+.iui-notification-marker[data-iui-variant=white]{
+  --_iui-notification-marker-color:var(--iui-color-white);
 }
 .iui-popover.tippy-box{
   all:revert;

package/css/workflow-diagram.css

@@ -18,9 +18,9 @@
   --_iui-workflow-diagram-circle-background-color:var(--iui-color-background-positive);
   --_iui-workflow-diagram-circle-border-color:var(--iui-color-background-positive);
   --_iui-workflow-diagram-circle-border-radius:var(--iui-border-radius-1);
-  --_iui-workflow-diagram-circle-text-color:var(--iui-color-foreground-accessory);
-  --_iui-workflow-diagram-track-before-color:var(--iui-color-foreground-positive);
-  --_iui-workflow-diagram-track-after-color:var(--iui-color-foreground-positive);
+  --_iui-workflow-diagram-circle-text-color:var(--iui-color-white);
+  --_iui-workflow-diagram-track-before-color:var(--iui-color-border-positive);
+  --_iui-workflow-diagram-track-after-color:var(--iui-color-border-positive);
   flex:1;
   align-items:center;
   display:flex;
@@ -34,10 +34,10 @@
   color:var(--_iui-workflow-diagram-circle-text-color);
 }
 .iui-workflow-diagram-step:first-of-type, .iui-workflow-diagram-step:last-of-type{
-  --_iui-workflow-diagram-circle-background-color:var(--iui-color-background-1);
-  --_iui-workflow-diagram-circle-border-color:var(--iui-color-foreground-positive);
+  --_iui-workflow-diagram-circle-background-color:var(--iui-color-background);
+  --_iui-workflow-diagram-circle-border-color:var(--iui-color-border-positive);
   --_iui-workflow-diagram-circle-border-radius:var(--iui-size-s);
-  --_iui-workflow-diagram-circle-text-color:var(--iui-color-foreground-positive);
+  --_iui-workflow-diagram-circle-text-color:var(--iui-color-text-positive);
 }
 .iui-workflow-diagram-step::before, .iui-workflow-diagram-step::after{
   content:"";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "1.0.0-dev.11",
+  "version": "1.0.0-dev.13",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "css/all.css",