frutjam 1.3.0-beta.0 → 1.5.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "1.3.0-beta.0",
+  "version": "1.5.0-beta.0",
   "description": "A utility-first CSS framework UI Library",
   "funding": "https://ko-fi.com/nezanuha",
   "main": "./dist/frutjam.css",

package/src/components/accordion.css

@@ -31,7 +31,7 @@
             content: none;
         }
         &>p{
-            @apply para;
+            @apply para-sm;
         }
         &>summary{
             display: flex;

package/src/components/badge.css

@@ -37,33 +37,47 @@
   --badge-text-size: 1.25rem;
 }
 
+@utility badge-square {
+  &:where(.badge-square, .badge-circle){
+    padding-inline: var(--badge-inline);
+    padding-block: var(--badge-inline);
+    width: var(--badge-block);
+    height: var(--badge-block);
+  }
+}
+
 @utility badge-rounded {
   --badge-radius: calc(infinity * 1px);
 }
 
+@utility badge-circle {
+  @apply badge-square badge-rounded;
+}
+
 @utility badge-dashed {
-    background-color: transparent;
-    outline: 1px dashed light-dark(var(--badge-500), var(--badge-700));
-    color: light-dark(var(--badge-700), var(--badge-500));
+    --badge-bg-color: transparent;
+    --badge-text-color: light-dark(var(--badge-700), var(--badge-500));
+    --badge-outline-width: 1px;
+    --badge-outline-style: dashed;
+    --badge-outline-color: light-dark(var(--badge-500), var(--badge-700));
 }
 
 @utility badge-outline {
-    background-color: transparent;
-    outline: 1px solid light-dark(var(--badge-500), var(--badge-800));
-    color: light-dark(var(--badge-800), var(--badge-200));
+    --badge-bg-color: transparent;
+    --badge-text-color: light-dark(var(--badge-700), var(--badge-500));
+    --badge-outline-width: 1px;
+    --badge-outline-style: solid;
+    --badge-outline-color: light-dark(var(--badge-500), var(--badge-700));
 }
 
 @utility badge-soft {
-    background-color: light-dark(
-      var(--badge-100),
-      color-mix(in oklab, var(--badge-900) 10%, transparent)
-    );
-    color: light-dark(var(--badge-800), var(--badge-400));
+    --badge-bg-color: light-dark(var(--badge-100), color-mix(in oklab, var(--badge-900) 30%, transparent));
+    --badge-text-color: light-dark(var(--badge-800), var(--btn-400));
 }
 
 @utility badge-ghost {
-    background-color: transparent;
-    color: light-dark(var(--badge-600), var(--badge-300));
+    --badge-bg-color: transparent;
+    --badge-text-color: light-dark(var(--badge-600), var(--badge-300));
 }
 
 @utility badge {
@@ -71,6 +85,7 @@
     gap: 0.5rem;
     border-radius: var(--badge-radius, var(--radius-badge));
     display: inline-flex;
+    line-height: 1.25rem;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
@@ -81,40 +96,12 @@
     padding-block: var(--badge-block);
     font-size: var(--badge-text-size);
 
-    &:where(.badge-square){
-      padding-inline: var(--badge-inline);
-      padding-block: var(--badge-inline);
-      width: var(--badge-block);
-      height: var(--badge-block);
-    }
-
-    /* for default badge */
-    &:not(
-        .badge-primary,
-        .badge-secondary,
-        .badge-accent,
-        .badge-info,
-        .badge-success,
-        .badge-warning,
-        .badge-error
-    ) {
-        background-color: light-dark(var(--badge-200), var(--badge-800));
-        color: light-dark(var(--badge-900), var(--badge-50));
-    }
-
-    /* for all badge exclude default badge */
-    &:is(
-        .badge-primary,
-        .badge-secondary,
-        .badge-accent,
-        .badge-info,
-        .badge-success,
-        .badge-warning,
-        .badge-error
-    ) {
-        background-color: light-dark(var(--badge-700), var(--badge-700));
-        color: var(--badge-50);
-    }
+    background-color: var(--badge-bg-color);
+    color: var(--badge-text-color);
+
+    outline-width: var(--badge-outline-width);
+    outline-style: var(--badge-outline-style);
+    outline-color: var(--badge-outline-color);
 
     --badge-50: var(--default-50);
     --badge-100: var(--default-100);
@@ -127,6 +114,9 @@
     --badge-800: var(--default-800);
     --badge-900: var(--default-900);
     --badge-950: var(--default-950);
+
+    --badge-bg-color: light-dark(var(--badge-200), var(--badge-800));
+    --badge-text-color: light-dark(var(--badge-900), var(--badge-50));
 }
 
 @utility badge-primary {
@@ -141,6 +131,9 @@
   --badge-800: var(--primary-800);
   --badge-900: var(--primary-900);
   --badge-950: var(--primary-950);
+
+  --badge-bg-color: light-dark(var(--badge-700), var(--badge-700));
+  --badge-text-color: var(--badge-50);
 }
 
 @utility badge-secondary {
@@ -155,6 +148,9 @@
   --badge-800: var(--secondary-800);
   --badge-900: var(--secondary-900);
   --badge-950: var(--secondary-950);
+
+  --badge-bg-color: light-dark(var(--badge-700), var(--badge-700));
+  --badge-text-color: var(--badge-50);
 }
 
 @utility badge-accent {
@@ -169,6 +165,9 @@
   --badge-800: var(--accent-800);
   --badge-900: var(--accent-900);
   --badge-950: var(--accent-950);
+
+  --badge-bg-color: light-dark(var(--badge-700), var(--badge-700));
+  --badge-text-color: var(--badge-50);
 }
 
 @utility badge-info {
@@ -183,6 +182,9 @@
   --badge-800: var(--info-800);
   --badge-900: var(--info-900);
   --badge-950: var(--info-950);
+
+  --badge-bg-color: light-dark(var(--badge-700), var(--badge-700));
+  --badge-text-color: var(--badge-50);
 }
 
 @utility badge-success {
@@ -197,6 +199,9 @@
   --badge-800: var(--success-800);
   --badge-900: var(--success-900);
   --badge-950: var(--success-950);
+
+  --badge-bg-color: light-dark(var(--badge-700), var(--badge-700));
+  --badge-text-color: var(--badge-50);
 }
 
 @utility badge-warning {
@@ -211,6 +216,9 @@
   --badge-800: var(--warning-800);
   --badge-900: var(--warning-900);
   --badge-950: var(--warning-950);
+
+  --badge-bg-color: light-dark(var(--badge-700), var(--badge-700));
+  --badge-text-color: var(--badge-50);
 }
 
 @utility badge-error {
@@ -225,4 +233,7 @@
   --badge-800: var(--error-800);
   --badge-900: var(--error-900);
   --badge-950: var(--error-950);
+
+  --badge-bg-color: light-dark(var(--badge-700), var(--badge-700));
+  --badge-text-color: var(--badge-50);
 }

