winduum 0.6.0 → 0.7.0-next.1

package/src/ui/btn/bordered.css

@@ -1,18 +1,19 @@
 .ui-btn {
   &:where(.bordered) {
     --tw-border-opacity: 0.3;
+    --tw-border-space: var(--space);
 
-    border: var(--ui-btn-border-width, 1px) solid color-mix(in var(--space), var(--color-accent) var(--ui-btn-border-opacity, calc(var(--tw-border-opacity) * 100%)), transparent);
+    border: var(--ui-btn-border-width, 1px) solid color-mix(in var(--tw-border-space), var(--color-accent) calc(var(--tw-border-opacity) * 100%), transparent);
     padding-inline: calc(var(--ui-btn-px) - var(--ui-btn-border-width, 1px));
   }
 
   &:is(.bordered) {
-    --color-current: var(--color-accent);
     --ui-btn-hover-bg-mix: transparent;
-    --ui-btn-hover-bg-opacity: 10%;
+    --ui-btn-hover-bg-opacity: 0.1;
     --ui-btn-active-bg-mix: transparent;
-    --ui-btn-active-bg-opacity: 20%;
+    --ui-btn-active-bg-opacity: 0.2;
     --ui-btn-focus-outline-offset: -2px;
-    --ui-btn-bg-opacity: 0%;
+    --color-accent-foreground: var(--color-accent);
+    --tw-bg-opacity: 0;
   }
 }

package/src/ui/btn/default.css

