winduum 0.2.0-beta.3 → 0.2.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "0.2.0-beta.3",
+  "version": "0.2.0-beta.4",
   "type": "module",
   "main": "utils/tailwind.cjs",
   "module": "utils/tailwind.js",

package/src/base/theme/default.css

@@ -8,13 +8,13 @@
   --color-base: var(--color-base-primary);
   --color-base-mix: white;
   --color-base-primary: rgb(var(--color-base-rgb));
-  --color-base-secondary: color-mixe(in sRGB, var(--color-base) 75%, var(--color-base-mix));
-  --color-base-tertiary: color-mixe(in sRGB, var(--color-base) 50%, var(--color-base-mix));
+  --color-base-secondary: color-mix(in sRGB, var(--color-base) 75%, var(--color-base-mix));
+  --color-base-tertiary: color-mix(in sRGB, var(--color-base) 50%, var(--color-base-mix));
   --color-body: var(--color-body-primary);
   --color-body-mix: black;
   --color-body-primary: rgb(var(--color-body-rgb));
-  --color-body-secondary: color-mixe(in sRGB, var(--color-body) 95%, var(--color-body-mix));
-  --color-body-tertiary: color-mixe(in sRGB, var(--color-body) 90%, var(--color-body-mix));
+  --color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-mix));
+  --color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-mix));
   --color-light: rgb(var(--color-light-rgb));
   --color-dark: rgb(var(--color-dark-rgb));
   --color-accent: var(--color-primary);

package/src/libraries/dialog-rgb.css

@@ -0,0 +1,3 @@
+.lib-dialog {
+  --lib-ripple-bg: rgb(var(--color-dark-rgb) / var(--tw-bg-opacity, 0.8));
+}

package/src/libraries/dialog.css

@@ -1,5 +1,5 @@
 .lib-dialog {
-  --lib-ripple-bg: rgb(var(--color-dark-rgb) / var(--tw-bg-opacity, 0.8));
+  --lib-ripple-bg: color-mix(in sRGB, var(--color-dark) calc(var(--tw-bg-opacity, 0.8) * 100%), transparent);
   --lib-dialog-py: 2rem;
   --lib-dialog-px: 1.5rem;
   --lib-dialog-animation-duration: var(--transition-duration);

package/src/libraries/ripple-rgb.css

@@ -0,0 +1,3 @@
+.lib-ripple {
+  --lib-ripple-bg: rgb(var(--color-body-rgb) / var(--tw-bg-opacity, 0.4));
+}

package/src/libraries/ripple.css

@@ -1,6 +1,6 @@
 .lib-ripple {
   --lib-ripple-animation-duration: 1s;
-  --lib-ripple-bg: rgb(var(--color-body-rgb) / var(--tw-bg-opacity, 0.4));
+  --lib-ripple-bg: color-mix(in sRGB, var(--color-body) calc(var(--tw-bg-opacity, 0.4) * 100%), transparent);
 
   position: absolute;
   background: var(--lib-ripple-bg);

package/src/main-rgb.css

@@ -1,6 +1,11 @@
 @import "ui/btn/default-rgb.css";
 @import "ui/btn/bordered-rgb.css";
 @import "ui/btn/gradient-bordered-rgb.css";
+@import "ui/badge/default-rgb.css";
+@import "ui/badge/bordered-rgb.css";
 @import "ui/control/default-rgb.css";
+@import "ui/progress/default-rgb.css";
 @import "ui/check-rgb.css";
 @import "ui/switch-rgb.css";
+@import "ui/notice-rgb.css";
+@import "ui/text-rgb.css";

package/src/ui/badge/bordered-rgb.css

@@ -0,0 +1,3 @@
+.ui-badge:where(.bordered) {
+  border: var(--ui-badge-border-width) solid rgb(var(--color-accent-rgb) / var(--ui-badge-border-opacity));
+}

package/src/ui/badge/bordered.css

@@ -2,7 +2,7 @@
   --ui-badge-border-width: 1px;
   --ui-badge-border-opacity: calc(var(--tw-border-opacity, 1) * 100%);
 
-  border: var(--ui-badge-border-width) solid color-mixe(in sRGB, var(--color-accent) var(--ui-badge-border-opacity), transparent);
+  border: var(--ui-badge-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-badge-border-opacity), transparent);
   padding-left: calc(var(--ui-badge-px) - var(--ui-badge-border-width));
   padding-right: calc(var(--ui-badge-px) - var(--ui-badge-border-width));
 }

