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

package/css/date-picker.css

@@ -3,13 +3,15 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-date-picker{
-  --iui-surface-background-color:var(--iui-color-background-1);
+  --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);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
@@ -17,11 +19,6 @@
   display:inline-grid;
   grid-template-columns:1fr auto;
 }
-@media (forced-colors: active){
-  .iui-date-picker{
-    border:1px solid transparent;
-  }
-}
 .iui-date-picker .iui-time-picker{
   height:0;
   min-height:100%;
@@ -59,7 +56,7 @@
   display:flex;
   padding:0 var(--iui-size-xs);
   font-weight:var(--iui-font-weight-bold);
-  background-color:var(--iui-color-background-2);
+  background-color:var(--iui-color-background-backdrop);
 }
 .iui-calendar-weekdays > div{
   white-space:nowrap;
@@ -85,18 +82,18 @@
   font-variant-numeric:tabular-nums;
 }
 .iui-calendar-day:focus-visible, .iui-calendar-day-today: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-calendar-day:focus, .iui-calendar-day-today:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-calendar-day:hover, .iui-calendar-day-today:hover{
   font-weight:var(--iui-font-weight-semibold);
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-calendar-day-today{
   position:relative;
@@ -112,10 +109,10 @@
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid var(--iui-color-foreground-5);
+  border:2px solid var(--iui-color-border);
 }
 .iui-calendar-day-today:hover{
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 
 .iui-calendar-day-selected, .iui-calendar-day-selected-today{
@@ -126,27 +123,27 @@
   border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
   font-weight:var(--iui-font-weight-semibold);
-  background-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
+  background-color:var(--iui-color-background-accent);
+  color:var(--iui-color-white);
   cursor:default;
 }
 .iui-calendar-day-selected:focus-visible, .iui-calendar-day-selected-today: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-calendar-day-selected:focus, .iui-calendar-day-selected-today:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-calendar-day-selected:focus-visible, .iui-calendar-day-selected-today:focus-visible{
-  outline:1px solid var(--iui-color-foreground-accessory);
+  outline:1px solid var(--iui-color-white);
   outline-offset:-3px;
 }
 @supports not selector(*:focus-visible){
   .iui-calendar-day-selected:focus, .iui-calendar-day-selected-today:focus{
-    outline:1px solid var(--iui-color-foreground-accessory);
+    outline:1px solid var(--iui-color-white);
     outline-offset:-3px;
   }
 }
@@ -164,14 +161,14 @@
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid var(--iui-color-foreground-5);
+  border:2px solid var(--iui-color-border);
 }
 .iui-calendar-day-selected-today:hover{
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-calendar-day-selected-today:hover{
-  background-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
+  background-color:var(--iui-color-background-accent);
+  color:var(--iui-color-white);
 }
 .iui-calendar-day-selected-today:hover::before{
   background-color:initial;
@@ -187,21 +184,21 @@
   height:36px;
   border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }
 .iui-calendar-day-outside-month:focus-visible, .iui-calendar-day-outside-month-today: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-calendar-day-outside-month:focus, .iui-calendar-day-outside-month-today:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-calendar-day-outside-month:hover, .iui-calendar-day-outside-month-today:hover{
   font-weight:var(--iui-font-weight-semibold);
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-calendar-day-outside-month-today{
   position:relative;
@@ -217,10 +214,10 @@
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid var(--iui-color-foreground-5);
+  border:2px solid var(--iui-color-border);
 }
 .iui-calendar-day-outside-month-today:hover{
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 
 .iui-calendar-day-range-start, .iui-calendar-day-range-start-today{
@@ -231,29 +228,29 @@
   border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
   font-weight:var(--iui-font-weight-semibold);
-  background-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
+  background-color:var(--iui-color-background-accent);
+  color:var(--iui-color-white);
   border-top-right-radius:0;
   border-bottom-right-radius:0;
   cursor:pointer;
 }
 .iui-calendar-day-range-start:focus-visible, .iui-calendar-day-range-start-today: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-calendar-day-range-start:focus, .iui-calendar-day-range-start-today:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-calendar-day-range-start:focus-visible, .iui-calendar-day-range-start-today:focus-visible{
-  outline:1px solid var(--iui-color-foreground-accessory);
+  outline:1px solid var(--iui-color-white);
   outline-offset:-3px;
 }
 @supports not selector(*:focus-visible){
   .iui-calendar-day-range-start:focus, .iui-calendar-day-range-start-today:focus{
-    outline:1px solid var(--iui-color-foreground-accessory);
+    outline:1px solid var(--iui-color-white);
     outline-offset:-3px;
   }
 }
@@ -271,14 +268,14 @@
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid var(--iui-color-foreground-5);
+  border:2px solid var(--iui-color-border);
 }
 .iui-calendar-day-range-start-today:hover{
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-calendar-day-range-start-today:hover{
-  background-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
+  background-color:var(--iui-color-background-accent);
+  color:var(--iui-color-white);
 }
 .iui-calendar-day-range-start-today:hover::before{
   background-color:initial;
@@ -295,28 +292,28 @@
   border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
   font-weight:var(--iui-font-weight-semibold);
-  background-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
+  background-color:var(--iui-color-background-accent);
+  color:var(--iui-color-white);
   border-top-left-radius:0;
   border-bottom-left-radius:0;
 }
 .iui-calendar-day-range-end:focus-visible, .iui-calendar-day-range-end-today: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-calendar-day-range-end:focus, .iui-calendar-day-range-end-today:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-calendar-day-range-end:focus-visible, .iui-calendar-day-range-end-today:focus-visible{
-  outline:1px solid var(--iui-color-foreground-accessory);
+  outline:1px solid var(--iui-color-white);
   outline-offset:-3px;
 }
 @supports not selector(*:focus-visible){
   .iui-calendar-day-range-end:focus, .iui-calendar-day-range-end-today:focus{
-    outline:1px solid var(--iui-color-foreground-accessory);
+    outline:1px solid var(--iui-color-white);
     outline-offset:-3px;
   }
 }
@@ -334,14 +331,14 @@
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid var(--iui-color-foreground-5);
+  border:2px solid var(--iui-color-border);
 }
 .iui-calendar-day-range-end-today:hover{
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-calendar-day-range-end-today:hover{
-  background-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
+  background-color:var(--iui-color-background-accent);
+  color:var(--iui-color-white);
 }
 .iui-calendar-day-range-end-today:hover::before{
   background-color:initial;
@@ -358,22 +355,21 @@
   border-radius:var(--iui-border-radius-1);
   font-variant-numeric:tabular-nums;
   border-radius:0;
-  background-color:var(--iui-color-background-subtle-primary);
-  color:var(--iui-color-foreground-2);
+  background-color:var(--iui-color-background-accent-muted);
 }
 .iui-calendar-day-range:focus-visible, .iui-calendar-day-range-today: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-calendar-day-range:focus, .iui-calendar-day-range-today:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-calendar-day-range:hover, .iui-calendar-day-range-today:hover{
   font-weight:var(--iui-font-weight-semibold);
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5));
 }
 .iui-calendar-day-range-today{
   position:relative;
@@ -389,15 +385,14 @@
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
-  border:2px solid var(--iui-color-foreground-5);
+  border:2px solid var(--iui-color-border);
 }
 .iui-calendar-day-range-today:hover{
-  background-color:var(--iui-color-background-transparent-hover);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-calendar-day-range-today:hover{
-  background-color:var(--iui-color-background-transparent-hover);
-  color:var(--iui-color-foreground-2);
+  background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5));
 }
 .iui-calendar-day-range-today::before{
-  border-color:var(--iui-color-foreground-primary);
+  border-color:var(--iui-color-border-accent);
 }

package/css/dialog.css

@@ -26,7 +26,7 @@
   position:fixed;
   padding:var(--iui-size-s) var(--iui-size-m);
   pointer-events:auto;
-  background-color:var(--iui-color-background-1);
+  background-color:var(--iui-color-background);
   transition:visibility var(--iui-duration-0) linear, opacity var(--iui-duration-1) ease-out;
   transition-delay:var(--iui-duration-1), var(--iui-duration-0);
 }
