@marigold/theme-rui 0.5.0 → 1.0.0

package/dist/styles.css

@@ -118,6 +118,8 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: Inter, system-ui, sans-serif;
     --default-mono-font-family: var(--font-mono);
+    --color-disabled: var(--color-stone-200);
+    --color-disabled-foreground: var(--color-stone-400);
     --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
     --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
     --fade-in-duration: 0.3s;
@@ -323,15 +325,15 @@
   [data-theme="rui"] .top-2 {
     top: calc(var(--spacing) * 2);
   }
-  [data-theme="rui"] .top-3 {
-    top: calc(var(--spacing) * 3);
-  }
   [data-theme="rui"] .top-3\.5 {
     top: calc(var(--spacing) * 3.5);
   }
   [data-theme="rui"] .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  [data-theme="rui"] .top-6 {
+    top: calc(var(--spacing) * 6);
+  }
   [data-theme="rui"] .top-\[50\%\] {
     top: 50%;
   }
@@ -422,15 +424,24 @@
   [data-theme="rui"] .me-auto {
     margin-inline-end: auto;
   }
+  [data-theme="rui"] .-mt-0\.5 {
+    margin-top: calc(var(--spacing) * -0.5);
+  }
   [data-theme="rui"] .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
   [data-theme="rui"] .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  [data-theme="rui"] .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   [data-theme="rui"] .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
+  [data-theme="rui"] .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
   [data-theme="rui"] .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -1486,8 +1497,8 @@
   [data-theme="rui"] .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
-  [data-theme="rui"] .gap-x-3 {
-    column-gap: calc(var(--spacing) * 3);
+  [data-theme="rui"] .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
   }
   [data-theme="rui"] .space-x-2 {
     [data-theme="rui"] :where(& > :not(:last-child)) {
@@ -2958,6 +2969,10 @@
       outline-color: color-mix(in oklab, var(--color-stone-400) 70%, transparent);
     }
   }
+  [data-theme="rui"] .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   [data-theme="rui"] .blur-xs {
     --tw-blur: blur(var(--blur-xs));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -3204,6 +3219,70 @@
       background-color: var(--color-stone-100);
     }
   }
