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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "0.6.0-alpha.1",
+  "version": "0.7.0-alpha.0",
   "description": "A utility-first CSS framework UI Library",
   "main": "./dist/frutjam.css",
   "browser": "dist/frutjam.css",
@@ -50,7 +50,7 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "string-replace-loader": "^3.1.0",
     "style-loader": "^4.0.0",
-    "webpack": "^5.98.0",
+    "webpack": "^5.99.5",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.1"
   }

package/src/base/preflight.css

@@ -1,7 +1,7 @@
 @layer base{
     :root,
     [data-theme] {
-      background-color: var(--color-surface);
-      color: var(--color-surface-fore);
+      background-color: light-dark(var(--core-50), var(--core-950));
+      color: light-dark(var(--core-900), var(--core-50));
     }
 }

package/src/components/accordion.css

@@ -1,7 +1,7 @@
-@import '../themes/styles/base.css';
+@import '../theme/skins/base.css';
 @utility accordion {
     @layer components {
-        @apply grid divide-y divide-info border border-info cursor-pointer rounded-md;
+        @apply grid divide-y divide-info-100 border border-info-100 cursor-pointer rounded-md;
 
         &>details {
             @apply text-pretty;

package/src/components/button.css

@@ -1,141 +1,339 @@
-@import "../themes/styles/base.css";
-@import "../themes/animation/wiggle.css";
+@import "../theme/skins/base.css";
+@import "../theme/animation/wiggle.css";
 
-@utility btn-* {
+@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-base;
+  }
+}
+
+@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-lg;
+  }
+}
+
+@utility btn-circle {
+  @layer components {
+    @apply rounded-full size-auto aspect-square;
+  }
+}
+
+@utility btn-square {
+  @layer components {
+    @apply size-auto aspect-square;
+  }
+}
+
+@utility btn-wide {
+  @layer components {
+    @apply w-full max-w-xs;
+  }
+}
 
-    @apply relative inline-flex self-start shrink-0 flex-nowrap items-center
+@utility btn-block {
+  @layer components {
+    @apply w-full;
+  }
+}
+
+@utility btn-core {
+  @layer components {
+    @apply btn-md 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)];
+           text-xs transition duration-350 ease-in-out leading-4 cursor-pointer;
+    
+    color: var(--btn-50);
+    border-radius: var(--radius-btn);
+    background-color: light-dark(
+      var(--btn-600),
+      var(--btn-800)
+    );
 
