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

package/css/button.css

@@ -39,46 +39,40 @@
   --_iui-button-padding-block:var(--iui-size-2xs);
   --_iui-button-padding-inline:var(--iui-size-m);
   --_iui-button-min-height:var(--iui-component-height);
-  --_iui-button-text-color:var(--iui-color-foreground-2);
-  --_iui-button-background-color:var(--iui-color-background-1);
-  --_iui-button-border-color:var(--iui-color-foreground-4);
+  --_iui-button-text-color:var(--iui-color-text);
+  --_iui-button-background-color:var(--iui-color-background);
+  --_iui-button-border-color:var(--iui-color-border-foreground);
+  --_iui-button-icon-fill:var(--iui-color-icon);
 }
 .iui-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-button:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-button:hover, .iui-button:active{
-  --_iui-button-text-color:var(--iui-color-foreground-1);
-  --_iui-button-background-color:var(--iui-color-background-1-hover);
-  --_iui-button-border-color:var(--iui-color-foreground-1);
-}
-.iui-button:hover .iui-notification-primary::before,
-.iui-button:hover .iui-notification-positive::before,
-.iui-button:hover .iui-notification-warning::before,
-.iui-button:hover .iui-notification-negative::before, .iui-button:active .iui-notification-primary::before,
-.iui-button:active .iui-notification-positive::before,
-.iui-button:active .iui-notification-warning::before,
-.iui-button:active .iui-notification-negative::before{
-  border-color:var(--iui-color-background-1-hover);
+  --_iui-button-text-color:var(--iui-color-text-hover);
+  --_iui-button-background-color:var(--iui-color-background-hover);
+  --_iui-button-border-color:var(--iui-color-border-foreground-hover);
+  --_iui-button-icon-fill:var(--iui-color-icon-hover);
 }
 .iui-button:focus{
   outline-offset:-2px;
   outline-width:2px;
 }
 .iui-button[disabled], .iui-button:disabled, .iui-button[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:var(--iui-color-background-disabled);
-  --_iui-button-border-color:var(--iui-color-background-disabled);
+  --_iui-button-border-color:var(--iui-color-border-disabled);
+  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
   cursor:not-allowed;
   outline-offset:-1px;
   outline-width:1px;
-  outline-color:var(--iui-color-foreground-primary);
+  outline-color:var(--iui-color-text-accent);
 }
 .iui-button[data-iui-size=small]{
   --_iui-button-gap:var(--iui-size-2xs);
@@ -94,9 +88,10 @@
   --_iui-button-min-height:var(--iui-component-height-large);
 }
 .iui-button[data-iui-variant=borderless]{
-  --_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);
@@ -104,17 +99,19 @@
   --_iui-button-padding-inline:var(--iui-size-xs);
 }
 .iui-button[data-iui-variant=borderless]: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-button[data-iui-variant=borderless]:where(:focus){
   outline-offset:-1px;
   outline-width:1px;
 }
 .iui-button[data-iui-variant=borderless]: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-button[data-iui-variant=borderless][data-iui-size=small]{
   --_iui-button-gap:var(--iui-size-2xs);
@@ -133,9 +130,10 @@
 }
 .iui-button[data-iui-active=true]{
   --_iui-button-active-stripe-inset:initial;
-  --_iui-button-active-stripe-color:var(--iui-color-foreground-primary);
-  --_iui-button-text-color:var(--iui-color-foreground-primary);
-  --_iui-button-background-color:var(--iui-color-background-subtle-primary);
+  --_iui-button-active-stripe-color:var(--iui-color-border-accent);
+  --_iui-button-text-color:var(--iui-color-text-accent);
+  --_iui-button-icon-fill:var(--iui-color-text-accent);
+  --_iui-button-background-color:var(--iui-color-background-accent-muted);
 }
 .iui-button[data-iui-active=true]::after{
   content:"";
@@ -144,59 +142,67 @@
   background-color:var(--_iui-button-active-stripe-color);
 }
 .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
