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

package/css/button.css

@@ -9,14 +9,15 @@
   vertical-align:baseline;
   font-family:inherit;
   display:inline-flex;
+  flex-shrink:0;
   align-items:center;
   vertical-align:middle;
   justify-content:center;
   position:relative;
-  border-radius:4px;
-  line-height:22px;
-  font-size:14px;
-  font-weight:400;
+  border-radius:var(--iui-border-radius-1);
+  line-height:var(--iui-size-l);
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
@@ -27,17 +28,20 @@
   background:var(--_iui-button-background-color);
   color:var(--_iui-button-text-color);
   gap:var(--_iui-button-gap);
-  height:var(--_iui-button-height);
+  min-height:var(--_iui-button-min-height);
+  min-width:var(--_iui-button-min-height);
+  padding-block:var(--_iui-button-padding-block);
   padding-inline:var(--_iui-button-padding-inline);
-  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
   -webkit-tap-highlight-color:transparent;
   text-decoration:none;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-gap:var(--iui-size-xs);
+  --_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:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  --_iui-button-border-color:var(--iui-color-foreground-4);
 }
 .iui-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -50,9 +54,9 @@
   }
 }
 .iui-button:hover, .iui-button:active{
-  --_iui-button-text-color:var(--iui-color-foreground-body);
-  --_iui-button-background-color:var(--iui-color-background-1-overlay);
-  --_iui-button-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+  --_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,
@@ -61,14 +65,14 @@
 .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-overlay);
+  border-color:var(--iui-color-background-1-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-text-color-placeholder);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
   --_iui-button-background-color:var(--iui-color-background-disabled);
   --_iui-button-border-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
@@ -77,61 +81,61 @@
   outline-color:var(--iui-color-foreground-primary);
 }
 .iui-button[data-iui-size=small]{
-  --_iui-button-gap:4px;
-  --_iui-button-height:27px;
-  --_iui-button-padding-inline:8px;
+  --_iui-button-gap:var(--iui-size-2xs);
+  --_iui-button-padding-block:0;
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-min-height:var(--iui-component-height-small);
 }
 .iui-button[data-iui-size=large]{
-  font-size:16px;
-  --_iui-button-gap:12px;
-  --_iui-button-height:49px;
-  --_iui-button-padding-inline:24px;
+  font-size:var(--iui-font-size-2);
+  --_iui-button-gap:var(--iui-size-s);
+  --_iui-button-padding-block:var(--iui-size-xs);
+  --_iui-button-padding-inline:var(--iui-size-l);
+  --_iui-button-min-height:var(--iui-component-height-large);
 }
 .iui-button[data-iui-variant=borderless]{
-  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-text-color:var(--iui-color-foreground-2);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-padding-inline:8px;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_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-padding-inline:var(--iui-size-xs);
 }
 .iui-button[data-iui-variant=borderless]:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-body);
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-background-color:var(--iui-color-background-transparent-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-text-color-placeholder);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
 }
 .iui-button[data-iui-variant=borderless][data-iui-size=small]{
-  --_iui-button-gap:4px;
-  --_iui-button-height:27px;
-  --_iui-button-padding-inline:8px;
-  --_iui-button-padding-inline:2px;
+  --_iui-button-gap:var(--iui-size-2xs);
+  --_iui-button-padding-block:0;
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-min-height:var(--iui-component-height-small);
+  --_iui-button-padding-inline:var(--iui-size-2xs);
 }
 .iui-button[data-iui-variant=borderless][data-iui-size=large]{
-  font-size:16px;
-  --_iui-button-gap:12px;
-  --_iui-button-height:49px;
-  --_iui-button-padding-inline:24px;
-  --_iui-button-padding-inline:12px;
+  font-size:var(--iui-font-size-2);
+  --_iui-button-gap:var(--iui-size-s);
+  --_iui-button-padding-block:var(--iui-size-xs);
+  --_iui-button-padding-inline:var(--iui-size-l);
+  --_iui-button-min-height:var(--iui-component-height-large);
+  --_iui-button-padding-inline:var(--iui-size-s);
 }
 .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:linear-gradient(
-    rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
-    rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
-  ),
-    linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+  --_iui-button-background-color:var(--iui-color-background-subtle-primary);
 }
 .iui-button[data-iui-active=true]::after{
   content:"";
@@ -140,17 +144,14 @@
   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-text-color-placeholder);
-  --_iui-button-text-color:var(--iui-text-color-placeholder);
-}
-.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-active-stripe-color:var(--iui-color-foreground-5);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
 }
 .iui-button[data-iui-active=true][data-iui-variant=borderless]{
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
 }
-.iui-button[data-iui-active=true][data-iui-variant=borderless]:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+.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);
@@ -158,7 +159,7 @@
   --_iui-button-border-color:var(--_iui-button-background-color);
 }
 .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-overlay);