package/src/ui/badge/default-rgb.css

@@ -0,0 +1,9 @@
+.ui-badge {
+  --color-current-rgb: var(--color-light-rgb);
+  --ui-badge-bg: rgb(var(--color-accent-rgb) / var(--ui-badge-bg-opacity));
+  --ui-badge-color: rgb(var(--color-current-rgb) / var(--ui-badge-color-opacity));
+
+  &:where(.bordered, .muted) {
+    --color-current-rgb: var(--color-accent-rgb);
+  }
+}

package/src/ui/badge/default.css

@@ -7,10 +7,10 @@
   --ui-badge-border-radius: var(--rounded-xs);
   --ui-badge-font-size: 0.75rem;
   --ui-badge-font-weight: var(--font-normal);
-  --ui-badge-bg: color-mixe(in sRGB, var(--color-accent) var(--ui-badge-bg-opacity), var(--ui-badge-bg-mix));
+  --ui-badge-bg: color-mix(in sRGB, var(--color-accent) var(--ui-badge-bg-opacity), var(--ui-badge-bg-mix));
   --ui-badge-bg-mix: transparent;
   --ui-badge-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);
-  --ui-badge-color: color-mixe(in sRGB, var(--color-current) var(--ui-badge-color-opacity), transparent);
+  --ui-badge-color: color-mix(in sRGB, var(--color-current) var(--ui-badge-color-opacity), transparent);
   --ui-badge-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);
   --ui-badge-gap: 0.25rem;
 

package/src/ui/btn/bordered.css

@@ -2,7 +2,7 @@
   --ui-btn-border-width: 2px;
   --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.75) * 100%);
 
-  border: var(--ui-btn-border-width) solid color-mixe(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), transparent);
+  border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), transparent);
   padding-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
   padding-right: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
 }

package/src/ui/btn/default.css

@@ -9,25 +9,23 @@
   --ui-btn-font-size: 0.875rem;
   --ui-btn-font-weight: var(--font-medium);
   --ui-btn-letter-spacing: 0;
-  --ui-btn-bg: color-mixe(in sRGB, var(--color-accent) var(--ui-btn-bg-opacity), var(--ui-btn-bg-mix));
+  --ui-btn-bg: color-mix(in sRGB, var(--color-accent) var(--ui-btn-bg-opacity), var(--ui-btn-bg-mix));
   --ui-btn-bg-mix: transparent;
   --ui-btn-bg-opacity: calc(var(--tw-bg-opacity, 1) * 100%);
-  --ui-btn-color: color-mixe(in sRGB, var(--color-current) var(--ui-btn-color-opacity), transparent);
+  --ui-btn-color: color-mix(in sRGB, var(--color-current) var(--ui-btn-color-opacity), transparent);
   --ui-btn-color-opacity: calc(var(--tw-text-opacity, 1) * 100%);
   --ui-btn-outline-width: 2px;
   --ui-btn-outline-offset: 2px;
   --ui-btn-outline-opacity: 50%;
-  --ui-btn-hover-mix: black;
-  --ui-btn-hover-opacity: 80%;
   --ui-btn-hover-color: var(--color-current);
-  --ui-btn-active-mix: black;
-  --ui-btn-active-opacity: 90%;
+  --ui-btn-hover-bg-mix: black;
+  --ui-btn-hover-bg-opacity: 80%;
   --ui-btn-active-color: var(--color-current);
-  --ui-btn-focus-mix: transparent;
-  --ui-btn-focus-opacity: 50%;
+  --ui-btn-active-bg-mix: black;
+  --ui-btn-active-bg-opacity: 90%;
+  --ui-btn-focus-outline-color-mix: transparent;
+  --ui-btn-focus-outline-color-opacity: 50%;
   --ui-btn-disabled-opacity: 70%;
-  --ui-btn-loading-width: 1rem;
-  --ui-btn-loading-border-width: 2px;
 
   max-width: var(--ui-btn-width);
   width: var(--ui-btn-width);
