@hazae41/labase 1.0.30 → 1.0.32

package/README.md

@@ -16,7 +16,7 @@ npm i @hazae41/labase
 ## Setup
 
 ```css
-@import "../node_modules/@hazae41/labase/src/index.css";
+@import "../node_modules/@hazae41/labase/src/mod.css";
 ```
 
 ## Usage

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@hazae41/labase",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "The Tailwind framework for monochrome apps",
   "repository": "github:hazae41/labase",
   "author": "hazae41",

package/src/animations/{index.css → mod.css}

@@ -10,18 +10,6 @@
   }
 }
 
-@keyframes scale-in {
-  from {
-    transform: scale(0%);
-  }
-}
-
-@keyframes scale-out {
-  to {
-    transform: scale(0%);
-  }
-}
-
 @keyframes slideup-in {
   from {
     transform: translateY(calc(100vh));
@@ -46,22 +34,6 @@
   }
 }
 
-@keyframes scale-xy-in {
-  from {
-    opacity: 0%;
-    transform: scale(0%);
-    translate: calc(-50vw + var(--x)) calc(-50vh + var(--y));
-  }
-}
-
-@keyframes scale-xy-out {
-  to {
-    opacity: 0%;
-    transform: scale(0%);
-    translate: calc(-50vw + var(--x)) calc(-50vh + var(--y));
-  }
-}
-
 @keyframes scale-xywh-in {
   from {
     opacity: 0%;
@@ -82,6 +54,7 @@
   from {
     transform: rotate(-1deg);
   }
+
   to {
     transform: rotate(1deg);
   }
@@ -95,14 +68,6 @@
   animation: opacity-out 300ms ease-in;
 }
 
-@utility animate-scale-in {
-  animation: scale-in 300ms ease-out;
-}
-
-@utility animate-scale-out {
-  animation: scale-out 300ms ease-in;
-}
-
 @utility animate-slideup-in {
   animation: slideup-in 300ms ease-out;
 }
@@ -119,22 +84,6 @@
   animation: flip-out 900ms ease-in-out;
 }
 
-@utility animate-opacity-scale-in {
-  animation: opacity-in 300ms ease-out, scale 300ms ease-out;
-}
-
-@utility animate-opacity-scale-out {
-  animation: opacity-out 300ms ease-in, scale 300ms ease-in;
-}
-
-@utility animate-scale-xy-in {
-  animation: scale-xy-in 300ms ease-out;
-}
-
-@utility animate-scale-xy-out {
-  animation: scale-xy-out 300ms ease-in;
-}
-
 @utility animate-scale-xywh-in {
   animation: scale-xywh-in 300ms ease-out;
 }

package/src/background/{index.css → mod.css}

@@ -3,49 +3,73 @@
 }
 
 @utility bg-default {
-  @apply bg-white;
+
+  @variant light {
+    @apply bg-white;
+  }
 
   @variant dark {
     @apply bg-black;
   }
+
 }
 
 @utility bg-opposite {
-  @apply bg-black;
+
+  @variant light {
+    @apply bg-black;
+  }
 
   @variant dark {
     @apply bg-white;
   }
+
 }
 
 @utility bg-default-contrast {
-  @apply bg-black/5;
+
+  @variant light {
+    @apply bg-black/5;
+  }
 
   @variant dark {
     @apply bg-white/10;
   }
+
 }
 
 @utility bg-opposite-contrast {
-  @apply bg-black/90;
+
+  @variant light {
+    @apply bg-black/90;
+  }
 
   @variant dark {
     @apply bg-white/95;
   }
+
 }
 
 @utility bg-default-double-contrast {
-  @apply bg-black/10;
+
+  @variant light {
+    @apply bg-black/10;
+  }
 
   @variant dark {
     @apply bg-white/20;
   }
+
 }
 
 @utility bg-opposite-double-contrast {
-  @apply bg-black/80;
+
+  @variant light {
+    @apply bg-black/80;
+  }
 
   @variant dark {
     @apply bg-white/90;
   }
+
 }

package/src/border/{index.css → mod.css}

