frutjam 0.6.0-alpha.2 → 0.7.0-beta.0

package/src/components/checkbox.css

@@ -1,6 +1,73 @@
-@import '../themes/styles/base.css';
-@utility checkbox {
-    @apply size-4 rounded-md relative shrink-0 cursor-pointer appearance-none p-1 align-middle shadow ring duration-150;
+@import '../theme/skins/base.css';
+
+@utility checkbox-xs {
+  @layer components {
+    @apply p-0.75 size-3;
+  }
+}
+
+@utility checkbox-sm {
+  @layer components {
+    @apply p-1 size-4;
+  }
+}
+
+@utility checkbox-md {
+  @layer components {
+    @apply p-1.25 size-5;
+  }
+}
+
+@utility checkbox-lg {
+  @layer components {
+    @apply p-1.5 size-6;
+  }
+}
+
+@utility checkbox-xl {
+  @layer components {
+    @apply p-1.75 size-7;
+  }
+}
+
+@utility checkbox-2xl {
+  @layer components {
+    @apply p-2 size-8;
+  }
+}
+
+@utility checkbox-circle {
+  @layer components {
+    @apply rounded-full aspect-square;
+  }
+}
+
+@utility checkbox-square {
+  @layer components {
+    @apply rounded-[var(--radius-checkbox)] aspect-square;
+  }
+}
+
+@utility checkbox-core {
+  @layer components {
+    @apply relative shrink-0 cursor-pointer appearance-none align-middle shadow ring duration-350 checkbox-md;
+
+    --tw-ring-color: light-dark(
+      var(--checkbox-300),
+      color-mix(in oklab,var(--checkbox-100)16%,transparent)
+    );
+
+    background-color: light-dark(
+      var(--checkbox-100),
+      color-mix(in oklab,var(--checkbox-600)15%,transparent)
+    );
+
+    color: light-dark(
+      var(--checkbox-700),
+      var(--checkbox-200)
+    );
+
+    border-radius: var(--radius-checkbox);
 
     &::before {
       @apply block size-full rotate-45 bg-current opacity-0 content-none transition-all;
@@ -10,19 +77,23 @@
     }
   
     &:focus-visible {
-      outline: 2px solid var(--input-color, currentColor);
+      outline: 2px solid var(--checkbox-700, currentColor);
       outline-offset: 2px;
     }
   
     &:checked,
     &[aria-checked="true"] {
-        @apply shadow-2xl;  
+        @apply shadow-2xl;
+        background-color: light-dark(
+          var(--checkbox-200),
+          var(--checkbox-600)
+        );  
         &::before {
-            clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0, 70% 0, 70% 100%);
-            @apply opacity-100 content-['✔︎'];
-            @media (forced-colors: active) {
-                @apply rotate-0 bg-transparent content-['✔︎'] [clip-path:none];
-            }
+          clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0, 70% 0, 70% 100%);
+          @apply opacity-100 content-['✔︎'];
+          @media (forced-colors: active) {
+              @apply rotate-0 bg-transparent content-['✔︎'] [clip-path:none];
+          }
         }
     }
   
@@ -35,87 +106,160 @@
     }
     
     &:disabled {
-        @apply cursor-not-allowed opacity-20;
+      @apply cursor-not-allowed opacity-20;
     }
   }
+}
+
+@utility checkbox {
+  @layer components {
+    @apply checkbox-core;
+  }
+  @layer theme {
+    --checkbox-50: var(--default-50);
+    --checkbox-100: var(--default-100);
+    --checkbox-200: var(--default-200);
+    --checkbox-300: var(--default-300);
+    --checkbox-400: var(--default-400);
+    --checkbox-500: var(--default-500);
+    --checkbox-600: var(--default-600);
+    --checkbox-700: var(--default-700);
+    --checkbox-800: var(--default-800);
+    --checkbox-900: var(--default-900);
+    --checkbox-950: var(--default-950);
+  }
+}
   
