daisyui 5.0.0-alpha.0 → 5.0.0-alpha.3

package/components/button.css

@@ -0,0 +1,293 @@
+.btn {
+    display: inline-flex;
+    height: var(--spacing-10, 2.5rem);
+    flex-shrink: 0;
+    cursor: pointer;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-2, 0.5rem);
+    border-radius: var(--radius-btn);
+    padding-left: var(--spacing-4, 1rem);
+    padding-right: var(--spacing-4, 1rem);
+    text-align: center;
+    vertical-align: middle;
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: var(--line-height-none, 1);
+    --tw-font-weight: 600;
+    font-weight: 600;
+    color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+    text-decoration-line: none;
+    outline-offset: 2px;
+    outline-color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+    transition-timing-function: var(--transition-timing-function-out, cubic-bezier(0, 0, 0.2, 1));
+    -webkit-user-select: none;
+    user-select: none;
+    transition-property: color, background-color, border-color, opacity, box-shadow, transform;
+    background-color: var(--btn-bg, var(--color-base-200));
+    border-width: var(--spacing-button-border);
+    border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 2%);
+    border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 4%);
+    box-shadow: 0 1px 0 0 color-mix(in oklch, white 3%, transparent) inset, 0 1px 1px 0 oklch(0% 0 0/0.07);
+    &:hover {
+      border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
+      border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
+      background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
+    }
+    &.btn-active {
+      border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
+      border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
+      background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:active {
+      &:focus {
+        transform: scale(var(--btn-focus-scale, 0.98));
+        animation: button-pop 0s ease-out;
+        border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 5%);
+        border-bottom-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)), black 7%);
+        box-shadow: 0 1px 0 0 oklch(0% 0 0/0.07) inset, 0 0 0 0 oklch(0% 0 0/0.1);
+      }
+      &:hover {
+        transform: scale(var(--btn-focus-scale, 0.97));
+        animation: button-pop 0s ease-out;
+      }
+    }
+  }
+  .btn-primary {
+    --btn-bg: var(--color-primary);
+    color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
+    outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+  }
+  .btn-secondary {
+    --btn-bg: var(--color-secondary);
+    color: var(--color-secondary-content, oklch(98.71% 0.0106 342.55));
+    outline-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+  }
+  .btn-accent {
+    --btn-bg: var(--color-accent);
+    color: var(--color-accent-content, oklch(15.352% 0.0368 183.61));
+    outline-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+  }
+  .btn-neutral {
+    --btn-bg: var(--color-neutral);
+    color: var(--color-neutral-content, oklch(89.4994% 0.011585 252.096176));
+    outline-color: var(--color-neutral, oklch(32.1785% 0.02476 255.701624));
+  }
+  .btn-info {
+    --btn-bg: var(--color-info);
+    color: var(--color-info-content, oklch(0% 0 0));
+    outline-color: var(--color-info, oklch(72.06% 0.191 231.6));
+  }
+  .btn-success {
+    --btn-bg: var(--color-success);
+    color: var(--color-success-content, oklch(0% 0 0));
+    outline-color: var(--color-success, oklch(64.8% 0.15 160));
+  }
+  .btn-warning {
+    --btn-bg: var(--color-warning);
+    color: var(--color-warning-content, oklch(0% 0 0));
+    outline-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+  }
+  .btn-error {
+    --btn-bg: var(--color-error);
+    color: var(--color-error-content, oklch(0% 0 0));
+    outline-color: var(--color-error, oklch(71.76% 0.221 22.18));
+  }
+  .btn.glass {
+    --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);
+    outline-color: currentColor;
+    &:hover {
+      @media (hover: hover) {
+        --glass-border-opacity: 15%;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        --glass-opacity: 25%;
+      }
+    }
+    &.btn-active {
+      --glass-border-opacity: 15%;
+      --glass-opacity: 25%;
+    }
+  }
+  .btn-ghost {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: transparent;
+    background-color: transparent;
+    color: currentColor;
+    --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);
+    outline-color: currentColor;
+    &:hover {
+      @media (hover: hover) {
+        border-color: transparent;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+      }
+    }
+    &.btn-active {
+      border-color: transparent;
+      background-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+    }
+  }
+  .btn-link {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+    text-decoration-line: underline;
+    --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);
+    outline-color: currentColor;
+    &:hover {
+      @media (hover: hover) {
+        border-color: transparent;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+    &.btn-active {
+      border-color: transparent;
+      background-color: transparent;
+      text-decoration-line: underline;
+    }
+  }
+  .btn-outline {
+    &:not(.btn-active):not(:hover) {
+      background-color: transparent;
+      color: var(--btn-bg);
+      --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);
+    }
+    &.btn-active {
+      border-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black);
+      background-color: color-mix(in oklab, var(--btn-bg, var(--color-base-200)) 90%, black);
+    }
+  }
+  .btn {
+    &:is(:disabled, [disabled], .btn-disabled) {
+      pointer-events: none;
+      border-color: transparent;
+      background-color: color-mix(in srgb, var(--color-neutral, oklch(32.1785% 0.02476 255.701624)) 20%, transparent);
+      color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+      &:hover {
+        pointer-events: none;
+        border-color: transparent;
+        background-color: color-mix(in srgb, var(--color-neutral, oklch(32.1785% 0.02476 255.701624)) 20%, transparent);
+        color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+      }
+    }
+  }
+  .btn {
+    &:is(input[type=checkbox]), &:is(input[type=radio]) {
+      width: auto;
+      appearance: none;
+      &::after {
+        --tw-content: attr(aria-label);
+        content: var(--tw-content);
+      }
+      &:checked {
+        border-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+        background-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+        color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
+        &:focus-visible {
+          outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+        }
+        &:hover {
+          background-color: color-mix(in oklab, var(--color-primary) 90%, black);
+          border-color: color-mix(in oklab, var(--color-primary) 90%, black);
+        }
+      }
+    }
+  }
+  .btn-xs {
+    height: var(--spacing-6, 1.5rem);
+    padding-left: var(--spacing-2, 0.5rem);
+    padding-right: var(--spacing-2, 0.5rem);
+    font-size: var(--font-size-xs);
+  }
+  .btn-sm {
+    height: var(--spacing-8, 2rem);
+    padding-left: var(--spacing-3, 0.75rem);
+    padding-right: var(--spacing-3, 0.75rem);
+    font-size: var(--font-size-sm);
+  }
+  .btn-md {
+    height: var(--spacing-10, 2.5rem);
+    padding-left: var(--spacing-4, 1rem);
+    padding-right: var(--spacing-4, 1rem);
+    font-size: var(--font-size-sm);
+  }
+  .btn-lg {
+    height: var(--spacing-14, 3.5rem);
+    padding-left: var(--spacing-6, 1.5rem);
+    padding-right: var(--spacing-6, 1.5rem);
+    font-size: var(--font-size-lg);
+  }
+  .btn-square {
+    width: var(--spacing-12, 3rem);
+    height: var(--spacing-12, 3rem);
+    padding-left: var(--spacing-0, 0px);
+    padding-right: var(--spacing-0, 0px);
+    &.btn-xs {
+      width: var(--spacing-6, 1.5rem);
+      height: var(--spacing-6, 1.5rem);
+    }
+    &.btn-sm {
+      width: var(--spacing-8, 2rem);
+      height: var(--spacing-8, 2rem);
+    }
+    &.btn-md {
+      width: var(--spacing-12, 3rem);
+      height: var(--spacing-12, 3rem);
+    }
+    &.btn-lg {
+      width: var(--spacing-16, 4rem);
+      height: var(--spacing-16, 4rem);
+    }
+  }
+  .btn-circle {
+    aspect-ratio: 1 / 1;
+    border-radius: calc(infinity * 1px);
+    padding-left: var(--spacing-0, 0px);
+    padding-right: var(--spacing-0, 0px);
+  }
+  .btn-wide {
+    width: var(--spacing-64, 16rem);
+  }
+  .btn-block {
+    width: 100%;
+  }
+  @keyframes button-pop {
+    0% {
+      transform: scale(var(--btn-focus-scale, 0.98));
+    }
+    40% {
+      transform: scale(1.02);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }

package/components/checkbox/config.js

@@ -1,12 +1,12 @@
-import { plugin } from '../../plugin.js';
+import { plugin } from '../../functions/plugin.js';
 import index from './index.js';
 
 export default {
-  plugins: [
-    plugin(function ({ addComponents }) {
-      addComponents({
-        ...index
-      });
-    })
-  ],
+	plugins: [
+		plugin(({ addComponents }) => {
+			addComponents({
+				...index
+			});
+		})
+	],
 };

package/components/checkbox/index.js

@@ -1,12 +1,12 @@
 export default {
   ".checkbox": {
-    "@apply border-base-content/20 rounded-[--radius-btn] size-6 cursor-pointer appearance-none border shrink-0 text-base-content relative p-1": {},
+    "@apply border-base-content/20 text-base-content relative shrink-0 size-6 cursor-pointer appearance-none rounded-[var(--radius-btn)] border p-1 align-middle": {},
     "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset",
-    "transition": "background-color .2s, box-shadow .2s",
+    "transition": "background-color 0.2s,\n    box-shadow 0.2s",
     "&:before": {
-      "@apply size-full block content-[''] bg-current opacity-0 rotate-45": {},
-      "transition": "clip-path .3s, opacity .1s, rotate .3s, translate .3s",
-      "transitionDelay": ".1s",
+      "@apply block size-full rotate-45 bg-current opacity-0 content-['']": {},
+      "transition": "clip-path 0.3s,\n      opacity 0.1s,\n      rotate 0.3s,\n      translate 0.3s",
+      "transitionDelay": "0.1s",
       "clipPath": "polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%)",
       "boxShadow": "0px 3px 0 0px oklch(100% 0 0 / 0.1) inset"
     },
@@ -14,7 +14,7 @@ export default {
       "@apply outline-2 outline-offset-2 outline-current": {}
     },
     "&:checked,\n  &[aria-checked=\"true\"]": {
-      "boxShadow": "0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px oklch(0% 0 0 / 0.1)",
+      "boxShadow": "0 8px 0 -4px oklch(100% 0 0 / 0.1) inset,\n      0 1px oklch(0% 0 0 / 0.1)",
       "&:before": {
         "@apply opacity-100": {},
         "clipPath": "polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%)"
@@ -22,7 +22,7 @@ export default {
     },
     "&:indeterminate": {
       "&:before": {
-        "@apply rotate-0 opacity-100 translate-y-[-35%]": {},
+        "@apply translate-y-[-35%] rotate-0 opacity-100": {},
         "clipPath": "polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%)"
       }
     }
@@ -94,32 +94,15 @@ export default {
     "@apply cursor-not-allowed opacity-20": {}
   },
   ".checkbox-xs": {
-    "@apply p-[.1875rem]": {},
-    "&[type=\"checkbox\"]": {
-      "@apply size-4": {},
-      "&:not(:indeterminate):before": {
-        "clipPath": "polygon(10% 100%, 10% 70%, 40% 70%, 40% 70%, 70% 70%, 70% 100%)"
-      },
-      "&:checked,\n        &[aria-checked=\"true\"]": {
-        "&:before": {
-          "clipPath": "polygon(10% 100%, 10% 70%, 40% 70%, 40% 0%, 70% 0%, 70% 100%)"
-        }
-      }
-    }
+    "@apply size-4 p-0.5": {}
   },
   ".checkbox-sm": {
-    "&[type=\"checkbox\"]": {
-      "@apply size-5": {}
-    }
+    "@apply size-5": {}
   },
   ".checkbox-md": {
-    "&[type=\"checkbox\"]": {
-      "@apply size-6": {}
-    }
+    "@apply size-6": {}
   },
   ".checkbox-lg": {
-    "&[type=\"checkbox\"]": {
-      "@apply size-8": {}
-    }
+    "@apply size-8": {}
   }
 };

package/components/checkbox.css

@@ -0,0 +1,144 @@
+.checkbox {
+    position: relative;
+    width: var(--spacing-6, 1.5rem);
+    height: var(--spacing-6, 1.5rem);
+    flex-shrink: 0;
+    cursor: pointer;
+    appearance: none;
+    border-radius: var(--radius-btn);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: color-mix(in srgb, var(--color-base-content, oklch(27.8078% 0.029596 256.84795)) 20%, transparent);
+    padding: var(--spacing-1, 0.25rem);
+    vertical-align: middle;
+    color: var(--color-base-content, oklch(27.8078% 0.029596 256.84795));
+    box-shadow: 0 1px oklch(0% 0 0 / 0.1) inset;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    &:before {
+      display: block;
+      width: 100%;
+      height: 100%;
+      rotate: 45deg;
+      background-color: currentColor;
+      opacity: 0%;
+      --tw-content: '';
+      content: var(--tw-content);
+      transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
+      transition-delay: 0.1s;
+      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
+      box-shadow: 0px 3px 0 0px oklch(100% 0 0 / 0.1) inset;
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: currentColor;
+    }
+    &:checked, &[aria-checked="true"] {
+      box-shadow: 0 8px 0 -4px oklch(100% 0 0 / 0.1) inset, 0 1px oklch(0% 0 0 / 0.1);
+      &:before {
+        opacity: 100%;
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+      }
+    }
+    &:indeterminate {
+      &:before {
+        --tw-translate-y: -35%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+        rotate: 0deg;
+        opacity: 100%;
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+      }
+    }
+  }
+  .checkbox-primary {
+    border-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+    color: var(--color-primary-content, oklch(89.824% 0.06192 275.75));
+    &:focus-visible {
+      outline-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+    }
+    &:checked {
+      background-color: var(--color-primary, oklch(49.12% 0.3096 275.75));
+    }
+  }
+  .checkbox-secondary {
+    border-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+    color: var(--color-secondary-content, oklch(98.71% 0.0106 342.55));
+    &:focus-visible {
+      outline-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+    }
+    &:checked {
+      background-color: var(--color-secondary, oklch(69.71% 0.329 342.55));
+    }
+  }
+  .checkbox-accent {
+    border-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+    color: var(--color-accent-content, oklch(15.352% 0.0368 183.61));
+    &:focus-visible {
+      outline-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+    }
+    &:checked {
+      background-color: var(--color-accent, oklch(76.76% 0.184 183.61));
+    }
+  }
+  .checkbox-success {
+    border-color: var(--color-success, oklch(64.8% 0.15 160));
+    color: var(--color-success-content, oklch(0% 0 0));
+    &:focus-visible {
+      outline-color: var(--color-success, oklch(64.8% 0.15 160));
+    }
+    &:checked {
+      background-color: var(--color-success, oklch(64.8% 0.15 160));
+    }
+  }
+  .checkbox-warning {
+    border-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+    color: var(--color-warning-content, oklch(0% 0 0));
+    &:focus-visible {
+      outline-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+    }
+    &:checked {
+      background-color: var(--color-warning, oklch(84.71% 0.199 83.87));
+    }
+  }
+  .checkbox-info {
+    border-color: var(--color-info, oklch(72.06% 0.191 231.6));
+    color: var(--color-info-content, oklch(0% 0 0));
+    &:focus-visible {
+      outline-color: var(--color-info, oklch(72.06% 0.191 231.6));
+    }
+    &:checked {
+      background-color: var(--color-info, oklch(72.06% 0.191 231.6));
+    }
+  }
+  .checkbox-error {
+    border-color: var(--color-error, oklch(71.76% 0.221 22.18));
+    color: var(--color-error-content, oklch(0% 0 0));
+    &:focus-visible {
+      outline-color: var(--color-error, oklch(71.76% 0.221 22.18));
+    }
+    &:checked {
+      background-color: var(--color-error, oklch(71.76% 0.221 22.18));
+    }
+  }
+  .checkbox:disabled {
+    cursor: not-allowed;
+    opacity: 20%;
+  }
+  .checkbox-xs {
+    width: var(--spacing-4, 1rem);
+    height: var(--spacing-4, 1rem);
+    padding: var(--spacing-0_5, 0.125rem);
+  }
+  .checkbox-sm {
+    width: var(--spacing-5, 1.25rem);
+    height: var(--spacing-5, 1.25rem);
+  }
+  .checkbox-md {
+    width: var(--spacing-6, 1.5rem);
+    height: var(--spacing-6, 1.5rem);
+  }
+  .checkbox-lg {
+    width: var(--spacing-8, 2rem);
+    height: var(--spacing-8, 2rem);
+  }

package/components/input/config.js

@@ -1,12 +1,12 @@
-import { plugin } from '../../plugin.js';
+import { plugin } from '../../functions/plugin.js';
 import index from './index.js';
 
 export default {
-  plugins: [
-    plugin(function ({ addComponents }) {
-      addComponents({
-        ...index
-      });
-    })
-  ],
+	plugins: [
+		plugin(({ addComponents }) => {
+			addComponents({
+				...index
+			});
+		})
+	],
 };

package/components/input/index.js

@@ -1,17 +1,17 @@
 export default {
   ".input": {
-    "@apply shrink appearance-none h-12 px-4 text-sm leading-loose bg-base-100 rounded-btn border border-transparent text-base": {},
+    "@apply bg-base-100 rounded-btn h-10 shrink appearance-none border border-transparent px-4 text-base text-sm leading-loose align-middle": {},
     "input": {
-      "@apply bg-transparent border-none": {},
+      "@apply border-none bg-transparent": {},
       "&:focus": {
         "@apply outline-none": {}
       }
     },
-    "&:focus": {
-      "@apply border-base-content/20 outline-base-content/10 outline outline-4": {}
+    "&:focus,\n  &:focus-within": {
+      "@apply border-base-content/20 outline-base-content/20 outline outline-2 outline-offset-2": {}
     },
-    "&:has(> input[disabled]),\n    &:is(:disabled, [disabled], .btn-disabled)": {
-      "@apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 cursor-not-allowed placeholder-base-content/20": {}
+    "&:has(> input[disabled]),\n  &:is(:disabled, [disabled])": {
+      "@apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 placeholder-base-content/20 cursor-not-allowed": {}
     },
     "&:has(> input[disabled])>input[disabled]": {
       "@apply cursor-not-allowed": {}
@@ -31,14 +31,14 @@ export default {
     },
     "&.input-bordered": {
       "@apply border-base-content/20": {},
-      "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset, 0 -1px oklch(100% 0 0 / 0.1) inset",
+      "boxShadow": "0 1px oklch(0% 0 0 / 0.1) inset,\n      0 -1px oklch(100% 0 0 / 0.1) inset",
       "&:focus": {
         "boxShadow": "0 1px oklch(0% 0 0 / 0.1)"
       }
     },
     "&.input-ghost": {
       "@apply bg-base-100/5 shadow-none": {},
-      "&:focus,\n        &:focus-within": {
+      "&:focus,\n    &:focus-within": {
         "@apply text-base-content bg-base-100": {},
         "boxShadow": "none"
       }
@@ -46,50 +46,50 @@ export default {
     "&.input-primary": {
       "@apply border-primary": {},
       "backgroundColor": "color-mix(in oklab, var(--color-primary) 2%, transparent)",
-      "&:focus,\n        &:focus-within": {
-        "@apply outline-primary/30 border-primary": {}
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-primary border-primary": {}
       }
     },
     "&.input-secondary": {
       "@apply border-secondary": {},
       "backgroundColor": "color-mix(in oklab, var(--color-secondary) 2%, transparent)",
-      "&:focus,\n        &:focus-within": {
-        "@apply outline-secondary/30 border-secondary": {}
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-secondary border-secondary": {}
       }
     },
     "&.input-accent": {
       "@apply border-accent": {},
       "backgroundColor": "color-mix(in oklab, var(--color-accent) 2%, transparent)",
-      "&:focus,\n        &:focus-within": {
-        "@apply outline-accent/30 border-accent": {}
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-accent border-accent": {}
       }
     },
     "&.input-info": {
       "@apply border-info": {},
       "backgroundColor": "color-mix(in oklab, var(--color-info) 2%, transparent)",
-      "&:focus,\n        &:focus-within": {
-        "@apply outline-info/30 border-info": {}
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-info border-info": {}
       }
     },
     "&.input-success": {
       "@apply border-success": {},
       "backgroundColor": "color-mix(in oklab, var(--color-success) 2%, transparent)",
-      "&:focus,\n        &:focus-within": {
-        "@apply outline-success/30 border-success": {}
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-success border-success": {}
       }
     },
     "&.input-warning": {
       "@apply border-warning": {},
       "backgroundColor": "color-mix(in oklab, var(--color-warning) 2%, transparent)",
-      "&:focus,\n        &:focus-within": {
-        "@apply outline-warning/30 border-warning": {}
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-warning border-warning": {}
       }
     },
     "&.input-error": {
       "@apply border-error": {},
       "backgroundColor": "color-mix(in oklab, var(--color-error) 2%, transparent)",
-      "&:focus,\n        &:focus-within": {
-        "@apply outline-error/30 border-error": {}
+      "&:focus,\n    &:focus-within": {
+        "@apply outline-error border-error": {}
       }
     },
     "&.input-xs": {
@@ -109,7 +109,7 @@ export default {
       }
     },
     "&.input-md": {
-      "@apply h-12 px-4 text-sm leading-loose": {},
+      "@apply h-10 px-4 text-sm leading-loose": {},
       "&[type=\"number\"]": {
         "&::-webkit-inner-spin-button": {
           "@apply -my-4 -me-4": {}
@@ -117,7 +117,7 @@ export default {
       }
     },
     "&.input-lg": {
-      "@apply h-16 px-6 text-lg leading-loose": {},
+      "@apply h-14 px-6 text-lg leading-loose": {},
       "&[type=\"number\"]": {
         "&::-webkit-inner-spin-button": {
           "@apply -my-6 -me-6": {}