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

package/css/progress-indicator.css

@@ -12,15 +12,15 @@
 }
 .iui-progress-indicator-linear > .iui-track{
   width:100%;
-  height:4px;
+  height:var(--iui-size-2xs);
   overflow:hidden;
-  background-color:var(--iui-color-background-border);
+  background-color:var(--iui-color-border);
 }
 .iui-progress-indicator-linear > .iui-track > .iui-fill{
   display:inline-block;
   height:100%;
   vertical-align:top;
-  background-color:var(--iui-color-foreground-primary);
+  background-color:var(--iui-color-border-accent);
 }
 .iui-progress-indicator-linear > .iui-label{
   align-items:center;
@@ -48,37 +48,37 @@
 }
 .iui-progress-indicator-linear.iui-positive > .iui-track,
 .iui-progress-indicator-linear.iui-positive > .iui-track > *{
-  background-color:var(--iui-color-foreground-positive);
+  background-color:var(--iui-color-border-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label{
-  color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-text-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label svg{
-  fill:var(--iui-color-foreground-positive);
+  fill:var(--iui-color-icon-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-positive > .iui-label > span *::-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-progress-indicator-linear.iui-positive > .iui-label > span::selection,
 .iui-progress-indicator-linear.iui-positive > .iui-label > span *::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-progress-indicator-linear.iui-negative > .iui-track > *{
   width:100%;
-  background-color:var(--iui-color-foreground-negative);
+  background-color:var(--iui-color-border-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label{
-  color:var(--iui-color-foreground-negative);
+  color:var(--iui-color-text-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label svg{
-  fill:var(--iui-color-foreground-negative);
+  fill:var(--iui-color-icon-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-negative > .iui-label > span *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label > span::selection,
 .iui-progress-indicator-linear.iui-negative > .iui-label > span *::selection{
-  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-progress-indicator-linear > .iui-track > .iui-determinate{
   transition:width 2s ease-in-out;
@@ -123,14 +123,14 @@
   width:100%;
 }
 .iui-progress-indicator-radial > .iui-radial > circle.iui-fill{
-  stroke:var(--iui-color-foreground-primary);
+  stroke:var(--iui-color-border-accent);
   fill:none;
-  stroke-width:3.2;
+  stroke-width:var(--iui-size-2xs);
 }
 .iui-progress-indicator-radial > .iui-radial > circle.iui-track{
-  stroke:var(--iui-color-background-5);
+  stroke:var(--iui-color-border);
   fill:none;
-  stroke-width:3.2;
+  stroke-width:var(--iui-size-2xs);
 }
 .iui-progress-indicator-radial .iui-inner-content{
   position:absolute;
@@ -155,30 +155,30 @@
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
-  fill:var(--iui-color-foreground-2);
+  fill:var(--iui-color-icon);
 }
 .iui-progress-indicator-radial .iui-inner-content svg:hover,
 .iui-progress-indicator-radial .iui-inner-content img:hover{
-  fill:var(--iui-color-foreground-1);
+  fill:var(--iui-color-icon-hover);
 }
 .iui-progress-indicator-radial.iui-positive{
-  color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-text-positive);
 }
 .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-fill,
 .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-track{
-  stroke:var(--iui-color-foreground-positive);
+  stroke:var(--iui-color-border-positive);
 }
 .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
-  fill:var(--iui-color-foreground-positive);
+  fill:var(--iui-color-icon-positive);
 }
 .iui-progress-indicator-radial.iui-negative{
-  color:var(--iui-color-foreground-negative);
+  color:var(--iui-color-text-negative);
 }
 .iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{
-  stroke:var(--iui-color-foreground-negative);
+  stroke:var(--iui-color-border-negative);
 }
 .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
-  fill:var(--iui-color-foreground-negative);
+  fill:var(--iui-color-icon-negative);
 }
 .iui-progress-indicator-radial.iui-x-small{
   --_iui-progress-indicator-radial-size:var(--iui-size-m);
@@ -265,11 +265,11 @@
   left:0;
   z-index:10000;
   pointer-events:none;
-  background-color:Hsl(var(--iui-color-background-1-hsl)/var(--iui-opacity-2));
+  background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-2));
 }
 @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
   .iui-progress-indicator-overlay{
-    background-color:Hsl(var(--iui-color-background-1-hsl)/var(--iui-opacity-3));
+    background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-3));
     -webkit-backdrop-filter:blur(5px);
             backdrop-filter:blur(5px);
   }

package/css/radio-tile.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-radio-tile{
   cursor:pointer;
-  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
 }
 
 .iui-radio-tile-content{
@@ -13,16 +13,16 @@
   padding:var(--iui-size-xs);
   position:relative;
   z-index:1;
-  outline:1px solid var(--iui-color-foreground-4);
-  background-color:var(--iui-color-background-1);
+  outline:1px solid var(--iui-color-border);
+  background-color:var(--iui-color-background);
   transition:outline-color var(--iui-duration-1) ease-out;
 }
 .iui-radio-tile-content:hover{
   z-index:2;
-  outline-color:var(--iui-color-foreground-2);
+  outline-color:var(--iui-color-border-hover);
 }
 .iui-radio-tile-content:hover .iui-radio-tile-icon{
-  fill:var(--iui-color-foreground-2);
+  fill:var(--iui-color-icon-hover);
 }
 @media (forced-colors: active){
   .iui-radio-tile-content:hover .iui-radio-tile-icon{
@@ -54,7 +54,7 @@
 .iui-radio-tile-input:checked + *{
   padding:var(--iui-size-xs);
   z-index:3;
-  outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
+  outline:var(--iui-size-3xs) solid var(--iui-color-border-accent);
   outline-offset:-1px;
 }
 @media (forced-colors: active){
@@ -63,7 +63,7 @@
   }
 }
 .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
-  fill:var(--iui-color-foreground-primary);
+  fill:var(--iui-color-icon-accent);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
@@ -81,7 +81,7 @@
   right:var(--iui-size-xs);
   -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
           mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
-  background-color:var(--iui-color-foreground-primary);
+  background-color:var(--iui-color-icon-accent);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:checked + *::after{
@@ -91,11 +91,11 @@
 .iui-radio-tile-input:disabled + *{
   cursor:not-allowed;
   z-index:0;
-  outline-color:var(--iui-color-background-disabled);
+  outline-color:var(--iui-color-border-disabled);
   background-color:var(--iui-color-background-disabled);
 }
 .iui-radio-tile-input:disabled + *::after{
-  background-color:var(--iui-color-foreground-5);
+  background-color:var(--iui-color-icon-disabled);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + *::after{
@@ -104,15 +104,16 @@
 }
 .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
   filter:grayscale(100%);
-  fill:var(--iui-color-foreground-5);
+  fill:var(--iui-color-icon-disabled);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
     fill:GrayText;
   }
 }
-.iui-radio-tile-input:disabled + * .iui-radio-tile-label{
-  color:var(--iui-color-foreground-4);
+.iui-radio-tile-input:disabled + * .iui-radio-tile-label,
+.iui-radio-tile-input:disabled + * .iui-radio-tile-sublabel{
+  color:var(--iui-color-text-disabled);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
@@ -122,7 +123,7 @@
 }
 .iui-radio-tile-input:disabled:checked + *{
   z-index:3;
-  outline:var(--iui-size-3xs) solid var(--iui-color-foreground-4);
+  outline:var(--iui-size-3xs) solid var(--iui-color-border);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled:checked + *{
@@ -132,7 +133,7 @@
 .iui-radio-tile-input:focus-visible + *{
   z-index:2;
   outline-offset:calc(0px - var(--iui-size-3xs));
-  outline:3px solid var(--iui-color-foreground-primary);
+  outline:3px solid var(--iui-color-border-accent);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:focus-visible + *{
@@ -143,7 +144,7 @@
   .iui-radio-tile-input:focus + *{
     z-index:2;
     outline-offset:calc(0px - var(--iui-size-3xs));
-    outline:3px solid var(--iui-color-foreground-primary);
+    outline:3px solid var(--iui-color-border-accent);
   }
   @media (forced-colors: active){
     .iui-radio-tile-input:focus + *{
@@ -157,9 +158,9 @@
   flex-shrink:0;
   width:var(--iui-size-xl);
   height:var(--iui-size-xl);
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
   margin:calc(var(--iui-size-s) * 0.5) auto var(--iui-size-s);
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
   transition:fill var(--iui-duration-1) ease-out;
 }
 @media (forced-colors: active){
@@ -179,7 +180,7 @@
   line-height:var(--iui-size-l);
   text-align:center;
   word-break:break-word;
-  color:var(--iui-color-foreground-2);
+  color:var(--iui-color-text);
 }
 
 .iui-radio-tile-sublabel{
@@ -187,5 +188,5 @@
   line-height:calc(var(--iui-size-s) * 1.25);
   text-align:center;
   word-break:break-word;
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }

package/css/radio.css

@@ -6,9 +6,9 @@
   --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
   --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
   --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
-  --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
-  --_iui-checkbox-border-color:var(--iui-color-foreground-4);
-  --_iui-checkbox-background-color:var(--iui-color-background-1);
+  --_iui-checkbox-svg-color:var(--iui-color-icon-accent);
+  --_iui-checkbox-border-color:var(--iui-color-border-foreground);
+  --_iui-checkbox-background-color:var(--iui-color-background);
   --_iui-checkbox-mask-image:initial;
   display:flex;
   flex-shrink:0;
@@ -41,13 +41,13 @@
           user-select:none;
   position:relative;
   cursor:pointer;
-  color:var(--iui-color-foreground-2);
+  color:var(--iui-color-text);
   gap:var(--iui-size-xs);
 }
 .iui-radio-wrapper.iui-loading{
   cursor:progress;
   font-style:italic;
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-disabled);
 }
 .iui-radio-wrapper > .iui-checkbox-label,
 .iui-radio-wrapper > .iui-radio-label{
@@ -61,23 +61,23 @@
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   vertical-align:middle;
-  fill:currentColor;
+  fill:var(--iui-color-icon);
 }
 .iui-radio-wrapper.iui-disabled{
   cursor:not-allowed;
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-disabled);
 }
 .iui-radio-wrapper.iui-disabled svg{
-  fill:var(--iui-color-foreground-5);
+  fill:var(--iui-color-icon-disabled);
 }
 .iui-radio-wrapper.iui-positive{
-  color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-text-positive);
 }
 .iui-radio-wrapper.iui-warning{
-  color:var(--iui-color-foreground-warning);
+  color:var(--iui-color-text-warning);
 }
 .iui-radio-wrapper.iui-negative{
-  color:var(--iui-color-foreground-negative);
+  color:var(--iui-color-text-negative);
 }
 .iui-radio::before{
   content:"";
@@ -101,29 +101,27 @@
   --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
 }
 .iui-radio:checked{
-  --_iui-checkbox-border-color:var(--iui-color-foreground-3);
   --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
 }
 .iui-radio:indeterminate{
-  --_iui-checkbox-border-color:var(--iui-color-foreground-3);
   --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
 }
 .iui-radio:hover{
-  --_iui-checkbox-border-color:var(--iui-color-foreground-2);
+  --_iui-checkbox-border-color:var(--iui-color-border-foreground-hover);
 }
 .iui-radio:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
+  outline:2px solid var(--iui-color-border-accent);
   outline-offset:-1px;
 }
 @supports not selector(*:focus-visible){
   .iui-radio:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
+    outline:2px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-radio:disabled{
-  --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
-  --_iui-checkbox-border-color:var(--iui-color-background-border);
+  --_iui-checkbox-svg-color:var(--iui-color-icon-disabled);
+  --_iui-checkbox-border-color:var(--iui-color-border-disabled);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
 }
@@ -136,14 +134,14 @@
   outline-width:1px;
 }
 .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
-  --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
+  --_iui-checkbox-svg-color:var(--iui-color-icon);
 }
 .iui-radio.iui-checkbox-visibility:where(:hover){
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-radio.iui-checkbox-visibility:where(:disabled){
-  --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
+  --_iui-checkbox-svg-color:var(--iui-color-icon-disabled);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
 }
 .iui-radio.iui-loading{

package/css/select.css

@@ -17,26 +17,26 @@
           user-select:none;
   position:relative;
   overflow:hidden;
-  color:var(--iui-color-foreground-2);
-  background-color:var(--iui-color-background-1);
-  border:1px solid var(--iui-color-foreground-4);
+  color:var(--iui-color-text);
+  background-color:var(--iui-color-background);
+  border:1px solid var(--iui-color-border-foreground);
   --_iui-select-padding-block:var(--iui-size-2xs);
   --_iui-select-min-height:var(--iui-component-height);
 }
 .iui-select-button: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-select-button:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
+    outline:2px solid var(--iui-color-border-accent);
     outline-offset:-2px;
   }
 }
 .iui-select-button.iui-disabled{
   background-color:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-background-disabled);
+  border-color:var(--iui-color-border-disabled);
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-border-disabled);
   cursor:not-allowed;
 }
 .iui-select-button .iui-icon{
@@ -45,7 +45,7 @@
   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);
   fill:currentColor;
 }
 .iui-select-button .iui-icon + .iui-content{
@@ -58,7 +58,7 @@
   min-height:var(--iui-size-l);
 }
 .iui-select-button.iui-placeholder{
-  color:var(--iui-color-foreground-5);
+  color:var(--iui-color-text-muted);
 }
 .iui-select-button[data-iui-size=small]{
   --_iui-select-padding-block:0;
@@ -104,9 +104,9 @@
   text-transform:none;
   cursor:default;
   -webkit-tap-highlight-color:transparent;
-  border:1px solid var(--iui-color-foreground-4);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-color-foreground-2);
+  border:1px solid var(--iui-color-border-foreground);
+  background-color:var(--iui-color-background);
+  color:var(--iui-color-text);
   margin-top:0;
   margin-bottom:0;
   display:inline-flex;
@@ -115,7 +115,7 @@
   max-height:calc(var(--iui-size-s) * 3);
 }
 .iui-select-tag:hover{
-  border-color:var(--iui-color-foreground-1);
+  border-color:var(--iui-color-border-foreground-hover);
 }
 
 .iui-select-tag-label{
@@ -178,9 +178,10 @@
   --_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-text-color:var(--iui-color-text);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
+  --_iui-button-icon-fill:var(--iui-color-icon);
   --_iui-button-gap:var(--iui-size-xs);
   --_iui-button-padding-block:var(--iui-size-2xs);
   --_iui-button-padding-inline:var(--iui-size-m);
@@ -194,27 +195,29 @@
   aspect-ratio:1/1;
 }
 .iui-select-tag-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-select-tag-button:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-select-tag-button:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-text-color:var(--iui-color-text-hover);
   --_iui-button-background-color:var(--iui-color-background-transparent-hover);
+  --_iui-button-icon-fill:var(--iui-color-icon-hover);
 }
 .iui-select-tag-button:where(:focus){
   outline-offset:-1px;
   outline-width:1px;
 }
 .iui-select-tag-button:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-text-color:var(--iui-color-text-disabled);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