@@ -63,12 +61,12 @@
   }
 
   &:where(.bordered, .muted, .ghosted) {
-    --ui-btn-hover-mix: transparent;
-    --ui-btn-hover-opacity: 10%;
-    --ui-btn-active-mix: transparent;
-    --ui-btn-active-opacity: 20%;
-    --color-current: var(--color-accent);
+    --ui-btn-hover-bg-mix: transparent;
+    --ui-btn-hover-bg-opacity: 10%;
+    --ui-btn-active-bg-mix: transparent;
+    --ui-btn-active-bg-opacity: 20%;
     --ui-btn-bg-opacity: 0%;
+    --color-current: var(--color-accent);
   }
 
   &:is([href], button, [role="button"]) {
@@ -81,20 +79,20 @@
       &:hover {
         @media (hover: hover) and (pointer: fine) {
           --ui-btn-color: var(--ui-btn-hover-color);
-          --ui-btn-bg-mix: var(--ui-btn-hover-mix);
-          --ui-btn-bg-opacity: var(--ui-btn-hover-opacity);
+          --ui-btn-bg-mix: var(--ui-btn-hover-bg-mix);
+          --ui-btn-bg-opacity: var(--ui-btn-hover-bg-opacity);
         }
       }
 
       &:focus {
-        outline-color: color-mixe(in sRGB, var(--color-accent) var(--ui-btn-focus-opacity), var(--ui-btn-focus-mix));
+        outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-btn-focus-outline-color-opacity), var(--ui-btn-focus-outline-color-mix));
         outline-offset: var(--ui-btn-outline-offset);
       }
 
       &:is(:active, .active) {
         --ui-btn-color: var(--ui-btn-active-color);
-        --ui-btn-bg-mix: var(--ui-btn-active-mix);
-        --ui-btn-bg-opacity: var(--ui-btn-active-opacity);
+        --ui-btn-bg-mix: var(--ui-btn-active-bg-mix);
+        --ui-btn-bg-opacity: var(--ui-btn-active-bg-opacity);
       }
     }
   }

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

@@ -6,8 +6,6 @@
   }
 
   &:where(.hover-fill) {
-    --ui-btn-bg-opacity: 100%;
-
     &::before {
       background-color: rgb(var(--color-body-rgb) / var(--ui-btn-bg-opacity));
     }

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

@@ -10,7 +10,7 @@
   &::before {
     content: "";
     position: absolute;
-    background-color: color-mixe(in sRGB, var(--color-body) calc(100% - var(--ui-btn-bg-opacity)), transparent);
+    background-color: color-mix(in sRGB, var(--color-body) calc(100% - var(--ui-btn-bg-opacity)), transparent);
     inset: var(--ui-btn-border-width);
     border-radius: calc(var(--ui-btn-border-radius) / 1.25);
     z-index: -1;
@@ -21,7 +21,7 @@
     --ui-btn-bg-opacity: 100%;
 
     &::before {
-      background-color: color-mixe(in sRGB, var(--color-body) var(--ui-btn-bg-opacity), transparent);
+      background-color: color-mix(in sRGB, var(--color-body) var(--ui-btn-bg-opacity), transparent);
     }
   }
 }

package/src/ui/btn/gradient.css

@@ -3,7 +3,7 @@
     content: "";
     position: absolute;
     inset: 0;
-    background-color: color-mixe(in sRGB, var(--ui-btn-bg-mix) calc(100% - var(--ui-btn-bg-opacity)), transparent);
+    background-color: color-mix(in sRGB, var(--ui-btn-bg-mix) calc(100% - var(--ui-btn-bg-opacity)), transparent);
     z-index: -1;
     transition: var(--transition-background);
   }

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

@@ -1,8 +1,8 @@
 .ui-btn:where(.hover-fill) {
-  --ui-btn-hover-mix: black;
-  --ui-btn-hover-opacity: 100%;
-  --ui-btn-active-mix: black;
-  --ui-btn-active-opacity: 90%;
+  --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-color: var(--color-light);
   --ui-btn-active-color: var(--color-light);
 }

package/src/ui/btn/loading.css