@@ -1,289 +1,431 @@
 @utility border-default {
-  @apply border-white;
+
+  @variant light {
+    @apply border-white;
+  }
 
   @variant dark {
     @apply border-black;
   }
+
 }
 
 @utility border-opposite {
-  @apply border-black;
+
+  @variant light {
+    @apply border-black;
+  }
 
   @variant dark {
     @apply border-white;
   }
+
 }
 
 @utility border-default-contrast {
-  @apply border-black/10;
+
+  @variant light {
+    @apply border-black/10;
+  }
 
   @variant dark {
     @apply border-white/20;
   }
+
 }
 
 @utility border-opposite-contrast {
-  /* strong dark on light */
-  @apply border-black/80;
+
+  @variant light {
+    @apply border-black/80;
+  }
 
   @variant dark {
-    /* strong light on dark */
     @apply border-white/90;
   }
+
 }
 
 @utility border-b-default {
-  @apply border-b-white;
+
+  @variant light {
+    @apply border-b-white;
+  }
 
   @variant dark {
     @apply border-b-black;
   }
+
 }
 
 @utility border-l-default {
-  @apply border-l-white;
+
+  @variant light {
+    @apply border-l-white;
+  }
 
   @variant dark {
     @apply border-l-black;
   }
+
 }
 
 @utility border-t-default {
-  @apply border-t-white;
+
+  @variant light {
+    @apply border-t-white;
+  }
 
   @variant dark {
     @apply border-t-black;
   }
+
 }
 
 @utility border-r-default {
-  @apply border-r-white;
+
+  @variant light {
+    @apply border-r-white;
+  }
 
   @variant dark {
     @apply border-r-black;
   }
+
 }
 
 @utility border-x-default {
-  @apply border-x-white;
+
+  @variant light {
+    @apply border-x-white;
+  }
 
   @variant dark {
     @apply border-x-black;
   }
+
 }
 
 @utility border-y-default {
-  @apply border-y-white;
+
+  @variant light {
+    @apply border-y-white;
+  }
 
   @variant dark {
     @apply border-y-black;
   }
+
 }
 
 @utility border-s-default {
-  @apply border-s-white;
+
+  @variant light {
+    @apply border-s-white;
+  }
 
   @variant dark {
     @apply border-s-black;
   }
+
 }
 
 @utility border-e-default {
-  @apply border-e-white;
+
+  @variant light {
+    @apply border-e-white;
+  }
 
   @variant dark {
     @apply border-e-black;
   }
+
 }
 
 @utility border-b-opposite {
-  @apply border-b-black;
+
+  @variant light {
+    @apply border-b-black;
+  }
 
   @variant dark {
     @apply border-b-white;
   }
+
 }
 
 @utility border-l-opposite {
-  @apply border-l-black;
+
+  @variant light {
+    @apply border-l-black;
+  }
 
   @variant dark {
     @apply border-l-white;
   }
+
 }
 
 @utility border-t-opposite {
-  @apply border-t-black;
+
+  @variant light {
+    @apply border-t-black;
+  }
 
   @variant dark {
     @apply border-t-white;
   }
+
 }
 
 @utility border-r-opposite {
-  @apply border-r-black;
+
+  @variant light {
+    @apply border-r-black;
+  }
 
   @variant dark {
     @apply border-r-white;
   }
+
 }
 
 @utility border-x-opposite {
-  @apply border-x-black;
+
+  @variant light {
+    @apply border-x-black;
+  }
 
   @variant dark {
     @apply border-x-white;
   }
+
 }
 
 @utility border-y-opposite {
-  @apply border-y-black;
+
+  @variant light {
+    @apply border-y-black;
+  }
 
   @variant dark {
     @apply border-y-white;
   }
+
 }
 
 @utility border-s-opposite {
-  @apply border-s-black;
+
+  @variant light {
+    @apply border-s-black;
+  }
 
   @variant dark {
     @apply border-s-white;
   }
+
 }
 
 @utility border-e-opposite {
-  @apply border-e-black;
+
+  @variant light {
+    @apply border-e-black;
+  }
 
   @variant dark {
     @apply border-e-white;
   }
+
 }
 
 @utility border-b-default-contrast {
-  @apply border-b-black/10;
+
+  @variant light {
+    @apply border-b-black/10;
+  }
 
   @variant dark {
     @apply border-b-white/20;
   }
+
 }
 
 @utility border-l-default-contrast {
-  @apply border-l-black/10;
+
+  @variant light {
+    @apply border-l-black/10;
+  }
 
   @variant dark {
     @apply border-l-white/20;
   }
+
 }
 
 @utility border-t-default-contrast {
-  @apply border-t-black/10;
+
+  @variant light {
+    @apply border-t-black/10;
+  }
 
   @variant dark {
     @apply border-t-white/20;
   }
+
 }
 
 @utility border-r-default-contrast {
-  @apply border-r-black/10;
+
+  @variant light {
+    @apply border-r-black/10;
+  }
 
   @variant dark {
     @apply border-r-white/20;
   }
+
 }
 
 @utility border-x-default-contrast {
-  @apply border-x-black/10;
+
+  @variant light {
+    @apply border-x-black/10;
+  }
 
   @variant dark {
     @apply border-x-white/20;
   }
+
 }
 
 @utility border-y-default-contrast {
-  @apply border-y-black/10;
+
+  @variant light {
+    @apply border-y-black/10;
+  }
 
   @variant dark {
     @apply border-y-white/20;
   }
+
 }
 
 @utility border-s-default-contrast {
-  @apply border-s-black/10;
+
+  @variant light {
+    @apply border-s-black/10;
+  }
 
   @variant dark {
     @apply border-s-white/20;
   }
+
 }
 
 @utility border-e-default-contrast {
-  @apply border-e-black/10;
+
+  @variant light {
+    @apply border-e-black/10;
+  }
 
   @variant dark {
     @apply border-e-white/20;
   }
+
 }
 
 @utility border-b-opposite-contrast {
-  @apply border-b-black/80;
+
+  @variant light {
+    @apply border-b-black/80;
+  }
 
   @variant dark {
     @apply border-b-white/90;
   }
+
 }
 
 @utility border-l-opposite-contrast {
-  @apply border-l-black/80;
+
+  @variant light {
+    @apply border-l-black/80;
+  }
 
   @variant dark {
     @apply border-l-white/90;
   }
+
 }
 
 @utility border-t-opposite-contrast {
-  @apply border-t-black/80;
+
+  @variant light {
+    @apply border-t-black/80;
+  }
 
   @variant dark {
     @apply border-t-white/90;
   }
+
 }
 
 @utility border-r-opposite-contrast {
-  @apply border-r-black/80;
+
+  @variant light {
+    @apply border-r-black/80;
+  }
 
   @variant dark {
     @apply border-r-white/90;
   }
+
 }
 
 @utility border-x-opposite-contrast {
-  @apply border-x-black/80;
+
+  @variant light {
+    @apply border-x-black/80;
+  }
 
   @variant dark {
     @apply border-x-white/90;
   }
+
 }
 
 @utility border-y-opposite-contrast {
-  @apply border-y-black/80;
+
+  @variant light {
+    @apply border-y-black/80;
+  }
 
   @variant dark {
     @apply border-y-white/90;
   }
+
 }
 
 @utility border-s-opposite-contrast {
-  @apply border-s-black/80;
+
+  @variant light {
+    @apply border-s-black/80;
+  }
 
   @variant dark {
     @apply border-s-white/90;
   }
+
 }
 
 @utility border-e-opposite-contrast {
-  @apply border-e-black/80;
+
+  @variant light {
+    @apply border-e-black/80;
+  }
 
   @variant dark {
     @apply border-e-white/90;
   }
+
 }