@@ -1,32 +1,30 @@
 .ui-btn {
   --tw-bg-opacity: 1;
   --tw-text-opacity: 1;
-  --color-current: var(--color-accent-foreground);
-  --ui-btn-bg: color-mix(in var(--space), var(--color-accent) var(--ui-btn-bg-opacity), var(--ui-btn-bg-mix, transparent));
-  --ui-btn-bg-opacity: calc(var(--tw-bg-opacity) * 100%);
-  --ui-btn-color: color-mix(in var(--space), var(--color-current) var(--ui-btn-color-opacity), transparent);
-  --ui-btn-color-opacity: calc(var(--tw-text-opacity) * 100%);
+  --tw-bg-mix: transparent;
+  --tw-bg-space: var(--space);
+  --tw-text-space: var(--space);
 
-  width: var(--ui-btn-width, auto);
-  height: var(--ui-btn-height);
+  inline-size: var(--ui-btn-width);
+  block-size: var(--ui-btn-height);
   padding: var(--ui-btn-py) var(--ui-btn-px);
   border-radius: var(--ui-btn-border-radius, var(--rounded));
   font-size: var(--ui-btn-font-size, var(--text-sm));
   font-weight: var(--ui-btn-font-weight, var(--font-medium));
   letter-spacing: var(--ui-btn-letter-spacing, 0);
-  background-color: var(--ui-btn-bg);
-  color: var(--ui-btn-color);
+  background-color: color-mix(in var(--tw-bg-space), var(--ui-btn-bg, var(--color-accent)) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
+  color: color-mix(in var(--tw-text-space), var(--ui-btn-color, var(--color-accent-foreground)) calc(var(--tw-text-opacity) * 100%), transparent);
   gap: var(--ui-btn-gap, var(--spacing-sm));
   outline: var(--ui-btn-outline-width, 2px) solid transparent;
   outline-offset: 0;
   user-select: none;
-  overflow: hidden;
+  overflow: clip;
   display: inline-flex;
   text-align: center;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
   position: relative;
+  line-height: 1;
   flex-shrink: 0;
   z-index: 0;
 
@@ -38,6 +36,14 @@
     --ui-btn-hover-bg-mix: var(--color-body-foreground);
   }
 
+  &:where(.accent-light) {
+    --ui-btn-hover-bg-mix: var(--color-light-foreground);
+  }
+
+  &:where(.accent-dark) {
+    --ui-btn-hover-bg-mix: var(--color-dark-foreground);
+  }
+
   &:where(input)::after {
     content: attr(aria-label);
   }

package/src/ui/btn/ghosted.css

@@ -1,9 +1,9 @@
 .ui-btn:is(.ghosted) {
   --ui-btn-hover-bg-mix: transparent;
-  --ui-btn-hover-bg-opacity: 10%;
+  --ui-btn-hover-bg-opacity: 0.1;
   --ui-btn-active-bg-mix: transparent;
-  --ui-btn-active-bg-opacity: 20%;
+  --ui-btn-active-bg-opacity: 0.2;
   --ui-btn-focus-outline-offset: -2px;
-  --ui-btn-bg-opacity: 0%;
-  --color-current: var(--color-accent);
+  --color-accent-foreground: var(--color-accent);
+  --tw-bg-opacity: 0%;
 }

package/src/ui/btn/gradient-bordered.css

@@ -1,9 +1,11 @@
 .ui-btn {
   &:where(.gradient-bordered) {
     &::before {
+      --tw-bg-space: var(--space);
+
       content: "";
       position: absolute;
-      background-color: color-mix(in var(--space), var(--color-body) calc(100% - var(--ui-btn-bg-opacity)), transparent);
+      background-color: color-mix(in var(--tw-bg-space), var(--color-body) calc(100% - var(--tw-bg-opacity) * 100%), transparent);
       inset: var(--ui-btn-border-width);
       border-radius: calc(var(--ui-btn-border-radius, var(--rounded)) / 1.25);
       z-index: -1;
@@ -12,7 +14,7 @@
 
     &:where(.hover-fill) {
       &::before {
-        background-color: color-mix(in var(--space), var(--color-body) var(--ui-btn-bg-opacity), transparent);
+        background-color: color-mix(in var(--tw-bg-space), var(--color-body) calc(var(--tw-bg-opacity) * 100%), transparent);
       }
     }
   }
@@ -20,15 +22,15 @@
   &:is(.gradient-bordered) {
     --ui-btn-border-width: 2px;
     --ui-btn-hover-bg-mix: transparent;
-    --ui-btn-hover-bg-opacity: 10%;
+    --ui-btn-hover-bg-opacity: 0.1;
     --ui-btn-active-bg-mix: transparent;
-    --ui-btn-active-bg-opacity: 20%;
+    --ui-btn-active-bg-opacity: 0.2;
     --ui-btn-focus-outline-offset: 0;
-    --ui-btn-bg-opacity: 0%;
-    --color-current: var(--color-main);
+    --color-accent-foreground: var(--color-main);
+    --tw-bg-opacity: 0;
 
     &:is(.hover-fill) {
-      --ui-btn-bg-opacity: 100%;
+      --tw-bg-opacity: 1;
     }
   }
 }

package/src/ui/btn/gradient.css

@@ -1,9 +1,11 @@
 .ui-btn:where(.gradient) {
   &::before {
+    --tw-bg-space: var(--space);
+
     content: "";
     position: absolute;
     inset: 0;
-    background-color: color-mix(in var(--space), var(--ui-btn-bg-mix) calc(100% - var(--ui-btn-bg-opacity)), transparent);
+    background-color: color-mix(in var(--tw-bg-space), var(--tw-bg-mix) calc(100% - var(--tw-bg-opacity) * 100%), transparent);
     z-index: -1;
     transition: var(--transition-background);
   }

package/src/ui/btn/hover-fill.css

@@ -1,8 +1,8 @@
 .ui-btn:is(.hover-fill) {
-  --ui-btn-hover-bg-mix: black;
-  --ui-btn-hover-bg-opacity: 100%;
-  --ui-btn-active-bg-mix: black;
-  --ui-btn-active-bg-opacity: 90%;
+  --ui-btn-hover-bg-mix: var(--color-dark);
+  --ui-btn-hover-bg-opacity: 1;
+  --ui-btn-active-bg-mix: var(--color-dark);
+  --ui-btn-active-bg-opacity: 0.9;
   --ui-btn-hover-color: var(--color-light);
   --ui-btn-active-color: var(--color-light);
 }

package/src/ui/btn/interactive.css

@@ -1,32 +1,40 @@
 .ui-btn {
+  --tw-outline-space: var(--space);
+  --tw-outline-opacity: 0;
+  --tw-outline-mix: transparent;
+
   transition-property: var(--transition);
   transition-timing-function: var(--ease-in-out);
   transition-duration: var(--duration);
+  outline-color: color-mix(in var(--tw-outline-space), var(--color-accent) calc(var(--tw-outline-opacity) * 100%), var(--tw-outline-mix));
+  outline-offset: var(--ui-btn-outline-offset, 0);
 
   &:is([href], button, [role="button"], input) {
+    cursor: var(--cursor, pointer);
+
     &:disabled {
-      opacity: var(--ui-btn-disabled-opacity, 0.7);
+      opacity: var(--ui-btn-disabled-opacity, 0.75);
       cursor: not-allowed;
     }
 
     &:not(:disabled) {
       &:hover {
         @media (hover: hover) and (pointer: fine) {
-          --ui-btn-color: var(--ui-btn-hover-color, var(--color-current));
-          --ui-btn-bg-mix: var(--ui-btn-hover-bg-mix, black);
-          --ui-btn-bg-opacity: var(--ui-btn-hover-bg-opacity, 80%);
+          --ui-btn-color: var(--ui-btn-hover-color, var(--color-accent-foreground));
+          --tw-bg-mix: var(--ui-btn-hover-bg-mix, var(--color-dark));
+          --tw-bg-opacity: var(--ui-btn-hover-bg-opacity, 0.8);
         }
       }
 
       &:focus {
-        outline-color: color-mix(in var(--space), var(--color-accent) var(--ui-btn-focus-outline-opacity, 50%), var(--ui-btn-focus-outline-mix, transparent));
-        outline-offset: var(--ui-btn-focus-outline-offset, 2px);
+        --ui-btn-outline-offset: var(--ui-btn-focus-outline-offset, 2px);
+        --tw-outline-opacity: 0.5;
       }
 
       &:is(:active, :checked, .active) {
-        --ui-btn-color: var(--ui-btn-active-color, var(--color-current));
-        --ui-btn-bg-mix: var(--ui-btn-active-bg-mix, black);
-        --ui-btn-bg-opacity: var(--ui-btn-active-bg-opacity, 90%);
+        --ui-btn-color: var(--ui-btn-active-color, var(--color-accent-foreground));
+        --tw-bg-mix: var(--ui-btn-active-bg-mix, var(--color-dark));
+        --tw-bg-opacity: var(--ui-btn-active-bg-opacity, 0.9);
       }
     }
   }

package/src/ui/btn/loading.css

@@ -14,7 +14,7 @@
     width: var(--ui-btn-loading-width);
     height: var(--ui-btn-loading-width);
     content: "";
-    border: var(--ui-btn-loading-border-width) solid var(--color-current);
+    border: var(--ui-btn-loading-border-width) solid var(--color-accent-foreground);
     border-right-color: transparent;
     border-radius: 50%;
     animation: spin 0.45s infinite linear;

package/src/ui/btn/muted.css

@@ -1,9 +1,9 @@
 .ui-btn:is(.muted) {
-  --color-current: var(--color-accent);
   --ui-btn-hover-bg-mix: transparent;
   --ui-btn-active-bg-mix: transparent;
-  --ui-btn-active-bg-opacity: 20%;
+  --ui-btn-active-bg-opacity: 0.2;
   --ui-btn-focus-outline-offset: -2px;
-  --ui-btn-hover-bg-opacity: 30%;
-  --ui-btn-bg-opacity: 10%;
+  --ui-btn-hover-bg-opacity: 0.3;
+  --color-accent-foreground: var(--color-accent);
+  --tw-bg-opacity: 0.1;
 }

package/src/ui/btn/raised.css

@@ -1,12 +1,8 @@
-.ui-btn {
-  &:where(.raised) {
-    border: var(--ui-btn-border-width) solid color-mix(in var(--space), var(--color-accent) var(--ui-btn-border-opacity), var(--color-current));
-    padding-inline: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
-  }
+.ui-btn:where(.raised) {
+  --ui-btn-border-width: 2px;
+  --tw-border-opacity: 0.85;
+  --tw-border-space: var(--space);
 
-  &:is(.raised) {
-    --tw-border-opacity: 0.85;
-    --ui-btn-border-width: 2px;
-    --ui-btn-border-opacity: calc(var(--tw-border-opacity) * 100%);
-  }
+  border: var(--ui-btn-border-width) solid color-mix(in var(--tw-border-space), var(--color-accent) calc(var(--tw-border-opacity) * 100%), var(--color-accent-foreground));
+  padding-inline: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
 }

package/src/ui/check/default.css

@@ -1,12 +1,12 @@
 .ui-check {
   --ui-check-checked-bg: var(--color-accent);
 
-  display: inline-flex;
-  gap: var(--ui-check-gap, var(--spacing-md));
   font-weight: var(--ui-check-font-weight, var(--font-normal));
   font-size: var(--ui-check-font-size, var(--text-sm));
-  line-height: var(--ui-check-line-height, calc(1em + var(--ui-check-line-height-ratio, 0.25lh)));
+  line-height: var(--ui-check-line-height, calc(1em + 0.25lh));
   letter-spacing: var(--ui-check-letter-spacing, inherit);
+  gap: var(--ui-check-gap, var(--spacing-md));
+  display: inline-flex;
   text-wrap: balance;
 
   &:has([type="radio"]) {
@@ -20,33 +20,47 @@
   }
 
   & :where(input) {
+    --color-accent: currentColor;
+    --tw-bg-space: var(--space);
+    --tw-border-space: var(--space);
     --tw-border-opacity: 0.2;
+    --tw-border-mix: transparent;
+    --tw-outline-opacity: 0;
+    --tw-outline-space: var(--space);
+    --tw-bg-opacity: 0;
+    --tw-bg-mix: transparent;
 
     width: var(--ui-check-size);
     height: var(--ui-check-size);
-    background-color: var(--ui-check-bg, color-mix(in var(--space), var(--color-current) var(--ui-check-bg-opacity, 0%), var(--ui-check-bg-mix, transparent)));
+    border-radius: var(--ui-check-border-radius, var(--rounded-md));
+    background-color: color-mix(in var(--tw-bg-space), var(--ui-check-bg, var(--color-accent)) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
     border:
       var(--ui-check-border-width, 1px) solid
       color-mix(
-        in var(--space),
-        var(--ui-check-border-color, var(--color-current)) var(--ui-check-border-opacity, calc(var(--tw-border-opacity) * 100%)),
-        var(--ui-check-border-mix, transparent)
+        in var(--tw-border-space),
+        var(--ui-check-border-color, var(--color-accent)) calc(var(--tw-border-opacity) * 100%),
+        var(--tw-border-mix, transparent)
       );
-    border-radius: var(--ui-check-radius, var(--rounded-md));
-    outline: var(--ui-check-outline-width, 3px) solid transparent;
+    outline:
+      var(--ui-check-outline-width, 3px) solid
+      color-mix(
+        in var(--tw-outline-space),
+        var(--ui-check-checked-bg) calc(var(--tw-outline-opacity) * 100%),
+        transparent
+      );
+    outline-offset: var(--ui-check-outline-offset, 0);
     transition-property: var(--transition);
     transition-timing-function: var(--ease-in-out);
     transition-duration: var(--duration);
-    outline-offset: 0;
-    flex-shrink: 0;
     display: flex;
+    flex-shrink: 0;
 
     &::before {
       width: var(--ui-check-icon-size);
       height: var(--ui-check-icon-size);
       color: var(--color-accent-foreground);
       mask: var(--ui-check-icon, var(--mask-check));
-      transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
+      transition: inherit;
       content: "";
       background-color: currentColor;
       opacity: 0;
@@ -64,35 +78,35 @@
 
     &:enabled {
       &:is(:hover, :focus-visible) {
-        --color-current: var(--ui-check-checked-bg);
         --ui-check-border-color: var(--ui-check-checked-bg);
-        --ui-check-border-opacity: 75%;
-        --ui-check-bg-opacity: 10%;
+        --color-accent: var(--ui-check-checked-bg);
+        --tw-border-opacity: 0.75;
+        --tw-bg-opacity: 0.1;
       }
 
       &:focus {
         --ui-check-border-color: var(--ui-check-checked-bg);
-        --ui-check-border-opacity: 75%;
-
-        outline-color: color-mix(in var(--space), var(--ui-check-checked-bg) var(--ui-check-outline-opacity, 20%), transparent);
-        outline-offset: var(--ui-check-outline-offset, 0);
+        --ui-check-outline-offset: var(--ui-check-focus-outline-offset, 0);
+        --tw-border-opacity: 0.75;
+        --tw-outline-opacity: 0.2;
       }
     }
 
     &:disabled {
-      --ui-check-bg-opacity: 15%;
+      --tw-bg-opacity: 0.15;
 
       cursor: not-allowed;
       opacity: var(--ui-check-disabled-opacity, 0.5);
     }
 
-    &[type="checkbox"]:indeterminate {
+    &:where([type="checkbox"]):indeterminate {
       --ui-check-icon: var(--mask-indeterminate);
     }
 
     &:is(:checked, [type="checkbox"]:indeterminate) {
-      --ui-check-border-opacity: 0%;
       --ui-check-bg: var(--ui-check-checked-bg);
+      --tw-bg-opacity: 1;
+      --tw-border-opacity: 0;
 
       &::before {
         opacity: 1;
@@ -102,9 +116,9 @@
   }
 
   &.invalid, .validated & :where(input):invalid {
-    --color-current: var(--color-error);
     --ui-check-border-color: var(--color-error);
     --ui-check-checked-bg: var(--color-error);
-    --ui-check-border-opacity: 100%;
+    --color-accent-foreground: var(--color-error);
+    --tw-border-opacity: 1;
   }
 }

package/src/ui/control/default.css

@@ -1,16 +1,37 @@
 .ui-control {
+  --tw-border-opacity: 0.15;
+  --tw-border-space: var(--space);
+  --tw-border-mix: transparent;
+  --tw-bg-space: var(--space);
+  --tw-bg-opacity: 1;
+  --tw-bg-mix: transparent;
+  --tw-outline-opacity: 0;
+  --tw-outline-space: var(--space);
+
   display: grid;
-  height: var(--ui-control-height);
+  block-size: var(--ui-control-height);
   font-family: var(--ui-contro-font-family, var(--font-primary));
   font-weight: var(--ui-control-font-weight, var(--font-medium));
   font-size: var(--ui-control-font-size, var(--text-sm));
   letter-spacing: var(--ui-control-letter-spacing, inherit);
-  background-color: var(--ui-control-bg, transparent);
+  background-color: color-mix(in var(--tw-bg-space), var(--ui-control-bg, transparent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
   color: var(--ui-control-color, currentColor);
   border-radius: var(--ui-control-border-radius, var(--rounded));
-  border: var(--ui-control-border-width) solid color-mix(in var(--space), var(--ui-control-border-color, var(--color-current)) var(--ui-control-border-opacity, 15%), var(--ui-control-border-mix, transparent));
-  outline: var(--ui-control-outline-width, 3px) solid transparent;
-  outline-offset: 0;
+  border:
+    var(--ui-control-border-width) solid
+    color-mix(
+      in var(--tw-border-space),
+      var(--ui-control-border-color, currentColor) calc(var(--tw-border-opacity) * 100%),
+      var(--tw-border-mix)
+    );
+  outline:
+    var(--ui-control-outline-width, 3px) solid
+    color-mix(
+      in var(--tw-outline-space),
+      var(--color-accent) calc(var(--tw-outline-opacity) * 100%),
+      transparent
+    );
+  outline-offset: var(--ui-control-outline-offset, 0);
   transition-property: var(--transition);
   transition-timing-function: var(--ease-in-out);
   transition-duration: var(--duration);
@@ -34,15 +55,14 @@
   & > :where(input, textarea, select) {
     padding-block: var(--ui-control-py);
     padding-inline: calc(var(--ui-control-px) + var(--ui-control-ps, 0rem)) calc(var(--ui-control-px) + var(--ui-control-pe, 0rem));
+    grid-area: c-control;
     text-overflow: ellipsis;
     overflow: clip;
-    grid-area: c-control;
     align-self: stretch;
     align-items: center;
 
     &:disabled {
       cursor: not-allowed;
-      background-color: color-mix(in var(--space), var(--color-current) var(--ui-control-disabled-opacity, 5%), var(--ui-control-bg, transparent));
     }
   }
 
@@ -54,24 +74,28 @@
   }
 
   & > :where(textarea) {
-    min-height: var(--ui-control-height-textarea);
+    min-block-size: var(--ui-control-height-textarea);
     resize: vertical;
   }
 
   &:focus-within {
-    --ui-control-border-opacity: 100%;
     --ui-control-border-color: var(--color-accent);
+    --ui-control-outline-offset: var(--ui-control-focus-outline-offset, 0);
+    --tw-border-opacity: 1;
+    --tw-outline-opacity: 0.2;
+  }
 
-    outline-color: color-mix(in var(--space), var(--color-accent) var(--ui-control-outline-opacity, 20%), transparent);
-    outline-offset: var(--ui-control-outline-offset, 0);
+  &.disabled, &:has(:disabled) {
+    --ui-control-bg: currentColor;
+    --tw-bg-opacity: var(--ui-control-disabled-opacity, 0.05);
   }
 
   &.invalid, .validated &:has(:invalid) {
-    --ui-control-border-opacity: 100%;
     --ui-control-border-color: var(--color-error);
     --ui-control-color: var(--color-error);
+    --ui-control-bg: var(--color-error);
     --color-accent: var(--color-error);
-
-    background-color: color-mix(in var(--space), var(--color-error) var(--ui-control-invalid-bg-opacity, 10%), var(--ui-control-bg));
+    --tw-border-opacity: 1;
+    --tw-bg-opacity: var(--ui-control-invalid-bg-opacity, 0.1);
   }
 }

package/src/ui/control/file.css

@@ -1,22 +1,25 @@
-.ui-control:has([type="file"]) {
+.ui-control:where(:has([type="file"])) {
   overflow: clip;
 
   > :where([type="file"]) {
-    &:is(:hover, :focus) {
-      --ui-control-file-selector-button-bg-opacity: 20%;
-    }
+    --color-accent: currentColor;
+    --tw-bg-opacity: 0.15;
 
     &::file-selector-button {
       all: unset;
-      background-color: color-mix(in var(--space), var(--color-current) var(--ui-control-file-selector-button-bg-opacity, 15%), transparent);
-      height: calc(var(--ui-control-height) - var(--ui-control-border-width) * 2);
+      background-color: color-mix(in var(--tw-bg-space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent);
+      block-size: calc(var(--ui-control-height) - var(--ui-control-border-width) * 2);
       padding-inline: var(--ui-control-px);
       margin-inline: calc(var(--ui-control-px) * -1) var(--ui-control-px);
       margin-block-start: calc(var(--ui-control-py) * -1);
-      border-top-right-radius: var(--ui-control-border-radius, var(--rounded));
-      border-bottom-right-radius: var(--ui-control-border-radius, var(--rounded));
+      border-start-end-radius: var(--ui-control-border-radius, var(--rounded));
+      border-end-end-radius: var(--ui-control-border-radius, var(--rounded));
       transition: var(--transition-background);
       cursor: pointer;
     }
+
+    &:is(:hover, :focus) {
+      --tw-bg-opacity: 0.2;
+    }
   }
 }

package/src/ui/control/select.css

@@ -12,11 +12,11 @@
   &::after {
     width: var(--ui-control-select-icon-size);
     height: var(--ui-control-select-icon-size);
-    margin-inline: auto var(--ui-control-select-icon-me);
     mask: var(--mask-angle-down);
+    margin-inline: auto var(--ui-control-select-icon-me);
+    grid-area: c-control-p;
     background-color: currentColor;
     pointer-events: none;
-    grid-area: c-control-p;
     align-self: center;
     content: "";
   }

package/src/ui/group/default.css

@@ -1,8 +1,4 @@
 .ui-group {
-  --ui-control-border-mix: var(--color-body-primary);
-  --ui-btn-focus-outline-mix: var(--color-body-primary);
-  --ui-btn-focus-outline-offset: 0;
-
   display: flex;
   border-radius: var(--rounded);
 
@@ -20,6 +16,15 @@
   & > :where(*) {
     border-radius: inherit;
 
+    &:is(.ui-control) {
+      --tw-border-mix: var(--color-body-primary);
+      --tw-outline-mix: var(--color-body-primary);
+    }
+
+    &:is(.ui-btn) {
+      --ui-btn-focus-outline-offset: 0;
+    }
+
     &:focus-within {
       z-index: 1;
     }

package/src/ui/info.css

@@ -2,7 +2,7 @@
   font-family: var(--ui-info-font-family, inherit);
   font-weight: var(--ui-info-font-weight, inherit);
   font-size: var(--ui-info-font-size, var(--text-xs));
-  line-height: var(--ui-info-line-height, calc(1em + var(--ui-info-line-height-ratio, 0.15lh)));
+  line-height: var(--ui-info-line-height, calc(1em + 0.15lh));
   letter-spacing: var(--ui-info-letter-spacing, inherit);
   text-wrap: balance;
 }

package/src/ui/link/interactive.css

@@ -1,17 +1,15 @@
 .ui-link {
-  --color-accent: var(--color-current);
   --tw-text-opacity: 1;
   --tw-text-space: var(--space);
-  --tw-text-mix: transparent;
 
-  &:is([href], button, [role="button"]) {
-    &:not(:disabled) {
-      color: color-mix(in var(--tw-text-space), var(--color-accent) calc(var(--tw-text-opacity) * 100%), var(--tw-text-mix));
-      transition: all var(--duration) var(--ease-in-out);
+  &:where([href], button, [role="button"]) {
+    color: color-mix(in var(--tw-text-space), currentColor calc(var(--tw-text-opacity) * 100%), transparent);
+    transition: all var(--duration) var(--ease-in-out);
 
+    &:not(:disabled) {
       &:hover {
         @media (hover: hover) and (pointer: fine) {
-          --tw-text-opacity: 0.75;
+          --tw-text-opacity: 0.35;
         }
       }
 

package/src/ui/notice/default.css

@@ -1,17 +1,26 @@
 .ui-notice {
-  --color-current: var(--color-accent);
+  --tw-bg-opacity: 0.1;
+  --tw-bg-space: var(--space);
+  --tw-outline-opacity: 0.1;
+  --tw-outline-space: var(--space);
 
   padding: var(--ui-notice-py, 1.25rem) var(--ui-notice-px, 1.5rem);
   font-size: var(--ui-notice-font-size, var(--text-sm));
   border-radius: var(--rounded);
-  background-color: color-mix(in var(--space), var(--color-accent) 10%, transparent);
-  outline: var(--ui-notice-outline-width, 1px) solid color-mix(in var(--space), var(--color-accent) var(--ui-notice-outline-opacity, 10%), transparent);
-  outline-offset: var(--ui-notice-outline-offset, calc(var(--ui-notice-outline-width, 1px) * -1));
+  background-color: color-mix(in var(--tw-bg-space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent);
   color: var(--color-accent);
-  gap: var(--ui-notice-gap, var(--spacing-xl));
-  position: relative;
+  outline:
+    var(--ui-notice-outline-width, 1px) solid
+    color-mix(
+      in var(--tw-outline-space),
+      var(--color-accent) calc(var(--tw-outline-opacity) * 100%),
+      transparent
+    );
+  outline-offset: var(--ui-notice-outline-offset, calc(var(--ui-notice-outline-width, 1px) * -1));
+  gap: var(--spacing-xl);
   display: flex;
   flex-direction: column;
+  position: relative;
   text-wrap: balance;
 
   & :where(hr) {

package/src/ui/progress/default.css

@@ -1,12 +1,11 @@
 .ui-progress {
-  --tw-bg-opacity: 1;
-  --ui-progress-bg: color-mix(in var(--space), var(--color-accent) var(--ui-progress-bg-opacity), var(--color-body));
-  --ui-progress-bg-opacity: calc(var(--tw-bg-opacity) * 10%);
+  --tw-bg-opacity: 0.1;
+  --tw-bg-space: var(--space);
 
-  height: var(--ui-progress-height, 1rem);
+  inline-size: 100%;
+  block-size: var(--ui-progress-height, 1rem);
   border-radius: var(--ui-progress-border-radius, var(--rounded-full));
-  background-color: var(--ui-progress-bg);
-  width: 100%;
+  background-color: color-mix(in var(--tw-bg-space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--color-body));
   overflow: clip;
 
   &::-webkit-progress-bar {
@@ -23,7 +22,7 @@
 
   &:indeterminate {
     animation: 1.5s linear 0s forwards infinite move-indeterminate;
-    background-image: linear-gradient(to right, var(--color-accent) 30%, var(--ui-progress-bg) 30%);
+    background-image: linear-gradient(to right, var(--color-accent) 30%, transparent 30%);
     background-position: top left;
     background-repeat: no-repeat;
     background-size: 150% 150%;