frutjam 0.3.0-alpha.2 → 0.4.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "0.3.0-alpha.2",
+  "version": "0.4.0-alpha.0",
   "description": "A utility-first CSS framework UI Library",
   "main": "./dist/frutjam.css",
   "browser": "dist/frutjam.css",
@@ -37,8 +37,8 @@
     "url": "https://github.com/nezanuha/frutjam/issues"
   },
   "dependencies": {
-    "@tailwindcss/postcss": "^4.0.14",
-    "tailwindcss": "^4.0.14"
+    "@tailwindcss/postcss": "^4.0.15",
+    "tailwindcss": "^4.0.15"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",

package/src/base/preflight.css

@@ -2,6 +2,6 @@
     :root,
     [data-theme] {
       background-color: var(--color-surface);
-      color: var(--color-surface-content);
+      color: var(--color-surface-fore);
     }
 }

package/src/components/accordion.css

@@ -1,4 +1,4 @@
-@import '../themes/colors/base.css';
+@import '../themes/styles/base.css';
 @utility accordion {
     @layer components {
         @apply grid divide-y divide-info border border-info cursor-pointer rounded-md;

package/src/components/button copy.css

@@ -0,0 +1,469 @@
+@import "../themes/styles/base.css";
+@import "../themes/animation/wiggle.css";
+
+@utility btn-dashed {
+  @layer components {
+    &:is(.btn-primary) {
+      @apply text-primary bg-transparent border border-dashed border-primary;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-primary bg-gradient-to-br from-primary via-primary/95 to-primary;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+    &:is(.btn-secondary) {
+      @apply text-secondary bg-transparent border border-dashed border-secondary;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-secondary bg-gradient-to-br from-secondary via-secondary/95 to-secondary;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+    &:is(.btn-success) {
+      @apply text-success bg-transparent border border-dashed border-success;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-success bg-gradient-to-br from-success via-success/95 to-success;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+    &:is(.btn-error) {
+      @apply text-error bg-transparent border border-dashed border-error;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-error bg-gradient-to-br from-error via-error/95 to-error;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-warning) {
+      @apply text-warning bg-transparent border border-dashed border-warning;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-warning bg-gradient-to-br from-warning via-warning/95 to-warning;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-info) {
+      @apply text-info bg-transparent border border-dashed border-info;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-info bg-gradient-to-br from-info via-info/95 to-info;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-accent) {
+      @apply text-accent bg-transparent border border-dashed border-accent;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-accent bg-gradient-to-br from-accent via-accent/95 to-accent;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility btn-outline {
+  @layer components {
+    &:is(.btn-primary) {
+      @apply text-primary bg-transparent ring-1 ring-primary;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-primary bg-gradient-to-br from-primary via-primary/95 to-primary;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+    &:is(.btn-secondary) {
+      @apply text-secondary bg-transparent ring-1 ring-secondary;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-secondary bg-gradient-to-br from-secondary via-secondary/95 to-secondary;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+    &:is(.btn-success) {
+      @apply text-success bg-transparent ring-1 ring-success;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-success bg-gradient-to-br from-success via-success/95 to-success;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+    &:is(.btn-error) {
+      @apply text-error bg-transparent ring-1 ring-error;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-error bg-gradient-to-br from-error via-error/95 to-error;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-warning) {
+      @apply text-warning bg-transparent ring-1 ring-warning;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-warning bg-gradient-to-br from-warning via-warning/95 to-warning;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-info) {
+      @apply text-info bg-transparent ring-1 ring-info;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-info bg-gradient-to-br from-info via-info/95 to-info;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-accent) {
+      @apply text-accent bg-transparent ring-1 ring-accent;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 text-surface bg-accent bg-gradient-to-br from-accent via-accent/95 to-accent;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility btn-soft {
+  @layer components {
+    &:is(.btn-primary) {
+      @apply text-primary bg-primary/20 ring-[0.5px] ring-primary/20;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle  bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-secondary) {
+      @apply text-secondary bg-secondary/20 ring-[0.5px] ring-secondary/20;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-success) {
+      @apply text-success bg-success/20 ring-[0.5px] ring-success/20;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-error) {
+      @apply text-error bg-error/20 ring-[0.5px] ring-error/20;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-warning) {
+      @apply text-warning bg-warning/20 ring-[0.5px] ring-warning/20;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-info) {
+      @apply text-info bg-info/20 ring-[0.5px] ring-info/20;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+
+    &:is(.btn-accent) {
+      @apply text-accent bg-accent/20 ring-[0.5px] ring-accent/20;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility btn-xs {
+  @layer components {
+    @apply px-2.5 py-1.5 text-xs;
+  }
+}
+
+@utility btn-sm {
+  @layer components {
+    @apply px-3 py-2 text-sm;
+  }
+}
+
+@utility btn-md {
+  @layer components {
+    @apply px-3.5 py-2.5 text-sm;
+  }
+}
+
+@utility btn-lg {
+  @layer components {
+    @apply px-4 py-3 text-base;
+  }
+}
+
+@utility btn-xl {
+  @layer components {
+    @apply px-4.5 py-3.5 text-base;
+  }
+}
+
+@utility btn-2xl {
+  @layer components {
+    @apply px-5 py-4 text-base;
+  }
+}
+
+@utility btn-circle {
+  @layer components {
+    @apply rounded-full size-auto aspect-square;
+  }
+}
+
+@utility btn-square {
+  @layer components {
+    @apply size-auto aspect-square;
+  }
+}
+
+/* buttons colors */
+@utility btn-primary {
+  @layer components {
+    &:not(.btn-dashed, .btn-outline, .btn-soft) {
+      @apply text-primary-fore bg-gradient-to-br from-primary via-primary/95 to-primary ring-[0.5px] ring-primary/50;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 bg-gradient-to-tr via-primary/90;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle  bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility btn-secondary {
+  @layer components {
+    &:not(.btn-dashed, .btn-outline, .btn-soft) {
+      @apply text-secondary-fore bg-gradient-to-br from-secondary via-secondary/95 to-secondary ring-[0.5px] ring-secondary/50;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 bg-gradient-to-tr via-secondary/90;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle  bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility btn-success {
+  @layer components {
+    &:not(.btn-dashed, .btn-outline, .btn-soft) {
+      @apply text-success-fore bg-gradient-to-br from-success via-success/95 to-success ring-[0.5px] ring-success/50;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 bg-gradient-to-tr via-success/90;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle  bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility btn-error {
+  @layer components {
+    &:not(.btn-dashed, .btn-outline, .btn-soft) {
+      @apply text-error-fore bg-gradient-to-br from-error via-error/95 to-error ring-[0.5px] ring-error/50;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 bg-gradient-to-tr via-error/90;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility btn-warning {
+  @layer components {
+    &:not(.btn-dashed, .btn-outline, .btn-soft) {
+      @apply text-warning-fore bg-gradient-to-br from-warning via-warning/95 to-warning ring-[0.5px] ring-warning/50;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 bg-gradient-to-tr via-warning/90;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle  bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility btn-info {
+  @layer components {
+    &:not(.btn-dashed, .btn-outline, .btn-soft) {
+      @apply text-info-fore bg-gradient-to-br from-info via-info/95 to-info ring-[0.5px] ring-info/50;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 bg-gradient-to-tr via-info/90;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle  bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility btn-accent {
+  @layer components {
+    &:not(.btn-dashed, .btn-outline, .btn-soft) {
+      @apply text-accent-fore bg-gradient-to-br from-accent via-accent/95 to-accent ring-[0.5px] ring-accent/50;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 bg-gradient-to-tr via-accent/90;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle  bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}
+
+/* default button */
+@utility btn {
+  @layer components {
+    @apply btn-md text-[buttonFace] bg-default text-black relative inline-flex shrink-0 flex-nowrap items-center justify-center gap-1.5 text-center align-middle rounded-lg font-medium relative overflow-hidden text-xs transition duration-300 text-center leading-4;
+
+    &:not(.btn-dashed, .btn-outline, .btn-soft) {
+      @apply bg-gradient-to-br from-default via-default/95 to-default ring-[0.5px] ring-neutral-300;
+
+      @media (hover: hover) {
+        &:hover {
+          @apply ring-2 bg-gradient-to-tr via-default/90;
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/button.css

@@ -1,241 +1,133 @@
-@import '../themes/colors/base.css';
-@utility btn {
-  @layer components {
-    @apply text-[buttonFace] flex items-center text-center rounded-lg font-medium cursor-pointer relative overflow-hidden text-xs transition duration-300 ring ring-black/40 inset-ring inset-ring-black/20 text-center;
+@import "../themes/styles/base.css";
+@import "../themes/animation/wiggle.css";
 
-    &:focus{
-      @apply inset-ring-black/10;
-    }
 
-    &:not(.btn-dashed, .btn-outline, .btn-soft){
-      @apply border-b-2 border-black/30;
-    }
-  }
-}
-
-@utility btn-dashed {
+@utility btn-* {
   @layer components {
-    @apply border border-dashed;
-  }
-}
+    @apply relative inline-flex shrink-0 flex-nowrap items-center justify-center gap-1.5 text-center align-middle font-medium relative overflow-hidden text-xs transition duration-300 text-center leading-4;
+    @apply rounded-[var(--radius-size)];
+    &:is(.btn-default, .btn-primary, .btn-secondary, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-accent) {
 
-@utility btn-outline {
-  @layer components {
-    @apply border border-solid;
-  }
-}
-
-@utility btn-soft {
-  @layer components {
-
-    &:is(.btn-primary){
-      @apply bg-primary/10 text-primary;
-      @media (hover: hover){
+      /* global */
+      @media (hover: hover) {
         &:hover {
-          @apply bg-primary text-[var(--color-primary-content)];
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+          }
         }
       }
-    }
 
-    &:is(.btn-secondary){
-      @apply bg-secondary/10 text-secondary;
-      @media (hover: hover){
-        &:hover {
-          @apply bg-secondary text-[var(--color-secondary-content)];
+      /* button for checkbox and radio button */
+      &:is(input[type="checkbox"], input[type="radio"]) {
+        @apply appearance-none;
+    
+        &::after {
+          content: attr(aria-label);
+        }
+    
+        &:checked {
+          @apply ring-2 bg-gradient-to-tr via-[--value(--color-*)]/90 isolate;
         }
       }
-    }
 
-    &:is(.btn-accent){
-      @apply bg-accent/10 text-accent;
-      @media (hover: hover){
-        &:hover {
-          @apply bg-accent text-[var(--color-accent-content)];
-        }
+      /* disabled buttons */
+      &:is(:disabled, [disabled], .btn-disabled) {
+        @apply bg-[--value(--color-*)]/10 text-[--value(--color-*)]/30 pointer-events-none;
       }
-    }
 
-    &:is(.btn-info){
-      @apply bg-info/10 text-info;
-      @media (hover: hover){
-        &:hover {
-          @apply bg-info text-[var(--color-info-content)];
+      /* buttons colors */
+      &:not(.btn-dashed, .btn-outline, .btn-soft, :disabled, [disabled], .btn-disabled) {
+        &:not(.btn-ghost, .btn-link) {
+          @apply text-[--value(--color-*-fore)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)] ring-[0.5px] ring-[--value(--color-*)]/50
+        }
+        &:is(.btn-ghost) {
+          @apply text-[--value(--color-*)];
         }
-      }
-    }
 
-    &:is(.btn-success){
-      @apply bg-success/10 text-success;
-      @media (hover: hover){
-        &:hover {
-          @apply bg-success text-[var(--color-success-content)];
+        @media (hover: hover) {
+          &:hover {
+            &:is(.btn-ghost) {
+              @apply text-[--value(--color-*-fore)] from-[--value(--color-*)] to-[--value(--color-*)] ring-[--value(--color-*)]/50 duration-500;
+            }
+            &:not(.btn-link) {
+              @apply ring-2 bg-gradient-to-tr via-[--value(--color-*)]/90;
+            }
+            &:is(.btn-link) {
+              @apply text-[--value(--color-*)] underline underline-offset-4 cursor-pointer;
+            }
+          }
         }
       }
-    }
 
-    &:is(.btn-warning){
-      @apply bg-warning/10 text-warning;
-      @media (hover: hover){
-        &:hover {
-          @apply bg-warning text-[var(--color-warning-content)];
+      /* button dashed */
+      &:is(.btn-dashed) {
+        @apply text-[--value(--color-*)] bg-transparent border border-dashed border-[--value(--color-*)];
+
+        @media (hover: hover) {
+          &:hover {
+            @apply ring-2 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
+          }
         }
       }
-    }
 
-    &:is(.btn-error){
-      @apply bg-error/10 text-error;
-      @media (hover: hover){
-        &:hover {
-          @apply bg-error text-[var(--color-error-content)];
+      /* button outline */
+      &:is(.btn-outline) {
+        @apply text-[--value(--color-*)] bg-transparent ring-1 ring-[--value(--color-*)];
+  
+        @media (hover: hover) {
+          &:hover {
+            @apply ring-2 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
+          }
         }
       }
-    }
-  }
-}
-
-@utility btn-xs {
-  @layer components {
-    @apply px-2.5 py-1.5 text-xs leading-4;
-  }
-}
-
-@utility btn-sm {
-  @layer components {
-    @apply px-3 py-2 text-sm leading-4;
-  }
-}
-
-@utility btn-md {
-  @layer components {
-    @apply px-4 py-2 text-sm leading-5;
-  }
-}
-
-@utility btn-lg {
-  @layer components {
-    @apply px-4 py-2 text-base leading-6;
-  }
-}
-
-@utility btn-xl {
-  @layer components {
-    @apply px-6 py-3 text-base leading-6;
-  }
-}
 
-@utility btn-full {
-  @layer components {
-    @apply rounded-full leading-4;
-  }
-}
-
-@utility btn-primary {
-  @layer components {
-    @apply bg-primary text-primary-content;
-    
-    &:is(.btn-dashed, .btn-outline):not(.btn-soft){
-      @apply bg-white text-primary border-primary;
-    }
-
-    @media (hover: hover){
-      &:hover {
-        @apply bg-primary text-primary-content border-solid opacity-90;
+      /* button soft */
+      &:is(.btn-soft) {
+        @apply text-[--value(--color-*)] bg-[--value(--color-*)]/20 ring-[0.5px] ring-[--value(--color-*)]/20;
+  
+        @media (hover: hover) {
+          &:hover {
+            @apply ring-2;
+          }
+        }
       }
     }
-  }
-}
-
-@utility btn-secondary {
-  @layer components {
-    @apply bg-secondary text-secondary-content;
-    
-    &:is(.btn-dashed, .btn-outline){
-      @apply bg-white text-secondary border-secondary;
-    }
 
-    @media (hover: hover){
-      &:hover {
-        @apply bg-secondary text-secondary-content border-solid opacity-90;
+    /* button sizes */
+    &:is(.btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-2xl) {
+      &:is(.btn-xs) {
+        @apply px-2.5 py-1.5 text-xs;
       }
-    }
-  }
-}
-
-@utility btn-accent {
-  @layer components {
-    @apply bg-accent text-accent-content;
-    
-    &:is(.btn-dashed, .btn-outline){
-      @apply bg-white text-accent border-accent;
-    }
-
-    @media (hover: hover){
-      &:hover {
-        @apply bg-accent text-accent-content border-solid opacity-90;
+      &:is(.btn-sm) {
+        @apply px-3 py-2 text-sm;
       }
-    }
-  }
-}
-
-@utility btn-info {
-  @layer components {
-    @apply bg-info text-info-content;
-    
-    &:is(.btn-dashed, .btn-outline){
-      @apply bg-white text-info border-info;
-    }
-
-    @media (hover: hover){
-      &:hover {
-        @apply bg-info text-info-content border-solid opacity-90;
+      &:is(.btn-md) {
+        @apply px-3.5 py-2.5 text-sm;
       }
-    }
-  }
-}
-
-@utility btn-success {
-  @layer components {
-    @apply bg-success text-success-content;
-    
-    &:is(.btn-dashed, .btn-outline){
-      @apply bg-white text-success border-success;
-    }
-
-    @media (hover: hover){
-      &:hover {
-        @apply bg-success text-success-content border-solid opacity-90;
+      &:is(.btn-lg) {
+        @apply px-4 py-3 text-base;
       }
-    }
-  }
-}
-
-@utility btn-warning {
-  @layer components {
-    @apply bg-warning text-warning-content;
-    
-    &:is(.btn-dashed, .btn-outline){
-      @apply bg-white text-warning border-warning;
-    }
-
-    @media (hover: hover){
-      &:hover {
-        @apply bg-warning text-warning-content border-solid opacity-90;
+      &:is(.btn-xl) {
+        @apply px-4.5 py-3.5 text-base;
+      }
+      &:is(.btn-2xl) {
+        @apply px-5 py-4 text-base;
       }
-    }
-  }
-}
-
-@utility btn-error {
-  @layer components {
-    @apply bg-error text-error-content;
-    
-    &:is(.btn-dashed, .btn-outline){
-      @apply bg-white text-error border-error;
     }
 
-    @media (hover: hover){
-      &:hover {
-        @apply bg-error text-error-content border-solid opacity-80;
+    /* button modifier */
+    &:is(.btn-circle, .btn-sqaure, .btn-wide, .btn-block) {
+      &:is(.btn-circle) {
+        @apply rounded-full size-auto aspect-square;
+      }
+      &:is(.btn-square) {
+        @apply size-auto aspect-square;
+      }
+      &:is(.btn-wide) {
+        @apply w-full max-w-64;
+      }
+      &:is(.btn-block) {
+        @apply w-full;
       }
     }
   }

package/src/components/checkbox.css

@@ -1,4 +1,4 @@
-@import '../themes/colors/base.css';
+@import '../themes/styles/base.css';
 @utility checkbox {
     @apply size-4 rounded-md relative shrink-0 cursor-pointer appearance-none p-1 align-middle shadow ring duration-150;
 
@@ -40,7 +40,7 @@
   }
   
   @utility checkbox-primary {
-    @apply bg-primary/20 text-primary-content ring-primary;
+    @apply bg-primary/20 text-primary-fore ring-primary;
     &:checked,
     &[aria-checked="true"] {
         @apply bg-primary;
@@ -48,7 +48,7 @@
   }
   
   @utility checkbox-secondary {
-    @apply bg-secondary/20 text-secondary-content ring-secondary;
+    @apply bg-secondary/20 text-secondary-fore ring-secondary;
     &:checked,
     &[aria-checked="true"] {
         @apply bg-secondary;
@@ -56,7 +56,7 @@
   }
   
   @utility checkbox-accent {
-    @apply bg-accent/20 text-accent-content ring-accent;
+    @apply bg-accent/20 text-accent-fore ring-accent;
     &:checked,
     &[aria-checked="true"] {
         @apply bg-accent;
@@ -65,7 +65,7 @@
   
   
   @utility checkbox-info {
-    @apply bg-info/20 text-info-content ring-info;
+    @apply bg-info/20 text-info-fore ring-info;
     &:checked,
     &[aria-checked="true"] {
         @apply bg-info;
@@ -73,7 +73,7 @@
   }
   
   @utility checkbox-success {
-    @apply bg-success/20 text-success-content ring-success;
+    @apply bg-success/20 text-success-fore ring-success;
     &:checked,
     &[aria-checked="true"] {
         @apply bg-success;
@@ -81,7 +81,7 @@
   }
   
   @utility checkbox-warning {
-    @apply bg-warning/20 text-warning-content ring-warning;
+    @apply bg-warning/20 text-warning-fore ring-warning;
     &:checked,
     &[aria-checked="true"] {
         @apply bg-warning;
@@ -89,7 +89,7 @@
   }
   
   @utility checkbox-error {
-    @apply bg-error/20 text-error-content ring-error;
+    @apply bg-error/20 text-error-fore ring-error;
     &:checked,
     &[aria-checked="true"] {
         @apply bg-error;

package/src/components/drawer.css

@@ -1,4 +1,4 @@
-@import "../themes/colors/base.css";
+@import "../themes/styles/base.css";
 @utility drawer {
   @layer components {
     @apply pointer-events-none invisible absolute inset-0 m-0 grid h-full max-h-none w-full max-w-none place-items-start bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
@@ -31,7 +31,7 @@
 
 @utility drawer-body {
   @layer components {
-    @apply bg-surface text-surface-content rounded-none border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 h-screen max-h-none w-11/12  w-auto max-w-none p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+    @apply bg-surface text-surface-fore rounded-none border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 h-screen max-h-none w-11/12  w-auto max-w-none p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
     translate: -100% 0;
     scale: 1;
   }

package/src/components/input.css

@@ -0,0 +1,15 @@
+@import "../themes/styles/base.css";
+
+@utility input-* {
+  @layer components {
+    @apply border border-[--value(--color-*-fore)]/20 rounded-[var(--radius-size)] transition duration-300 outline-0 px-1 py-0.5;
+    &:focus, &:focus-within {
+        @apply border-[--value(--color-*-fore)];
+    }
+    @media (hover: hover) {
+        &:hover {
+            @apply border-[--value(--color-*-fore)]/40
+        }
+    }
+  }
+}

package/src/components/modal.css

@@ -1,4 +1,4 @@
-@import "../themes/colors/base.css";
+@import "../themes/styles/base.css";
 @import "../themes/placement.css";
 @import "../themes/animation/slide.css";
 
@@ -34,7 +34,7 @@
 
 @utility modal-body {
   @layer components {
-    @apply bg-surface text-surface-content rounded-2xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+    @apply bg-surface text-surface-fore rounded-[calc(var(--radius-size)*2)] border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
   }
 }
 

package/src/components/popover.css

@@ -1,4 +1,4 @@
-@import "../themes/colors/base.css";
+@import "../themes/styles/base.css";
 @utility modal {
   @layer components {
     @apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
@@ -31,7 +31,7 @@
 
 @utility modal-body {
   @layer components {
-    @apply bg-surface text-surface-content rounded-3xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+    @apply bg-surface text-surface-fore rounded-3xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
   }
 }
 

package/src/main.css

@@ -1,4 +1,5 @@
 @import "./components/button.css";
+@import "./components/input.css";
 @import "./components/modal.css";
 @import "./components/drawer.css";
 @import "./components/checkbox.css";

package/src/themes/animation/wiggle.css

@@ -0,0 +1,14 @@
+@theme {
+    --animate-wiggle: wiggle 1s linear infinite;
+    @keyframes wiggle {
+      0% {
+        transform: rotate(345deg) translateY(-100%);
+      }
+      50% {
+        transform: rotate(325deg) translateY(100%);
+      }
+      100% {
+        transform: rotate(345deg) translateY(200%);
+      }
+    }
+}

package/src/themes/styles/base.css

@@ -0,0 +1,42 @@
+@import "../../base/preflight.css" layer(theme);
+@import "./light.css" layer(theme);
+@import "./dark.css" layer(theme);
+
+@custom-variant theme-dark (&:where([data-theme="dark"] *));
+@custom-variant theme-light (&:where([data-theme="light"] *));
+
+:root {
+    color-scheme: var(--color-scheme);
+}
+
+@theme inline {
+
+    --color-backdrop: var(--backdrop-color);
+
+    --color-surface: var(--surface-back-color);
+    --color-surface-fore: var(--surface-fore-color);
+
+    --color-default: var(--default-back-color);
+    --color-default-fore: var(--default-fore-color);
+
+    --color-primary: var(--primary-back-color);
+    --color-primary-fore: var(--primary-fore-color);
+
+    --color-secondary: var(--secondary-back-color);
+    --color-secondary-fore: var(--secondary-fore-color);
+
+    --color-accent: var(--accent-back-color);
+    --color-accent-fore: var(--accent-fore-color);
+
+    --color-info: var(--info-back-color);
+    --color-info-fore: var(--info-fore-color);
+
+    --color-success: var(--success-back-color);
+    --color-success-fore: var(--success-fore-color);
+
+    --color-warning: var(--warning-back-color);
+    --color-warning-fore: var(--warning-fore-color);
+
+    --color-error: var(--error-back-color);
+    --color-error-fore: var(--error-fore-color);
+}

package/src/themes/styles/dark.css

@@ -0,0 +1,36 @@
+@layer theme {
+    [data-theme="dark"] {
+        --color-scheme: dark;
+
+        --radius-size: 0.5rem;
+
+        --backdrop-color: color-mix(in oklab,oklch(.141 .005 265.823)20%,transparent);
+
+        --surface-back-color: oklch(0.216 0.006 56.043);
+        --surface-fore-color: oklch(100% 0 0);
+
+        --default-back-color: oklch(8.15% 0 0);
+        --default-fore-color: oklch(92.19% 0 0);
+
+        --primary-back-color: oklch(15.72% 0.0267 199.35);
+        --primary-fore-color: oklch(0.961151 0.003 300.98);
+    
+        --secondary-back-color:  oklch(0.22 0 0);
+        --secondary-fore-color: oklch(100% 0 0);
+    
+        --accent-back-color: oklch(24.47% 0.0416 202.69);
+        --accent-fore-color: oklch(100% 0 0);
+    
+        --info-back-color: oklch(0.268 0.007 34.298);
+        --info-fore-color: oklch(99.78% 0.0105 106.59);
+    
+        --success-back-color: oklch(45.77% 0.155081 142.3128);
+        --success-fore-color: oklch(100% 0 0);
+    
+        --warning-back-color: oklch(78.45% 0.1486 83.48);
+        --warning-fore-color: oklch(15.72% 0.0267 199.35);
+    
+        --error-back-color: oklch(58.57% 0.2363 29.65);
+        --error-fore-color: oklch(100% 0 0);
+    }
+}

package/src/themes/styles/light.css

@@ -0,0 +1,37 @@
+@layer theme {
+    :not(data-theme), [data-theme="light"] {
+        --color-scheme: light;
+
+        --radius-size: 0.5rem;
+
+        --backdrop-color: color-mix(in oklab,oklch(.141 .005 285.823)20%,transparent);
+
+        --surface-color: oklch(100% 0 0);
+        --surface-fore-color: oklch(15.72% 0.0267 199.35);
+
+        --default-color: oklch(92.19% 0 0);
+        --default-fore-color: oklch(8.15% 0 0);
+
+        --primary-color: oklch(15.72% 0.0267 199.35);
+        --primary-fore-color: oklch(0.961151 0.003 300.98);
+    
+        --secondary-color:  oklch(84.27% 0.0057 31.06);
+        --secondary-fore-color: oklch(15.72% 0.0267 199.35);
+    
+        --accent-color: oklch(24.47% 0.0416 202.69);
+        --accent-fore-color: oklch(100% 0 0);
+    
+        --info-color: oklch(93.01% 0.0111 348.44);
+        --info-fore-color: oklch(24.47% 0.0416 202.69);
+    
+        --success-color: oklch(45.77% 0.155081 142.3128);
+        --success-fore-color: oklch(100% 0 0);
+    
+        --warning-color: oklch(78.45% 0.1486 83.48);
+        --warning-fore-color: oklch(15.72% 0.0267 199.35);
+    
+        --error-color: oklch(58.57% 0.2363 29.65);
+        --error-fore-color: oklch(100% 0 0);
+    }
+    
+}

package/src/utilities/headings.css

@@ -11,6 +11,7 @@
         @apply font-bold;
         font-size: var(--style-h2-size);
     }
+    
 }
 
 @utility heading-3 {

package/src/themes/colors/base.css

@@ -1,39 +0,0 @@
-@import "../../base/preflight.css" layer(theme);
-@import "./light.css" layer(theme);
-@import "./dark.css" layer(theme);
-
-@custom-variant theme-dark (&:where([data-theme="dark"] *));
-@custom-variant theme-light (&:where([data-theme="light"] *));
-
-:root {
-    color-scheme: var(--color-scheme);
-}
-
-@theme inline {
-
-    --color-backdrop: var(--backdrop-color);
-
-    --color-surface: var(--surface-color);
-    --color-surface-content: var(--surface-content-color);
-
-    --color-primary: var(--primary-color);
-    --color-primary-content: var(--primary-content-color);
-
-    --color-secondary: var(--secondary-color);
-    --color-secondary-content: var(--secondary-content-color);
-
-    --color-accent: var(--accent-color);
-    --color-accent-content: var(--accent-content-color);
-
-    --color-info: var(--info-color);
-    --color-info-content: var(--info-content-color);
-
-    --color-success: var(--success-color);
-    --color-success-content: var(--success-content-color);
-
-    --color-warning: var(--warning-color);
-    --color-warning-content: var(--warning-content-color);
-
-    --color-error: var(--error-color);
-    --color-error-content: var(--error-content-color);
-}

package/src/themes/colors/dark.css

@@ -1,31 +0,0 @@
-@layer theme {
-    [data-theme="dark"] {
-        --color-scheme: dark;
-
-        --backdrop-color: color-mix(in oklab,oklch(.141 .005 265.823)20%,transparent);
-
-        --surface-color: oklch(0.216 0.006 56.043);
-        --surface-content-color: oklch(100% 0 0);
-
-        --primary-color: oklch(15.72% 0.0267 199.35);
-        --primary-content-color: oklch(0.961151 0.003 300.98);
-    
-        --secondary-color:  oklch(0.22 0 0);
-        --secondary-content-color: oklch(100% 0 0);
-    
-        --accent-color: oklch(24.47% 0.0416 202.69);
-        --accent-content-color: oklch(100% 0 0);
-    
-        --info-color: oklch(0.268 0.007 34.298);
-        --info-content-color: oklch(99.78% 0.0105 106.59);
-    
-        --success-color: oklch(45.77% 0.155081 142.3128);
-        --success-content-color: oklch(100% 0 0);
-    
-        --warning-color: oklch(78.45% 0.1486 83.48);
-        --warning-content-color: oklch(15.72% 0.0267 199.35);
-    
-        --error-color: oklch(58.57% 0.2363 29.65);
-        --error-content-color: oklch(100% 0 0);
-    }
-}

package/src/themes/colors/light.css

@@ -1,32 +0,0 @@
-@layer theme {
-    :root, [data-theme="light"] {
-        --color-scheme: light;
-
-        --backdrop-color: color-mix(in oklab,oklch(.141 .005 285.823)20%,transparent);
-
-        --surface-color: oklch(100% 0 0);
-        --surface-content-color: oklch(15.72% 0.0267 199.35);
-
-        --primary-color: oklch(15.72% 0.0267 199.35);
-        --primary-content-color: oklch(0.961151 0.003 300.98);
-    
-        --secondary-color:  oklch(84.27% 0.0057 31.06);
-        --secondary-content-color: oklch(15.72% 0.0267 199.35);
-    
-        --accent-color: oklch(24.47% 0.0416 202.69);
-        --accent-content-color: oklch(100% 0 0);
-    
-        --info-color: oklch(93.01% 0.0111 348.44);
-        --info-content-color: oklch(24.47% 0.0416 202.69);
-    
-        --success-color: oklch(45.77% 0.155081 142.3128);
-        --success-content-color: oklch(100% 0 0);
-    
-        --warning-color: oklch(78.45% 0.1486 83.48);
-        --warning-content-color: oklch(15.72% 0.0267 199.35);
-    
-        --error-color: oklch(58.57% 0.2363 29.65);
-        --error-content-color: oklch(100% 0 0);
-    }
-    
-}