+  --_iui-button-background-color:var(--iui-color-background-primary-hover);
 }
 .iui-button[data-iui-variant=high-visibility]:focus{
   outline-color:var(--iui-color-foreground-accessory);
@@ -167,7 +168,7 @@
 }
 .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-text-color-placeholder);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
   outline-offset:-1px;
   outline-width:1px;
   outline-color:var(--iui-color-foreground-primary);
@@ -178,7 +179,7 @@
   --_iui-button-border-color:var(--_iui-button-background-color);
 }
 .iui-button[data-iui-variant=cta]:hover, .iui-button[data-iui-variant=cta]:active{
-  --_iui-button-background-color:var(--iui-color-background-positive-overlay);
+  --_iui-button-background-color:var(--iui-color-background-positive-hover);
 }
 .iui-button[data-iui-variant=cta]:focus{
   outline-color:var(--iui-color-foreground-accessory);
@@ -187,7 +188,7 @@
 }
 .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-text-color-placeholder);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
   outline-offset:-1px;
   outline-width:1px;
   outline-color:var(--iui-color-foreground-primary);
@@ -196,14 +197,14 @@
   --_iui-button-background-color:var(--iui-color-background-primary);
   --_iui-button-text-color:var(--iui-color-foreground-accessory);
   --_iui-button-border-color:var(--_iui-button-background-color);
-  border-radius:9999px;
-  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
+  border-radius:var(--iui-border-radius-round);
+  box-shadow:var(--iui-shadow-5);
   position:fixed;
-  bottom:11px;
-  right:16px;
+  bottom:var(--iui-size-s);
+  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-overlay);
+  --_iui-button-background-color:var(--iui-color-background-primary-hover);
 }
 .iui-button[data-iui-variant=idea]:focus{
   outline-color:var(--iui-color-foreground-accessory);
@@ -212,98 +213,70 @@
 }
 .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-text-color-placeholder);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
   outline-offset:-1px;
   outline-width:1px;
   outline-color:var(--iui-color-foreground-primary);
 }
 
 .iui-button-icon{
-  width:16px;
-  height:16px;
-  transition:fill 0.2s ease-out;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  transition:fill var(--iui-duration-1) ease-out;
   fill:currentColor;
-}
-.iui-button-icon:only-child{
-  margin-left:var(--_iui-button-icon-margin-x);
-  margin-right:var(--_iui-button-icon-margin-x);
+  margin-block:var(--iui-size-2xs);
 }
 
 .iui-button-dropdown{
-  --_iui-button-padding-inline:16px 8px;
+  padding-right:calc(var(--iui-size-xs) - 1px);
 }
 .iui-button-dropdown[data-iui-size=small]{
-  --_iui-button-padding-inline:8px 4px;
+  padding-right:calc(var(--iui-size-2xs) - 1px);
 }
 .iui-button-dropdown[data-iui-size=large]{
-  --_iui-button-padding-inline:24px 12px;
+  padding-right:calc(var(--iui-size-s) - 1px);
 }
 
 .iui-button-split{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  pointer-events:none;
-}
-.iui-button-split > *{
-  display:flex;
 }
-.iui-button-split > * > *{
-  pointer-events:all;
+.iui-button-split :where(.iui-button:first-child){
+  border-top-right-radius:0;
+  border-bottom-right-radius:0;
 }
-.iui-button-split > * .iui-input-container, .iui-button-split > * .iui-button, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)){
-  position:relative;
-  --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
+.iui-button-split :where(.iui-button:first-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:first-child)[data-iui-variant=cta]{
+  border-right-color:rgba(255, 255, 255, var(--iui-opacity-4));
 }
-.iui-button-split > * .iui-input-container:hover, .iui-button-split > * .iui-button:hover, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
+.iui-button-split :where(.iui-button:first-child):hover{
   z-index:1;
 }
-.iui-button-split > * .iui-input-container:disabled, .iui-button-split > * .iui-input-container.iui-disabled, .iui-button-split > * .iui-input-container[aria-disabled=true], .iui-button-split > * .iui-button:disabled, .iui-button-split > * .iui-button.iui-disabled, .iui-button-split > * .iui-button[aria-disabled=true], .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
+.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);
   z-index:-1;
 }
