@hazae41/labase 1.0.2 → 1.0.3

package/README.md

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@hazae41/labase",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "The Tailwind framework for monochrome apps",
   "homepage": "https://github.com/hazae41/labase",
   "repository": "github:hazae41/labase",
@@ -12,23 +12,10 @@
   "types": "./dist/types/index.d.ts",
   "sideEffects": false,
   "files": [
-    "./dist/esm",
-    "./dist/cjs",
-    "./dist/types"
+    "./src"
   ],
-  "scripts": {
-    "build": "rimraf ./dist && cp -r ./src ./dist",
-    "prepare": "npm run build"
-  },
-  "devDependencies": {
-    "@hazae41/rimraf": "^1.0.1"
-  },
   "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.mjs",
-      "require": "./dist/cjs/index.cjs"
-    }
+    ".": {}
   },
   "keywords": [
     "monochrome",

package/src/animations/index.css

@@ -0,0 +1,148 @@
+@keyframes opacity-in {
+  from {
+    opacity: 0%;
+  }
+}
+
+@keyframes opacity-out {
+  to {
+    opacity: 0%;
+  }
+}
+
+@keyframes scale-in {
+  from {
+    transform: scale(0%);
+  }
+}
+
+@keyframes scale-out {
+  to {
+    transform: scale(0%);
+  }
+}
+
+@keyframes slideup-in {
+  from {
+    transform: translateY(calc(100vh));
+  }
+}
+
+@keyframes slideup-out {
+  to {
+    transform: translateY(calc(100vh));
+  }
+}
+
+@keyframes flip-in {
+  to {
+    transform: rotateY(180deg);
+  }
+}
+
+@keyframes flip-out {
+  from {
+    transform: rotateY(180deg);
+  }
+}
+
+@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%;
+    transform: scale(0%);
+    translate: calc(var(--x) - (0.5 * var(--w))) calc(var(--y) - (0.5 * var(--h)));
+  }
+}
+
+@keyframes scale-xywh-out {
+  to {
+    opacity: 0%;
+    transform: scale(0%);
+    translate: calc(var(--x) - (0.5 * var(--w))) calc(var(--y) - (0.5 * var(--h)));
+  }
+}
+
+@keyframes vibrate-loop {
+  from {
+    transform: rotate(-1deg);
+  }
+  to {
+    transform: rotate(1deg);
+  }
+}
+
+@utility animate-opacity-in {
+  animation: opacity-in 300ms ease-out;
+}
+
+@utility animate-opacity-out {
+  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;
+}
+
+@utility animate-slideup-out {
+  animation: slideup-out 300ms ease-in;
+}
+
+@utility animate-flip-in {
+  animation: flip-in 900ms ease-in-out;
+}
+
+@utility animate-flip-out {
+  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;
+}
+
+@utility animate-scale-xywh-out {
+  animation: scale-xywh-out 300ms ease-in;
+}
+
+@utility animate-vibrate-loop {
+  animation: vibrate-loop 125ms ease-in-out infinite alternate;
+}

package/src/background/index.css

@@ -0,0 +1,51 @@
+@utility bg-backdrop {
+  @apply bg-neutral-500/50;
+}
+
+@utility bg-default {
+  @apply bg-white;
+
+  @variant dark {
+    @apply bg-black;
+  }
+}
+
+@utility bg-opposite {
+  @apply bg-black;
+
+  @variant dark {
+    @apply bg-white;
+  }
+}
+
+@utility bg-default-contrast {
+  @apply bg-black/[0.05];
+
+  @variant dark {
+    @apply bg-white/[0.075];
+  }
+}
+
+@utility bg-opposite-contrast {
+  @apply bg-black/[0.925];
+
+  @variant dark {
+    @apply bg-white/[0.95];
+  }
+}
+
+@utility bg-default-double-contrast {
+  @apply bg-black/[0.1];
+
+  @variant dark {
+    @apply bg-white/[0.15];
+  }
+}
+
+@utility bg-opposite-double-contrast {
+  @apply bg-black/[0.85];
+
+  @variant dark {
+    @apply bg-white/[0.9];
+  }
+}

package/src/border/index.css