package/src/components/button.css

@@ -3,8 +3,6 @@
 
 @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);
@@ -29,11 +27,6 @@
   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);
 
@@ -90,7 +83,6 @@
   --btn-text-color: light-dark(var(--btn-900), var(--btn-50));
 }
 
-
 @utility btn-xs {
   --btn-inline: 0.875rem;
   --btn-block: 0.375rem;
@@ -127,15 +119,21 @@
   --btn-text-size: 1.375rem;
 }
 
-/*btn-circle deprecated: Remove this in stable release*/
-@utility btn-circle {
-  --btn-radius: calc(infinity * 1px);
+@utility btn-square{
+  &:where(.btn-square, .btn-circle){
+    padding-inline: var(--btn-block);
+    padding-block: var(--btn-block);
+  }
 }
 
 @utility btn-rounded {
   --btn-radius: calc(infinity * 1px);
 }
 
+@utility btn-circle {
+  @apply btn-square btn-rounded;
+}
+
 @utility btn-wide {
   --btn-max-width: var(--container-xs);
   --btn-width: 100%;

package/src/components/card.css

@@ -3,14 +3,14 @@
 @utility card-outline {
     border: 1px solid light-dark(
       var(--core-200),
-      var(--core-950)
+      var(--core-900)
     );
 }
 
 @utility card-dashed {
     border: 1px dashed light-dark(
       var(--core-200),
-      var(--core-950)
+      var(--core-900)
     );
 }
 
@@ -49,11 +49,11 @@
     gap: 0.5rem;
     flex: auto;
     flex-direction: column;
-    padding: 1.5rem;
+    padding: var(--card-body-padding, 1.5rem);
 
     :where(p){
         flex-grow: 1;
-        font-size: 1rem;
+        font-size: var(--card-body-font-size, 1rem);
     }
 }
 
@@ -62,5 +62,61 @@
     align-items: center;
     gap: 0.5rem;
     font-weight: 600;
-    font-size: 1.125rem;
+    font-size: var(--card-title-font-size, 1.125rem);
+}
+
+
+@utility card-xs {
+  :is(.card-body) {
+    --card-body-padding: 0.5rem;
+    --card-body-font-size: 0.6875rem;
+  }
+
+  :is(.card-title) {
+    --card-title-font-size: 0.875rem;
+  }
+}
+
+@utility card-sm {
+  :is(.card-body) {
+    --card-body-padding: 1rem;
+    --card-body-font-size: 0.75rem;
+  }
+
+  :is(.card-title) {
+    --card-title-font-size: 1rem;
+  }
+}
+
+@utility card-md {
+  :is(.card-body) {
+    --card-body-padding: 1.5rem;
+    --card-body-font-size: 0.875rem;
+  }
+
+  :is(.card-title) {
+    --card-title-font-size: 1.125rem;
+  }
+}
+
+@utility card-lg {
+  :is(.card-body) {
+    --card-body-padding: 2rem;
+    --card-body-font-size: 1rem;
+  }
+
+  :is(.card-title) {
+    --card-title-font-size: 1.25rem;
+  }
+}
+
+@utility card-xl {
+  :is(.card-body) {
+    --card-body-padding: 2.5rem;
+    --card-body-font-size: 1.125rem;
+  }
+
+  :is(.card-title) {
+    --card-title-font-size: 1.375rem;
+  }
 }