@@ -1,4 +1,7 @@
 .ui-btn:is(.loading) {
+  --ui-btn-loading-width: 1rem;
+  --ui-btn-loading-border-width: 2px;
+
   pointer-events: none;
   color: transparent;
 

package/src/ui/btn/muted.css

@@ -1,4 +1,4 @@
 .ui-btn:where(.muted) {
-  --ui-btn-hover-opacity: 30%;
+  --ui-btn-hover-bg-opacity: 30%;
   --ui-btn-bg-opacity: 10%;
 }

package/src/ui/btn/raised.css

@@ -2,7 +2,7 @@
   --ui-btn-border-width: 2px;
   --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.85) * 100%);
 
-  border: var(--ui-btn-border-width) solid color-mixe(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-current));
+  border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-current));
   padding-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
   padding-right: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
 }

package/src/ui/check-rgb.css

@@ -3,19 +3,10 @@
   --ui-check-border-color: var(--color-current-rgb);
   --ui-check-checked-bg: var(--color-accent-rgb);
 
-  & :where(a) {
-    color: rgb(var(--color-accent-rgb));
-  }
-
   & :where(input) {
     background-color: rgb(var(--ui-check-bg) / var(--ui-check-bg-opacity));
     border: var(--ui-check-border-width) solid rgb(var(--ui-check-border-color) / var(--ui-check-border-opacity));
 
-
-    &::before {
-      color: rgb(var(--color-light-rgb));
-    }
-
     &:not(:disabled) {
       &:focus {
         outline-color: rgb(var(--ui-check-checked-bg) / var(--ui-check-outline-opacity));

package/src/ui/check.css

@@ -44,8 +44,8 @@
     display: flex;
     width: var(--ui-check-width);
     height: var(--ui-check-width);
-    background-color: color-mixe(in sRGB, var(--ui-check-bg) var(--ui-check-bg-opacity), var(--ui-check-bg-mix));
-    border: var(--ui-check-border-width) solid color-mixe(in sRGB, var(--ui-check-border-color) var(--ui-check-border-opacity), var(--ui-check-border-mix));
+    background-color: color-mix(in sRGB, var(--ui-check-bg) var(--ui-check-bg-opacity), var(--ui-check-bg-mix));
+    border: var(--ui-check-border-width) solid color-mix(in sRGB, var(--ui-check-border-color) var(--ui-check-border-opacity), var(--ui-check-border-mix));
     border-radius: var(--ui-check-radius);
     user-select: none;
     outline: var(--ui-check-outline-width) solid transparent;
@@ -95,7 +95,7 @@
         --ui-check-border-color: var(--ui-check-checked-bg);
         --ui-check-border-opacity: 75%;
 
-        outline-color: color-mixe(in sRGB, var(--ui-check-checked-bg) var(--ui-check-outline-opacity), transparent);
+        outline-color: color-mix(in sRGB, var(--ui-check-checked-bg) var(--ui-check-outline-opacity), transparent);
         outline-offset: var(--ui-check-outline-offset);
       }
     }

package/src/ui/control/default-rgb.css

@@ -19,6 +19,6 @@
     --ui-control-border-color: var(--color-error-rgb);
     --color-accent-rgb: var(--color-error-rgb);
 
-    background-color: rgb(var(--color-error-rgb) / var(--ui-control-error-opacity));
+    background-color: rgb(var(--color-error-rgb) / var(--ui-control-invalid-bg-opacity));
   }
 }

package/src/ui/control/default.css

@@ -22,7 +22,7 @@
   --ui-control-outline-offset: 0;
   --ui-control-outline-opacity: 20%;
   --ui-control-disabled-opacity: 5%;
-  --ui-control-error-opacity: 10%;
+  --ui-control-invalid-bg-opacity: 10%;
 
   display: grid;
   grid-template-areas: "input";
@@ -45,7 +45,7 @@
     font-weight: var(--ui-control-font-weight);
     border-radius: inherit;
     color: var(--ui-control-color);
-    border: var(--ui-control-border-width) solid color-mixe(in sRGB, var(--ui-control-border-color) var(--ui-control-border-opacity), var(--ui-control-border-mix));
+    border: var(--ui-control-border-width) solid color-mix(in sRGB, var(--ui-control-border-color) var(--ui-control-border-opacity), var(--ui-control-border-mix));
     outline: var(--ui-control-outline-width) solid transparent;
     outline-offset: 0;
 
@@ -53,13 +53,13 @@
       --ui-control-border-opacity: 100%;
       --ui-control-border-color: var(--color-accent);
 
