frutjam 1.2.0-beta.0 → 1.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "1.2.0-beta.0",
+  "version": "1.3.0-beta.0",
   "description": "A utility-first CSS framework UI Library",
   "funding": "https://ko-fi.com/nezanuha",
   "main": "./dist/frutjam.css",
@@ -45,14 +45,14 @@
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
     "mini-css-extract-plugin": "^2.9.2",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.4",
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.12",
     "string-replace-loader": "^3.1.0",
     "style-loader": "^4.0.0",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.1"
+    "webpack-dev-server": "^5.2.2"
   }
 }

package/src/components/accordion.css

@@ -1,10 +1,11 @@
 @import '../theme/jams/base.css';
+@import '../utilities/para.css';
 
 @utility accordion {
     display: grid;
-    background: light-dark(
-        var(--core-50),
-        var(--core-950)
+    background-color: light-dark(
+        var(--core-0),
+        var(--core-1000)
     );
     border: 1px solid light-dark(
         var(--core-200),
@@ -29,6 +30,9 @@
         &>summary::marker{
             content: none;
         }
+        &>p{
+            @apply para;
+        }
         &>summary{
             display: flex;
             gap: 1rem;

package/src/components/button.css

@@ -1,6 +1,96 @@
 @import "../theme/jams/base.css";
 @import "../theme/animation/wiggle.css";
 
+@utility btn {
+  @apply btn-md;
+
+  text-shadow: 0px 1px 1px color-mix(in oklab, var(--btn-900) 10%, transparent);
+  line-height: 1.5;
+  width: var(--btn-width);
+  max-width: var(--btn-max-width);
+  transition: translate 0.2s ease-out, visibility 0.2s allow-discrete, background-color 0.2s ease-out, opacity 0.1s ease-out, border-color 0.3s;
+  position: relative;
+  display: var(--btn-display, inline-flex);
+  gap: 0.375rem;
+  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(--btn-radius, var(--radius-btn));
+  overflow: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  padding-inline: var(--btn-inline);
+  padding-block: var(--btn-block);
+  font-size: var(--btn-text-size);
+
+  &:where(.btn-square){
+    padding-inline: var(--btn-block);
+    padding-block: var(--btn-block);
+  }
+
+  background-color: var(--btn-bg-color);
+  color: var(--btn-text-color);
+
+  outline-color: var(--btn-outline-color);
+  outline-style: var(--btn-outline-style);
+  outline-width: var(--btn-outline-width);
+
+  text-decoration: var(--btn-text-decoration);
+  text-underline-offset: var(--btn-text-underline-offset);
+
+  &:is(:disabled, [disabled], .btn-disabled) {
+    opacity: 20%;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &:is(input[type="checkbox"], input[type="radio"]) {
+    appearance: none;
+
+    &::after {
+      content: attr(aria-label);
+    }
+
+    &:checked {
+      isolation: isolate;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--btn-700, currentColor);
+    outline-offset: 2px;
+    isolation: isolate;
+  }
+
+  @media (hover: hover) {
+    &:is(:hover) {
+      @apply btn-active;
+    }
+  }
+
+  --btn-50: var(--default-50);
+  --btn-100: var(--default-100);
+  --btn-200: var(--default-200);
+  --btn-300: var(--default-300);
+  --btn-400: var(--default-400);
+  --btn-500: var(--default-500);
+  --btn-600: var(--default-600);
+  --btn-700: var(--default-700);
+  --btn-800: var(--default-800);
+  --btn-900: var(--default-900);
+  --btn-950: var(--default-950);
+
+  --btn-bg-color: light-dark(var(--btn-200), var(--btn-800));
+  --btn-text-color: light-dark(var(--btn-900), var(--btn-50));
+}
+
+
 @utility btn-xs {
   --btn-inline: 0.875rem;
   --btn-block: 0.375rem;
@@ -37,7 +127,7 @@
   --btn-text-size: 1.375rem;
 }
 
-/*btn-circle deprecated*/
+/*btn-circle deprecated: Remove this in stable release*/
 @utility btn-circle {
   --btn-radius: calc(infinity * 1px);
 }
@@ -56,53 +146,46 @@
   --btn-display: block;
 }
 
-@utility btn-link-active {
-  background-color: transparent;
-  color: light-dark(var(--btn-800), var(--btn-500));
-  text-decoration: underline;
-  text-underline-offset: 4px;
-}
-
-@utility btn-ghost-active {
-  /* for default btn */
-  &:not(
-    .btn-primary,
-    .btn-secondary,
-    .btn-accent,
-    .btn-info,
-    .btn-success,
-    .btn-warning,
-    .btn-error
-  ) {
-    background-color: light-dark(var(--btn-200), var(--btn-900));
-    color: light-dark(var(--btn-950), var(--btn-100));
-  }
-
-  /* for all btn exclude default btn */
-  &:is(
-    .btn-primary,
-    .btn-secondary,
-    .btn-accent,
-    .btn-info,
-    .btn-success,
-    .btn-warning,
-    .btn-error
-  ) {
-    background-color: light-dark(var(--btn-700), var(--btn-900));
-    color: light-dark(var(--btn-50), var(--btn-100));
-  }
-}
-
 @utility btn-active {
+
   &:is(.btn-link) {
-    @apply btn-link-active;
+    --btn-bg-color: transparent;
+    --btn-text-color: light-dark(var(--btn-800), var(--btn-500));
+    --btn-text-decoration: underline;
+    --btn-text-underline-offset: 4px;
   }
+
   &:is(.btn-ghost) {
-    @apply btn-ghost-active;
+    /* for default btn */
+    &:not(
+      .btn-primary,
+      .btn-secondary,
+      .btn-accent,
+      .btn-info,
+      .btn-success,
+      .btn-warning,
+      .btn-error
+    ) {
+      --btn-bg-color: light-dark(var(--btn-200), var(--btn-900));
+      --btn-text-color: light-dark(var(--btn-950), var(--btn-100));
+    }
+
+    /* for all btn exclude default btn */
+    &:is(
+      .btn-primary,
+      .btn-secondary,
+      .btn-accent,
+      .btn-info,
+      .btn-success,
+      .btn-warning,
+      .btn-error
+    ) {
+      --btn-bg-color: light-dark(var(--btn-700), var(--btn-900));
+      --btn-text-color: light-dark(var(--btn-50), var(--btn-100));
+    }
   }
+  
   &:not(.btn-link, .btn-ghost) {
-    outline-style: none;
-
     /* for default btn */
     &:not(
       .btn-primary,
@@ -113,8 +196,8 @@
       .btn-warning,
       .btn-error
     ) {
-      background-color: light-dark(var(--btn-300), var(--btn-900));
-      color: light-dark(var(--btn-950), var(--btn-100));
+      --btn-bg-color: light-dark(var(--btn-300), var(--btn-900));
+      --btn-text-color: light-dark(var(--btn-950), var(--btn-100));
     }
 
     /* for all btn exclude default btn */
@@ -127,150 +210,56 @@
       .btn-warning,
       .btn-error
     ) {
-      background-color: light-dark(var(--btn-800), var(--btn-800));
-      color: light-dark(var(--btn-50), var(--btn-100));
+      --btn-bg-color: light-dark(var(--btn-800), var(--btn-800));
+      --btn-text-color: light-dark(var(--btn-50), var(--btn-100));
     }
+
+    --btn-outline-style: none;
   }
 }
 
 @utility btn-dashed {
   &:not(.btn-active) {
-    background-color: transparent;
-    outline: 1px dashed light-dark(var(--btn-500), var(--btn-700));
-    color: light-dark(var(--btn-700), var(--btn-500));
+    --btn-bg-color: transparent;
+    --btn-text-color: light-dark(var(--btn-700), var(--btn-500));
+    --btn-outline-color: light-dark(var(--btn-500), var(--btn-700));
+    --btn-outline-style: dashed;
+    --btn-outline-width: 1px;
   }
 }
 
 @utility btn-outline {
   &:not(.btn-active) {
-    background-color: transparent;
-    outline: 1px solid light-dark(var(--btn-500), var(--btn-800));
-    color: light-dark(var(--btn-800), var(--btn-200));
+    --btn-bg-color: transparent;
+    --btn-text-color: light-dark(var(--btn-800), var(--btn-200));
+
+    --btn-outline-color: light-dark(var(--btn-500), var(--btn-800));
+    --btn-outline-style: solid;
+    --btn-outline-width: 1px;
   }
 }
 
 @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));
+    --btn-bg-color: light-dark(var(--btn-100), color-mix(in oklab, var(--btn-900) 30%, transparent));
+    --btn-text-color: light-dark(var(--btn-800), var(--btn-400));
   }
 }
 
 @utility btn-ghost {
   &:not(.btn-active) {
-    background-color: transparent;
-    color: light-dark(var(--btn-600), var(--btn-300));
+    --btn-bg-color: transparent;
+    --btn-text-color: light-dark(var(--btn-600), var(--btn-300));
   }
 }
 
 @utility btn-link {
   &:not(.btn-active) {
-    background-color: transparent;
-    color: light-dark(var(--btn-700), var(--btn-400));
+    --btn-bg-color: transparent;
+    --btn-text-color: light-dark(var(--btn-700), var(--btn-400));
   }
 }
 