-  --_iui-button-active-stripe-color:var(--iui-color-foreground-5);
-  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-active-stripe-color:var(--iui-color-icon-disabled);
+  --_iui-button-text-color:var(--iui-color-text-disabled);
+  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
 }
 .iui-button[data-iui-active=true][data-iui-variant=borderless]{
-  --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
+  --_iui-button-background-color:hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-6));
 }
 .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
   --_iui-button-background-color:var(--iui-color-background-disabled);
 }
 .iui-button[data-iui-variant=high-visibility]{
-  --_iui-button-background-color:var(--iui-color-background-primary);
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
+  --_iui-button-background-color:var(--iui-color-background-accent);
+  --_iui-button-text-color:var(--iui-color-white);
   --_iui-button-border-color:var(--_iui-button-background-color);
+  --_iui-button-icon-fill:var(--iui-color-white);
 }
 .iui-button[data-iui-variant=high-visibility]:hover, .iui-button[data-iui-variant=high-visibility]:active{
-  --_iui-button-background-color:var(--iui-color-background-primary-hover);
+  --_iui-button-background-color:var(--iui-color-background-accent-hover);
 }
 .iui-button[data-iui-variant=high-visibility]:focus{
-  outline-color:var(--iui-color-foreground-accessory);
+  outline-color:var(--iui-color-white);
   outline-offset:-3px;
   outline-width:1px;
 }
 .iui-button[data-iui-variant=high-visibility][disabled], .iui-button[data-iui-variant=high-visibility]:disabled, .iui-button[data-iui-variant=high-visibility][aria-disabled=true]{
   --_iui-button-background-color:var(--iui-color-background-disabled);
-  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-border-color:var(--iui-color-border-disabled);
+  --_iui-button-text-color:var(--iui-color-text-disabled);
+  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
   outline-offset:-1px;
   outline-width:1px;
-  outline-color:var(--iui-color-foreground-primary);
+  outline-color:var(--iui-color-text-accent);
 }
 .iui-button[data-iui-variant=cta]{
   --_iui-button-background-color:var(--iui-color-background-positive);
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
+  --_iui-button-text-color:var(--iui-color-white);
   --_iui-button-border-color:var(--_iui-button-background-color);
+  --_iui-button-icon-fill:var(--iui-color-white);
 }
 .iui-button[data-iui-variant=cta]:hover, .iui-button[data-iui-variant=cta]:active{
   --_iui-button-background-color:var(--iui-color-background-positive-hover);
 }
 .iui-button[data-iui-variant=cta]:focus{
-  outline-color:var(--iui-color-foreground-accessory);
+  outline-color:var(--iui-color-white);
   outline-offset:-3px;
   outline-width:1px;
 }
 .iui-button[data-iui-variant=cta][disabled], .iui-button[data-iui-variant=cta]:disabled, .iui-button[data-iui-variant=cta][aria-disabled=true]{
   --_iui-button-background-color:var(--iui-color-background-disabled);
-  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-border-color:var(--iui-color-border-disabled);
+  --_iui-button-text-color:var(--iui-color-text-disabled);
+  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
   outline-offset:-1px;
   outline-width:1px;
-  outline-color:var(--iui-color-foreground-primary);
+  outline-color:var(--iui-color-text-accent);
 }
 .iui-button[data-iui-variant=idea]{
-  --_iui-button-background-color:var(--iui-color-background-primary);
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
+  --_iui-button-background-color:var(--iui-color-background-accent);
+  --_iui-button-text-color:var(--iui-color-white);
   --_iui-button-border-color:var(--_iui-button-background-color);
+  --_iui-button-icon-fill:var(--iui-color-white);
   border-radius:var(--iui-border-radius-round);
   box-shadow:var(--iui-shadow-5);
   position:fixed;
@@ -204,19 +210,21 @@
   right:var(--iui-size-m);
 }
 .iui-button[data-iui-variant=idea]:hover, .iui-button[data-iui-variant=idea]:active{
-  --_iui-button-background-color:var(--iui-color-background-primary-hover);
+  --_iui-button-background-color:var(--iui-color-background-accent-hover);
 }
 .iui-button[data-iui-variant=idea]:focus{
-  outline-color:var(--iui-color-foreground-accessory);
+  outline-color:var(--iui-color-white);
   outline-offset:-3px;
   outline-width:1px;
 }
 .iui-button[data-iui-variant=idea][disabled], .iui-button[data-iui-variant=idea]:disabled, .iui-button[data-iui-variant=idea][aria-disabled=true]{
   --_iui-button-background-color:var(--iui-color-background-disabled);
-  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-border-color:var(--iui-color-border-disabled);
+  --_iui-button-text-color:var(--iui-color-text-disabled);
+  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
   outline-offset:-1px;
   outline-width:1px;
-  outline-color:var(--iui-color-foreground-primary);
+  outline-color:var(--iui-color-text-accent);
 }
 
 .iui-button-icon svg{
@@ -225,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-button-dropdown{
@@ -254,7 +262,7 @@
   z-index:1;
 }
 .iui-button-split :where(.iui-button:first-child)[disabled], .iui-button-split :where(.iui-button:first-child):disabled, .iui-button-split :where(.iui-button:first-child)[aria-disabled=true]{
-  border-right-color:var(--iui-color-background-4);
+  border-right-color:var(--iui-color-border-subtle);
   z-index:-1;
 }
 .iui-button-split :where(.iui-button:last-child){
@@ -268,7 +276,7 @@
   border-left-color:rgba(255, 255, 255, var(--iui-opacity-4));
 }
 .iui-button-split :where(.iui-button:last-child)[disabled], .iui-button-split :where(.iui-button:last-child):disabled, .iui-button-split :where(.iui-button:last-child)[aria-disabled=true]{
-  border-left-color:var(--iui-color-background-4);
+  border-left-color:var(--iui-color-border-subtle);
   z-index:-1;
 }
 .iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{
@@ -324,7 +332,7 @@
   margin-left:-1px;
 }
 .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
-  border-left-color:var(--iui-color-background-4);
+  border-left-color:var(--iui-color-border-subtle);
 }
 
 .iui-button-group-vertical{
@@ -376,7 +384,7 @@
   margin-top:-1px;
 }
 .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
