frutjam 0.10.0-beta.2 → 0.12.0-beta.0

package/README.md

@@ -11,6 +11,8 @@
 
 With a wide selection of prebuilt components and themes, Frutjam makes it easy to hit the ground running or fully customize your design system.
 
+[![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/nezanuha)
+
 ---
 
 ### ✨ Features

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "frutjam",
-  "version": "0.10.0-beta.2",
+  "version": "0.12.0-beta.0",
   "description": "A utility-first CSS framework UI Library",
+  "funding": "https://ko-fi.com/nezanuha",
   "main": "./dist/frutjam.css",
   "browser": "dist/frutjam.css",
   "style": "./dist/frutjam.css",

package/src/components/card.css

@@ -0,0 +1,49 @@
+@utility card-outline {
+    border: 1px solid light-dark(
+      var(--input-700),
+      var(--input-800)
+    );
+}
+
+@utility card-dashed {
+    border: 1px dashed light-dark(
+      var(--input-700),
+      var(--input-800)
+    );
+}
+
+/* card size */
+
+@utility card {
+    @apply relative flex flex-col;
+    border-radius: var(--radius-card);
+
+    &:where(figure:first-child) {
+        @apply overflow-hidden;
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+        border-end-start-radius: unset;
+        border-end-end-radius: unset;
+    }
+    
+    &:where(figure:last-child) {
+        @apply overflow-hidden;
+        border-start-start-radius: unset;
+        border-start-end-radius: unset;
+        border-end-start-radius: inherit;
+        border-end-end-radius: inherit;
+    }
+}
+
+@utility card-body {
+    @apply flex flex-auto flex-col gap-2;
+    padding: 1.5rem;
+
+    &:where(p){
+        @apply  text-base grow;
+    }
+}
+
+@utility card-title {
+    @apply flex items-center gap-2 font-semibold text-lg;
+}

package/src/components/header.css

@@ -1,15 +1,20 @@
+@import "./container.css";
+
 @utility header {
-    @apply gap-3 py-2;
+    background-color: light-dark(var(--core-0), var(--core-1000));
+    color: light-dark(var(--core-900), var(--core-50));
+    border-bottom: 1px solid light-dark(var(--core-200), var(--core-800));
+    top: 0;
+    z-index: 999;
+}
+
+@utility header-body {
+    @apply gap-3 py-2 container;
     display: flex;
     justify-content: space-between;
     align-items:center;
     margin-left: auto;
     margin-right: auto;
-    background-color: light-dark(var(--core-50), var(--core-950));
-    color: light-dark(var(--core-900), var(--core-50));
-    border-bottom: 1px solid light-dark(var(--core-200), var(--core-800));
-    top: 0;
-    z-index: 999;
 }
 
 @utility header-sticky {

package/src/components/sidebar.css

@@ -1,8 +1,8 @@
 @utility sidebar {
     @apply p-6 border-x border-core-200 dark:border-core-900 max-h-dvh sticky overflow-y-auto gap-y-8;
     background-color: light-dark(
-        var(--core-0);
-        var(--core-1000);
+        var(--core-0),
+        var(--core-1000)
     );
     display: flex;
     flex-direction: column;

package/src/main.css

@@ -7,9 +7,12 @@
 @import "./components/drawer.css";
 @import "./components/checkbox.css";
 @import "./components/accordion.css";
-@import "./components/surface.css";
 /* @import "./components/popover.css"; */
 @import "./components/dropdown.css";
 @import "./components/divider.css";
 @import "./components/nav.css";
-@import "./utilities/headings.css";
+
+/* utilities */
+@import "./utilities/headings.css";
+@import "./utilities/para.css";
+@import "./utilities/surface.css";

package/src/theme/jams/darkberry.css

@@ -7,6 +7,7 @@
     --radius-modal: 1rem;
     --radius-accordion: 0.5rem;
     --radius-dropdown: 0.5rem;
+    --radius-card: 1rem;
 
     --core-0: oklch(1 0 0);
     --core-50: oklch(.985 .001 106.423);

package/src/theme/jams/snowberry.css

@@ -13,6 +13,7 @@
     --radius-modal: 1rem;
     --radius-accordion: 0.5rem;
     --radius-dropdown: 0.5rem;
+    --radius-card: 1rem;
 
     --core-0: oklch(1 0 0);
     --core-50: oklch(.985 .001 106.423);

package/src/utilities/headings.css

@@ -1,10 +1,22 @@
-@utility heading-* {
+@utility core-heading {
     @apply font-bold text-balance;
     color:light-dark(
-        var(--core-950)
-        var(--core-50)
+        var(--core-900),
+        var(--core-100)
     );
+}
+
+@utility heading-* {
+    @apply core-heading;
     font-size: --value(--text-*);
+}
+
+@utility heading {
+    @apply core-heading;
+    font-size: var(--text-base);
+}
 
-    /* todo: make it heading-md instead of heading-base */
+@utility heading-md {
+    @apply core-heading;
+    font-size: var(--text-base);
 }

package/src/utilities/para.css

@@ -0,0 +1,22 @@
+@utility core-para {
+    text-wrap: balance;
+    color:light-dark(
+        var(--core-900),
+        var(--core-300)
+    );
+}
+
+@utility para-* {
+    @apply core-para;
+    font-size: --value(--text-*);
+}
+
+@utility para {
+    @apply core-para;
+    font-size: var(--text-base);
+}
+
+@utility para-md {
+    @apply core-para;
+    font-size: var(--text-base);
+}