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

package/css/utils.css

@@ -2,6 +2,73 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+[data-iui-icon-size=s]{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-s);
+  height:var(--iui-size-s);
+}
+
+[data-iui-icon-size=m]{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+}
+
+[data-iui-icon-size=l]{
+  display:flex;
+  flex-shrink:0;
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
+}
+
+[data-iui-icon-size=xl]{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-xl);
+  height:var(--iui-size-xl);
+}
+
+[data-iui-icon-size="2xl"]{
+  display:flex;
+  flex-shrink:0;
+  width:calc(3 * var(--iui-size-m));
+  height:calc(3 * var(--iui-size-m));
+}
+
+[data-iui-icon-size="3xl"]{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-2xl);
+  height:var(--iui-size-2xl);
+}
+
+[data-iui-icon-color=default]{
+  fill:var(--iui-color-foreground-4);
+}
+@media (forced-colors: active){
+  [data-iui-icon-color=default]{
+    fill:CanvasText;
+  }
+}
+
+[data-iui-icon-color=informational]{
+  fill:var(--iui-color-foreground-primary);
+}
+
+[data-iui-icon-color=positive]{
+  fill:var(--iui-color-foreground-positive);
+}
+
+[data-iui-icon-color=warning]{
+  fill:var(--iui-color-foreground-warning);
+}
+
+[data-iui-icon-color=negative]{
+  fill:var(--iui-color-foreground-negative);
+}
+
 .iui-input-container{
   margin:0;
   padding:0;
@@ -11,28 +78,25 @@
   grid-template:"label label" "inputs inputs"/auto 1fr;
   cursor:default;
 }