package/src/components/checkbox.css

@@ -41,6 +41,11 @@
   aspect-ratio: 1 / 1;
 }
 
+@utility checkbox-rounded {
+  border-radius: calc(infinity * 1px);
+  aspect-ratio: 1 / 1;
+}
+
 @utility checkbox-square {
   border-radius: var(--radius-checkbox);
   aspect-ratio: 1 / 1;

package/src/components/link.css

@@ -0,0 +1,159 @@
+@import "../theme/jams/base.css";
+
+@utility link {
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 4px;
+    color: var(--link-700);
+    font-size: var(--link-text-size, 1rem);
+
+    &:focus {
+        outline-style: none;
+        @media (forced-colors: active) {
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+        }
+    }
+
+    &:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            color: light-dark(var(--link-800), var(--link-500));
+        }
+    }
+}
+
+@utility link-hover {
+    text-decoration-line: none;
+    &:hover {
+        @media (hover: hover) {
+            text-decoration-line: underline;
+        }
+    }
+}
+
+@utility link-primary {
+  --link-50: var(--primary-50);
+  --link-100: var(--primary-100);
+  --link-200: var(--primary-200);
+  --link-300: var(--primary-300);
+  --link-400: var(--primary-400);
+  --link-500: var(--primary-500);
+  --link-600: var(--primary-600);
+  --link-700: var(--primary-700);
+  --link-800: var(--primary-800);
+  --link-900: var(--primary-900);
+  --link-950: var(--primary-950);
+}
+
+@utility link-secondary {
+  --link-50: var(--secondary-50);
+  --link-100: var(--secondary-100);
+  --link-200: var(--secondary-200);
+  --link-300: var(--secondary-300);
+  --link-400: var(--secondary-400);
+  --link-500: var(--secondary-500);
+  --link-600: var(--secondary-600);
+  --link-700: var(--secondary-700);
+  --link-800: var(--secondary-800);
+  --link-900: var(--secondary-900);
+  --link-950: var(--secondary-950);
+}
+
+@utility link-accent {
+  --link-50: var(--accent-50);
+  --link-100: var(--accent-100);
+  --link-200: var(--accent-200);
+  --link-300: var(--accent-300);
+  --link-400: var(--accent-400);
+  --link-500: var(--accent-500);
+  --link-600: var(--accent-600);
+  --link-700: var(--accent-700);
+  --link-800: var(--accent-800);
+  --link-900: var(--accent-900);
+  --link-950: var(--accent-950);
+}
+
+@utility link-info {
+  --link-50: var(--info-50);
+  --link-100: var(--info-100);
+  --link-200: var(--info-200);
+  --link-300: var(--info-300);
+  --link-400: var(--info-400);
+  --link-500: var(--info-500);
+  --link-600: var(--info-600);
+  --link-700: var(--info-700);
+  --link-800: var(--info-800);
+  --link-900: var(--info-900);
+  --link-950: var(--info-950);
+}
+
+@utility link-success {
+  --link-50: var(--success-50);
+  --link-100: var(--success-100);
+  --link-200: var(--success-200);
+  --link-300: var(--success-300);
+  --link-400: var(--success-400);
+  --link-500: var(--success-500);
+  --link-600: var(--success-600);
+  --link-700: var(--success-700);
+  --link-800: var(--success-800);
+  --link-900: var(--success-900);
+  --link-950: var(--success-950);
+}
+
+@utility link-warning {
+  --link-50: var(--warning-50);
+  --link-100: var(--warning-100);
+  --link-200: var(--warning-200);
+  --link-300: var(--warning-300);
+  --link-400: var(--warning-400);
+  --link-500: var(--warning-500);
+  --link-600: var(--warning-600);
+  --link-700: var(--warning-700);
+  --link-800: var(--warning-800);
+  --link-900: var(--warning-900);
+  --link-950: var(--warning-950);
+}
+
+@utility link-error {
+  --link-50: var(--error-50);
+  --link-100: var(--error-100);
+  --link-200: var(--error-200);
+  --link-300: var(--error-300);
+  --link-400: var(--error-400);
+  --link-500: var(--error-500);
+  --link-600: var(--error-600);
+  --link-700: var(--error-700);
+  --link-800: var(--error-800);
+  --link-900: var(--error-900);
+  --link-950: var(--error-950);
+}
+
+@utility link-xs {
+  --link-text-size: 0.75rem;
+}
+
+@utility link-sm {
+  --link-text-size: 0.875rem;
+}
+
+@utility link-md {
+  --link-text-size: 1rem;
+}
+
+@utility link-lg {
+  --link-text-size: 1.125rem;
+}
+
+@utility link-xl {
+  --link-text-size: 1.25rem;
+}
+
+@utility link-2xl {
+  --link-text-size: 1.375rem;
+}

package/src/main.css

@@ -7,6 +7,7 @@
 @import "./components/drawer.css";
 @import "./components/checkbox.css";
 @import "./components/accordion.css";
+@import "./components/link.css";
 /* @import "./components/popover.css"; */
 /* @import "./components/dropdown.css"; */
 @import "./components/divider.css";

package/src/theme/animation/slide.css

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

package/src/utilities/para.css

@@ -1,5 +1,5 @@
 @utility core-para {
-    text-wrap: balance;
+    text-wrap-style: pretty;
     color:light-dark(
         var(--core-700),
         var(--core-300)