@@ -104,7 +104,7 @@
 .iui-dialog-draggable{
   display:flex;
   flex-direction:column;
-  border:1px solid var(--iui-color-background-border);
+  border:1px solid var(--iui-color-border);
 }
 
 .iui-dialog-title{
@@ -131,8 +131,8 @@
   margin:calc(0px - var(--iui-size-s)) calc(0px - var(--iui-size-m)) var(--iui-size-s) calc(0px - var(--iui-size-m));
   cursor:-webkit-grab;
   cursor:grab;
-  background-color:var(--iui-color-background-3);
-  border-bottom:1px solid var(--iui-color-background-border);
+  background-color:var(--iui-color-background-backdrop);
+  border-bottom:1px solid var(--iui-color-border);
 }
 .iui-dialog-title-bar-filled:active{
   cursor:-webkit-grabbing;

package/css/expandable-block.css

@@ -10,7 +10,7 @@
   display:flex;
   flex-direction:column;
   width:100%;
-  background-color:var(--iui-color-background-1);
+  background-color:var(--iui-color-background);
   border-radius:var(--iui-border-radius-1);
 }
 .iui-expandable-block > .iui-header{
@@ -24,16 +24,16 @@
           user-select:none;
   transition:background-color var(--iui-duration-1) ease-out;
   border-radius:inherit;
-  border:1px solid var(--iui-color-background-3);
-  background-color:var(--iui-color-background-3);
+  border:1px solid var(--iui-color-border);
+  background-color:var(--iui-color-background);
 }
 .iui-expandable-block > .iui-header: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-expandable-block > .iui-header:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