package/src/divide/{index.css → mod.css}

@@ -1,31 +1,47 @@
 @utility divide-default {
-  @apply divide-white;
+
+  @variant light {
+    @apply divide-white;
+  }
 
   @variant dark {
     @apply divide-black;
   }
+
 }
 
 @utility divide-opposite {
-  @apply divide-black;
+
+  @variant light {
+    @apply divide-black;
+  }
 
   @variant dark {
     @apply divide-white;
   }
+
 }
 
 @utility divide-default-contrast {
-  @apply divide-black/10;
+
+  @variant light {
+    @apply divide-black/10;
+  }
 
   @variant dark {
     @apply divide-white/20;
   }
+
 }
 
 @utility divide-opposite-contrast {
-  @apply divide-black/80;
+
+  @variant light {
+    @apply divide-black/80;
+  }
 
   @variant dark {
     @apply divide-white/90;
   }
+
 }

package/src/margin/mod.css

@@ -0,0 +1,2 @@
+@import "./oblong/mod.css";
+@import "./safe/mod.css";

package/src/{index.css → mod.css}

@@ -1,15 +1,16 @@
 @import "tailwindcss/index";
 
-@import "./padding/index.css";
-@import "./margin/index.css";
-@import "./animations/index.css";
-@import "./background/index.css";
-@import "./text/index.css";
-@import "./border/index.css";
-@import "./outline/index.css";
-@import "./divide/index.css";
-@import "./scrollbar/index.css";
-@import "./selection/index.css";
+@import "./padding/mod.css";
+@import "./margin/mod.css";
+@import "./animations/mod.css";
+@import "./background/mod.css";
+@import "./text/mod.css";
+@import "./border/mod.css";
+@import "./outline/mod.css";
+@import "./divide/mod.css";
+@import "./scrollbar/mod.css";
+@import "./scrollfade/mod.css";
+@import "./selection/mod.css";
 
 @custom-variant light {
   @media (prefers-color-scheme: light) {
@@ -47,6 +48,42 @@
   }
 }
 
