frutjam 1.1.0-beta.0 → 1.2.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "1.1.0-beta.0",
+  "version": "1.2.0-beta.0",
   "description": "A utility-first CSS framework UI Library",
   "funding": "https://ko-fi.com/nezanuha",
   "main": "./dist/frutjam.css",
@@ -17,7 +17,7 @@
     ".": "./src/main.css",
     "./base/*": "./src/base/*",
     "./components/*": "./src/components/*",
-    "./themes/*": "./src/themes/*",
+    "./themes/*": "./src/theme/*",
     "./utilities/*": "./src/utilities/*"
   },
   "scripts": {

package/src/components/accordion.css

@@ -1,7 +1,6 @@
 @import '../theme/jams/base.css';
-@utility accordion {
-    @apply divide-y divide-core-200 dark:divide-core-900;
 
+@utility accordion {
     display: grid;
     background: light-dark(
         var(--core-50),
@@ -15,19 +14,33 @@
     cursor: pointer;
 
     &>details {
-        @apply text-pretty;
+        &:not(:last-child) {
+            border-bottom: 1px solid light-dark(
+                var(--core-200),
+                var(--core-900)
+            );
+        }
+        text-wrap: pretty;
         
         &>*:not(summary){
-            @apply px-4 pb-4;
+            padding-inline: 1rem;
+            padding-bottom: 1rem;
         }
         &>summary::marker{
-            @apply content-none;
+            content: none;
         }
         &>summary{
-            @apply flex gap-4 items-center justify-between p-4 font-medium;
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+            justify-content: space-between;
+            padding: 1rem;
+            font-weight: 500;
+
             &::after {
-                @apply content-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiYSg1Myw1Myw1MywxKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41Ii8+Cjwvc3ZnPg==')];
-                @apply inline-block text-inherit;
+                content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0icmdiYSg1Myw1Myw1MywxKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41Ii8+Cjwvc3ZnPg==');
+                display: inline-block;
+                color: inherit;
             }
         }
     }
@@ -35,9 +48,11 @@
     &>details[open] {
 
         &>summary {
-            @apply pb-4;
+            padding-bottom: 1rem;
             &::after {
-                @apply rotate-180 origin-center transition-transform duration-300;
+                transform: rotate(180deg);
+                transform-origin: center;
+                transition: transform 300ms;
             }
         }
     }

package/src/components/badge.css

@@ -67,8 +67,8 @@
 }
 
 @utility badge {
-    @apply gap-2 badge-md;
-    
+    @apply badge-md;
+    gap: 0.5rem;
     border-radius: var(--badge-radius, var(--radius-badge));
     display: inline-flex;
     align-items: center;

package/src/components/breadcrumb.css

@@ -1,8 +1,7 @@
 @import "../theme/jams/base.css";
 
 @utility breadcrumb {
-  @apply py-2;
-
+  padding-block: 0.5rem;
   max-width: 100%;
   overflow-x: auto;
 
@@ -25,17 +24,22 @@
       & > span {
         display: flex;
         align-items: center;
-        @apply gap-2;
+        gap: 0.5rem;
 
         @media (hover: hover) {
           &:hover:not([aria-current="page"]):not(.breadcrumb-current) {
-            @apply underline underline-offset-4;
+            text-decoration-line: underline;
+            text-underline-offset: 4px;
             cursor: pointer;
           }
         }
 
         &:focus {
-          @apply outline-hidden;
+          outline-style: none;
+          @media (forced-colors: active) {
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+          }
         }
 
         &:focus-visible {
@@ -47,15 +51,22 @@
       /* Only show default separator if NOT preceded by .breadcrumb-separator */
       & + .breadcrumb-item::before, & + li::before {
         content: "";
-        @apply mr-3 ml-2 block h-1.5 w-1.5 opacity-40;
-        rotate: 45deg;
+        margin-right: 0.75rem;
+        margin-left: 0.5rem;
+        height: 0.375rem;
+        width: 0.375rem;
+        opacity: 40%;
+        display: block;
+        transform: rotate(45deg);
+        transition: transform 300ms;
         border-top: 1px solid;
         border-right: 1px solid;
         background-color: #0000;
       }
 
       [dir="rtl"] & + .breadcrumb-item::before, [dir="rtl"] & + li::before {
-        rotate: -135deg;
+        transform: rotate(-135deg);
+        transition: transform 300ms;
       }
 
       /* Remove default separator when preceded by custom .breadcrumb-separator */
@@ -68,7 +79,12 @@
     .breadcrumb-separator {
       display: flex;
       align-items: center;
-      @apply mx-2 text-sm text-gray-500;
+      margin-inline: 0.5rem;
+      font-size: 0.875rem;
+      color: light-dark(
+        var(--core-200),
+        var(--core-900)
+      );
     }
   }
 }

package/src/components/button.css

@@ -174,12 +174,16 @@
 }
 
 @utility btn {
-  @apply btn-md text-shadow-xs/5 gap-1.5 leading-normal;
+  @apply btn-md;
+
+  text-shadow: 0px 1px 1px color-mix(in oklab, var(--btn-900) 10%, transparent);
+  line-height: 1.5;
   width: var(--btn-width);
   max-width: var(--btn-max-width);
   transition: translate 0.2s ease-out, visibility 0.2s allow-discrete, background-color 0.2s ease-out, opacity 0.1s ease-out;
   position: relative;
   display: var(--btn-display, inline-flex);
+  gap: 0.375rem;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
@@ -231,18 +235,20 @@
   }
 
   &:is(:disabled, [disabled], .btn-disabled) {
-    @apply opacity-20 cursor-not-allowed pointer-events-none;
+    opacity: 20%;
+    cursor: not-allowed;
+    pointer-events: none;
   }
 
   &:is(input[type="checkbox"], input[type="radio"]) {
-    @apply appearance-none;
+    appearance: none;
 
     &::after {
       content: attr(aria-label);
     }
 
     &:checked {
-      @apply isolate;
+      isolation: isolate;
     }
   }
 

package/src/components/card.css

@@ -3,27 +3,26 @@
 @utility card-outline {
     border: 1px solid light-dark(
       var(--core-200),
-      var(--core-900)
+      var(--core-950)
     );
 }
 
 @utility card-dashed {
     border: 1px dashed light-dark(
       var(--core-200),
-      var(--core-900)
+      var(--core-950)
     );
 }
 
 /* card size */
 
 @utility card {
-    @apply relative flex flex-col;
+    position: relative;
+    display: flex;
+    flex-direction: column;
     border-radius: var(--radius-card);
     overflow:hidden;
-    background: light-dark(
-        var(--core-50),
-        var(--core-900)
-    );
+    background-color: transparent;
 
     :where(figure:first-child) {
         overflow: hidden;
@@ -43,14 +42,22 @@
 }
 
 @utility card-body {
-    @apply flex flex-auto flex-col gap-2;
+    display: flex;
+    gap: 0.5rem;
+    flex: auto;
+    flex-direction: column;
     padding: 1.5rem;
 
     :where(p){
-        @apply text-base grow;
+        flex-grow: 1;
+        font-size: 1rem;
     }
 }
 
 @utility card-title {
-    @apply flex items-center gap-2 font-semibold text-lg;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    font-size: 1.125rem;
 }

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

@@ -2,10 +2,11 @@
 
 @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;
     }
 }
 
@@ -59,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;
     }
 }
 
@@ -104,10 +106,15 @@
 }
 
 @utility divider {
-    @apply divider-x-solid flex items-center justify-center h-auto;
+    @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

@@ -10,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);