-.iui-input-container.iui-inline-icon > .iui-input,
-.iui-input-container.iui-inline-icon > .iui-textarea{
-  padding-right:40px;
+.iui-input-container.iui-inline-icon > .iui-input{
+  padding-right:var(--iui-component-height);
 }
-.iui-input-container.iui-inline-icon > .iui-input:last-child,
-.iui-input-container.iui-inline-icon > .iui-textarea:last-child{
-  padding-right:12px;
+.iui-input-container.iui-inline-icon > .iui-input:last-child{
+  padding-right:var(--iui-size-s);
 }
 .iui-input-container.iui-with-message{
   grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
 }
 .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
-  margin-top:3px;
+  margin-top:var(--iui-size-2xs);
 }
 .iui-input-container .iui-input,
 .iui-input-container .iui-input-with-icon,
-.iui-input-container .iui-textarea,
 .iui-input-container .iui-input-group{
   grid-area:inputs;
 }
 .iui-input-container .iui-input-group .iui-toggle-switch-wrapper{
-  padding:6px 0;
+  padding:calc(var(--iui-size-s) * 0.5) 0;
 }
 label.iui-input-container{
   cursor:pointer;
@@ -46,7 +110,7 @@ label.iui-input-container.iui-disabled{
 }
 .iui-input-container .iui-checkbox-wrapper,
 .iui-input-container .iui-radio-wrapper{
-  min-height:22px;
+  min-height:var(--iui-size-l);
 }
 .iui-input-container.iui-inline-label{
   grid-template:"label inputs icon"/auto 1fr auto;
@@ -56,38 +120,44 @@ label.iui-input-container.iui-disabled{
 }
 .iui-input-container.iui-inline-label > .iui-input-group{
   display:flex;
-  gap:16px;
+  gap:var(--iui-size-m);
 }
 .iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
-  margin-right:16px;
+  margin-right:var(--iui-size-m);
 }
 .iui-input-container > .iui-label{
-  font-weight:600;
-  margin-bottom:3px;
+  font-weight:var(--iui-font-weight-semibold);
+  margin-bottom:var(--iui-size-2xs);
   grid-area:label;
   align-self:center;
 }
 .iui-input-container > .iui-label.iui-required::after{
   content:"*";
-  margin-left:4px;
+  margin-left:var(--iui-size-2xs);
   color:var(--iui-color-foreground-negative);
 }
 .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);
   grid-area:icon;
-  width:16px;
-  height:16px;
   align-self:center;
-  fill:var(--iui-icons-color);
+}
+@media (forced-colors: active){
+  .iui-input-container .iui-input-icon{
+    fill:CanvasText;
+  }
 }
 .iui-input-container .iui-input-icon:not(:last-child){
-  margin-right:4px;
+  margin-right:var(--iui-size-2xs);
 }
 .iui-input-container .iui-message{
-  font-size:12px;
+  font-size:var(--iui-font-size-0);
   grid-area:message;
-  margin-top:3px;
-  color:var(--iui-text-color-muted);
+  margin-top:var(--iui-size-2xs);
+  color:var(--iui-color-foreground-4);
 }
 .iui-input-container .iui-message a{
   -webkit-user-select:none;
@@ -98,12 +168,14 @@ label.iui-input-container.iui-disabled{
 .iui-input-container.iui-inline-icon > .iui-input-icon{
   grid-area:inputs;
   justify-self:end;
-  margin:0 14px 0 0;
+  margin:0 calc(var(--iui-size-xs) + 1px) 0 0;
   position:relative;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon svg{
-  width:16px;
-  height:16px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
   height:100%;
@@ -118,12 +190,13 @@ label.iui-input-container.iui-disabled{
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
   align-items:center;
-  height:90%;
-  margin-right:2px;
-  padding:0 12px;
+  height:calc(100% - 4px);
+  margin-right:1px;
+  padding-inline:calc(var(--iui-size-xs) + 1px);
   cursor:pointer;
+  box-sizing:content-box;
   background-position:center;
-  transition:background 0.4s ease-out;
+  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%;
@@ -131,11 +204,11 @@ label.iui-input-container.iui-disabled{
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
   background-color:var(--iui-color-background-2);
   background-size:100%;
-  transition:background 0s;
+  transition:background var(--iui-duration-0);
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
-  fill:var(--iui-icons-color-actionable);
-  transition:transform 0.2s ease-out;
+  fill:var(--iui-color-foreground-2);
+  transition:transform var(--iui-duration-1) ease-out;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
   transform:rotate(180deg);
@@ -144,20 +217,20 @@ label.iui-input-container.iui-disabled{
   cursor:not-allowed;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-color-foreground-5);
 }
 .iui-input-container.iui-inline-label > .iui-label{
-  margin:0 16px 0 0;
+  margin:0 var(--iui-size-m) 0 0;
 }
 .iui-input-container.iui-inline-label > .iui-label.iui-required{
-  margin-right:6px;
+  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:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-input-container.iui-positive::selection,
 .iui-input-container.iui-positive *::selection{
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-input-container.iui-positive .iui-input-icon{
   fill:var(--iui-color-foreground-positive);
@@ -171,29 +244,25 @@ label.iui-input-container.iui-disabled{
 }
 .iui-input-container.iui-positive .iui-message a:hover{
   text-decoration:none;
-  color:var(--iui-color-foreground-positive-overlay);
+  color:var(--iui-color-foreground-positive-hover);
 }
-.iui-input-container.iui-positive .iui-input,
-.iui-input-container.iui-positive .iui-textarea{
-  padding-bottom:6px;
-  border-bottom:2px solid var(--iui-color-foreground-positive);
+.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);
 }
-.iui-input-container.iui-positive .iui-input.iui-small,
-.iui-input-container.iui-positive .iui-textarea.iui-small{
-  padding-bottom:0.5px;
+.iui-input-container.iui-positive .iui-input[data-iui-size=small]{
+  padding-bottom:0;
 }
-.iui-input-container.iui-positive .iui-input.iui-large,
-.iui-input-container.iui-positive .iui-textarea.iui-large{
-  padding-bottom:11.5px;
+.iui-input-container.iui-positive .iui-input[data-iui-size=large]{
+  padding-bottom:calc(var(--iui-size-xs) - 1px);
 }
-.iui-input-container.iui-positive .iui-input:focus,
-.iui-input-container.iui-positive .iui-textarea:focus{
-  border-bottom:2px solid var(--iui-color-foreground-positive);
+.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);
   outline-offset:-2px;
 }
 .iui-input-container.iui-positive .iui-input-with-icon{
-  --_hover-color:var(--iui-color-foreground-positive);
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-positive);
   --_focus-color:var(--iui-color-foreground-positive);
 }
 .iui-input-container.iui-positive .iui-select-button{
@@ -205,15 +274,15 @@ label.iui-input-container.iui-disabled{
   position:absolute;
   bottom:0;
   left:0;
-  height:2px;
+  height:var(--iui-size-3xs);
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-input-container.iui-negative::selection,
 .iui-input-container.iui-negative *::selection{
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-input-container.iui-negative .iui-input-icon{
   fill:var(--iui-color-foreground-negative);
@@ -227,29 +296,25 @@ label.iui-input-container.iui-disabled{
 }
 .iui-input-container.iui-negative .iui-message a:hover{
   text-decoration:none;
-  color:var(--iui-color-foreground-negative-overlay);
+  color:var(--iui-color-foreground-negative-hover);
 }
-.iui-input-container.iui-negative .iui-input,
-.iui-input-container.iui-negative .iui-textarea{
-  padding-bottom:6px;
-  border-bottom:2px solid var(--iui-color-foreground-negative);
+.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-negative);
 }
-.iui-input-container.iui-negative .iui-input.iui-small,
-.iui-input-container.iui-negative .iui-textarea.iui-small{
-  padding-bottom:0.5px;
+.iui-input-container.iui-negative .iui-input[data-iui-size=small]{
+  padding-bottom:0;
 }
-.iui-input-container.iui-negative .iui-input.iui-large,
-.iui-input-container.iui-negative .iui-textarea.iui-large{
-  padding-bottom:11.5px;
+.iui-input-container.iui-negative .iui-input[data-iui-size=large]{
+  padding-bottom:calc(var(--iui-size-xs) - 1px);
 }
-.iui-input-container.iui-negative .iui-input:focus,
-.iui-input-container.iui-negative .iui-textarea:focus{
-  border-bottom:2px solid var(--iui-color-foreground-negative);
+.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);
   outline-offset:-2px;
 }
 .iui-input-container.iui-negative .iui-input-with-icon{
-  --_hover-color:var(--iui-color-foreground-negative);
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-negative);
   --_focus-color:var(--iui-color-foreground-negative);
 }
 .iui-input-container.iui-negative .iui-select-button{
@@ -261,15 +326,15 @@ label.iui-input-container.iui-disabled{
   position:absolute;
   bottom:0;
   left:0;
-  height:2px;
+  height:var(--iui-size-3xs);
   background-color:var(--iui-color-foreground-negative);
 }
 .iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-input-container.iui-warning::selection,
 .iui-input-container.iui-warning *::selection{
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-input-container.iui-warning .iui-input-icon{
   fill:var(--iui-color-foreground-warning);
@@ -283,29 +348,25 @@ label.iui-input-container.iui-disabled{
 }
 .iui-input-container.iui-warning .iui-message a:hover{
   text-decoration:none;
-  color:var(--iui-color-foreground-warning-overlay);
+  color:var(--iui-color-foreground-warning-hover);
 }
-.iui-input-container.iui-warning .iui-input,
-.iui-input-container.iui-warning .iui-textarea{
-  padding-bottom:6px;
-  border-bottom:2px solid var(--iui-color-foreground-warning);
+.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-warning);
 }
-.iui-input-container.iui-warning .iui-input.iui-small,
-.iui-input-container.iui-warning .iui-textarea.iui-small{
-  padding-bottom:0.5px;
+.iui-input-container.iui-warning .iui-input[data-iui-size=small]{
+  padding-bottom:0;
 }
-.iui-input-container.iui-warning .iui-input.iui-large,
-.iui-input-container.iui-warning .iui-textarea.iui-large{
-  padding-bottom:11.5px;
+.iui-input-container.iui-warning .iui-input[data-iui-size=large]{
+  padding-bottom:calc(var(--iui-size-xs) - 1px);
 }
-.iui-input-container.iui-warning .iui-input:focus,
-.iui-input-container.iui-warning .iui-textarea:focus{
-  border-bottom:2px solid var(--iui-color-foreground-warning);
+.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);
   outline-offset:-2px;
 }
 .iui-input-container.iui-warning .iui-input-with-icon{
-  --_hover-color:var(--iui-color-foreground-warning);
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-warning);
   --_focus-color:var(--iui-color-foreground-warning);
 }
 .iui-input-container.iui-warning .iui-select-button{
@@ -317,19 +378,19 @@ label.iui-input-container.iui-disabled{
   position:absolute;
   bottom:0;
   left:0;
-  height:2px;
+  height:var(--iui-size-3xs);
   background-color:var(--iui-color-foreground-warning);
 }
 
 .iui-input-label{
-  font-weight:600;
-  margin-bottom:3px;
+  font-weight:var(--iui-font-weight-semibold);
+  margin-bottom:var(--iui-size-2xs);
   cursor:default;
   display:block;
 }
 .iui-input-label.iui-required::after{
   content:"*";
-  margin-left:4px;
+  margin-left:var(--iui-size-2xs);
   color:var(--iui-color-foreground-negative);
 }
 label.iui-input-label{
@@ -340,12 +401,12 @@ label.iui-input-label.iui-disabled{
 }
 
 .iui-input-label.iui-inline{
-  margin:0 16px 0 0;
+  margin:0 var(--iui-size-m) 0 0;
   display:inline-flex;
   align-items:center;
 }
 .iui-input-label.iui-inline.iui-required{
-  margin-right:6px;
+  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
 }
 
 .iui-notification-primary{
@@ -354,17 +415,17 @@ label.iui-input-label.iui-disabled{
 .iui-notification-primary::before{
   content:"";
   position:absolute;
-  width:12px;
-  height:12px;
-  top:-6px;
-  right:-6px;
+  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-primary);
-  border:2px solid var(--iui-color-background-1);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-notification-primary::before{
-    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;
   }
 }
 @media (prefers-reduced-motion: no-preference){
@@ -376,24 +437,24 @@ label.iui-input-label.iui-disabled{
 @media (prefers-reduced-motion: no-preference){
   @-webkit-keyframes pulse-primary{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
   @keyframes pulse-primary{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
 }
@@ -404,17 +465,17 @@ label.iui-input-label.iui-disabled{
 .iui-notification-positive::before{
   content:"";
   position:absolute;
-  width:12px;
-  height:12px;
-  top:-6px;
-  right:-6px;
+  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:2px solid var(--iui-color-background-1);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-notification-positive::before{
-    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;
   }
 }
 @media (prefers-reduced-motion: no-preference){
@@ -426,24 +487,24 @@ label.iui-input-label.iui-disabled{
 @media (prefers-reduced-motion: no-preference){
   @-webkit-keyframes pulse-positive{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
   @keyframes pulse-positive{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
 }
@@ -454,17 +515,17 @@ label.iui-input-label.iui-disabled{
 .iui-notification-warning::before{
   content:"";
   position:absolute;
-  width:12px;
-  height:12px;
-  top:-6px;
-  right:-6px;
+  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:2px solid var(--iui-color-background-1);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-notification-warning::before{
-    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;
   }
 }
 @media (prefers-reduced-motion: no-preference){
@@ -476,24 +537,24 @@ label.iui-input-label.iui-disabled{
 @media (prefers-reduced-motion: no-preference){
   @-webkit-keyframes pulse-warning{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
   @keyframes pulse-warning{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
 }
@@ -504,17 +565,17 @@ label.iui-input-label.iui-disabled{
 .iui-notification-negative::before{
   content:"";
   position:absolute;
-  width:12px;
-  height:12px;
-  top:-6px;
-  right:-6px;
+  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:2px solid var(--iui-color-background-1);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-notification-negative::before{
-    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;
   }
 }
 @media (prefers-reduced-motion: no-preference){
@@ -526,24 +587,24 @@ label.iui-input-label.iui-disabled{
 @media (prefers-reduced-motion: no-preference){
   @-webkit-keyframes pulse-negative{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
   @keyframes pulse-negative{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
 }
@@ -554,17 +615,17 @@ label.iui-input-label.iui-disabled{
 .iui-notification-accessory::before{
   content:"";
   position:absolute;
-  width:12px;
-  height:12px;
-  top:-6px;
-  right:-6px;
+  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:2px solid var(--iui-color-background-1);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-notification-accessory::before{
-    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;
   }
 }
 @media (prefers-reduced-motion: no-preference){
@@ -576,24 +637,24 @@ label.iui-input-label.iui-disabled{
 @media (prefers-reduced-motion: no-preference){
   @-webkit-keyframes pulse-accessory{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
   @keyframes pulse-accessory{
     0%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
+      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
     }
     70%{
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
     }
     100%{
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
 }
@@ -606,4 +667,17 @@ label.iui-input-label.iui-disabled{
 }
 .iui-popover .tippy-content{
   all:revert;
+}
+
+.iui-visually-hidden{
+  -webkit-clip-path:inset(50%);
+          clip-path:inset(50%);
+  overflow:hidden;
+  position:absolute;
+  white-space:nowrap;
+  height:1px;
+  width:1px;
+  padding:0;
+  margin:-1px;
+  border-width:0;
 }