+  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
 }
 .iui-select-button[data-iui-size=small] .iui-select-tag-button{
   font-size:var(--iui-font-size-0);
@@ -230,7 +233,7 @@
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   transition:fill var(--iui-duration-1) ease-out;
-  fill:currentColor;
+  fill:var(--_iui-button-icon-fill, currentColor);
 }
 .iui-select-button[data-iui-size=small] .iui-select-tag-button-icon svg{
   display:flex;

package/css/side-navigation.css

@@ -7,8 +7,8 @@
   flex:0 0 auto;
   flex-direction:column;
   height:100%;
-  background-color:var(--iui-color-background-3);
-  border-right:1px solid var(--iui-color-background-border);
+  background-color:var(--iui-color-background);
+  border-right:2px solid var(--iui-color-border);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-side-navigation{
@@ -41,7 +41,7 @@
 }
 .iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
   border:none;
-  border-top:1px solid var(--iui-color-background-border);
+  border-top:1px solid var(--iui-color-border);
 }
 .iui-side-navigation.iui-collapsed{
   box-sizing:content-box;
@@ -67,9 +67,9 @@
   border-radius:0;
   border-left:none;
   border-right:none;
-  overflow:hidden;
+  isolation:isolate;
   justify-content:flex-start;
-  --_iui-button-active-stripe-inset:0 0 0 calc(100% - var(--iui-size-3xs));
+  --_iui-button-active-stripe-inset:0 -2px 0 100%;
 }
 .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
   height:calc(var(--iui-size-s) * 5);
