frutjam 0.8.0-beta.0 → 0.8.0-beta.2

package/package.json

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

package/src/components/button.css

@@ -70,159 +70,197 @@
   @apply w-full;
 }
 
-@utility btn-core {
-  @apply btn-md text-shadow-xs/5 relative inline-flex self-start shrink-0 flex-nowrap items-center
-          justify-center gap-1.5 text-center align-middle font-medium overflow-hidden
-          text-xs transition duration-350 ease-in-out leading-normal cursor-pointer box-border;
-  
-  border-radius: var(--radius-btn);
-
+@utility btn-link-active {
+  background: transparent;
+  color: light-dark(
+    var(--btn-800),
+    var(--btn-500)
+  );
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  cursor: pointer;
+} 
+
+@utility btn-ghost-active {
   /* for default btn */
   &:is(.btn) {
     background-color: light-dark(
-      var(--btn-100),
-      var(--btn-800)
+      var(--btn-200),
+      var(--btn-900)
     );
     color: light-dark(
-      var(--btn-900),
-      var(--btn-50)
+      var(--btn-950),
+      var(--btn-100)
     );
   }
 
   /* for all btn exclude default btn */
   &:not(.btn) {
     background-color: light-dark(
-      var(--btn-600),
-      var(--btn-800)
+      var(--btn-700),
+      var(--btn-900)
+    );
+    color: light-dark(
+      var(--btn-50),
+      var(--btn-100)
     );
-    color: var(--btn-50);
   }
+}
 
-  &:is(:disabled, [disabled], .btn-disabled) {
-    @apply opacity-20 cursor-not-allowed;
+@utility btn-active {
+  &:is(.btn-link) {    
+    @apply btn-link-active
   }
-
-  &:is(input[type="checkbox"], input[type="radio"]) {
-    @apply appearance-none;
-
-    &::after {
-      content: attr(aria-label);
-    }
-
-    &:checked {
-      @apply isolate;
-    }
+  &:is(.btn-ghost) {
+    @apply btn-ghost-active;
   }
+  &:not(.btn-link, .btn-ghost) {
+    outline-style: none;
 
-  &:is(.btn-active, :hover) {
-    &:is(.btn-link) {
-      @apply bg-transparent underline underline-offset-4 cursor-pointer;
-      
+    /* for default btn */
+    &:is(.btn) {
+      background-color: light-dark(
+        var(--btn-300),
+        var(--btn-900)
+      );
       color: light-dark(
-        var(--btn-800),
-        var(--btn-500)
+        var(--btn-950),
+        var(--btn-100)
       );
     }
-    &:not(.btn-link) {
-      @apply outline-none;
-
-      /* for default btn */
-      &:is(.btn) {
-        background-color: light-dark(
-          var(--btn-200),
-          var(--btn-800)
-        );
-
-        color: light-dark(
-          var(--btn-950),
-          var(--btn-100)
-        );
-      }
-
-      /* for all btn exclude default btn */
-      &:not(.btn) {
-        background-color: light-dark(
-          var(--btn-700),
-          var(--btn-900)
-        );
-
-        color: light-dark(
-          var(--btn-50),
-          var(--btn-100)
-        );
-      }
-      
-      &:not(:disabled, [disabled], .btn-disabled) {
-        &::before {
-          @apply content-[''] absolute size-full;
-        }
-      }
-    }
-  }
 
-  &:where(.btn-dashed) {
-    &:not(.btn-active) {
-      @apply bg-transparent;
-      outline: 1px dashed light-dark(
-        var(--btn-500),
-        var(--btn-700)
+    /* for all btn exclude default btn */
+    &:not(.btn) {
+      background-color: light-dark(
+        var(--btn-700),
+        var(--btn-900)
       );
       color: light-dark(
-        var(--btn-700),
-        var(--btn-500)
+        var(--btn-50),
+        var(--btn-100)
       );
     }
   }
+}
 
-  &:where(.btn-outline) {
-    &:not(.btn-active) {
-      @apply bg-transparent;
-      outline: 1px solid light-dark(
-        var(--btn-500),
-        var(--btn-800)
-      );
-      color: light-dark(
-        var(--btn-800),
-        var(--btn-200)
-      );
-    }
+@utility btn-dashed {
+  &:not(.btn-active) {
+    background:  transparent;
+    outline: 1px dashed light-dark(
+      var(--btn-500),
+      var(--btn-700)
+    );
+    color: light-dark(
+      var(--btn-700),
+      var(--btn-500)
+    );
   }
+}
 
-  &:where(.btn-soft) {
-    &:not(.btn-active) {
+@utility btn-outline {
+  &:not(.btn-active) {
+    background: transparent;
+    outline: 1px solid light-dark(
+      var(--btn-500),
+      var(--btn-800)
+    );
+    color: light-dark(
+      var(--btn-800),
+      var(--btn-200)
+    );
+  }
+}
 
-      background-color: light-dark(
-        var(--btn-100),
-        color-mix(in oklab,var(--btn-900)10%,transparent)
-      );
+@utility btn-soft {
+  &:not(.btn-active) {
+    background-color: light-dark(
+      var(--btn-100),
+      color-mix(in oklab,var(--btn-900)10%,transparent)
+    );
+    color: light-dark(
+      var(--btn-800),
+      var(--btn-400)
+    );
+  }
+}
 
-      color: light-dark(
-        var(--btn-800),
-        var(--btn-400)
-      );
-    }
+@utility btn-ghost {
+  &:not(.btn-active) {
+    background: transparent;
+    color: light-dark(
+      var(--btn-600),
+      var(--btn-300)
+    );
   }
+}
 
-  &:where(.btn-ghost) {
-    &:not(.btn-active) {
-      @apply bg-transparent;
+@utility btn-link {
+  &:not(.btn-active) {
+    background: transparent;
+    color: light-dark(
+      var(--btn-700),
+      var(--btn-500)
+    );
+  }
+}
 
-      color: light-dark(
-        var(--btn-600),
-        var(--btn-300)
-      );
-    }
+@utility btn-core {
+  @apply btn-md text-shadow-xs/5 gap-1.5 text-xs transition duration-350 ease-in-out leading-normal;
+
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  flex-wrap: nowrap;
+  vertical-align: middle;
+  font-weight: 500;
+  text-align: center;
+  border-radius: var(--radius-btn);
+  overflow: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  /* for default btn */
+  &:is(.btn) {
+    background-color: light-dark(
+      var(--btn-200),
+      var(--btn-800)
+    );
+    color: light-dark(
+      var(--btn-900),
+      var(--btn-50)
+    );
   }
 
-  &:where(.btn-link) {
-    &:not(.btn-active) {
-      @apply bg-transparent;
+  /* for all btn exclude default btn */
+  &:not(.btn) {
+    background-color: light-dark(
+      var(--btn-600),
+      var(--btn-800)
+    );
+    color: var(--btn-50);
+  }
 
-      color: light-dark(
-        var(--btn-700),
-        var(--btn-500)
-      );
+  &:is(:disabled, [disabled], .btn-disabled) {
+    @apply opacity-20 cursor-not-allowed pointer-events-none;
+  }
+
+  &:is(input[type="checkbox"], input[type="radio"]) {
+    @apply appearance-none;
+
+    &::after {
+      content: attr(aria-label);
     }
+
+    &:checked {
+      @apply isolate;
+    }
+  }
+
+  &:is(:hover) {
+    @apply btn-active;
   }
 }
 

package/src/components/divider.css

@@ -11,14 +11,14 @@
     @apply divider-x;
     &::before, &::after {
         background: light-dark(
-            var(--divider-color),
-            color-mix(in oklab, var(--divider-color) 60%, transparent)
+            var(--divider-700),
+            var(--divider-900)
         );
     }
     @media print {
         &::before,
         &::after {
-            border-top: 0.5px solid var(--divider-color);
+            border-top: 0.5px solid var(--divider-700);
         }
     }
 }
@@ -28,8 +28,8 @@
     &::before, &::after {
         background: repeating-linear-gradient(
             to right,
-            var(--divider-color) 0,
-            var(--divider-color) 5px,
+            var(--divider-700) 0,
+            var(--divider-700) 5px,
             transparent 5px,
             transparent 10px
         );
@@ -37,7 +37,7 @@
     @media print {
         &::before,
         &::after {
-            border-top: 0.5px dashed var(--divider-color);
+            border-top: 0.5px dashed var(--divider-700);
         }
     }
 }
@@ -70,14 +70,14 @@
     @apply divider-y;
     &::before, &::after {
         background: light-dark(
-            var(--divider-color),
-            color-mix(in oklab, var(--divider-color) 60%, transparent)
+            var(--divider-700),
+            var(--divider-800)
         );
     }
     @media print {
         &::before,
         &::after {
-            border-left: 0.5px solid var(--divider-color);
+            border-left: 0.5px solid var(--divider-700);
         }
     }
 }
@@ -87,8 +87,8 @@
     &::before, &::after {
         background: repeating-linear-gradient(
             to bottom,
-            var(--divider-color) 0,
-            var(--divider-color) 5px,
+            var(--divider-700) 0,
+            var(--divider-700) 5px,
             transparent 5px,
             transparent 10px
         );
@@ -96,7 +96,7 @@
     @media print {
         &::before,
         &::after {
-            border-left: 0.5px dashed var(--divider-color);
+            border-left: 0.5px dashed var(--divider-700);
         }
     }
 }
@@ -110,42 +110,121 @@
 }
 
 @utility divider {
-    --divider-color: var(--default-300);
+    --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: light-dark(var(--default-200),var(--default-600));
+    --divider-800: var(--default-800);
+    --divider-900: var(--default-900);
+    --divider-950: var(--default-950);
     @apply divider-core;
-}
-    
-@utility divider-primary {
-    --divider-color: var(--primary-700);
+  }
+  
+  @utility divider-primary {
+    --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);
     @apply divider-core;
-}
-    
-@utility divider-secondary {
-    --divider-color: var(--secondary-700);
+  }
+  
+  @utility divider-secondary {
+    --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);
     @apply divider-core;
-}
-    
-@utility divider-accent {
-    --divider-color: var(--accent-700);
+  }
+  
+  @utility divider-accent {
+    --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);
     @apply divider-core;
-}
-    
-    
-@utility divider-info {
-    --divider-color: var(--info-700);
+  }
+  
+  @utility divider-info {
+    --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);
     @apply divider-core;
-}
-    
-@utility divider-success {
-    --divider-color: var(--success-700);
+  }
+  
+  @utility divider-success {
+    --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);
     @apply divider-core;
-}
-    
-@utility divider-warning {
-    --divider-color: var(--warning-700);
+  }
+  
+  @utility divider-warning {
+    --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);
     @apply divider-core;
-}
-    
-@utility divider-error {
-    --divider-color: var(--error-700);
+  }
+  
+  @utility divider-error {
+    --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);
     @apply divider-core;
-}
+  }

package/src/components/input.css

@@ -1,297 +1,243 @@
 @import "../theme/skins/base.css";
 
 @utility input-size {
-  @layer components {
-    padding-inline: var(--input-inline);
-    padding-block: var(--input-block);
-    font-size: var(--input-text-size);
-  }
+  padding-inline: var(--input-inline);
+  padding-block: var(--input-block);
+  font-size: var(--input-text-size);
 }
 
 @utility input-xs {
-  @layer components {
-    @apply input-size;
-  }
-  @layer theme {
-    --input-inline: 0.875rem;
-    --input-block: 0.375rem;
-    --input-text-size: 0.75rem;
-  }
+  --input-inline: 0.875rem;
+  --input-block: 0.375rem;
+  --input-text-size: 0.75rem;
+  @apply input-size;
 }
 
 @utility input-sm {
-  @layer components {
-    @apply input-size;
-  }
-  @layer theme {
-    --input-inline: 1rem;
-    --input-block: 0.5rem;
-    --input-text-size: 0.875rem;
-  }
+  --input-inline: 1rem;
+  --input-block: 0.5rem;
+  --input-text-size: 0.875rem;
+  @apply input-size;
 }
 
 @utility input-md {
-  @layer components {
-    @apply input-size;
-  }
-  @layer theme {
-    --input-inline: 1.125rem;
-    --input-block: 0.625rem;
-    --input-text-size: 1rem;
-  }
+  --input-inline: 1.125rem;
+  --input-block: 0.625rem;
+  --input-text-size: 1rem;
+  @apply input-size;
 }
 
 @utility input-lg {
-  @layer components {
-    @apply input-size;
-  }
-  @layer theme {
-    --input-inline: 1.25rem;
-    --input-block: 0.75rem;
-    --input-text-size: 1rem;
-  }
+  --input-inline: 1.25rem;
+  --input-block: 0.75rem;
+  --input-text-size: 1rem;
+  @apply input-size;
 }
 
 @utility input-xl {
-  @layer components {
-    @apply input-size;
-  }
-  @layer theme {
-    --input-inline: 1.375rem;
-    --input-block: 0.875rem;
-    --input-text-size: 1rem;
-  }
+  --input-inline: 1.375rem;
+  --input-block: 0.875rem;
+  --input-text-size: 1rem;
+  @apply input-size;
 }
 
 @utility input-2xl {
-  @layer components {
-    @apply input-size;
-  }
-  @layer theme {
-    --input-inline: 1.5rem;
-    --input-block: 1rem;
-    --input-text-size: 1.125rem;
-  }
+  --input-inline: 1.5rem;
+  --input-block: 1rem;
+  --input-text-size: 1.125rem;
+  @apply input-size;
 }
 
 @utility input-dashed {
-  @layer components {
-    &:not(.input-active) {
-      @apply outline-dashed;
-    }
+  &:not(.input-active) {
+    @apply outline-dashed;
   }
 }
 
 
 @utility input-outline {
-  @layer components {
-    &:not(.input-active) {
-      @apply outline outline-solid;
-    }
+  &:not(.input-active) {
+    @apply outline outline-solid;
   }
 }
 
 @utility input-soft {
-  @layer components {
-    &:not(.input-active) {
-      background-color: light-dark(
-        var(--input-100),
-        color-mix(in oklab,var(--input-900)10%,transparent)
-      );
-      color: light-dark(
-        var(--input-800),
-        var(--input-400)
-      );
-    }
+  &:not(.input-active) {
+    background-color: light-dark(
+      var(--input-100),
+      color-mix(in oklab,var(--input-900)10%,transparent)
+    );
+    color: light-dark(
+      var(--input-800),
+      var(--input-400)
+    );
   }
 }
 
 @utility input-ghost {
-  @layer components {
-    &:not(.input-active) {
-      @apply outline-transparent;
-    }
+  &:not(.input-active) {
+    @apply outline-transparent;
   }
 }
 
 @utility input-core {
-  @layer components {
-    @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 placeholder:text-[var(--input-300)];
-    
-    border-radius: var(--radius-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;
 
-    &:is(.input) {
-      @apply outline outline-[var(--input-300)];
-    }
+  border-radius: var(--radius-input);
 
-    &:not(.input) {
-      @apply outline outline-[var(--input-700)];
-    }
+  &::placeholder {
+    @apply text-sm;
+    color: light-dark(
+      var(--core-300),
+      var(--core-800)
+    );
+  }
 
-    &:is(:disabled, [disabled], .input-disabled) {
-      @apply cursor-not-allowed placeholder:text-[var(--input-200)];
-      color:var(--input-50);
-      background-color: light-dark(
-        var(--input-100),
-        var(--input-900)
-      );
-    }
- 
-    &:focus, &:focus-within {
-      @apply outline-[var(--input-800)] ring-2 ring-[var(--input-200)] isolate;
-    }
+  &:is(.input) {
+    outline: 1px solid light-dark(
+      var(--input-300),
+      var(--input-800)
+    );
   }
-}
 
-@utility input {
-  @layer components {
-    @apply input-core;
+  &:not(.input) {
+    outline: 1px solid light-dark(
+      var(--input-700),
+      var(--input-800)
+    );
+  }
+
+  &:is(:disabled, [disabled], .input-disabled) {
+    @apply cursor-not-allowed placeholder:text-[var(--input-200)];
+    color:var(--input-50);
+    background-color: light-dark(
+      var(--input-100),
+      var(--input-900)
+    );
   }
-  @layer theme {
-    --input-50: var(--default-50);
-    --input-100: var(--default-100);
-    --input-200: var(--default-200);
-    --input-300: var(--default-300);
-    --input-400: var(--default-400);
-    --input-500: var(--default-500);
-    --input-600: var(--default-600);
-    --input-700: var(--default-700);
-    --input-800: var(--default-800);
-    --input-900: var(--default-900);
-    --input-950: var(--default-950);
+
+  &:focus, &:focus-within {
+    @apply outline-[var(--input-800)] ring-2 ring-[var(--input-200)] isolate;
   }
 }
 
+@utility input {
+  --input-50: var(--default-50);
+  --input-100: var(--default-100);
+  --input-200: var(--default-200);
+  --input-300: var(--default-300);
+  --input-400: var(--default-400);
+  --input-500: var(--default-500);
+  --input-600: var(--default-600);
+  --input-700: var(--default-700);
+  --input-800: var(--default-800);
+  --input-900: var(--default-900);
+  --input-950: var(--default-950);
+  @apply input-core;
+}
+
 @utility input-primary {
-  @layer components {
-    @apply input-core;
-  }
-  @layer theme {
-    --input-50: var(--primary-50);
-    --input-100: var(--primary-100);
-    --input-200: var(--primary-200);
-    --input-300: var(--primary-300);
-    --input-400: var(--primary-400);
-    --input-500: var(--primary-500);
-    --input-600: var(--primary-600);
-    --input-700: var(--primary-700);
-    --input-800: var(--primary-800);
-    --input-900: var(--primary-900);
-    --input-950: var(--primary-950);
-  }
+  --input-50: var(--primary-50);
+  --input-100: var(--primary-100);
+  --input-200: var(--primary-200);
+  --input-300: var(--primary-300);
+  --input-400: var(--primary-400);
+  --input-500: var(--primary-500);
+  --input-600: var(--primary-600);
+  --input-700: var(--primary-700);
+  --input-800: var(--primary-800);
+  --input-900: var(--primary-900);
+  --input-950: var(--primary-950);
+  @apply input-core;
 }
 
 @utility input-secondary {
-  @layer components {
-    @apply input-core;
-  }
-  @layer theme {
-    --input-50: var(--secondary-50);
-    --input-100: var(--secondary-100);
-    --input-200: var(--secondary-200);
-    --input-300: var(--secondary-300);
-    --input-400: var(--secondary-400);
-    --input-500: var(--secondary-500);
-    --input-600: var(--secondary-600);
-    --input-700: var(--secondary-700);
-    --input-800: var(--secondary-800);
-    --input-900: var(--secondary-900);
-    --input-950: var(--secondary-950);
-  }
+  --input-50: var(--secondary-50);
+  --input-100: var(--secondary-100);
+  --input-200: var(--secondary-200);
+  --input-300: var(--secondary-300);
+  --input-400: var(--secondary-400);
+  --input-500: var(--secondary-500);
+  --input-600: var(--secondary-600);
+  --input-700: var(--secondary-700);
+  --input-800: var(--secondary-800);
+  --input-900: var(--secondary-900);
+  --input-950: var(--secondary-950);
+  @apply input-core;
 }
 
 @utility input-accent {
-  @layer components {
-    @apply input-core;
-  }
-  @layer theme {
-    --input-50: var(--accent-50);
-    --input-100: var(--accent-100);
-    --input-200: var(--accent-200);
-    --input-300: var(--accent-300);
-    --input-400: var(--accent-400);
-    --input-500: var(--accent-500);
-    --input-600: var(--accent-600);
-    --input-700: var(--accent-700);
-    --input-800: var(--accent-800);
-    --input-900: var(--accent-900);
-    --input-950: var(--accent-950);
-  }
+  --input-50: var(--accent-50);
+  --input-100: var(--accent-100);
+  --input-200: var(--accent-200);
+  --input-300: var(--accent-300);
+  --input-400: var(--accent-400);
+  --input-500: var(--accent-500);
+  --input-600: var(--accent-600);
+  --input-700: var(--accent-700);
+  --input-800: var(--accent-800);
+  --input-900: var(--accent-900);
+  --input-950: var(--accent-950);
+  @apply input-core;
 }
 
 @utility input-info {
-  @layer components {
-    @apply input-core;
-  }
-  @layer theme {
-    --input-50: var(--info-50);
-    --input-100: var(--info-100);
-    --input-200: var(--info-200);
-    --input-300: var(--info-300);
-    --input-400: var(--info-400);
-    --input-500: var(--info-500);
-    --input-600: var(--info-600);
-    --input-700: var(--info-700);
-    --input-800: var(--info-800);
-    --input-900: var(--info-900);
-    --input-950: var(--info-950);
-  }
+  --input-50: var(--info-50);
+  --input-100: var(--info-100);
+  --input-200: var(--info-200);
+  --input-300: var(--info-300);
+  --input-400: var(--info-400);
+  --input-500: var(--info-500);
+  --input-600: var(--info-600);
+  --input-700: var(--info-700);
+  --input-800: var(--info-800);
+  --input-900: var(--info-900);
+  --input-950: var(--info-950);
+  @apply input-core;
 }
 
 @utility input-success {
-  @layer components {
-    @apply input-core;
-  }
-  @layer theme {
-    --input-50: var(--success-50);
-    --input-100: var(--success-100);
-    --input-200: var(--success-200);
-    --input-300: var(--success-300);
-    --input-400: var(--success-400);
-    --input-500: var(--success-500);
-    --input-600: var(--success-600);
-    --input-700: var(--success-700);
-    --input-800: var(--success-800);
-    --input-900: var(--success-900);
-    --input-950: var(--success-950);
-  }
+  --input-50: var(--success-50);
+  --input-100: var(--success-100);
+  --input-200: var(--success-200);
+  --input-300: var(--success-300);
+  --input-400: var(--success-400);
+  --input-500: var(--success-500);
+  --input-600: var(--success-600);
+  --input-700: var(--success-700);
+  --input-800: var(--success-800);
+  --input-900: var(--success-900);
+  --input-950: var(--success-950);
+  @apply input-core;
 }
 
 @utility input-warning {
-  @layer components {
-    @apply input-core;
-  }
-  @layer theme {
-    --input-50: var(--warning-50);
-    --input-100: var(--warning-100);
-    --input-200: var(--warning-200);
-    --input-300: var(--warning-300);
-    --input-400: var(--warning-400);
-    --input-500: var(--warning-500);
-    --input-600: var(--warning-600);
-    --input-700: var(--warning-700);
-    --input-800: var(--warning-800);
-    --input-900: var(--warning-900);
-    --input-950: var(--warning-950);
-  }
+  --input-50: var(--warning-50);
+  --input-100: var(--warning-100);
+  --input-200: var(--warning-200);
+  --input-300: var(--warning-300);
+  --input-400: var(--warning-400);
+  --input-500: var(--warning-500);
+  --input-600: var(--warning-600);
+  --input-700: var(--warning-700);
+  --input-800: var(--warning-800);
+  --input-900: var(--warning-900);
+  --input-950: var(--warning-950);
+  @apply input-core;
 }
 
 @utility input-error {
-  @layer components {
-    @apply input-core;
-  }
-  @layer theme {
-    --input-50: var(--error-50);
-    --input-100: var(--error-100);
-    --input-200: var(--error-200);
-    --input-300: var(--error-300);
-    --input-400: var(--error-400);
-    --input-500: var(--error-500);
-    --input-600: var(--error-600);
-    --input-700: var(--error-700);
-    --input-800: var(--error-800);
-    --input-900: var(--error-900);
-    --input-950: var(--error-950);
-  }
+  --input-50: var(--error-50);
+  --input-100: var(--error-100);
+  --input-200: var(--error-200);
+  --input-300: var(--error-300);
+  --input-400: var(--error-400);
+  --input-500: var(--error-500);
+  --input-600: var(--error-600);
+  --input-700: var(--error-700);
+  --input-800: var(--error-800);
+  --input-900: var(--error-900);
+  --input-950: var(--error-950);
+  @apply input-core;
 }

package/src/components/modal.css

@@ -2,19 +2,15 @@
 @import "../theme/placement.css";
 @import "../theme/animation/slide.css";
 
-@utility modal-core{
+@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;
   &:not(modal:not([open]):not(.modal-open)),
   &::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)
-    );
+    background: light-dark(#00000026, #000000ba);
   }
   &[open], &.modal-open {
     @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
-
     .modal-body {
       translate: 0 0;
       scale: 1;
@@ -24,34 +20,31 @@
 }
 
 @utility modal-backdrop {
-  @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
-  background: light-dark(
-    color-mix(in oklab,var(--modal-300)50%,transparent),
-    color-mix(in oklab,var(--modal-900)80%,transparent)
-  );
+  @apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1 bg-transparent;
   button {
     @apply 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 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
+  @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(
-    color-mix(in oklab,var(--modal-300)50%,transparent),
-    color-mix(in oklab,var(--modal-900)60%,transparent)
+    color-mix(in oklab,var(--core-300)50%,transparent),
+    color-mix(in oklab,var(--core-900)60%,transparent)
   );
   background: light-dark(
-    var(--modal-100),
-    var(--modal-800)
+    var(--core-50),
+    var(--core-950)
   );
   color: light-dark(
     var(--default-800),
     var(--default-50)
   );
   border: 1px solid light-dark(
-    var(--modal-300),
-    var(--modal-900)
+    var(--core-300),
+    var(--core-900)
   );
+  transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
 }
 
 
@@ -72,126 +65,4 @@
     @apply [translate:--value(--slide-*)];
     scale: 1;
   }
-}
-
-
-@utility modal {
-  --modal-50: var(--default-50);
-  --modal-100: var(--default-100);
-  --modal-200: var(--default-200);
-  --modal-300: var(--default-300);
-  --modal-400: var(--default-400);
-  --modal-500: var(--default-500);
-  --modal-600: var(--default-600);
-  --modal-700: var(--default-700);
-  --modal-800: var(--default-800);
-  --modal-900: var(--default-900);
-  --modal-950: var(--default-950);
-
-  @apply modal-core;
-}
-
-@utility modal-primary {
-  --modal-50: var(--primary-50);
-  --modal-100: var(--primary-100);
-  --modal-200: var(--primary-200);
-  --modal-300: var(--primary-300);
-  --modal-400: var(--primary-400);
-  --modal-500: var(--primary-500);
-  --modal-600: var(--primary-600);
-  --modal-700: var(--primary-700);
-  --modal-800: var(--primary-800);
-  --modal-900: var(--primary-900);
-  --modal-950: var(--primary-950);
-  @apply modal-core;
-}
-
-@utility modal-secondary {
-  --modal-50: var(--secondary-50);
-  --modal-100: var(--secondary-100);
-  --modal-200: var(--secondary-200);
-  --modal-300: var(--secondary-300);
-  --modal-400: var(--secondary-400);
-  --modal-500: var(--secondary-500);
-  --modal-600: var(--secondary-600);
-  --modal-700: var(--secondary-700);
-  --modal-800: var(--secondary-800);
-  --modal-900: var(--secondary-900);
-  --modal-950: var(--secondary-950);
-  @apply modal-core;
-}
-
-@utility modal-accent {
-  --modal-50: var(--accent-50);
-  --modal-100: var(--accent-100);
-  --modal-200: var(--accent-200);
-  --modal-300: var(--accent-300);
-  --modal-400: var(--accent-400);
-  --modal-500: var(--accent-500);
-  --modal-600: var(--accent-600);
-  --modal-700: var(--accent-700);
-  --modal-800: var(--accent-800);
-  --modal-900: var(--accent-900);
-  --modal-950: var(--accent-950);
-  @apply modal-core;
-}
-
-@utility modal-info {
-  --modal-50: var(--info-50);
-  --modal-100: var(--info-100);
-  --modal-200: var(--info-200);
-  --modal-300: var(--info-300);
-  --modal-400: var(--info-400);
-  --modal-500: var(--info-500);
-  --modal-600: var(--info-600);
-  --modal-700: var(--info-700);
-  --modal-800: var(--info-800);
-  --modal-900: var(--info-900);
-  --modal-950: var(--info-950);
-  @apply modal-core;
-}
-
-@utility modal-success {
-  --modal-50: var(--success-50);
-  --modal-100: var(--success-100);
-  --modal-200: var(--success-200);
-  --modal-300: var(--success-300);
-  --modal-400: var(--success-400);
-  --modal-500: var(--success-500);
-  --modal-600: var(--success-600);
-  --modal-700: var(--success-700);
-  --modal-800: var(--success-800);
-  --modal-900: var(--success-900);
-  --modal-950: var(--success-950);
-  @apply modal-core;
-}
-
-@utility modal-warning {
-  --modal-50: var(--warning-50);
-  --modal-100: var(--warning-100);
-  --modal-200: var(--warning-200);
-  --modal-300: var(--warning-300);
-  --modal-400: var(--warning-400);
-  --modal-500: var(--warning-500);
-  --modal-600: var(--warning-600);
-  --modal-700: var(--warning-700);
-  --modal-800: var(--warning-800);
-  --modal-900: var(--warning-900);
-  --modal-950: var(--warning-950);
-  @apply modal-core;
-}
-
-@utility modal-error {
-  --modal-50: var(--error-50);
-  --modal-100: var(--error-100);
-  --modal-200: var(--error-200);
-  --modal-300: var(--error-300);
-  --modal-400: var(--error-400);
-  --modal-500: var(--error-500);
-  --modal-600: var(--error-600);
-  --modal-700: var(--error-700);
-  --modal-800: var(--error-800);
-  --modal-900: var(--error-900);
-  --modal-950: var(--error-950);
-  @apply modal-core;
-}
+}

package/src/utilities/headings.css

@@ -1,6 +1,10 @@
 @utility heading-* {
     @layer utilities {
-        @apply font-bold text-balance text-core-950;
+        @apply font-bold text-balance;
+        color:light-dark(
+            var(--core-950)
+            var(--core-50)
+        );
         font-size: --value(--text-*);
 
         /* todo: make it heading-md instead of heading-base */