-  border-top-color:var(--iui-color-background-4);
+  border-top-color:var(--iui-color-border-subtle);
 }
 
 .iui-button-group-overflow-x{

package/css/carousel.css

@@ -7,12 +7,12 @@
   border-radius:var(--iui-border-radius-1);
 }
 .iui-carousel:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
+  outline:1px solid var(--iui-color-border-accent);
   outline-offset:4px;
 }
 @supports not selector(*:focus-visible){
   .iui-carousel:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:4px;
   }
 }
@@ -42,7 +42,7 @@
   display:flex;
   align-items:center;
   height:calc(var(--iui-size-s) * 3);
-  border-top:var(--iui-size-3xs) solid var(--iui-color-background-4);
+  border-top:var(--iui-size-3xs) solid var(--iui-color-border);
 }
 .iui-carousel-navigation-left, .iui-carousel-navigation-right{
   display:flex;
@@ -51,7 +51,7 @@
 }
 .iui-carousel-navigation-left button[data-pressed=true], .iui-carousel-navigation-right button[data-pressed=true]{
   outline-offset:-1px;
-  outline:1px solid var(--iui-color-foreground-primary);
+  outline:1px solid var(--iui-color-border-accent);
 }
 .iui-carousel-navigation-dots{
   margin:0;
@@ -66,12 +66,12 @@
   scrollbar-width:none;
 }
 .iui-carousel-navigation-dots: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-carousel-navigation-dots:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