@@ -45,7 +45,7 @@
   height:var(--iui-size-m);
 }
 .iui-expandable-block > .iui-header > .iui-icon{
-  fill:var(--iui-color-foreground-2);
+  fill:var(--iui-color-icon);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-expandable-block > .iui-header > .iui-icon{
@@ -62,7 +62,7 @@
   min-width:0;
   margin-left:var(--iui-size-s);
   transition:color var(--iui-duration-1) ease;
-  color:var(--iui-color-foreground-2);
+  color:var(--iui-color-text);
 }
 .iui-expandable-block > .iui-header .iui-title,
 .iui-expandable-block > .iui-header .iui-caption{
@@ -75,23 +75,23 @@
 }
 .iui-expandable-block > .iui-header .iui-caption{
   font-size:var(--iui-font-size-0);
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }
 .iui-expandable-block > .iui-header: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-expandable-block > .iui-header:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-border-accent);
     outline-offset:-1px;
   }
 }
 .iui-expandable-block .iui-expandable-content{
   overflow:hidden;
-  border-bottom:1px solid var(--iui-color-background-4);
-  border-right:1px solid var(--iui-color-background-4);
-  border-left:1px solid var(--iui-color-background-4);
+  border-bottom:1px solid var(--iui-color-border);
+  border-right:1px solid var(--iui-color-border);
+  border-left:1px solid var(--iui-color-border);
   border-bottom-left-radius:inherit;
   border-bottom-right-radius:inherit;
 }
@@ -121,24 +121,24 @@
   padding:var(--iui-size-s) var(--iui-size-s);
 }
 .iui-expandable-block:hover > .iui-header{
-  background-color:var(--iui-color-background-4);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-expandable-block:hover > .iui-header > .iui-icon{
-  fill:var(--iui-color-foreground-1);
+  fill:var(--iui-color-icon-hover);
 }
 .iui-expandable-block:hover > .iui-header .iui-caption,
 .iui-expandable-block:hover > .iui-header .iui-title{
-  color:var(--iui-color-foreground-1);
+  color:var(--iui-color-text-hover);
   transition:color var(--iui-duration-1) ease;
 }
 .iui-expandable-block.iui-expanded > .iui-header{
-  background-color:var(--iui-color-background-3);
-  border-color:var(--iui-color-background-4);
+  background-color:var(--iui-color-background);
+  border-color:var(--iui-color-border);
   border-bottom-left-radius:0;
   border-bottom-right-radius:0;
 }
 .iui-expandable-block.iui-expanded > .iui-header:hover{
-  background-color:var(--iui-color-background-4);
+  background-color:var(--iui-color-background-hover);
 }
 .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
   transform:rotate(90deg);

package/css/fieldset.css

@@ -9,8 +9,8 @@
   vertical-align:baseline;
   padding:var(--iui-size-s) var(--iui-size-s);
   border-radius:var(--iui-border-radius-1);
-  border:1px solid var(--iui-color-background-border);
-  background-color:var(--iui-color-background-1);
+  border:1px solid var(--iui-color-border);
+  background-color:var(--iui-color-background);
 }
 .iui-fieldset legend{
   font-size:var(--iui-font-size-2);
@@ -20,12 +20,13 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  background-color:var(--iui-color-background-4);
-  color:var(--iui-color-foreground-2);
+  background-color:var(--iui-color-background);
+  border:2px solid var(--iui-color-border);
+  color:var(--iui-color-text);
 }
 .iui-fieldset[disabled]{
   cursor:not-allowed;
 }
 .iui-fieldset[disabled] legend{
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-disabled);
 }

