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

package/css/header.css

@@ -18,9 +18,9 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  background-color:var(--iui-color-background-1);
-  border-bottom:var(--iui-size-3xs) solid var(--iui-color-background-border);
-  color:var(--iui-color-foreground-2);
+  background-color:var(--iui-color-background);
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-border);
+  color:var(--iui-color-text);
   padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -52,6 +52,9 @@
     border-bottom-width:0;
   }
 }
+.iui-page-header-right .iui-button:hover{
+  background-color:var(--iui-color-background-hover);
+}
 @media (prefers-reduced-motion: no-preference){
   .iui-page-header-right .iui-avatar,
 .iui-page-header-right .iui-avatar *{
@@ -61,7 +64,7 @@
 
 .iui-page-header-divider{
   height:calc(var(--iui-size-s) * 2);
-  border-left:1px solid var(--iui-color-background-border);
+  border-left:2px solid var(--iui-color-border);
 }
 @media (forced-colors: active){
   .iui-page-header-divider{
@@ -104,13 +107,13 @@ button.iui-header-brand, .iui-header-brand[role=button]{
 }
 a.iui-header-brand:focus-visible,
 button.iui-header-brand:focus-visible, .iui-header-brand[role=button]:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
+  outline:1px solid var(--iui-color-border-accent);
   outline-offset:-1px;
 }
 @supports not selector(*:focus-visible){
   a.iui-header-brand:focus,
 button.iui-header-brand:focus, .iui-header-brand[role=button]:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
@@ -124,7 +127,7 @@ button.iui-header-brand, .iui-header-brand[role=button]{
 }
 a.iui-header-brand:hover,
 button.iui-header-brand:hover, .iui-header-brand[role=button]:hover{
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 
 a.iui-header-brand{
@@ -137,7 +140,7 @@ a.iui-header-brand{
   width:calc(1.5 * var(--iui-size-m));
   height:calc(1.5 * var(--iui-size-m));
   margin:0 calc(1.5 * var(--iui-size-m));
-  fill:var(--iui-color-foreground-2);
+  fill:var(--iui-color-icon);
   will-change:transform;
   transform:var(--_iui-header-icon-scale);
 }
@@ -210,12 +213,12 @@ a.iui-header-brand{
   cursor:pointer;
 }
 .iui-header-breadcrumb-button:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
+  outline:1px solid var(--iui-color-border-accent);
   outline-offset:-1px;
 }
 @supports not selector(*:focus-visible){
   .iui-header-breadcrumb-button:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
@@ -242,10 +245,10 @@ a.iui-header-brand{
   flex-shrink:0;
 }
 .iui-header-breadcrumb-button-split:hover{
-  background-color:hsl(var(--iui-color-foreground-1-hsl)/var(--iui-opacity-6));
+  background-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-6));
 }
 [aria-current] .iui-header-breadcrumb-button-split:hover{
-  background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
+  background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
 }
 
 .iui-header-breadcrumb-button-split:disabled, .iui-header-breadcrumb-button-split[aria-disabled=true]{
@@ -262,7 +265,7 @@ a.iui-header-brand{
   display:flex;
   overflow:hidden;
   position:relative;
-  color:var(--iui-color-foreground-2);
+  color:var(--iui-color-text);
   box-sizing:border-box;
 }
 @media (forced-colors: active){
@@ -272,12 +275,12 @@ a.iui-header-brand{
   }
 }
 .iui-header-breadcrumb-item:hover{
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-header-breadcrumb-item[aria-current]{
-  background-color:var(--iui-color-background-subtle-primary);
+  background-color:var(--iui-color-background-accent-muted);
   box-shadow:0 var(--iui-size-3xs) 0 0 currentColor;
-  color:var(--iui-color-foreground-primary);
+  color:var(--iui-color-text-accent);
 }
 @media (forced-colors: active){
   .iui-header-breadcrumb-item[aria-current]{
@@ -288,11 +291,11 @@ a.iui-header-brand{
 .iui-header-breadcrumb-item[aria-disabled=true]{
   cursor:not-allowed;
   background-color:transparent;
-  color:var(--iui-color-foreground-5);
+  color:var(--iui-color-text-disabled);
 }
 .iui-header-breadcrumb-item[aria-disabled=true][aria-current]{
   box-shadow:none;
-  background-color:var(--iui-color-background-2);
+  background-color:var(--iui-color-background-backdrop);
 }
 @media (forced-colors: active){
   .iui-header-breadcrumb-item[aria-disabled=true][aria-current]{
@@ -311,13 +314,13 @@ a.iui-header-brand{
   flex-shrink:0;
   width:calc(1.5 * var(--iui-size-m));
   height:calc(1.5 * var(--iui-size-m));
-  background-color:var(--iui-color-background-3);
+  background-color:var(--iui-color-background-backdrop);
   border-radius:var(--iui-border-radius-1);
   display:inline-flex;
   flex-shrink:0;
   box-sizing:border-box;
   padding:var(--iui-size-2xs);
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
   will-change:transform;
   transform:var(--_iui-header-icon-scale);
 }
@@ -355,13 +358,13 @@ div.iui-header-breadcrumb-button-icon{
 }
 
 .iui-active .iui-header-breadcrumb-button-icon, [aria-current] .iui-header-breadcrumb-button-icon{
-  background-color:var(--iui-color-background-1);
+  background-color:var(--iui-color-background);
   fill:currentColor;
 }
 
 :disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
-  background-color:var(--iui-color-background-2);
-  fill:var(--iui-color-foreground-5);
+  background-color:var(--iui-color-background-backdrop);
+  fill:var(--iui-color-icon-disabled);
 }
 @media (forced-colors: active){
   :disabled .iui-header-breadcrumb-button-icon, [aria-disabled=true] .iui-header-breadcrumb-button-icon{
@@ -417,15 +420,15 @@ div.iui-header-breadcrumb-button-icon{
 }
 .iui-header-breadcrumb-button-text-sublabel{
   font-size:var(--iui-font-size-0);
-  opacity:var(--iui-opacity-3);
+  color:var(--iui-color-text-muted);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-header-breadcrumb-button-text-sublabel{
     transition:visibility 0s linear 0s, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
   }
 }
-.iui-active .iui-header-breadcrumb-button-text-sublabel, [aria-current] .iui-header-breadcrumb-button-text-sublabel{
-  opacity:var(--iui-opacity-1);
+.iui-active .iui-header-breadcrumb-button-text-sublabel, [aria-current] .iui-header-breadcrumb-button-text-sublabel, [aria-disabled=true] .iui-header-breadcrumb-button-text-sublabel{
+  color:inherit;
 }
 
 [data-iui-size=slim] .iui-header-breadcrumb-button-text-sublabel{

package/css/information-panel.css

@@ -16,7 +16,7 @@
   flex-direction:column;
   max-width:100%;
   max-height:100%;
-  background-color:var(--iui-color-background-1);
+  background-color:var(--iui-color-background);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-information-panel{
@@ -29,10 +29,10 @@
   touch-action:none;
 }
 .iui-information-panel > .iui-resizer > .iui-resizer-bar{
-  background-color:var(--iui-color-background-border);
+  background-color:var(--iui-color-border);
 }
 .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
-  background-color:var(--iui-color-foreground-primary);
+  background-color:var(--iui-color-border-accent);
 }
 .iui-information-panel .iui-information-header,
 .iui-information-panel .iui-information-body{
@@ -45,7 +45,8 @@
   display:flex;
   align-items:center;
   justify-content:space-between;
-  background-color:var(--iui-color-background-3);
+  background-color:var(--iui-color-background);
+  border-bottom:1px solid var(--iui-color-border);
 }
 .iui-information-panel .iui-information-header .iui-information-header-label{
   display:flex;
@@ -65,7 +66,7 @@
   flex-shrink:0;
   width:calc(1.5 * var(--iui-size-m));
   height:calc(1.5 * var(--iui-size-m));
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
   margin-right:var(--iui-size-xs);
 }
 @media (forced-colors: active){
@@ -86,7 +87,7 @@
   overflow-y:overlay;
 }
 .iui-information-panel .iui-information-body > hr{
-  border-color:var(--iui-color-background-border);
+  border-color:var(--iui-color-border);
 }
 .iui-information-panel.iui-right{
   top:0;
@@ -173,7 +174,7 @@
 }
 .iui-information-body-content .iui-input-label{
   font-weight:var(--iui-font-weight-normal);
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }
 .iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
   margin-bottom:var(--iui-size-s);

package/css/input.css

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-input{
-  --_iui-input-background-color:var(--iui-color-background-1);
-  --_iui-input-border-color:var(--iui-color-foreground-4);
-  --_iui-input-text-color:var(--iui-color-foreground-2);
+  --_iui-input-background-color:var(--iui-color-background);
+  --_iui-input-border-color:var(--iui-color-border-foreground);
+  --_iui-input-text-color:var(--iui-color-text);
   margin:0;
   padding:0;
   border:none;
@@ -30,29 +30,29 @@
   --_iui-input-min-height:var(--iui-component-height);
 }
 .iui-input:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
+  outline:2px solid var(--iui-color-border-accent);
   outline-offset:-2px;
 }
 @supports not selector(*:focus-visible){
   .iui-input:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
+    outline:2px solid var(--iui-color-border-accent);
     outline-offset:-2px;
   }
 }
 .iui-input::-moz-placeholder{
-  --_iui-input-text-color:var(--iui-color-foreground-5);
+  --_iui-input-text-color:var(--iui-color-text-disabled);
   -moz-user-select:none;
        user-select:none;
   color:var(--_iui-input-text-color);
 }
 .iui-input:-ms-input-placeholder{
-  --_iui-input-text-color:var(--iui-color-foreground-5);
+  --_iui-input-text-color:var(--iui-color-text-disabled);
   -ms-user-select:none;
       user-select:none;
   color:var(--_iui-input-text-color);
 }
 .iui-input::placeholder{
-  --_iui-input-text-color:var(--iui-color-foreground-5);
+  --_iui-input-text-color:var(--iui-color-text-disabled);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
@@ -60,22 +60,22 @@
   color:var(--_iui-input-text-color);
 }
 .iui-input:-webkit-autofill{
-  --_iui-input-background-color:var(--iui-color-background-subtle-primary);
-  --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  --_iui-input-background-color:var(--iui-color-background-accent-muted);
+  --_iui-input-border-color:var(--iui-color-border-accent);
+  --_iui-input-text-color:var(--iui-color-text-accent);
 }
 .iui-input:autofill{
-  --_iui-input-background-color:var(--iui-color-background-subtle-primary);
-  --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  --_iui-input-background-color:var(--iui-color-background-accent-muted);
+  --_iui-input-border-color:var(--iui-color-border-accent);
+  --_iui-input-text-color:var(--iui-color-text-accent);
 }
 .iui-input:hover{
-  --_iui-input-border-color:var(--iui-color-foreground-2);
+  --_iui-input-border-color:var(--iui-color-border-foreground-hover);
 }
 .iui-input[disabled]{
   --_iui-input-background-color:var(--iui-color-background-disabled);
-  --_iui-input-border-color:var(--iui-color-background-disabled);
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-background-disabled);
+  --_iui-input-border-color:var(--iui-color-border-disabled);
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-border-disabled);
   cursor:not-allowed;
 }
 :where(textarea.iui-input){
@@ -105,11 +105,11 @@
   padding-right:var(--iui-component-height);
 }
 .iui-input-with-icon.iui-input-with-icon:focus-within > :first-child{
-  outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
+  outline:2px solid var(--_focus-color, var(--iui-color-border-accent));
   outline-offset:-2px;
 }
 .iui-input-with-icon.iui-input-with-icon:hover > :first-child{
-  border-color:var(--_iui-input-with-icon-hover-border-color, var(--iui-color-foreground-2));
+  border-color:var(--_iui-input-with-icon-hover-border-color, var(--iui-color-border-foreground-hover));
 }
 
 .iui-end-icon{
@@ -149,15 +149,15 @@
   transition:background var(--iui-duration-2) ease-out;
 }
 .iui-end-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-end-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-end-icon.iui-actionable svg{
-  fill:var(--iui-color-foreground-2);
+  fill:var(--iui-color-icon);
   transition:transform var(--iui-duration-1) ease-out;
 }
 .iui-end-icon.iui-actionable.iui-open svg{
@@ -167,5 +167,5 @@
   cursor:not-allowed;
 }
 .iui-end-icon.iui-disabled svg{
-  fill:var(--iui-color-foreground-5);
+  fill:var(--iui-color-icon-disabled);
 }

package/css/keyboard.css

@@ -21,11 +21,11 @@
       -ms-user-select:none;
           user-select:none;
   cursor:default;
-  background-color:var(--iui-color-background-1);
-  border:1px solid var(--iui-color-background-5);
-  box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
+  background-color:var(--iui-color-background);
+  border:1px solid var(--iui-color-border);
+  box-shadow:0 1px 1px var(--iui-color-border), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
   transition:box-shadow var(--iui-duration-1) ease-out;
 }
 .iui-keyboard:hover{
-  box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
+  box-shadow:0 0 0 var(--iui-color-border), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
 }

package/css/location-marker.css

@@ -23,7 +23,7 @@
   filter:drop-shadow(var(--iui-shadow-1));
 }
 .iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
-  fill:var(--iui-color-foreground-accessory);
+  fill:var(--iui-color-white);
 }
 
 .iui-location-marker-data-rich{
@@ -47,9 +47,9 @@
   padding:calc(var(--iui-size-s) * 0.25) var(--iui-size-xs);
   filter:drop-shadow(var(--iui-shadow-1));
   position:relative;
-  border:solid 1px var(--iui-color-foreground-accessory);
-  background-color:var(--iui-color-foreground-accessory);
-  color:var(--iui-color-foreground-accessory);
+  border:solid 1px var(--iui-color-white);
+  background-color:var(--iui-color-white);
+  color:var(--iui-color-white);
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body::before{
   content:"";
@@ -63,7 +63,7 @@
   margin:auto;
   border-width:var(--iui-size-2xs);
   border-style:solid;
-  border-color:var(--iui-color-foreground-accessory) transparent transparent transparent;
+  border-color:var(--iui-color-white) transparent transparent transparent;
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
   display:flex;
@@ -75,7 +75,7 @@
   vertical-align:-2px;
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{
-  fill:var(--iui-color-foreground-accessory);
+  fill:var(--iui-color-white);
 }
 
 .iui-location-marker-me{
@@ -103,7 +103,7 @@
   inset:0;
   z-index:-1;
   opacity:var(--iui-opacity-5);
-  background-color:var(--iui-color-foreground-primary);
+  background-color:var(--iui-color-icon-accent);
   border-radius:inherit;
 }
 .iui-location-marker-me > .iui-location-marker-me-dot{
@@ -113,6 +113,6 @@
   top:calc(var(--iui-size-2xs) * 1.5);
   left:calc(var(--iui-size-2xs) * 1.5);
   border-radius:50%;
-  border:1px solid var(--iui-color-foreground-accessory);
-  background-color:var(--iui-color-background-primary);
+  border:1px solid var(--iui-color-white);
+  background-color:var(--iui-color-icon-accent);
 }

package/css/menu.css

@@ -3,17 +3,19 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-menu{
-  --iui-surface-background-color:var(--iui-color-background-1);
-  --iui-surface-border-radius:0;
-  --iui-surface-elevation:var(--iui-shadow-1);
-  background-color:var(--iui-surface-background-color);
-  border-radius:var(--iui-surface-border-radius);
-  box-shadow:var(--iui-surface-elevation);
-  color:var(--iui-color-foreground-2);
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
+  --iui-surface-background-color:var(--iui-color-background);
+  --iui-surface-border-color:var(--iui-color-border-subtle);
+  --iui-surface-border-radius:var(--iui-border-radius-1);
+  --iui-surface-elevation:var(--iui-shadow-1);
+  background-color:var(--iui-surface-background-color);
+  border:1px solid var(--iui-surface-border-color);
+  border-radius:var(--iui-surface-border-radius);
+  box-shadow:var(--iui-surface-elevation);
+  color:var(--iui-color-text);
   list-style-type:none;
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -25,11 +27,6 @@
   max-height:var(--iui-menu-max-height);
   border-radius:var(--iui-border-radius-1);
 }
-@media (forced-colors: active){
-  .iui-menu{
-    border:1px solid transparent;
-  }
-}
 .iui-menu .iui-header-menu-icon{
   margin:0 var(--iui-size-2xs);
 }
@@ -52,11 +49,11 @@
   align-items:center;
   font-size:var(--iui-font-size-1);
   padding-block:var(--iui-size-2xs);
-  padding-inline:calc(var(--iui-size-s) + 1px);
+  padding-inline:var(--iui-size-s);
   min-height:var(--iui-component-height);
   cursor:pointer;
   line-height:normal;
-  color:var(--iui-color-foreground-2);
+  color:var(--iui-color-text);
   border-radius:var(--iui-border-radius-1);
 }
 .iui-menu-item + .iui-menu-item{
@@ -79,7 +76,7 @@
 .iui-menu-item .iui-menu-description{
   display:none;
   font-size:var(--iui-font-size-0);
-  opacity:var(--iui-opacity-3);
+  color:var(--iui-color-text-muted);
 }
 .iui-menu-item > .iui-icon{
   display:flex;
@@ -87,16 +84,16 @@
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   flex:0 0 auto;
-  fill:var(--iui-color-foreground-2);
+  fill:var(--iui-color-icon);
 }
 .iui-menu-item > .iui-icon + .iui-content{
   margin-left:var(--iui-size-xs);
 }
 .iui-menu-item:hover{
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-menu-item:focus, .iui-menu-item.iui-focused{
-  outline:thin solid var(--iui-color-foreground-primary);
+  outline:thin solid var(--iui-color-border-accent);
   outline-offset:-1px;
 }
 .iui-menu-item:focus:not(:focus-visible){
@@ -109,33 +106,33 @@
   display:block;
 }
 .iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
-  background-color:var(--iui-color-background-subtle-primary);
-  color:var(--iui-color-foreground-primary);
-  outline:thin solid var(--iui-color-foreground-primary);
+  background-color:var(--iui-color-background-accent-muted);
+  color:var(--iui-color-text-accent);
+  outline:thin solid var(--iui-color-border-accent);
   outline-offset:-1px;
 }
 .iui-menu-item.iui-active .iui-menu-description{
-  opacity:1;
+  color:inherit;
 }
 .iui-menu-item.iui-active > .iui-icon{
-  fill:var(--iui-color-foreground-primary);
+  fill:currentColor;
 }
 .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
   outline-width:var(--iui-size-3xs);
   outline-offset:-2px;
 }
 .iui-menu-item.iui-active:focus:not(:focus-visible){
-  outline:thin solid var(--iui-color-foreground-primary);
+  outline:thin solid var(--iui-color-border-accent);
   outline-offset:-1px;
 }
 .iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
   cursor:not-allowed;
   outline:none;
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-color-foreground-5);
+  background-color:var(--iui-color-background);
+  color:var(--iui-color-text-disabled);
 }
 .iui-menu-item.iui-disabled > .iui-icon, .iui-menu-item.iui-disabled:hover > .iui-icon{
-  fill:var(--iui-color-foreground-5);
+  fill:var(--iui-color-icon-disabled);
 }
 .iui-menu-item-skeleton{
   --iui-menu-item-content-skeleton-max-width:30%;
@@ -161,7 +158,7 @@
 
 .iui-menu-content{
   padding-block:var(--iui-size-xs);
-  padding-inline:calc(var(--iui-size-m) + 1px);
+  padding-inline:var(--iui-size-m);
   min-height:var(--iui-component-height);
   display:grid;
   align-items:center;
@@ -171,5 +168,5 @@
   height:1px;
   width:calc(100% - var(--iui-size-l));
   margin:1px auto;
-  background-color:var(--iui-color-background-border);
+  background-color:var(--iui-color-border);
 }