-    &:is(.btn-base, .btn-primary, .btn-secondary, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-accent) {
-      /* global */
-      &:not(.btn-link) {
-        @media (hover: hover) {
-          &:hover {
-            &::before {
-              @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
-            }
-          }
-        }
+    &:is(:disabled, [disabled], .btn-disabled) {
+      @apply opacity-20 pointer-events-none;
+    }
+
+    &:is(input[type="checkbox"], input[type="radio"]) {
+      @apply appearance-none;
+
+      &::after {
+        content: attr(aria-label);
       }
 
-      /* button for checkbox and radio button */
-      &:is(input[type="checkbox"], input[type="radio"]) {
-        @apply appearance-none;
-    
-        &::after {
-          content: attr(aria-label);
-        }
-    
-        &:checked {
-          @apply ring-1 bg-gradient-to-tr via-[--value(--color-*)]/90 isolate;
-        }
+      &:checked {
+        @apply isolate;
       }
+    }
 
-      /* disabled button */
-      &:is(:disabled, [disabled], .btn-disabled) {
-        @apply bg-[--value(--color-*)]/10 text-[--value(--color-*)]/30 pointer-events-none;
+    &:is(.btn-active, :hover) {
+      &:is(.btn-link) {
+        @apply bg-transparent underline underline-offset-4 cursor-pointer;
+        
+        color: light-dark(
+          var(--btn-600),
+          var(--btn-500)
+        );
       }
+      &:not(.btn-link) {
+        @apply shadow-2xl ring-2 outline-none;
 
-      /* 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-*-fore)];
-        }
+        --tw-ring-color: light-dark(
+          color-mix(in oklab,var(--btn-700)10%,transparent),
+          color-mix(in oklab,var(--btn-400)10%,transparent)
+        );
+
+        background-color: light-dark(
+          var(--btn-700),
+          var(--btn-900)
+        );
 
-        @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-1 bg-gradient-to-tr via-[--value(--color-*)]/90;
-            }
-            &:is(.btn-link) {
-              @apply underline underline-offset-4 cursor-pointer;
-            }
+        color: light-dark(
+          var(--btn-50),
+          var(--btn-100)
+        );
+        
+        &:not(:disabled, [disabled], .btn-disabled) {
+          &::before {
+            @apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
           }
         }
       }
+    }
 
-      /* button dashed */
-      &:is(.btn-dashed) {
-        @apply text-[--value(--color-*)] bg-transparent border border-dashed border-[--value(--color-*)];
+    &:where(.btn-dashed) {
+      &:not(.btn-active) {
+        @apply bg-transparent outline outline-dashed;
 
-        @media (hover: hover) {
-          &:hover {
-            @apply ring-1 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
-          }
-        }
+        color: light-dark(
+          var(--btn-700),
+          var(--btn-500)
+        );
       }
+    }
 
-      /* button outline */
-      &:is(.btn-outline) {
-        @apply text-[--value(--color-*)] bg-transparent ring-1 ring-[--value(--color-*)];
-  
-        @media (hover: hover) {
-          &:hover {
-            @apply ring-1 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
-          }
-        }
+    &:where(.btn-outline) {
+      &:not(.btn-active) {
+        @apply bg-transparent outline outline-solid;
+        
+        color: light-dark(
+          var(--btn-700),
+          var(--btn-500)
+        );
       }
+    }
 
-      /* 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-1;
-          }
-        }
+    &:where(.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)
+        );
       }
     }
 
-    /* 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;
-    }
+    &:where(.btn-ghost) {
+      &:not(.btn-active) {
+        @apply bg-transparent;
 
-    /* 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;
-      }
-      &:is(.btn-sm) {
-        @apply px-3 py-2 text-sm;
-      }
-      &:is(.btn-md) {
-        @apply px-3.5 py-2.5 text-sm;
-      }
-      &:is(.btn-lg) {
-        @apply px-4 py-3 text-base;
-      }
-      &:is(.btn-xl) {
-        @apply px-4.5 py-3.5 text-base;
-      }
-      &:is(.btn-2xl) {
-        @apply px-5 py-4 text-base;
+        color: light-dark(
+          var(--btn-600),
+          var(--btn-500)
+        );
       }
     }
 
-    /* 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;
+    &:where(.btn-link) {
+      &:not(.btn-active) {
+        @apply bg-transparent;
+
+        color: light-dark(
+          var(--btn-600),
+          var(--btn-500)
+        );
       }
     }
   }
-}
+}
+
+@utility btn {
+  @layer components {
+    @apply btn-core;
+  }
+  @layer theme {
+    --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 {
+  @layer components {
+    @apply btn-core;
+  }
+  @layer theme {
+    --btn-50: var(--primary-50);
+    --btn-100: var(--primary-100);
+    --btn-200: var(--primary-200);
+    --btn-300: var(--primary-300);
+    --btn-400: var(--primary-400);
+    --btn-500: var(--primary-500);
+    --btn-600: var(--primary-600);
+    --btn-700: var(--primary-700);
+    --btn-800: var(--primary-800);
+    --btn-900: var(--primary-900);
+    --btn-950: var(--primary-950);
+  }
+}
+
+@utility btn-secondary {
+  @layer components {
+    @apply btn-core;
+  }
+  @layer theme {
+    --btn-50: var(--secondary-50);
+    --btn-100: var(--secondary-100);
+    --btn-200: var(--secondary-200);
+    --btn-300: var(--secondary-300);
+    --btn-400: var(--secondary-400);
+    --btn-500: var(--secondary-500);
+    --btn-600: var(--secondary-600);
+    --btn-700: var(--secondary-700);
+    --btn-800: var(--secondary-800);
+    --btn-900: var(--secondary-900);
+    --btn-950: var(--secondary-950);
+  }
+}
+
+@utility btn-accent {
+  @layer components {
+    @apply btn-core;
+  }
+  @layer theme {
+    --btn-50: var(--accent-50);
+    --btn-100: var(--accent-100);
+    --btn-200: var(--accent-200);
+    --btn-300: var(--accent-300);
+    --btn-400: var(--accent-400);
+    --btn-500: var(--accent-500);
+    --btn-600: var(--accent-600);
+    --btn-700: var(--accent-700);
+    --btn-800: var(--accent-800);
+    --btn-900: var(--accent-900);
+    --btn-950: var(--accent-950);
+  }
+}
+
+@utility btn-info {
+  @layer components {
+    @apply btn-core;
+  }
+  @layer theme {
+    --btn-50: var(--info-50);
+    --btn-100: var(--info-100);
+    --btn-200: var(--info-200);
+    --btn-300: var(--info-300);
+    --btn-400: var(--info-400);
+    --btn-500: var(--info-500);
+    --btn-600: var(--info-600);
+    --btn-700: var(--info-700);
+    --btn-800: var(--info-800);
+    --btn-900: var(--info-900);
+    --btn-950: var(--info-950);
+  }
+}
+
+@utility btn-success {
+  @layer components {
+    @apply btn-core;
+  }
+  @layer theme {
+    --btn-50: var(--success-50);
+    --btn-100: var(--success-100);
+    --btn-200: var(--success-200);
+    --btn-300: var(--success-300);
+    --btn-400: var(--success-400);
+    --btn-500: var(--success-500);
+    --btn-600: var(--success-600);
+    --btn-700: var(--success-700);
+    --btn-800: var(--success-800);
+    --btn-900: var(--success-900);
+    --btn-950: var(--success-950);
+  }
+}
+
+@utility btn-warning {
+  @layer components {
+    @apply btn-core;
+  }
+  @layer theme {
+    --btn-50: var(--warning-50);
+    --btn-100: var(--warning-100);
+    --btn-200: var(--warning-200);
+    --btn-300: var(--warning-300);
+    --btn-400: var(--warning-400);
+    --btn-500: var(--warning-500);
+    --btn-600: var(--warning-600);
+    --btn-700: var(--warning-700);
+    --btn-800: var(--warning-800);
+    --btn-900: var(--warning-900);
+    --btn-950: var(--warning-950);
+  }
+}
+
+@utility btn-error {
+  @layer components {
+    @apply btn-core;
+  }
+  @layer theme {
+    --btn-50: var(--error-50);
+    --btn-100: var(--error-100);
+    --btn-200: var(--error-200);
+    --btn-300: var(--error-300);
+    --btn-400: var(--error-400);
+    --btn-500: var(--error-500);
+    --btn-600: var(--error-600);
+    --btn-700: var(--error-700);
+    --btn-800: var(--error-800);
+    --btn-900: var(--error-900);
+    --btn-950: var(--error-950);
+  }
+}