frutjam 0.1.1-alpha.4 → 0.3.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "0.1.1-alpha.4",
+  "version": "0.3.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.12",
-    "tailwindcss": "^4.0.12"
+    "@tailwindcss/postcss": "^4.0.14",
+    "tailwindcss": "^4.0.14"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",
@@ -47,6 +47,7 @@
     "postcss": "^8.5.3",
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "string-replace-loader": "^3.1.0",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1",

package/src/base/preflight.css

@@ -0,0 +1,7 @@
+@layer base{
+    :root,
+    [data-theme] {
+      background-color: var(--color-surface);
+      color: var(--color-surface-content);
+    }
+}

package/src/components/accordion.css

@@ -1,7 +1,7 @@
-@import '../themes/colors.css';
+@import '../themes/colors/base.css';
 @utility accordion {
     @layer components {
-        @apply grid divide-y divide-neutral-300 border border-neutral-300 cursor-pointer rounded-md;
+        @apply grid divide-y divide-info border border-info cursor-pointer rounded-md;
 
         &>details {
             @apply text-pretty;
@@ -16,7 +16,7 @@
                 @apply flex gap-4 items-center justify-between p-4 font-medium;
                 &::after {
                     @apply content-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiYSg1Myw1Myw1MywxKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41Ii8+Cjwvc3ZnPg==')];
-                    @apply inline-block;
+                    @apply inline-block text-inherit;
                 }
             }
         }

package/src/components/button.css

@@ -1,14 +1,14 @@
-@import '../themes/colors.css';
+@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 inset-ring inset-ring-black/10;
+    @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;
 
     &:focus{
-      @apply inset-ring-black/30;
+      @apply inset-ring-black/10;
     }
 
     &:not(.btn-dashed, .btn-outline, .btn-soft){
-      @apply border-t border-black/40;
+      @apply border-b-2 border-black/30;
     }
   }
 }
