frutjam 1.4.0-beta.0 → 1.5.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "1.4.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 {
@@ -82,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);
@@ -128,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 {
@@ -142,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 {
@@ -156,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 {
@@ -170,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 {
@@ -184,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 {
@@ -198,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 {
@@ -212,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 {
@@ -226,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

@@ -27,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);
 
@@ -88,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;
@@ -125,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

@@ -67,56 +67,56 @@
 
 
 @utility card-xs {
-  &:is(.card-body) {
+  :is(.card-body) {
     --card-body-padding: 0.5rem;
     --card-body-font-size: 0.6875rem;
   }
 
-  &:is(.card-title) {
+  :is(.card-title) {
     --card-title-font-size: 0.875rem;
   }
 }
 
 @utility card-sm {
-  &:is(.card-body) {
+  :is(.card-body) {
     --card-body-padding: 1rem;
     --card-body-font-size: 0.75rem;
   }
 
-  &:is(.card-title) {
+  :is(.card-title) {
     --card-title-font-size: 1rem;
   }
 }
 
 @utility card-md {
-  &:is(.card-body) {
+  :is(.card-body) {
     --card-body-padding: 1.5rem;
     --card-body-font-size: 0.875rem;
   }
 
-  &:is(.card-title) {
+  :is(.card-title) {
     --card-title-font-size: 1.125rem;
   }
 }
 
 @utility card-lg {
-  &:is(.card-body) {
+  :is(.card-body) {
     --card-body-padding: 2rem;
     --card-body-font-size: 1rem;
   }
 
-  &:is(.card-title) {
+  :is(.card-title) {
     --card-title-font-size: 1.25rem;
   }
 }
 
 @utility card-xl {
-  &:is(.card-body) {
+  :is(.card-body) {
     --card-body-padding: 2.5rem;
     --card-body-font-size: 1.125rem;
   }
 
-  &:is(.card-title) {
+  :is(.card-title) {
     --card-title-font-size: 1.375rem;
   }
 }

package/src/components/checkbox.css

@@ -36,7 +36,6 @@
   height: 2rem;
 }
 
-/*checkbox-circle deprecated: Remove this in stable release*/
 @utility checkbox-circle {
   border-radius: calc(infinity * 1px);
   aspect-ratio: 1 / 1;

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-style: stable;
+    text-wrap-style: pretty;
     color:light-dark(
         var(--core-700),
         var(--core-300)