@@ -0,0 +1,287 @@
+@utility border-default {
+  @apply border-white;
+
+  @variant dark {
+    @apply border-black;
+  }
+}
+
+@utility border-opposite {
+  @apply border-black;
+
+  @variant dark {
+    @apply border-white;
+  }
+}
+
+@utility border-default-contrast {
+  @apply border-black/10;
+
+  @variant dark {
+    @apply border-white/15;
+  }
+}
+
+@utility border-opposite-contrast {
+  @apply border-white/85;
+
+  @variant dark {
+    @apply border-black/90;
+  }
+}
+
+@utility border-b-default {
+  @apply border-b-white;
+
+  @variant dark {
+    @apply border-b-black;
+  }
+}
+
+@utility border-l-default {
+  @apply border-l-white;
+
+  @variant dark {
+    @apply border-l-black;
+  }
+}
+
+@utility border-t-default {
+  @apply border-t-white;
+
+  @variant dark {
+    @apply border-t-black;
+  }
+}
+
+@utility border-r-default {
+  @apply border-r-white;
+
+  @variant dark {
+    @apply border-r-black;
+  }
+}
+
+@utility border-x-default {
+  @apply border-x-white;
+
+  @variant dark {
+    @apply border-x-black;
+  }
+}
+
+@utility border-y-default {
+  @apply border-y-white;
+
+  @variant dark {
+    @apply border-y-black;
+  }
+}
+
+@utility border-s-default {
+  @apply border-s-white;
+
+  @variant dark {
+    @apply border-s-black;
+  }
+}
+
+@utility border-e-default {
+  @apply border-e-white;
+
+  @variant dark {
+    @apply border-e-black;
+  }
+}
+
+@utility border-b-opposite {
+  @apply border-b-black;
+
+  @variant dark {
+    @apply border-b-white;
+  }
+}
+
+@utility border-l-opposite {
+  @apply border-l-black;
+
+  @variant dark {
+    @apply border-l-white;
+  }
+}
+
+@utility border-t-opposite {
+  @apply border-t-black;
+
+  @variant dark {
+    @apply border-t-white;
+  }
+}
+
+@utility border-r-opposite {
+  @apply border-r-black;
+
+  @variant dark {
+    @apply border-r-white;
+  }
+}
+
+@utility border-x-opposite {
+  @apply border-x-black;
+
+  @variant dark {
+    @apply border-x-white;
+  }
+}
+
+@utility border-y-opposite {
+  @apply border-y-black;
+
+  @variant dark {
+    @apply border-y-white;
+  }
+}
+
+@utility border-s-opposite {
+  @apply border-s-black;
+
+  @variant dark {
+    @apply border-s-white;
+  }
+}
+
+@utility border-e-opposite {
+  @apply border-e-black;
+
+  @variant dark {
+    @apply border-e-white;
+  }
+}
+
+@utility border-b-default-contrast {
+  @apply border-b-black/10;
+
+  @variant dark {
+    @apply border-b-white/15;
+  }
+}
+
+@utility border-l-default-contrast {
+  @apply border-l-black/10;
+
+  @variant dark {
+    @apply border-l-white/15;
+  }
+}
+
+@utility border-t-default-contrast {
+  @apply border-t-black/10;
+
+  @variant dark {
+    @apply border-t-white/15;
+  }
+}
+
+@utility border-r-default-contrast {
+  @apply border-r-black/10;
+
+  @variant dark {
+    @apply border-r-white/15;
+  }
+}
+
+@utility border-x-default-contrast {
+  @apply border-x-black/10;
+
+  @variant dark {
+    @apply border-x-white/15;
+  }
+}
+
+@utility border-y-default-contrast {
+  @apply border-y-black/10;
+
+  @variant dark {
+    @apply border-y-white/15;
+  }
+}
+
+@utility border-s-default-contrast {
+  @apply border-s-black/10;
+
+  @variant dark {
+    @apply border-s-white/15;
+  }
+}
+
+@utility border-e-default-contrast {
+  @apply border-e-black/10;
+
+  @variant dark {
+    @apply border-e-white/15;
+  }
+}
+
+@utility border-b-opposite-contrast {
+  @apply border-b-black/85;
+
+  @variant dark {
+    @apply border-b-white/90;
+  }
+}
+
+@utility border-l-opposite-contrast {
+  @apply border-l-black/85;
+
+  @variant dark {
+    @apply border-l-white/90;
+  }
+}
+
+@utility border-t-opposite-contrast {
+  @apply border-t-black/85;
+
+  @variant dark {
+    @apply border-t-white/90;
+  }
+}
+
+@utility border-r-opposite-contrast {
+  @apply border-r-black/85;
+
+  @variant dark {
+    @apply border-r-white/90;
+  }
+}
+
+@utility border-x-opposite-contrast {
+  @apply border-x-black/85;
+
+  @variant dark {
+    @apply border-x-white/90;
+  }
+}
+
+@utility border-y-opposite-contrast {
+  @apply border-y-black/85;
+
+  @variant dark {
+    @apply border-y-white/90;
+  }
+}
+
+@utility border-s-opposite-contrast {
+  @apply border-s-black/85;
+
+  @variant dark {
+    @apply border-s-white/90;
+  }
+}
+
+@utility border-e-opposite-contrast {
+  @apply border-e-black/85;
+
+  @variant dark {
+    @apply border-e-white/90;
+  }
+}

package/src/divide/index.css