@@ -27,14 +27,6 @@
 
 @utility btn-soft {
   @layer components {
-    &:is(.btn-neutral){
-      @apply bg-neutral/10 text-neutral;
-      @media (hover: hover){
-        &:hover {
-          @apply bg-neutral text-[var(--color-neutral-content)];
-        }
-      }
-    }
 
     &:is(.btn-primary){
       @apply bg-primary/10 text-primary;
@@ -131,19 +123,9 @@
   }
 }
 
-@utility btn-neutral {
+@utility btn-full {
   @layer components {
-    @apply bg-neutral text-neutral-content;
-    
-    &:is(.btn-dashed, .btn-outline){
-      @apply bg-white text-neutral border-neutral;
-    }
-
-    @media (hover: hover){
-      &:hover {
-        @apply bg-neutral text-white border-solid;
-      }
-    }
+    @apply rounded-full leading-4;
   }
 }
 

package/src/components/checkbox.css

@@ -1,4 +1,4 @@
-@import '../themes/colors.css';
+@import '../themes/colors/base.css';
 @utility checkbox {
     @apply size-4 rounded-md relative shrink-0 cursor-pointer appearance-none p-1 align-middle shadow ring duration-150;
 
@@ -63,13 +63,6 @@
     }
   }
   
-  @utility checkbox-neutral {
-    @apply bg-neutral/20 text-neutral-content ring-neutral;
-    &:checked,
-    &[aria-checked="true"] {
-        @apply bg-neutral;
-    }
-  }
   
   @utility checkbox-info {
     @apply bg-info/20 text-info-content ring-info;

package/src/components/drawer.css

@@ -0,0 +1,89 @@
+@import "../themes/colors/base.css";
+@utility drawer {
+  @layer components {
+    @apply pointer-events-none invisible fixed 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;
+
+    &:not(drawer:not([open]):not(.drawer-open)),
+    &::backdrop {
+      @apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop;
+    }
+
+    &[open], &.drawer-open{
+      @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
+
+      .drawer-body {
+        translate: 0 0;
+        scale: 1;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@utility drawer-backdrop {
+  @layer components {
+    @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
+    button {
+      @apply cursor-pointer;
+    }
+  }
+}
+
+@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;
+    translate: -100% 0;
+    scale: 1;
+  }
+}
+
+
+@utility drawer-top {
+  @layer components {
+    @apply place-items-start;
+
+    :where(.drawer-body) {
+      @apply h-auto w-full max-w-none rounded-none;
+      max-height: calc(100vh - 5em);
+      translate: 0 -100%;
+      scale: 1;
+    }
+  }
+}
+
+@utility drawer-bottom {
+  @layer components {
+    @apply place-items-end;
+
+    :where(.drawer-body) {
+      @apply h-auto w-full max-w-none rounded-none;
+      max-height: calc(100vh - 5em);
+      translate: 0 100%;
+      scale: 1;
+    }
+  }
+}
+
+@utility drawer-start {
+  @layer components {
+    @apply place-items-start;
+
+    :where(.drawer-body) {
+      @apply h-screen max-h-none w-auto max-w-none rounded-none;
+      translate: -100% 0;
+      scale: 1;
+    }
+  }
+}
+
+@utility drawer-end {
+  @layer components {
+    @apply place-items-end;
+
+    :where(.drawer-body) {
+      @apply h-screen max-h-none w-auto max-w-none rounded-none;
+      translate: 100% 0;
+      scale: 1;
+    }
+  }
+}

package/src/components/modal.css

@@ -1,21 +1,19 @@
-@import '../themes/colors.css';
-@utility modal {
+@import "../themes/colors/base.css";
+@import "../themes/placement.css";
+@import "../themes/animation/slide.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;
-    transition: transform 0.3s ease-out, opacity 0.1s ease-out, visibility 0.3s allow-discrete;
-  
-    &:not(modal:not([popover]:popover-open)),
+    @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-3 text-inherit z-999 overflow-hidden overscroll-contain;
+
+    &:not(modal:not([open]):not(.modal-open)),
     &::backdrop {
-      @apply opacity-100 starting:invisible starting:opacity-0 bg-neutral-950/25 dark:bg-neutral-950/50;
-      transition:
-        display 0.3s ease-out allow-discrete,
-        opacity 0.3s ease-out,
-        visibility 0.3s ease-out allow-discrete;
+      @apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop;
     }
-  
-    &[popover]:popover-open {
+
+    &[open], &.modal-open {
       @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
-  
+
       .modal-body {
         translate: 0 0;
         scale: 1;
@@ -24,90 +22,47 @@
     }
   }
 }
-  
-  @utility modal-backdrop {
-    @layer components {
-      @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
-      button {
-        @apply cursor-pointer;
-      }
-    }
-  }
-  
-  @utility modal-body {
-    @layer components {
-      @apply bg-white rounded-2xl ring shadow-lg ring-neutral-500/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-4;
-      transition:
-        translate 0.3s ease-out,
-        scale 0.3s ease-out,
-        opacity 0.2s ease-out 0.05s,
-        box-shadow 0.3s ease-out;
-      scale: 95%;
-      opacity: 0;
-      overflow-y: auto;
-      overscroll-behavior: contain;
+
+@utility modal-backdrop {
+  @layer components {
+    @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
+    button {
+      @apply cursor-pointer;
     }
   }
-  
-  @utility modal-top {
-    @layer components {
-      @apply place-items-start;
-    
-      :where(.modal-body) {
-        @apply h-auto w-full max-w-none rounded-none;
-        max-height: calc(100vh - 5em);
-        translate: 0 -100%;
-        scale: 1;
-      }
-    }
+}
+
+@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;
   }
-  
-  @utility modal-middle {
-    @layer components {
-      @apply place-items-center;
-    
-      :where(.modal-body) {
-        @apply h-auto w-11/12 max-w-[32rem];
-        max-height: calc(100vh - 5em);
-        translate: 0 2%;
-        scale: 98%;
-      }
-    }
+}
+
+
+
+/* placements */
+
+@utility modal-x-* {
+  @layer components {
+      /* @apply [justify-items:--value([*])]; */
+      @apply [justify-items:--value(--x-*)];
   }
-  
-  @utility modal-bottom {
-    @layer components {
-      @apply place-items-end;
-    
-      :where(.modal-body) {
-        @apply h-auto w-full max-w-none rounded-none;
-        max-height: calc(100vh - 5em);
-        translate: 0 100%;
-        scale: 1;
-      }
-    }
+}
+
+@utility modal-y-* {
+  @layer components {
+      /* @apply [align-items:--value([*])]; */
+      @apply [align-items:--value(--y-*)];
   }
-  
-  @utility modal-start {
-    @layer components {
-      @apply place-items-start;
-    
+}
+
+/* animation */
+
+@utility modal-slide-* {
+  @layer components {
       :where(.modal-body) {
-        @apply h-screen max-h-none w-auto max-w-none rounded-none;
-        translate: -100% 0;
-        scale: 1;
+          @apply [translate:--value(--slide-*)];
+          scale: 1;
       }
-    }
   }
-  
-  @utility modal-end {
-    @layer components {
-      @apply place-items-end;
-    
-      :where(.modal-body) {
-        @apply h-screen max-h-none w-auto max-w-none rounded-none;
-        translate: 100% 0;
-        scale: 1;
-      }
-    }
-  }
+}

package/src/components/popover.css

@@ -0,0 +1,99 @@
+@import "../themes/colors/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;
+
+    &:not(modal:not([popover]:popover-open)),
+    &::backdrop {
+      @apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop;
+    }
+
+    &[popover]:popover-open {
+      @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
+
+      .modal-body {
+        translate: 0 0;
+        scale: 1;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@utility modal-backdrop {
+  @layer components {
+    @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
+    button {
+      @apply cursor-pointer;
+    }
+  }
+}
+
+@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;
+  }
+}
+
+@utility modal-top {
+  @layer components {
+    @apply place-items-start;
+
+    :where(.modal-body) {
+      @apply h-auto w-full max-w-none rounded-none;
+      max-height: calc(100vh - 5em);
+      translate: 0 -100%;
+      scale: 1;
+    }
+  }
+}
+
+@utility modal-middle {
+  @layer components {
+    @apply place-items-center;
+
+    :where(.modal-body) {
+      @apply h-auto w-11/12 max-w-[32rem];
+      max-height: calc(100vh - 5em);
+      translate: 0 2%;
+      scale: 98%;
+    }
+  }
+}
+
+@utility modal-bottom {
+  @layer components {
+    @apply place-items-end;
+
+    :where(.modal-body) {
+      @apply h-auto w-full max-w-none rounded-none;
+      max-height: calc(100vh - 5em);
+      translate: 0 100%;
+      scale: 1;
+    }
+  }
+}
+
+@utility modal-start {
+  @layer components {
+    @apply place-items-start;
+
+    :where(.modal-body) {
+      @apply h-screen max-h-none w-auto max-w-none rounded-none;
+      translate: -100% 0;
+      scale: 1;
+    }
+  }
+}
+
+@utility modal-end {
+  @layer components {
+    @apply place-items-end;
+
+    :where(.modal-body) {
+      @apply h-screen max-h-none w-auto max-w-none rounded-none;
+      translate: 100% 0;
+      scale: 1;
+    }
+  }
+}

package/src/main.css

@@ -1,5 +1,6 @@
 @import "./components/button.css";
 @import "./components/modal.css";
+@import "./components/drawer.css";
 @import "./components/checkbox.css";
 @import "./components/accordion.css";
 @import "./utilities/headings.css";

package/src/themes/animation/slide.css

@@ -0,0 +1,6 @@
+@theme {
+    --slide-up: 0 100%;
+    --slide-down: 0 -100%;
+    --slide-left: 100% 0;
+    --slide-right: -100% 0;
+}

package/src/themes/colors/base.css

@@ -0,0 +1,39 @@
+@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

@@ -0,0 +1,31 @@
+@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

@@ -0,0 +1,32 @@
+@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);
+    }
+    
+}

package/src/themes/placement.css

@@ -0,0 +1,8 @@
+@theme {
+    --x-start: start;
+    --x-center: center;
+    --x-end: end;
+    --y-start: start;
+    --y-center: center;
+    --y-end: end;
+}

package/src/themes/colors.css

@@ -1,62 +0,0 @@
-@layer base {
-    :root {
-        --neutral-color: oklch(14% .005 285.823);
-        --neutral-content-color: #fff;
-
-        --primary-color: oklch(0.546 0.245 262.881);
-        --primary-content-color: oklch(0.95 0.02 262.881);
-
-        --secondary-color: oklch(37.69% 0.1347 323.76);
-        --secondary-content-color: oklch(100% 0 0);
-
-        --accent-color: oklch(0.6 0.3 262.881);
-        --accent-content-color: oklch(0.98 0.03 262.881);
-
-        --info-color: oklch(0.65 0.2 230);
-        --info-content-color: oklch(0.98 0.02 230);
-
-        --success-color: oklch(0.6 0.22 150);
-        --success-content-color: oklch(0.98 0.02 150);
-
-        --warning-color: oklch(77.2% 0.1738 64.55);
-        --warning-content-color: oklch(0% 0 0);
-
-        --error-color: oklch(0.6 0.25 30);
-        --error-content-color: oklch(0.98 0.02 30);
-
-    }
-
-    [data-theme="dark"] {
-        --primary-color: oklch(.546 .245 262.881);
-        --primary-content-color: #fff;
-
-        --secondary-color: oklch(.546 .245 262.881);
-        --secondary-content-color: #fff;
-    }
-}
-
-@theme inline {
-    --color-neutral: var(--neutral-color);
-    --color-neutral-content: var(--neutral-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);
-}