frutjam 1.1.0-beta.0 → 1.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "1.1.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",
@@ -17,7 +17,7 @@
     ".": "./src/main.css",
     "./base/*": "./src/base/*",
     "./components/*": "./src/components/*",
-    "./themes/*": "./src/themes/*",
+    "./themes/*": "./src/theme/*",
     "./utilities/*": "./src/utilities/*"
   },
   "scripts": {
@@ -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,11 +1,11 @@
 @import '../theme/jams/base.css';
-@utility accordion {
-    @apply divide-y divide-core-200 dark:divide-core-900;
+@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),
@@ -15,19 +15,36 @@
     cursor: pointer;
 
     &>details {
-        @apply text-pretty;
+        &:not(:last-child) {
+            border-bottom: 1px solid light-dark(
+                var(--core-200),
+                var(--core-900)
+            );
+        }
+        text-wrap: pretty;
         
         &>*:not(summary){
-            @apply px-4 pb-4;
+            padding-inline: 1rem;
+            padding-bottom: 1rem;
         }
         &>summary::marker{
-            @apply content-none;
+            content: none;
+        }
+        &>p{
+            @apply para;
         }
         &>summary{
-            @apply flex gap-4 items-center justify-between p-4 font-medium;
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+            justify-content: space-between;
+            padding: 1rem;
+            font-weight: 500;
+
             &::after {
-                @apply content-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiYSg1Myw1Myw1MywxKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41Ii8+Cjwvc3ZnPg==')];
-                @apply inline-block text-inherit;
+                content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiYSg1Myw1Myw1MywxKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41Ii8+Cjwvc3ZnPg==');
+                display: inline-block;
+                color: inherit;
             }
         }
     }
@@ -35,9 +52,11 @@
     &>details[open] {
 
         &>summary {
-            @apply pb-4;
+            padding-bottom: 1rem;
             &::after {
-                @apply rotate-180 origin-center transition-transform duration-300;
+                transform: rotate(180deg);
+                transform-origin: center;
+                transition: transform 300ms;
             }
         }
     }

package/src/components/badge.css

@@ -67,8 +67,8 @@
 }
 
 @utility badge {
-    @apply gap-2 badge-md;
-    
+    @apply badge-md;
+    gap: 0.5rem;
     border-radius: var(--badge-radius, var(--radius-badge));
     display: inline-flex;
     align-items: center;

package/src/components/breadcrumb.css

@@ -1,8 +1,7 @@
 @import "../theme/jams/base.css";
 
 @utility breadcrumb {
-  @apply py-2;
-
+  padding-block: 0.5rem;
   max-width: 100%;
   overflow-x: auto;
 
@@ -25,17 +24,22 @@
       & > span {
         display: flex;
         align-items: center;
-        @apply gap-2;
+        gap: 0.5rem;
 
         @media (hover: hover) {
           &:hover:not([aria-current="page"]):not(.breadcrumb-current) {
-            @apply underline underline-offset-4;
+            text-decoration-line: underline;
+            text-underline-offset: 4px;
             cursor: pointer;
           }
         }
 
         &:focus {
-          @apply outline-hidden;
+          outline-style: none;
+          @media (forced-colors: active) {
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+          }
         }
 
         &:focus-visible {
@@ -47,15 +51,22 @@
       /* Only show default separator if NOT preceded by .breadcrumb-separator */
       & + .breadcrumb-item::before, & + li::before {
         content: "";
-        @apply mr-3 ml-2 block h-1.5 w-1.5 opacity-40;
-        rotate: 45deg;
+        margin-right: 0.75rem;
+        margin-left: 0.5rem;
+        height: 0.375rem;
+        width: 0.375rem;
+        opacity: 40%;
+        display: block;
+        transform: rotate(45deg);
+        transition: transform 300ms;
         border-top: 1px solid;
         border-right: 1px solid;
         background-color: #0000;
       }
 
       [dir="rtl"] & + .breadcrumb-item::before, [dir="rtl"] & + li::before {
-        rotate: -135deg;
+        transform: rotate(-135deg);
+        transition: transform 300ms;
       }
 
       /* Remove default separator when preceded by custom .breadcrumb-separator */
@@ -68,7 +79,12 @@
     .breadcrumb-separator {
       display: flex;
       align-items: center;
-      @apply mx-2 text-sm text-gray-500;
+      margin-inline: 0.5rem;
+      font-size: 0.875rem;
+      color: light-dark(
+        var(--core-200),
+        var(--core-900)
+      );
     }
   }
 }

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,142 +210,54 @@
       .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));
-  }
-}
-
-@utility btn {
-  @apply btn-md text-shadow-xs/5 gap-1.5 leading-normal;
-  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);
-  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) {
-    @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;
-    }
+    --btn-bg-color: transparent;
+    --btn-text-color: light-dark(var(--btn-700), var(--btn-400));
   }
-
-  @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 {
@@ -277,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 {
@@ -291,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 {
@@ -305,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 {
@@ -319,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 {
@@ -333,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 {
@@ -347,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 {
@@ -361,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

@@ -3,26 +3,28 @@
 @utility card-outline {
     border: 1px solid light-dark(
       var(--core-200),
-      var(--core-900)
+      var(--core-950)
     );
 }
 
 @utility card-dashed {
     border: 1px dashed light-dark(
       var(--core-200),
-      var(--core-900)
+      var(--core-950)
     );
 }
 
 /* card size */
 
 @utility card {
-    @apply relative flex flex-col;
+    position: relative;
+    display: flex;
+    flex-direction: column;
     border-radius: var(--radius-card);
     overflow:hidden;
-    background: light-dark(
-        var(--core-50),
-        var(--core-900)
+    background-color: light-dark(
+        var(--core-0),
+        var(--core-1000)
     );
 
     :where(figure:first-child) {
@@ -43,14 +45,22 @@
 }
 
 @utility card-body {
-    @apply flex flex-auto flex-col gap-2;
+    display: flex;
+    gap: 0.5rem;
+    flex: auto;
+    flex-direction: column;
     padding: 1.5rem;
 
     :where(p){
-        @apply text-base grow;
+        flex-grow: 1;
+        font-size: 1rem;
     }
 }
 
 @utility card-title {
-    @apply flex items-center gap-2 font-semibold text-lg;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    font-size: 1.125rem;
 }