frutjam 0.11.0-beta.0 → 0.13.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.11.0-beta.0",
+  "version": "0.13.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",
@@ -50,7 +51,7 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "string-replace-loader": "^3.1.0",
     "style-loader": "^4.0.0",
-    "webpack": "^5.99.8",
+    "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.1"
   }

package/src/components/card.css

@@ -0,0 +1,54 @@
+@utility card-outline {
+    border: 1px solid light-dark(
+      var(--core-200),
+      var(--core-900)
+    );
+}
+
+@utility card-dashed {
+    border: 1px dashed light-dark(
+      var(--core-200),
+      var(--core-900)
+    );
+}
+
+/* card size */
+
+@utility card {
+    @apply relative flex flex-col;
+    border-radius: var(--radius-card);
+    overflow:hidden;
+    background: light-dark(
+        var(--core-50),
+        var(--core-900)
+    );
+
+    :where(figure:first-child) {
+        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) {
+        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/main.css

@@ -7,9 +7,13 @@
 @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";
+@import "./components/card.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);
+}