+  [data-theme="rui"] .group-focus-visible\/checkbox\:util-focus-ring {
+    [data-theme="rui"] &:is(:where(.group\/checkbox):where([data-rac])[data-focus-visible] *) {
+      border-color: var(--color-stone-400);
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    [data-theme="rui"] &:is(:where(.group\/checkbox):where(:not([data-rac])):focus-visible *) {
+      border-color: var(--color-stone-400);
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  [data-theme="rui"] .group-focus-visible\/radio\:util-focus-ring {
+    [data-theme="rui"] &:is(:where(.group\/radio):where([data-rac])[data-focus-visible] *) {
+      border-color: var(--color-stone-400);
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    [data-theme="rui"] &:is(:where(.group\/radio):where(:not([data-rac])):focus-visible *) {
+      border-color: var(--color-stone-400);
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  [data-theme="rui"] .group-focus-visible\/switch\:util-focus-borderless-ring {
+    [data-theme="rui"] &:is(:where(.group\/switch):where([data-rac])[data-focus-visible] *) {
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    [data-theme="rui"] &:is(:where(.group\/switch):where(:not([data-rac])):focus-visible *) {
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   [data-theme="rui"] .group-disabled\/checkbox\:cursor-not-allowed {
     [data-theme="rui"] &:is(:where(.group\/checkbox):where([data-rac])[data-disabled] *) {
       cursor: not-allowed;
@@ -3902,6 +3981,48 @@
       }
     }
   }
+  [data-theme="rui"] .focus-visible\:util-focus-ring {
+    [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
+      border-color: var(--color-stone-400);
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    [data-theme="rui"] &:where(:not([data-rac])):focus-visible {
+      border-color: var(--color-stone-400);
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  [data-theme="rui"] .focus-visible\:util-focus-borderless-ring {
+    [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    [data-theme="rui"] &:where(:not([data-rac])):focus-visible {
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   [data-theme="rui"] .focus-visible\:outline {
     [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
       outline-style: var(--tw-outline-style);
@@ -3930,6 +4051,26 @@
       pointer-events: none;
     }
   }
+  [data-theme="rui"] .disabled\:util-disabled {
+    [data-theme="rui"] &:where([data-rac])[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-disabled-foreground);
+      cursor: not-allowed;
+      --tw-border-style: none;
+      border-style: none;
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    [data-theme="rui"] &:where(:not([data-rac])):disabled {
+      background-color: var(--color-disabled);
+      color: var(--color-disabled-foreground);
+      cursor: not-allowed;
+      --tw-border-style: none;
+      border-style: none;
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   [data-theme="rui"] .disabled\:cursor-none {
     [data-theme="rui"] &:where([data-rac])[data-disabled] {
       cursor: none;
@@ -4025,6 +4166,28 @@
       padding-bottom: calc(var(--spacing) * 2);
     }
   }
+  [data-theme="rui"] .has-focus-visible\:util-focus-ring {
+    [data-theme="rui"] &:has(*:where([data-rac])[data-focus-visible]) {
+      border-color: var(--color-stone-400);
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    [data-theme="rui"] &:has(*:where(:not([data-rac])):focus-visible) {
+      border-color: var(--color-stone-400);
+      outline-style: none;
+      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
+      }
+      --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   [data-theme="rui"] .has-\[input\[aria-readonly\=true\]\]\:bg-muted {
     [data-theme="rui"] &:has(*:is(input[aria-readonly=true])) {
       background-color: var(--color-stone-100);
@@ -4679,6 +4842,12 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  [data-theme="rui"] .\[\&_svg\]\:size-6 {
+    [data-theme="rui"] & svg {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+    }
+  }
   [data-theme="rui"] .\[\&_svg\]\:shrink-0 {
     [data-theme="rui"] & svg {
       flex-shrink: 0;
@@ -4903,192 +5072,6 @@
     }
   }
 }
-@layer utilities {
-  [data-theme="rui"] .mixin-ring-focus-visible {
-    --tw-outline-style: none;
-    outline-style: none;
-    [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
-      border-color: var(--color-stone-400);
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):focus-visible {
-      border-color: var(--color-stone-400);
-    }
-    [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):focus-visible {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-  }
-  [data-theme="rui"] .mixin-ring-has-focus-visible {
-    [data-theme="rui"] &:has(*:where([data-rac])[data-focus-visible]) {
-      border-color: var(--color-stone-200);
-    }
-    [data-theme="rui"] &:has(*:where(:not([data-rac])):focus-visible) {
-      border-color: var(--color-stone-200);
-    }
-    [data-theme="rui"] &:has(*:where([data-rac])[data-focus-visible]) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:has(*:where(:not([data-rac])):focus-visible) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:has(*:where([data-rac])[data-focus-visible]) {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-    [data-theme="rui"] &:has(*:where(:not([data-rac])):focus-visible) {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-  }
-  [data-theme="rui"] .mixin-ring-focus-visible-checkbox {
-    [data-theme="rui"] &:is(:where(.group\/checkbox):where([data-rac])[data-focus-visible] *) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:is(:where(.group\/checkbox):where(:not([data-rac])):focus-visible *) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:is(:where(.group\/checkbox):where([data-rac])[data-focus-visible] *) {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-    [data-theme="rui"] &:is(:where(.group\/checkbox):where(:not([data-rac])):focus-visible *) {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-  }
-  [data-theme="rui"] .mixin-ring-focus-visible-radio {
-    [data-theme="rui"] &:is(:where(.group\/radio):where([data-rac])[data-focus-visible] *) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:is(:where(.group\/radio):where(:not([data-rac])):focus-visible *) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:is(:where(.group\/radio):where([data-rac])[data-focus-visible] *) {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-    [data-theme="rui"] &:is(:where(.group\/radio):where(:not([data-rac])):focus-visible *) {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-  }
-  [data-theme="rui"] .mixin-ring-focus-visible-switch {
-    [data-theme="rui"] &:is(:where(.group\/switch):where([data-rac])[data-focus-visible] *) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:is(:where(.group\/switch):where(:not([data-rac])):focus-visible *) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:is(:where(.group\/switch):where([data-rac])[data-focus-visible] *) {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-    [data-theme="rui"] &:is(:where(.group\/switch):where(:not([data-rac])):focus-visible *) {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-  }
-  [data-theme="rui"] .mixin-ring-focus-visible-borderless {
-    --tw-outline-style: none;
-    outline-style: none;
-    [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:where([data-rac])[data-focus-visible] {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):focus-visible {
-      --tw-ring-color: color-mix(in srgb, oklch(70.9% 0.01 56.259) 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-stone-400) 50%, transparent);
-      }
-    }
-  }
-  [data-theme="rui"] .mixin-disabled {
-    [data-theme="rui"] &:where([data-rac])[data-disabled] {
-      cursor: not-allowed;
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):disabled {
-      cursor: not-allowed;
-    }
-    [data-theme="rui"] &:where([data-rac])[data-disabled] {
-      --tw-border-style: none;
-      border-style: none;
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):disabled {
-      --tw-border-style: none;
-      border-style: none;
-    }
-    [data-theme="rui"] &:where([data-rac])[data-disabled] {
-      background-color: var(--color-stone-200);
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):disabled {
-      background-color: var(--color-stone-200);
-    }
-    [data-theme="rui"] &:where([data-rac])[data-disabled] {
-      color: var(--color-stone-400);
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):disabled {
-      color: var(--color-stone-400);
-    }
-    [data-theme="rui"] &:where([data-rac])[data-disabled] {
-      --tw-shadow: 0 0 #0000;
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    [data-theme="rui"] &:where(:not([data-rac])):disabled {
-      --tw-shadow: 0 0 #0000;
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-}
 @layer base {
   [data-theme="rui"] {
     font-optical-sizing: auto;

package/dist/theme.css

@@ -1,4 +1,4 @@
-@import './mixins.css';
+@import './utils.css';
 
 /*
     TODO: how to do normalization so we doesn't break everything?

package/dist/utils.css

@@ -0,0 +1,61 @@
+/*
+ * Custom Tailwind utilities
+ *
+ * This file contains reusable utility functions and class shortcuts that
+ * encapsulate common design decisions across the theme. These include
+ * standardized styling for interactive states like keyboard focus, disabled
+ * components, and other consistent UI patterns.
+ */
+
+/*
+ * Applies a consistent visual style for keyboard focus states across components.
+ * This utility sets a colored focus ring and border based on the given theme color,
+ * while removing the default outline.
+ *
+ * Use this as a default for all components (that don't have their own border).
+ */
+@utility util-focus-* {
+  border-color: --value(--color- *);
+  outline-style: none;
+
+  --tw-ring-color: --alpha(--value(--color- *) / 50%);
+  --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+/*
+ * Applies a consistent visual style for keyboard focus states across components.
+ * This utility sets a colored focus ring based on the given theme color,
+ * while removing the default outline.
+ *
+ * Use this when the component has its own border and you need to keep it.
+ */
+@utility util-focus-borderless-* {
+  outline-style: none;
+
+  --tw-ring-color: --alpha(--value(--color- *) / 50%);
+  --tw-ring-shadow: 0 0 0 3px var(--tw-ring-color, currentcolor);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+/*
+ * Defines a consistent visual and behavioral style for disabled UI elements.
+ */
+@utility util-disabled {
+  background-color: var(--color-disabled);
+  color: var(--color-disabled-foreground);
+
+  cursor: not-allowed;
+
+  --tw-border-style: none;
+  border-style: none;
+
+  --tw-shadow: 0 0 #0000;
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/theme-rui",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "Marigold RUI Theme",
   "license": "MIT",
   "keywords": [
@@ -53,11 +53,11 @@
   "dependencies": {
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-react-aria-components": "2.0.0",
-    "@marigold/components": "11.4.0",
-    "@marigold/system": "11.4.0",
+    "@marigold/components": "11.4.1",
+    "@marigold/system": "11.4.1",
     "@marigold/theme-plugins": "1.0.1"
   },
   "scripts": {
-    "build": "NODE_ENV=production tsup && postcss -o dist/styles.css src/styles.css && cp src/theme.css src/global.css src/mixins.css dist/"
+    "build": "NODE_ENV=production tsup && postcss -o dist/styles.css src/styles.css && cp src/theme.css src/global.css src/utils.css dist/"
   }
 }

package/dist/mixins.css

@@ -1,54 +0,0 @@
-/*
-  File: tailwind-components.css
-
-  Description
-  -----------
-  This file defines custom Tailwind CSS component classes by bundling commonly used utility classes
-  with the @apply directive. The goal is to reduce duplication, enhance maintainability, and ensure
-  a consistent styling pattern across various components.
-
-  Usage
-  -----
-  Import this file into your main stylesheet or reference it in your Tailwind CSS configuration.
-
-  Best Practices
-  --------------
-  - Encapsulate frequently used utility combinations into custom classes for better reusability.
-  - Update the definitions here to maintain consistency in our design system across all components.
-  - Keep custom classes focused on specific styling concerns to preserve clarity.
-*/
-
-@layer utilities {
-  /*==============*/
-  /*     Focus    */
-  /*==============*/
-  .mixin-ring-focus-visible {
-    @apply focus-visible:border-ring focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px];
-  }
-
-  .mixin-ring-has-focus-visible {
-    @apply has-focus-visible:border-border has-focus-visible:ring-ring/50 has-focus-visible:ring-[3px];
-  }
-
-  /* TODO: rename the groups to something common? e.g. "control" or something */
-  .mixin-ring-focus-visible-checkbox {
-    @apply group-focus-visible/checkbox:ring-ring/50 group-focus-visible/checkbox:ring-[3px];
-  }
-  .mixin-ring-focus-visible-radio {
-    @apply group-focus-visible/radio:ring-ring/50 group-focus-visible/radio:ring-[3px];
-  }
-  .mixin-ring-focus-visible-switch {
-    @apply group-focus-visible/switch:ring-ring/50 group-focus-visible/switch:ring-[3px];
-  }
-
-  .mixin-ring-focus-visible-borderless {
-    @apply focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px];
-  }
-
-  /*==============*/
-  /*   Disabled   */
-  /*==============*/
-  .mixin-disabled {
-    @apply disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed disabled:border-none disabled:shadow-none;
-  }
-}