-.iui-button-split > * .iui-input-container:focus, .iui-button-split > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-split > * .iui-input-container:focus-within, .iui-button-split > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-split > * .iui-button:focus, .iui-button-split > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-split > * .iui-button:focus-within, .iui-button-split > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
-  z-index:2;
-}
-.iui-button-split > * .iui-input, .iui-button-split > * .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-radius:0;
-  transition-duration:0ms;
-}
-.iui-button-split > * .iui-input:hover, .iui-button-split > * .iui-input:focus, .iui-button-split > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-split > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
-  transition-duration:0.2s;
-}
-.iui-button-split > *:first-child .iui-input, .iui-button-split > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-top-left-radius:4px;
-  border-bottom-left-radius:4px;
-}
-.iui-button-split > *:last-child .iui-input, .iui-button-split > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-bottom-right-radius:4px;
-  border-top-right-radius:4px;
-}
-.iui-button-split > * + *{
+.iui-button-split :where(.iui-button:last-child){
+  --_iui-button-padding-inline:var(--iui-size-2xs);
+  border-top-left-radius:0;
+  border-bottom-left-radius:0;
   margin-left:-1px;
+  min-width:unset;
 }
-.iui-button-split > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-split > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-split > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
-  border-left-color:var(--iui-color-background-4);
-}
-.iui-button-split:hover{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-}
-.iui-button-split > *:last-child > .iui-button{
-  --_iui-button-padding-inline:4px;
+.iui-button-split :where(.iui-button:last-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:last-child)[data-iui-variant=cta]{
+  border-left-color:rgba(255, 255, 255, var(--iui-opacity-4));
 }
-.iui-button-split > *:last-child > [data-iui-size=small]{
-  --_iui-button-padding-inline:2px;
-}
-.iui-button-split > *:last-child > [data-iui-size=large]{
-  --_iui-button-padding-inline:8px;
+.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);
+  z-index:-1;
 }
-.iui-button-split > *:first-child > [data-iui-variant=high-visibility],
-.iui-button-split > *:first-child > [data-iui-variant=cta]{
-  border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
+.iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{
+  --_iui-button-padding-inline:var(--iui-size-3xs);
 }
-.iui-button-split > *:last-child > [data-iui-variant=high-visibility],
-.iui-button-split > *:last-child > [data-iui-variant=cta]{
-  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
+.iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{
+  --_iui-button-padding-inline:var(--iui-size-xs);
 }
 
 .iui-button-group{
@@ -320,7 +293,9 @@
 }
 .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
   position:relative;
-  --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
+  --_iui-button-active-stripe-inset:var(--iui-size-3xs)
+    var(--iui-size-3xs)
+    calc(100% - var(--iui-size-2xs));
 }
 .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
   z-index:1;
@@ -336,15 +311,15 @@
   transition-duration:0ms;
 }
 .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
-  transition-duration:0.2s;
+  transition-duration:var(--iui-duration-1);
 }
 .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-top-left-radius:4px;
-  border-bottom-left-radius:4px;
+  border-top-left-radius:var(--iui-border-radius-1);
+  border-bottom-left-radius:var(--iui-border-radius-1);
 }
 .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-bottom-right-radius:4px;
-  border-top-right-radius:4px;
+  border-bottom-right-radius:var(--iui-border-radius-1);
+  border-top-right-radius:var(--iui-border-radius-1);
 }
 .iui-button-group > * + *{
   margin-left:-1px;
@@ -369,7 +344,10 @@
 }
 .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
   position:relative;
-  --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px;
+  --_iui-button-active-stripe-inset:var(--iui-size-3xs)
+    calc(100% - var(--iui-size-2xs))
+    var(--iui-size-3xs)
+    var(--iui-size-3xs);
 }
 .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
   z-index:1;
@@ -385,15 +363,15 @@
   transition-duration:0ms;
 }
 .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
-  transition-duration:0.2s;
+  transition-duration:var(--iui-duration-1);
 }
 .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-top-left-radius:4px;
-  border-top-right-radius:4px;
+  border-top-left-radius:var(--iui-border-radius-1);
+  border-top-right-radius:var(--iui-border-radius-1);
 }
 .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-bottom-right-radius:4px;