+@custom-variant in-light {
+  @media (prefers-color-scheme: light) {
+    &:not([data-theme="dark"] *, [data-theme="opposite"] *) {
+      @slot;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:where([data-theme="opposite"] *) {
+      @slot;
+    }
+  }
+
+  &:where([data-theme="light"] *) {
+    @slot;
+  }
+}
+
+@custom-variant in-dark {
+  @media (prefers-color-scheme: dark) {
+    &:not([data-theme="light"] *, [data-theme="opposite"] *) {
+      @slot;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    &:where([data-theme="opposite"] *) {
+      @slot;
+    }
+  }
+
+  &:where([data-theme="dark"] *) {
+    @slot;
+  }
+}
+
 @layer base {
 
   html {

package/src/outline/{index.css → mod.css}

@@ -1,31 +1,47 @@
 @utility outline-default {
-  @apply outline-white;
+
+  @variant light {
+    @apply outline-white;
+  }
 
   @variant dark {
     @apply outline-black;
   }
+
 }
 
 @utility outline-opposite {
-  @apply outline-black;
+
+  @variant light {
+    @apply outline-black;
+  }
 
   @variant dark {
     @apply outline-white;
   }
+
 }
 
 @utility outline-default-contrast {
-  @apply outline-black/10;
+
+  @variant light {
+    @apply outline-black/10;
+  }
 
   @variant dark {
     @apply outline-white/20;
   }
+
 }
 
 @utility outline-opposite-contrast {
-  @apply outline-black/80;
+
+  @variant light {
+    @apply outline-black/80;
+  }
 
   @variant dark {
     @apply outline-white/90;
   }
+
 }

package/src/padding/mod.css

@@ -0,0 +1,2 @@
+@import "./oblong/mod.css";
+@import "./safe/mod.css";

package/src/scrollbar/{index.css → mod.css}

@@ -35,20 +35,23 @@
 }
 
 @utility scrollbar-default-* {
-  @supports (-moz-appearance:none) {
-    scrollbar-color: rgba(0 0 0 / 0.1) --value([color]);
-  }
 
-  &::-webkit-scrollbar {
-    background-color: --value([color]);
-  }
+  @variant light {
+    @supports (-moz-appearance:none) {
+      scrollbar-color: rgba(0 0 0 / 0.1) --value([color]);
+    }
 
-  &::-webkit-scrollbar-thumb {
-    @apply bg-black/10 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
-  }
+    &::-webkit-scrollbar {
+      background-color: --value([color]);
+    }
 
-  &::-webkit-scrollbar-thumb:hover {
-    @apply bg-black/20 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
+    &::-webkit-scrollbar-thumb {
+      @apply bg-black/10 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      @apply bg-black/20 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
+    }
   }
 
   @variant dark {
@@ -68,23 +71,27 @@
       @apply bg-white/20 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
     }
   }
+
 }
 
 @utility scrollbar-opposite-* {
-  @supports (-moz-appearance:none) {
-    scrollbar-color: rgba(255 255 255 / 0.1) --value([color]);
-  }
 
-  &::-webkit-scrollbar {
-    background-color: --value([color]);
-  }
+  @variant light {
+    @supports (-moz-appearance:none) {
+      scrollbar-color: rgba(255 255 255 / 0.1) --value([color]);
+    }
 
-  &::-webkit-scrollbar-thumb {
-    @apply bg-white/10 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
-  }
+    &::-webkit-scrollbar {
+      background-color: --value([color]);
+    }
 
-  &::-webkit-scrollbar-thumb:hover {
-    @apply bg-white/20 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
+    &::-webkit-scrollbar-thumb {
+      @apply bg-white/10 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      @apply bg-white/20 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
+    }
   }
 
   @variant dark {
@@ -104,4 +111,5 @@
       @apply bg-black/20 rounded-[10px] border-[3px] border-solid border-transparent bg-clip-padding;
     }
   }
+
 }

package/src/scrollfade/mod.css

@@ -0,0 +1,95 @@
+@property --scrollfade-s {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --scrollfade-e {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@keyframes scrollfade {
+  0% {
+    --scrollfade-s: 0;
+  }
+
+  10%,
+  100% {
+    --scrollfade-s: 4rem;
+  }
+
+  0%,
+  90% {
+    --scrollfade-e: 4rem;
+  }
+
+  100% {
+    --scrollfade-e: 0;
+  }
+}
+
+@utility scrollfade-x-default {
+  animation: scrollfade;
+  animation-timeline: --scrollfade;
+  scroll-timeline: --scrollfade x;
+
+  @variant light {
+    mask-image: linear-gradient(to right, transparent, black var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+  }
+
+  @variant dark {
+    mask-image: linear-gradient(to right, transparent, white var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, white var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+  }
+}
+
+@utility scrollfade-x-opposite {
+  animation: scrollfade;
+  animation-timeline: --scrollfade;
+  scroll-timeline: --scrollfade x;
+
+  @variant light {
+    mask-image: linear-gradient(to right, transparent, white var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, white var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+  }
+
+  @variant dark {
+    mask-image: linear-gradient(to right, transparent, black var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+  }
+}
+
+@utility scrollfade-y-default {
+  animation: scrollfade;
+  animation-timeline: --scrollfade;
+  scroll-timeline: --scrollfade y;
+
+  @variant light {
+    mask-image: linear-gradient(to bottom, transparent, black var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+    -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+  }
+
+  @variant dark {
+    mask-image: linear-gradient(to bottom, transparent, white var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+    -webkit-mask-image: linear-gradient(to bottom, transparent, white var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+  }
+}
+
+@utility scrollfade-y-opposite {
+  animation: scrollfade;
+  animation-timeline: --scrollfade;
+  scroll-timeline: --scrollfade y;
+
+  @variant light {
+    mask-image: linear-gradient(to bottom, transparent, white var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+    -webkit-mask-image: linear-gradient(to bottom, transparent, white var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+  }
+
+  @variant dark {
+    mask-image: linear-gradient(to bottom, transparent, black var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+    -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--scrollfade-s) calc(100% - var(--scrollfade-e)), transparent);
+  }
+}

package/src/selection/{index.css → mod.css}

@@ -1,6 +1,9 @@
 @utility selection-default {
-  &::selection {
-    @apply bg-black/10;
+
+  @variant light {
+    &::selection {
+      @apply bg-black/10;
+    }
   }
 
   @variant dark {
@@ -8,11 +11,15 @@
       @apply bg-white/40;
     }
   }
+
 }
 
 @utility selection-opposite {
-  &::selection {
-    @apply bg-white/40;
+
+  @variant light {
+    &::selection {
+      @apply bg-white/40;
+    }
   }
 
   @variant dark {
@@ -20,4 +27,5 @@
       @apply bg-black/10;
     }
   }
+
 }

package/src/text/{index.css → mod.css}

@@ -1,49 +1,73 @@
 @utility text-default {
-  @apply text-black;
+
+  @variant light {
+    @apply text-black;
+  }
 
   @variant dark {
     @apply text-white;
   }
+
 }
 
 @utility text-opposite {
-  @apply text-white;
-  
+
+  @variant light {
+    @apply text-white;
+  }
+
   @variant dark {
     @apply text-black;
   }
+
 }
 
 @utility text-default-contrast {
-  @apply text-black/50;
+
+  @variant light {
+    @apply text-black/50;
+  }
 
   @variant dark {
     @apply text-white/50;
   }
+
 }
 
 @utility text-opposite-contrast {
-  @apply text-white/50;
+
+  @variant light {
+    @apply text-white/50;
+  }
 
   @variant dark {
     @apply text-black/50;
   }
+
 }
 
 @utility text-default-half-contrast {
-  @apply text-black/75;
+
+  @variant light {
+    @apply text-black/75;
+  }
 
   @variant dark {
     @apply text-white/75;
   }
+
 }
 
 @utility text-opposite-half-contrast {
-  @apply text-white/75;
+
+  @variant light {
+    @apply text-white/75;
+  }
 
   @variant dark {
     @apply text-black/75;
   }
+
 }
 
 @utility text-white-contrast {

package/src/margin/index.css

@@ -1,2 +0,0 @@
-@import "./oblong/index.css";
-@import "./safe/index.css";

package/src/padding/index.css

@@ -1,3 +0,0 @@
-@import "./oblong/index.css";
-@import "./safe/index.css";
-@import "./scroll/index.css";

package/src/padding/scroll/index.css

@@ -1,7 +0,0 @@
-@utility p-scroll {
-  @apply p-[3px];
-
-  @supports (-moz-appearance:none) {
-    @apply p-[1px];
-  }
-}