frutjam 0.5.0-alpha.0 → 0.6.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "0.5.0-alpha.0",
+  "version": "0.6.0-alpha.1",
   "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.1.3",
+    "tailwindcss": "^4.1.3"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",
@@ -49,8 +49,9 @@
     "postcss-loader": "^8.1.1",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "string-replace-loader": "^3.1.0",
+    "style-loader": "^4.0.0",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.0"
+    "webpack-dev-server": "^5.2.1"
   }
 }

package/src/components/button.css

@@ -1,18 +1,21 @@
 @import "../themes/styles/base.css";
 @import "../themes/animation/wiggle.css";
 
-
 @utility btn-* {
   @layer components {
-    @apply 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-300 leading-4;
-    @apply rounded-[var(--radius-size)];
-    &:is(.btn-default, .btn-primary, .btn-secondary, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-accent) {
 
+    @apply 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-300 leading-4 rounded-[var(--radius-size)];
+
+    &:is(.btn-base, .btn-primary, .btn-secondary, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-accent) {
       /* global */
-      @media (hover: hover) {
-        &:hover {
-          &::before {
-            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+      &:not(.btn-link) {
+        @media (hover: hover) {
+          &:hover {
+            &::before {
+              @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
+            }
           }
         }
       }
@@ -26,7 +29,7 @@
         }
     
         &:checked {
-          @apply ring-2 bg-gradient-to-tr via-[--value(--color-*)]/90 isolate;
+          @apply ring-1 bg-gradient-to-tr via-[--value(--color-*)]/90 isolate;
         }
       }
 
@@ -41,7 +44,7 @@
           @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-*)];
+          @apply text-[--value(--color-*-fore)];
         }
 
         @media (hover: hover) {
@@ -50,10 +53,10 @@
               @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;
+              @apply ring-1 bg-gradient-to-tr via-[--value(--color-*)]/90;
             }
             &:is(.btn-link) {
-              @apply text-[--value(--color-*)] underline underline-offset-4 cursor-pointer;
+              @apply underline underline-offset-4 cursor-pointer;
             }
           }
         }
@@ -65,7 +68,7 @@
 
         @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-*)];
+            @apply ring-1 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
           }
         }
       }
@@ -76,7 +79,7 @@
   
         @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-*)];
+            @apply ring-1 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
           }
         }
       }
@@ -84,16 +87,15 @@
       /* 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;
+            @apply ring-1;
           }
         }
       }
     }
 
-    /* If no btn size class is present, apply the default size as btn-md */
+    /* If no btn size class is present, apply the base size as btn-md */
     &:not(.btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-2xl) {
       @apply px-3.5 py-2.5 text-sm;
     }

package/src/components/divider.css

@@ -0,0 +1,40 @@
+@utility divider-* {
+    @layer components {
+        @apply flex flex-row items-center self-stretch whitespace-nowrap h-4;
+
+        &::before,
+        &::after {
+            @apply content-[''] bg-[--value(--color-*)] h-0.5 w-full grow;
+        }
+
+        @media print {
+            &::before,
+            &::after {
+                border: 0.5px solid;
+            }
+        }
+    
+        &:not(:empty) {
+            @apply gap-2;
+        }
+
+        .divider-start::before, .divider-end::after  {
+            @apply hidden;
+        }
+
+        &:is(.divider-x, .divider-y) {
+            &:is(.divider-x) {
+                @apply h-4 w-auto flex-row my-2;
+                &::before, &::after {
+                    @apply h-0.5 w-full;
+                }
+            }
+            &:is(.divider-y) {
+                @apply h-auto w-4 flex-col mx-2;
+                &::before, &::after {
+                    @apply h-full w-0.5;
+                }
+            }
+        }
+    }
+}

package/src/components/dropdown.css