-  border-bottom-left-radius:4px;
+  border-bottom-right-radius:var(--iui-border-radius-1);
+  border-bottom-left-radius:var(--iui-border-radius-1);
 }
 .iui-button-group-vertical > * + *{
   margin-top:-1px;

package/css/carousel.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-carousel{
   overflow:hidden;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-carousel:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -19,7 +19,7 @@
 
 .iui-carousel-slider{
   display:flex;
-  gap:8px;
+  gap:var(--iui-size-xs);
   list-style:none;
   margin:0;
   padding:0;
@@ -41,8 +41,8 @@
 .iui-carousel-navigation{
   display:flex;
   align-items:center;
-  height:33px;
-  border-top:2px solid var(--iui-color-background-4);
+  height:calc(var(--iui-size-s) * 3);
+  border-top:var(--iui-size-3xs) solid var(--iui-color-background-4);
 }
 .iui-carousel-navigation-left, .iui-carousel-navigation-right{
   display:flex;
@@ -59,8 +59,8 @@
   border:none;
   vertical-align:baseline;
   flex:2;
-  max-width:256px;
-  border-radius:4px;
+  max-width:calc(var(--iui-size-2xl) * 4);
+  border-radius:var(--iui-border-radius-1);
   white-space:nowrap;
   overflow-x:auto;
   overflow-x:overlay;
@@ -80,9 +80,10 @@
   display:none;
 }
 .iui-carousel-navigation-dot{
-  --_iui-button-gap:4px;
-  --_iui-button-height:27px;
-  --_iui-button-padding-inline:8px;
+  --_iui-button-gap:var(--iui-size-2xs);
+  --_iui-button-padding-block:0;
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-min-height:var(--iui-component-height-small);
   background-color:transparent;
   border:none;
   cursor:pointer;
@@ -91,16 +92,17 @@
   padding-right:var(--_iui-button-padding-inline);
 }
 .iui-carousel-navigation-dot:hover::after{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  background-color:var(--iui-color-foreground-3);
 }
 .iui-carousel-navigation-dot::after{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-s);
+  height:var(--iui-size-s);
   content:"";
-  display:block;
-  width:12px;
-  height:12px;
   border-radius:50%;
   border:1px solid transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  background-color:var(--iui-color-foreground-4);
   box-shadow:inset 0 0 0 0 var(--iui-color-background-1);
 }
 .iui-carousel-navigation-dot.iui-first::after{
@@ -116,7 +118,7 @@
 }
 @media (forced-colors: active){
   .iui-carousel-navigation-dot.iui-active::after{
-    border-width:6px;
+    border-width:var(--iui-size-xs);
   }
 }
 .iui-carousel-navigation-right{

package/css/checkbox.css

@@ -7,19 +7,20 @@
   --_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:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  --_iui-checkbox-border-color:var(--iui-color-foreground-4);
   --_iui-checkbox-background-color:var(--iui-color-background-1);
   --_iui-checkbox-mask-image:initial;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   -webkit-appearance:none;
      -moz-appearance:none;
           appearance:none;
   margin:0;
-  width:16px;
-  height:16px;
   position:relative;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   background-color:var(--_iui-checkbox-background-color);
-  flex-shrink:0;
   cursor:pointer;
 }
 .iui-checkbox-wrapper{
@@ -29,7 +30,7 @@
   vertical-align:baseline;
   display:flex;
   align-items:center;
-  font-size:14px;
+  font-size:var(--iui-font-size-1);
   width:-webkit-fit-content;
   width:-moz-fit-content;
   width:fit-content;
@@ -39,12 +40,12 @@
           user-select:none;
   position:relative;
   cursor:pointer;
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-  gap:8px;
+  color:var(--iui-color-foreground-2);
+  gap:var(--iui-size-xs);
 }
 .iui-checkbox-wrapper.iui-loading{
   cursor:wait;
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-checkbox-wrapper > .iui-checkbox-label,
 .iui-checkbox-wrapper > .iui-radio-label{
@@ -53,17 +54,19 @@
 }
 .iui-checkbox-wrapper > .iui-checkbox-label svg,
 .iui-checkbox-wrapper > .iui-radio-label svg{
-  width:16px;
-  height:16px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   vertical-align:middle;
   fill:currentColor;
 }
 .iui-checkbox-wrapper.iui-disabled{
   cursor:not-allowed;
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-checkbox-wrapper.iui-disabled svg{
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-color-foreground-5);
 }
 .iui-checkbox-wrapper.iui-positive{
   color:var(--iui-color-foreground-positive);
@@ -78,7 +81,7 @@
   content:"";
   position:absolute;
   inset:0;
-  transition:border-color 0.2s ease-out;
+  transition:border-color var(--iui-duration-1) ease-out;
   border-radius:inherit;
   border-style:solid;
   border-width:1px;
@@ -96,15 +99,15 @@
   --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
 }
 .iui-checkbox:checked{
-  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  --_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:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  --_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:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  --_iui-checkbox-border-color:var(--iui-color-foreground-2);
 }
 .iui-checkbox:focus-visible{
   outline:2px solid var(--iui-color-foreground-primary);
@@ -117,7 +120,7 @@
   }
 }
 .iui-checkbox:disabled{
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
   --_iui-checkbox-border-color:var(--iui-color-background-border);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
@@ -130,14 +133,14 @@
   --_iui-checkbox-background-color:transparent;
 }
 .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
+  --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
 }
 .iui-checkbox.iui-checkbox-visibility:where(:hover){
   --_iui-checkbox-border-color:transparent;
-  --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  --_iui-checkbox-background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-checkbox.iui-checkbox-visibility:where(:disabled){
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
 }
 .iui-checkbox.iui-loading{