frutjam 0.8.0-beta.0 → 0.8.0-beta.1

package/package.json

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

package/src/components/button.css

@@ -80,7 +80,7 @@
   /* for default btn */
   &:is(.btn) {
     background-color: light-dark(
-      var(--btn-100),
+      var(--btn-200),
       var(--btn-800)
     );
     color: light-dark(
@@ -129,8 +129,8 @@
       /* for default btn */
       &:is(.btn) {
         background-color: light-dark(
-          var(--btn-200),
-          var(--btn-800)
+          var(--btn-300),
+          var(--btn-900)
         );
 
         color: light-dark(

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,14 +2,14 @@
 @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)
+      color-mix(in oklab,var(--core-100)15%,transparent),
+      color-mix(in oklab,var(--core-800)50%,transparent)
     );
   }
   &[open], &.modal-open {
@@ -26,8 +26,8 @@
 @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)
+    color-mix(in oklab,var(--core-300)50%,transparent),
+    color-mix(in oklab,var(--core-900)80%,transparent)
   );
   button {
     @apply cursor-pointer;
@@ -37,20 +37,20 @@
 @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;
   --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)
   );
 }
 
@@ -72,126 +72,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 */