-  @utility checkbox-primary {
-    @apply bg-primary/20 text-primary-fore ring-primary;
-    &:checked,
-    &[aria-checked="true"] {
-        @apply bg-primary;
-    }
+@utility checkbox-primary {
+  @layer components {
+    @apply checkbox-core;
+  }
+  @layer theme {
+    --checkbox-50: var(--primary-50);
+    --checkbox-100: var(--primary-100);
+    --checkbox-200: var(--primary-200);
+    --checkbox-300: var(--primary-300);
+    --checkbox-400: var(--primary-400);
+    --checkbox-500: var(--primary-500);
+    --checkbox-600: var(--primary-600);
+    --checkbox-700: var(--primary-700);
+    --checkbox-800: var(--primary-800);
+    --checkbox-900: var(--primary-900);
+    --checkbox-950: var(--primary-950);
   }
+}
   
-  @utility checkbox-secondary {
-    @apply bg-secondary/20 text-secondary-fore ring-secondary;
-    &:checked,
-    &[aria-checked="true"] {
-        @apply bg-secondary;
-    }
+@utility checkbox-secondary {
+  @layer components {
+    @apply checkbox-core;
+  }
+  @layer theme {
+    --checkbox-50: var(--secondary-50);
+    --checkbox-100: var(--secondary-100);
+    --checkbox-200: var(--secondary-200);
+    --checkbox-300: var(--secondary-300);
+    --checkbox-400: var(--secondary-400);
+    --checkbox-500: var(--secondary-500);
+    --checkbox-600: var(--secondary-600);
+    --checkbox-700: var(--secondary-700);
+    --checkbox-800: var(--secondary-800);
+    --checkbox-900: var(--secondary-900);
+    --checkbox-950: var(--secondary-950);
   }
+}
   
-  @utility checkbox-accent {
-    @apply bg-accent/20 text-accent-fore ring-accent;
-    &:checked,
-    &[aria-checked="true"] {
-        @apply bg-accent;
-    }
+@utility checkbox-accent {
+  @layer components {
+    @apply checkbox-core;
+  }
+  @layer theme {
+    --checkbox-50: var(--accent-50);
+    --checkbox-100: var(--accent-100);
+    --checkbox-200: var(--accent-200);
+    --checkbox-300: var(--accent-300);
+    --checkbox-400: var(--accent-400);
+    --checkbox-500: var(--accent-500);
+    --checkbox-600: var(--accent-600);
+    --checkbox-700: var(--accent-700);
+    --checkbox-800: var(--accent-800);
+    --checkbox-900: var(--accent-900);
+    --checkbox-950: var(--accent-950);
   }
+}
   
   
-  @utility checkbox-info {
-    @apply bg-info/20 text-info-fore ring-info;
-    &:checked,
-    &[aria-checked="true"] {
-        @apply bg-info;
-    }
+@utility checkbox-info {
+  @layer components {
+    @apply checkbox-core;
   }
-  
-  @utility checkbox-success {
-    @apply bg-success/20 text-success-fore ring-success;
-    &:checked,
-    &[aria-checked="true"] {
-        @apply bg-success;
-    }
+  @layer theme {
+    --checkbox-50: var(--info-50);
+    --checkbox-100: var(--info-100);
+    --checkbox-200: var(--info-200);
+    --checkbox-300: var(--info-300);
+    --checkbox-400: var(--info-400);
+    --checkbox-500: var(--info-500);
+    --checkbox-600: var(--info-600);
+    --checkbox-700: var(--info-700);
+    --checkbox-800: var(--info-800);
+    --checkbox-900: var(--info-900);
+    --checkbox-950: var(--info-950);
   }
+}
   
-  @utility checkbox-warning {
-    @apply bg-warning/20 text-warning-fore ring-warning;
-    &:checked,
-    &[aria-checked="true"] {
-        @apply bg-warning;
-    }
+@utility checkbox-success {
+  @layer components {
+    @apply checkbox-core;
   }
-  
-  @utility checkbox-error {
-    @apply bg-error/20 text-error-fore ring-error;
-    &:checked,
-    &[aria-checked="true"] {
-        @apply bg-error;
-    }
+  @layer theme {
+    --checkbox-50: var(--success-50);
+    --checkbox-100: var(--success-100);
+    --checkbox-200: var(--success-200);
+    --checkbox-300: var(--success-300);
+    --checkbox-400: var(--success-400);
+    --checkbox-500: var(--success-500);
+    --checkbox-600: var(--success-600);
+    --checkbox-700: var(--success-700);
+    --checkbox-800: var(--success-800);
+    --checkbox-900: var(--success-900);
+    --checkbox-950: var(--success-950);
   }
-
-  @utility checkbox-* {
-    @apply bg-[--value([color])]/20 text-[--value([color])] ring-[--value([color])]
-  }  
+}
   
-  @utility checkbox-xs {
-    @apply p-0.5 size-2;
+@utility checkbox-warning {
+  @layer components {
+    @apply checkbox-core;
   }
-  
-  @utility checkbox-sm {
-    @apply p-0.75 size-3;
+  @layer theme {
+    --checkbox-50: var(--warning-50);
+    --checkbox-100: var(--warning-100);
+    --checkbox-200: var(--warning-200);
+    --checkbox-300: var(--warning-300);
+    --checkbox-400: var(--warning-400);
+    --checkbox-500: var(--warning-500);
+    --checkbox-600: var(--warning-600);
+    --checkbox-700: var(--warning-700);
+    --checkbox-800: var(--warning-800);
+    --checkbox-900: var(--warning-900);
+    --checkbox-950: var(--warning-950);
   }
+}
   
-  @utility checkbox-md {
-    @apply p-1 size-4;
+@utility checkbox-error {
+  @layer components {
+    @apply checkbox-core;
   }
-  
-  @utility checkbox-lg {
-    @apply p-1.25 size-5;
+  @layer theme {
+    --checkbox-50: var(--error-50);
+    --checkbox-100: var(--error-100);
+    --checkbox-200: var(--error-200);
+    --checkbox-300: var(--error-300);
+    --checkbox-400: var(--error-400);
+    --checkbox-500: var(--error-500);
+    --checkbox-600: var(--error-600);
+    --checkbox-700: var(--error-700);
+    --checkbox-800: var(--error-800);
+    --checkbox-900: var(--error-900);
+    --checkbox-950: var(--error-950);
   }
-  
-  @utility checkbox-xl {
-    @apply p-1.5 size-6;
-  }
+}

package/src/components/divider.css

@@ -1,10 +1,35 @@
-@utility divider-* {
+@utility divider-x {
+    @layer components {
+        @apply h-4 w-auto flex-row my-2;
+        &::before, &::after {
+            @apply h-0.5 w-full;
+        }
+    }
+}
+
+@utility divider-x {
+    @layer components {
+        @apply h-auto w-4 flex-col mx-2;
+        &::before, &::after {
+            @apply h-full w-0.5;
+        }
+    }
+}
+
+@utility divider-core {
     @layer components {
         @apply flex flex-row items-center self-stretch whitespace-nowrap h-4;
 
         &::before,
         &::after {
-            @apply content-[''] bg-[--value(--color-*)] h-0.5 w-full grow;
+            @apply content-[''] h-0.25 w-full grow;
+            /* background-color: color-mix(in oklab, var(--divider-700) 10%, transparent); */
+
+            background-color: light-dark(
+                var(--divider-700),
+                color-mix(in oklab, var(--divider-700) 60%, transparent)
+            );
+
         }
 
         @media print {
@@ -21,20 +46,159 @@
         .divider-start::before, .divider-end::after  {
             @apply hidden;
         }
+    }
+}
 
-        &:is(.divider-x, .divider-y) {
-            &:is(.divider-x) {
-                @apply h-4 w-auto flex-row my-2;
-                &::before, &::after {
-                    @apply h-0.5 w-full;
-                }
-            }
-            &:is(.divider-y) {
-                @apply h-auto w-4 flex-col mx-2;
-                &::before, &::after {
-                    @apply h-full w-0.5;
-                }
-            }
-        }
+
+@utility divider {
+    @layer components {
+      @apply divider-core;
+    }
+    @layer theme {
+      --divider-50: var(--default-50);
+      --divider-100: var(--default-100);
+      --divider-200: var(--default-200);
+      --divider-300: var(--default-300);
+      --divider-400: var(--default-400);
+      --divider-500: var(--default-500);
+      --divider-600: var(--default-600);
+      --divider-700: var(--default-700);
+      --divider-800: var(--default-800);
+      --divider-900: var(--default-900);
+      --divider-950: var(--default-950);
+    }
+  }
+    
+  @utility divider-primary {
+    @layer components {
+      @apply divider-core;
+    }
+    @layer theme {
+      --divider-50: var(--primary-50);
+      --divider-100: var(--primary-100);
+      --divider-200: var(--primary-200);
+      --divider-300: var(--primary-300);
+      --divider-400: var(--primary-400);
+      --divider-500: var(--primary-500);
+      --divider-600: var(--primary-600);
+      --divider-700: var(--primary-700);
+      --divider-800: var(--primary-800);
+      --divider-900: var(--primary-900);
+      --divider-950: var(--primary-950);
+    }
+  }
+    
+  @utility divider-secondary {
+    @layer components {
+      @apply divider-core;
+    }
+    @layer theme {
+      --divider-50: var(--secondary-50);
+      --divider-100: var(--secondary-100);
+      --divider-200: var(--secondary-200);
+      --divider-300: var(--secondary-300);
+      --divider-400: var(--secondary-400);
+      --divider-500: var(--secondary-500);
+      --divider-600: var(--secondary-600);
+      --divider-700: var(--secondary-700);
+      --divider-800: var(--secondary-800);
+      --divider-900: var(--secondary-900);
+      --divider-950: var(--secondary-950);
+    }
+  }
+    
+  @utility divider-accent {
+    @layer components {
+      @apply divider-core;
+    }
+    @layer theme {
+      --divider-50: var(--accent-50);
+      --divider-100: var(--accent-100);
+      --divider-200: var(--accent-200);
+      --divider-300: var(--accent-300);
+      --divider-400: var(--accent-400);
+      --divider-500: var(--accent-500);
+      --divider-600: var(--accent-600);
+      --divider-700: var(--accent-700);
+      --divider-800: var(--accent-800);
+      --divider-900: var(--accent-900);
+      --divider-950: var(--accent-950);
+    }
+  }
+    
+    
+  @utility divider-info {
+    @layer components {
+      @apply divider-core;
+    }
+    @layer theme {
+      --divider-50: var(--info-50);
+      --divider-100: var(--info-100);
+      --divider-200: var(--info-200);
+      --divider-300: var(--info-300);
+      --divider-400: var(--info-400);
+      --divider-500: var(--info-500);
+      --divider-600: var(--info-600);
+      --divider-700: var(--info-700);
+      --divider-800: var(--info-800);
+      --divider-900: var(--info-900);
+      --divider-950: var(--info-950);
+    }
+  }
+    
+  @utility divider-success {
+    @layer components {
+      @apply divider-core;
+    }
+    @layer theme {
+      --divider-50: var(--success-50);
+      --divider-100: var(--success-100);
+      --divider-200: var(--success-200);
+      --divider-300: var(--success-300);
+      --divider-400: var(--success-400);
+      --divider-500: var(--success-500);
+      --divider-600: var(--success-600);
+      --divider-700: var(--success-700);
+      --divider-800: var(--success-800);
+      --divider-900: var(--success-900);
+      --divider-950: var(--success-950);
+    }
+  }
+    
+  @utility divider-warning {
+    @layer components {
+      @apply divider-core;
+    }
+    @layer theme {
+      --divider-50: var(--warning-50);
+      --divider-100: var(--warning-100);
+      --divider-200: var(--warning-200);
+      --divider-300: var(--warning-300);
+      --divider-400: var(--warning-400);
+      --divider-500: var(--warning-500);
+      --divider-600: var(--warning-600);
+      --divider-700: var(--warning-700);
+      --divider-800: var(--warning-800);
+      --divider-900: var(--warning-900);
+      --divider-950: var(--warning-950);
+    }
+  }
+    
+  @utility divider-error {
+    @layer components {
+      @apply divider-core;
+    }
+    @layer theme {
+      --divider-50: var(--error-50);
+      --divider-100: var(--error-100);
+      --divider-200: var(--error-200);
+      --divider-300: var(--error-300);
+      --divider-400: var(--error-400);
+      --divider-500: var(--error-500);
+      --divider-600: var(--error-600);
+      --divider-700: var(--error-700);
+      --divider-800: var(--error-800);
+      --divider-900: var(--error-900);
+      --divider-950: var(--error-950);
     }
-}
+  }

package/src/components/drawer.css

@@ -1,15 +1,19 @@
-@import "../themes/styles/base.css";
+@import "../theme/skins/base.css";
 @utility drawer {
   @layer components {
     @apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none place-items-start bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
 
     &:not(drawer:not([open]):not(.drawer-open)),
     &::backdrop {
-      @apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop;
+      @apply starting:invisible;
+      background: light-dark(
+        color-mix(in oklab,var(--color-default-100)30%,var(--color-default-900)20%),
+        color-mix(in oklab,var(--color-default-800)50%,transparent)
+      );
     }
 
     &[open], &.drawer-open{
-      @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
+      @apply pointer-events-auto visible starting:invisible;
 
       .drawer-body {
         translate: 0 0;
@@ -31,7 +35,7 @@
 
 @utility drawer-body {
   @layer components {
-    @apply bg-surface text-surface-fore rounded-none border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 h-screen max-h-none w-11/12  w-auto max-w-none p-1 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+    @apply bg-core-50 text-core-950 rounded-none shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 h-screen max-h-none w-11/12  w-auto max-w-none p-1 transition-all duration-200 overflow-y-auto overscroll-contain;
     translate: -100% 0;
     scale: 1;
   }

package/src/components/dropdown.css

@@ -1,5 +1,5 @@
-@import "../themes/styles/base.css";
-@import "../themes/placement.css";
+@import "../theme/skins/base.css";
+@import "../theme/placement.css";
 
 @utility dropdown {
   @layer components {
@@ -85,7 +85,7 @@
 
 @utility dropdown-body {
   @layer components {
-    @apply bg-surface text-surface-fore rounded-[var(--radius-size)] border border-black/30 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen p-3 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+    @apply bg-core-50 text-core-950 rounded-[var(--radius-size)] border border-black/30 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen p-3 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
   }
 }
 

package/src/components/input.css

@@ -1,4 +1,4 @@
-@import "../themes/styles/base.css";
+@import "../theme/skins/base.css";
 
 @utility input-* {
   @layer components {

package/src/components/modal.css

@@ -1,6 +1,6 @@
-@import "../themes/styles/base.css";
-@import "../themes/placement.css";
-@import "../themes/animation/slide.css";
+@import "../theme/skins/base.css";
+@import "../theme/placement.css";
+@import "../theme/animation/slide.css";
 
 @utility modal{
   @layer components {
@@ -8,7 +8,11 @@
 
     &:not(modal:not([open]):not(.modal-open)),
     &::backdrop {
-      @apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop;
+      @apply opacity-100 starting:invisible starting:opacity-0;
+      background-image: light-dark(
+        color-mix(in oklab,var(--color-default-100)15%,transparent),
+        color-mix(in oklab,var(--color-default-800)50%,transparent)
+      );
     }
 
     &[open], &.modal-open {
@@ -34,7 +38,7 @@
 
 @utility modal-body {
   @layer components {
-    @apply bg-surface text-surface-fore rounded-[calc(var(--radius-size)*2)] border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+    @apply bg-core-50 text-core-950 rounded-[var(--radius-modal)] border border-black/15 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
   }
 }
 

package/src/components/nav.css

@@ -1,7 +1,7 @@
 @utility nav-* {
     @layer components {
         &:is(.nav-list) {
-            @apply flex items-center gap-2 w-full;
+            @apply flex w-full gap-2;
         }
     }
 }
@@ -12,16 +12,16 @@
   @layer components {
     @apply [justify-self:--value(--x-*)];
     & > :where(.nav-list) {
-      @apply [justify-content:--value(--x-*)] flex-row;
+      @apply [justify-content:--value(--x-*)] items-center flex-row gap-x-2;
     }
   }
 }
 
 @utility nav-y-* {
     @layer components {
-        @apply [justify-self:--value(--x-*)];
+        @apply [justify-self:--value(--y-*)];
         & > :where(.nav-list) {
-            @apply [justify-content:--value(--y-*)] flex-col;
+            @apply items-start flex-col gap-y-1;
         }
     }
 }

package/src/components/popover.css

@@ -1,11 +1,11 @@
-@import "../themes/styles/base.css";
+@import "../theme/skins/base.css";
 @utility modal {
   @layer components {
     @apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
 
     &:not(modal:not([popover]:popover-open)),
     &::backdrop {
-      @apply opacity-100 starting:invisible starting:opacity-0 bg-backdrop;
+      @apply opacity-100 starting:invisible starting:opacity-0 bg-default-600;
     }
 
     &[popover]:popover-open {
@@ -31,7 +31,7 @@
 
 @utility modal-body {
   @layer components {
-    @apply bg-surface text-surface-fore rounded-3xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+    @apply bg-core-50 text-core-950 rounded-3xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
   }
 }
 

package/src/components/typography.css

@@ -1,4 +1,4 @@
-@import '../themes/typography.css';
+@import '../theme/typography.css';
 @utility style {
     h1 {
         @apply text-4xl font-bold