package/css/file-upload.css

@@ -28,8 +28,8 @@
       -ms-user-select:none;
           user-select:none;
   padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-s);
-  background-color:var(--iui-color-background-2);
-  border:1px solid var(--iui-color-background-2);
+  background-color:var(--iui-color-background-backdrop);
+  border:1px solid var(--iui-color-background-backdrop);
   border-radius:var(--iui-border-radius-1);
 }
 .iui-file-upload > .iui-content .iui-browse-input{
@@ -45,7 +45,7 @@
   flex-shrink:0;
   width:var(--iui-size-2xl);
   height:var(--iui-size-2xl);
-  fill:var(--iui-color-foreground-4);
+  fill:var(--iui-color-icon-muted);
   margin-top:var(--iui-size-s);
   margin-bottom:var(--iui-size-s);
 }
@@ -61,7 +61,7 @@
   flex-direction:row;
 }
 .iui-file-upload > .iui-content:only-child:focus-within{
-  outline:2px solid var(--iui-color-foreground-primary);
+  outline:2px solid var(--iui-color-text-accent);
   outline-offset:-2px;
 }
 .iui-file-upload > .iui-content .iui-template-text{
@@ -71,12 +71,12 @@
   font-weight:var(--iui-font-weight-bold);
 }
 .iui-file-upload.iui-drag > .iui-content{
-  background-color:var(--iui-color-background-subtle-primary);
-  border-color:var(--iui-color-foreground-primary);
-  color:var(--iui-color-foreground-primary);
+  background-color:var(--iui-color-background-accent-muted);
+  border-color:var(--iui-color-border-accent);
+  color:var(--iui-color-text-accent);
   visibility:visible;
 }
 .iui-file-upload.iui-drag > .iui-content > svg,
 .iui-file-upload.iui-drag > .iui-content .iui-template-icon{
-  fill:var(--iui-color-foreground-primary);
+  fill:var(--iui-color-icon-accent);
 }

package/css/footer.css

@@ -32,27 +32,27 @@
           user-select:none;
   white-space:nowrap;
   word-break:keep-all;
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }
 .iui-legal-footer-item > a{
-  color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
+  color:var(--iui-color-text-accent);
+  -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
   border-radius:var(--iui-border-radius-1);
   cursor:pointer;
   text-decoration:none;
 }
 .iui-legal-footer-item > a:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
+  outline:1px solid var(--iui-color-text-accent);
   outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
   .iui-legal-footer-item > a:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
+    outline:1px solid var(--iui-color-text-accent);
     outline-offset:1px;
   }
 }
 .iui-legal-footer-item > a:hover{
-  color:var(--iui-color-foreground-primary-hover);
+  color:var(--iui-color-text-accent-hover);
 }
 .iui-legal-footer-item > a:hover{
   text-decoration:underline;
@@ -65,31 +65,23 @@
     text-decoration:none;
   }
 }