@@ -0,0 +1,108 @@
+@import "../themes/styles/base.css";
+@import "../themes/placement.css";
+
+@utility dropdown {
+  @layer components {
+    @apply relative inline-block;
+    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+  
+    & > *:not(summary):focus {
+      @apply outline-hidden;
+    }
+    .dropdown-body {
+      @apply absolute;
+    }
+    &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) {
+      .dropdown-body {
+        @apply hidden origin-top opacity-0 scale-9;
+      }
+    }
+  
+    &[popover],
+    .dropdown-body {
+      @apply starting:[scale:95%] starting:[opacity:0] z-999 w-max transition-discrete duration-200 transition-[opacity,_scale,_display] ease-in-out;
+      /* animation: dropdown 0.2s; */
+    }
+  
+    &.dropdown-open,
+    &:not(.dropdown-hover):focus,
+    &:focus-within {
+      > [tabindex]:first-child {
+        @apply pointer-events-none;
+      }
+      .dropdown-body {
+        @apply opacity-100;
+      }
+    }
+  
+    &.dropdown-hover:hover {
+      .dropdown-body {
+        @apply opacity-100 scale-100;
+      }
+    }
+  
+    &:is(details) {
+      summary {
+        &::-webkit-details-marker {
+          @apply hidden;
+        }
+      }
+    }
+  
+    &.dropdown-open,
+    &:focus,
+    &:focus-within {
+      .dropdown-body {
+        @apply scale-100;
+      }
+    }
+  
+    /* experimental */
+    &:where([popover]) {
+      background: #0000;
+    }
+    &[popover] {
+      @apply fixed text-inherit;
+  
+      @supports not (position-area: bottom) {
+        @apply m-auto;
+  
+        &.dropdown-open:not(:popover-open) {
+          @apply hidden origin-top opacity-0 scale-95;
+        }
+  
+        &::backdrop {
+          background-color: color-mix(in oklab, #000 30%, #0000);
+        }
+      }
+  
+      &:not(.dropdown-open, :popover-open) {
+        @apply hidden origin-top opacity-0 scale-95;
+      }
+    }  
+  }
+}
+
+@utility dropdown-body {
+  @layer components {
+    @apply bg-surface text-surface-fore rounded-[var(--radius-size)] border border-black/30 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen p-3 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+  }
+}
+
+/* placements */
+/* Positioning Classes */
+.dropdown-x-start {
+  left: 0; /* Aligns dropdown to start horizontally */
+}
+
+.dropdown-x-end {
+  right: 0; /* Aligns dropdown to end horizontally */
+}
+
+.dropdown-y-top {
+  bottom: calc(100% + 10px); /* Positions above the button */
+}
+
+.dropdown-y-bottom {
+  top: calc(100% + 10px); /* Positions below the button */
+}

package/src/components/nav.css

@@ -0,0 +1,27 @@
+@utility nav-* {
+    @layer components {
+        &:is(.nav-list) {
+            @apply flex gap-2 w-full;
+        }
+    }
+}
+
+/* placements */
+
+@utility nav-x-* {
+  @layer components {
+    @apply [justify-self:--value(--x-*)];
+    & > :where(.nav-list) {
+      @apply [justify-content:--value(--x-*)] flex-row;
+    }
+  }
+}
+
+@utility nav-y-* {
+    @layer components {
+        @apply [justify-self:--value(--x-*)];
+        & > :where(.nav-list) {
+            @apply [justify-content:--value(--y-*)] flex-col;
+        }
+    }
+}

package/src/main.css

@@ -5,4 +5,7 @@
 @import "./components/checkbox.css";
 @import "./components/accordion.css";
 @import "./components/popover.css";
+@import "./components/dropdown.css";
+@import "./components/divider.css";
+@import "./components/nav.css";
 @import "./utilities/headings.css";

package/src/themes/styles/base.css

@@ -16,8 +16,8 @@
     --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-base: var(--base-back-color);
+    --color-base-fore: var(--base-fore-color);
 
     --color-primary: var(--primary-back-color);
     --color-primary-fore: var(--primary-fore-color);

package/src/themes/styles/dark.css

@@ -9,8 +9,8 @@
         --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);
+        --base-back-color: oklch(8.15% 0 0);
+        --base-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);

package/src/themes/styles/light.css

@@ -1,5 +1,5 @@
 @layer theme {
-    :not(data-theme), [data-theme="light"] {
+    :root, [data-theme="light"] {
         --color-scheme: light;
 
         --radius-size: 0.5rem;
@@ -9,8 +9,8 @@
         --surface-back-color: oklch(100% 0 0);
         --surface-fore-color: oklch(15.72% 0.0267 199.35);
 
-        --default-back-color: oklch(92.19% 0 0);
-        --default-fore-color: oklch(8.15% 0 0);
+        --base-back-color: oklch(92.19% 0 0);
+        --base-fore-color: oklch(8.15% 0 0);
 
         --primary-back-color: oklch(15.72% 0.0267 199.35);
         --primary-fore-color: oklch(0.961151 0.003 300.98);

package/src/utilities/headings.css

@@ -1,43 +1,8 @@
-@import '../themes/typography.css';
-@utility heading-1 {
-    @layer components {
-        @apply font-bold;
-        font-size: var(--style-h1-size);
-    }
-}
-
-@utility heading-2 {
-    @layer components {
-        @apply font-bold;
-        font-size: var(--style-h2-size);
-    }
-    
-}
-
-@utility heading-3 {
-    @layer components {
-        @apply font-bold;
-        font-size: var(--style-h3-size);
-    }
-}
-
-@utility heading-4 {
-    @layer components {
-        @apply font-bold;
-        font-size: var(--style-h4-size);
-    }
-}
-
-@utility heading-5 {
-    @layer components {
-        @apply font-bold;
-        font-size: var(--style-h5-size);
-    }
-}
+@utility heading-* {
+    @layer utilities {
+        @apply font-bold text-balance text-surface-fore;
+        font-size: --value(--text-*);
 
-@utility heading-6 {
-    @layer components {
-        @apply font-bold;
-        font-size: var(--style-h6-size);
+        /* todo: make it heading-md instead of heading-base */
     }
 }