package/src/components/modal.css

@@ -2,15 +2,48 @@
 @import "../theme/placement.css";
 @import "../theme/animation/slide.css";
 
-@utility modal{
-  @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-3 text-inherit z-999 overflow-hidden overscroll-contain;
+@utility modal{  
+  display: grid;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  align-items: center;
+  z-index: 999;
+  overscroll-behavior: contain;
+  overflow: hidden;
+  justify-items: center;
+  color: inherit;
+  padding: 0.75rem;
+  background-color: transparent;
+  inset: 0rem;
+  margin: 0rem;
+  pointer-events: none;
+  visibility: hidden;
+  position: fixed;
+
+
   &:not(modal:not([open]):not(.modal-open)),
   &::backdrop {
-    @apply opacity-100 starting:invisible starting:opacity-0;
-    background: light-dark(#00000026, #000000ba);
+    @starting-style {
+      visibility: hidden;
+      opacity: 0%;
+    }
+
+    opacity: 100%;
+    background-color: color-mix(in oklab,var(--core-800)50%,transparent);
   }
   &[open], &.modal-open {
-    @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
+
+    pointer-events: auto;
+    visibility: visible;
+    opacity: 100%;
+
+    @starting-style {
+      visibility: hidden;
+      opacity: 0%;
+    }
+
     .modal-body {
       translate: 0 0;
       scale: 1;
@@ -20,18 +53,48 @@
 }
 
 @utility modal-backdrop {
-  @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1 bg-transparent;
+  display: grid;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  align-self: stretch;
+  justify-self: stretch;
+  color: transparent;
+  background-color: transparent;
+  z-index: -1;
+
   button {
-    @apply cursor-pointer;
+    cursor: pointer;
   }
 }
 
 @utility modal-body {
-  @apply rounded-[var(--radius-modal)] shadow-sm forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 scale-95 opacity-0 overflow-y-auto overscroll-contain;
-  --tw-shadow-color: light-dark(
+  /* @apply shadow-sm; */
+
+  box-shadow: light-dark(
+    var(--core-100),
+    var(--core-900)
+  ) 0px 1px 1px;
+
+  @media (forced-colors: active) {
+    outline-style: solid;
+    outline-width: 1px;
+  }
+  grid-column-start: 1;
+  grid-row-start: 1;
+  max-height: 100vh;
+  width: calc(11/12 * 100%);
+  max-width: 32rem;
+  padding: 1.5rem;
+  transform: scale(95%, 95%);
+  opacity: 0%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-radius: var(--radius-modal);
+
+  /* --tw-shadow-color: light-dark(
     color-mix(in oklab,var(--core-300)50%,transparent),
     color-mix(in oklab,var(--core-900)60%,transparent)
-  );
+  ); */
   background: light-dark(
     var(--core-50),
     var(--core-950)
@@ -51,18 +114,17 @@
 
 /* placements */
 @utility modal-x-* {
-  @apply [justify-items:--value(--x-*)];
+  justify-items:--value(--x-*);
 }
 
 @utility modal-y-* {
-  @apply [align-items:--value(--y-*)];
+  align-items:--value(--y-*);
 }
 
 /* animation */
-
 @utility modal-slide-* {
   :where(.modal-body) {
-    @apply [translate:--value(--slide-*)];
+    translate:--value(--slide-*);
     scale: 1;
   }
 }

package/src/components/nav.css

@@ -5,10 +5,10 @@
   justify-self: --value(--x-*);
   & > :where(.nav-list) {
     display: flex;
-    justify-content:--value(--x-*);
+    justify-content: --value(--x-*);
     align-items: center;
     flex-direction: row;
-    @apply gap-x-2;
+    column-gap: 0.5rem;
   }
 }
 
@@ -17,14 +17,15 @@
 }
 
 @utility nav-y-* {
-  @apply gap-y-3;
   display:flex;
+  row-gap: 0.75rem;
   flex-direction: column;
-  justify-self:--value(--y-*);
+  justify-self: --value(--y-*);
   width: 100%;
+
   & > :where(.nav-list) {
-      @apply gap-y-1;
       display: flex;
+      row-gap: 0.25rem;
       align-items: start;
       flex-direction: column;
       width: 100%;

package/src/components/popover.css

@@ -1,37 +1,78 @@
 @import "../theme/jams/base.css";
+
 @utility popover {
-  @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;
+  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;
+  align-items: center;
+  justify-items: center;
+  background-color: transparent;
+  color: inherit;
+  z-index: 999;
+  overflow: hidden;
+  overscroll-behavior: contain;
 
-    &:not(popover:not([popover]:popover-open)),
-    &::backdrop {
-      @apply opacity-100 starting:invisible starting:opacity-0 bg-default-600;
+  &:not(popover:not([popover]:popover-open)), &::backdrop {
+    opacity: 100%;
+    @starting-style {
+      visibility: hidden;
+      opacity: 0%;
     }
+    background-color: var(--default-600);
+  }
 
-    &[popover]:popover-open {
-      @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
+  &[popover]:popover-open {
+    pointer-events: auto;
+    visibility: visible;
+    opacity: 100%;
 
-      .popover-body {
-        translate: 0 0;
-        scale: 1;
-        opacity: 1;
-      }
+    @starting-style {
+      visibility: hidden;
+      opacity: 0%;
+    }
+
+    .popover-body {
+      translate: 0 0;
+      scale: 1;
+      opacity: 1;
     }
   }
 }
 
 @utility popover-backdrop {
-  @layer components {
-    @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
-    button {
-      @apply cursor-pointer;
-    }
+  display: grid;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  align-self: stretch;
+  justify-self: stretch;
+  color: transparent;
+  z-index: -1;
+
+  button {
+    cursor: pointer;
   }
 }
 
 @utility popover-body {
+
+  background-color: var(--core-50);
+  color: var(--core-950);
+  border-radius: 1.5rem;
+  border: 1px solid light-dark(
+    color-mix(in oklab,var(--core-300)50%,transparent),
+    color-mix(in oklab,var(--core-900)60%,transparent)
+  );
+
   @layer components {
-    @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;
+    @apply 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/sidebar.css

@@ -1,7 +1,17 @@
 @import "../theme/jams/base.css";
 
 @utility sidebar {
-    @apply p-6 border-x border-core-200 dark:border-core-900 max-h-dvh sticky overflow-y-auto gap-5;
+    position: sticky;
+    overflow-y: auto;
+    gap: 1.25rem;
+    max-height: 100dvh;
+    padding: 1.5rem;
+    border-inline-style: solid;
+    border-inline-width: 1px;
+    border-color: light-dark(
+        var(--core-200),
+        var(--core-900)
+    );
     background-color: light-dark(
         var(--core-0),
         var(--core-1000)

package/src/components/typography.css

@@ -1,6 +1,7 @@
 @import '../theme/typography.css';
 @utility style {
     h1 {
-        @apply text-4xl font-bold
+        font-size: 2.25rem;
+        font-weight: 700;
     }
 }

package/src/main.css

@@ -8,7 +8,7 @@
 @import "./components/checkbox.css";
 @import "./components/accordion.css";
 /* @import "./components/popover.css"; */
-@import "./components/dropdown.css";
+/* @import "./components/dropdown.css"; */
 @import "./components/divider.css";
 @import "./components/nav.css";
 @import "./components/card.css";