@@ -91,7 +91,7 @@
   padding-right:var(--_iui-button-padding-inline);
 }
 .iui-carousel-navigation-dot:hover::after{
-  background-color:var(--iui-color-foreground-3);
+  background-color:var(--iui-color-icon-muted-hover);
 }
 .iui-carousel-navigation-dot::after{
   display:flex;
@@ -101,8 +101,8 @@
   content:"";
   border-radius:50%;
   border:1px solid transparent;
-  background-color:var(--iui-color-foreground-4);
-  box-shadow:inset 0 0 0 0 var(--iui-color-background-1);
+  background-color:var(--iui-color-icon-muted);
+  box-shadow:inset 0 0 0 0 var(--iui-color-background);
 }
 .iui-carousel-navigation-dot.iui-first::after{
   transform:scale(0.5);
@@ -111,9 +111,9 @@
   transform:scale(0.75);
 }
 .iui-carousel-navigation-dot.iui-active::after{
-  background-color:var(--iui-color-foreground-primary);
-  border-color:var(--iui-color-foreground-primary);
-  box-shadow:inset 0 0 0 1px var(--iui-color-background-1);
+  background-color:var(--iui-color-icon-accent);
+  border-color:var(--iui-color-icon-accent);
+  box-shadow:inset 0 0 0 1px var(--iui-color-background);
 }
 @media (forced-colors: active){
   .iui-carousel-navigation-dot.iui-active::after{

package/css/checkbox.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;
@@ -40,13 +40,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-checkbox-wrapper.iui-loading{
   cursor:progress;
   font-style:italic;
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-disabled);
 }
 .iui-checkbox-wrapper > .iui-checkbox-label,
 .iui-checkbox-wrapper > .iui-radio-label{
@@ -60,23 +60,23 @@
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   vertical-align:middle;
-  fill:currentColor;
+  fill:var(--iui-color-icon);
 }
 .iui-checkbox-wrapper.iui-disabled{
   cursor:not-allowed;
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-disabled);
 }
 .iui-checkbox-wrapper.iui-disabled svg{
-  fill:var(--iui-color-foreground-5);
+  fill:var(--iui-color-icon-disabled);
 }
 .iui-checkbox-wrapper.iui-positive{
-  color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-text-positive);
 }
 .iui-checkbox-wrapper.iui-warning{
-  color:var(--iui-color-foreground-warning);
+  color:var(--iui-color-text-warning);
 }
 .iui-checkbox-wrapper.iui-negative{
-  color:var(--iui-color-foreground-negative);
+  color:var(--iui-color-text-negative);
 }
 .iui-checkbox::before{
   content:"";
@@ -100,29 +100,27 @@
   --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
 }
 .iui-checkbox:checked{
-  --_iui-checkbox-border-color:var(--iui-color-foreground-3);
   --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
 }
 .iui-checkbox:indeterminate{
-  --_iui-checkbox-border-color:var(--iui-color-foreground-3);
   --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
 }
 .iui-checkbox:hover{
-  --_iui-checkbox-border-color:var(--iui-color-foreground-2);
+  --_iui-checkbox-border-color:var(--iui-color-border-foreground-hover);
 }
 .iui-checkbox: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-checkbox:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
+    outline:2px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-checkbox: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;
 }
@@ -135,14 +133,14 @@
   outline-width:1px;
 }
 .iui-checkbox.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-checkbox.iui-checkbox-visibility:where(:hover){
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-checkbox.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-checkbox.iui-loading{

package/css/code.css

@@ -15,8 +15,9 @@
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  background-color:var(--iui-color-background-3);
-  color:var(--iui-color-foreground-2);
+  background-color:var(--iui-color-background);
+  border:1px solid var(--iui-color-border);
+  color:var(--iui-color-text);
 }
 
 .iui-codeblock{
@@ -30,7 +31,9 @@
   display:flex;
   align-items:center;
   border-radius:var(--iui-border-radius-1) var(--iui-border-radius-1) 0 0;
-  background-color:var(--iui-color-background-3);
+  background-color:var(--iui-color-background);
+  border:1px solid var(--iui-color-border);
+  border-bottom:none;
 }
 .iui-codeblock > .iui-title-bar > .iui-title{
   margin-left:var(--iui-size-s);
@@ -44,19 +47,20 @@
 .iui-codeblock > .iui-codeblock-content{
   margin:0;
   display:grid;
-  overflow-x:auto;
-  overflow-y:auto;
+  overflow:auto;
+  overflow:overlay;
   border-radius:0 0 var(--iui-border-radius-1) var(--iui-border-radius-1);
   white-space:normal;
-  border:1px solid var(--iui-color-background-3);
+  border:1px solid var(--iui-color-border);
+  color:var(--iui-color-text);
 }
 .iui-codeblock > .iui-codeblock-content: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-codeblock > .iui-codeblock-content:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
@@ -69,10 +73,10 @@
           hyphens:auto;
   counter-increment:section;
   font-family:var(--iui-font-mono);
-  background-color:var(--iui-color-background-1);
+  background-color:var(--iui-color-background);
 }
 .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
-  background-color:hsl(var(--iui-color-foreground-1-hsl)/0.02);
+  background-color:var(--iui-color-background-zebra);
 }
 .iui-codeblock > .iui-codeblock-content > code::before{
   content:counter(section);
@@ -80,6 +84,6 @@
   display:inline-block;
   padding:0 var(--iui-size-xs);
   width:calc(var(--iui-size-l) + 2 * var(--iui-size-xs));
-  background-color:var(--iui-color-background-2);
-  color:var(--iui-color-foreground-4);
+  background-color:var(--iui-color-background-backdrop);
+  color:var(--iui-color-text-muted);
 }