-      outline-color: color-mixe(in sRGB, var(--color-accent) var(--ui-control-outline-opacity), transparent);
+      outline-color: color-mix(in sRGB, var(--color-accent) var(--ui-control-outline-opacity), transparent);
       outline-offset: var(--ui-control-outline-offset);
     }
 
     &:disabled {
       cursor: not-allowed;
-      background-color: color-mixe(in sRGB, var(--color-base) var(--ui-control-disabled-opacity), var(--ui-control-bg));
+      background-color: color-mix(in sRGB, var(--color-base) var(--ui-control-disabled-opacity), var(--ui-control-bg));
     }
 
     &:required ~ label {
@@ -89,6 +89,6 @@
     --ui-control-color: var(--color-error);
     --color-accent: var(--color-error);
 
-    background-color: color-mixe(in sRGB, var(--color-error) var(--ui-control-error-opacity), var(--ui-control-bg));
+    background-color: color-mix(in sRGB, var(--color-error) var(--ui-control-invalid-bg-opacity), var(--ui-control-bg));
   }
 }

package/src/ui/control/group.css

@@ -5,13 +5,17 @@
   & :where(.ui-btn) {
     --ui-btn-border-width: 1px;
     --ui-btn-height: 3rem;
+    --ui-btn-outline-offset: 0;
   }
 
   & > * {
     &:not(:first-child) {
-      border-left: 0;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
+
+      &, :where(input, select) {
+        border-left: 0;
+      }
     }
 
     &:not(:last-child) {

package/src/ui/control/select.css

@@ -1,8 +1,11 @@
 .ui-control:has(select) {
   --ui-control-icon-select-font-size: 1.5rem;
-  --ui-control-icon-count-r: 2;
   --ui-control-pr: var(--ui-control-icon-offset-r);
 
+  &:has(.icon-r) {
+    --ui-control-icon-count-r: 2;
+  }
+
   & :where([class^="icon-"]) {
     margin-right: calc(var(--ui-control-icon-font-size) + var(--ui-control-icon-gap));
   }
@@ -18,8 +21,6 @@
     right: var(--ui-control-icon-inset-x);
     top: calc(var(--ui-control-height) / 2);
     margin-top: calc(var(--ui-control-icon-select-font-size) / 2 * -1);
-    will-change: transform;
-    transition: transform 200ms;
     mask: var(--icon-angle-down);
     pointer-events: none;
     grid-area: input;

package/src/ui/index.css

@@ -1,10 +1,10 @@
 @import "badge.css";
 @import "btn/index.css";
 @import "check.css";
+@import "control.css";
 @import "heading.css";
 @import "image.css";
 @import "info.css";
-@import "input.css";
 @import "label.css";
 @import "link.css";
 @import "notice.css";

package/src/ui/link/default.css

@@ -2,13 +2,15 @@
   --color-accent: var(--color-current);
   --ui-link-font-size: 0.875rem;
   --ui-link-font-weight: var(--font-medium);
+  --ui-link-letter-spacing: 0;
   --ui-link-hover-color: var(--color-accent);
-  --ui-link-hover-opacity: 0.8;
-  --ui-link-active-opacity: 0.8;
+  --ui-link-hover-opacity: 0.75;
+  --ui-link-active-opacity: 0.75;
   --ui-link-gap: 0.5rem;
 
   font-size: var(--ui-link-font-size);
   font-weight: var(--ui-link-font-weight);
+  letter-spacing: var(--ui-link-letter-spacing);
   transition: var(--transition-opacity), var(--transition-color);
   display: inline-flex;
   align-items: center;
@@ -23,12 +25,12 @@
       }
     }
 
-    &:active {
-      opacity: var(--ui-link-active-opacity);
-    }
-
     &:focus-visible {
       color: var(--ui-link-hover-color);
     }
+
+    &:active {
+      opacity: var(--ui-link-active-opacity);
+    }
   }
 }

package/src/ui/link/underlined.css

