frutjam 1.0.0-beta.0 → 1.2.0-beta.0

package/src/components/checkbox.css

@@ -1,99 +1,162 @@
 @import "../theme/jams/base.css";
 
 @utility checkbox-xs {
-  @layer components {
-    @apply p-0.75 size-3;
-  }
+  padding: 0.1875rem;
+  width: 0.75rem;
+  height: 0.75rem;
 }
 
 @utility checkbox-sm {
-  @layer components {
-    @apply p-1 size-4;
-  }
+  padding: 0.25rem;
+  width: 1rem;
+  height: 1rem;
 }
 
 @utility checkbox-md {
-  @layer components {
-    @apply p-1.25 size-5;
-  }
+  padding: 0.3125rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 @utility checkbox-lg {
-  @layer components {
-    @apply p-1.5 size-6;
-  }
+  padding: 0.375rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 @utility checkbox-xl {
-  @layer components {
-    @apply p-1.75 size-7;
-  }
+  padding: 0.4375rem;
+  width: 1.75rem;
+  height: 1.75rem;
 }
 
 @utility checkbox-2xl {
-  @layer components {
-    @apply p-2 size-8;
-  }
+  padding: 0.5rem;
+  width: 2rem;
+  height: 2rem;
 }
 
 @utility checkbox-circle {
-  @layer components {
-    @apply rounded-full aspect-square;
-  }
+  border-radius: calc(infinity * 1px);
+  aspect-ratio: 1 / 1;
 }
 
 @utility checkbox-square {
-  @layer components {
-    @apply rounded-[var(--radius-checkbox)] aspect-square;
-  }
+  border-radius: var(--radius-checkbox);
+  aspect-ratio: 1 / 1;
 }
 
 @utility checkbox {
-    @apply relative shrink-0 cursor-pointer appearance-none align-middle shadow ring duration-350 checkbox-md;
+    @apply checkbox-md;
+    /* box-shadow: light-dark(
+      var(--core-100),
+      var(--core-900)
+    ) 0px 1px 1px; */
+    position: relative;
+    transition-duration: 350ms;
+    flex-shrink: 0;
+    cursor: pointer;
+    appearance: none;
+    vertical-align: middle;
 
-    --tw-ring-color: light-dark(
-      var(--checkbox-300),
-      color-mix(in oklab, var(--checkbox-100) 16%, transparent)
+    box-shadow: 0 0 0 0px var(--checkbox-100), 0 0 0 calc(1px + 0px) light-dark(var(--checkbox-300), var(--checkbox-500)), 0 0 var(--checkbox-100);
+    /* border: 1.6px solid var(--checkbox-100); */
+    outline: 1px solid light-dark(
+      var(--checkbox-400),
+      var(--checkbox-700)
     );
-
+      
     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));
 
+    /* &:not(
+      .checkbox-primary,
+      .checkbox-secondary,
+      .checkbox-accent,
+      .checkbox-info,
+      .checkbox-success,
+      .checkbox-warning,
+      .checkbox-error
+    ){
+      outline: 1px solid light-dark(
+        var(--checkbox-400),
+        var(--checkbox-700)
+      );
+      border: 0.5px solid light-dark(
+        var(--checkbox-50),
+        var(--checkbox-900)
+      );
+    }
+
+    &:is(
+      .checkbox-primary,
+      .checkbox-secondary,
+      .checkbox-accent,
+      .checkbox-info,
+      .checkbox-success,
+      .checkbox-warning,
+      .checkbox-error
+    ){
+      outline: 1px solid var(--checkbox-700);
+      border: 0.5px solid light-dark(
+        var(--checkbox-50),
+        var(--checkbox-900)
+      );
+    } */
+
+
+    /* background-color: transparent; */
+    /* color: light-dark(var(--checkbox-700), var(--checkbox-200)); */
+    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;
+      content: none;
+      opacity: 0%;
+      background-color: currentcolor;
+      transform: rotate(45deg);
+      transition: transform 300ms, background-color 100ms;
+      display: block;
+      width: 100%;
+      height: 100%;
       clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0, 70% 0, 70% 100%);
       font-size: 1rem;
       line-height: 0.75;
     }
 
     &:focus-visible {
-      outline: 2px solid var(--checkbox-700, currentColor);
+      outline: 1px solid var(--checkbox-700, currentColor);
       outline-offset: 2px;
     }
 
     &:checked,
     &[aria-checked="true"] {
-      @apply shadow-2xl;
+      box-shadow: 0 0 0 0px var(--checkbox-100),   0 0 0 calc(1px + 0px) var(--checkbox-400), 0 0 var(--checkbox-100);
       background-color: light-dark(var(--checkbox-200), var(--checkbox-600));
+      transition: transform 300ms, background-color 100ms;
+
       &::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];