package/css/color-picker.css

@@ -4,13 +4,15 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-color-picker{
   --iui-color-picker-selected-color:initial;
-  --iui-surface-background-color:var(--iui-color-background-1);
-  --iui-surface-border-radius:0;
+  --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-foreground-2);
+  color:var(--iui-color-text);
   border-radius:var(--iui-border-radius-1);
   display:inline-flex;
   padding:var(--iui-size-s) var(--iui-size-s);
@@ -23,11 +25,6 @@
   max-height:calc(var(--iui-size-s) * 42);
   row-gap:var(--iui-size-s);
 }
-@media (forced-colors: active){
-  .iui-color-picker{
-    border:1px solid transparent;
-  }
-}
 @supports (overflow-y: overlay){
   .iui-color-picker{
     overflow-y:overlay;
@@ -93,7 +90,7 @@
   forced-color-adjust:none;
   background-position:0 0, calc(var(--iui-size-m) * 0.5) calc(var(--iui-size-m) * 0.5);
   background-size:var(--iui-size-m) var(--iui-size-m);
-  background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
+  background-image:repeating-linear-gradient(45deg, #C7CCD1 25%, transparent 25%, transparent 75%, #C7CCD1 75%, #C7CCD1), repeating-linear-gradient(45deg, #C7CCD1 25%, #EDEFF2 25%, #EDEFF2 75%, #C7CCD1 75%, #C7CCD1);
 }
 .iui-color-swatch::after{
   content:"";
@@ -104,26 +101,26 @@
   height:inherit;
   border-radius:inherit;
   background-color:inherit;
-  box-shadow:inset 0 0 0 1px var(--iui-color-foreground-5);
+  box-shadow:inset 0 0 0 1px var(--iui-color-border-foreground);
 }
 .iui-color-swatch:hover{
-  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-4), inset 0 0 0 1px var(--iui-color-foreground-5);
+  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-border), inset 0 0 0 1px var(--iui-color-border-foreground);
 }
 .iui-color-swatch:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:1px;
+  outline:2px solid var(--iui-color-border-accent);
+  outline-offset:2px;
 }
 @supports not selector(*:focus-visible){
   .iui-color-swatch:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:1px;
+    outline:2px solid var(--iui-color-border-accent);
+    outline-offset:2px;
   }
 }
 .iui-color-swatch.iui-active{
-  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-primary), inset 0 0 0 1px var(--iui-color-foreground-5);
+  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-border-accent), inset 0 0 0 1px var(--iui-color-border-foreground);
 }
 .iui-color-swatch.iui-active:hover{
-  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-4), inset 0 0 0 1px var(--iui-color-foreground-5), 0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-primary);
+  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-border), inset 0 0 0 1px var(--iui-color-border-foreground), 0 0 0 var(--iui-size-3xs) var(--iui-color-border-accent);
 }
 
 .iui-color-picker-section-label{
@@ -167,7 +164,7 @@
   forced-color-adjust:none;
   background-position:0 0, calc(var(--iui-size-xs) * 0.5) calc(var(--iui-size-xs) * 0.5);
   background-size:var(--iui-size-xs) var(--iui-size-xs);
-  background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
+  background-image:repeating-linear-gradient(45deg, #C7CCD1 25%, transparent 25%, transparent 75%, #C7CCD1 75%, #C7CCD1), repeating-linear-gradient(45deg, #C7CCD1 25%, #EDEFF2 25%, #EDEFF2 75%, #C7CCD1 75%, #C7CCD1);
 }
 .iui-opacity-slider .iui-slider-container .iui-slider-rail::before{
   display:block;
@@ -193,15 +190,15 @@
   background-color:var(--iui-color-picker-selected-color);
 }
 .iui-color-dot:hover{
-  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-foreground-4);
+  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-border);
 }
 .iui-color-dot:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
+  outline:2px solid var(--iui-color-border-accent);
   outline-offset:0;
 }
 @supports not selector(*:focus-visible){
   .iui-color-dot:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
+    outline:2px solid var(--iui-color-border-accent);
     outline-offset:0;
   }
 }