@@ -1,4 +1,4 @@
-.ui-link:where(.underlined) {
+.ui-link:where([class*="underlined"]) {
   --ui-link-hover-opacity: 1;
   --ui-link-underline-color: currentColor;
   --ui-link-underline-width: 1px;
@@ -9,6 +9,8 @@
     --ui-link-underline-opacity: 1;
     --ui-link-underline-transform: none;
     --ui-link-underline-color: var(--color-accent);
+    --ui-link-hover-opacity: 0.75;
+    --ui-link-active-opacity: 0.75;
   }
 
   &::after, & span::after {

package/src/ui/notice-rgb.css

@@ -0,0 +1,6 @@
+.ui-notice {
+  --ui-notice-bg: var(--color-accent-rgb);
+
+  background-color: rgb(var(--ui-notice-bg) / 10%);
+  outline: var(--ui-notice-outline-width) solid rgb(var(--ui-notice-bg) / var(--ui-notice-outline-opacity));
+}

package/src/ui/notice.css

@@ -16,8 +16,8 @@
   padding: var(--ui-notice-py) var(--ui-notice-px);
   font-size: var(--ui-notice-font-size);
   border-radius: var(--ui-notice-border-radius);
-  background-color: color-mixe(in sRGB, var(--ui-notice-bg) 10%, transparent);
-  outline: var(--ui-notice-outline-width) solid color-mixe(in sRGB, var(--ui-notice-bg) var(--ui-notice-outline-opacity), transparent);
+  background-color: color-mix(in sRGB, var(--ui-notice-bg) 10%, transparent);
+  outline: var(--ui-notice-outline-width) solid color-mix(in sRGB, var(--ui-notice-bg) var(--ui-notice-outline-opacity), transparent);
   outline-offset: var(--ui-notice-outline-offset);
   color: var(--color-current);
   gap: var(--ui-notice-gap);

package/src/ui/progress/default-rgb.css

@@ -0,0 +1,3 @@
+.ui-progress {
+  --ui-progress-bg: rgb(var(--color-accent-rgb) / var(--ui-progress-bg-opacity));
+}

package/src/ui/progress/default.css

@@ -1,7 +1,7 @@
 .ui-progress {
   --ui-progress-height: 1rem;
   --ui-progress-border-radius: var(--rounded-full);
-  --ui-progress-bg: color-mixe(in sRGB, var(--color-accent) var(--ui-progress-bg-opacity), var(--color-body));
+  --ui-progress-bg: color-mix(in sRGB, var(--color-accent) var(--ui-progress-bg-opacity), var(--color-body));
   --ui-progress-bg-opacity: 10%;
 
   appearance: none;

package/src/ui/switch.css

@@ -65,7 +65,7 @@
     }
 
     &:focus {
-      outline-color: color-mixe(in sRGB, var(--color-current) var(--ui-switch-outline-opacity), transparent);
+      outline-color: color-mix(in sRGB, var(--color-current) var(--ui-switch-outline-opacity), transparent);
       outline-offset: var(--ui-switch-outline-offset);
     }
 

package/src/ui/text-rgb.css

@@ -0,0 +1,13 @@
+.ui-text {
+  & :where(table) {
+    & :where(thead) {
+      border-bottom: 1px solid rgb(var(--color-current-rgb) / 7.5%);
+    }
+
+    & :where(tbody tr) {
+      &:nth-of-type(even) {
+        background-color: rgb(var(--color-current-rgb) / 5%);
+      }
+    }
+  }
+}

package/src/ui/text.css

@@ -22,12 +22,12 @@
 
     &:hover {
       @media (hover: hover) and (pointer: fine) {
-        color: color-mixe(in sRGB, var(--color-accent) 70%, transparent);
+        color: color-mix(in sRGB, var(--color-accent) 70%, transparent);
       }
     }
 
     &:focus-visible {
-      color: color-mixe(in sRGB, var(--color-accent) 70%, transparent);
+      color: color-mix(in sRGB, var(--color-accent) 70%, transparent);
     }
   }
 
@@ -117,12 +117,12 @@
 
     & :where(thead) {
       font-weight: var(--ui-text-weight-bold);
-      border-bottom: 1px solid color-mixe(in sRGB, var(--color-current) 0.75%, transparent);
+      border-bottom: 1px solid color-mix(in sRGB, var(--color-current) 7.5%, transparent);
     }
 
     & :where(tbody tr) {
       &:nth-of-type(even) {
-        background-color: color-mixe(in sRGB, var(--color-current) 0.5%, transparent);
+        background-color: color-mix(in sRGB, var(--color-current) 5%, transparent);
       }
     }
   }