@@ -0,0 +1,31 @@
+@utility divide-default {
+  @apply divide-white;
+
+  @variant dark {
+    @apply divide-black;
+  }
+}
+
+@utility divide-opposite {
+  @apply divide-black;
+
+  @variant dark {
+    @apply divide-white;
+  }
+}
+
+@utility divide-default-contrast {
+  @apply divide-black/10;
+  
+  @variant dark {
+    @apply divide-white/15;
+  }
+}
+
+@utility divide-opposite-contrast {
+  @apply divide-black/85;
+
+  @variant dark {
+    @apply divide-white/90;
+  }
+}

package/src/index.css

@@ -0,0 +1,38 @@
+@import "tailwindcss";
+
+@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";
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+html,
+body {
+  font-size: 16px;
+}
+
+body {
+  font-family: ui-rounded, system-ui, sans-serif;
+}
+
+html {
+  @apply h-full w-full;
+}
+
+body {
+  @apply h-full w-full text-base text-default bg-default overflow-hidden;
+}
+
+#__next {
+  @apply h-full w-full overflow-hidden;
+}
+
+::backdrop {
+  @apply bg-transparent;
+}

package/src/margin/index.css

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

package/src/margin/oblong/index.css

@@ -0,0 +1,4 @@
+@utility mo-* {
+  margin-inline: calc(var(--spacing) * --value(integer) * 2);
+  margin-block: calc(var(--spacing) * --value(integer));
+}

package/src/margin/safe/index.css

@@ -0,0 +1,27 @@
+@utility ml-safe {
+  margin-left: env(safe-area-inset-left);
+}
+
+@utility mr-safe {
+  margin-right: env(safe-area-inset-right);
+}
+
+@utility mb-safe {
+  margin-bottom: env(safe-area-inset-bottom);
+}
+
+@utility mt-safe {
+  margin-top: env(safe-area-inset-top);
+}
+
+@utility my-safe {
+  @apply mt-safe mb-safe;
+}
+
+@utility mx-safe {
+  @apply ml-safe mr-safe;
+}
+
+@utility m-safe {
+  @apply mx-safe my-safe;
+}

package/src/outline/index.css

@@ -0,0 +1,31 @@
+@utility outline-default {
+  @apply outline-white;
+
+  @variant dark {
+    @apply outline-black;
+  }
+}
+
+@utility outline-opposite {
+  @apply outline-black;
+
+  @variant dark {
+    @apply outline-white;
+  }
+}
+
+@utility outline-default-contrast {
+  @apply outline-black/10;
+
+  @variant dark {
+    @apply outline-white/15;
+  }
+}
+
+@utility outline-opposite-contrast {
+  @apply outline-white/85;
+
+  @variant dark {
+    @apply outline-black/90;
+  }
+}

package/src/padding/index.css

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

package/src/padding/oblong/index.css

@@ -0,0 +1,4 @@
+@utility po-* {
+  padding-inline: calc(var(--spacing) * --value(integer) * 2);
+  padding-block: calc(var(--spacing) * --value(integer));
+}

package/src/padding/safe/index.css

@@ -0,0 +1,27 @@
+@utility pt-safe {
+  padding-top: var(--safe-area-inset-top, env(safe-area-inset-top));
+}
+
+@utility pb-safe {
+  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
+}
+
+@utility pl-safe {
+  padding-left: var(--safe-area-inset-left, env(safe-area-inset-left));
+}
+
+@utility pr-safe {
+  padding-right: var(--safe-area-inset-right, env(safe-area-inset-right));
+}
+
+@utility py-safe {
+  @apply pt-safe pb-safe;
+}
+
+@utility px-safe {
+  @apply pl-safe pr-safe;
+}
+
+@utility p-safe {
+  @apply px-safe py-safe;
+}

package/src/scrollbar/index.css

@@ -0,0 +1,51 @@
+@utility scrollbar-white {
+  @supports (-moz-appearance:none) {
+    scrollbar-color: rgba(0 0 0 / 0.1) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    @apply bg-white;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-black/10 rounded-[10px] border-[3px] border-solid border-white;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-black/20 rounded-[10px] border-[3px] border-solid border-white;
+  }
+}
+
+@utility scrollbar-black {
+  @supports (-moz-appearance:none) {
+    scrollbar-color: rgba(255 255 255 / 0.1) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    @apply bg-black;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-white/10 rounded-[10px] border-[3px] border-solid border-black;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-white/20 rounded-[10px] border-[3px] border-solid border-black;
+  }
+}
+
+@utility scrollbar-default {
+  @apply scrollbar-white;
+
+  @variant dark {
+    @apply scrollbar-black;
+  }
+}
+
+@utility scrollbar-opposite {
+  @apply scrollbar-black;
+
+  @variant dark {
+    @apply scrollbar-white;
+  }
+}

package/src/text/index.css

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