frutjam 0.8.1-beta.5 → 0.9.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "0.8.1-beta.5",
+  "version": "0.9.0-beta.0",
   "description": "A utility-first CSS framework UI Library",
   "main": "./dist/frutjam.css",
   "browser": "dist/frutjam.css",

package/src/components/nav.css

@@ -1,4 +1,5 @@
-@utility nav-* {
+/* use for breadcrums and menu */
+@utility nav {
   width: 100%;
   &:is(.nav-list) {
       @apply gap-2;
@@ -7,17 +8,26 @@
 }
 
 /* placements */
-
 @utility nav-x-* {
-  @apply [justify-self:--value(--x-*)];
+  justify-self: --value(--x-*);
   & > :where(.nav-list) {
-    @apply [justify-content:--value(--x-*)] items-center flex-row gap-x-2;
+    justify-content:--value(--x-*);
+    align-items: center;
+    flex-direction: row;
+    @apply gap-x-2;
   }
 }
 
 @utility nav-y-* {
-  @apply [justify-self:--value(--y-*)];
+  justify-self:--value(--y-*);
   & > :where(.nav-list) {
-      @apply items-start flex-col gap-y-1 w-full;
+      @apply gap-y-1;
+      display: flex;
+      align-items: start;
+      flex-direction: column;
+      width: 100%;
+      & > :where(li) {
+        width: 100%;
+      }
   }
 }

package/src/components/sidebar.css

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

package/src/components/surface.css

@@ -1,29 +1,64 @@
-@utility surface {
+@utility surface-0 {
+    background-color: light-dark(var(--core-0), var(--core-1000));
+    color: light-dark(var(--core-1000), var(--core-0));
+}
+
+@utility surface-50 {
     background-color: light-dark(var(--core-50), var(--core-950));
-    color: light-dark(var(--core-900), var(--core-50));
+    color: light-dark(var(--core-950), var(--core-50));
 }
 
-@utility surface-1 {
+@utility surface-100 {
     background-color: light-dark(var(--core-100), var(--core-900));
-    color: light-dark(var(--core-800), var(--core-100));
+    color: light-dark(var(--core-900), var(--core-100));
 }
 
-@utility surface-2 {
+@utility surface-200 {
     background-color: light-dark(var(--core-200), var(--core-800));
-    color: light-dark(var(--core-700), var(--core-200));
+    color: light-dark(var(--core-800), var(--core-200));
 }
 
-@utility surface-3 {
+@utility surface-300 {
     background-color: light-dark(var(--core-300), var(--core-700));
-    color: light-dark(var(--core-600), var(--core-300));
+    color: light-dark(var(--core-700), var(--core-300));
 }
 
-@utility surface-4 {
+@utility surface-400 {
     background-color: light-dark(var(--core-400), var(--core-600));
-    color: light-dark(var(--core-500), var(--core-400));
+    color: light-dark(var(--core-600), var(--core-400));
 }
 
-@utility surface-5 {
+@utility surface-500 {
     background-color: light-dark(var(--core-500), var(--core-500));
-    color: light-dark(var(--core-400), var(--core-500));
+    color: light-dark(var(--core-500), var(--core-500));
+}
+
+@utility surface-600 {
+    background-color: light-dark(var(--core-600), var(--core-400));
+    color: light-dark(var(--core-400), var(--core-600));
+}
+
+@utility surface-700 {
+    background-color: light-dark(var(--core-700), var(--core-300));
+    color: light-dark(var(--core-300), var(--core-700));
+}
+
+@utility surface-800 {
+    background-color: light-dark(var(--core-800), var(--core-200));
+    color: light-dark(var(--core-200), var(--core-800));
+}
+
+@utility surface-900 {
+    background-color: light-dark(var(--core-900), var(--core-100));
+    color: light-dark(var(--core-100), var(--core-900));
+}
+
+@utility surface-950 {
+    background-color: light-dark(var(--core-950), var(--core-50));
+    color: light-dark(var(--core-50), var(--core-950));
+}
+
+@utility surface-1000 {
+    background-color: light-dark(var(--core-1000), var(--core-0));
+    color: light-dark(var(--core-0), var(--core-1000));
 }

package/src/main.css

@@ -1,4 +1,5 @@
 @import "./components/header.css";
+@import "./components/sidebar.css";
 @import "./components/container.css";
 @import "./components/button.css";
 @import "./components/input.css";
@@ -6,6 +7,7 @@
 @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";

package/src/theme/jams/base.css

@@ -10,6 +10,7 @@
 }
 
 @theme inline {
+    --color-core-0: var(--core-0);
     --color-core-50: var(--core-50);
     --color-core-100: var(--core-100);
     --color-core-200: var(--core-200);
@@ -21,6 +22,7 @@
     --color-core-800: var(--core-800);
     --color-core-900: var(--core-900);
     --color-core-950: var(--core-950);
+    --color-core-1000: var(--core-1000);
 
     --color-default-50: var(--default-50);
     --color-default-100: var(--default-100);

package/src/theme/jams/darkberry.css

@@ -8,6 +8,7 @@
     --radius-accordion: 0.5rem;
     --radius-dropdown: 0.5rem;
 
+    --core-0: oklch(1 0 0);
     --core-50: oklch(.985 .001 106.423);
     --core-100: oklch(.97 .001 106.424);
     --core-200: oklch(.923 .003 48.717);
@@ -19,6 +20,7 @@
     --core-800: oklch(.268 .007 34.298);
     --core-900: oklch(.216 .006 56.043);
     --core-950: oklch(.147 .004 49.25);
+    --core-1000: oklch(0.15 0 0);
 
     --default-50: oklch(0.985 0 0);
     --default-100: oklch(0.967 0.001 286.375);

package/src/theme/jams/snowberry.css

@@ -14,6 +14,7 @@
     --radius-accordion: 0.5rem;
     --radius-dropdown: 0.5rem;
 
+    --core-0: oklch(1 0 0);
     --core-50: oklch(.985 .001 106.423);
     --core-100: oklch(.97 .001 106.424);
     --core-200: oklch(.923 .003 48.717);
@@ -25,6 +26,7 @@
     --core-800: oklch(.268 .007 34.298);
     --core-900: oklch(.216 .006 56.043);
     --core-950: oklch(.147 .004 49.25);
+    --core-1000: oklch(0.15 0 0);
 
     --default-50: oklch(0.985 0 0);
     --default-100: oklch(0.967 0.001 286.375);