-@utility btn {
-  @apply btn-md;
-
-  text-shadow: 0px 1px 1px color-mix(in oklab, var(--btn-900) 10%, transparent);
-  line-height: 1.5;
-  width: var(--btn-width);
-  max-width: var(--btn-max-width);
-  transition: translate 0.2s ease-out, visibility 0.2s allow-discrete, background-color 0.2s ease-out, opacity 0.1s ease-out;
-  position: relative;
-  display: var(--btn-display, inline-flex);
-  gap: 0.375rem;
-  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(--btn-radius, var(--radius-btn));
-  overflow: hidden;
-  cursor: pointer;
-  box-sizing: border-box;
-
-  padding-inline: var(--btn-inline);
-  padding-block: var(--btn-block);
-  font-size: var(--btn-text-size);
-
-  &:where(.btn-square){
-    padding-inline: var(--btn-block);
-    padding-block: var(--btn-block);
-  }
-
-  /* for default btn */
-  &:not(
-    .btn-primary,
-    .btn-secondary,
-    .btn-accent,
-    .btn-info,
-    .btn-success,
-    .btn-warning,
-    .btn-error
-  ) {
-    background-color: light-dark(var(--btn-200), var(--btn-800));
-    color: light-dark(var(--btn-900), var(--btn-50));
-  }
-
-  /* for all btn exclude default btn */
-  &:is(
-    .btn-primary,
-    .btn-secondary,
-    .btn-accent,
-    .btn-info,
-    .btn-success,
-    .btn-warning,
-    .btn-error
-  ) {
-    background-color: light-dark(var(--btn-700), var(--btn-700));
-    color: var(--btn-50);
-  }
-
-  &:is(:disabled, [disabled], .btn-disabled) {
-    opacity: 20%;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  &:is(input[type="checkbox"], input[type="radio"]) {
-    appearance: none;
-
-    &::after {
-      content: attr(aria-label);
-    }
-
-    &:checked {
-      isolation: isolate;
-    }
-  }
-
-  @media (hover: hover) {
-    &:is(:hover) {
-      @apply btn-active;
-    }
-  }
-
-  --btn-50: var(--default-50);
-  --btn-100: var(--default-100);
-  --btn-200: var(--default-200);
-  --btn-300: var(--default-300);
-  --btn-400: var(--default-400);
-  --btn-500: var(--default-500);
-  --btn-600: var(--default-600);
-  --btn-700: var(--default-700);
-  --btn-800: var(--default-800);
-  --btn-900: var(--default-900);
-  --btn-950: var(--default-950);
-}
-
 @utility btn-primary {
   --btn-50: var(--primary-50);
   --btn-100: var(--primary-100);
@@ -283,6 +272,9 @@
   --btn-800: var(--primary-800);
   --btn-900: var(--primary-900);
   --btn-950: var(--primary-950);
+
+  --btn-bg-color: light-dark(var(--btn-700), var(--btn-700));
+  --btn-text-color: var(--btn-50);
 }
 
 @utility btn-secondary {
@@ -297,6 +289,9 @@
   --btn-800: var(--secondary-800);
   --btn-900: var(--secondary-900);
   --btn-950: var(--secondary-950);
+
+  --btn-bg-color: light-dark(var(--btn-700), var(--btn-700));
+  --btn-text-color: var(--btn-50);
 }
 
 @utility btn-accent {
@@ -311,6 +306,9 @@
   --btn-800: var(--accent-800);
   --btn-900: var(--accent-900);
   --btn-950: var(--accent-950);
+
+  --btn-bg-color: light-dark(var(--btn-700), var(--btn-700));
+  --btn-text-color: var(--btn-50);
 }
 
 @utility btn-info {
@@ -325,6 +323,9 @@
   --btn-800: var(--info-800);
   --btn-900: var(--info-900);
   --btn-950: var(--info-950);
+
+  --btn-bg-color: light-dark(var(--btn-700), var(--btn-700));
+  --btn-text-color: var(--btn-50);
 }
 
 @utility btn-success {
@@ -339,6 +340,9 @@
   --btn-800: var(--success-800);
   --btn-900: var(--success-900);
   --btn-950: var(--success-950);
+
+  --btn-bg-color: light-dark(var(--btn-700), var(--btn-700));
+  --btn-text-color: var(--btn-50);
 }
 
 @utility btn-warning {
@@ -353,6 +357,9 @@
   --btn-800: var(--warning-800);
   --btn-900: var(--warning-900);
   --btn-950: var(--warning-950);
+
+  --btn-bg-color: light-dark(var(--btn-700), var(--btn-700));
+  --btn-text-color: var(--btn-50);
 }
 
 @utility btn-error {
@@ -367,4 +374,7 @@
   --btn-800: var(--error-800);
   --btn-900: var(--error-900);
   --btn-950: var(--error-950);
+
+  --btn-bg-color: light-dark(var(--btn-700), var(--btn-700));
+  --btn-text-color: var(--btn-50);
 }

package/src/components/card.css

@@ -22,7 +22,10 @@
     flex-direction: column;
     border-radius: var(--radius-card);
     overflow:hidden;
-    background-color: transparent;
+    background-color: light-dark(
+        var(--core-0),
+        var(--core-1000)
+    );
 
     :where(figure:first-child) {
         overflow: hidden;

package/src/components/checkbox.css

@@ -59,12 +59,12 @@
     appearance: none;
     vertical-align: middle;
 
-    box-shadow: 0 0 0 0px var(--checkbox-100), 0 0 0 calc(1px + 0px) light-dark(var(--checkbox-300), var(--checkbox-500)), 0 0 var(--checkbox-100);
+    box-shadow: 0 0 0 0px var(--checkbox-100), 0 0 0 calc(1px + 0px) light-dark(var(--checkbox-300), var(--checkbox-800)), 0 0 var(--checkbox-100);
     /* border: 1.6px solid var(--checkbox-100); */
-    outline: 1px solid light-dark(
+    /* outline: 1px solid light-dark(
       var(--checkbox-400),
       var(--checkbox-700)
-    );
+    ); */
       
     background-color: light-dark(
       var(--checkbox-100),
@@ -134,8 +134,8 @@
 
     &:checked,
     &[aria-checked="true"] {
-      box-shadow: 0 0 0 0px var(--checkbox-100),   0 0 0 calc(1px + 0px) var(--checkbox-400), 0 0 var(--checkbox-100);
-      background-color: light-dark(var(--checkbox-200), var(--checkbox-600));
+      box-shadow: 0 0 0 0px var(--checkbox-100),   0 0 0 calc(1px + 0px) light-dark(var(--checkbox-500), var(--checkbox-700)), 0 0 var(--checkbox-100);
+      background-color: light-dark(var(--checkbox-300), var(--checkbox-600));
       transition: transform 300ms, background-color 100ms;
 
       &::before {

package/src/components/drawer.css

@@ -12,7 +12,10 @@
   max-width: none;
   max-height: none;
   place-items: start;
-  background-color: transparent;
+  background-color: light-dark(
+        var(--core-0),
+        var(--core-1000)
+  );
   color: inherit;
   z-index: 999;
   overflow: hidden;

package/src/components/dropdown.css

@@ -58,7 +58,7 @@
   
     /* experimental */
     &:where([popover]) {
-      background: #0000;
+      background-color: #0000;
     }
     &[popover] {
       @apply fixed text-inherit;
@@ -93,9 +93,9 @@
       var(--core-900)
   );
   border-radius: var(--radius-dropdown);
-  background: light-dark(
-    var(--core-50),
-    var(--core-950)
+  background-color: light-dark(
+    var(--core-0),
+    var(--core-1000)
   );
   color: light-dark(
     var(--core-800),

package/src/components/modal.css

@@ -15,7 +15,10 @@
   justify-items: center;
   color: inherit;
   padding: 0.75rem;
-  background-color: transparent;
+  background-color: light-dark(
+    var(--core-0),
+    var(--core-1000)
+  );
   inset: 0rem;
   margin: 0rem;
   pointer-events: none;
@@ -91,13 +94,9 @@
   overscroll-behavior: contain;
   border-radius: var(--radius-modal);
 
-  /* --tw-shadow-color: light-dark(
-    color-mix(in oklab,var(--core-300)50%,transparent),
-    color-mix(in oklab,var(--core-900)60%,transparent)
-  ); */
-  background: light-dark(
-    var(--core-50),
-    var(--core-950)
+  background-color: light-dark(
+        var(--core-0),
+        var(--core-1000)
   );
   color: light-dark(
     var(--core-800),

package/src/components/nav.css

@@ -1,4 +1,4 @@
-/* use for breadcrums and menu */
+/* use for menu */
 @import "../theme/placement.css";
 
 @utility nav-x-* {

package/src/components/sidebar.css

@@ -1,9 +1,12 @@
 @import "../theme/jams/base.css";
 
 @utility sidebar {
-    position: sticky;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
     gap: 1.25rem;
+    overflow-y: auto;
+    overflow-x:hidden;
+    position: sticky;
     max-height: 100dvh;
     padding: 1.5rem;
     border-inline-style: solid;
@@ -16,6 +19,4 @@
         var(--core-0),
         var(--core-1000)
     );
-    display: flex;
-    flex-direction: column;
 }

package/src/utilities/para.css

@@ -1,7 +1,7 @@
 @utility core-para {
     text-wrap: balance;
     color:light-dark(
-        var(--core-900),
+        var(--core-700),
         var(--core-300)
     );
 }