-.iui-theme-light .iui-legal-footer-item > a, .iui-theme-dark .iui-legal-footer-item > a{
-  text-decoration:none;
-}
-.iui-theme-light .iui-legal-footer-item > a:hover, .iui-theme-dark .iui-legal-footer-item > a:hover{
-  text-decoration:underline;
-}
-
-.iui-theme-light-hc .iui-legal-footer-item > a, .iui-theme-dark-hc .iui-legal-footer-item > a{
+[data-iui-contrast=high] .iui-legal-footer-item > a{
   text-decoration:underline;
 }
-.iui-theme-light-hc .iui-legal-footer-item > a:hover, .iui-theme-dark-hc .iui-legal-footer-item > a:hover{
+[data-iui-contrast=high] .iui-legal-footer-item > a:hover{
   text-decoration:none;
 }
-
 .iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }
 
 .iui-legal-footer-separator{
   margin:0 var(--iui-size-xs);
   width:1px;
   height:var(--iui-size-s);
-  background-color:var(--iui-color-foreground-4);
+  background-color:var(--iui-color-border);
 }
 
 .iui-legal-footer-developer{
-  color:var(--iui-color-foreground-4);
+  color:var(--iui-color-text-muted);
 }

package/css/global.css

@@ -3,14 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 :where(.iui-root){
-  color:var(--iui-color-foreground-2);
+  color:var(--iui-color-text);
   font-size:var(--iui-font-size-1);
   line-height:var(--iui-size-l);
   font-family:var(--iui-font-sans);
 }
 :where(body:where(.iui-root)){
   margin:0;
-  background-color:var(--iui-color-background-2);
+  background-color:var(--iui-color-background-backdrop);
 }
 
 :where(.iui-root) :where([class*="iui-"]):where(:not(.iui-root)), :where(.iui-root) :where([class*="iui-"]):where(:not(.iui-root))::before, :where(.iui-root) :where([class*="iui-"]):where(:not(.iui-root))::after,
@@ -22,42 +22,42 @@
 
 :where([data-iui-theme]),
 :where(.iui-root),
-:where(.iui-root) *{
-  scrollbar-color:hsl(var(--iui-color-foreground-1-hsl)/var(--iui-opacity-4)) transparent;
+:where(.iui-root *){
+  scrollbar-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-4)) transparent;
   scrollbar-width:thin;
 }
-:where([data-iui-theme])::-moz-selection, :where([data-iui-theme]) *::-moz-selection, :where(.iui-root)::-moz-selection, :where(.iui-root) *::-moz-selection, :where(.iui-root) *::-moz-selection, :where(.iui-root) * *::-moz-selection{
-  background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
+:where([data-iui-theme])::-moz-selection, :where([data-iui-theme]) *::-moz-selection, :where(.iui-root)::-moz-selection, :where(.iui-root) *::-moz-selection, :where(.iui-root *)::-moz-selection, :where(.iui-root *) *::-moz-selection{
+  background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5));
 }
 :where([data-iui-theme])::selection,
 :where([data-iui-theme]) *::selection,
 :where(.iui-root)::selection,
 :where(.iui-root) *::selection,
-:where(.iui-root) *::selection,
-:where(.iui-root) * *::selection{
-  background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
+:where(.iui-root *)::selection,
+:where(.iui-root *) *::selection{
+  background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5));
 }
 :where([data-iui-theme])::-webkit-scrollbar,
 :where(.iui-root)::-webkit-scrollbar,
-:where(.iui-root) *::-webkit-scrollbar{
+:where(.iui-root *)::-webkit-scrollbar{
   width:var(--iui-size-xs);
   height:var(--iui-size-xs);
 }
 :where([data-iui-theme])::-webkit-scrollbar-thumb,
 :where(.iui-root)::-webkit-scrollbar-thumb,
-:where(.iui-root) *::-webkit-scrollbar-thumb{
-  background-color:hsl(var(--iui-color-foreground-1-hsl)/var(--iui-opacity-4));
+:where(.iui-root *)::-webkit-scrollbar-thumb{
+  background-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-4));
   border-radius:var(--iui-border-radius-round);
 }
 :where([data-iui-theme])::-webkit-scrollbar-thumb:hover,
 :where(.iui-root)::-webkit-scrollbar-thumb:hover,
-:where(.iui-root) *::-webkit-scrollbar-thumb:hover{
-  background-color:hsl(var(--iui-color-foreground-1-hsl)/var(--iui-opacity-3));
+:where(.iui-root *)::-webkit-scrollbar-thumb:hover{
+  background-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-3));
 }
 :where([data-iui-theme])::-webkit-scrollbar-track, :where([data-iui-theme])::-webkit-scrollbar-corner,
 :where(.iui-root)::-webkit-scrollbar-track,
 :where(.iui-root)::-webkit-scrollbar-corner,
-:where(.iui-root) *::-webkit-scrollbar-track,
-:where(.iui-root) *::-webkit-scrollbar-corner{
+:where(.iui-root *)::-webkit-scrollbar-track,
+:where(.iui-root *)::-webkit-scrollbar-corner{
   background-color:transparent;
 }