frutjam 0.8.0-beta.1 → 0.8.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "0.8.0-beta.1",
+  "version": "0.8.0-beta.2",
   "description": "A utility-first CSS framework UI Library",
   "main": "./dist/frutjam.css",
   "browser": "dist/frutjam.css",

package/src/components/button.css

@@ -70,159 +70,197 @@
   @apply w-full;
 }
 
-@utility btn-core {
-  @apply btn-md text-shadow-xs/5 relative inline-flex self-start shrink-0 flex-nowrap items-center
-          justify-center gap-1.5 text-center align-middle font-medium overflow-hidden
-          text-xs transition duration-350 ease-in-out leading-normal cursor-pointer box-border;
-  
-  border-radius: var(--radius-btn);
-
+@utility btn-link-active {
+  background: transparent;
+  color: light-dark(
+    var(--btn-800),
+    var(--btn-500)
+  );
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  cursor: pointer;
+} 
+
+@utility btn-ghost-active {
   /* for default btn */
   &:is(.btn) {
     background-color: light-dark(
       var(--btn-200),
-      var(--btn-800)
+      var(--btn-900)
     );
     color: light-dark(
-      var(--btn-900),
-      var(--btn-50)
+      var(--btn-950),
+      var(--btn-100)
     );
   }
 
   /* for all btn exclude default btn */
   &:not(.btn) {
     background-color: light-dark(
-      var(--btn-600),
-      var(--btn-800)
+      var(--btn-700),
+      var(--btn-900)
+    );
+    color: light-dark(
+      var(--btn-50),
+      var(--btn-100)
     );
-    color: var(--btn-50);
   }
+}
 
-  &:is(:disabled, [disabled], .btn-disabled) {
-    @apply opacity-20 cursor-not-allowed;
+@utility btn-active {
+  &:is(.btn-link) {    
+    @apply btn-link-active
   }
-
-  &:is(input[type="checkbox"], input[type="radio"]) {
-    @apply appearance-none;
-
-    &::after {
-      content: attr(aria-label);
-    }
-
-    &:checked {
-      @apply isolate;
-    }
+  &:is(.btn-ghost) {
+    @apply btn-ghost-active;
   }
+  &:not(.btn-link, .btn-ghost) {
+    outline-style: none;
 
-  &:is(.btn-active, :hover) {
-    &:is(.btn-link) {
-      @apply bg-transparent underline underline-offset-4 cursor-pointer;
-      
+    /* for default btn */
+    &:is(.btn) {
+      background-color: light-dark(
+        var(--btn-300),
+        var(--btn-900)
+      );
       color: light-dark(
-        var(--btn-800),
-        var(--btn-500)
+        var(--btn-950),
+        var(--btn-100)
       );
     }
-    &:not(.btn-link) {
-      @apply outline-none;
-
-      /* for default btn */
-      &:is(.btn) {
-        background-color: light-dark(
-          var(--btn-300),
-          var(--btn-900)
-        );
-
-        color: light-dark(
-          var(--btn-950),
-          var(--btn-100)
-        );
-      }
-
-      /* for all btn exclude default btn */
-      &:not(.btn) {
-        background-color: light-dark(
-          var(--btn-700),
-          var(--btn-900)
-        );
-
-        color: light-dark(
-          var(--btn-50),
-          var(--btn-100)
-        );
-      }
-      
-      &:not(:disabled, [disabled], .btn-disabled) {
-        &::before {
-          @apply content-[''] absolute size-full;
-        }
-      }
-    }
-  }
 
-  &:where(.btn-dashed) {
-    &:not(.btn-active) {
-      @apply bg-transparent;
-      outline: 1px dashed light-dark(
-        var(--btn-500),
-        var(--btn-700)
+    /* for all btn exclude default btn */
+    &:not(.btn) {
+      background-color: light-dark(
+        var(--btn-700),
+        var(--btn-900)
       );
       color: light-dark(
-        var(--btn-700),
-        var(--btn-500)
+        var(--btn-50),
+        var(--btn-100)
       );
     }
   }
+}
 
-  &:where(.btn-outline) {
-    &:not(.btn-active) {
-      @apply bg-transparent;
-      outline: 1px solid light-dark(
-        var(--btn-500),
-        var(--btn-800)
-      );
-      color: light-dark(
-        var(--btn-800),
-        var(--btn-200)
-      );
-    }
+@utility btn-dashed {
+  &:not(.btn-active) {
+    background:  transparent;
+    outline: 1px dashed light-dark(
+      var(--btn-500),
+      var(--btn-700)
+    );
+    color: light-dark(
+      var(--btn-700),
+      var(--btn-500)
+    );
   }
+}
 
-  &:where(.btn-soft) {
-    &:not(.btn-active) {
+@utility btn-outline {
+  &:not(.btn-active) {
+    background: transparent;
+    outline: 1px solid light-dark(
+      var(--btn-500),
+      var(--btn-800)
+    );
+    color: light-dark(
+      var(--btn-800),
+      var(--btn-200)
+    );
+  }
+}
 
-      background-color: light-dark(
-        var(--btn-100),
-        color-mix(in oklab,var(--btn-900)10%,transparent)
-      );
+@utility btn-soft {
+  &:not(.btn-active) {
+    background-color: light-dark(
+      var(--btn-100),
+      color-mix(in oklab,var(--btn-900)10%,transparent)
+    );
+    color: light-dark(
+      var(--btn-800),
+      var(--btn-400)
+    );
+  }
+}
 
-      color: light-dark(
-        var(--btn-800),
-        var(--btn-400)
-      );
-    }
+@utility btn-ghost {
+  &:not(.btn-active) {
+    background: transparent;
+    color: light-dark(
+      var(--btn-600),
+      var(--btn-300)
+    );
   }
+}
 
-  &:where(.btn-ghost) {
-    &:not(.btn-active) {
-      @apply bg-transparent;
+@utility btn-link {
+  &:not(.btn-active) {
+    background: transparent;
+    color: light-dark(
+      var(--btn-700),
+      var(--btn-500)
+    );
+  }
+}
 
-      color: light-dark(
-        var(--btn-600),
-        var(--btn-300)
-      );
-    }
+@utility btn-core {
+  @apply btn-md text-shadow-xs/5 gap-1.5 text-xs transition duration-350 ease-in-out leading-normal;
+
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  flex-wrap: nowrap;
+  vertical-align: middle;
+  font-weight: 500;
+  text-align: center;
+  border-radius: var(--radius-btn);
+  overflow: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  /* for default btn */
+  &:is(.btn) {
+    background-color: light-dark(
+      var(--btn-200),
+      var(--btn-800)
+    );
+    color: light-dark(
+      var(--btn-900),
+      var(--btn-50)
+    );
   }
 
-  &:where(.btn-link) {
-    &:not(.btn-active) {
-      @apply bg-transparent;
+  /* for all btn exclude default btn */
+  &:not(.btn) {
+    background-color: light-dark(
+      var(--btn-600),
+      var(--btn-800)
+    );
+    color: var(--btn-50);
+  }
 
-      color: light-dark(
-        var(--btn-700),
-        var(--btn-500)
-      );
+  &:is(:disabled, [disabled], .btn-disabled) {
+    @apply opacity-20 cursor-not-allowed pointer-events-none;
+  }
+
+  &:is(input[type="checkbox"], input[type="radio"]) {
+    @apply appearance-none;
+
+    &::after {
+      content: attr(aria-label);
     }
+
+    &:checked {
+      @apply isolate;
+    }
+  }
+
+  &:is(:hover) {
+    @apply btn-active;
   }
 }
 

package/src/components/modal.css

@@ -7,14 +7,10 @@
   &:not(modal:not([open]):not(.modal-open)),
   &::backdrop {
     @apply opacity-100 starting:invisible starting:opacity-0;
-    background-image: light-dark(
-      color-mix(in oklab,var(--core-100)15%,transparent),
-      color-mix(in oklab,var(--core-800)50%,transparent)
-    );
+    background: light-dark(#00000026, #000000ba);
   }
   &[open], &.modal-open {
     @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
-
     .modal-body {
       translate: 0 0;
       scale: 1;
@@ -24,18 +20,14 @@
 }
 
 @utility modal-backdrop {
-  @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
-  background: light-dark(
-    color-mix(in oklab,var(--core-300)50%,transparent),
-    color-mix(in oklab,var(--core-900)80%,transparent)
-  );
+  @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1 bg-transparent;
   button {
     @apply cursor-pointer;
   }
 }
 
 @utility modal-body {
-  @apply rounded-[var(--radius-modal)] shadow-sm 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 rounded-[var(--radius-modal)] shadow-sm forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 scale-95 opacity-0 overflow-y-auto overscroll-contain;
   --tw-shadow-color: light-dark(
     color-mix(in oklab,var(--core-300)50%,transparent),
     color-mix(in oklab,var(--core-900)60%,transparent)
@@ -52,6 +44,7 @@
     var(--core-300),
     var(--core-900)
   );
+  transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
 }