+        content: '✔︎';
+        opacity: 100%;
+      }
+
+      @media (forced-colors: active) {
+        &:before {
+          content: '✔︎';
+          transform: rotate(0deg);
+          background-color: light-dark(var(--checkbox-200), var(--checkbox-600));
+          clip-path:none;
         }
       }
     }
 
     &:indeterminate {
       &:before {
-        @apply rotate-0 opacity-100;
-        translate: 0 -35%;
+        opacity: 100%;
+        transform: rotate(0deg) translate(0, -35%);
         clip-path: polygon(
           20% 100%,
           20% 80%,
@@ -106,7 +169,8 @@
     }
 
     &:disabled {
-      @apply cursor-not-allowed opacity-20;
+      cursor: not-allowed;
+      opacity: 20%;
     }
 
     --checkbox-50: var(--default-50);

package/src/components/container.css

@@ -44,8 +44,8 @@
 }
 
 @utility container-full {
-  width: 100vw;
-  max-width: 100vw;
+  width: 100%;
+  max-width: 100%;
   margin-inline: auto;
   padding-inline: 1rem;
   box-sizing: border-box;

package/src/components/divider.css

@@ -1,9 +1,12 @@
+@import "../theme/jams/base.css";
+
 @utility divider-x {
     &:not(:empty) {
-        @apply gap-x-2;
+        column-gap: 0.5rem;
     }
     &::before, &::after {
-        @apply w-full h-[0.5px];
+        width: 100%;
+        height: 0.5px;
     }
 }
 
@@ -57,12 +60,13 @@
 
 
 @utility divider-y {
-    @apply flex-col;
+    flex-direction: column;
     &:not(:empty) {
-        @apply gap-y-2;
+        row-gap: 0.5rem;
     }
     &::before, &::after {
-        @apply w-[0.5px] flex-1;
+        width: 0.5px;
+        flex: 1;
     }
 }
 
@@ -102,10 +106,15 @@
 }
 
 @utility divider {
-    @apply divider-x-solid flex items-center justify-center h-full;
+    @apply divider-x-solid;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: auto;
 
     &::before, &::after {
-        @apply content-[''];
+        content: '';
     }
 
     --divider-50: var(--default-50);

package/src/components/drawer.css

@@ -1,10 +1,28 @@
 @import "../theme/jams/base.css";
 @utility drawer {
-  @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;
+  pointer-events: none;
+  visibility: hidden;
+  position: fixed;
+  inset: 0rem;
+  margin: 0rem;
+  padding: 0rem;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  place-items: start;
+  background-color: transparent;
+  color: inherit;
+  z-index: 999;
+  overflow: hidden;
+  overscroll-behavior: contain;
 
   &:not(drawer:not([open]):not(.drawer-open)),
   &::backdrop {
-    @apply starting:invisible;
+    @starting-style {
+      visibility: hidden;
+    }
     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)
@@ -12,7 +30,11 @@
   }
 
   &[open], &.drawer-open{
-    @apply pointer-events-auto visible starting:invisible;
+    @starting-style {
+      visibility: hidden;
+    }
+    pointer-events: auto;
+    visibility: visible;
 
     .drawer-body {
       translate: 0 0;
@@ -23,16 +45,37 @@
 }
 
 @utility drawer-backdrop {
-  @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
+  display: grid;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  align-self: stretch;
+  justify-self: stretch;
+  color: transparent;
+  z-index: -1;
+
   button {
-    @apply cursor-pointer;
+    cursor: pointer;
   }
 }
 
 @utility drawer-body {
-  @apply rounded-none forced-colors:outline col-start-1 row-start-1 h-screen max-h-none w-11/12  w-auto max-w-none p-1 overflow-y-auto overscroll-contain;
+  border-radius: 0;
   translate: -100% 0;
   scale: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  height: 100vh;
+  max-height: none;
+  width: calc(11/12 * 100%);
+  max-width: none;
+  padding: 0.25rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  @media (forced-colors: active) {
+    outline-style: solid;
+    outline-width: 1px;
+  }
 
   --tw-shadow-color: light-dark(
     color-mix(in oklab,var(--core-300)50%,transparent),
@@ -56,10 +99,13 @@
 
 
 @utility drawer-top {
-  @apply place-items-start;
+  place-items: start;
 
   :where(.drawer-body) {
-    @apply h-auto w-full max-w-none rounded-none;
+    height: auto;
+    width: 100%;
+    max-width: none;
+    border-radius: 0;
     max-height: calc(100vh - 5em);
     translate: 0 -100%;
     scale: 1;
@@ -67,10 +113,13 @@
 }
 
 @utility drawer-bottom {
-  @apply place-items-end;
+  place-items: end;
 
   :where(.drawer-body) {
-    @apply h-auto w-full max-w-none rounded-none;
+    height: auto;
+    width: 100%;
+    max-width: none;
+    border-radius: 0;
     max-height: calc(100vh - 5em);
     translate: 0 100%;
     scale: 1;
@@ -78,20 +127,28 @@
 }
 
 @utility drawer-start {
-  @apply place-items-start;
+  place-items: start;
 
   :where(.drawer-body) {
-    @apply h-screen max-h-none w-auto max-w-none rounded-none;
+    height: 100vh;
+    width: auto;
+    max-height: none;
+    max-width: none;
+    border-radius: 0;
     translate: -100% 0;
     scale: 1;
   }
 }
 
 @utility drawer-end {
-  @apply place-items-end;
+  place-items: end;
 
   :where(.drawer-body) {
-    @apply h-screen max-h-none w-auto max-w-none rounded-none;
+    height: 100vh;
+    max-height: none;
+    max-width: none;
+    width: auto;
+    border-radius: 0;
     translate: 100% 0;
     scale: 1;
   }

package/src/components/header.css

@@ -1,3 +1,4 @@
+@import "../theme/jams/base.css";
 @import "./container.css";
 
 @utility header {
@@ -9,8 +10,11 @@
 }
 
 @utility header-body {
-    @apply gap-3 py-2 container;
+    @apply container;
+
     display: flex;
+    gap: 0.75rem;
+    padding-block: 0.5rem;
     justify-content: space-between;
     align-items:center;
     margin-left: auto;

package/src/components/input.css

@@ -50,14 +50,16 @@
 
 @utility input-dashed {
   &:not(.input-active) {
-    @apply outline-dashed;
+    outline-width: 1px;
+    outline-style: dashed;
   }
 }
 
 
 @utility input-outline {
   &:not(.input-active) {
-    @apply outline outline-solid;
+    outline-width: 1px;
+    outline-style: solid;
   }
 }
 
@@ -76,28 +78,43 @@
 
 @utility input-ghost {
   &:not(.input-active) {
-    @apply outline-transparent;
+    outline-color: transparent;
   }
 }
 
 @utility input {
-  @apply input-md transition duration-300 px-2.5 font-medium relative inline-flex self-start
-  shrink-0 appearance-none items-center gap-2 align-middle whitespace-nowrap;
+  @apply input-md;
 
+  display: inline-flex;
+  align-self: flex-start;
+  flex-shrink: 0;
+  align-items: center;
+  appearance: none;
   border-radius: var(--radius-input);
+  gap: 0.5rem;
+  vertical-align: middle;
+  white-space: nowrap;
+  position: relative;
+  font-weight: 500;
+  padding-inline: 0.625rem;
+  transition: border-color 300ms, outline-color 300ms;
 
   &::placeholder {
-    @apply text-sm;
+    font-size: var(--input-text-size);
     color: light-dark(
       var(--core-300),
-      var(--core-800)
+      var(--core-700)
     );
   }
 
   &::file-selector-button{
-    @apply mr-4 inline-flex items-center transition duration-300 text-sm;
+    font-size: var(--input-text-size);
+    margin-right: 1rem;
+    display: inline-flex;
+    transition: border-color 300ms, background-color 300ms, display 300ms;
+    align-items: center;
     border-radius: calc(var(--radius-input)/2);
-    background: light-dark(
+    background-color: light-dark(
       var(--input-100),
       var(--input-800)
     );
@@ -119,7 +136,7 @@
           var(--input-900),
           var(--input-300)
         );
-        background: light-dark(
+        background-color: light-dark(
           var(--input-200),
           var(--input-700)
         );
@@ -137,8 +154,12 @@
     .input-error
   ){
     outline: 1px solid light-dark(
-      var(--input-300),
-      var(--input-800)
+      var(--input-400),
+      var(--input-700)
+    );
+    border: 0.5px solid light-dark(
+      var(--input-50),
+      var(--input-900)
     );
   }
 
@@ -151,23 +172,59 @@
     .input-warning,
     .input-error
   ){
-    outline: 1px solid light-dark(
-      var(--input-700),
-      var(--input-800)
+    outline: 1px solid var(--input-700);
+    border: 0.5px solid light-dark(
+      var(--input-50),
+      var(--input-900)
     );
   }
 
   &:is(:disabled, [disabled], .input-disabled) {
-    @apply cursor-not-allowed placeholder:text-[var(--input-200)];
+    cursor: not-allowed;
     color:var(--input-50);
     background-color: light-dark(
       var(--input-100),
       var(--input-900)
     );
+
+    &::placeholder {
+      color: var(--input-200);
+    }
   }
 
   &:focus, &:focus-within {
-    @apply outline-[var(--input-800)] ring-2 ring-[var(--input-200)] isolate;
+    isolation: isolate;
+    &:is(
+      .input-primary,
+      .input-secondary,
+      .input-accent,
+      .input-info,
+      .input-success,
+      .input-warning,
+      .input-error
+    ){
+      outline-color: var(--input-800);
+      border-color: light-dark(
+        var(--input-200),
+        var(--input-950)
+      );
+    }
+
+    &:not(
+      .input-primary,
+      .input-secondary,
+      .input-accent,
+      .input-info,
+      .input-success,
+      .input-warning,
+      .input-error
+    ){
+      outline-color: var(--input-800);
+      border-color: light-dark(
+        var(--input-200),
+        var(--input-600)
+      );
+    }
   }
 
   --input-50: var(--default-50);