@@ -85,7 +85,7 @@
   text-overflow:ellipsis;
 }
 .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
-  border-color:var(--iui-color-background-border);
+  border-color:var(--iui-color-border);
 }
 .iui-side-navigation .iui-sidenav-button .iui-button-icon:not(.iui-avatar) svg{
   display:flex;
@@ -93,25 +93,38 @@
   width:calc(1.5 * var(--iui-size-m));
   height:calc(1.5 * var(--iui-size-m));
 }
-.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon svg{
-  fill:var(--iui-color-foreground-primary);
+.iui-side-navigation .iui-sidenav-button.iui-submenu-open{
+  --_iui-button-active-stripe-background:linear-gradient(
+    0deg,
+    var(--iui-color-background-accent-muted) 25%,
+    var(--iui-color-border-accent) 25%,
+    var(--iui-color-border-accent) 75%,
+    var(--iui-color-background-accent-muted) 75%
+  );
+}
+.iui-side-navigation .iui-sidenav-button.iui-submenu-open::before{
+  content:"";
+  position:absolute;
+  inset:0 -2px 0 0;
+  z-index:-1;
+  background-color:inherit;
 }
 .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
-  background-color:var(--iui-color-background-2);
+  background-color:var(--iui-color-background-backdrop);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand{
   --_iui-button-padding-block:0;
   --_iui-button-min-height:var(--iui-size-l);
   justify-content:center;
   border:none;
-  border-bottom:1px solid var(--iui-color-background-border);
+  border-bottom:1px solid var(--iui-color-border);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-s);
   height:var(--iui-size-s);
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
 }
 @media (forced-colors: active){
   .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
@@ -132,8 +145,8 @@
   overflow-y:auto;
   overflow-y:overlay;
   resize:horizontal;
-  background-color:var(--iui-color-background-1);
-  border-right:1px solid var(--iui-color-background-border);
+  background-color:var(--iui-color-background);
+  border-right:1px solid var(--iui-color-border);
 }
 .iui-side-navigation-submenu.iui-enter{
   opacity:0;

package/css/skip-to-content.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-skip-to-content-link{
   background-color:Hsl(0 0% 0%/var(--iui-opacity-2));
-  color:var(--iui-color-foreground-accessory);
+  color:var(--iui-color-white);
   border-radius:var(--iui-border-radius-round);
   text-decoration:none;
   -webkit-user-select:none;
@@ -29,12 +29,12 @@
   }
 }
 .iui-skip-to-content-link: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-skip-to-content-link:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
+    outline:2px solid var(--iui-color-border-accent);
     outline-offset:2px;
   }
 }